/* ==========================================================================
   Enoch Chan Photography — Field Notes
   Shared stylesheet. Every page loads this file and only this file, so a
   sitewide rule written here actually reaches every page.

   Tokens
   ink        #0C0C0D   ground
   ivory      #E9E4DC   primary type
   gold       #C9A97E   accent, eyebrows, rules
   display    Cormorant Garamond 300
   body       EB Garamond
   label      Jost, uppercase, wide tracking
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{margin:0;background:#0C0C0D;color:#E9E4DC;-webkit-font-smoothing:antialiased;font-family:'EB Garamond',Georgia,serif;overflow-x:hidden}
a{color:#E9E4DC;text-decoration:none}
a:hover{color:#C9A97E}
::selection{background:#C9A97E;color:#0C0C0D}
img{max-width:100%}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

.btn-ivory{display:inline-block;border:1px solid rgba(233,228,220,.6);padding:16px 40px;font-family:Jost,sans-serif;font-size:11px;letter-spacing:.28em;text-transform:lowercase;transition:all 320ms cubic-bezier(.22,.61,.36,1)}
.btn-ivory:hover{background:#E9E4DC;color:#0C0C0D;border-color:#E9E4DC}
.zoom{transition:transform 600ms cubic-bezier(.22,.61,.36,1)}
a:hover .zoom{transform:scale(1.04)}
.link-gold:hover{color:#C9A97E}
.eyebrow{font-family:Jost,sans-serif;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(233,228,220,.45);font-weight:400}
.eyebrow.gold{color:#C9A97E}
.skip{position:absolute;left:-9999px;top:0;background:#E9E4DC;color:#0C0C0D;padding:12px 20px;font-family:Jost,sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;z-index:100}
.skip:focus{left:16px;top:16px}

/* ---- site chrome --------------------------------------------------------- */
.site-head{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 44px;pointer-events:none}
.site-head.solid{position:sticky;background:#0C0C0D;border-bottom:1px solid rgba(233,228,220,.10)}
.site-head > *{pointer-events:auto}
.site-head img{height:34px;width:auto;display:block}
.site-nav{display:flex;align-items:center;gap:30px;font-family:Jost,sans-serif;font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:300}
.site-nav a{color:rgba(233,228,220,.72)}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:#C9A97E}
.site-nav .apply{border:1px solid rgba(233,228,220,.45);padding:10px 20px;color:#E9E4DC}
.site-nav .apply:hover{background:#E9E4DC;color:#0C0C0D;border-color:#E9E4DC}

.site-foot{border-top:1px solid rgba(233,228,220,.12);margin-top:0;padding:56px 44px 48px}
.site-foot-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.site-foot img{height:30px;width:auto;display:block;opacity:.9}
.site-foot nav{display:flex;gap:26px;flex-wrap:wrap;font-family:Jost,sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:300}
.site-foot nav a{color:rgba(233,228,220,.55)}
.site-foot .legal{width:100%;font-family:Jost,sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,228,220,.32);font-weight:300;display:flex;gap:22px;flex-wrap:wrap;padding-top:26px;border-top:1px solid rgba(233,228,220,.08)}
.site-foot .legal a{color:rgba(233,228,220,.32)}

@media (max-width:900px){
  .site-head{padding:20px 22px}
  .site-head img{height:28px}
  .site-nav{gap:18px;font-size:9px;letter-spacing:.2em}
  .site-nav a:not(.apply){display:none}
  .site-foot{padding:44px 22px 40px}
}

/* ---- full-bleed cinematic hero -------------------------------------------
   ⛔ The scrim is load-bearing, do not lighten it. The original draft used
   0/.55 → 38%/.15 → 100%/.88, and the .15 stop landed exactly in the headline
   band: measured contrast against the composited pixels was 1.12:1 worst,
   1.52:1 at the 5th percentile, i.e. invisible. The stops below hold a floor
   under the type for the whole band it occupies (21% to 69% of the hero).
   Measured on the current hero frame: worst 3.16:1, 5th pct 5.96:1, mean 8.52:1.
   If the hero image is ever swapped, re-measure before shipping. */
.hero{position:relative;height:92vh;min-height:640px;width:100%;overflow:hidden;background:#0C0C0D}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;color:transparent}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,13,.55) 0%,rgba(12,12,13,.42) 30%,rgba(12,12,13,.62) 64%,rgba(12,12,13,.92) 100%)}
.hero-copy{position:absolute;left:0;right:0;bottom:0;padding:0 44px 74px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-copy h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(40px,5.4vw,80px);line-height:1.06;letter-spacing:.005em;margin:26px 0 0;max-width:20ch;text-wrap:balance}
.hero-copy .dek{font-size:19px;line-height:1.75;color:rgba(233,228,220,.78);max-width:56ch;margin:26px 0 0;text-wrap:pretty}
.hero-meta{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:36px;font-family:Jost,sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,228,220,.62);font-weight:300;flex-wrap:wrap}
.hero-meta .bar{width:26px;height:1px;background:rgba(201,169,126,.55)}

/* ---- article ------------------------------------------------------------- */
article{max-width:1240px;margin:0 auto;padding:112px 44px 0}
.col{max-width:640px;margin:0 auto}
.col.wide{max-width:900px}
.col p{font-size:19px;line-height:1.85;color:rgba(233,228,220,.76);margin:0 0 30px;text-wrap:pretty}
.col p.lead{font-size:21px;color:rgba(233,228,220,.90)}
.dropcap{font-family:'Cormorant Garamond',serif;font-size:64px;line-height:.78;float:left;margin:10px 14px 0 0;color:#C9A97E;font-weight:300}
.col strong{color:#E9E4DC;font-weight:500}
.col a{color:#C9A97E;border-bottom:1px solid rgba(201,169,126,.35)}
.col a:hover{border-bottom-color:#C9A97E}
sup a{color:#C9A97E;font-size:.62em;font-weight:700;vertical-align:super;line-height:0;border:none!important}

h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:38px;line-height:1.2;letter-spacing:.01em;color:#E9E4DC;margin:88px 0 26px;scroll-margin-top:24px}

.kt{max-width:640px;margin:56px auto;padding:34px 38px;border:1px solid rgba(201,169,126,.28);background:rgba(201,169,126,.05)}
.kt .eyebrow{color:#C9A97E;display:block;margin-bottom:20px}
.kt ul{list-style:none;padding:0;margin:0}
.kt li{font-size:17px;line-height:1.7;color:rgba(233,228,220,.78);padding:12px 0 12px 26px;position:relative;border-bottom:1px solid rgba(233,228,220,.08)}
.kt li:last-child{border-bottom:none}
.kt li::before{content:"";position:absolute;left:0;top:22px;width:12px;height:1px;background:#C9A97E}

.qa{border-left:2px solid #C9A97E;padding:6px 0 6px 26px;margin:0 0 30px}
.qa .eyebrow{display:block;margin-bottom:10px}
.qa p{font-size:19px;line-height:1.8;color:rgba(233,228,220,.88);margin:0}

.fullfig{margin:88px 0 0;padding:0}
.fullfig img{width:100%;height:auto;display:block}

/* ---- the figure ---------------------------------------------------------
   ⛔ This used to be a light-plate bar chart on a #F8F8F8 background, which
   read as a business deck dropped into a cinematic page. It now sits on the
   ink ground in the brand's own palette, drawn as a lens focus scale with an
   aperture mark. It is inline rather than an <img> so it can use Cormorant and
   Jost: an SVG referenced through <img> cannot load the page's webfonts. */
.fullfig.infog{margin-top:72px}
.ig{width:100%;height:auto;display:block;overflow:visible}
.ig-eyebrow{font-family:Jost,sans-serif;font-size:10px;letter-spacing:.28em;text-transform:uppercase;fill:#C9A97E}
.ig-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:34px;fill:#E9E4DC}
.ig-sub{font-family:'EB Garamond',Georgia,serif;font-size:15px;fill:rgba(233,228,220,.55)}
.ig-rule{stroke:rgba(233,228,220,.16);stroke-width:1}
.ig-name{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:21px;fill:#E9E4DC}
.ig-struct{font-family:Jost,sans-serif;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;fill:rgba(233,228,220,.38)}
.ig-track{stroke:rgba(233,228,220,.10);stroke-width:1}
.ig-adv{stroke:#C9A97E;stroke-width:3;stroke-linecap:round}
.ig-extend{stroke:#C9A97E;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 7;opacity:.85}
.ig-unpub{stroke:rgba(233,228,220,.3);stroke-width:1.5;stroke-dasharray:4 5}
.ig-mid{fill:#0C0C0D;stroke:#C9A97E;stroke-width:1.5}
.ig-cap{fill:none;stroke:#C9A97E;stroke-width:1.5}
.ig-capdot{fill:#C9A97E}
.ig-fig{font-family:'Cormorant Garamond',serif;font-size:22px;fill:#C9A97E}
.ig-axis{stroke:rgba(233,228,220,.22);stroke-width:1}
.ig-tick{stroke:rgba(233,228,220,.32);stroke-width:1}
.ig-tick.sm{stroke:rgba(233,228,220,.16)}
.ig-scale{font-family:Jost,sans-serif;font-size:10px;letter-spacing:.16em;fill:rgba(233,228,220,.42);text-anchor:middle}
.ig-foot{font-family:Jost,sans-serif;font-size:9.5px;letter-spacing:.13em;fill:rgba(233,228,220,.3)}
.ig-iris-barrel{fill:none;stroke:rgba(233,228,220,.18);stroke-width:1}
.ig-iris-barrel2{fill:none;stroke:rgba(201,169,126,.35);stroke-width:1}
.ig-blade path{fill:none;stroke:rgba(201,169,126,.55);stroke-width:1.2;stroke-linejoin:round}
.ig-iris-hole{fill:#C9A97E;opacity:.9}
@media (max-width:900px){
  .ig-title{font-size:26px}
  .ig-name{font-size:19px}
  .ig-fig{font-size:19px}
}
figcaption{display:flex;gap:16px;align-items:baseline;margin-top:18px;font-family:Jost,sans-serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(233,228,220,.45);font-weight:300}
figcaption .num{color:#C9A97E;flex:none}

.tw{overflow-x:auto;margin:8px 0 30px;border-top:1px solid rgba(233,228,220,.18);border-bottom:1px solid rgba(233,228,220,.18)}
table{width:100%;border-collapse:collapse}
th{font-family:Jost,sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:#C9A97E;text-align:left;padding:18px 16px 14px;border-bottom:1px solid rgba(233,228,220,.18);vertical-align:bottom}
td{font-size:15px;line-height:1.65;color:rgba(233,228,220,.72);padding:16px;border-bottom:1px solid rgba(233,228,220,.07);vertical-align:top}
tr:last-child td{border-bottom:none}
td strong{color:#E9E4DC}

.ctablock{max-width:640px;margin:56px auto;padding:30px 34px;border:1px solid rgba(233,228,220,.14);background:rgba(255,255,255,.02)}
.ctablock p{font-size:19px;line-height:1.7;color:#E9E4DC;margin:0 0 24px}
.ctablock a{border:1px solid rgba(233,228,220,.6);padding:14px 34px;font-family:Jost,sans-serif;font-size:10px;letter-spacing:.26em;text-transform:lowercase;display:inline-block}

.pq{max-width:900px;margin:96px auto;text-align:center}
.pq p{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(30px,3.6vw,50px);line-height:1.3;margin:0;color:#E9E4DC;text-wrap:balance}
.pq .rule{width:56px;height:1px;background:rgba(201,169,126,.6);margin:34px auto 0}

.refs{margin:56px 0 0;padding:30px 34px;background:rgba(255,255,255,.03);border:1px solid rgba(233,228,220,.1)}
.refs .eyebrow{display:block;margin-bottom:18px}
.refs ol{padding-left:20px;margin:0;display:flex;flex-direction:column;gap:12px}
.refs li{font-size:14px;line-height:1.7;color:rgba(233,228,220,.55)}
.refs a{color:#C9A97E;word-break:break-word}

/* NOTE: this is the disclaimer paragraph only. The vinyl record SVG uses
   .vinyl. The two shared the class name .disc in the source draft, which gave
   the disclaimer a 260x260 box and gave the record a stray border and margin. */
.disclaimer{font-size:14px!important;line-height:1.8!important;color:rgba(233,228,220,.42)!important;font-style:italic;margin-top:40px!important;padding-top:26px;border-top:1px solid rgba(233,228,220,.1)}

/* ---- calculator ---------------------------------------------------------- */
.calc{min-height:480px;background:rgba(255,255,255,.03);border:1px solid rgba(233,228,220,.14);border-radius:6px;padding:34px;margin:36px 0}
.calc h3{font-family:Jost,sans-serif;font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#C9A97E;margin:0 0 10px}
.calc .intro{font-size:16px;color:rgba(233,228,220,.6);margin:0 0 22px;line-height:1.7}
.calc-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 0;border-bottom:1px solid rgba(233,228,220,.08);flex-wrap:wrap}
.calc-row label{flex:1 1 240px}
.calc-row .l{display:block;font-size:16px;color:#E9E4DC}
.calc-row .s{display:block;font-size:14px;color:rgba(233,228,220,.45);margin-top:3px}
.calc-row input{width:118px;background:rgba(233,228,220,.06);border:1px solid rgba(233,228,220,.2);color:#E9E4DC;padding:9px 12px;border-radius:4px;font-family:inherit;font-size:16px;text-align:right}
.calc-row input:focus{border-color:#C9A97E;outline:none}
.calc-out{margin-top:24px;padding-top:24px;border-top:1px solid rgba(233,228,220,.14)}
.calc-figs{display:flex;gap:44px;flex-wrap:wrap;margin-bottom:20px}
.calc-figs .k{font-family:Jost,sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,228,220,.4);margin:0 0 6px}
.calc-figs .v{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:44px;line-height:1;margin:0;color:#E9E4DC}
.calc-figs .v.gold{color:#C9A97E}
.calc-out p.note{font-size:16px;color:rgba(233,228,220,.72);line-height:1.7;margin:0 0 10px}

/* ---- Answer console (chat FAQ) -------------------------------------------
   Ported from the agency house component (~/seoeliteagency-web ChatFAQ.astro,
   already recolored once for seoagencynaples) and recolored again for this
   brand: coral/teal action + verified colours both become gold, ink ground,
   Jost for labels. ⛔ House rule: FAQs ship as this console, never as an
   accordion. The questions are read from the page's own FAQPage JSON-LD at
   runtime, so the visible copy and the schema cannot drift apart. */
.cfq-band{max-width:1100px;margin:96px auto 0;padding:0}
.cfq-band .eyebrow{display:block;margin-bottom:14px}
.cfq-band h2{margin:0 0 34px;font-size:34px}
.cfq{border:1px solid rgba(233,228,220,.14);background:rgba(255,255,255,.02);overflow:hidden}
.cfq-main{display:grid;grid-template-columns:330px 1fr;min-height:440px}
.cfq-list{border-right:1px solid rgba(233,228,220,.12);overflow-y:auto;max-height:480px;display:flex;flex-direction:column}
.cfq-list::-webkit-scrollbar{width:3px}
.cfq-list::-webkit-scrollbar-thumb{background:rgba(233,228,220,.18)}
.cfq-thread{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;cursor:pointer;background:transparent;border:none;border-bottom:1px solid rgba(233,228,220,.10);border-left:2px solid transparent;padding:16px 18px;color:rgba(233,228,220,.72);font-family:'EB Garamond',Georgia,serif;font-size:15px;line-height:1.45;transition:background .14s,color .14s}
.cfq-thread:hover{background:rgba(201,169,126,.06);color:#E9E4DC}
.cfq-thread.sel{border-left-color:#C9A97E;background:rgba(201,169,126,.08);color:#E9E4DC}
.cfq-num{font-family:Jost,sans-serif;font-size:9.5px;letter-spacing:.18em;color:rgba(201,169,126,.75);margin-top:4px;flex:none}
.cfq-chat{display:flex;flex-direction:column;min-width:0}
.cfq-chat-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(233,228,220,.12)}
.cfq-ava-img{width:30px;height:30px;border-radius:50%;object-fit:cover;display:block;border:1px solid rgba(201,169,126,.45)}
.cfq-ava-link:hover .cfq-ava-img{border-color:#C9A97E}
.cfq-name{font-family:Jost,sans-serif;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,228,220,.5);font-weight:300}
.cfq-name-link{color:#E9E4DC;border-bottom:1px solid transparent}
.cfq-name-link:hover{border-bottom-color:#C9A97E}
.cfq-status{margin-left:auto;font-family:Jost,sans-serif;font-size:9px;letter-spacing:.2em;color:#C9A97E;display:inline-flex;align-items:center;gap:7px;flex:none}
.cfq-eq{display:inline-flex;gap:2px;align-items:flex-end;height:10px}
.cfq-eq b{width:2.5px;background:#C9A97E;border-radius:2px;animation:cfqEq 1.1s ease-in-out infinite}
.cfq-eq b:nth-child(2){animation-delay:.18s}
.cfq-eq b:nth-child(3){animation-delay:.36s}
@keyframes cfqEq{0%,100%{height:3px}50%{height:10px}}
.cfq-log{flex:1;padding:22px 20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;max-height:360px}
.cfq-q{align-self:flex-end;max-width:84%;background:rgba(201,169,126,.14);border:1px solid rgba(201,169,126,.34);border-radius:12px 12px 3px 12px;padding:12px 16px;opacity:0;transform:translateY(8px);transition:.35s}
.cfq-a{align-self:flex-start;max-width:94%;background:rgba(255,255,255,.03);border:1px solid rgba(233,228,220,.14);border-left:3px solid #C9A97E;border-radius:3px 12px 12px 12px;padding:14px 17px;opacity:0;transform:translateY(8px);transition:.35s}
.cfq-q.in,.cfq-a.in{opacity:1;transform:none}
.cfq-q p{margin:0;font-size:16.5px;color:#E9E4DC}
.cfq-a p{margin:0;font-size:16.5px;line-height:1.72;color:rgba(233,228,220,.76)}
.cfq-a sup a{border:none}
.cfq-typing{align-self:flex-start;display:inline-flex;gap:5px;padding:14px 17px;border:1px solid rgba(233,228,220,.14);border-left:3px solid #C9A97E;border-radius:3px 12px 12px 12px}
.cfq-typing b{width:6px;height:6px;border-radius:50%;background:#C9A97E;animation:cfqB 1.1s ease-in-out infinite}
.cfq-typing b:nth-child(2){animation-delay:.18s}
.cfq-typing b:nth-child(3){animation-delay:.36s}
@keyframes cfqB{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}
.cfq-nav{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid rgba(233,228,220,.12);flex-wrap:wrap}
.cfq-nbtn{font-family:Jost,sans-serif;font-size:9.5px;letter-spacing:.2em;color:rgba(233,228,220,.5);background:rgba(255,255,255,.02);border:1px solid rgba(233,228,220,.16);border-radius:6px;padding:9px 14px;cursor:pointer;transition:color .15s,border-color .15s}
.cfq-nbtn:hover{color:#E9E4DC;border-color:rgba(233,228,220,.4)}
.cfq-pos{font-family:Jost,sans-serif;font-size:9.5px;letter-spacing:.18em;color:rgba(233,228,220,.4)}
.cfq-cta{margin-left:auto;font-family:Jost,sans-serif;font-size:9.5px;letter-spacing:.24em;text-transform:lowercase;color:#0C0C0D;background:#C9A97E;border-radius:6px;padding:11px 18px}
.cfq-cta:hover{background:#E9E4DC;color:#0C0C0D}
.cfq-ns{padding:22px 20px}
.cfq-ns dt{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:300;color:#E9E4DC;margin-top:22px}
.cfq-ns dd{margin:8px 0 0;font-size:16.5px;line-height:1.72;color:rgba(233,228,220,.76)}
@media (max-width:900px){
  .cfq-band{margin-top:64px}
  .cfq-main{grid-template-columns:1fr}
  .cfq-list{max-height:230px;border-right:0;border-bottom:1px solid rgba(233,228,220,.12)}
  .cfq-log{max-height:none}
  .cfq-band h2{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  .cfq-eq b,.cfq-typing b{animation:none}
  .cfq-q,.cfq-a{transition:none;opacity:1;transform:none}
}

/* ---- Side B, the vinyl FAQ (retired, kept for the deck motif) ------------- */
.sideb{max-width:1100px;margin:96px auto 0;padding:0}
.sideb-grid{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:start}
.deck{position:sticky;top:64px}
.deck-frame{position:relative;width:260px;height:260px;margin:0 auto}
.vinyl{width:260px;height:260px;transform-origin:50% 50%;display:block}
.spinning .vinyl{animation:rev 3.4s linear infinite}
@keyframes rev{to{transform:rotate(360deg)}}
.arm{position:absolute;top:6px;right:-6px;width:120px;height:150px;transform-origin:88% 12%;transform:rotate(-24deg);transition:transform 900ms cubic-bezier(.22,.61,.36,1)}
.spinning .arm{transform:rotate(6deg)}
.deck-meta{text-align:center;margin-top:26px}
.deck-meta .side{font-family:Jost,sans-serif;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:#C9A97E}
.deck-meta .rt{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:#E9E4DC;margin-top:8px;line-height:1.25}
.deck-meta .np{font-family:Jost,sans-serif;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,228,220,.4);margin-top:14px;min-height:14px;transition:color .4s}
.spinning .deck-meta .np{color:#C9A97E}

.tracks{border-top:1px solid rgba(233,228,220,.14)}
.track{border-bottom:1px solid rgba(233,228,220,.10)}
.track summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:52px 1fr 26px;align-items:center;gap:18px;padding:26px 0}
.track summary::-webkit-details-marker{display:none}
.tno{font-family:Jost,sans-serif;font-size:11px;letter-spacing:.2em;color:rgba(233,228,220,.35);transition:color .35s;padding-top:4px;align-self:start}
.track[open] .tno{color:#C9A97E}
.tq{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:25px;line-height:1.3;color:rgba(233,228,220,.82);transition:color .35s;text-wrap:pretty}
.track[open] .tq,.track summary:hover .tq{color:#E9E4DC}
.groove{width:26px;height:26px;align-self:start;margin-top:2px;opacity:.5;transition:opacity .35s,transform .5s}
.track[open] .groove{opacity:1;transform:scale(1.06)}
.track[open] .groove circle{stroke:#C9A97E}
.liner{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:0 0 30px}
.liner .rule{border-left:1px solid rgba(201,169,126,.45);justify-self:end;width:1px;height:100%}
.liner p{font-size:17.5px;line-height:1.85;color:rgba(233,228,220,.72);margin:0;text-wrap:pretty}
.track summary:focus-visible{outline:1px solid rgba(201,169,126,.8);outline-offset:6px}

@media (prefers-reduced-motion: reduce){
  .spinning .vinyl{animation:none}
  .arm,.spinning .arm{transition:none}
}

/* ---- index --------------------------------------------------------------- */
/* The index uses .site-head.solid, which is sticky and therefore IN FLOW at
   ~90px. The 172px top padding was sized for the post page, where the header
   floats over the hero. Stacking both left 262px of dead space above the
   masthead, so this padding assumes the header already occupies its own space. */
.idx-hero{padding:96px 44px 0;max-width:1240px;margin:0 auto}
.idx-hero h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(44px,6vw,86px);line-height:1.02;margin:22px 0 0;max-width:16ch;text-wrap:balance}
.idx-hero p{font-size:20px;line-height:1.8;color:rgba(233,228,220,.7);max-width:58ch;margin:26px 0 0;text-wrap:pretty}
.idx-rule{max-width:1240px;margin:72px auto 0;padding:0 44px}
.idx-rule div{height:1px;background:rgba(233,228,220,.12)}

.feat{max-width:1240px;margin:0 auto;padding:64px 44px 0}
.feat a{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.feat .shot{overflow:hidden;aspect-ratio:4/3}
.feat .shot img{width:100%;height:100%;object-fit:cover;display:block}
.feat h2{margin:18px 0 0;font-size:clamp(30px,3.4vw,46px);line-height:1.14}
.feat .dek{font-size:18px;line-height:1.8;color:rgba(233,228,220,.68);margin:20px 0 0;text-wrap:pretty}
.feat .meta{display:flex;gap:16px;align-items:center;margin-top:26px;font-family:Jost,sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,228,220,.5);font-weight:300;flex-wrap:wrap}
.feat .meta span.bar{width:24px;height:1px;background:rgba(201,169,126,.55)}

.grid{max-width:1240px;margin:0 auto;padding:96px 44px 0}
.grid-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.grid-head h2{margin:0;font-size:34px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.cards .shot{overflow:hidden;height:300px}
.cards .shot img{width:100%;height:100%;object-fit:cover;display:block}
.cards .cat{font-family:Jost,sans-serif;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#C9A97E;margin-top:18px}
.cards .ttl{font-family:'Cormorant Garamond',serif;font-size:25px;font-weight:300;line-height:1.28;margin-top:10px}
.cards .soon{color:rgba(233,228,220,.4)}
.cards .soon .cat{color:rgba(233,228,220,.4)}
.cards .soon .shot img{filter:grayscale(1);opacity:.32}

/* ---- 404 ----------------------------------------------------------------- */
.nf{min-height:72vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:160px 44px 96px}
.nf h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(38px,5vw,64px);line-height:1.1;margin:22px 0 0;max-width:20ch;text-wrap:balance}
.nf p{font-size:19px;line-height:1.8;color:rgba(233,228,220,.7);max-width:52ch;margin:24px 0 0}

@media (max-width:900px){
  article{padding:72px 22px 0}
  h2{font-size:30px;margin:64px 0 22px}
  .col p{font-size:17px}
  .kt,.ctablock,.calc{padding:26px 22px}
  .bios{grid-template-columns:1fr!important;gap:36px!important}
  .cards{grid-template-columns:1fr!important}
  .sideb{margin-top:64px}
  .sideb-grid{grid-template-columns:1fr;gap:36px}
  .deck{position:static}
  .deck-frame{width:180px;height:180px}
  .vinyl{width:180px;height:180px}
  .arm{display:none}
  .track summary{grid-template-columns:38px 1fr 22px;gap:12px;padding:20px 0}
  .tq{font-size:20px}
  .liner{grid-template-columns:38px 1fr;gap:12px}
  .liner p{font-size:16.5px}
  .idx-hero{padding:132px 22px 0}
  .idx-rule,.feat,.grid{padding-left:22px;padding-right:22px}
  .feat a{grid-template-columns:1fr;gap:28px}
  .hero{height:88vh;min-height:560px}
  .hero-copy{padding:0 22px 56px}
  .calc-figs{gap:28px}
  .calc-figs .v{font-size:36px}
}