/* =====================================================================
   SINGLE ELEMENT PAGES  /elements/metal|wood|water|fire|earth/
   Ported from the five supplied prototypes. Their classes are all ex-
   prefixed and their element selectors hang off .elx, so nothing here can
   touch the rest of the site. The only per-page difference in the prototypes
   was two variables (--el / --el-dim), now set by .elx--<slug>.
   ===================================================================== */
.elx.elx--metal{--el:#B0863B;--el-dim:#7a5c28}
.elx.elx--wood{--el:#5C7A4E;--el-dim:#3E5238}
.elx.elx--water{--el:#3E5A6B;--el-dim:#2b4050}
.elx.elx--fire{--el:#B04A38;--el-dim:#7e3427}
.elx.elx--earth{--el:#B08A4E;--el-dim:#7d6136}

.elx{
  --paper:#F5F0E6; --ink:#141210; --panel:#1C1915; --panel2:#171410;
  --gold:#A6792F; --gold-soft:#C29A52; --line:#332E26; --line2:#26221c;
  --muted:#8A8170;
}
.elx *{margin:0;padding:0;box-sizing:border-box}
.elx{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;background:var(--ink);color:var(--paper);line-height:1.7;font-size:15px}
.elx h1,.elx h2,.elx h3,.elx h4,.elx .ex-serif{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;line-height:1.15}
.ex-wrap{max-width:1040px;margin:0 auto;padding:0 26px}
.ex-eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--el);font-weight:600}
.ex-brand{font-family:"Cormorant Garamond",serif;font-size:24px;font-weight:700;letter-spacing:.12em}
.ex-brand span{color:var(--gold-soft)}
header.ex-nav{border-bottom:1px solid var(--line);padding:16px 0}
.ex-nav-inner{display:flex;justify-content:space-between;align-items:center}
.ex-nav-inner nav a{font-size:13px;color:var(--muted);margin-left:20px;cursor:pointer}
.ex-nav-inner nav a:hover{color:var(--gold-soft)}
.ex-hero{padding:64px 0 40px;text-align:center;border-bottom:1px solid var(--line)}
.ex-hero .ex-cn{font-size:104px;line-height:1;color:var(--el)}
.ex-hero .ex-en{font-size:12px;letter-spacing:.34em;margin-top:14px;color:var(--el)}
.ex-hero h1{font-size:clamp(30px,4.4vw,48px);margin:18px auto 14px}
.ex-hero .ex-lede{color:var(--muted);max-width:600px;margin:0 auto}
.elx section{padding:52px 0;border-bottom:1px solid var(--line)}
.ex-s-head{margin-bottom:26px}
.ex-s-head .ex-k{font-size:11px;letter-spacing:.18em;color:var(--el);text-transform:uppercase}
.ex-s-head h2{font-size:clamp(24px,3vw,34px);margin:8px 0 0}
p.ex-body{color:#cbc2b0;margin-bottom:14px;font-size:14.5px}
p.ex-body b{color:var(--paper)}
.ex-two{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.ex-three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ex-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ex-chip{background:#171410;border:1px solid var(--line2);border-radius:3px;padding:16px}
.ex-chip .ex-n{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--el)}
.ex-chip .ex-v{font-size:16px;margin:5px 0 4px;font-family:"Cormorant Garamond",serif}
.ex-chip p{font-size:12.5px;color:var(--muted)}
.ex-signal{background:#171410;border-left:2px solid var(--el);padding:16px 18px;margin-bottom:12px;border-radius:0 3px 3px 0}
.ex-signal p{font-size:13.5px;color:#cbc2b0}
.ex-signal .ex-k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--el);display:block;margin-bottom:5px}
.ex-char{background:#171410;border:1px solid var(--line2);border-radius:3px;padding:20px}
.ex-char h4{font-size:18px;color:var(--el);margin-bottom:10px}
.ex-char ul{list-style:none}
.ex-char li{font-size:13px;color:#cbc2b0;padding:5px 0 5px 16px;position:relative}
.ex-char li:before{content:'';position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--el)}
.ex-rels{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ex-rel{background:#171410;border:1px solid var(--line2);border-radius:3px;padding:18px}
.ex-rel .ex-k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--el)}
.ex-rel h4{font-size:17px;margin:6px 0 6px}
.ex-rel p{font-size:12.5px;color:var(--muted)}
.ex-corr{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ex-corr .ex-c{background:#171410;border:1px solid var(--line2);border-radius:2px;padding:11px 12px}
.ex-corr .ex-k{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block}
.ex-corr .ex-v{font-size:13px;color:#d8cfbd}
.ex-classic{background:#171410;border:1px solid var(--line2);border-radius:3px;padding:24px;text-align:center}
.ex-classic .ex-q{font-size:22px;color:var(--el);font-family:"Cormorant Garamond",serif}
.ex-classic .ex-src{font-size:12px;color:var(--muted);margin-top:10px}
.ex-prac{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ex-pst{background:#171410;border:1px solid var(--line2);border-radius:3px;padding:18px}
.ex-pst .ex-n{font-size:12px;color:var(--el)}
.ex-pst h4{font-size:17px;margin:8px 0 6px}
.ex-pst p{font-size:12.5px;color:var(--muted)}
.ex-piece{background:#171410;border:1px solid var(--line);border-radius:3px;overflow:hidden;display:grid;grid-template-columns:1fr 1.2fr}
.ex-piece .ex-ph{border:none;border-radius:0;aspect-ratio:auto}
.ex-ph{border:1.5px dashed #4a4335;border-radius:3px;background:#171410;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:#8A8170;padding:22px;gap:6px}
.ex-ph .ex-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--el)}
.ex-ph .ex-what{font-size:12.5px}
.ex-piece .ex-info{padding:24px}
.ex-piece .ex-price{color:var(--el);font-size:15px;margin:8px 0 12px}
.ex-piece p{font-size:13px;color:#cbc2b0}
.ex-qline{font-size:20px;color:var(--el);font-family:"Cormorant Garamond",serif;font-style:italic;text-align:center;margin:6px 0}
.ex-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ex-btn{display:inline-block;padding:14px 28px;font-size:13px;letter-spacing:.1em;cursor:pointer;border-radius:2px;border:1px solid var(--gold);background:var(--gold);color:#fff}
.ex-btn:hover{background:#8f6624}
.ex-btn-ghost{background:transparent;color:var(--gold-soft);border-color:var(--gold)}
.ex-disclaimer{font-size:12px;color:var(--muted);padding:30px 0 50px}
@media(max-width:860px){
  .ex-two,.ex-three,.ex-chips,.ex-rels,.ex-corr,.ex-prac{grid-template-columns:1fr 1fr}
  .ex-piece{grid-template-columns:1fr}
}