/* ============================================================================
   THE BEST ONE — shared page stylesheet
   Used by:  barber-*.html  (individual barber pages)
             tuotteet.html  (products)

   WHY THIS FILE EXISTS
   The homepage (TheBestOnedemo.html) is a single self-contained file, which is
   fine for one page. Six more pages sharing that same 400-line design system
   would mean six copies of it — and six places to edit when the palette moves.
   The tokens below are copied verbatim from TheBestOnedemo.html; if you change
   a colour there, change it here too (they are the only two places).

   Structure:
     1. Tokens + base
     2. Nav / drawer / buttons / footer  (shared chrome)
     3. Barber profile page
     4. Products page
     5. Responsive
   ========================================================================= */

/* ============================== 1. TOKENS ============================== */
:root{
  --color-bg:#F5F5F0; --color-surface:#FFFFFF;
  --color-accent:#81B195; --color-accent-deep:#366349; --color-accent-tint:#DEEDE4;
  --color-accent-ink:#13251A;
  --color-black:#121611; --color-text:#1B1F1A; --color-text-soft:#5A625B;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"General Sans",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --nav-h:74px;
  --maxw:1180px; --pad:clamp(1.25rem,5vw,4rem); --ease:cubic-bezier(0.22,1,0.36,1);
  --space-tight:clamp(3.5rem,7vw,5rem);
  --space-base:clamp(4.5rem,9vw,7rem);
  --space-loose:clamp(6rem,12vw,9.5rem);
}

html{ color-scheme:light; scroll-behavior:smooth; overflow-x:clip; }
*{ box-sizing:border-box; margin:0; padding:0; }
body{ overflow-x:clip; font-family:var(--font-body); background:var(--color-bg); color:var(--color-text); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,.display{ font-family:var(--font-display); line-height:0.98; letter-spacing:-0.02em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.mono{ font-family:var(--font-mono); font-size:0.72rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--color-accent-deep); }
section{ position:relative; }

.skip{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--color-black); color:#fff; padding:0.8rem 1.2rem; border-radius:0 0 6px 0; }
.skip:focus{ left:0; }
:focus-visible{ outline:3px solid var(--color-accent-deep); outline-offset:3px; border-radius:4px; }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Same reduced-motion contract as the homepage: kill delay as well as
   duration, or opacity:0 + delay leaves content invisible for exactly the
   people who asked for less movement. */
@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:0.01ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
}

/* Reveal states are gated behind html.js so a JS failure leaves a plain but
   complete page rather than a blank one. */
.js .reveal{ opacity:0; transform:translateY(24px); }
.js .reveal.in-view{ opacity:1; transform:translateY(0); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease); }

/* ============================== 2. CHROME ============================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:999;
  background:var(--color-accent-deep);
  transform:scaleX(0); transform-origin:0 50%; will-change:transform;
}

header.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(250,250,247,0.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  /* box-shadow, not border: a 1px border makes the header 75px while every
     sticky offset below is keyed to --nav-h (74px), leaving a 1px band of
     scrolling content showing through. */
  border-bottom:0; box-shadow:0 1px 0 rgba(27,31,26,0.06);
  transition:transform 0.35s var(--ease);
}
header.nav.hide-nav{ transform:translateY(-100%); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:1rem; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.logo{ font-family:var(--font-display); font-weight:800; font-size:1.1rem; letter-spacing:-0.03em; text-transform:uppercase; display:flex; align-items:center; gap:0.5rem; flex:none; }
.logo-mark{ width:clamp(34px,4.6vw,40px); height:clamp(34px,4.6vw,40px); border-radius:50%; flex:none; object-fit:cover; background:var(--color-black); }
.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-actions{ display:flex; align-items:center; gap:1.4rem; }
.nav-links a{ font-size:0.92rem; font-weight:500; position:relative; padding:0.3rem 0; }
.nav-links a::after{
  content:''; position:absolute; left:50%; bottom:-2px; width:0; height:2px;
  background:var(--color-accent-deep); transform:translateX(-50%); transition:width 0.3s var(--ease);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after{ width:100%; }
/* "You are here". The homepage nav never needed this because it was one page;
   with seven pages it does. */
.nav-links a[aria-current="page"]{ color:var(--color-accent-deep); font-weight:600; }
.nav-links a[aria-current="page"]::after{ width:100%; }

.btn{ display:inline-flex; align-items:center; gap:0.6em; font-weight:600; font-size:0.9rem; padding:0.7rem 1.3rem; border-radius:6px; border:2px solid transparent; cursor:pointer; transition:transform 0.25s var(--ease),box-shadow 0.25s var(--ease),background 0.25s var(--ease),color 0.25s var(--ease); }
.btn-primary{ background:var(--color-accent); color:var(--color-black); }
.btn-primary:hover{ transform:scale(1.04); background:var(--color-accent-deep); color:#fff; box-shadow:0 8px 20px rgba(18,22,17,0.18); }
.btn-ghost-light{ border-color:rgba(255,255,255,0.5); color:#fff; }
.btn-ghost-light:hover{ background:rgba(255,255,255,0.12); }
.btn-ghost-dark{ border-color:rgba(27,31,26,0.25); color:var(--color-text); }
.btn-ghost-dark:hover{ background:rgba(27,31,26,0.06); border-color:var(--color-accent-deep); }
.btn-lg{ padding:1.05rem 2.1rem; font-size:1rem; }

.lang-toggle{ display:flex; align-items:center; gap:0.35rem; font-family:var(--font-mono); font-size:0.78rem; font-weight:600; letter-spacing:0.04em; }
.lang-toggle .sep{ color:rgba(27,31,26,0.3); }
.lang-btn{ background:none; border:none; padding:0.2rem 0.15rem; cursor:pointer; color:var(--color-text-soft); transition:color 0.2s ease; }
.lang-btn:hover{ color:var(--color-accent-deep); }
.lang-btn.active{ color:var(--color-black); }

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:0.5rem; margin:-0.5rem;
  width:44px; height:44px; align-items:center; justify-content:center;
}
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--color-text); position:relative; transition:background 0.2s ease; }
.nav-toggle span::before,.nav-toggle span::after{ content:''; position:absolute; left:0; width:22px; height:2px; background:var(--color-text); transition:transform 0.3s var(--ease); }
.nav-toggle span::before{ top:-7px; } .nav-toggle span::after{ top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

.nav-drawer{
  position:fixed; inset:74px 0 auto 0; z-index:99;
  background:var(--color-bg); border-bottom:1px solid rgba(27,31,26,0.1);
  padding:1.5rem var(--pad) 2rem;
  display:flex; flex-direction:column; gap:0.25rem;
  transform:translateY(-12px); opacity:0; visibility:hidden;
  transition:transform 0.3s var(--ease), opacity 0.3s var(--ease), visibility 0.3s;
}
.nav-drawer.open{ transform:translateY(0); opacity:1; visibility:visible; }
.nav-drawer a{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; text-transform:uppercase; padding:0.6rem 0; border-bottom:1px solid rgba(27,31,26,0.07); }
.nav-drawer a:last-child{ border-bottom:none; }

.scissor{ width:18px; height:18px; color:var(--color-accent); flex:none; }
.scissor .blade{ transform-box:fill-box; transform-origin:center; }
.scissor .blade.a{ animation:snipA 1.8s ease-in-out infinite; }
.scissor .blade.b{ animation:snipB 1.8s ease-in-out infinite; }
@keyframes snipA{ 0%,100%{ transform:rotate(0deg);} 50%{ transform:rotate(-14deg);} }
@keyframes snipB{ 0%,100%{ transform:rotate(0deg);} 50%{ transform:rotate(14deg);} }

.section-head{ margin-bottom:2.5rem; max-width:640px; }
.section-head h2{ font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; text-transform:uppercase; margin-top:0.6rem; }
.section-head p.lead{ margin-top:1rem; color:var(--color-text-soft); font-weight:300; font-size:1.05rem; }

/* ---- footer (mirrors the homepage footer) ---- */
footer.big{ background:var(--color-black); color:var(--color-bg); padding:var(--space-tight) 0 2.5rem; position:relative; }
.footer-word{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-0.03em; font-size:clamp(3rem,11vw,9rem); line-height:0.85; color:transparent; -webkit-text-stroke:1.5px rgba(245,245,240,0.85); }
@supports not ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)){
  .footer-word{ color:rgba(245,245,240,0.85); }
}
.footer-grid{ margin-top:3rem; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem; padding-top:2.5rem; border-top:1px solid rgba(245,245,240,0.12); }
.footer-col h4{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-accent); margin-bottom:1rem; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:0.65rem; }
.footer-col a{ position:relative; padding-bottom:2px; color:rgba(245,245,240,0.82); }
.footer-col a::before, .footer-col a::after{ content:''; position:absolute; bottom:0; width:0; height:1px; background:var(--color-accent); transition:width 0.35s var(--ease); }
.footer-col a::before{ left:0; }
.footer-col a::after{ right:0; }
.footer-col a:hover::before, .footer-col a:hover::after{ width:50%; }
.footer-col address{ font-style:normal; color:rgba(245,245,240,0.7); max-width:32ch; font-weight:300; }
.footer-legal a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.footer-bottom{ margin-top:3rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:0.85rem; color:rgba(245,245,240,0.55); }

.to-top{ position:fixed; right:1.4rem; bottom:1.4rem; z-index:200; width:52px; height:52px; border-radius:50%; border:none; -webkit-appearance:none; appearance:none; padding:0; margin:0; cursor:pointer; background:var(--color-surface); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(18,22,17,0.18); opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top .arrow{ position:relative; width:18px; height:18px; color:var(--color-black); pointer-events:none; }

/* ========================= 3. BARBER PROFILE ========================= */

/* Breadcrumb — on a deep page you need a way back that is not the browser
   button, and it doubles as a "which team member is this" label. */
.crumbs{ padding:1.6rem 0 0; }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:0.55rem; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-text-soft); }
.crumbs a{ color:var(--color-accent-deep); }
.crumbs a:hover{ text-decoration:underline; }
.crumbs li[aria-current]{ color:var(--color-text); }

/* --- hero: portrait + identity, split ---
   Silver Arrow gives each stylist a card. A page of their own can do better:
   the portrait gets real size and the name gets the display face at poster
   scale, the same move the homepage headline already makes. */
.bio-hero{ padding:2.5rem 0 var(--space-base); }
.bio-hero-grid{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.bio-portrait{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:3/4; background:var(--color-accent-tint); }
.bio-portrait img{ width:100%; height:100%; object-fit:cover; }
/* the same comb-tooth reveal the homepage team cards use, so the two pages
   read as one site rather than two */
.js .bio-portrait img{
  clip-path:polygon(0% 0%,100% 0%,100% 2%,83.3% 6%,66.6% 2%,50% 6%,33.3% 2%,16.6% 6%,0% 2%);
  transition:clip-path 0.9s var(--ease);
}
.js .bio-portrait.in-view img{
  clip-path:polygon(0% 0%,100% 0%,100% 100%,83.3% 96%,66.6% 100%,50% 96%,33.3% 100%,16.6% 96%,0% 100%);
}
.bio-portrait-badge{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:0.5rem;
  background:rgba(18,22,17,0.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; padding:0.5rem 0.85rem; border-radius:999px;
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase;
}
.bio-portrait-badge .scissor{ color:var(--color-accent); width:14px; height:14px; }

.bio-id h1{ font-size:clamp(3rem,9vw,6.5rem); font-weight:800; text-transform:uppercase; margin-top:0.7rem; }
.bio-role{ display:block; margin-top:0.9rem; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-accent-deep); font-weight:500; }
.bio-lead{ margin-top:1.4rem; font-size:1.15rem; font-weight:300; color:var(--color-text); max-width:44ch; }
.bio-body{ margin-top:1rem; color:var(--color-text-soft); font-weight:300; max-width:52ch; }
/* Optional per-barber social handle. Only rendered for barbers who have one
   (see the `social` field in tools/barbers.mjs), so it never sits empty. */
.bio-social{ margin-top:1.3rem; }
.bio-social a{ font-family:var(--font-mono); font-size:0.72rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-accent-deep); text-decoration:none; border-bottom:1px solid rgba(27,31,26,0.18); padding-bottom:2px; transition:border-color 0.3s var(--ease), color 0.3s var(--ease); }
.bio-social a:hover{ color:var(--color-text); border-color:currentColor; }
.bio-actions{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }

/* --- fact strip --- */
.bio-facts{ background:var(--color-accent-tint); padding:var(--space-tight) 0; position:relative; }
.bio-facts::before{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(18,22,17,0.04) 35px, rgba(18,22,17,0.04) 70px); pointer-events:none; }
.bio-facts-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.bio-fact dt{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-accent-deep); }
.bio-fact dd{ margin-top:0.5rem; font-family:var(--font-display); font-weight:700; font-size:1.35rem; letter-spacing:-0.01em; line-height:1.15; }

/* --- specialties: numbered rows, not another card grid --- */
.bio-spec{ padding:var(--space-base) 0; background:var(--color-surface); }
.spec-list{ list-style:none; border-top:1px solid rgba(27,31,26,0.1); }
.spec-list li{
  display:grid; grid-template-columns:4.5rem 1fr; gap:1.5rem; align-items:baseline;
  padding:1.4rem 0; border-bottom:1px solid rgba(27,31,26,0.1);
  transition:padding-left 0.35s var(--ease), background 0.35s var(--ease);
}
.spec-list li:hover{ padding-left:0.9rem; background:linear-gradient(90deg, rgba(222,237,228,0.55), transparent 70%); }
.spec-num{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em; color:var(--color-accent-deep); }
.spec-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.2rem,2.6vw,1.7rem); text-transform:uppercase; letter-spacing:-0.02em; }
.spec-note{ display:block; margin-top:0.35rem; font-family:var(--font-body); font-weight:300; font-size:0.95rem; text-transform:none; letter-spacing:0; color:var(--color-text-soft); }

/* --- the barber's own work --- */
.bio-work{ padding:var(--space-base) 0; background:var(--color-bg); }
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.work-card{ position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden; transition:box-shadow 0.4s var(--ease); }
.work-card img{ width:100%; height:100%; object-fit:cover; transition:transform 0.5s var(--ease), filter 0.5s var(--ease); }
.work-card:hover img{ transform:scale(1.1); filter:saturate(1.15); }
.work-card:hover{ box-shadow:0 16px 30px rgba(18,22,17,0.22); }
.work-card .cap{ position:absolute; left:0; right:0; bottom:0; padding:1rem; background:linear-gradient(0deg, rgba(18,22,17,0.85), transparent); color:#fff; transform:translateY(100%); transition:transform 0.35s var(--ease); font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; }
.work-card:hover .cap, .work-card:focus-within .cap{ transform:translateY(0); }
/* Marks a strip photo that is the poster frame of a clip. The clip itself
   plays in the gallery lightbox, which is where the link below goes. */
.work-play{
  position:absolute; top:0.7rem; right:0.7rem; z-index:2;
  display:grid; place-items:center; width:1.85rem; height:1.85rem; border-radius:999px;
  background:rgba(18,22,17,0.62); color:#fff;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.work-play svg{ width:0.85rem; height:0.85rem; margin-left:1px; }
.work-note{ margin-top:1.6rem; font-size:0.88rem; font-weight:300; color:var(--color-text-soft); }

/* --- pull quote --- */
.bio-quote{ padding:var(--space-loose) 0; background:var(--color-black); color:var(--color-bg); text-align:center; overflow:hidden; }
.bio-quote::before{ content:''; position:absolute; top:-30%; left:50%; width:600px; height:600px; transform:translateX(-50%); background:radial-gradient(circle, rgba(129,177,149,0.25) 0%, transparent 70%); filter:blur(30px); }
.bio-quote blockquote{ position:relative; z-index:1; font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,3.4vw,2.4rem); max-width:760px; margin-inline:auto; letter-spacing:-0.01em; }
.bio-quote cite{ position:relative; z-index:1; display:block; margin-top:1.5rem; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; font-style:normal; color:var(--color-accent); }

/* --- book with X --- */
.bio-book{ padding:var(--space-base) 0; background:var(--color-accent-ink); color:#fff; text-align:center; overflow:hidden; }
.bio-book-ghost{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(5rem,20vw,15rem); line-height:0.8; letter-spacing:-0.04em;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,0.10);
  white-space:nowrap; pointer-events:none; user-select:none;
}
@supports not ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)){
  .bio-book-ghost{ color:rgba(255,255,255,0.07); }
}
.bio-book-inner{ position:relative; z-index:1; }
.bio-book h2{ font-size:clamp(1.9rem,5vw,3rem); font-weight:800; text-transform:uppercase; margin-top:0.8rem; }
.bio-book p{ margin-top:1rem; color:rgba(255,255,255,0.72); max-width:44ch; margin-inline:auto; font-weight:300; }
.bio-book .btn{ margin-top:2rem; background:var(--color-accent); color:var(--color-black); }
.bio-book .btn:hover{ background:#fff; }

/* --- other barbers --- */
.bio-others{ padding:var(--space-base) 0; background:var(--color-surface); }
.others-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.other-card{ display:block; background:var(--color-bg); border:1px solid rgba(27,31,26,0.07); border-radius:10px; overflow:hidden; transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); }
.other-card:hover{ transform:translateY(-6px); box-shadow:0 16px 30px rgba(18,22,17,0.16); border-color:var(--color-accent-deep); }
.other-card .ph{ aspect-ratio:1/1; overflow:hidden; }
.other-card .ph img{ width:100%; height:100%; object-fit:cover; transition:transform 0.5s var(--ease); }
.other-card:hover .ph img{ transform:scale(1.06); }
.other-card .nm{ padding:0.9rem 1rem 1.1rem; }
.other-card .nm strong{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; text-transform:uppercase; display:block; }
.other-card .nm span{ font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-accent-deep); }

/* ============================ 4. PRODUCTS ============================ */
.prod-hero{ padding:var(--space-tight) 0; background:var(--color-bg); }
.prod-hero h1{ font-size:clamp(2.4rem,7vw,4.6rem); font-weight:800; text-transform:uppercase; margin-top:0.7rem; }
.prod-hero p.lead{ margin-top:1.2rem; max-width:52ch; font-size:1.1rem; font-weight:300; color:var(--color-text-soft); }

/* Sold-in-shop notice. The shop has no webstore, so a grid of priced products
   with no way to buy is a dead end unless the page says so out loud. */
.prod-notice{ margin-top:1.8rem; display:flex; align-items:flex-start; gap:0.9rem; padding:1.1rem 1.3rem; border:1px solid var(--color-accent); border-left-width:4px; border-radius:8px; background:rgba(222,237,228,0.45); max-width:62ch; }
.prod-notice .scissor{ margin-top:0.25rem; color:var(--color-accent-deep); }
.prod-notice p{ font-size:0.95rem; color:var(--color-text); }

/* [BUG] top was a hardcoded 74px. The nav auto-hides on scroll-down, and the
   bar stayed pinned 74px below the viewport top — so the grid scrolled through
   a 74px gap above it and the bar looked detached, floating mid-page.
   It now tracks the nav: html.nav-up is set by the same handler that hides it. */
.prod-filters{ position:sticky; top:var(--nav-h); transition:top 0.35s var(--ease); z-index:50; background:rgba(245,245,240,0.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-block:1px solid rgba(27,31,26,0.08); padding:0.9rem 0; }
html.nav-up .prod-filters{ top:0; }
.filter-row{ display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center; }
.filter-btn{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  padding:0.55rem 1rem; border-radius:999px; border:1px solid rgba(27,31,26,0.16);
  background:transparent; color:var(--color-text-soft); cursor:pointer;
  transition:background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.filter-btn:hover{ border-color:var(--color-accent-deep); color:var(--color-accent-deep); }
.filter-btn[aria-pressed="true"]{ background:var(--color-black); border-color:var(--color-black); color:#fff; }
.filter-count{ margin-left:auto; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-text-soft); }

.prod-section{ padding:var(--space-base) 0; background:var(--color-bg); }
.prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.prod-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--color-surface); border:1px solid rgba(27,31,26,0.08); border-radius:12px; overflow:hidden;
  transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.prod-card:hover,
.prod-card:focus-within{ transform:translateY(-8px); box-shadow:0 18px 34px rgba(18,22,17,0.14); border-color:var(--color-accent-deep); }
.prod-card[hidden]{ display:none; }

/* The art panel. There are no product photographs yet, so each card draws a
   vector silhouette instead of showing a broken <img>. Give a product an
   `img` field in PRODUCTS and it renders a photo instead — the card layout
   does not change either way. */
.prod-art{ position:relative; aspect-ratio:4/3; display:grid; place-items:center; background:var(--color-accent-tint); overflow:hidden; }
.prod-art::after{
  content:''; position:absolute; inset:0; opacity:0.35; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.prod-art svg{ width:42%; height:auto; color:var(--color-accent-ink); position:relative; z-index:1; transition:transform 0.5s var(--ease); }
.prod-card:hover .prod-art svg{ transform:translateY(-6px) rotate(-2deg); }
.prod-art img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }
.prod-tag{ position:absolute; top:0.8rem; left:0.8rem; z-index:2; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; background:rgba(18,22,17,0.6); color:#fff; padding:0.35rem 0.6rem; border-radius:999px; }

.prod-body{ padding:1.3rem 1.3rem 1.5rem; display:flex; flex-direction:column; gap:0.5rem; flex:1; }
.prod-cat{ font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-accent-deep); }
.prod-body h3{ font-weight:800; font-size:1.3rem; text-transform:uppercase; letter-spacing:-0.02em; }
.prod-blurb{ font-size:0.92rem; font-weight:300; color:var(--color-text-soft); flex:1; }
.prod-foot{ margin-top:0.6rem; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-top:0.9rem; border-top:1px solid rgba(27,31,26,0.08); }
.prod-price{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:-0.02em; }
.prod-size{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; color:var(--color-text-soft); }
/* A real <button> — but its ::after stretches over the whole card, so the
   click target is the card and the accessible control is still a button.
   z-index keeps it above the card's own content and below nothing else. */
.prod-more{
  align-self:flex-start; margin-top:0.9rem;
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--color-accent-deep); background:none; border:none; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:0.35rem;
}
.prod-more::after{ content:''; position:absolute; inset:0; z-index:1; }
.prod-card:hover .prod-more{ text-decoration:underline; }
.prod-more:focus-visible{ outline:3px solid var(--color-accent-deep); outline-offset:3px; }

.prod-empty{ padding:3rem 0; color:var(--color-text-soft); font-weight:300; }
.prod-empty[hidden]{ display:none; }

/* --- detail dialog --- */
dialog.prod-dialog{
  /* [BUG] The `*{margin:0}` reset at the top of this file also hits <dialog>,
     and a modal dialog is centred by the UA stylesheet's `margin:auto` — so
     the reset pinned the sheet to the top-left corner of the viewport. This
     line puts the centring back. */
  margin:auto;
  width:min(760px, calc(100vw - 2rem)); max-height:min(88vh, 900px);
  padding:0; border:none; border-radius:14px; background:var(--color-surface); color:var(--color-text);
  box-shadow:0 30px 80px rgba(18,22,17,0.35); overflow:hidden;
}
dialog.prod-dialog::backdrop{ background:rgba(18,22,17,0.6); backdrop-filter:blur(3px); }
.dlg-scroll{ overflow-y:auto; max-height:min(88vh, 900px); }
.dlg-art{ position:relative; aspect-ratio:16/7; display:grid; place-items:center; background:var(--color-accent-tint); }
.dlg-art svg{ width:120px; height:auto; color:var(--color-accent-ink); }
.dlg-close{
  position:absolute; top:0.8rem; right:0.8rem; z-index:3; width:40px; height:40px; border-radius:50%;
  border:none; cursor:pointer; background:rgba(18,22,17,0.6); color:#fff; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background 0.2s ease;
}
.dlg-close svg{ width:16px; height:16px; }
.dlg-close:hover{ background:var(--color-black); }
.dlg-body{ padding:1.8rem clamp(1.3rem,4vw,2.4rem) 2.2rem; }
.dlg-body h2{ font-size:clamp(1.6rem,4vw,2.2rem); font-weight:800; text-transform:uppercase; margin-top:0.5rem; }
.dlg-price{ margin-top:0.9rem; display:flex; align-items:baseline; gap:0.8rem; flex-wrap:wrap; }
.dlg-price strong{ font-family:var(--font-display); font-weight:800; font-size:1.6rem; }
.dlg-desc{ margin-top:1.2rem; font-weight:300; color:var(--color-text-soft); }
.dlg-specs{ margin-top:1.6rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 1.6rem; }
.dlg-specs div{ padding-top:0.8rem; border-top:1px solid rgba(27,31,26,0.1); }
.dlg-specs dt{ font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-accent-deep); }
.dlg-specs dd{ margin-top:0.35rem; font-size:0.95rem; font-weight:300; }
.dlg-use{ margin-top:1.6rem; padding-top:0.8rem; border-top:1px solid rgba(27,31,26,0.1); }
.dlg-use h3{ font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-accent-deep); font-weight:500; }
.dlg-use ol{ margin-top:0.7rem; padding-left:1.1rem; display:flex; flex-direction:column; gap:0.45rem; font-size:0.95rem; font-weight:300; color:var(--color-text-soft); }
.dlg-actions{ margin-top:1.8rem; display:flex; gap:0.8rem; flex-wrap:wrap; }

/* =========================== 5. RESPONSIVE =========================== */
@media (max-width:980px){
  .bio-hero-grid{ grid-template-columns:1fr; gap:2rem; }
  .bio-portrait{ max-width:420px; }
  .bio-facts-grid{ grid-template-columns:repeat(2,1fr); gap:1.8rem; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .others-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  /* [WAS] display:none, to stop the Book button crowding the burger. But
     that removed the only large block of brand colour above the fold on a
     phone, and hid the one action the page exists for. Kept and shrunk
     instead; the wordmark drops away below 560px to buy it the room. */
  .nav-actions .btn-primary{ padding:0.6rem 1.05rem; font-size:0.84rem; border-radius:999px; }
  .nav-actions{ gap:0.9rem; }
  .work-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  /* five chips + the count wrap to three rows here; a ~150px sticky bar
     covering the top third of a phone is worse than no sticky bar. */
  .prod-filters{ position:static; }
}
@media (max-width:620px){
  .prod-grid{ grid-template-columns:1fr; }
  .dlg-specs{ grid-template-columns:1fr; }
  .spec-list li{ grid-template-columns:3rem 1fr; gap:1rem; }
  .filter-count{ margin-left:0; width:100%; }
}
@media (max-width:560px){ .logo-text{ display:none; } }

@media (min-width:861px){ .nav-drawer{ display:none; } }