/* ==========================================================
   LUKAS GILL — PORTFOLIO  (v3)
   warm paper · navy accent · carousel · micro-motion
   ----------------------------------------------------------
   EDIT COLORS + FONTS HERE. Everything inherits these.
   ========================================================== */

/* Melange Grotesk - licensed from Kimera (kimeracorp.eu), self-hosted.
   To swap a weight, drop the .woff2 in /fonts/ and add a block below. */
@font-face{ font-family:"Melange"; src:url("fonts/KMRMelangeGrotesk-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Melange"; src:url("fonts/KMRMelangeGrotesk-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Melange"; src:url("fonts/KMRMelangeGrotesk-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Melange"; src:url("fonts/KMRMelangeGrotesk-ExtraBold.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap; }

:root{
  --paper:    #EFEFEC;   /* cool paper - light, neutral, no almond */
  --ink:      #171716;   /* near-black, neutral */
  --zinc:     #E4E4E1;   /* panel grey - exactly the render stage colour */
  --graphite: #6E6E68;   /* muted metadata text */
  --line:     #D4D4D0;   /* hairlines */

  /* ACCENT - one line to change the whole site's color story.
     Current: deep navy w/ a grey tinge.
     Alternates:  #1533E0 cobalt · #FF4B00 orange · #E22B12 signal red */
  --accent:   #1B294B;
  --on-accent:#EFEFEC;

  --pad: 16px;
  --gap: 20px;
  --maxw: 1680px;        /* content stops growing here and centres */

  --ease: cubic-bezier(.22,.61,.36,1);
  /* One family, two jobs: Melange for display AND for spec labels. */
  --sans: "Melange","Helvetica Neue",Arial,sans-serif;
  --mono: "Melange","Helvetica Neue",Arial,sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:500; font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
body{ -webkit-tap-highlight-color:rgba(27,41,75,.25); }

/* Melange ships eleven stylistic sets and a full figure kit. These three
   are switched on site-wide:
     case  hyphens and brackets rise to cap height in uppercase labels
     tnum  tabular figures - scoped to the resume date column only
     ss01  the single-storey geometric "a"
   Others available if wanted: zero slashed zero, ss02 alt l, ss03 alt t,
   ss04 alt u, ss05 alt G, ss06 alt I, ss07 alt J, ss08 alt R,
   ss09 schoolbook set, ss10 round punctuation. */
body{ font-feature-settings:"case" 1,"ss01" 1; }
/* tabular figures only where numbers stack in a column. Site-wide they
   spaced out every year and turned "2.1" into "2 . 1". */
.row .when{ font-feature-settings:"case" 1,"tnum" 1; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
img{ display:block; width:100%; height:100%; object-fit:cover; }
.frame picture{ display:block; width:100%; height:100%; }
main{ padding:0 var(--pad); max-width:var(--maxw); margin-inline:auto; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
::selection{ background:var(--accent); color:var(--on-accent); }

/* tactile press — every interactive element "clicks" down 1px */
a:active, button:active{ transform:translate(1px,1px); }

/* (hatched drafting band removed in Rev 12 - see README to restore) */

/* ----------------------------------------------------------
   HEADER — no bar. Floating text; the nav links follow you down.
   ---------------------------------------------------------- */
.top{
  position:sticky; top:0; z-index:30;
  display:flex; justify-content:flex-end; align-items:baseline;
  gap:18px; flex-wrap:wrap;
  padding:12px var(--pad) 6px;
  max-width:var(--maxw); margin-inline:auto;
  pointer-events:none;            /* only the text itself is clickable */
}
.top a{ pointer-events:auto; }
.brand{
  font-weight:800;
  text-transform:uppercase; letter-spacing:.02em; font-size:12.5px;
}
/* homepage: the small name only exists once the big one has scrolled away */
.brand--reveal{ opacity:0; pointer-events:none !important;
  transition:opacity .22s var(--ease); }
.brand--reveal.show{ opacity:1; pointer-events:auto !important; }
.nav{ display:flex; gap:16px; flex-wrap:wrap; margin-right:-6px; }
.nav a{
  font-family:var(--mono); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  padding:4px 6px;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.nav a:hover{ background:var(--accent); color:var(--on-accent); }
.nav a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--ink); }

/* ----------------------------------------------------------
   HOME HERO
   ---------------------------------------------------------- */
.hero{
  min-height:76vh; min-height:76svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:40px;
}
.wordmark{
  margin:0;
  font-weight:800;
  text-transform:uppercase; letter-spacing:-.025em;
  font-weight:800; line-height:.82; white-space:nowrap;
  /* 16.5% of the container. Past --maxw the viewport keeps growing but the
     container does not, so vw alone would size the name off the grid. */
  font-size:min(16.5vw, 277px);
  margin-left:-0.035em;              /* optical: big L's sidebearing */
  /* script.js scales this up so the name spans the full width */
  animation:rise .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(26px); } }

/* drafting dimension callout above the name:  |———  label  ———| */
.dim{
  display:flex; align-items:center; gap:12px;
  margin-bottom:16px;
  font-family:var(--mono); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.03em; color:var(--graphite);
}
.dim i{ flex:1; height:9px; border-bottom:1px solid var(--graphite); position:relative; }
.dim i::before{ content:""; position:absolute; bottom:-4px; width:1px; height:9px; background:var(--graphite); }
.dim i:first-child::before{ left:0; }
.dim i:last-child::before{ left:auto; right:0; }
.dim .sq{ width:9px; height:9px; background:var(--accent); flex:0 0 auto; }
.hero-sub{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 0 26px;
  font-family:var(--mono); font-size:11px; text-transform:uppercase;
}

/* ----------------------------------------------------------
   PROJECT INDEX
   ---------------------------------------------------------- */
.sec{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:30px 0 14px;
}
.sec h2{
  margin:0; font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.cap{
  font-family:var(--mono); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.02em; color:var(--graphite);
}

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.card{ display:block; }
.card--wide{ grid-column:1 / -1; }

.frame{
  position:relative; overflow:hidden;
  border:1px solid var(--line);
  background-color:var(--zinc);
  transition:border-color .18s var(--ease);
}
.card:hover .frame{ border-color:var(--ink); }
.r219{ aspect-ratio:21/9; }
.r169{ aspect-ratio:16/9; }
.r43 { aspect-ratio:4/3;  }
.r11 { aspect-ratio:1/1;  }
.r45 { aspect-ratio:4/5;  }
.ph{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:12px; text-align:center;
  font-family:var(--mono); font-size:10.5px;
  text-transform:uppercase; color:var(--graphite);
}

.cap-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin-top:9px;
}
.cap-row .title{
  font-size:12.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  padding:2px 5px; margin-left:-5px;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.card:hover .title,
a.card:focus-visible .title{ background:var(--accent); color:var(--on-accent); }
.idx{ font-family:var(--mono); font-size:11px; color:var(--graphite); transition:color .18s var(--ease); }
.card:hover .idx{ color:var(--accent); }
.meta{
  margin:3px 0 0;
  font-family:var(--mono); font-size:11px; line-height:1.7;
  text-transform:uppercase; color:var(--graphite);
}

/* scroll-reveal (class added by script.js; no-JS users see everything) */
.rv{ opacity:0; transform:translateY(12px);
     transition:opacity .6s var(--ease), transform .6s var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* ----------------------------------------------------------
   PROJECT DETAIL - SE-store split: specs left, product right
   ---------------------------------------------------------- */
.p-head{ padding-top:44px; }
.p-split{
  display:grid; grid-template-columns:minmax(320px,5fr) 6fr;
  gap:calc(var(--gap)*2); align-items:start;
  padding-top:44px; margin-bottom:var(--gap);
}
.p-split .cutsheet{ max-width:640px; }
.p-split .p-body{ max-width:none; margin-bottom:0; }
.p-hero{ margin:0; }
/* The hero always fills its column at a true 4:5, so its edges line up with
   the full-width figures further down the page. No height cap: the content
   container is capped at --maxw, which keeps the tallest case near 1120px.
   A hero that runs a little past the fold is fine and invites the scroll. */
.p-title--logo{ margin:0 0 24px; }
.p-title--logo img{ display:block; width:min(430px,84%); height:auto; }
.p-title--wide img{ width:min(600px,100%); }   /* the 3082 lockup is ~12:1 */
.frame--seamless{ border-color:transparent; background:none; }
.p-title{
  margin:0;
  font-weight:800;
  text-transform:uppercase; letter-spacing:-.02em;
  line-height:.85; font-size:clamp(34px, 5.6vw, 84px);
}

.cutsheet{
  max-width:620px; margin:24px 0 26px;
  border-top:1px solid var(--ink);
}
.cutsheet > div{
  display:grid; grid-template-columns:160px 1fr; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.cutsheet .k{
  font-family:var(--mono); font-size:10.5px;
  text-transform:uppercase; color:var(--graphite); padding-top:2px;
}
.cutsheet .v{
  font-size:13px; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase;
}

.p-body{ max-width:620px; margin:0 0 30px; font-size:16px; line-height:1.65; }

.stack{ display:grid; gap:var(--gap); }
.stack .two{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
figure{ margin:0; }
figcaption{
  display:flex; justify-content:space-between; gap:12px;
  padding:6px 0 0;
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
}

/* ----------------------------------------------------------
   CAROUSEL — flip-through block (touch swipe + arrows + keys)
   ---------------------------------------------------------- */
.carousel{ position:relative; }
.c-track{
  display:flex; overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  border:1px solid var(--line);
}
.c-track::-webkit-scrollbar{ display:none; }
.c-slide{
  flex:0 0 100%; scroll-snap-align:start; position:relative;
  background-color:var(--zinc);
  aspect-ratio:16/9;
}
.c-bar{
  display:flex; align-items:center; gap:12px;
  padding:6px 0 0;
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
}
.c-cap{ flex:1; display:flex; justify-content:space-between; gap:12px; }
.c-count{ color:var(--graphite); }
.cbtn{
  width:34px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--ink); background:var(--paper); color:var(--ink);
  font-family:var(--mono); font-size:13px; cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
}
.cbtn:hover{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.cbtn[aria-disabled="true"]{ opacity:.3; pointer-events:none; }

/* Click the left/right half of the image to flip. The arrow is a real
   element that follows the pointer (a CSS `cursor:` image proved
   unreliable across browsers). Pointer devices only - never on touch. */
/* ----------------------------------------------------------
   CURSOR - one square, always. It never becomes a different shape.
   Four modifiers carry meaning, and they stack:
     fill   this responds to a click
     l / r  a hairline leads out the way the sequence will move
     rot    hairlines both sides: drag either way
     zoom   the square opens up to frame what will expand
     turn   45 degrees, used only for close
   The square is the site's own mark: same one in the dimension
   callout and the loader. Drawn with borders, nothing to load.
   ---------------------------------------------------------- */
.cur{
  position:fixed; top:0; left:0; z-index:1000; pointer-events:none;
  width:44px; height:44px; margin:-22px 0 0 -22px; display:none;
  opacity:0; transition:opacity .16s var(--ease);
  filter:drop-shadow(0 0 1.5px var(--paper)) drop-shadow(0 0 3px var(--paper));
}
@media (hover:hover) and (pointer:fine){ .cur{ display:block; } }
.cur.show{ opacity:1; }

/* the square */
.cur i{
  position:absolute; left:50%; top:50%;
  width:10px; height:10px; margin:-5px 0 0 -5px;
  border:1.5px solid var(--accent); background:transparent;
  transition:width .2s var(--ease), height .2s var(--ease), margin .2s var(--ease),
             background .2s var(--ease), transform .2s var(--ease);
}
.cur.fill i{ background:var(--accent); }
.cur.zoom i{ width:22px; height:22px; margin:-11px 0 0 -11px; }
.cur.turn i{ transform:rotate(45deg); }
.cur.down i{ transform:scale(.72); }
.cur.turn.down i{ transform:rotate(45deg) scale(.72); }

/* hairline leaders - drafting language, not a second shape */
.cur::before, .cur::after{
  content:""; position:absolute; top:50%; margin-top:-.75px;
  height:1.5px; width:0; background:var(--accent); opacity:0;
  transition:width .2s var(--ease), opacity .2s var(--ease);
}
.cur::before{ right:50%; margin-right:9px; }
.cur::after { left:50%;  margin-left:9px; }
.cur.l::before, .cur.rot::before,
.cur.r::after,  .cur.rot::after{ width:14px; opacity:1; }

/* Native cursors are hidden only once JS confirms the follower is alive,
   so a script failure leaves normal cursors rather than none at all.
   Text fields keep their caret. */
html.cur-on, html.cur-on *{ cursor:none !important; }
html.cur-on input, html.cur-on textarea{ cursor:text !important; }

/* ----------------------------------------------------------
   LIGHTBOX - click a figure to see it full size
   ---------------------------------------------------------- */
.lb{
  position:fixed; inset:0; z-index:900; display:none;
  background:color-mix(in srgb, var(--paper) 97%, transparent);
  padding:var(--pad);
}
.lb.open{ display:flex; flex-direction:column; }
.lb-img{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  padding:34px 0 10px;
}
.lb-img img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; animation:lbin .3s var(--ease) both;
}
@keyframes lbin{ from{ opacity:0; transform:scale(.985); } to{ opacity:1; transform:none; } }
.lb-bar{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.11em;
  color:var(--graphite); padding-bottom:4px;
}
.lb-bar b{ color:var(--ink); font-weight:600; }
.lb-nav{ display:flex; gap:4px; }
.lb-nav button{
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  border:1px solid var(--line); background:none; color:var(--ink);
  padding:5px 11px; min-width:40px;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.lb-nav button:hover{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
[data-zoom]{ cursor:zoom-in; }

/* ----------------------------------------------------------
   TURNTABLE - drag to rotate. Progressive: if the frames are not
   there, the static hero image simply stays put.
   ---------------------------------------------------------- */
.spin{ position:relative; touch-action:pan-y; }
.spin.on{ user-select:none; -webkit-user-select:none; }
.spin.on img{ pointer-events:none; }
/* the frame swaps constantly while dragging - give the compositor a hint
   and stop it re-laying-out the page around it */
.spin.on{ contain:paint; }
.spin.on img{ will-change:contents; }

.spin-hint{
  position:absolute; left:10px; bottom:10px;
  font-size:9.5px; font-weight:500; text-transform:uppercase; letter-spacing:.11em;
  color:var(--on-accent); background:var(--accent);
  padding:4px 7px; opacity:0; transition:opacity .3s var(--ease);
}
.spin.on .spin-hint{ opacity:1; }
.spin.used .spin-hint{ opacity:0; }

/* text anywhere in the carousel selects + copies cleanly */
.c-slide, .ph, .c-cap, figcaption{ user-select:text; -webkit-user-select:text; }
.cbtn, .c-count{ user-select:none; -webkit-user-select:none; }

/* prev / next */
.pn{
  display:flex; justify-content:space-between; gap:12px;
  margin-top:44px; padding-top:12px;
  border-top:1px solid var(--ink);
}
.pn a{
  font-size:12px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  padding:2px 5px;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.pn a:hover{ background:var(--accent); color:var(--on-accent); }
.pn a:first-child{ margin-left:-5px; }
.pn a:last-child{ margin-right:-5px; }

/* ----------------------------------------------------------
   RESUME
   ---------------------------------------------------------- */
.sheet{ max-width:900px; margin:0 auto; }
.rsec{ border:1px solid var(--line); margin-bottom:var(--gap); }
.rsec-h{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 12px;
  background-color:var(--zinc);
  border-bottom:1px solid var(--line);
  font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}
.row{
  display:grid; grid-template-columns:160px 1fr auto; gap:12px;
  padding:12px; border-bottom:1px solid var(--line);
}
.row:last-child{ border-bottom:0; }
.row .when, .row .where{
  font-family:var(--mono); font-size:11px;
  text-transform:uppercase; color:var(--graphite); padding-top:2px;
}
.row h3{ margin:0 0 2px; font-size:14px; text-transform:uppercase; letter-spacing:.03em; }
.row p{ margin:0; font-size:14px; }
.row ul{ margin:4px 0 0; padding-left:18px; font-size:14px; }
.row li{ margin:2px 0; }
.btn{
  display:inline-block; padding:11px 15px;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* ----------------------------------------------------------
   CONTACT
   ---------------------------------------------------------- */
.c-lede{ max-width:44ch; margin:20px 0 34px; font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; line-height:1.85; }
/* inquiry form */
.inquiry{ max-width:620px; margin:0 0 40px; }
.field{ display:grid; gap:6px; margin-bottom:14px; }
.field label{
  font-family:var(--mono); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--graphite);
  transition:color .18s var(--ease);
}
.field:focus-within label{ color:var(--accent); }
.field input, .field textarea{
  width:100%; padding:12px;
  border:1px solid var(--line); border-radius:0;
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:500; font-size:15px;
  transition:border-color .18s var(--ease);
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--accent);
}
.field textarea{ min-height:140px; resize:vertical; }

/* inline validation — replaces the browser popup */
.field .err{
  display:none;
  font-family:var(--mono); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.03em;
  color:var(--accent);
}
.field.bad input, .field.bad textarea{ border-color:var(--accent); }
.field.bad .err{ display:block; }

.c-rows{ border-top:1px solid var(--ink); }
.c-row{
  display:flex; justify-content:space-between; gap:12px;
  padding:13px 0; border-bottom:1px solid var(--line);
  transition:background .18s var(--ease);
}
.c-row .k{ font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--graphite); padding-top:2px; }
.c-row .v{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
a.c-row:hover{ background:var(--zinc); }

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
.footer{ padding:60px var(--pad) 14px; max-width:var(--maxw); margin-inline:auto; }
.f-line{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; flex-wrap:wrap; padding-top:10px;
}
.f-name{
  font-weight:800;
  text-transform:uppercase; letter-spacing:.02em; font-size:12.5px;
}
.f-links{ display:flex; gap:14px; flex-wrap:wrap; align-items:baseline; }
.f-links a, .f-links span{
  font-family:var(--mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.02em; color:var(--graphite);
}
.f-links a{ padding:2px 4px; transition:background .18s var(--ease), color .18s var(--ease); }
.f-links a:hover{ background:var(--accent); color:var(--on-accent); }

/* ----------------------------------------------------------
   LOADER — once per session; a drafting callout that lifts away
   ---------------------------------------------------------- */
.loader{
  display:none; position:fixed; inset:0; z-index:999;
  background:var(--paper);
  align-items:center; justify-content:center;
  padding:0 var(--pad);
}
html.js-load .loader{ display:flex; }     /* only exists when JS says so */
.loader.done{
  transform:translateY(-100%);
  transition:transform .55s cubic-bezier(.75,0,.2,1);
}
.loader-row{
  display:flex; align-items:center; gap:12px;
  width:min(420px, 82%);
  font-family:var(--mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink);
}
.loader-row i{ flex:1; height:9px; border-bottom:1px solid var(--graphite); position:relative; }
.loader-row i::before{ content:""; position:absolute; bottom:-4px; width:1px; height:9px; background:var(--graphite); }
.loader-row i:first-child::before{ left:0; }
.loader-row i:last-child::before{ right:0; }
.loader-row .sq{ width:9px; height:9px; background:var(--accent);
  animation:blink .8s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.15; } }

/* ----------------------------------------------------------
   RESPONSIVE + A11Y + PRINT
   ---------------------------------------------------------- */
@media (max-width:760px){
  :root{ --pad:14px; --gap:16px; }              /* tighter page rhythm */
  .grid{ grid-template-columns:1fr; }
  .stack .two{ grid-template-columns:1fr; }
  .row{ grid-template-columns:1fr; gap:3px; }
  .cutsheet > div{ grid-template-columns:110px 1fr; }
  .r219{ aspect-ratio:4/3; }                    /* every card the same shape on a phone */
  .hero{ min-height:72vh; min-height:72svh; }
  .hero-sub{ flex-direction:column; gap:3px; padding-bottom:22px; }
  .top{ gap:12px; padding-top:10px; }
  .nav{ gap:8px; }
  .nav a{ padding:8px 7px; }                    /* real thumb targets */
  .pn a{ padding:8px 5px; }
  .cbtn{ width:44px; height:38px; }
  .c-bar{ flex-wrap:wrap; row-gap:8px; }
  .c-cap{ flex:1 1 100%; order:-1; }            /* caption on its own line */
  .c-count{ margin-right:auto; }
  .p-head{ padding-top:32px; }
  .p-split{ grid-template-columns:1fr; gap:var(--gap); padding-top:32px; }
  .p-hero{ order:-1; }                          /* product first on phones */
  .footer{ padding-top:44px; }
}
@media (max-width:560px){
  .wordmark{ white-space:normal; line-height:.86; font-size:21vw; margin-left:-0.03em; }
  .wordmark span{ display:block; }   /* two lines, each fitted to width */
  .dim{ gap:8px; font-size:10px; }
  .brand{ font-size:12px; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  .rv{ opacity:1; transform:none; }
}
@media print{
  .top,.footer,.btn,.nav,.pn{ display:none !important; }
  body{ background:#fff; }
  .sheet{ max-width:100%; }
  .p-head{ padding-top:0; }
}