/* ==========================================================================
   AVÉRÉ — v2
   assets/css/style.css
   ========================================================================== */

/* ============ FONTS ============ */
/* Courier New is a system font — nothing to load. */
@font-face{
  font-family:'Cormorant';font-weight:300 700;font-style:normal;font-display:swap;
  src:url("../fonts/cormorant.woff2") format("woff2");
}
@font-face{
  font-family:'Cormorant';font-weight:300 700;font-style:italic;font-display:swap;
  src:url("../fonts/cormorant-italic.woff2") format("woff2");
}

/* ============ TOKENS ============ */
:root{
  --paper:#EBE5D8;
  --paper-deep:#E3DCCB;
  --ink:#181611;
  --ink-2:#2C281F;
  --ink-soft:#6A6353;
  --ink-faint:#9A917C;
  --hair:#CBC1AC;
  --hair-soft:#D7CFBC;
  /* sampled directly from the red ticking stripe in the artwork */
  --red:#B43C12;

  --mono:'Courier New', Courier, ui-monospace, monospace;
  --serif:'Cormorant', Georgia, serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  --gutter:30px;
  --maxw:1240px;
}

/* ============ BASE ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--mono);
  background-color:var(--paper);
  background-image:url("../img/texture-paper.jpg");
  background-size:560px;
  background-blend-mode:multiply;
  color:var(--ink);
  /* Courier New is already a light face — antialiased renders it spindly */
  -webkit-font-smoothing:auto;
  line-height:1.7;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* keep anchored sections clear of the fixed header */
#liberty,#proof,#contact{scroll-margin-top:108px}
::selection{background:var(--red);color:var(--paper)}

.label{
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;
}

/* ============ SITE HEADER ============ */
.siteheader{
  position:fixed;top:0;left:0;width:100%;z-index:60;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:18px var(--gutter);
  opacity:0;transform:translateY(-6px);
  transition:opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s,
             background .4s var(--ease), border-color .4s var(--ease);
  pointer-events:none;border-bottom:1px solid transparent;
}
body.settled .siteheader{opacity:1;transform:none;pointer-events:auto}
body.scrolled .siteheader{
  background:rgba(235,229,216,.86);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border-bottom-color:var(--hair);
}
.siteheader .edge-r{grid-column:3;justify-self:end;display:flex;gap:26px}

.navlink{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(241,236,225,.92);text-shadow:0 1px 5px rgba(0,0,0,.28);
  position:relative;padding-bottom:3px;font-weight:400;
  transition:color .4s var(--ease),text-shadow .4s var(--ease);
}
body.scrolled .navlink{color:var(--ink-2);text-shadow:none}
.navlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .3s var(--ease);
}
.navlink:hover::after,.navlink:focus-visible::after{width:100%}

/* reserves the centre space the settled logo lands in */
.header-slot{grid-column:2;width:126px;height:40px}

/* ============ THE SETTLING LOGO ============ */
.markset{
  position:fixed;left:50%;z-index:70;
  top:30vh;width:min(520px,62vw);
  transform:translateX(-50%);
  pointer-events:none;line-height:0;
  transition:top 1s var(--ease), width 1s var(--ease);
}
body.settled .markset{top:13px;width:126px;pointer-events:auto}

.mark{width:100%;height:auto;transition:opacity .4s var(--ease)}
.mark-white{filter:drop-shadow(0 1px 8px rgba(18,14,8,.28))}
.mark-black{position:absolute;top:0;left:0;opacity:0}
body.scrolled .mark-white{opacity:0}
body.scrolled .mark-black{opacity:1}
.markset:focus-visible{outline:2px solid var(--red);outline-offset:6px}

/* ============ HERO ============ */
.hero{position:relative;height:100vh;width:100%;overflow:hidden}
.hero-media{position:absolute;inset:0;background:var(--ink)}
.hero-media .hero-still,
.hero-media .hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 55%;
}
.hero-still{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1.10)}}

/* Two stacked layers. Each fades in only once it can actually play, so the
   page looks correct whether or not any video has been dropped in yet — and
   when there's more than one clip, B fades over A to change shot without a
   black frame between them. */
.hero{--xfade:900ms}
.hero-video{opacity:0;transition:opacity var(--xfade) var(--ease);z-index:2;will-change:opacity}
.hero-video[data-layer="b"]{z-index:3}
.hero.video-ready .hero-video.is-active{opacity:1}

.hero-vignette{
  position:absolute;inset:0;z-index:3;
  background:
    linear-gradient(to bottom, rgba(18,15,10,.18) 0%, rgba(18,15,10,0) 20%, rgba(18,15,10,0) 68%, rgba(18,15,10,.34) 100%),
    radial-gradient(125% 85% at 50% 45%, rgba(0,0,0,0) 64%, rgba(18,15,10,.16) 100%);
}
.grain{position:absolute;inset:0;z-index:4;opacity:.11;mix-blend-mode:overlay;pointer-events:none}

/* the regmarks + CTA sit inside the band where the hero fades to paper,
   so they are set in ink rather than the old near-white */
.regmark{
  position:absolute;z-index:6;font-size:11px;letter-spacing:.13em;
  color:rgba(245,241,232,.85);text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.4);
}
.regmark.bl{bottom:22px;left:var(--gutter)}
.regmark.br{bottom:22px;right:var(--gutter);text-align:right}

/* hero CTA */
.hero-cta{
  position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;transition:opacity .7s var(--ease) 1.15s;
  cursor:pointer;background:none;border:none;font-family:var(--mono);
}
body.settled .hero-cta{opacity:1}
body.moved .hero-cta{opacity:0;transition:opacity .25s var(--ease)}
.hero-cta .ct{
  font-size:14px;letter-spacing:.26em;text-transform:uppercase;color:#F5F1E8;
  font-weight:700;padding-bottom:7px;position:relative;
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 12px rgba(0,0,0,.45);
  transition:color .35s var(--ease);
}
.hero-cta .ct::after{
  content:"";position:absolute;left:50%;bottom:0;height:1px;width:34px;
  background:rgba(245,241,232,.6);transform:translateX(-50%);
  transition:width .35s var(--ease),background .35s var(--ease);
}

.hero-cta:hover .ct::after,.hero-cta:focus-visible .ct::after{width:100%;background:var(--red)}
.hero-cta .arrow{font-size:13px;color:rgba(245,241,232,.8);text-shadow:0 1px 3px rgba(0,0,0,.5);transition:transform .35s var(--ease)}
.hero-cta:hover .arrow{transform:translateY(4px)}
.hero-cta:focus-visible{outline:2px solid var(--red);outline-offset:8px}

/* ============ FILM BAND ============ */
.band{position:relative;width:100%;height:54vh;min-height:380px;overflow:hidden;margin-top:-1px}
.band img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.band-grain{position:absolute;inset:0;opacity:.08;mix-blend-mode:overlay;pointer-events:none}

/* ============ DOCUMENT SHEET ============ */
.sheet{max-width:var(--maxw);margin:0 auto;padding:14px var(--gutter) 30px}
.docframe{
  border:1px dashed var(--hair);
  padding:56px clamp(26px,4vw,64px) 60px;
  position:relative;
}
.catalog{display:grid;grid-template-columns:0.86fr 1.14fr;gap:clamp(34px,5vw,80px)}

/* ============ ABOUT ============ */
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.eyebrow .rule{height:1px;flex:1;background:var(--hair)}
.coll-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(40px,5vw,62px);line-height:.96;letter-spacing:.005em;
  color:var(--ink);margin-bottom:22px;
}
.coll-title em{font-style:italic;font-weight:400}
.hemrule{
  height:0;border-top:2px solid var(--red);width:46px;margin-bottom:26px;
  background:repeating-linear-gradient(90deg,var(--red) 0 7px,transparent 7px 12px);
}
.story p{font-size:14px;line-height:1.8;color:var(--ink-2);margin-bottom:15px;max-width:44ch}
.story p.muted{color:var(--ink-soft)}
/* closing line of the About copy — emphasis only, wording untouched.
   scoped as .story p.close so it outranks .story p */
.story p.close{
  font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.45;
  color:var(--ink);margin-top:26px;max-width:26ch;
}

/* ============ ILLUSTRATION PLATE ============ */
.plate{
  display:block;width:100%;text-align:left;cursor:pointer;
  font-family:var(--mono);background:var(--paper-deep);
  border:1px solid var(--hair);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.plate-frame{
  display:block;position:relative;aspect-ratio:1600/1212;overflow:hidden;
}
.plate-frame .illu{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:10px;
  transition:opacity .3s var(--ease);
}
.plate-frame .illu-red{opacity:0}
.plate-name{
  display:block;padding:14px 16px 15px;border-top:1px solid var(--hair-soft);
  font-size:13.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--ink);transition:color .3s var(--ease),border-color .3s var(--ease);
}

/* the swap: border + name go red, and the only part of the drawing
   that changes is the cuff ticking stripe (photo swap) */
.plate:hover,
.plate:focus-visible,
.plate.is-active{border-color:var(--red);box-shadow:0 10px 26px -20px rgba(24,20,12,.4)}
.plate:hover .plate-name,
.plate:focus-visible .plate-name,
.plate.is-active .plate-name{color:var(--red);border-top-color:var(--red)}
.plate:hover .illu-red,
.plate:focus-visible .illu-red,
.plate.is-active .illu-red{opacity:1}
.plate:hover .illu-black,
.plate:focus-visible .illu-black,
.plate.is-active .illu-black{opacity:0}
.plate:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ============ SPEC COPY ============ */
.spec{margin-top:22px}
.spec p{font-size:14px;line-height:1.8;color:var(--ink-2);margin-bottom:13px;max-width:46ch}
.spec p.muted{color:var(--ink-soft);font-size:12px;letter-spacing:.09em;text-transform:uppercase;margin-top:16px}

/* ============ PROOF — homepage strip ============ */
.proof{margin-top:64px;padding-top:8px}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.pf-img{
  position:relative;overflow:hidden;aspect-ratio:4/5;
  border:1px solid var(--hair);background:var(--paper-deep);
}
.pf-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.pf-img:hover img{transform:scale(1.03)}

.proof-more{
  display:inline-block;margin-top:26px;
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--hair);padding-bottom:4px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.proof-more:hover,.proof-more:focus-visible{color:var(--red);border-color:var(--red)}
.proof-more span{display:inline-block;margin-left:6px;transition:transform .3s var(--ease)}
.proof-more:hover span{transform:translateX(3px)}

/* ============ PROOF — full gallery page ============ */
/* Masonry via CSS columns. Each plate keeps its own aspect ratio, so the
   columns stagger naturally. --gap is shared by the column gutter and the
   vertical rhythm so the spacing reads as one grid. */
.proof-masonry{
  --gap:clamp(14px,2vw,24px);
  column-count:3;
  column-gap:var(--gap);
}
.proof-masonry .pf-img{
  aspect-ratio:var(--ar,4/5);
  break-inside:avoid;
  -webkit-column-break-inside:avoid;   /* older WebKit */
  page-break-inside:avoid;             /* older Gecko */
  margin:0 0 var(--gap);
}
.proof-masonry .pf-img img{transition:transform .7s var(--ease),opacity .5s var(--ease)}

/* photos fade up as they decode, rather than snapping in */
.proof-masonry.is-live .pf-img img{opacity:0}
.proof-masonry.is-live .pf-img img.is-loaded{opacity:1}
.proof-masonry.is-loading{min-height:260px}

/* ============ SUBPAGE ============ */
/* No hero to sit under, so the sheet starts below the fixed header. */
.subpage .sheet{padding-top:118px}
.pagehead{margin-bottom:42px}
.pagehead h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(38px,6vw,62px);line-height:1.04;letter-spacing:-.01em;
  margin-top:14px;
}
.pagehead h1 em{font-style:italic}
.pagehead .lede{
  font-size:14px;line-height:1.8;color:var(--ink-2);
  max-width:52ch;margin-top:20px;
}
.backlink{
  display:inline-block;margin-top:52px;
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--hair);padding-bottom:4px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.backlink span{display:inline-block;margin-right:6px;transition:transform .3s var(--ease)}
.backlink:hover span{transform:translateX(-3px)}
.backlink:hover,.backlink:focus-visible{color:var(--red);border-color:var(--red)}

/* ============ FOOTER ============ */
.foot{
  max-width:var(--maxw);margin:0 auto;padding:46px var(--gutter) 60px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;
}
.foot-l,.foot-r{
  font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);line-height:2.1;
}
.foot-r{justify-self:end;text-align:right}
.foot-r a{transition:color .35s var(--ease)}
.foot-r a:hover,.foot-r a:focus-visible{color:var(--red)}
.foot-c{justify-self:center}
.foot-c img{width:132px;height:auto}

/* ============ SCROLL REVEAL ============ */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media(max-width:880px){
  :root{--gutter:20px}
  .catalog{grid-template-columns:1fr;gap:52px}
  .siteheader{padding:14px var(--gutter)}
  .siteheader .edge-r{gap:18px}
  .navlink{font-size:11px}
  body.settled .markset{width:104px;top:12px}
  .header-slot{width:104px;height:34px}
  .sheet{padding:8px 16px 24px}
  .docframe{padding:46px 18px 50px}
  .regmark.bl,.regmark.br{display:none}
  .hero-cta{bottom:40px}
  .proof{margin-top:52px}
  .proof-masonry{column-count:2}
  .subpage .sheet{padding-top:96px}
}
@media(max-width:600px){
  /* the centred logo and the nav collide below ~380px — shrink both */
  body.settled .markset{width:84px;top:14px}
  .header-slot{width:84px;height:30px}
  .siteheader .edge-r{gap:14px}
  .navlink{font-size:10.5px;letter-spacing:.1em}
  .proof-grid{grid-template-columns:1fr;gap:26px}
  .proof-grid .pf-img{aspect-ratio:16/11}
  .proof-masonry{column-count:1;--gap:26px}
  .foot{grid-template-columns:1fr;text-align:center;gap:30px;padding-top:38px}
  .foot-l{order:2}
  .foot-c{order:1}
  .foot-r{order:3;justify-self:center;text-align:center}
  .markset{width:min(400px,74vw)}
  .hero-cta .ct{letter-spacing:.2em;font-size:13px}
}

@media(max-width:340px){
  body.settled .markset{width:64px;top:15px}
  .header-slot{width:64px;height:24px}
  .siteheader .edge-r{gap:10px}
  .navlink{font-size:10px;letter-spacing:.07em}
}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important}
  html{scroll-behavior:auto}
  .markset,.siteheader,.hero-cta,.reveal,.mark,.plate,.plate-frame .illu{transition:none !important}
  .hero-still{animation:none}
  .pf-img:hover img{transform:none}
}