/* ============================================================
   ITM Collection — shared page system (tier pages, about, faq)
   Dark editorial · gold + white · serif headlines / sans body
   ============================================================ */
:root{
  --bg:#08070a; --bg-2:#0e0d11;
  --ink:#f1ede1; --ink-dim:rgba(241,237,225,.62); --ink-faint:rgba(241,237,225,.32);
  --hair:rgba(241,237,225,.14); --hair-strong:rgba(241,237,225,.28);
  --gold:#c5a253; --gold-soft:#d4b674;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Inter Tight", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
body{ font-size:15px; line-height:1.6; letter-spacing:.005em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--gold); color:#000; }

.serif{ font-family:var(--serif); }
.mono{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow{ font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.gold{ color:var(--gold); }
.wrap{ max-width:1280px; margin:0 auto; padding:0 56px; }
.rule{ height:1px; background:var(--hair); }
.rule-gold{ height:1px; background:var(--gold); opacity:.55; }

/* ---- TOPBAR ---- */
.announce{ position:relative; z-index:51; background:#050407; border-bottom:1px solid var(--hair); }
.announce-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:9px 0; }
.announce .ann-side{ flex:1 1 0; font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); }
.announce .ann-right{ text-align:right; }
.announce .ann-right a{ color:var(--ink-dim); transition:color .2s; }
.announce .ann-right a:hover{ color:var(--gold); }
.announce .ann-mid{ flex:0 0 auto; display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); }
.announce .ann-mid b{ color:var(--gold); font-weight:400; }
.announce .ann-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); animation:annblink 1.9s ease-in-out infinite; }
@keyframes annblink{ 50%{ opacity:.35; } }

.topbar{ position:sticky; top:0; z-index:50; background:rgba(8,7,10,.8); backdrop-filter:blur(14px); border-bottom:1px solid var(--hair); }
.topbar .row{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.mast{ display:flex; align-items:baseline; gap:14px; text-decoration:none; }
.mast .logo{ font-family:var(--serif); font-style:italic; font-size:23px; letter-spacing:-.01em; color:var(--ink); transition:color .15s; }
.mast:hover .logo{ color:var(--gold); }
.mast .meta{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-faint); text-transform:uppercase; }
.nav{ display:flex; gap:30px; align-items:center; }
.nav a{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); transition:color .2s; }
.nav a:hover, .nav a.active{ color:var(--ink); }
.nav .nav-div{ width:1px; height:18px; background:var(--hair-strong); }
.nav .nav-sign{ color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.nav .nav-sign::after{ content:"↗"; font-size:11px; color:var(--ink-faint); transition:color .2s; }
.nav .nav-sign:hover::after{ color:var(--gold); }
.nav .pill{ background:var(--gold); color:#0a0805; padding:11px 20px; border-radius:999px; border:1px solid var(--gold); transition:background .2s, border-color .2s, transform .2s; }
.nav .pill:hover{ background:var(--gold-soft); border-color:var(--gold-soft); color:#0a0805; transform:translateY(-1px); }

/* ---- PAGE HERO ---- */
.phero{ padding:96px 0 72px; border-bottom:1px solid var(--hair); position:relative; }
.phero .eyebrow{ margin-bottom:22px; }
.phero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(56px,8vw,116px); line-height:.92; letter-spacing:-.02em; margin:0; }
.phero h1 em{ font-style:italic; color:var(--gold); }
.phero .identity{ font-family:var(--serif); font-style:italic; font-size:clamp(24px,3vw,34px); color:var(--ink-dim); margin-top:24px; max-width:24ch; line-height:1.25; }
.phero .meta-strip{ display:flex; gap:48px; flex-wrap:wrap; margin-top:48px; padding-top:22px; border-top:1px solid var(--hair); }
.phero .meta-strip .k{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); }
.phero .meta-strip .v{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin-top:6px; }

/* tier hero split */
.tier-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; }
.tier-shot{ aspect-ratio:4/5; border:1px solid var(--hair-strong); position:relative; overflow:hidden; background:#0a0808; }
.tier-shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6%; }
.tier-shot .cap{ position:absolute; left:18px; bottom:16px; font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); z-index:2; }

/* ---- SECTIONS ---- */
section.block{ padding:88px 0; border-top:1px solid var(--hair); }
.sec-head{ display:grid; grid-template-columns:160px 1fr; gap:40px; margin-bottom:52px; align-items:start; }
.sec-num{ font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; color:var(--ink-faint); text-transform:uppercase; padding-top:8px; }
.sec-title{ font-family:var(--serif); font-size:clamp(32px,4vw,52px); line-height:1; letter-spacing:-.012em; margin:0; max-width:18ch; }
.sec-title em{ color:var(--gold); font-style:italic; }
.sec-lede{ font-family:var(--serif); font-size:24px; line-height:1.4; color:var(--ink); max-width:60ch; }
.sec-lede em{ font-style:italic; color:var(--gold); }

/* what-you-get list */
.getlist{ display:grid; grid-template-columns:160px 1fr; gap:40px; }
.getlist .items{ display:flex; flex-direction:column; }
.getlist .gi{ display:grid; grid-template-columns:48px 1fr auto; gap:24px; padding:26px 0; border-top:1px solid var(--hair); align-items:baseline; }
.getlist .gi:last-child{ border-bottom:1px solid var(--hair); }
.getlist .gi .n{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--gold); }
.getlist .gi .t{ font-family:var(--serif); font-size:26px; line-height:1.15; letter-spacing:-.005em; }
.getlist .gi .t small{ display:block; font-family:var(--sans); font-size:14px; color:var(--ink-dim); letter-spacing:0; margin-top:8px; max-width:54ch; line-height:1.55; }
.getlist .gi .meta{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }

/* price + CTA card */
.pricecard{ border:1px solid var(--hair-strong); padding:40px 40px 34px; position:relative; }
.pricecard::after{ content:""; position:absolute; inset:6px; border:1px solid rgba(197,162,83,.16); pointer-events:none; }
.pricecard .pc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.pricecard .lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.pricecard .amt{ font-family:var(--serif); font-size:58px; line-height:.9; letter-spacing:-.015em; }
.pricecard .amt small{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-faint); text-transform:uppercase; display:block; margin-top:10px; }
.pricecard .note{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); line-height:1.8; }
.pricecard .cta-row{ margin-top:30px; padding-top:24px; border-top:1px solid var(--hair); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.pricecard .avail{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); max-width:30ch; line-height:1.7; }
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; padding:15px 26px; border:1px solid var(--gold); color:var(--gold); transition:background .2s, color .2s; }
.btn:hover{ background:var(--gold); color:#0a0805; }
.btn.solid{ background:var(--gold); color:#0a0805; }
.btn.solid:hover{ background:var(--gold-soft); border-color:var(--gold-soft); }

/* tagline band */
.tagband{ padding:104px 0; border-top:1px solid var(--hair); text-align:center; }
.tagband .q{ font-family:var(--serif); font-style:italic; font-size:clamp(34px,5vw,68px); line-height:1.08; letter-spacing:-.012em; max-width:18ch; margin:0 auto; }
.tagband .q .gold{ font-style:italic; }
.tagband .attr{ font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); margin-top:34px; }

/* mechanic / star legend grid */
.mech{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.mech .m{ background:var(--bg); padding:32px 28px; min-height:200px; display:flex; flex-direction:column; }
.mech .m .mn{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--gold); margin-bottom:18px; }
.mech .m .mt{ font-family:var(--serif); font-size:24px; line-height:1.1; letter-spacing:-.005em; margin-bottom:12px; }
.mech .m .md{ font-size:13.5px; color:var(--ink-dim); line-height:1.55; }

/* star rank table */
.stars-tbl{ border:1px solid var(--hair); }
.stars-tbl .sr{ display:grid; grid-template-columns:70px 1fr 160px; gap:24px; padding:16px 28px; border-top:1px solid var(--hair); align-items:center; }
.stars-tbl .sr:first-child{ border-top:none; }
.stars-tbl .sr.head{ background:var(--bg-2); }
.stars-tbl .sr .rk{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-faint); }
.stars-tbl .sr .st{ font-size:17px; letter-spacing:.34em; }
.stars-tbl .sr .st .g{ color:var(--gold); }
.stars-tbl .sr .st .w{ color:var(--ink); }
.stars-tbl .sr .bd{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); text-align:right; }
.stars-tbl .sr.head .rk, .stars-tbl .sr.head .bd{ color:var(--gold); }

/* ---- ABOUT / EDITORIAL ---- */
.editorial{ display:grid; grid-template-columns:160px 1fr; gap:40px; }
.editorial .body{ max-width:64ch; }
.editorial .body p{ font-family:var(--serif); font-size:23px; line-height:1.5; letter-spacing:-.003em; color:var(--ink); margin:0 0 1.1em; }
.editorial .body p.drop:first-letter{ font-family:var(--serif); font-style:italic; float:left; font-size:88px; line-height:.72; padding:8px 14px 0 0; color:var(--gold); }
.editorial .body em{ font-style:italic; color:var(--gold); }
.editorial .body .sig{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-top:40px; }

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:8px; }
.pillars .p{ background:var(--bg); padding:34px 30px; }
.pillars .p .pn{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--gold); margin-bottom:16px; }
.pillars .p .pt{ font-family:var(--serif); font-size:30px; line-height:1; margin-bottom:14px; }
.pillars .p .pd{ font-size:13.5px; color:var(--ink-dim); line-height:1.6; }

/* by-the-numbers grid (about) */
.numgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.numgrid .ni{ background:var(--bg); padding:26px 32px; display:flex; justify-content:space-between; align-items:baseline; gap:18px; }
.numgrid .ni .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); }
.numgrid .ni .v{ font-family:var(--serif); font-size:26px; line-height:1; letter-spacing:-.01em; color:var(--gold); text-align:right; }
@media(max-width:1040px){ .numgrid{ grid-template-columns:1fr; } }

/* ---- FAQ ---- */
.faq{ display:grid; grid-template-columns:160px 1fr; gap:40px; }
.faq .list{ border-top:1px solid var(--hair); }
.faq details{ border-bottom:1px solid var(--hair); }
.faq summary{ list-style:none; cursor:pointer; padding:28px 0; display:flex; align-items:baseline; justify-content:space-between; gap:32px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .q{ font-family:var(--serif); font-size:27px; line-height:1.15; letter-spacing:-.008em; color:var(--ink); transition:color .2s; }
.faq details[open] summary .q{ color:var(--gold); }
.faq summary .ic{ font-family:var(--mono); font-size:18px; color:var(--gold); flex:none; transition:transform .25s; line-height:1; }
.faq details[open] summary .ic{ transform:rotate(45deg); }
.faq .a{ padding:0 0 30px; max-width:62ch; }
.faq .a p{ color:var(--ink-dim); font-size:15.5px; line-height:1.7; margin:0 0 1em; }
.faq .a p:last-child{ margin-bottom:0; }
.faq .a em{ color:var(--ink); font-style:italic; }
.faq .a a{ color:var(--gold); border-bottom:1px solid rgba(197,162,83,.4); }

/* cross-link tier cards (shared) */
.tier-links{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.tier-links a{ background:var(--bg); padding:36px 30px; display:flex; flex-direction:column; min-height:230px; transition:background .25s; }
.tier-links a:hover{ background:linear-gradient(180deg, rgba(197,162,83,.06), transparent 70%); }
.tier-links .tl-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-faint); text-transform:uppercase; }
.tier-links .tl-nm{ font-family:var(--serif); font-size:46px; line-height:1; letter-spacing:-.015em; margin-top:14px; }
.tier-links .tl-nm em{ font-style:italic; }
.tier-links .tl-sub{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--gold); text-transform:uppercase; margin-top:10px; }
.tier-links .tl-go{ margin-top:auto; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); }
.tier-links a:hover .tl-go{ color:var(--gold); }

/* ---- FOOTER ---- */
footer{ border-top:1px solid var(--hair); padding:56px 0 40px; }
footer .frow{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
footer .fbrand .logo{ font-family:var(--serif); font-style:italic; font-size:30px; }
footer .fbrand .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-top:14px; line-height:1.8; }
footer h5{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); margin:0 0 14px; font-weight:400; }
footer ul{ list-style:none; margin:0; padding:0; }
footer li a{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); padding:5px 0; display:inline-block; transition:color .15s; }
footer li a:hover{ color:var(--gold); }
footer .baseline{ margin-top:48px; padding-top:24px; border-top:1px solid var(--hair); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }
footer .baseline a:hover{ color:var(--gold); }

/* ---- RESPONSIVE ---- */
@media (max-width:1040px){
  .wrap{ padding:0 28px; }
  .tier-hero{ grid-template-columns:1fr; gap:40px; }
  .sec-head, .getlist, .editorial, .faq{ grid-template-columns:1fr; gap:20px; }
  .mech, .pillars, .tier-links{ grid-template-columns:1fr; }
  .pricecard .pc-grid{ grid-template-columns:1fr; gap:28px; }
  footer .frow{ grid-template-columns:1fr 1fr; }
  .nav{ display:flex; gap:16px; }
  .nav a:not(.pill):not(.nav-sign){ display:none; }
  .nav .nav-div{ display:none; }
  .announce .ann-side{ display:none; }
  .announce-row{ justify-content:center; }
  .nav.compact{ display:flex; gap:18px; }
}
@media (max-width:560px){
  .stars-tbl .sr{ grid-template-columns:50px 1fr; }
  .stars-tbl .sr .bd{ display:none; }
}