/* ===========================================================
   LUCKY FOX 99 — styles  (Brand orange theme)
   =========================================================== */
:root{
  --orange:      #ef6f1c;   /* brand background — refined warm orange */
  --orange-deep: #a4480f;   /* accent text on light cards (readable, premium) */
  --orange-dark: #d15f12;   /* deeper — gradients, footer */
  --orange-soft: #ff9a4d;   /* light highlight for radial glow */
  --cream:       #fff7ee;   /* card / panel */
  --card:        #ffffff;
  --ink:         #2a1a0e;   /* dark text on light — ≈13:1 on cream */
  --ink-soft:    #5f4632;
  --on-orange:   #ffffff;   /* primary text on orange */
  --on-orange-2: #fff2e8;   /* secondary text on orange (near-white for legibility) */
  --gold:        #ffe0a3;   /* warm gold accent (eyebrows, lines) */
  --gold-deep:   #d99a2b;
  --line-light:  rgba(51,31,16,.12);   /* borders on light cards */
  --line-orange: rgba(255,255,255,.35);/* borders on orange */
  --shadow:      0 12px 32px rgba(120,55,10,.14);
  --shadow-soft: 0 6px 18px rgba(120,55,10,.10);
  --radius:      20px;
  --serif:       'Cormorant Garamond','Times New Roman',Georgia,serif;
  --sans:        'Poppins','Segoe UI',system-ui,sans-serif;
  --maxw:        1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--sans); color:var(--on-orange);
  background:
    radial-gradient(1200px 680px at 50% -14%, rgba(255,170,90,.55), transparent 60%),
    radial-gradient(1000px 640px at 112% 116%, var(--orange-dark), transparent 62%),
    linear-gradient(180deg, #f2761e 0%, #e9681a 100%);
  background-attachment:fixed;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.1; margin:0; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,3vw,32px); }
button,a{ -webkit-tap-highlight-color:transparent; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* soft white sparkles */
.stars{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 26%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 72% 62%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.6px 1.6px at 46% 82%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.3px 1.3px at 86% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.3px 1.3px at 8% 68%, rgba(255,255,255,.4), transparent);
  opacity:.5; }
main,header,footer{ position:relative; z-index:1; }

/* ---------- Section framing ---------- */
section{ padding:clamp(38px,4.2vw,60px) 0; }
.tag{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--serif);
  font-size:clamp(1.85rem,3.6vw,2.9rem); letter-spacing:.01em; text-transform:none; color:var(--on-orange);
  font-weight:600; line-height:1.18; margin-bottom:18px; text-shadow:0 2px 14px rgba(120,50,0,.25); }
.tag::before{ content:""; width:30px; height:3px; background:var(--gold); border-radius:2px; flex:0 0 auto; }
.s-title{ font-family:var(--sans); font-size:.925rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-orange-2); font-weight:600; line-height:1.45; margin:0 0 8px; }
.s-lead{ color:var(--on-orange-2); max-width:720px; margin:16px 0 0; font-size:1.02rem; line-height:1.7; }
.center{ text-align:center; }
.center .s-lead{ margin-left:auto; margin-right:auto; }
.center .tag::before{ display:none; }

/* ===========================================================
   HEADER
   =========================================================== */
/* No bar of its own — whatever the page is painted with shows straight
   through, so the header reads as part of the hero rather than a strip laid
   over it. It only takes a surface once it condenses into the floating pill. */
header{ position:sticky; top:0; z-index:50;
  background:transparent; border-bottom:0; box-shadow:none;
  transition:background .28s, box-shadow .28s, padding .28s; }
/* The bar drops the 1180px content column it inherits from .wrap and spans
   the window, with the same inset the condensed state uses — so the mark and
   the call to action hold the two edges and do not shift on scroll. */
.bar{ display:flex; align-items:center; gap:20px; height:68px;
  max-width:none; margin:0;
  padding-left:clamp(12px,2vw,26px); padding-right:clamp(12px,2vw,26px); }
.brand{ display:flex; align-items:center; gap:14px; margin-right:auto; }
.brand img{ height:44px; width:auto;
  filter:
    drop-shadow(0 0 7px rgba(255,255,255,.95))
    drop-shadow(0 0 16px rgba(255,255,255,.6))
    drop-shadow(0 4px 14px rgba(255,255,255,.3));
  transition:height .28s,filter .28s; }
.brand b{ font-family:var(--serif); font-size:21px; line-height:1; letter-spacing:.02em;
  color:#fff; font-weight:600; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
header .bar, header .brand b{ transition:height .28s,font-size .28s; }

/* The call to action sits on the far right, past the language switch. */
.nav-cta-btn{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 18px;
  border-radius:999px; background:#fff9f2; color:#c95f14;
  font-family:var(--sans); font-size:14.5px; font-weight:700; white-space:nowrap;
  transition:background .25s, color .25s, transform .2s, box-shadow .25s; }
.nav-cta-btn::before{ content:"✦"; font-size:9px; }
.nav-cta-btn:hover{ background:#fff; transform:translateY(-1px); box-shadow:0 6px 18px rgba(88,34,3,.2); }

/* Once you start reading, the bar lifts off the page and becomes a floating
   pill carrying just the mark, the language switch and the call to action —
   the section links come back as soon as you return to the top. */
header.scrolled{ background:transparent; border-bottom-color:transparent;
  box-shadow:none; backdrop-filter:none; padding:10px clamp(12px,2vw,26px); }
/* Condensed it keeps no surface either: the mark and the button simply float
   over whatever section you have scrolled to. Both carry their own colour, so
   they stay legible against the orange bands and the cream ones alike. */
/* Condensed the bar drops the content column and spans the window, so the
   mark and the button sit against the two edges rather than floating in from
   them. */
header.scrolled .bar{ height:58px; max-width:none; margin:0;
  padding-left:0; padding-right:0;
  background:transparent; border:0; box-shadow:none; backdrop-filter:none; }
/* Condensed, the pill keeps only the mark and the call to action — the links,
   the wordmark and the language switch all fold away and come back at the top. */
header.scrolled nav.links,
header.scrolled .brand b,
header.scrolled .lang{ opacity:0; visibility:hidden; width:0; margin:0; padding:0;
  border-width:0; flex-basis:0; overflow:hidden; }
header.scrolled .brand img{ height:40px;
  filter:
    drop-shadow(0 0 7px rgba(255,255,255,.95))
    drop-shadow(0 0 18px rgba(255,255,255,.65))
    drop-shadow(0 3px 12px rgba(88,34,3,.22)); }
/* The bar carries no surface, so body text scrolls straight under the mark
   and the button. Blurring the backdrop — rather than painting over it —
   lifts the two off whatever is behind them while the section's own colour
   still shows through, which is the point of the transparent header. The
   soft bottom edge keeps it from reading as a bar again. */
header.scrolled::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  backdrop-filter:blur(11px) saturate(1.04);
  -webkit-backdrop-filter:blur(11px) saturate(1.04);
  -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent);
  mask-image:linear-gradient(to bottom,#000 50%,transparent); }
header.scrolled .nav-cta-btn{ box-shadow:0 8px 22px rgba(88,34,3,.26); }
header.scrolled .nav-cta-btn{ background:var(--orange); color:#fff; }
header.scrolled .nav-cta-btn:hover{ background:var(--orange-deep); }
header.scrolled .menu-btn{ border-color:rgba(255,255,255,.6); color:#fff;
  background:rgba(120,55,10,.45); backdrop-filter:blur(8px); }
nav.links, .brand b, .lang{
  transition:opacity .28s, visibility .28s, width .28s, flex-basis .28s,
             margin .28s, padding .28s, border-width .28s, color .28s, font-size .28s; }

/* A wish page is cream behind the header, so the white chrome would vanish. */
.fox-page header:not(.scrolled) .brand b{ color:var(--ink); }
.fox-page header:not(.scrolled) .brand img{ filter:none; }
.fox-page header:not(.scrolled) nav.links a{ color:var(--ink-soft); }
.fox-page header:not(.scrolled) nav.links a:hover,
.fox-page header:not(.scrolled) nav.links a.active{ color:var(--orange-deep); }
.fox-page header:not(.scrolled) nav.links a::after{ background:var(--orange); }
.fox-page header:not(.scrolled) .lang{ border-color:rgba(120,55,10,.3); }
.fox-page header:not(.scrolled) .lang button{ color:var(--ink-soft); }
.fox-page header:not(.scrolled) .lang button + button{ border-left-color:rgba(120,55,10,.18); }
.fox-page header:not(.scrolled) .lang button.active{ background:var(--orange); color:#fff; }
.fox-page header:not(.scrolled) .nav-cta-btn{ background:var(--orange); color:#fff; }
nav.links{ display:flex; align-items:center; gap:26px; }
nav.links a{ position:relative; padding:9px 0; font-size:15px; line-height:1.2; letter-spacing:.1px;
  color:rgba(255,247,239,.88); font-weight:600; transition:color .25s, transform .25s; }
nav.links a::after{ content:""; position:absolute; left:50%; right:50%; bottom:3px; height:2px;
  border-radius:2px; background:#fff7ef; transition:left .25s ease,right .25s ease; }
nav.links a:hover{ color:#ffe2c4; }
nav.links a:hover::after{ left:0; right:0; }
nav.links a.active::after{ left:17%; right:17%; }
nav.links a.active{ color:#fff7ef; font-weight:600; }
nav.links a.nav-cta{ display:inline-flex; align-items:center; gap:7px; height:auto; padding:9px 0;
  color:#ffe2c4; border:0; border-radius:0; background:transparent; }
nav.links a.nav-cta::before{ content:"✦"; font-size:9px; color:#f4c79b; }
nav.links a.nav-cta::after{ display:none; }
nav.links a.nav-cta:hover, nav.links a.nav-cta.active{ color:#fff; background:transparent;
  transform:none; box-shadow:none; }

.lang{ display:inline-flex; flex:0 0 100px; width:100px; height:36px;
  border:1px solid rgba(255,255,255,.55); border-radius:999px; overflow:hidden; }
.lang button{ flex:1 1 50%; font-family:var(--sans); font-size:14px; font-weight:700; letter-spacing:0;
  padding:0; background:transparent; color:#fff7ef; border:0; cursor:pointer;
  transition:background .25s,color .25s; }
.lang button + button{ border-left:1px solid rgba(255,255,255,.28); }
.lang button:hover{ color:#ffe2c4; background:rgba(255,255,255,.1); }
.lang button.active{ background:#fff9f2; color:#c95f14; }

.menu-btn{ display:none; background:transparent; border:1px solid var(--line-orange);
  color:#fff; border-radius:10px; padding:8px 10px; cursor:pointer; font-size:1rem; }

/* ===========================================================
   BUTTONS
   =========================================================== */
.btn{ min-height:44px; font-family:var(--sans); font-weight:600; font-size:.92rem; border-radius:999px;
  padding:13px 26px; cursor:pointer; border:1px solid transparent; transition:transform .2s, box-shadow .2s, background .2s, color .2s; }
.btn-light{ background:#fff; color:var(--orange-deep); box-shadow:0 10px 28px rgba(120,50,0,.28); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(120,50,0,.4); }
.btn-primary{ background:var(--orange); color:#fff; box-shadow:0 10px 28px rgba(232,111,30,.4); }
.btn-primary:hover{ transform:translateY(-2px); background:var(--orange-deep); }
.btn-ghost{ background:transparent; border-color:var(--line-orange); color:#fff; }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.12); }
.btn-outline{ background:transparent; border-color:var(--orange); color:var(--orange-deep); }
.btn-outline:hover{ background:rgba(245,127,40,.1); }

/* ===========================================================
   HERO
   =========================================================== */
.hero{ position:relative; padding:36px 0 22px; overflow:hidden; }
.hero-center{ min-height:calc(100vh - 74px); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; }
.hero-glow{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(720px 460px at 50% 34%, rgba(255,255,255,.32), transparent 62%); }
.hero-stack{ position:relative; z-index:2; max-width:820px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; }

/* The hero paragraph carries the full brand statement. Centred, that runs to
   nine lines and pushes the buttons off the first screen, so it opens folded
   to three lines with a toggle beneath. app.js only unhides the toggle when the
   text is actually taller than the fold. */
#heroSub.is-folded{ display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3; line-clamp:3; overflow:hidden; }
/* Long section intros get the hero's treatment on a phone, where they run to
   fifteen lines before the reader reaches anything to look at. */
.s-lead.is-folded{ display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:5; line-clamp:5; overflow:hidden; }
.lead-more{ display:inline-flex; align-items:center; min-height:40px;
  margin-top:4px; background:none; border:0; cursor:pointer; color:inherit;
  font-family:var(--sans); font-size:.84rem; font-weight:600; letter-spacing:.04em;
  opacity:.88; border-bottom:1px solid currentColor; padding:0 2px;
  transition:opacity .2s; }
.lead-more:hover{ opacity:1; }
/* display:inline-flex outranks the UA's [hidden]{display:none}, which left an
   empty underlined button showing wherever the fold was not needed. */
.lead-more[hidden]{ display:none; }
.hero-more{ margin-top:10px; background:none; border:0; cursor:pointer;
  color:#fff; font:inherit; font-size:.84rem; font-weight:600; letter-spacing:.04em;
  opacity:.9; padding:10px 4px; border-bottom:1px solid rgba(255,255,255,.5);
  transition:opacity .2s, border-color .2s; }
.hero-more:hover{ opacity:1; border-bottom-color:#fff; }
.hero-more:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.hero-logo{ width:min(190px,44vw); margin-bottom:16px;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.92))
    drop-shadow(0 0 22px rgba(255,255,255,.72))
    drop-shadow(0 12px 32px rgba(255,255,255,.45));
  animation:float 7s ease-in-out infinite, logoWhiteGlow 5.5s ease-in-out infinite;
  will-change:transform,filter; }
@keyframes float{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-12px)} }
@keyframes logoWhiteGlow{
  0%,100%{
    filter:
      drop-shadow(0 0 10px rgba(255,255,255,.92))
      drop-shadow(0 0 22px rgba(255,255,255,.72))
      drop-shadow(0 12px 32px rgba(255,255,255,.45));
  }
  50%{
    filter:
      drop-shadow(0 0 14px rgba(255,255,255,1))
      drop-shadow(0 0 30px rgba(255,255,255,.86))
      drop-shadow(0 14px 40px rgba(255,255,255,.58));
  }
}
.hero .kicker{ font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.hero h1{ font-size:clamp(2.6rem,6.4vw,5rem); color:#fff; margin:16px 0 18px; line-height:1.05;
  text-shadow:0 3px 24px rgba(120,50,0,.3); }
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero p{ color:var(--on-orange-2); font-size:1.1rem; max-width:560px; margin:0 auto; }
.hero-cta{ display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; justify-content:center; }

/* ===========================================================
   ABOUT / MAKERS
   =========================================================== */
#about{ background:var(--cream); }
#about .tag{ color:var(--ink); text-shadow:none; }
#about .tag::before{ background:var(--orange); }
#about .s-title{ color:var(--orange-deep); }
#about .s-lead{ color:var(--ink-soft); }
.makers{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; }
.maker-card{ position:relative; border-radius:26px; overflow:hidden; min-height:480px;
  display:flex; box-shadow:var(--shadow); cursor:pointer; isolation:isolate; }
.maker-card .mc-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform .6s ease; }
.maker-card:hover .mc-bg{ transform:scale(1.05); }
.maker-card::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,8,0,.15) 0%, rgba(20,8,0,.15) 40%, rgba(20,8,0,.82) 100%); }
.mc-edge{ position:absolute; left:16px; top:50%; transform:translateY(-50%) rotate(180deg); z-index:2;
  writing-mode:vertical-rl; font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.75); font-weight:600; }
.mc-inner{ position:relative; z-index:3; margin-top:auto; width:100%; padding:34px 30px 32px;
  padding-left:44px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.mc-inner h3{ font-size:2.1rem; color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.5); }
.mc-role{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.88);
  font-weight:600; margin:10px 0 18px; }
.mc-btn{ padding:11px 26px; }

/* ===========================================================
   9 FOXES  (image-overlay cards work on any bg)
   =========================================================== */
.fox-carousel{ position:relative; margin-top:38px; }
/* The nine cards sit on one large circle. Each card's transform-origin is the
   ring centre, far below the stage, so rotating it swings it along the arc and
   tilts it tangentially — centre card upright, neighbours fanning away. The
   inner wrapper carries the scale so it stays about the card's own middle. */
.fox-ed-grid{ --gap:332px; --tilt:13deg; --drop:30px; --w:clamp(214px,20vw,272px);
  position:relative; height:clamp(400px,41vw,486px); overflow:hidden;
  touch-action:pan-y; cursor:grab; user-select:none; }
.fox-ed-grid.dragging{ cursor:grabbing; }
.fox-ed-grid.dragging .fox-ed{ transition:none; }
/* Prev · dots · Next, centred under the wheel */
.fox-controls{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px; }
.fox-nav{ border:0; cursor:pointer; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 20px;
  font-family:var(--mono,ui-monospace,'SF Mono',Menlo,monospace);
  font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(4px);
  transition:background .2s, transform .2s, color .2s; }
.fox-nav:hover{ background:#fff; color:var(--orange-deep); transform:translateY(-1px); }
.fox-nav-next{ background:#fff; color:var(--ink); }
.fox-nav-next:hover{ background:var(--cream); }
.fox-dots{ display:flex; align-items:center; gap:1px; }
/* The dot stays 7px; the button around it is finger-sized. */
.fox-dots button{ width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; }
.fox-dots button::before{ content:""; width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.42); transition:background .25s, transform .25s; }
.fox-dots button[aria-selected="true"]::before{ background:#fff; transform:scale(1.5); }
.fox-ed{ position:absolute; left:calc(50% - var(--w)/2); top:16px; width:var(--w);
  transform-origin:50% 50%;
  transform:translate(var(--x,0px), var(--y,0px)) rotate(var(--a,0deg));
  opacity:var(--o,1); z-index:var(--z,1); cursor:pointer;
  transition:transform .55s cubic-bezier(.22,.68,.3,1), opacity .4s ease; }

/* A polaroid: cream card, inset photo, name printed on the chin. Everything
   else about the fox lives in the modal you get by clicking it. */
.fox-ed .fe-in{ display:block; text-decoration:none; color:inherit;
   display:block; background:#faf7f0; border-radius:17px;
  padding:10px 10px 0; box-shadow:0 14px 34px rgba(70,30,5,.26);
  transform:scale(var(--s,1)); transform-origin:50% 0;   /* grow downward, never past the top edge */
  transition:transform .55s cubic-bezier(.22,.68,.3,1), box-shadow .3s; }
.fox-ed.is-center .fe-in{ box-shadow:0 26px 56px rgba(70,30,5,.4); }
.fox-ed.is-center:hover .fe-in{ box-shadow:0 30px 64px rgba(70,30,5,.46); }
.fox-ed:focus-visible{ outline:none; }
.fox-ed:focus-visible .fe-in{ box-shadow:0 0 0 4px var(--accent,#e0a92b), 0 26px 56px rgba(70,30,5,.4); }
.fox-ed .fe-media{ position:relative; aspect-ratio:3/4; overflow:hidden;
  border-radius:10px; background:var(--cream); }
.fox-ed .fe-media img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.fox-ed .fe-top{ display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:9px 5px 0;
  font-family:var(--mono,ui-monospace,'SF Mono',Menlo,monospace);
  font-size:.56rem; font-weight:700; }
.fox-ed .fe-cat{ display:inline-flex; align-items:center; gap:6px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.fox-ed .fe-sq{ width:8px; height:8px; border-radius:2px; background:var(--accent,#e0a92b); }
.fox-ed .fe-no{ letter-spacing:.16em; color:var(--accent,#e0a92b); white-space:nowrap; }
.fox-ed .fe-name{ padding:4px 6px 14px; text-align:center; color:var(--ink);
  font-family:var(--mono,ui-monospace,'SF Mono',Menlo,monospace);
  font-size:.63rem; letter-spacing:.17em; text-transform:uppercase; font-weight:600;
  line-height:1.35; }
@media (prefers-reduced-motion:reduce){
  .fox-ed, .fox-ed .fe-in{ transition:none; }
}

/* ===========================================================
   WORKS / GALLERY
   =========================================================== */
#works{ background:transparent; }
.works-switch{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:26px; }
.works-maker{ min-height:132px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px;
  padding:24px 26px; text-align:left; color:var(--ink); background:rgba(255,255,255,.68);
  border:1px solid var(--line-light); border-radius:22px; cursor:pointer; transition:.22s; }
.works-maker:hover{ background:#fff; border-color:rgba(245,127,40,.5); transform:translateY(-2px); }
.works-maker.active{ color:#fff; background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  border-color:transparent; box-shadow:0 14px 34px rgba(160,70,10,.22); }
.wm-index{ font-family:var(--serif); font-size:1rem; opacity:.65; align-self:start; }
.works-maker b{ display:block; font-family:var(--serif); font-size:clamp(1.25rem,2.1vw,1.7rem); line-height:1.15; }
.works-maker small{ display:block; margin-top:8px; color:var(--ink-soft); font-size:.74rem; line-height:1.5; }
.works-maker.active small{ color:rgba(255,255,255,.82); }
.works-maker i{ font-style:normal; font-size:1.4rem; transition:transform .2s; }
.works-maker:hover i{ transform:translateX(4px); }
.works-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin:24px 0 16px; padding-bottom:14px; border-bottom:1px solid var(--line-light); }
.works-current{ display:flex; align-items:center; gap:10px; color:var(--ink); }
.works-current span{ width:10px; height:10px; border-radius:50%; background:var(--orange); }
.works-current b{ font-family:var(--serif); font-size:1.12rem; }
.filters{ display:flex; gap:8px; justify-content:flex-end; margin:0; flex-wrap:wrap; }
.filters button{ font-family:var(--sans); font-size:.82rem; font-weight:600; padding:9px 18px;
  border-radius:999px; border:1px solid var(--line-light); background:#fff; color:var(--ink-soft); cursor:pointer; transition:.2s; }
.filters button:hover{ border-color:var(--orange); color:var(--orange-deep); }
.filters button.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.masonry{ columns:4; column-gap:16px; }
.masonry .cell{ break-inside:avoid; margin-bottom:16px; border-radius:14px; overflow:hidden;
  position:relative; border:1px solid rgba(51,31,16,.08); cursor:pointer; background:var(--card);
  box-shadow:0 8px 24px rgba(70,30,5,.1); transition:transform .25s, box-shadow .25s; }
.masonry .cell:hover{ transform:translateY(-4px); box-shadow:0 16px 38px rgba(70,30,5,.18); }
.masonry .cell img{ width:100%; height:auto; }
.cell-meta{ position:absolute; left:9px; right:9px; bottom:9px; display:flex; justify-content:space-between;
  gap:10px; padding:9px 11px; color:var(--ink); background:rgba(255,255,255,.9);
  backdrop-filter:blur(9px); border-radius:9px; opacity:0; transform:translateY(6px); transition:.2s; }
.cell:hover .cell-meta{ opacity:1; transform:none; }
.cell-meta b{ font-size:.65rem; letter-spacing:.05em; }
.cell-meta i{ font-style:normal; font-family:var(--serif); font-size:.72rem; color:var(--ink-soft); }
.works-empty{ min-height:390px; margin-top:34px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:38px 24px; background:#fff; border:1px solid var(--line-light);
  border-radius:24px; }
.works-empty[hidden],#worksGallery[hidden]{ display:none; }
.we-mark{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--cream); color:var(--orange-deep); font-family:var(--serif); }
.works-empty h3{ margin-top:22px; color:var(--ink); font-size:clamp(1.8rem,3vw,2.5rem); }
.works-empty p{ max-width:560px; margin:14px auto 24px; color:var(--ink-soft); }

/* ===========================================================
   CREATE / CONFIGURATOR
   =========================================================== */
/* product picker — hims-style tiles */
#create{ background:transparent; }
.cat-card.sel{ border-color:var(--orange); box-shadow:0 0 0 2px var(--orange) inset, var(--shadow); }
.step{ margin-bottom:26px; }
.step h4{ font-family:var(--sans); font-size:.95rem; font-weight:600; color:var(--ink); margin:0 0 14px; }
.chip{ font-family:var(--sans); font-size:.85rem; font-weight:500; padding:10px 15px; border-radius:12px;
  border:1px solid var(--line-light); background:#fff; color:var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; transition:.18s; }
.chip:hover{ border-color:var(--orange); }
.chip.sel{ border-color:var(--orange); background:rgba(245,127,40,.12); color:var(--orange-deep);
  box-shadow:0 0 0 1px var(--orange) inset; }
.chip .emoji{ font-size:1.1rem; }
.price-card .btn{ width:100%; margin-top:auto; }

/* ===========================================================
   BOOKS
   =========================================================== */
.books{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,6vw,76px);
  max-width:900px; margin:28px auto 0; }
.store-books{ margin-top:clamp(40px,5.5vw,68px); padding-top:clamp(32px,4.4vw,50px);
  border-top:1px solid rgba(121,67,34,.16); }
.store-books-head{ max-width:760px; }
.books-subtitle{ margin:0; }
.book{ position:relative; min-width:0; padding:20px 20px 26px; text-align:center; cursor:pointer;
  border:0; border-radius:24px; outline:none; transition:background .25s, transform .25s; }
.book:hover, .book:focus-visible{ background:rgba(255,255,255,.12); transform:translateY(-4px); }
.book-stage{ min-height:390px; display:grid; place-items:center; perspective:1100px; }
.book .cover{ width:min(76%,260px); aspect-ratio:3/4; border-radius:5px; overflow:hidden;
  background:var(--cream); box-shadow:-13px 16px 28px rgba(80,31,4,.27), 4px 3px 0 rgba(255,255,255,.7);
  transform-style:preserve-3d; transform-origin:center; animation:bookTurn 6s ease-in-out infinite alternate; }
.book:nth-child(2) .cover{ animation-delay:-3s; }
@keyframes bookTurn{
  0%{ transform:rotateY(-10deg) rotateX(1deg) translateY(3px); }
  100%{ transform:rotateY(10deg) rotateX(-1deg) translateY(-3px); }
}
.book .cover img{ width:100%; height:100%; object-fit:cover; }
.book-badge{ display:inline-block; color:var(--gold); font-size:.68rem; letter-spacing:.16em;
  font-weight:700; text-transform:uppercase; margin-top:3px; }
.book h3{ max-width:340px; margin:7px auto 0; font-family:var(--sans); font-size:1.12rem;
  line-height:1.42; color:#fff; }
.book-price{ margin-top:7px; color:var(--on-orange-2); font-size:.94rem; font-weight:500; }
.book-buy{ display:inline-block; margin-top:10px; color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; }
.book-detail{ display:grid; grid-template-columns:.9fr 1.1fr; min-height:580px; }
.book-detail-copy{ padding:64px 34px 46px 54px; align-self:center; }
.book-detail-copy h2{ font-size:clamp(2rem,4vw,3.4rem); color:var(--ink); margin:10px 0 8px; }
.book-detail-copy .mrole{ color:var(--orange-deep); font-size:.72rem; letter-spacing:.15em;
  text-transform:uppercase; font-weight:700; margin-bottom:30px; }
.book-detail-copy p{ color:var(--ink-soft); font-size:.96rem; line-height:1.8; }
.book-detail-badge{ display:inline-block; padding:6px 12px; border-radius:999px;
  color:#fff; background:var(--orange); font-size:.66rem; letter-spacing:.15em; font-weight:700; }
.book-detail-price{ margin-top:26px; font-family:var(--serif); color:var(--ink); font-size:2.2rem; font-weight:700; }
.purchase-panel{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line-light); }
.purchase-kicker{ color:var(--orange-deep); font-size:.64rem; font-weight:700; letter-spacing:.17em; }
.purchase-panel h3{ margin:7px 0 8px; color:var(--ink); font-family:var(--serif); font-size:1.35rem; }
.purchase-panel p{ margin:0 0 16px; font-size:.8rem; line-height:1.55; }
.purchase-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.purchase-actions .btn{ min-height:40px; padding:10px 14px; font-size:.74rem; }
.book-detail-visual{ display:grid; place-items:center; padding:58px 44px; background:#fff; }
.book-detail-visual img{ width:min(78%,360px); max-height:520px; object-fit:contain;
  box-shadow:-16px 22px 38px rgba(70,30,5,.22); }

/* ===========================================================
   FOOTER
   =========================================================== */
footer{ padding:12px 16px 0; margin-top:14px; background:transparent; }
.footer-shell{ display:flex; flex-direction:column; padding:26px clamp(24px,3.4vw,42px) 18px;
  color:#fff8f0; background:#7d3516; border-radius:22px 22px 0 0; box-shadow:0 -18px 46px rgba(78,28,2,.18); }
.footer-main{ display:grid; grid-template-columns:minmax(300px,1.6fr) minmax(160px,.65fr) minmax(180px,.7fr);
  gap:clamp(36px,6vw,90px); }
.footer-brand{ display:inline-flex; align-items:center; gap:12px; font-family:var(--serif); font-size:28px; font-weight:600; }
.footer-brand img{ width:48px; height:48px; object-fit:contain; filter:none; }
.footer-pitch{ margin-top:30px; }
.footer-pitch strong{ display:block; font-size:15px; }
.footer-pitch p{ max-width:430px; margin:4px 0 0; color:rgba(255,248,240,.66); font-size:14px; line-height:1.55; }
.footer-cta{ display:inline-flex; margin-top:22px; padding:12px 18px; border-radius:10px;
  color:#7d3516; background:#fff8f0; font-size:14px; font-weight:700; transition:transform .2s,background .2s; }
.footer-cta:hover{ transform:translateY(-2px); background:#fff7ee; }
.footer-column h3{ margin:4px 0 16px; color:rgba(255,248,240,.52); font-family:var(--sans); font-size:14px; font-weight:600; }
.footer-column nav{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.footer-column a{ color:#f8f4ef; font-size:15px; font-weight:600; transition:color .2s;
  display:inline-flex; align-items:center; min-height:40px; }
.footer-column a:hover{ color:#f4c79b; }
.footer-connect{ display:flex; flex-direction:column; align-items:flex-start; }
.footer-social-list{ display:flex; flex-direction:column; gap:5px; }
.footer-social-list span{ color:#fff8f0; font-size:15px; font-weight:600; }
.footer-bottom{ display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:20px; margin-top:28px;
  padding-top:22px; border-top:1px solid rgba(255,248,240,.1); color:rgba(255,248,240,.52); font-size:13px; }
.footer-bottom span:nth-child(2){ color:rgba(255,248,240,.72); text-align:center; }
.footer-bottom a{ justify-self:end; color:#f8f4ef; font-weight:600;
  display:inline-flex; align-items:center; min-height:40px; }
@media(max-width:780px){
  footer{ padding:10px 10px 0; }
  .footer-shell{ min-height:0; padding:34px 24px 24px; }
  .footer-main{ grid-template-columns:1fr 1fr; gap:44px 30px; }
  .footer-intro{ grid-column:1/-1; }
  .footer-pitch{ margin-top:32px; }
  .footer-bottom{ grid-template-columns:1fr; align-items:start; gap:10px; margin-top:36px; }
  .footer-bottom span:nth-child(2){ text-align:left; }
  .footer-bottom a{ justify-self:start; }
}
@media(max-width:480px){
  .footer-main{ grid-template-columns:1fr; }
  .footer-intro{ grid-column:auto; }
  .footer-column{ padding-top:26px; border-top:1px solid rgba(255,255,255,.09); }
  .footer-brand{ font-size:24px; }
}

/* ===========================================================
   MODAL  (light)
   =========================================================== */
.modal-back{ position:fixed; inset:0; z-index:100; background:rgba(70,30,5,.6); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:24px; }
.modal-back.open{ display:flex; }
.modal{ position:relative; max-width:820px; width:100%; max-height:90vh; overflow:auto;
  background:var(--cream); border:1px solid var(--line-light); border-radius:22px;
  box-shadow:0 30px 80px rgba(60,25,0,.5); animation:pop .3s ease; }
@keyframes pop{ from{ transform:translateY(18px) scale(.98); opacity:0 } to{ transform:none; opacity:1 } }
.modal .x{ position:absolute; top:14px; right:14px; z-index:5; width:40px; height:40px; border-radius:50%;
  /* It sits over the maker's photo, so a 6% black wash left it invisible on a
     dark frame. Give it its own opaque disc instead. */
  background:rgba(255,252,247,.94); backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(60,30,5,.22);
  border:1px solid rgba(120,70,25,.18); color:var(--ink); font-size:1.3rem; cursor:pointer; transition:.2s; }
.modal .x:hover{ background:var(--orange); color:#fff; }
.modal-fox{ display:grid; grid-template-columns:1fr 1fr; }
.modal-fox .mimg{ background:#eee; }
.modal-fox .mimg img{ width:100%; height:100%; object-fit:cover; min-height:360px; }
/* A maker's bio, highlights, works and gallery make the right column far taller
   than a photograph. Both columns share one grid row, so the picture used to be
   stretched to that height and object-fit:cover cropped it to a narrow strip.
   Bound the image and let the text scroll past it instead. */
.modal-maker{ align-items:start; }
.modal-maker .mimg{ position:sticky; top:0; align-self:start; height:min(74vh,600px); }
.modal-maker .mimg img{ height:100%; min-height:0; }
.modal-fox .mbody{ padding:38px 34px; }
.modal-fox .mnum{ font-family:var(--serif); font-size:.9rem; color:var(--orange-deep); letter-spacing:.2em; }
.modal-fox h2{ font-size:2.2rem; color:var(--ink); margin:6px 0 4px; }
.modal-fox .mline{ width:46px; height:3px; border-radius:2px; margin:14px 0 18px; }
.modal-fox p{ color:var(--ink-soft); font-size:1.02rem; font-family:var(--serif); font-style:italic; }
.modal-text{ padding:40px 44px; }
.modal-text h2{ font-size:2.2rem; color:var(--ink); margin-bottom:6px; }
.modal-text .mrole{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-deep); font-weight:600; margin-bottom:18px; }
.modal-text p{ color:var(--ink-soft); font-size:1rem; }

.lightbox{ position:fixed; inset:0; z-index:120; background:rgba(40,18,2,.92); display:none;
  align-items:center; justify-content:center; padding:20px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:94vw; max-height:92vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.7); }
.lightbox .x{ position:absolute; top:20px; right:24px; font-size:2rem; color:#fff; cursor:pointer; background:none; border:0; }

/* fox audio player */
.fox-audio{ margin:22px 0 4px; padding:14px 16px; border-radius:14px;
  background:var(--cream); border:1px solid var(--line-light);
  box-shadow:inset 0 0 0 1px rgba(245,127,40,.08); }
.fox-audio .fa-label{ display:block; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fa,var(--orange-deep)); font-weight:600; margin-bottom:9px; }
.fox-audio audio{ width:100%; height:38px; }

/* gallery "show more" */
.gal-more{ display:flex; justify-content:center; margin-top:22px; }
.gal-more .btn{ min-width:200px; }
.archive-head{ padding:42px 48px 28px; color:var(--ink); border-bottom:1px solid var(--line-light); }
.archive-head>span{ color:var(--orange-deep); font-size:.68rem; font-weight:700; letter-spacing:.18em; }
.archive-head h2{ margin-top:7px; font-size:clamp(2rem,4vw,3rem); }
.archive-head p{ margin:9px 0 0; color:var(--ink-soft); }
.archive-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:24px 28px 34px; }
.archive-item{ min-width:0; padding:0; overflow:hidden; text-align:left; cursor:pointer; background:#fff;
  border:1px solid var(--line-light); border-radius:14px; transition:transform .2s,box-shadow .2s; }
.archive-item:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(70,30,5,.16); }
.archive-item img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.archive-item span{ display:flex; justify-content:space-between; gap:8px; padding:10px 11px; color:var(--ink); }
.archive-item b{ font-size:.64rem; }
.archive-item i{ font-family:var(--serif); font-size:.7rem; font-style:normal; color:var(--ink-soft); }

/* founder gallery + fox 4-side views */
.maker-copy .maker-intro{ margin:0 0 14px; color:var(--ink); font-family:var(--serif);
  font-size:1.15rem; font-style:italic; line-height:1.55; }
.maker-copy .maker-long{ color:var(--ink-soft); font-size:.9rem; line-height:1.75; }
.maker-highlights{ margin:20px 0; padding:18px 18px 18px 36px; color:var(--ink-soft);
  background:var(--cream); border:1px solid var(--line-light); border-radius:14px; }
.maker-highlights li{ margin:0 0 9px; font-size:.82rem; line-height:1.55; }
.maker-highlights li:last-child{ margin-bottom:0; }
.maker-story-head{ margin-top:24px; color:var(--orange-deep); font-size:.66rem;
  font-weight:700; letter-spacing:.17em; }
.maker-gal{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:12px; }
.maker-gal img{ width:100%; height:110px; object-fit:cover; border-radius:10px;
  border:1px solid var(--line-light); cursor:pointer; transition:transform .2s,box-shadow .2s; }
.maker-gal img:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(70,30,5,.16); }
.fox-views-label{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--orange-deep); font-weight:600; margin:22px 0 10px; }
.fox-views{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.fox-views img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:9px;
  border:1px solid var(--line-light); cursor:pointer; transition:transform .2s; }
.fox-views img:hover{ transform:scale(1.05); }

/* fox detail — wide newsroom layout */
.modal.modal-wide{ max-width:1120px; }
.mfox-more{ padding:8px 34px 40px; border-top:1px solid var(--line-light); }
.mm-head{ display:inline-flex; align-items:center; gap:9px; margin:26px 0 20px;
  font-family:var(--mono,ui-monospace,'SF Mono',Menlo,monospace);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.mm-head-sq{ width:11px; height:11px; border-radius:2px; background:var(--orange); }
.mfox-others{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mfox-card{ position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line-light); border-radius:16px; overflow:hidden; cursor:pointer;
  box-shadow:var(--shadow-soft); transition:transform .22s, box-shadow .22s; }
.mfox-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.mfox-card .mm-media{ aspect-ratio:4/3; overflow:hidden; background:#eee; }
.mfox-card .mm-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.mfox-card:hover .mm-media img{ transform:scale(1.06); }
.mfox-card .mm-body{ display:flex; flex-direction:column; padding:14px 15px 46px; flex:1; }
.mfox-card .mm-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.mfox-card .mm-cat{ display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono,ui-monospace,'SF Mono',Menlo,monospace);
  font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.mfox-card .mm-sq{ width:9px; height:9px; border-radius:2px; background:var(--accent,#e0a92b); }
.mfox-card .mm-num{ font-family:var(--mono,ui-monospace,'SF Mono',Menlo,monospace); font-size:.6rem; color:var(--ink-soft); }
.mfox-card .mm-title{ font-family:var(--serif); font-size:1.16rem; line-height:1.12; color:var(--ink); margin:0;
  border-bottom:2px solid transparent; align-self:flex-start; transition:border-color .2s; }
.mfox-card:hover .mm-title{ border-bottom-color:var(--accent,#e0a92b); }
.mfox-card .mm-desc{ color:var(--ink-soft); font-size:.8rem; margin:8px 0 0; flex:1; }
.mfox-card .mm-read{ position:absolute; left:15px; bottom:16px;
  font-family:var(--mono,ui-monospace,'SF Mono',Menlo,monospace);
  font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); font-weight:600; }
.mfox-card .mm-arrow{ position:absolute; right:12px; bottom:12px; width:34px; height:34px; border:0; cursor:pointer;
  border-radius:9px; background:var(--accent,#e0a92b); color:#fff; font-size:1rem; line-height:1;
  display:grid; place-items:center; box-shadow:0 6px 16px rgba(0,0,0,.22); transition:transform .2s; }
.mfox-card:hover .mm-arrow{ transform:translateX(3px); }


.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* image fade-in on load */
img[loading="lazy"]{ opacity:0; transition:opacity .5s ease; }
img.loaded, img[loading="lazy"].loaded{ opacity:1; }

/* ---------- hero scroll cue ---------- */
.scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:6px; width:max-content;
  margin:34px auto 0; color:var(--on-orange-2); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; }
.scroll-cue i{ font-style:normal; font-size:1.1rem; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.6 } 50%{ transform:translateY(6px); opacity:1 } }
.craft-item .ci{ font-size:1rem; filter:grayscale(.25) opacity(.92); }
@media (max-width:900px){
  .bar{ height:62px; }
  nav.links{ gap:18px; }
  nav.links a{ font-size:15px; }
  nav.links a.nav-cta{ padding:8px 12px; }
  .lang{ flex-basis:92px; width:92px; height:36px; }
}
@media (max-width:680px){
}

/* ---------- philosophy quote band ---------- */
#foxes{ padding-bottom:26px; }
.quoteband{ padding:34px 0 46px; }
.quoteband .qmark{ font-family:var(--serif); font-size:4rem; line-height:.4; color:var(--gold); margin-bottom:18px; }
.quoteband blockquote{ margin:0 auto; max-width:820px; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.4; color:#fff; text-shadow:0 2px 16px rgba(120,50,0,.3); }
.quoteband cite{ display:block; margin-top:22px; font-family:var(--sans); font-style:normal;
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }

/* ---------- lightbox nav ---------- */
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:54px; height:54px;
  border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  color:#fff; font-size:2rem; line-height:1; cursor:pointer; transition:.2s; display:grid; place-items:center; }
.lb-nav:hover{ background:rgba(255,255,255,.28); }
.lb-prev{ left:24px; } .lb-next{ right:24px; }
.lb-count{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.85);
  font-size:.82rem; letter-spacing:.1em; background:rgba(0,0,0,.35); padding:5px 14px; border-radius:999px; }

/* ---------- fox modal prev/next ---------- */
.mfox-nav{ position:absolute; top:14px; z-index:6; display:flex; gap:8px; left:14px; }
.mfox-nav button{ width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.06);
  border:1px solid var(--line-light); color:var(--ink); font-size:1.1rem; cursor:pointer; transition:.2s; }
.mfox-nav button:hover{ background:var(--orange); color:#fff; }

@media (max-width:680px){
  .lb-nav{ width:44px; height:44px; font-size:1.6rem; } .lb-prev{ left:10px; } .lb-next{ right:10px; }
  #foxes{ padding-bottom:30px; }
  .quoteband{ padding:40px 0 60px; }
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:960px){
  .fox-ed-grid{ --gap:278px; --tilt:14deg; --drop:26px; --w:clamp(192px,29vw,236px); }
  .makers, .builder{ grid-template-columns:1fr; }
  .maker-card{ min-height:400px; }
  .masonry{ columns:3; }
  .modal-fox{ grid-template-columns:1fr; }
  /* stacked, so the photo is a header rather than a sticky column */
  .modal-maker .mimg{ position:static; height:min(46vh,340px); }
  .mfox-others{ grid-template-columns:repeat(2,1fr); }
  .price-card{ position:static; }
  .cat-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .archive-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px){
  nav.links, .visit-text{ display:none; }
  .menu-btn{ display:inline-block; }
  header .bar, header.scrolled .bar{ height:62px; }
  header .brand img, header.scrolled .brand img{ height:34px; }
  header .brand b, header.scrolled .brand b{ font-size:20px; }
}
@media (max-width:680px){
  header .bar, header.scrolled .bar{ height:60px; padding-left:16px; padding-right:16px; }
  header .brand img, header.scrolled .brand img{ height:36px; }
  header .brand b, header.scrolled .brand b{ font-size:20px; }
  .lang{ flex-basis:84px; width:84px; height:36px; }
  .masonry{ columns:2; }
  .works-switch{ gap:8px; margin-top:30px; }
  .works-maker{ min-height:146px; display:flex; flex-direction:column; align-items:flex-start;
    gap:7px; padding:17px 14px; }
  .works-maker b{ font-size:1rem; }
  .works-maker small{ margin-top:6px; font-size:.64rem; }
  .works-maker i{ display:none; }
  .works-toolbar{ align-items:flex-start; flex-direction:column; margin-top:26px; }
  .filters{ justify-content:flex-start; }
  .filters button{ padding:8px 13px; font-size:.74rem; }
  .cell-meta{ position:static; opacity:1; transform:none; border-radius:0; }
  .archive-head{ padding:42px 22px 22px; }
  .archive-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:16px; }
  .fox-ed-grid{ --gap:216px; --tilt:15deg; --drop:22px; --w:clamp(166px,48vw,198px); height:clamp(378px,101vw,430px); }
  /* At .63rem/.56rem these came out at 10px and 9px on a phone. */
  .fox-ed .fe-name{ font-size:.79rem; letter-spacing:.1em; padding-bottom:12px; }
  .fox-ed .fe-top{ font-size:.64rem; }
  .fox-nav{ padding:0 15px; font-size:.64rem; }
  .fox-controls{ gap:10px; }

  .books{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .book{ padding:10px 6px 18px; }
  .book-stage{ min-height:250px; }
  .book .cover{ width:82%; }
  .book h3{ font-size:.86rem; }
  .book-detail{ grid-template-columns:1fr; }
  .book-detail-copy{ padding:50px 24px 30px; }
  .book-detail-visual{ padding:32px 24px; }
  .book-detail-visual img{ width:min(76%,280px); }
  section{ padding:64px 0; }
  .modal-text, .modal-fox .mbody{ padding:30px 24px; }
}
.drawer{ display:none; position:fixed; inset:0; z-index:100; flex-direction:column; overflow:auto;
  padding:18px clamp(22px,7vw,48px) 28px; color:var(--orange-deep); background:#fff7ee; }
.drawer.open{ display:flex; animation:drawerIn .26s ease both; }
@keyframes drawerIn{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:none; } }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; min-height:58px; }
.drawer-brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:23px; font-weight:600; }
.drawer-brand img{ width:44px; height:44px; object-fit:contain; }
.drawer-close{ width:44px; height:44px; border:1px solid rgba(199,100,23,.24); border-radius:50%;
  color:var(--orange-deep); background:transparent; font-size:30px; line-height:1; cursor:pointer; }
.drawer-links{ display:flex; flex:1; flex-direction:column; justify-content:flex-start; gap:clamp(14px,2.6vh,24px); padding:26px 0 38px; }
.drawer-links a{ position:relative; width:max-content; color:var(--orange-deep); font-family:var(--serif);
  font-size:clamp(30px,8vw,38px); line-height:1.05; font-weight:600; }
.drawer-links a.active::after{ content:""; position:absolute; left:0; right:35%; bottom:-8px; height:3px;
  border-radius:999px; background:#f4c79b; }
.drawer-links a.nav-cta{ width:100%; margin-top:12px; padding:16px 20px; text-align:center; color:#fff;
  background:#d8731f; border:1px solid #d8731f; border-radius:999px; font-family:var(--sans); font-size:17px; font-weight:700; }
.drawer-foot{ padding-top:20px; border-top:1px solid rgba(199,100,23,.16); }
.drawer-lang{ display:grid; grid-template-columns:1fr 1fr; max-width:220px; margin-bottom:22px;
  border:1px solid rgba(199,100,23,.35); border-radius:999px; overflow:hidden; }
.drawer-lang button{ min-height:42px; border:0; color:var(--orange-deep); background:transparent;
  font:700 15px var(--sans); cursor:pointer; }
.drawer-lang button.active{ color:#fff; background:#d8731f; }
.drawer-socials{ display:flex; flex-wrap:wrap; gap:10px 24px; }
.drawer-socials a{ color:var(--ink-soft); font-size:12px; font-weight:600; }
body.menu-open{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ===========================================================
   SECTION ORDER (Home → Featured → Foxes → Store → Custom → About → Gallery)
   =========================================================== */
main{ display:flex; flex-direction:column; }
.hero{ order:1; }
#featured{ order:2; }
#foxes{ order:3; }
#shop{ order:4; }
#create{ order:5; }
#about{ order:6; }
#works{ order:7; }
.quoteband{ order:9; }

/* #shop is a cream band */
#shop{ background:var(--cream); color:var(--ink); }
#shop .tag{ color:var(--ink); text-shadow:none; }
#shop .tag::before{ background:var(--orange); }
#shop .s-title{ color:var(--orange-deep); }
#shop .s-lead{ color:var(--ink-soft); }

/* ===========================================================
   FEATURED PRODUCTS strip
   =========================================================== */
#featured{ padding:40px 0 28px; }
.feat-title{ font-family:var(--serif); font-size:clamp(1.6rem,3.6vw,2.5rem); color:#fff;
  text-align:center; margin:0 0 28px; text-shadow:0 2px 14px rgba(120,50,0,.25); }
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feat-card{ display:flex; flex-direction:column; background:var(--card,#fff); color:var(--ink,#331f10);
  border:1px solid var(--line-light,rgba(51,31,16,.12)); border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-soft,0 12px 30px rgba(120,55,10,.18)); transition:transform .2s, box-shadow .2s; }
.feat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow,0 22px 55px rgba(120,55,10,.28)); }
.feat-media{ aspect-ratio:1/1; overflow:hidden; background:#efe7db; }
.feat-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.feat-card:hover .feat-media img{ transform:scale(1.06); }
.feat-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:3px; }
.feat-name{ font-family:var(--serif); font-size:1.16rem; margin:0 0 6px; line-height:1.3; }
.feat-blurb{ font-size:.8rem; line-height:1.55; color:var(--ink-soft,#6d523d); margin:0; }
.feat-price{ font-family:var(--serif); font-weight:700; font-size:1.3rem; color:var(--orange-deep,#e86f1e); margin-top:10px; }
@media(max-width:860px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===========================================================
   CUSTOM ORDER — online request form
   =========================================================== */
.order-form{ margin-top:38px; max-width:920px; }
.of-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.of-field{ margin-bottom:18px; }
.of-field>label{ display:inline-block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--on-orange-2); margin-bottom:8px; }
.of-field .req{ color:#ffe0cf; margin-left:4px; }
.of-field input, .of-field textarea, .of-field select{ width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--cream); border:1px solid var(--line-light); border-radius:14px; padding:14px 16px; }
.of-field select{ min-height:52px; cursor:pointer; }
.of-field input::placeholder, .of-field textarea::placeholder{ color:#b09a86; }
.of-field input:focus, .of-field textarea:focus{ outline:none; border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.45); }
.of-field textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.of-choices{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.of-choice{ font-family:var(--sans); font-size:1.02rem; font-weight:600; color:var(--ink);
  background:var(--cream); border:1px solid var(--line-light); border-radius:14px; padding:16px; cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .15s, border-color .15s; }
.of-choice:hover{ border-color:#fff; transform:translateY(-2px); }
.of-choice.sel{ background:#fff; border-color:var(--orange); color:var(--orange-deep);
  box-shadow:0 0 0 2px var(--orange) inset, 0 8px 20px rgba(120,55,10,.2); }
.of-details{ margin:4px 0 20px; padding:24px; border:1px solid rgba(255,255,255,.3);
  border-radius:18px; background:rgba(255,255,255,.08); }
.of-details[hidden],.of-details>[hidden]{ display:none; }
.of-submit{ width:100%; margin-top:6px; font-size:1.02rem; padding:16px; }
.of-msg{ margin-top:14px; font-size:.92rem; font-weight:600; min-height:1.2em; text-align:center; }
.of-msg.ok{ color:#eafff0; }
.of-msg.bad{ color:#ffdcd4; }
@media(max-width:680px){ .of-row{ grid-template-columns:1fr; } .of-choices{ grid-template-columns:1fr; } }

/* ===========================================================
   ALTERNATING SECTION BANDS  (orange ↔ cream rhythm)
   Visual order: hero(O) featured(C) foxes(O) books(C) create(O) about(C) works(O)
   =========================================================== */
#featured, #about{ background:var(--cream); color:var(--ink); }

/* cream-band headings: dark text instead of white */
#featured .feat-title{ color:var(--ink); text-shadow:none; }
#books .tag, #about .tag{ color:var(--ink); text-shadow:none; }
#books .tag::before, #about .tag::before{ background:var(--orange); }
#books .s-title, #about .s-title{ color:var(--orange-deep); }
#books .s-lead, #about .s-lead{ color:var(--ink-soft); }

/* books on cream: dark text + soft hover */
#books .book h3{ color:var(--ink); }
#books .book-price{ color:var(--orange-deep); font-weight:700; }
#books .book-buy{ color:var(--orange-deep); }
#books .book-badge{ color:var(--orange-deep); }
#books .book:hover, #books .book:focus-visible{ background:rgba(180,80,20,.06); }

/* ===========================================================
   SOFTER, PREMIUM HOVER / SHADOW
   =========================================================== */
.fox-ed.is-center:hover .fe-in{ box-shadow:0 22px 46px rgba(120,55,10,.26); }
.masonry .cell:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(120,55,10,.16); }
.maker-card:hover{ box-shadow:0 18px 42px rgba(120,55,10,.2); }
.feat-card:hover{ transform:translateY(-5px); box-shadow:0 16px 36px rgba(120,55,10,.16); }

/* ===========================================================
   9-FOX CAROUSEL — clearer controls
   =========================================================== */


/* ===========================================================
   MOBILE FINE-TUNING (small phones)
   =========================================================== */
@media (max-width:520px){
  .feat-title{ font-size:1.55rem; }
  .feat-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .feat-name{ font-size:1rem; }
  .feat-blurb{ font-size:.74rem; }
  .feat-price{ font-size:1.12rem; }
  .hero h1{ font-size:clamp(2rem,8.5vw,2.7rem); line-height:1.18; }
  .hero p{ font-size:1rem; }
  .hero-cta{ width:100%; gap:10px; }
  .hero-cta .btn{ flex:1 1 auto; padding:13px 14px; }
  .s-lead{ font-size:.95rem; line-height:1.65; }
  .feat-media{ aspect-ratio:1/1; }
}
@media (max-width:430px){
  .tag{ font-size:1.6rem; gap:.5rem; }
  .tag::before{ width:22px; height:2px; }
  .s-title{ font-size:.78rem; letter-spacing:.16em; }
  /* On a phone the mark was losing to the call to action; give it the room.
     Matches the specificity of the 900/680px rules above, which would otherwise
     keep the mark at 34-36px. */
  header .brand img, header.scrolled .brand img{ height:46px; }
  .brand b{ font-size:1.15rem; }
  .bar{ gap:10px; }
  .lang button{ padding:6px 9px; }
  .nav-cta-btn{ height:33px; padding:0 13px; font-size:12.5px; gap:5px; }
  .nav-cta-btn::before{ font-size:8px; }
  section{ padding:44px 0; }
  .feat-grid{ gap:10px; }
  .book-stage{ min-height:210px; }
  .of-choice{ padding:14px; font-size:.95rem; }
}
@media (max-width:430px){ .brand b{ display:none; } }
@media (max-width:360px){ .nav-cta-btn{ padding:0 11px; font-size:12px; } }

/* Featured — "Coming soon" placeholder cards */
.feat-soon{ cursor:default; }
.feat-media-soon{ display:grid; place-items:center;
  background:repeating-linear-gradient(135deg, #fbeede 0 12px, #fff6ea 12px 24px);
  color:var(--orange-deep); }
.feat-media-soon span{ font-size:2.2rem; opacity:.55; }
.feat-name-soon{ color:var(--ink-soft); }
.feat-price-soon{ color:var(--orange-deep); font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; }

/* ===========================================================
   SHOP / STORE
   =========================================================== */
.shop-controls{ margin:26px 0 24px; display:flex; flex-direction:column; gap:14px; }
.shop-search{ width:100%; max-width:420px; padding:12px 16px; border:1px solid var(--line-light);
  border-radius:999px; font:inherit; font-size:.95rem; background:#fff; color:var(--ink); }
.shop-search:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(239,111,28,.15); }
.shop-filters{ display:flex; flex-wrap:wrap; gap:8px; }
.shop-chip{ font:inherit; font-size:.82rem; font-weight:600; padding:8px 15px; border-radius:999px;
  border:1px solid var(--line-light); background:#fff; color:var(--ink); cursor:pointer; transition:.15s; }
.shop-chip:hover{ border-color:var(--orange); }
.shop-chip.active{ background:var(--orange); color:#fff; border-color:var(--orange); }
.shop-gifts{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.shop-gift-label{ font-size:.76rem; color:var(--ink-soft); font-weight:600; letter-spacing:.04em; }
.shop-gchip{ font:inherit; font-size:.78rem; padding:6px 13px; border-radius:999px; border:1px dashed var(--line-light);
  background:transparent; color:var(--ink-soft); cursor:pointer; transition:.15s; }
.shop-gchip:hover{ border-color:var(--orange); color:var(--orange-deep); }
.shop-gchip.active{ background:rgba(239,111,28,.12); border-style:solid; border-color:var(--orange); color:var(--orange-deep); }
.shop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.shop-card{ background:#fff; border:1px solid var(--line-light); border-radius:16px; overflow:hidden; cursor:pointer;
  box-shadow:var(--shadow-soft); transition:transform .2s, box-shadow .2s; }
.shop-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.sc-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#efe7db; display:grid; place-items:center; }
.sale-badge{ position:absolute; left:10px; top:10px; z-index:2; padding:6px 9px; border-radius:999px;
  color:#fff; background:var(--orange-deep); font-size:.61rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.sale-badge.ready{ background:#39755a; }.sale-badge.made{ background:#8a6039; }
.sale-badge.one{ background:#34271e; }.sale-badge.sold{ background:rgba(42,26,14,.78); }
.sc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.shop-card:hover .sc-media img{ transform:scale(1.06); }
.sc-noimg{ font-size:2rem; color:var(--orange-deep); opacity:.4; }
.sc-body{ padding:12px 14px 15px; }
.sc-name{ font-family:var(--serif); font-size:1.12rem; color:var(--ink); margin:0; line-height:1.15; }
.sc-price{ margin-top:5px; color:var(--orange-deep); font-weight:700; font-family:var(--serif); font-size:1.15rem; }
.sc-stock{ margin-top:5px; color:var(--ink-soft); font-size:.7rem; }
.shop-empty{ grid-column:1/-1; text-align:center; color:var(--ink-soft); padding:40px; }

/* product detail modal */
.prod{ display:grid; grid-template-columns:1fr 1fr; }
.prod-media{ background:#efe7db; }
.prod-media #prodMain{ width:100%; height:100%; max-height:74vh; object-fit:cover; display:block; }
.prod-thumbs{ display:flex; gap:8px; padding:10px; flex-wrap:wrap; background:#fff; }
.prod-thumbs img{ width:54px; height:54px; object-fit:cover; border-radius:8px; border:2px solid transparent; cursor:pointer; }
.prod-thumbs img.on{ border-color:var(--orange); }
.prod-body{ padding:34px 32px; }
.prod-body h2{ font-size:2rem; color:var(--ink); margin:0 0 6px; }
.prod-price{ font-family:var(--serif); font-weight:700; font-size:1.6rem; color:var(--orange-deep); margin-bottom:16px; }
.prod-sale-status{ display:inline-flex; margin:-7px 0 16px; padding:6px 10px; border-radius:999px;
  color:#fff; background:var(--orange-deep); font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.prod-sale-status.ready{ background:#39755a; }.prod-sale-status.made{ background:#8a6039; }
.prod-sale-status.one{ background:#34271e; }.prod-sale-status.sold{ background:#6d6259; }
.prod-story{ color:var(--ink-soft); font-size:1rem; line-height:1.7; }
.prod-specs{ margin:18px 0 22px; display:grid; grid-template-columns:auto 1fr; gap:9px 16px; }
.prod-specs dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--orange-deep); font-weight:700; padding-top:2px; }
.prod-specs dd{ margin:0; color:var(--ink); font-size:.95rem; line-height:1.5; }
.prod-artisan{ background:none; border:0; color:var(--orange-deep); font-weight:700; cursor:pointer; padding:0; font:inherit; }
.prod-artisan:hover{ text-decoration:underline; }
.prod-order{ width:100%; }
.making-link{ display:inline-flex; margin:4px 0 18px; color:var(--orange-deep); font-size:.78rem; font-weight:700; }
.prod-unavailable{ display:block; width:100%; padding:13px; text-align:center; color:var(--ink-soft);
  border:1px solid var(--line-light); border-radius:999px; font-weight:700; }
.cell-meta>span{ display:flex; flex-direction:column; gap:2px; }
.cell-similar{ padding:6px 8px; color:#fff; background:var(--orange); border:0; border-radius:8px;
  font:600 .58rem var(--sans); cursor:pointer; }

/* artisan works inside maker modal */
.maker-works{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:6px 0 10px; }
.mw-card{ background:#fff; border:1px solid var(--line-light); border-radius:12px; overflow:hidden; cursor:pointer; padding:0; text-align:left; }
.mw-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:#efe7db; }
.mw-card span{ display:block; padding:7px 9px; font-size:.78rem; color:var(--ink); font-weight:600; line-height:1.2; }

@media(max-width:960px){ .shop-grid{ grid-template-columns:repeat(3,1fr); } .prod{ grid-template-columns:1fr; } .prod-media #prodMain{ max-height:44vh; } }
@media(max-width:680px){ .shop-grid{ grid-template-columns:repeat(2,1fr); } .maker-works{ grid-template-columns:repeat(2,1fr); } .prod-body{ padding:26px 22px; } .of-details{ padding:18px 14px; } }
@media(max-width:680px){
  /* Two columns inside a 166px cell left the label on two lines and the button
     on three. Stack them and let the button hold the full width. */
  .cell-meta{ flex-direction:column; align-items:stretch; gap:8px; }
  .cell-similar{ width:100%; min-height:38px; padding:6px 10px; }
}

/* ===========================================================
   FOX ARTICLE — one wish per page (fox.html)
   Editorial layout on cream: meta row, serif headline, hero
   image, body, the four angles, then the other eight wishes.
   =========================================================== */
.fox-page{ background:var(--cream); }
.fox-article{ padding:30px 22px 64px; }
.fa-shell{ max-width:var(--maxw); margin:0 auto; }
.fox-loading{ min-height:60vh; }

.fa-back{ display:inline-block; margin-bottom:18px; font-size:.85rem; font-weight:600;
  color:var(--ink-soft); text-decoration:none; transition:color .2s; }
.fa-back:hover{ color:var(--orange-deep); }

.fa-meta{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:var(--mono,ui-monospace,'SF Mono',Menlo,monospace);
  font-size:.66rem; font-weight:700; letter-spacing:.18em; margin-bottom:14px; }
.fa-chip{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft); text-transform:uppercase; }
.fa-sq{ width:9px; height:9px; border-radius:2px; background:var(--accent); flex:none; }
.fa-num{ color:var(--accent); white-space:nowrap; }

/* Photograph on the left, everything you need to know beside it. */
.fa-lead{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:54px; align-items:start; margin-bottom:44px; }
.fa-head h1{ font-family:var(--serif); font-size:clamp(2rem,3.6vw,3.1rem); line-height:1.18;
  color:var(--ink); margin:0 0 16px; max-width:20ch; }
.fa-stand{ font-family:var(--serif); font-style:italic; font-size:1.14rem; line-height:1.62;
  color:var(--ink-soft); margin:0; max-width:56ch; }

.fa-hero{ margin:0; border-radius:20px; overflow:hidden; background:#e9e2d7;
  box-shadow:0 22px 60px rgba(80,40,5,.16);
  position:sticky; top:88px; }
.fa-hero img{ width:100%; display:block; aspect-ratio:4/5; object-fit:cover; }

.fa-listen{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line-light); }
.fa-listen-label{ display:block; font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:10px; }
.fa-listen audio{ width:100%; }

.fa-body{ font-size:1rem; line-height:1.82; color:var(--ink-soft); margin-top:22px; max-width:62ch; }
.fa-body p{ margin:0 0 1.1em; }
.fa-body p:first-child::first-letter{ font-family:var(--serif); font-size:3.1em; line-height:.86;
  float:left; margin:.06em .1em 0 0; color:var(--accent); }

.fa-sub{ display:flex; align-items:center; gap:10px;
  font-family:var(--mono,ui-monospace,'SF Mono',Menlo,monospace);
  font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 16px; }

.fa-audio{ margin:38px 0; padding:20px 22px; border-radius:16px;
  background:#fff; border:1px solid var(--line-light); }
.fa-audio-label{ display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:12px; }
.fa-audio audio{ width:100%; }

.fa-views{ margin:32px 0; }
.fa-view-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.fa-view-grid img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:14px;
  background:#fff; border:1px solid var(--line-light); cursor:zoom-in; transition:transform .2s, box-shadow .2s; }
.fa-view-grid img:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(80,40,5,.18); }

.fa-more{ margin-top:40px; padding-top:28px; border-top:1px solid var(--line-light); }
.fa-more-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:22px; }
.fa-card{ display:block; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--line-light); border-radius:18px; padding:14px;
  transition:transform .2s, box-shadow .2s, border-color .2s; }
.fa-card:hover{ transform:translateY(-4px); border-color:var(--accent);
  box-shadow:0 18px 40px rgba(80,40,5,.16); }
.fa-card-media{ border-radius:12px; overflow:hidden; background:#efe8dd; margin-bottom:12px; }
.fa-card-media img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.fa-card-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--mono,ui-monospace,'SF Mono',Menlo,monospace);
  font-size:.6rem; font-weight:700; letter-spacing:.16em; margin-bottom:8px; }
.fa-card h3{ font-family:var(--serif); font-size:1.16rem; line-height:1.25; color:var(--ink); margin:0 0 6px; }
.fa-card p{ font-size:.84rem; line-height:1.55; color:var(--ink-soft); margin:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; }

@media(max-width:880px){
  .fa-lead{ grid-template-columns:1fr; gap:26px; margin-bottom:38px; }
  .fa-hero{ position:static; }
  .fa-hero img{ aspect-ratio:3/4; }
}
@media(max-width:720px){
  .fox-article{ padding:20px 16px 48px; }
  .fa-hero{ border-radius:14px; margin-bottom:28px; }
  .fa-body p:first-child::first-letter{ font-size:2.6em; }
  .fa-more-grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
}