/* BUILT FILE — DO NOT EDIT. Generated by build.cjs from styles.css and the files it @imports (tokens/, components/). Edit those, then run `node build.cjs`. */

/* ===== tokens/fonts.css ===== */
/* Fonts — Literata (display, variable opsz/wght) + Fira Sans (body/UI), served
   from OUR files since 2026-09-12: no request leaves for Google on any page
   (privacy, and one less thing that can fail). The files in assets/fonts/ are
   the woff2 Google Fonts serves, greek + latin + latin-ext subsets, downloaded
   once; unicode-range lets the browser fetch only the subsets a page uses.
   The url() here is relative to THIS file; build.cjs rewrites it when it
   folds this file into site.css at the root.
   Defined ONLY here as CSS variables; every component reads them via var(). */
@font-face{font-family:'Fira Sans';font-style:italic;font-weight:400;font-display:swap;src:url("assets/fonts/firasans-italic-400-greek.woff2") format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Fira Sans';font-style:italic;font-weight:400;font-display:swap;src:url("assets/fonts/firasans-italic-400-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:italic;font-weight:400;font-display:swap;src:url("assets/fonts/firasans-italic-400-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/firasans-normal-300-greek.woff2") format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/firasans-normal-300-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/firasans-normal-300-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/firasans-normal-400-greek.woff2") format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/firasans-normal-400-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/firasans-normal-400-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/firasans-normal-500-greek.woff2") format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/firasans-normal-500-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/firasans-normal-500-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/firasans-normal-600-greek.woff2") format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/firasans-normal-600-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/firasans-normal-600-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Literata';font-style:italic;font-weight:200 700;font-display:swap;src:url("assets/fonts/literata-italic-200-700-greek.woff2") format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Literata';font-style:italic;font-weight:200 700;font-display:swap;src:url("assets/fonts/literata-italic-200-700-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Literata';font-style:italic;font-weight:200 700;font-display:swap;src:url("assets/fonts/literata-italic-200-700-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Literata';font-style:normal;font-weight:200 700;font-display:swap;src:url("assets/fonts/literata-normal-200-700-greek.woff2") format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Literata';font-style:normal;font-weight:200 700;font-display:swap;src:url("assets/fonts/literata-normal-200-700-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Literata';font-style:normal;font-weight:200 700;font-display:swap;src:url("assets/fonts/literata-normal-200-700-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  --font-display:"Literata",Georgia,"Times New Roman",serif;
  --font-body:"Fira Sans",system-ui,sans-serif;
  --font-ui:var(--font-body);
}


/* ===== tokens/colors.css ===== */
/* Palette sampled from the shop photography: near-black warm shadow, umber
   mid-tones, tungsten amber light, cream plaster highlight. Red only from the
   logo's necktie. */
:root{
  /* warm blacks — never pure #000 */
  --ink-950:#080605;
  --ink-900:#0d0a08;
  --ink-800:#14100d;
  --ink-700:#1d1713;
  --ink-600:#2b221b;

  /* umber mid-tones */
  --umber-600:#3a2c23;
  --umber-500:#56412f;
  --umber-400:#6a594d;

  /* tungsten amber — the light itself */
  --amber-500:#8b6a4c;
  --amber-400:#a67250;
  --amber-300:#c0906f;
  --amber-200:#e0b183;
  --amber-100:#f2c9a0;
  --glow-amber:#ffb25c;
  --glow-amber-soft:#ffc98a;

  /* cream plaster */
  --cream-300:#d2b491;
  --cream-200:#e5d0b3;
  --cream-100:#f2e6d7;
  --cream-050:#faf3ea;

  /* brass / gold — borrowed from the reference boards, for numerals,
     hairlines and the accented second line of a headline */
  --gold-400:#c9a063;
  --gold-300:#dcb887;
  --text-gold:var(--gold-400);

  /* signal — logo necktie, used at most once per screen */
  --red-500:#b3333e;
  --red-400:#c8434c;

  /* semantic surfaces */
  --bg-void:var(--ink-950);
  --bg-base:var(--ink-900);
  --surface-1:var(--ink-800);
  --surface-2:var(--ink-700);
  --surface-scrim:rgba(8,6,5,.62);
  --surface-glass:rgba(20,16,13,.55);

  /* semantic text */
  --text-primary:var(--cream-100);
  --text-secondary:var(--cream-300);
  --text-muted:#9c8674;
  --text-inverse:var(--ink-900);
  --text-accent:var(--amber-200);

  /* semantic lines */
  --line-hairline:rgba(242,230,215,.14);
  --line-strong:rgba(242,230,215,.28);
  --line-accent:rgba(255,178,92,.45);

  /* interaction */
  --accent:var(--glow-amber);
  --accent-ink:var(--ink-900);
  --accent-hover:var(--glow-amber-soft);
  --focus-ring:rgba(255,178,92,.55);

  /* protection gradients over full-bleed imagery */
  --scrim-bottom:linear-gradient(to top,rgba(8,6,5,.92) 0%,rgba(8,6,5,.72) 28%,rgba(8,6,5,0) 72%); /* @kind color */
  --scrim-top:linear-gradient(to bottom,rgba(8,6,5,.78) 0%,rgba(8,6,5,0) 60%); /* @kind color */
  --scrim-vignette:radial-gradient(120% 90% at 50% 45%,rgba(8,6,5,0) 30%,rgba(8,6,5,.55) 100%); /* @kind color */
  --seam-warm:linear-gradient(to bottom,rgba(8,6,5,0),rgba(43,34,27,.5),rgba(8,6,5,0)); /* @kind color */
}


/* ===== tokens/typography.css ===== */
:root{
  /* display — Josefin Sans, light weights, wide tracking, uppercase */
  --fs-display-1:clamp(3.25rem,10.5vw,9.5rem); /* @kind font */
  --fs-display-2:clamp(2.5rem,6.5vw,5.5rem); /* @kind font */
  --fs-display-3:clamp(2rem,4.2vw,3.5rem); /* @kind font */
  --fs-title:clamp(1.5rem,2.4vw,2.125rem); /* @kind font */
  --fs-lede:clamp(1.0625rem,1.35vw,1.375rem); /* @kind font */
  --fs-body:1rem; /* @kind font */
  --fs-body-sm:.9375rem; /* @kind font */
  --fs-caption:.8125rem; /* @kind font */
  --fs-eyebrow:.6875rem; /* @kind font */

  --fw-thin:100; /* @kind font */
  --fw-light:300; /* @kind font */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */

  --lh-display:.94; /* @kind font */
  --lh-title:1.14; /* @kind font */
  --lh-body:1.6; /* @kind font */
  --lh-lede:1.5; /* @kind font */

  --ls-display:.14em; /* @kind font */
  --ls-display-tight:.06em; /* @kind font */
  --ls-title:.08em; /* @kind font */
  --ls-eyebrow:.34em; /* @kind font */
  --ls-body:.01em; /* @kind font */
  --ls-button:.18em; /* @kind font */

  /* composed roles */
  --type-display-1:var(--fw-thin) var(--fs-display-1)/var(--lh-display) var(--font-display); /* @kind font */
  --type-display-2:var(--fw-thin) var(--fs-display-2)/var(--lh-display) var(--font-display); /* @kind font */
  --type-display-3:var(--fw-light) var(--fs-display-3)/var(--lh-title) var(--font-display); /* @kind font */
  --type-title:var(--fw-light) var(--fs-title)/var(--lh-title) var(--font-display); /* @kind font */
  --type-lede:var(--fw-light) var(--fs-lede)/var(--lh-lede) var(--font-body); /* @kind font */
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body); /* @kind font */
  --type-eyebrow:var(--fw-medium) var(--fs-eyebrow)/1 var(--font-body); /* @kind font */
}


/* ===== tokens/spacing.css ===== */
:root{
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;
  --sp-24:96px; --sp-32:128px; --sp-40:160px; --sp-48:192px;

  /* vertical rhythm between full-bleed sections */
  --section-y:clamp(72px,10vw,168px); /* @kind spacing */
  --section-y-tight:clamp(48px,6vw,96px); /* @kind spacing */

  /* horizontal page gutter — generous, the brand breathes */
  --gutter:clamp(20px,5vw,88px); /* @kind spacing */
  --measure:62ch; /* @kind spacing */
  --measure-narrow:44ch; /* @kind spacing */
  --content-max:1320px;
  --nav-h:76px;
}


/* ===== tokens/radii.css ===== */
/* The shop is orthogonal: square shelves, square counters, hairline frames.
   The only curve in the room is the round backlit mirror — so circles are for
   portraits and icon buttons, and everything else stays sharp. */
:root{
  --radius-none:0px;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-circle:50%;
  --radius-pill:999px;
  --border-hairline:1px; /* @kind spacing */
}


/* ===== tokens/elevation.css ===== */
/* Depth comes from light, not from drop shadows. Cards sit on the image with a
   scrim; anything that "lifts" glows warm instead of casting grey. */
:root{
  --glow-sm:0 0 24px rgba(255,178,92,.18);
  --glow-md:0 0 48px rgba(255,178,92,.24);
  --glow-lg:0 0 96px rgba(255,178,92,.28);
  --glow-mirror:0 0 40px rgba(255,201,138,.35),0 0 120px rgba(255,178,92,.18);
  --shadow-sink:0 24px 60px rgba(8,6,5,.55);
  --shadow-panel:0 1px 0 rgba(242,230,215,.06) inset,0 32px 80px rgba(8,6,5,.6);
  --blur-glass:saturate(120%) blur(14px); /* @kind other */
  --grain-opacity:.045; /* @kind other */
}


/* ===== tokens/motion.css ===== */
/* Slow, filmic, no bounce. Images drift (Ken Burns), copy fades up 16px,
   light levels rise on hover. */
:root{
  --ease-cine:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-inout:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --dur-fast:180ms; /* @kind other */
  --dur-base:320ms; /* @kind other */
  --dur-slow:640ms; /* @kind other */
  --dur-reveal:900ms; /* @kind other */
  --dur-drift:18s; /* @kind other */
  --reveal-shift:16px; /* @kind other */
  --hover-lift:-2px; /* @kind other */
  --press-scale:.985; /* @kind other */
}


/* ===== tokens/base.css ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-void);color:var(--text-primary);font:var(--type-body);letter-spacing:var(--ls-body);text-wrap:pretty;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:var(--fw-light)}
p{margin:0}
a{color:var(--text-accent);text-decoration:none;transition:color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
a:hover{color:var(--accent-hover)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
::selection{background:rgba(255,178,92,.28);color:var(--cream-050)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ===== components/components.css ===== */
/* Mankind component styles. Loaded via styles.css so consumers get states,
   transitions and pseudo-elements that inline styles can't express. */

/* ---------- Button ---------- */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);border:var(--border-hairline) solid transparent;border-radius:var(--radius-xs);font-family:var(--font-body);font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:var(--ls-button);cursor:pointer;background:none;text-decoration:none;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.mk-btn--lg{padding:19px 40px;font-size:.8125rem}
.mk-btn--md{padding:15px 30px;font-size:.75rem}
.mk-btn--sm{padding:10px 20px;font-size:.6875rem;letter-spacing:.14em}
.mk-btn--solid{background:var(--accent);color:var(--accent-ink);box-shadow:var(--glow-sm)}
.mk-btn--solid:hover{background:var(--accent-hover);box-shadow:var(--glow-md);transform:translateY(var(--hover-lift))}
.mk-btn--outline{border-color:var(--line-strong);color:var(--text-primary)}
.mk-btn--outline:hover{border-color:var(--line-accent);color:var(--amber-100);box-shadow:var(--glow-sm)}
.mk-btn--ghost{color:var(--text-secondary);padding-left:0;padding-right:0}
.mk-btn--ghost:hover{color:var(--amber-100)}
.mk-btn--ghost::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;opacity:.35;transform:scaleX(.4);transform-origin:left;transition:transform var(--dur-base) var(--ease-cine),opacity var(--dur-base) var(--ease-out)}
.mk-btn--ghost{position:relative}
.mk-btn--ghost:hover::after{transform:scaleX(1);opacity:.8}
.mk-btn:active{transform:scale(var(--press-scale))}
.mk-btn[disabled],.mk-btn[aria-disabled="true"]{opacity:.38;pointer-events:none;box-shadow:none}
.mk-btn--full{width:100%}

/* ---------- Eyebrow ---------- */
.mk-eyebrow{display:inline-flex;align-items:center;gap:var(--sp-3);font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.mk-eyebrow--accent{color:var(--gold-300)}
.mk-eyebrow__rule{display:block;width:36px;height:1px;background:currentColor;opacity:.5}

/* ---------- Badge ---------- */
.mk-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:var(--border-hairline) solid var(--line-hairline);border-radius:var(--radius-xs);font-family:var(--font-body);font-size:var(--fs-caption);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);background:rgba(20,16,13,.45)}
.mk-badge--accent{border-color:var(--line-accent);color:var(--amber-200)}
.mk-badge--solid{background:var(--accent);border-color:transparent;color:var(--accent-ink)}

/* ---------- Section heading ---------- */
.mk-head{display:flex;flex-direction:column;gap:var(--sp-5);max-width:var(--measure)}
.mk-head--center{align-items:center;text-align:center;margin-inline:auto}
.mk-head__num{display:flex;flex-direction:column;gap:10px;font-family:var(--font-display);font-weight:var(--fw-light);font-size:1.5rem;letter-spacing:.12em;color:var(--text-gold)}
.mk-head__num::after{content:"";width:28px;height:1px;background:var(--gold-400);opacity:.7}
.mk-head--center .mk-head__num{align-items:center}
.mk-head__title{font:var(--type-display-3);letter-spacing:var(--ls-title);text-transform:uppercase;color:var(--text-primary)}
.mk-head__title em{display:block;font-style:normal;color:var(--text-gold)}
.mk-head__lede{font:var(--type-lede);color:var(--text-secondary);max-width:var(--measure)}

/* ---------- Logo ---------- */
.mk-logo{display:block;height:auto;width:auto}

/* ---------- Full bleed frame ---------- */
.mk-bleed{position:relative;isolation:isolate;overflow:hidden;background:var(--bg-void)}
.mk-bleed__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.mk-bleed--drift .mk-bleed__media{animation:mk-drift var(--dur-drift) var(--ease-inout) infinite alternate;will-change:transform;backface-visibility:hidden}
@keyframes mk-drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-1.5%,0)}}
.mk-bleed__scrim{position:absolute;inset:0;z-index:1;pointer-events:none}
.mk-bleed__grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--grain-opacity);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url("components/%23n")'/></svg>");background-size:180px 180px;mix-blend-mode:overlay}
.mk-bleed__content{position:relative;z-index:3}

/* ---------- Mirror portrait ---------- */
.mk-mirror{position:relative;display:grid;place-items:center;border-radius:var(--radius-circle);overflow:hidden;background:var(--ink-800);box-shadow:var(--glow-mirror)}
.mk-mirror img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)}
.mk-mirror--ring::after{content:"";position:absolute;inset:0;border-radius:var(--radius-circle);border:var(--border-hairline) solid rgba(255,201,138,.35)}

/* ---------- Nav ---------- */
.mk-nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);transition:background var(--dur-slow) var(--ease-out),backdrop-filter var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out);border-bottom:var(--border-hairline) solid transparent}
.mk-nav--scrolled{background:var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-bottom-color:var(--line-hairline)}
.mk-nav__links{display:flex;align-items:center;gap:var(--sp-8);list-style:none;margin:0;padding:0}
.mk-nav__link{font-family:var(--font-body);font-size:var(--fs-caption);letter-spacing:.22em;text-transform:uppercase;color:var(--text-secondary);background:none;border:0;cursor:pointer;padding:6px 0;position:relative;transition:color var(--dur-base) var(--ease-out)}
.mk-nav__link:hover,.mk-nav__link[aria-current="true"]{color:var(--amber-100)}
.mk-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-cine)}
.mk-nav__link:hover::after,.mk-nav__link[aria-current="true"]::after{transform:scaleX(1)}
.mk-nav__burger{display:none}

/* ---------- Service row ---------- */
.mk-service{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:var(--sp-6);padding:var(--sp-6) 0;border-bottom:var(--border-hairline) solid var(--line-hairline);transition:border-color var(--dur-base) var(--ease-out)}
.mk-service:hover{border-bottom-color:var(--line-accent)}
.mk-service__name,.mk-service__price{transition:transform .4s cubic-bezier(.22,1,.36,1),color .35s ease,opacity .35s ease!important}
.mk-service:hover .mk-service__name{transform:translateX(10px)!important}
.mk-service:hover .mk-service__price{transform:translateX(-6px)!important}
.mk-service__meta,.mk-service__dur{transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .35s ease!important}
.mk-service:hover .mk-service__meta{transform:translateX(10px)!important;opacity:.85}
.mk-service__name{font-family:var(--font-display);font-weight:var(--fw-light);font-size:var(--fs-title);letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary);transition:color var(--dur-base) var(--ease-out)}
.mk-service:hover .mk-service__name{color:var(--amber-100)}
.mk-service__meta{grid-column:1;font-size:var(--fs-body-sm);color:var(--text-muted);margin-top:6px;max-width:var(--measure-narrow)}
.mk-service__price{font-family:var(--font-display);font-weight:var(--fw-light);font-size:var(--fs-title);letter-spacing:.04em;color:var(--text-gold);white-space:nowrap}
.mk-service__dur{grid-column:2;text-align:right;font-size:var(--fs-caption);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-top:6px}

/* ---------- Barber card ---------- */
.mk-barber{display:flex;flex-direction:column;gap:var(--sp-5);align-items:flex-start;text-align:left}
.mk-barber__frame{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--ink-800)}
.mk-barber__frame img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-reveal) var(--ease-cine),filter var(--dur-slow) var(--ease-out);filter:brightness(.86) saturate(.9)}
.mk-barber:hover .mk-barber__frame img{transform:scale(1.05);filter:brightness(1) saturate(1)}
.mk-barber__frame::after{content:"";position:absolute;inset:0;background:var(--scrim-bottom);opacity:.85}
.mk-barber__name{font-family:var(--font-display);font-weight:var(--fw-light);font-size:var(--fs-title);letter-spacing:.16em;text-transform:uppercase}
.mk-barber__role{font-size:var(--fs-caption);letter-spacing:.24em;text-transform:uppercase;color:var(--text-muted)}
.mk-barber__note{font-size:var(--fs-body-sm);color:var(--text-secondary);max-width:34ch}

/* ---------- Hours panel ---------- */
.mk-hours{display:flex;flex-direction:column;gap:0;border-top:var(--border-hairline) solid var(--line-hairline)}
.mk-hours__row{display:flex;justify-content:space-between;gap:var(--sp-6);padding:14px 0;border-bottom:var(--border-hairline) solid var(--line-hairline);font-size:var(--fs-body-sm)}
.mk-hours__day{letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.mk-hours__time{color:var(--text-primary);font-variant-numeric:tabular-nums}
.mk-hours__row--today .mk-hours__day{color:var(--amber-200)}
.mk-hours__row--today .mk-hours__time{color:var(--amber-200)}
.mk-hours__row--closed .mk-hours__time{color:var(--text-muted)}

/* ---------- Fields ---------- */
.mk-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.mk-field__label{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.mk-field__control{width:100%;padding:14px 0;background:none;border:0;border-bottom:var(--border-hairline) solid var(--line-hairline);color:var(--text-primary);font-family:var(--font-body);font-size:var(--fs-body);letter-spacing:.02em;transition:border-color var(--dur-base) var(--ease-out)}
.mk-field__control::placeholder{color:rgba(156,134,116,.7)}
.mk-field__control:focus{outline:none;border-bottom-color:var(--accent)}
.mk-field__control:disabled{opacity:.4}
select.mk-field__control{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.mk-field__control option{background:var(--ink-800);color:var(--text-primary)}
.mk-field__hint{font-size:var(--fs-caption);color:var(--text-muted)}
.mk-choice{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.mk-choice__opt{padding:11px 18px;border:var(--border-hairline) solid var(--line-hairline);border-radius:var(--radius-xs);background:none;color:var(--text-secondary);font-family:var(--font-body);font-size:var(--fs-caption);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:all var(--dur-base) var(--ease-out)}
.mk-choice__opt:hover{border-color:var(--line-strong);color:var(--text-primary)}
.mk-choice__opt[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-ink);background:var(--accent)}

/* ---------- Footer ---------- */
.mk-footer{position:relative;padding:var(--section-y) var(--gutter) var(--sp-10);display:flex;flex-direction:column;gap:var(--sp-16)}
.mk-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-12)}
.mk-footer__col{display:flex;flex-direction:column;gap:var(--sp-4);font-size:var(--fs-body-sm);color:var(--text-secondary)}
.mk-footer__title{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.mk-footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-4);padding-top:var(--sp-6);border-top:var(--border-hairline) solid var(--line-hairline);font-size:var(--fs-caption);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}

/* ---------- Reveal on scroll ---------- */
.mk-reveal{opacity:0;transform:translateY(var(--reveal-shift));transition:opacity var(--dur-reveal) var(--ease-cine),transform var(--dur-reveal) var(--ease-cine)}
.mk-reveal--in{opacity:1;transform:none}

/* ---------- HaircutLoop (Gallery) ---------- */
.mk-cut{position:relative;overflow:hidden;background:var(--ink-950);cursor:grab;outline:none;touch-action:none;user-select:none;--mk-cut-mini:250px /* @kind other */;--mk-cut-mini-w:190px /* @kind other */}
.mk-cut:active{cursor:grabbing}
.mk-cut__slide{position:absolute;inset:0;will-change:transform}
.mk-cut__bg{position:absolute;inset:0;overflow:hidden}
.mk-cut__bg img{width:100%;height:100%;object-fit:contain;object-position:center;will-change:transform}
.mk-cut__scrim{position:absolute;inset:0;background:var(--scrim-vignette);pointer-events:none}
.mk-cut__card{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(620px,82%);display:grid;grid-template-columns:1fr var(--mk-cut-mini-w);align-items:center;gap:var(--sp-8);padding:var(--sp-8);background:color-mix(in oklab,var(--ink-950) 80%,transparent);backdrop-filter:blur(16px);border:var(--border-hairline) solid var(--line-hairline);z-index:2;pointer-events:none;transition:opacity var(--dur-slow) var(--ease-out)}
.mk-cut__card.is-peek{opacity:0}
.mk-cut__info{position:relative;height:var(--mk-cut-mini);overflow:hidden;min-width:0}
.mk-cut__infoItem{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:var(--sp-3) 0;will-change:transform}
.mk-cut__row{display:flex;flex-direction:column;gap:var(--sp-2)}
.mk-cut__row span{font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:var(--fw-regular);letter-spacing:.22em;text-transform:uppercase;color:var(--text-secondary);text-wrap:pretty}
.mk-cut__row span:first-child{color:var(--accent)}
.mk-cut__row:first-child span:last-child{color:var(--text-primary)}
.mk-cut__preview{position:relative;pointer-events:auto;cursor:pointer;width:var(--mk-cut-mini-w);height:var(--mk-cut-mini);overflow:hidden;background:var(--ink-900);justify-self:end}
.mk-cut__previewItem{position:absolute;inset:0;overflow:hidden;will-change:transform}
.mk-cut__previewItem img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;scale:1.08;will-change:transform}
.mk-cut__count{position:absolute;right:var(--gutter,32px);bottom:var(--sp-8);display:flex;align-items:center;gap:var(--sp-3);font-family:var(--font-body);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-secondary);pointer-events:none;z-index:2}
.mk-cut__count i{width:26px;height:1px;background:var(--line-hairline)}
.mk-cut__nav{position:absolute;right:var(--gutter,32px);top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:var(--sp-3);z-index:3}
.mk-cut__nav button{width:38px;height:38px;display:grid;place-items:center;background:color-mix(in oklab,var(--ink-950) 55%,transparent);backdrop-filter:blur(10px);border:var(--border-hairline) solid var(--line-hairline);color:var(--text-secondary);cursor:pointer;transition:color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.mk-cut__nav button:hover{color:var(--accent);border-color:var(--line-accent)}
@media (max-width:760px){.mk-cut{--mk-cut-mini:170px /* @kind other */;--mk-cut-mini-w:130px /* @kind other */}.mk-cut__card{width:min(420px,88%);gap:var(--sp-5);padding:var(--sp-5)}}
.mk-cut__hold{position:absolute;inset:0;z-index:3;pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);font-family:var(--font-body);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--cream-100);text-shadow:0 1px 12px rgba(8,6,5,.9);opacity:.55;transition:opacity var(--dur-base) var(--ease-out)}
.mk-cut__hold i{width:34px;height:34px;border:1px solid currentColor;border-radius:50%;opacity:.7;transition:transform var(--dur-base) var(--ease-out)}
.mk-cut__hold:hover{opacity:1}
.mk-cut__hold:hover i{transform:scale(.86)}
.mk-cut__card.is-peek .mk-cut__hold{opacity:0}
/* ---------- CutSphere (Gallery) ---------- */
.mk-sphere{position:relative;display:grid;place-items:center;width:100%;overflow:hidden}
@media (max-width:760px){.mk-sphere__stage{scale:.58}}
.mk-sphere__stage{position:relative;cursor:grab;touch-action:none;user-select:none;transition:opacity var(--dur-base) var(--ease-out)}
.mk-sphere__logo{position:absolute;left:50%;top:50%;translate:-50% -50%;height:auto;pointer-events:none;filter:drop-shadow(0 0 26px rgba(8,6,5,.8))}
.mk-sphere__stage:active{cursor:grabbing}
.mk-sphere__dot{position:absolute;translate:-50% -50%;padding:0;border:1px solid rgba(242,230,215,.22);border-radius:50%;overflow:hidden;background:var(--ink-900);cursor:pointer;box-shadow:0 10px 30px rgba(8,6,5,.5);transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.mk-sphere__dot:hover{border-color:var(--line-accent);box-shadow:0 0 22px rgba(var(--beam-1,201,160,99),.45)}
.mk-sphere__dot img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.mk-sphere__modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:var(--sp-8);background:rgba(8,6,5,.78);backdrop-filter:blur(8px);animation:mk-sphere-fade .28s var(--ease-out)}
.mk-sphere__panel{position:relative;margin:0;width:min(460px,92vw);background:var(--ink-950);border:1px solid var(--line-hairline);animation:mk-sphere-pop .32s var(--ease-out)}
.mk-sphere__panel img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center;display:block}
.mk-sphere__panel figcaption{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-6)}
.mk-sphere__panel figcaption span{font-family:var(--font-body);font-size:var(--fs-eyebrow);letter-spacing:.22em;text-transform:uppercase;color:var(--text-secondary)}
.mk-sphere__panel figcaption span:first-child{color:var(--accent)}
.mk-sphere__panel figcaption strong{font-family:var(--font-body);font-weight:var(--fw-regular);font-size:var(--fs-eyebrow);letter-spacing:.22em;text-transform:uppercase;color:var(--text-primary)}
.mk-sphere__close{position:absolute;top:var(--sp-4);right:var(--sp-4);width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line-hairline);background:rgba(8,6,5,.6);backdrop-filter:blur(10px);color:var(--cream-100);cursor:pointer;transition:color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.mk-sphere__close:hover{color:var(--accent);border-color:var(--line-accent)}
@keyframes mk-sphere-fade{from{opacity:0}to{opacity:1}}
@keyframes mk-sphere-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}