/* ============================================================================
   Portfolio kit — shared component styles (museum-grade editorial)
   Pairs with ../../colors_and_type.css (design-system tokens)
   ============================================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg-deep);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font-family:inherit;cursor:pointer}
img{display:block}
::selection{background:var(--gold);color:#0B0B0B}
a{color:inherit;text-decoration:none}

/* ── view transition ─────────────────────────────────────────────────────── */
.view-enter{animation:viewFade .55s var(--ease)}
@keyframes viewFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbZoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* ── shared section scaffolding ──────────────────────────────────────────── */
.sec{padding:clamp(54px,7.5vw,104px) clamp(20px,6vw,72px);border-bottom:1px solid var(--rule);position:relative}
.sec.dark{background:var(--warm);border-color:var(--rule)}
.sec.warm{background:var(--warm-2)}
.sec.ink{background:var(--bg-deep);border-color:var(--rule)}
.wrap-lg{max-width:1400px;margin:0 auto}

/* numbered section header — elevated rhythm */
.shead{display:flex;align-items:baseline;gap:clamp(20px,3vw,40px);margin-bottom:clamp(32px,4.5vw,56px)}
.shead .n{font-family:var(--cond);font-weight:400;font-size:12px;letter-spacing:.28em;color:var(--gold);flex-shrink:0;padding-top:9px}
.shead h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.6vw,58px);line-height:1.02;letter-spacing:-0.02em}
.shead .ln{flex:1;height:1px;background:var(--rule);margin-bottom:10px}
.dark .shead h2,.ink .shead h2{color:#fff}
.dark .shead .ln,.ink .shead .ln{background:rgba(255,255,255,.12)}
.dark .shead .n,.ink .shead .n{color:var(--gold-light)}

/* eyebrow */
.eyebrow{font-family:var(--cond);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:14px}
.eyebrow::before{content:'';width:28px;height:1px;background:currentColor}
.eyebrow.lt{color:var(--gold-light)}

/* buttons */
.btn{font-family:var(--cond);font-weight:400;font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:15px 30px;border:none;transition:var(--hover),letter-spacing .4s var(--ease);display:inline-flex;align-items:center;gap:10px;position:relative}
.btn>*{transition:transform .4s var(--ease)}
.btn:hover{letter-spacing:.26em}
.btn-solid{background:var(--gold);color:#0B0B0B}.btn-solid:hover{background:var(--gold-light);color:#0B0B0B}
.btn-gold{background:var(--gold);color:#0B0B0B}.btn-gold:hover{background:var(--gold-light);color:#0B0B0B}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid rgba(244,241,234,.32)}.btn-ghost:hover{background:var(--gold);color:#0B0B0B;border-color:var(--gold)}
.btn-ghost-ink{background:transparent;color:var(--ink);border:1px solid var(--ink)}.btn-ghost-ink:hover{background:var(--gold);color:#0B0B0B;border-color:var(--gold)}
.btn-sm{padding:10px 18px;font-size:10px;letter-spacing:.18em}
.btn-sm:hover{letter-spacing:.22em}

/* link */
.tlink{font-family:var(--cond);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:none;background:none;transition:color .2s}
.tlink:hover{color:var(--gold-deep)}

/* meta value */
.mlabel{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.mvalue{font-family:var(--cond);font-size:15px;letter-spacing:.04em;color:var(--ink-mid)}
.dark .mlabel,.ink .mlabel{color:rgba(255,255,255,.3)}
.dark .mvalue,.ink .mvalue{color:rgba(255,255,255,.82)}

/* lead / body */
.lead{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.3vw,30px);line-height:1.5;color:var(--ink-mid);max-width:820px;letter-spacing:-0.01em}
.body{font-size:15.5px;line-height:1.9;color:var(--muted);max-width:620px}
.body+.body{margin-top:18px}

/* responsive */
@media(max-width:860px){
  .hide-mobile{display:none!important}
  .grid-2,.grid-3,.grid-2a,.grid-2b{grid-template-columns:1fr!important}
}

/* ============================================================================
   REFINEMENT LAYER — museum-firm polish (motion, micro-interactions, chrome)
   ============================================================================ */

/* ── eyebrow: refined dash that draws in ─────────────────────────────────── */
.eyebrow{font-family:var(--cond);font-weight:400;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:16px}
.eyebrow::before{content:'';width:36px;height:1px;background:currentColor;transform-origin:left;animation:dashIn 1s var(--ease) both}
@keyframes dashIn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

/* ── scroll-reveal: the brand's signature fade-up, applied site-wide ──────── */
[data-rv]{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.05s var(--ease)}
[data-rv].rv-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-rv]{opacity:1!important;transform:none!important;transition:none!important}}

/* staggered children reveal for grids/rows inside a revealed section */
[data-rv-stagger]>*{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-rv-stagger].rv-in>*{opacity:1;transform:none}
[data-rv-stagger].rv-in>*:nth-child(1){transition-delay:.04s}
[data-rv-stagger].rv-in>*:nth-child(2){transition-delay:.12s}
[data-rv-stagger].rv-in>*:nth-child(3){transition-delay:.20s}
[data-rv-stagger].rv-in>*:nth-child(4){transition-delay:.28s}
[data-rv-stagger].rv-in>*:nth-child(5){transition-delay:.36s}
[data-rv-stagger].rv-in>*:nth-child(6){transition-delay:.44s}

/* ── hero entrance: content rises as the page mounts ─────────────────────── */
.hero-rise>*{opacity:0;transform:translateY(28px);animation:heroRise 1.1s var(--ease) forwards}
.hero-rise>*:nth-child(1){animation-delay:.10s}
.hero-rise>*:nth-child(2){animation-delay:.20s}
.hero-rise>*:nth-child(3){animation-delay:.30s}
.hero-rise>*:nth-child(4){animation-delay:.40s}
.hero-rise>*:nth-child(5){animation-delay:.50s}
.hero-rise>*:nth-child(6){animation-delay:.60s}
@keyframes heroRise{to{opacity:1;transform:none}}

/* slow ambient zoom on cinematic hero images */
.kenburns{animation:kenburns 18s var(--ease) both}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1)}}

/* ── fixed scroll-progress hairline (gold) ───────────────────────────────── */
#scrollprog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-glow));z-index:450;transition:width .1s linear;pointer-events:none}

/* ── link underline micro-interaction ────────────────────────────────────── */
.ulink{position:relative;display:inline-block}
.ulink::after{content:'';position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.ulink:hover::after{transform:scaleX(1);transform-origin:left}

/* ── framed plate: directional shadow + reveal mask for artwork ──────────── */
.plate{position:relative;overflow:hidden;background:var(--bg-deep)}
.plate img{transition:transform .8s var(--ease),filter .8s var(--ease)}
.plate:hover img{transform:scale(1.045)}

/* ── refined custom scrollbar ─────────────────────────────────────────────── */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:var(--paper)}
*::-webkit-scrollbar-thumb{background:var(--rule);border:3px solid var(--paper)}
*::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)}

/* ── tlink gains an arrow nudge ───────────────────────────────────────────── */
.tlink{font-family:var(--cond);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border:none;background:none;transition:color .25s}
.tlink:hover{color:var(--gold-deep)}


/* ============================================================================
   CASE STUDY — reusable component styles (TOC · Stages · Palette · Info)
   ============================================================================ */

/* TOC (collapsible <details>) */
.cs-toc-details summary{list-style:none;cursor:default;display:flex;align-items:center;gap:18px}
.cs-toc-details summary::-webkit-details-marker{display:none}
.cs-toc-summary{margin-bottom:clamp(24px,3vw,40px)}
.cs-toc-dash{width:32px;height:1px;background:rgba(255,255,255,.55);flex-shrink:0}
.cs-toc-title{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.4vw,52px);line-height:1;letter-spacing:-0.02em;color:#fff;flex:1}
.cs-toc-chev{font-family:var(--cond);font-size:18px;color:rgba(255,255,255,.65);transition:transform .3s var(--ease);display:none}
.cs-toc-details[open] .cs-toc-chev{transform:rotate(180deg)}
.cs-toc-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 56px}
.cs-toc-item{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.15);color:#fff;opacity:.7;
  transition:opacity .25s,padding-left .25s,border-color .25s;cursor:pointer;text-decoration:none}
.cs-toc-item:hover{opacity:1;padding-left:6px}
.cs-toc-item.is-active{opacity:1;padding-left:10px;border-bottom-color:var(--gold-light)}
.cs-toc-item.is-active .cs-toc-label{color:var(--gold-light)}
.cs-toc-item.is-active .cs-toc-n{color:var(--gold-light)}
.cs-toc-n{font-family:var(--cond);font-size:10px;letter-spacing:.22em;color:rgba(255,255,255,.55);min-width:24px;transition:color .25s}
.cs-toc-label{font-family:var(--serif);font-weight:300;font-size:clamp(15px,1.4vw,19px);color:#fff;transition:color .25s}
.cs-toc-line{display:none}

/* Process Stages — real <img> with srcset so the browser can lazy-load */
.cs-stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,32px)}
.cs-stage-card{background:transparent}
.cs-stage-img{position:relative;aspect-ratio:4/3;overflow:hidden;margin-bottom:18px;
  box-shadow:0 14px 40px -22px rgba(0,0,0,.5)}
.cs-stage-img-el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cs-stage-scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.6));pointer-events:none}
.cs-stage-over{position:absolute;left:22px;right:22px;bottom:22px;color:#fff}
.cs-stage-n{font-family:var(--cond);font-size:9px;font-weight:400;letter-spacing:.26em;color:var(--gold-light);margin-bottom:6px}
.cs-stage-t{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,2vw,26px);color:#fff;line-height:1.1;margin:0}
.cs-stage-desc{font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.75;color:var(--muted);max-width:95%;margin:0}

/* Color Philosophy */
.cs-palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px;margin-bottom:14px}
.cs-swatch{height:120px;padding:14px 18px;display:flex;flex-direction:column;justify-content:flex-end}
.cs-sw-name{font-family:var(--cond);font-size:10px;font-weight:500;letter-spacing:.2em;margin-bottom:4px}
.cs-sw-hex{font-family:var(--cond);font-size:10px;letter-spacing:.1em}
.cs-palette-cap{font-family:var(--cond);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:48px}
.cs-color-texts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.cs-color-ar{font-family:var(--serif);font-weight:300;font-size:clamp(18px,1.9vw,24px);line-height:1.7;color:var(--ink-mid);direction:rtl}
.cs-color-en{font-family:var(--sans);font-weight:300;font-size:15.5px;line-height:1.85;color:var(--muted)}

/* Artwork Information band */
.cs-info-head{display:flex;align-items:center;gap:18px;margin-bottom:clamp(28px,3.5vw,44px)}
.cs-info-dash{width:32px;height:1px;background:rgba(255,255,255,.55)}
.cs-info-title{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.4vw,50px);line-height:1;letter-spacing:-0.02em;color:#fff}
.cs-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 40px}
.cs-info-label{font-family:var(--cond);font-size:9px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.15)}
.cs-info-value{font-family:var(--serif);font-weight:400;font-size:clamp(15px,1.4vw,19px);color:#fff;
  line-height:1.4;letter-spacing:-0.005em;word-break:break-word;overflow-wrap:anywhere}

/* ── Type Scale Guide chip — used on Case Study + DesignReference ────────── */
.cs-type-guide{border:1px solid var(--rule);background:var(--ivory);padding:clamp(22px,2.6vw,32px);
  margin:clamp(32px,5vw,56px) 0}
.cs-type-guide.compact{padding:clamp(18px,2vw,24px)}
.cs-tg-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.cs-tg-dash{width:24px;height:1px;background:var(--gold);align-self:center}
.cs-tg-title{margin:0;color:var(--ink)}
.cs-tg-sub{color:var(--muted)}
.cs-tg-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.cs-tg-row{display:grid;grid-template-columns:160px 1.4fr 160px 1.6fr;gap:18px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--rule)}
.cs-tg-cls{font-family:var(--sans);font-size:11px;letter-spacing:.04em;color:var(--gold-deep);white-space:nowrap}
.cs-tg-sample{color:var(--ink);max-height:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-tg-size{font-family:var(--sans);font-size:11px;color:var(--muted);letter-spacing:.02em}
.cs-tg-note{margin:0;color:var(--muted);max-width:none}

/* Responsive — tablet & phone */
@media(max-width:900px){
  .cs-toc-grid{grid-template-columns:1fr;gap:0}
  .cs-stage-grid{grid-template-columns:1fr 1fr}
  .cs-info-grid{grid-template-columns:1fr 1fr;gap:24px 28px}
  .cs-tg-row{grid-template-columns:1fr 1fr;gap:8px 18px}
  .cs-tg-cls{grid-column:1;grid-row:1}
  .cs-tg-sample{grid-column:2;grid-row:1;text-align:right}
  .cs-tg-size{grid-column:1;grid-row:2}
  .cs-tg-note{grid-column:2;grid-row:2;text-align:right}
}
@media(max-width:640px){
  .cs-toc-chev{display:inline-block}
  .cs-toc-details:not([open]) .cs-toc-grid{display:none}
  .cs-toc-summary{margin-bottom:0;padding:6px 0}
  .cs-toc-details[open] .cs-toc-summary{margin-bottom:18px}
  .cs-stage-grid{grid-template-columns:1fr;gap:24px}
  .cs-stage-img{aspect-ratio:16/10}
  .cs-color-texts{grid-template-columns:1fr;gap:22px}
  .cs-info-grid{grid-template-columns:1fr;gap:18px}
  .cs-info-title,.cs-toc-title{font-size:clamp(24px,7vw,36px)}
  .cs-tg-row{grid-template-columns:1fr}
  .cs-tg-sample,.cs-tg-note{text-align:left}
}

/* ── Focus-visible for TOC items (keyboard nav) ──────────────────────────── */
.cs-toc-item:focus{outline:none}
.cs-toc-item:focus-visible{outline:2px solid var(--gold-light);outline-offset:4px;opacity:1;padding-left:10px}

/* Section landmark focus ring after scroll-spy jumps focus to the target.
   We add tabindex=-1 programmatically; this keeps the ring subtle. */
.sec[tabindex="-1"]:focus{outline:none}
.sec[tabindex="-1"]:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}

/* ── Blur-up / skeleton placeholder for lazy images ──────────────────────── */
.cs-skel{position:relative;background:linear-gradient(180deg,var(--warm-2),var(--rule))}
.cs-skel.is-loading::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.12) 45%,
    rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0.12) 55%,
    rgba(255,255,255,0) 100%);
  background-size:220% 100%;
  animation:skelShimmer 1.6s linear infinite;
}
.cs-skel.is-loading img{opacity:0;transition:opacity .5s var(--ease)}
.cs-skel.is-loaded img{opacity:1;animation:skelFade .55s var(--ease) both}
@keyframes skelShimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes skelFade{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}

/* ── Reduced-motion: kill scroll-spy/skeleton animations ─────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .cs-toc-item,.cs-toc-item.is-active,.cs-toc-n,.cs-toc-label{transition:none!important}
  .cs-skel.is-loading::before{animation:none;background:none}
  .cs-skel.is-loaded img{animation:none}
  .cs-skel.is-loading img{opacity:1;transition:none}
}