/* ============================================================
   AUREL — Zürich · Collection 01 lookbook
   Off-white ground · Klein Blue masterbrand · Copper (Volte) · Silver (Canter)
   ============================================================ */

:root{
  --paper:      #EFEBE2;   /* warm off-white page */
  --paper-2:    #E7E2D6;
  --ink:        #211C15;   /* warm near-black */
  --ink-soft:   #6B6459;
  --line:       #CFC8BA;

  --klein:      #0047AB;   /* sole masterbrand colour */
  --klein-br:   #2E6BD6;
  --copper:     #B87333;   /* Volte accent */
  --brown:      #3D2B1F;   /* Canter ground / breeches */
  --brown-2:    #4A3526;
  --ice:        #E8F0FE;   /* Canter top */
  --silver:     #B7B9BC;   /* Canter reflective */
  --off:        #F8F5EF;

  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --mx: clamp(20px, 6vw, 120px);
  --maxw: 1340px;
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }

/* image plates — matte panel that matches each render's native ground */
.plate{ position:relative; overflow:hidden; border:1px solid var(--line); }
.plate img{ width:100%; height:100%; object-fit:contain; }
.plate--cover img{ object-fit:cover; }

/* ---- type utilities ---- */
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin:0; }
.kicker{ font-family:var(--sans); font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-soft); }
.serif{ font-family:var(--serif); font-weight:400; }
.rule{ height:1px; background:var(--line); border:0; width:100%; }
.klein-rule{ height:2px; background:var(--klein); border:0; width:60px; }

/* ============================================================ topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:15px var(--mx);
  background:color-mix(in oklab, var(--paper) 84%, transparent);
  backdrop-filter:saturate(120%) blur(9px);
  border-bottom:1px solid var(--line);
}
.topbar .mark{ font-family:var(--serif); font-weight:600; font-size:19px; letter-spacing:.18em; }
.topbar nav{ display:flex; gap:26px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.topbar nav a{ text-decoration:none; transition:color .2s; }
.topbar nav a:hover{ color:var(--klein); }
.topbar .city{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-soft); }

/* ============================================================ hero */
.hero{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,72px);
  align-items:end; padding:clamp(40px,7vh,96px) var(--mx) clamp(36px,5vh,64px);
  max-width:var(--maxw); margin:0 auto;
}
.hero__sub{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.wordmark{ font-family:var(--serif); font-weight:600; font-size:clamp(64px,13vw,170px); line-height:.84; letter-spacing:.02em; margin:0; }
.wordmark .zur{ display:block; font-size:clamp(15px,1.5vw,20px); font-weight:500; font-style:italic; letter-spacing:.06em; color:var(--ink-soft); margin:14px 0 0 .3em; }
.hero__line{ font-family:var(--serif); font-size:clamp(19px,2.1vw,28px); line-height:1.32; margin:26px 0 0; max-width:20ch; text-wrap:pretty; }
.hero__line .em{ font-style:italic; color:var(--klein); }
.hero__media{ position:relative; }
.hero__media .plate{ width:100%; height:clamp(440px,68vh,720px); background:#dcdce0; border-radius:3px; }
.hero__tag{ position:absolute; left:0; bottom:-24px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-soft); text-transform:uppercase; }

/* ============================================================ statement */
.statement{ max-width:var(--maxw); margin:0 auto; padding:clamp(64px,11vh,140px) var(--mx); display:grid; place-items:center; text-align:center; }
.statement p{ font-family:var(--serif); font-weight:400; font-size:clamp(25px,3.6vw,46px); line-height:1.26; max-width:22ch; margin:22px 0 0; text-wrap:balance; }
.statement .em{ font-style:italic; color:var(--klein); }

/* ============================================================ collection index */
.index{ max-width:var(--maxw); margin:0 auto; padding:0 var(--mx) clamp(36px,7vh,80px); }
.index__head{ display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--ink); padding-top:16px; margin-bottom:4px; }
.index__head h2{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; margin:0; font-weight:500; }
.idx-row{ display:grid; grid-template-columns:78px 132px 1fr auto; gap:clamp(16px,3vw,48px); align-items:center; padding:24px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; transition:padding-left .35s ease, color .35s ease; }
.idx-row:hover{ padding-left:12px; color:var(--klein); }
.idx-row .num{ font-family:var(--mono); font-size:13px; color:var(--ink-soft); letter-spacing:.1em; }
.idx-row .thumb{ height:96px; background:#ebebea; border:1px solid var(--line); overflow:hidden; }
.idx-row .thumb img{ width:100%; height:100%; object-fit:contain; }
.idx-row .name{ font-family:var(--serif); font-weight:500; font-size:clamp(32px,5.4vw,68px); line-height:.95; letter-spacing:.01em; }
.idx-row .name small{ display:block; font-family:var(--sans); font-weight:400; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); margin-top:10px; }
.idx-row:hover .name small{ color:var(--klein); }
.idx-row .desc{ font-size:12.5px; letter-spacing:.03em; color:var(--ink-soft); max-width:30ch; text-align:right; }

/* ============================================================ chapter */
.chapter{ padding:clamp(56px,9vh,128px) 0; }
.chapter--brown{ background:var(--brown); color:var(--off); }
.chapter--brown .eyebrow,
.chapter--brown .kicker,
.chapter--brown .ann__note,
.chapter--brown .slot-tag,
.chapter--brown .idx-row .num{ color:#b8a896; }
.chapter--brown .rule,
.chapter--brown .line-soft{ background:#5a4636; }

.chap-head{ max-width:var(--maxw); margin:0 auto; padding:0 var(--mx); display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:end; }
.chap-head .num{ font-family:var(--mono); font-size:13px; letter-spacing:.18em; color:var(--ink-soft); }
.chapter--brown .chap-head .num{ color:#b8a896; }
.chap-head .big{ font-family:var(--serif); font-weight:600; font-size:clamp(62px,11vw,150px); line-height:.84; letter-spacing:.01em; margin:12px 0 0; }
.chap-head .desc{ font-family:var(--serif); font-style:italic; font-size:clamp(18px,2vw,26px); line-height:1.3; margin:0 0 6px; }
.chap-head .body{ font-size:14.5px; line-height:1.7; max-width:44ch; margin:14px 0 0; opacity:.9; }
.chap-head .refs{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; margin:16px 0 0; color:var(--ink-soft); }
.chapter--brown .chap-head .refs{ color:#b8a896; }

/* chapter gallery */
.chap-media{ max-width:var(--maxw); margin:clamp(34px,5vh,68px) auto 0; padding:0 var(--mx); display:grid; grid-template-columns:1.32fr 1fr; gap:clamp(14px,2vw,28px); }
.chap-media .plate.tall{ width:100%; height:clamp(460px,80vh,820px); border-radius:3px; }
.chap-media .stack{ display:grid; grid-template-rows:1fr 1fr; gap:clamp(14px,2vw,28px); }
.chap-media .stack .plate{ width:100%; min-height:220px; border-radius:3px; }
.slot-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--ink-soft); text-transform:uppercase; margin-top:9px; }

/* the pieces */
.pieces{ max-width:var(--maxw); margin:clamp(44px,7vh,90px) auto 0; padding:0 var(--mx); }
.pieces .p-head{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:13px; margin-bottom:clamp(24px,3vw,40px); }
.chapter--brown .pieces .p-head{ border-bottom-color:#5a4636; }
.pieces .p-head h3{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; margin:0; font-weight:500; }
.piece-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,48px); }
.piece{ display:grid; grid-template-columns:minmax(140px,40%) 1fr; gap:clamp(16px,2vw,28px); align-items:start; }
.piece .plate{ width:100%; aspect-ratio:3/4; border-radius:3px; }
.piece h4{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.4vw,30px); margin:0 0 2px; }
.piece .style-no{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-soft); }
.piece dl{ margin:16px 0 0; display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:12.5px; }
.piece dt{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding-top:2px; }
.piece dd{ margin:0; line-height:1.45; }
.piece dd .chip{ display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; margin-right:5px; }

/* construction */
.construction{ max-width:var(--maxw); margin:clamp(44px,7vh,88px) auto 0; padding:0 var(--mx); }
.construction .c-head{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:13px; margin-bottom:clamp(24px,3vw,42px); }
.chapter--brown .construction .c-head{ border-bottom-color:#5a4636; }
.construction .c-head h3{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; margin:0; font-weight:500; }
.detail-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,38px) clamp(18px,2.4vw,34px); }
.detail .plate{ width:100%; aspect-ratio:4/3; border-radius:3px; }
.ann{ border-top:1px solid var(--line); margin-top:13px; padding-top:11px; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; }
.chapter--brown .ann{ border-top-color:#5a4636; }
.ann__no{ font-family:var(--mono); font-size:11px; color:var(--klein); letter-spacing:.1em; }
.chapter--brown .ann__no{ color:var(--klein-br); }
.ann__lead{ font-weight:500; font-size:13.5px; letter-spacing:.02em; }
.ann__note{ font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--ink-soft); margin-top:4px; line-height:1.5; }
.chip{ display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; margin-right:5px; }
.chip--klein{ background:var(--klein); } .chip--copper{ background:var(--copper); }
.chip--silver{ background:var(--silver); } .chip--ice{ background:var(--ice); }
.chip--brown{ background:var(--brown); } .chip--off{ background:var(--off); border:1px solid var(--line); }

/* colorway strip */
.colorway{ max-width:var(--maxw); margin:clamp(44px,7vh,88px) auto 0; padding:0 var(--mx); }
.colorway .cw-head{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; margin:0 0 clamp(20px,2.4vw,30px); font-weight:500; }
.swatches{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,22px); }
.swatch .sw{ height:clamp(120px,14vw,180px); border:1px solid var(--line); border-radius:3px; }
.chapter--brown .swatch .sw{ border-color:#5a4636; }
.swatch .meta{ display:flex; justify-content:space-between; margin-top:11px; gap:8px; }
.swatch .nm{ font-weight:500; font-size:12.5px; letter-spacing:.02em; }
.swatch .cd{ font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); letter-spacing:.04em; }
.chapter--brown .swatch .cd{ color:#b8a896; }

/* ============================================================ standards */
.standards{ max-width:var(--maxw); margin:0 auto; padding:clamp(72px,12vh,150px) var(--mx); }
.standards .s-head{ max-width:40ch; margin-bottom:clamp(36px,5vw,62px); }
.standards .s-head h2{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,4.2vw,54px); line-height:1.08; margin:16px 0 0; }
.std-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.std{ background:var(--paper); padding:clamp(18px,2vw,26px); }
.std .val{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.4vw,40px); line-height:1; }
.std .val small{ font-size:.45em; font-family:var(--mono); font-weight:400; letter-spacing:.04em; color:var(--ink-soft); }
.std .lbl{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:12px; }
.std .sub{ font-size:12px; line-height:1.5; margin-top:8px; color:var(--ink-soft); }
.std-foot{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:clamp(26px,3vw,40px); font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-soft); }
.std-foot span{ display:flex; align-items:center; gap:8px; }
.std-foot span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--klein); }

/* ============================================================ closing */
.closing{ background:var(--klein); color:#fff; padding:clamp(84px,15vh,190px) var(--mx); display:grid; place-items:center; text-align:center; }
.label-device{ background:#fff; color:var(--klein); padding:30px 52px; border-radius:3px; display:inline-grid; place-items:center; box-shadow:0 30px 80px -30px rgba(0,0,0,.5); }
.label-device .lm{ font-family:var(--serif); font-weight:600; font-size:clamp(30px,5vw,52px); letter-spacing:.14em; }
.label-device .lz{ font-family:var(--serif); font-style:italic; font-size:13px; letter-spacing:.1em; opacity:.7; margin-top:5px; }
.closing .end-line{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.6vw,32px); line-height:1.4; max-width:22ch; margin:clamp(36px,6vh,68px) 0 0; text-wrap:balance; }
.closing .foot{ display:flex; gap:14px 40px; flex-wrap:wrap; justify-content:center; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-top:clamp(40px,7vh,82px); }
.closing .price{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:rgba(255,255,255,.9); margin-top:22px; }

/* ============================================================ reveal */
html.reveal-on .reveal{ opacity:0; transform:translateY(20px); transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); }
html.reveal-on .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ html.reveal-on .reveal{ opacity:1 !important; transform:none !important; transition:none; } }

/* ============================================================ responsive */
@media (max-width:980px){
  .hero{ grid-template-columns:1fr; }
  .hero__media{ order:-1; }
  .hero__media .plate{ height:58vh; }
  .chap-head{ grid-template-columns:1fr; gap:22px; }
  .chap-media{ grid-template-columns:1fr; }
  .chap-media .stack{ grid-template-rows:auto auto; }
  .piece-grid{ grid-template-columns:1fr; }
  .detail-grid{ grid-template-columns:repeat(2,1fr); }
  .swatches{ grid-template-columns:repeat(2,1fr); }
  .std-grid{ grid-template-columns:repeat(2,1fr); }
  .idx-row{ grid-template-columns:60px 100px 1fr; }
  .idx-row .desc{ display:none; }
  .topbar nav{ display:none; }
}
@media (max-width:560px){
  .detail-grid{ grid-template-columns:1fr 1fr; }
  .piece{ grid-template-columns:1fr; }
  .idx-row .thumb{ display:none; }
}