/* ============================================================
   skin-warm.css — Concept B "The Method, warm"
   Shared stylesheet for all warm case pages. Matches
   concept-b-warm.html tokens/type. Edit once, all pages update.
   ============================================================ */
:root{
  --paper:#f4f0e8; --paper-2:#ece6da; --paper-3:#faf7f1; --panel:#f7f6f2;
  --ink:#1c1a16; --ink-soft:#2a2620; --muted:#6c655a; --dim:#98907f;
  --accent:#bf432a; --accent-deep:#9a3621;
  --hair:rgba(28,26,22,0.12); --hair-soft:rgba(28,26,22,0.07);
  --serif:'Fraunces',Georgia,'Songti SC',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC',system-ui,sans-serif;
  --step--1:clamp(0.80rem,0.77rem + 0.16vw,0.9rem);
  --step-0:clamp(1rem,0.96rem + 0.22vw,1.13rem);
  --step-1:clamp(1.2rem,1.12rem + 0.4vw,1.5rem);
  --step-2:clamp(1.5rem,1.30rem + 1.0vw,2.2rem);
  --step-3:clamp(2rem,1.55rem + 2.2vw,3.3rem);
  --step-4:clamp(2.4rem,1.7rem + 3.4vw,4.4rem);
  --max:1080px; --read:760px; --radius:3px;
  --gutter:clamp(1.25rem,5vw,3rem);
}
*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{-webkit-text-size-adjust:none;text-size-adjust:none;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.7;font-size:var(--step-0);min-height:100svh;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
img,svg,picture{display:block;max-width:100%}
p,h1,h2,h3,h4,li,a,figcaption{overflow-wrap:break-word}
a{color:inherit;text-decoration:none}em{font-style:italic}
.wrap{width:min(100% - var(--gutter)*2,var(--max));margin-inline:auto}
.read{max-width:var(--read)}
.accent{color:var(--accent)}

/* nav */
nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 84%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair-soft)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:70px}
nav .logo{font-family:var(--serif);font-weight:600;font-size:var(--step-1);letter-spacing:-.015em}
nav .logo .cn{color:var(--muted);font-weight:400;margin-left:4px}
nav .logo .dot{color:var(--accent)}
nav .links{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);font-size:var(--step--1);color:var(--muted)}
nav .links a:hover{color:var(--ink)}
nav .links a.cta{display:inline-block;background:var(--accent);color:#fdf6ee;font-weight:600;border-radius:999px;padding:.6em 1.2em;border:1px solid var(--accent);transition:background .25s}
nav .links a.cta:hover{background:var(--accent-deep);color:#fdf6ee}
@media(max-width:680px){nav .links a.back{display:none}}

/* hero */
.case-hero{padding:clamp(3.5rem,8vw,6rem) 0 clamp(2rem,4vw,3rem);border-bottom:1px solid var(--hair)}
.eyebrow{font-family:var(--sans);font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:1.8rem;height:1px;background:var(--accent);opacity:.8}
.case-hero h1{font-size:var(--step-4);max-width:20ch;letter-spacing:-.02em;margin-top:1.1rem;font-weight:500}
.case-hero .meta{font-size:var(--step--1);color:var(--muted);margin-top:1.3rem}
.case-hero .meta b{color:var(--ink);font-weight:600}
.pills{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.3rem}
.pill{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:var(--accent);border:1px solid var(--hair);border-radius:999px;padding:.4em .9em}

/* stats */
.stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);padding:clamp(2rem,4vw,2.6rem) 0;border-bottom:1px solid var(--hair)}
.stat{min-width:0}
.stat .n{font-family:var(--serif);font-size:var(--step-3);font-weight:600;letter-spacing:-.02em;line-height:1}
.stat .l{font-size:var(--step--1);color:var(--muted);margin-top:.5rem;max-width:24ch}

/* prose */
.prose{padding:clamp(2.6rem,5vw,3.4rem) 0 1.5rem}
.prose section{margin-bottom:clamp(2.2rem,4vw,2.8rem)}
.prose h2{font-family:var(--sans);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:.9rem}
.prose p{font-size:var(--step-0);color:var(--ink);margin-bottom:1rem;line-height:1.72}
.prose p.lede{font-family:var(--serif);font-size:var(--step-1);line-height:1.4;color:var(--ink);font-weight:400}
.prose strong{font-weight:600}
.prose ul{list-style:none;margin:.4rem 0 1rem}
.prose li{position:relative;padding-left:1.4rem;margin-bottom:.7rem;color:var(--muted)}
.prose li::before{content:"";position:absolute;left:0;top:.7em;width:.6rem;height:1px;background:var(--accent)}
.prose li strong{color:var(--ink)}
.proves-box{background:var(--paper-2);border:1px solid var(--hair);border-radius:var(--radius);padding:clamp(1.6rem,3vw,2rem);margin-top:1rem}
.proves-box h2{margin-bottom:.8rem}
.proves-box p{color:var(--ink)}
.proves-box p:last-child{margin-bottom:0}

/* figures */
.figure{margin:clamp(1.8rem,4vw,2.6rem) 0;border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;background:var(--paper-3)}
.figure img,.figure object{display:block;width:100%;height:auto}
.figure .ph{display:none;min-height:280px;align-items:center;justify-content:center;text-align:center;padding:2.4rem;color:var(--dim);font-size:.85rem;line-height:1.6;background:repeating-linear-gradient(135deg,var(--paper-3),var(--paper-3) 14px,var(--paper-2) 14px,var(--paper-2) 28px)}
.figure .ph b{display:block;color:var(--muted);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:.7rem;margin-bottom:.5rem}
.figure figcaption{font-size:var(--step--1);color:var(--muted);padding:.9rem 1.3rem;border-top:1px solid var(--hair);background:var(--paper)}

/* campaign gallery (real published creative as framed artefacts) */
.gallery{display:grid;gap:1rem;grid-template-columns:1fr;margin:clamp(1.8rem,4vw,2.6rem) 0}
@media(min-width:620px){.gallery{grid-template-columns:1fr 1fr}}
.gallery figure{margin:0;border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;background:var(--paper-3)}
.gallery img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.gallery figcaption{font-size:.78rem;color:var(--muted);padding:.7rem 1rem;border-top:1px solid var(--hair);background:var(--paper)}
.gallery.full{grid-template-columns:1fr}
.gallery.full img{aspect-ratio:16/7}

/* backbar / footer */
.backbar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;padding:clamp(2rem,4vw,2.4rem) 0;border-top:1px solid var(--hair);margin-top:1.5rem}
.btn{font-family:var(--sans);font-size:var(--step--1);padding:.7em 1.3em;border-radius:999px;border:1px solid var(--hair);transition:border-color .2s,color .2s,background .25s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);color:#fdf6ee;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-deep);color:#fdf6ee}
footer{padding:clamp(2.2rem,4vw,2.6rem) 0;font-size:var(--step--1);color:var(--dim);text-align:center;border-top:1px solid var(--hair)}
footer a{color:var(--accent)}

/* full-width slider (fader) — featured app/content work, hover arrows + smooth slide */
.slider{ margin:clamp(1.8rem,4vw,2.8rem) 0 }
.slider-viewport{ position:relative; overflow:hidden; border:1px solid var(--hair); border-radius:var(--radius); background:var(--panel); aspect-ratio:16/9 }
.slider-track{ display:flex; height:100%; transition:transform .7s cubic-bezier(.16,1,.3,1) }
.slider-slide{ flex:0 0 100%; height:100%; min-width:0 }
.slider-slide img{ width:100%; height:100%; object-fit:contain; display:block }
.slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:2.7rem; height:2.7rem; border-radius:999px;
  background:rgba(250,247,241,0.6); border:1px solid var(--hair); backdrop-filter:blur(6px); color:var(--ink);
  display:grid; place-items:center; cursor:pointer; opacity:0; transition:opacity .35s, background .2s; }
.slider:hover .slider-arrow, .slider-arrow:focus-visible{ opacity:1 }
.slider-arrow:hover{ background:rgba(250,247,241,0.92) }
.slider-arrow.prev{ left:0.9rem } .slider-arrow.next{ right:0.9rem }
.slider-arrow::before{ content:""; width:0.5rem; height:0.5rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; }
.slider-arrow.prev::before{ transform:rotate(135deg); margin-left:3px }
.slider-arrow.next::before{ transform:rotate(-45deg); margin-right:3px }
.slider-dots{ position:absolute; bottom:0.8rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:0.45rem }
.slider-dots button{ width:0.5rem; height:0.5rem; border-radius:999px; border:1px solid var(--hair); background:rgba(250,247,241,0.55); cursor:pointer; padding:0; transition:background .2s, border-color .2s }
.slider-dots button[aria-current="true"]{ background:var(--accent); border-color:var(--accent) }
.slider-caption{ font-size:var(--step--1); color:var(--muted); padding-top:0.8rem; min-height:1.4em }
@media(prefers-reduced-motion:reduce){ .slider-track{ transition:none } }

/* motion */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
}