:root{
  --parchemin:#F3EFE7; --noir:#16130F; --laiton:#8C6B2F;
  --sang:#8E2530; --verdigris:#2A6A52; --label:#443E36;
  --rule:rgba(22,19,15,0.16); --ground:#EAE5DA;
}
*{box-sizing:border-box;border-radius:0}
html,body{margin:0}
body{background:var(--parchemin);color:var(--noir);font-family:"Instrument Sans",system-ui,sans-serif;
  font-weight:450;font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:1140px;margin:0 auto;padding:clamp(36px,6vw,72px) clamp(20px,4vw,32px) clamp(64px,10vw,128px)}
.masthead{display:flex;align-items:center;gap:clamp(14px,2.4vw,20px)}
.seal{width:clamp(34px,4.6vw,44px);height:auto;color:var(--noir);flex:none}
.wordmark{height:clamp(15px,2.1vw,20px);width:auto;color:var(--noir);display:block}
.wordmark.foot{height:12px;margin-bottom:10px;opacity:.9}
hr.rule{height:1px;background:var(--rule);border:0;margin:24px 0 0}
h1{font-family:"Marcellus",serif;font-weight:400;font-size:clamp(34px,6.4vw,66px);line-height:1.08;
  margin:clamp(36px,7vw,72px) 0 22px;max-width:17ch}
h2{font-family:"Marcellus",serif;font-weight:400;font-size:clamp(25px,4.4vw,32px);line-height:1.2;margin:0 0 14px;max-width:24ch}
h3{font-family:"Marcellus",serif;font-weight:400;font-size:clamp(23px,3.6vw,27px);line-height:1.2;margin:0 0 4px}
.standfirst{max-width:60ch;color:var(--label);margin:0 0 14px;font-size:17px}
.micro{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--label);font-weight:600}
section{margin-top:clamp(56px,10vw,120px)}
.lede{max-width:52ch;margin:0 0 clamp(24px,4vw,34px);font-size:17px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin:0}
.btn{display:inline-block;padding:15px 26px;border:1px solid var(--noir);text-decoration:none;
  font-size:11px;letter-spacing:0.17em;text-transform:uppercase;font-weight:600;color:var(--noir);
  transition:background .15s,color .15s}
.btn:hover{background:var(--ground)}
.btn.primary{background:var(--noir);color:var(--parchemin)}
.btn.primary:hover{background:#2A251E}

/* departments */
.dept{border-top:1px solid var(--rule);padding:clamp(28px,5vw,44px) 0;display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,0.85fr);gap:clamp(24px,4vw,52px);align-items:start}
.dept:last-of-type{border-bottom:1px solid var(--rule)}
.access{font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--laiton);font-weight:600;margin:0 0 10px}
.dept p.body{margin:10px 0 0;max-width:52ch}
.evidence{background:var(--ground);padding:24px 26px}
.evidence .fig{font-family:"Marcellus",serif;font-size:clamp(27px,4.4vw,34px);line-height:1.08;margin:0 0 8px}
.evidence p{margin:0;font-size:14px;color:var(--label);max-width:34ch}
.evidence hr{border:0;height:1px;background:var(--rule);margin:18px 0}

/* enamel disc */
.enamel{width:88px;height:88px;border-radius:50%;position:relative;flex:none;
  background-image:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,0.66) 0%, rgba(255,255,255,0.14) 45%, rgba(255,255,255,0) 72%),
    radial-gradient(circle at 50% 92%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(circle at 50% 44%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.26) 93%, rgba(0,0,0,0.42) 100%),
    var(--enamel);
  box-shadow:0 4px 10px rgba(22,19,15,0.26), inset 0 0 0 1px rgba(22,19,15,0.20);
}

/* selector */
.selector{display:flex;gap:clamp(14px,3vw,26px);overflow-x:auto;padding:6px 2px 18px;margin-top:clamp(22px,4vw,30px);
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.pick{background:none;border:0;padding:0;cursor:pointer;flex:none;width:96px;text-align:center;
  font-family:inherit;color:var(--label)}
.pick .ring{width:96px;height:96px;display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;transition:border-color .18s}
.pick .enamel{width:76px;height:76px;transition:transform .18s}
.pick b{display:block;font-size:10px;letter-spacing:0.15em;text-transform:uppercase;font-weight:600;
  margin-top:10px;line-height:1.3}
.pick u{display:block;font-size:10px;text-decoration:none;opacity:0.6;margin-top:2px}
.pick:hover .enamel{transform:scale(1.05)}
.pick[aria-selected="true"] .ring{border-color:var(--laiton)}
.enamel.prov{box-shadow:0 4px 10px rgba(22,19,15,0.26), inset 0 0 0 1px rgba(22,19,15,0.20),
  0 0 0 1px var(--parchemin), 0 0 0 3px rgba(140,107,47,0.55)}
.qual{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--label);opacity:.9}
.pick[aria-selected="true"] b{color:var(--noir)}
.pick:focus-visible .ring{border-color:var(--noir)}

/* card track */
.track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.track::-webkit-scrollbar{display:none}
.card{flex:0 0 100%;scroll-snap-align:start;padding:clamp(26px,4.5vw,40px) 0;display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,0.9fr);gap:clamp(22px,3.5vw,44px);align-items:start}
.where{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--label);font-weight:600;margin:0 0 12px}
.piece{font-family:"Marcellus",serif;font-size:29px;line-height:1.16;margin:0 0 8px}
.spec{color:var(--label);font-size:14px;margin:0 0 16px}
.line{margin:0 0 12px;max-width:46ch;font-size:17px}
.proof{margin:0;max-width:46ch;color:var(--label);font-size:15px}
.figures{background:var(--ground);padding:22px 24px}
.fig-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule)}
.fig-row:last-child{border-bottom:0}
.fig-k{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--label);font-weight:600;padding-top:5px}
.fig-v{font-family:"Marcellus",serif;font-size:20px;white-space:nowrap}
.delta{font-family:"Marcellus",serif;font-size:31px;line-height:1}
.below{color:var(--verdigris)} .above{color:var(--sang)}
.mark{display:inline-flex;align-items:center;gap:9px;margin:20px 0 0;padding:6px 11px 6px 10px;
  border:1px solid rgba(140,107,47,0.55);font-size:10px;letter-spacing:0.17em;text-transform:uppercase;
  font-weight:600;color:var(--laiton);line-height:1;cursor:default}
.mark i{display:block;width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--laiton);position:relative;flex:none}
.mark i::after{content:"";position:absolute;inset:2px;background:var(--laiton)}
.mark.open{border-color:var(--rule);color:var(--label)}
.mark.open i{border-color:var(--label);opacity:0.5}
.mark.open i::after{background:none}
.counter{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.counter .micro{margin:0}
.arrows{display:flex;gap:8px}
.arrows button{background:none;border:1px solid var(--rule);width:38px;height:38px;cursor:pointer;
  color:var(--noir);font-size:15px;line-height:1;transition:background .15s}
.arrows button:hover{background:var(--ground)}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,56px);margin-top:clamp(26px,4vw,36px)}
.chips{display:flex;flex-wrap:wrap;gap:20px 14px;margin-top:20px}
.chip{width:78px;text-align:center}
.chip .enamel{width:60px;height:60px;margin:0 auto}
.chip b{display:block;font-size:10.5px;font-weight:500;margin-top:10px;line-height:1.3;color:var(--label)}
.count{font-family:"Marcellus",serif;font-size:clamp(34px,6vw,44px);line-height:1;margin:0 0 4px}
.stat{display:flex;gap:clamp(28px,6vw,60px);margin:clamp(24px,4vw,34px) 0 0;flex-wrap:wrap}

.capture{margin-top:clamp(22px,4vw,30px);max-width:560px}
.capture .row{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.capture input{flex:1 1 260px;min-width:0;padding:15px 16px;border:1px solid var(--noir);
  background:transparent;font-family:inherit;font-size:15px;color:var(--noir)}
.capture input::placeholder{color:rgba(68,62,54,0.55)}
.capture input:focus{outline:2px solid var(--laiton);outline-offset:-1px}
.capture button{cursor:pointer;font-family:inherit}
.fineprint{margin:16px 0 0;font-size:13px;color:var(--label);max-width:56ch}
table.reg{width:100%;border-collapse:collapse;margin-top:30px}
table.reg th{text-align:left;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--label);
  font-weight:600;padding:0 16px 12px 0;border-bottom:1px solid var(--rule)}
table.reg td{padding:20px 16px 20px 0;border-bottom:1px solid var(--rule);vertical-align:top;font-size:15px}
table.reg td.name{font-family:"Marcellus",serif;font-size:22px;white-space:nowrap}
table.reg td.price{font-family:"Marcellus",serif;font-size:20px;white-space:nowrap}
table.reg td.detail{color:var(--label);max-width:46ch}

footer{margin-top:clamp(56px,10vw,120px);border-top:1px solid var(--rule);padding-top:clamp(28px,5vw,40px);color:var(--label);font-size:13px}
footer p{margin:0}
footer hr{border:0;height:1px;background:var(--rule);margin:clamp(26px,4.5vw,40px) 0 clamp(22px,3.5vw,32px)}
.legend{display:grid;grid-template-columns:repeat(2,minmax(0,260px));gap:clamp(24px,4vw,44px)}
.legend .key{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:0.17em;
  text-transform:uppercase;font-weight:600;color:var(--laiton);margin:0 0 10px}
.legend .key i.punch{width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--laiton);
  position:relative;flex:none;display:block}
.legend .key i.punch::after{content:"";position:absolute;inset:2px;background:var(--laiton)}
.legend .key i.punch.open{border-color:var(--label);opacity:0.5}
.legend .key i.punch.open::after{background:none}
.legend div p:last-child{max-width:34ch;line-height:1.55}
.colophon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.5vw,44px);align-items:start;font-size:12px}

.colophon p{line-height:1.6}
@media(max-width:900px){
  .dept{grid-template-columns:1fr;gap:26px}
  .card{grid-template-columns:1fr;gap:24px}
  .cols{grid-template-columns:1fr;gap:40px}
  .legend{grid-template-columns:1fr;gap:26px}
  .colophon{grid-template-columns:1fr;gap:24px}
  table.reg td.name{font-size:19px}
}
/* ==========================================================================
   Enamel finishes. Content colours from the approved homepage design
   (docs/CocotteWatch-Homepage.html), expressed as classes so the markup
   carries no raw hex. Identical values, same rendering.
   ========================================================================== */
.enamel-volcanic { --enamel: linear-gradient(#F97C00,#D43414); }
.enamel-white    { --enamel: linear-gradient(#FFFFFF,#FFFFFF); }
.enamel-cerise   { --enamel: linear-gradient(#EA4436,#70151B); }
.enamel-cassis   { --enamel: linear-gradient(#7A3D69,#40203A); }
.enamel-camomille{ --enamel: linear-gradient(#F1CB5E,#E1CA84); }
.enamel-sage     { --enamel: linear-gradient(#AEC2B8,#8AA299); }
.enamel-caribbean{ --enamel: linear-gradient(#99D5D9,#4FACB7); }
.enamel-marseille{ --enamel: linear-gradient(#266FB1,#1E4A84); }
.enamel-artichaut{ --enamel: linear-gradient(#1B5949,#1B2C2B); }
.enamel-agave    { --enamel: linear-gradient(#445B6A,#192035); }
.enamel-bamboo   { --enamel: linear-gradient(#A3CC7D,#2C683D); }
.enamel-thyme    { --enamel: linear-gradient(#828D7F,#585A51); }
.enamel-riviera  { --enamel: linear-gradient(#4DD3C9,#007481); }
.enamel-flint    { --enamel: linear-gradient(#928C8B,#090A0A); }
.enamel-garnet   { --enamel: linear-gradient(#8C3D3A,#530F13); }
.enamel-nuit     { --enamel: linear-gradient(#29495D,#0C1D2B); }
.enamel-nectar   { --enamel: linear-gradient(#EABE49,#CC843F); }
.enamel-chambray { --enamel: linear-gradient(#375D7E,#789EB6); }
.enamel-satin    { --enamel: linear-gradient(#3A3A3D,#22222B); }
.enamel-shell    { --enamel: linear-gradient(#EBE4E3,#D2BDBD); }
.enamel-seasalt  { --enamel: linear-gradient(#D8E1E1,#9FB3B3); }
.enamel-meringue { --enamel: linear-gradient(#EAE8E4,#D8D0C2); }
.enamel-azure    { --enamel: linear-gradient(#1172BA,#053D68); }