/* ═══════════════════════════════════════════════════
   DNA · DA & AL — "Grown from the Earth"
   Palette lifted off the garments and the hangtag.
   ═══════════════════════════════════════════════════ */

:root{
  /* the tag */
  --soot:      #12100D;
  --soot-2:    #1A1712;
  --soot-3:    #241F18;
  --gold:      #D4AF5A;
  --gold-deep: #8C6A21;
  --leaf:      #1E6B2E;
  --bone:      #E9E2D2;
  --bone-dim:  #A9A091;

  /* the six vats */
  --fern:     #8E9B1F;
  --marigold: #C9911A;
  --clay:     #B3561D;
  --flag:     #9E2430;
  --moss:     #6E7A22;
  --stone:    #4E5761;

  /* live dye, tweened on scroll */
  --dye: #8E9B1F;

  --stitch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='14' viewBox='0 0 140 14'%3E%3Cpath d='M0 8C16 4 26 11 42 7S72 3 88 9s26-4 52-1' fill='none' stroke='%23D4AF5A' stroke-width='1.7' stroke-dasharray='10 8' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E");

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --pad: clamp(1.25rem, 4vw, 5rem);
  --maxw: 1560px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--soot);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1rem,.94rem + .28vw,1.125rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* the vat wash — the whole page sits in dye */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 78% at 78% 6%, color-mix(in oklab, var(--dye) 46%, transparent) 0%, transparent 62%),
    radial-gradient(96% 70% at 6% 96%, color-mix(in oklab, var(--dye) 30%, transparent) 0%, transparent 58%);
  opacity:.5;
  transition:none;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--gold); color:var(--soot); }

:focus-visible{
  outline:2px dashed var(--gold);
  outline-offset:4px;
  border-radius:2px;
}

.stamp-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* woven paper grain */
.grain{
  position:fixed; inset:-50%; z-index:60; pointer-events:none;
  opacity:.24; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* the ten carved blocks, faint and scattered — each section shows its
   own handful, one struck bigger than the rest, so the print changes
   as the dye changes rather than repeating one tile down the page. */
.patches{
  position:fixed; inset:-10%; z-index:1; pointer-events:none;
  opacity:.27; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700'%3E%3Cg transform='translate(190,170) rotate(8) scale(1.35)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='none' stroke='%23D4AF5A' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 49c3-5 11-3 11 4 0 9-11 11-18 5-9-8-4-23 8-25 15-2 25 11 24 24-1 15-13 25-27 24'/%3E%3C/g%3E%3Cg fill='%23D4AF5A'%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(45 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(90 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(135 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(180 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(225 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(270 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(315 50 50)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(520,430) rotate(-10) scale(0.55)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='%23D4AF5A'%3E%3Cpath d='M13 53C16 26 41 12 61 18c19 6 27 24 25 35z'/%3E%3Cpath d='M39 53c-2 14-2 27 2 38h20c-2-13-3-25-4-38z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23D4AF5A' stroke-width='4.5' stroke-linecap='round' d='M22 92c14-4 40-4 56 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(480,120) rotate(12) scale(0.48)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='%23D4AF5A' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M50 50C36 25 13 20 8 33c-5 13 14 21 42 17z'/%3E%3Cpath d='M50 50c-15 8-29 20-23 31 7 11 20-6 23-31z'/%3E%3Cpath d='M50 50C64 25 87 20 92 33c5 13-14 21-42 17z'/%3E%3Cpath d='M50 50c15 8 29 20 23 31-7 11-20-6-23-31z'/%3E%3Cpath d='M50 31c3 9 3 42 0 51-3-9-3-42 0-51z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23D4AF5A' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M50 33c-3-7-8-11-14-13M50 33c3-7 8-11 14-13'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:min(92vw,980px);
}

body[data-patch="fern"] .patches{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700'%3E%3Cg transform='translate(190,170) rotate(8) scale(1.35)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='none' stroke='%23D4AF5A' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 49c3-5 11-3 11 4 0 9-11 11-18 5-9-8-4-23 8-25 15-2 25 11 24 24-1 15-13 25-27 24'/%3E%3C/g%3E%3Cg fill='%23D4AF5A'%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(45 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(90 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(135 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(180 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(225 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(270 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(315 50 50)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(520,430) rotate(-10) scale(0.55)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='%23D4AF5A'%3E%3Cpath d='M13 53C16 26 41 12 61 18c19 6 27 24 25 35z'/%3E%3Cpath d='M39 53c-2 14-2 27 2 38h20c-2-13-3-25-4-38z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23D4AF5A' stroke-width='4.5' stroke-linecap='round' d='M22 92c14-4 40-4 56 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(480,120) rotate(12) scale(0.48)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='%23D4AF5A' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M50 50C36 25 13 20 8 33c-5 13 14 21 42 17z'/%3E%3Cpath d='M50 50c-15 8-29 20-23 31 7 11 20-6 23-31z'/%3E%3Cpath d='M50 50C64 25 87 20 92 33c5 13-14 21-42 17z'/%3E%3Cpath d='M50 50c15 8 29 20 23 31-7 11-20-6-23-31z'/%3E%3Cpath d='M50 31c3 9 3 42 0 51-3-9-3-42 0-51z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23D4AF5A' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M50 33c-3-7-8-11-14-13M50 33c3-7 8-11 14-13'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:min(92vw,980px);
}
body[data-patch="soil"] .patches{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700'%3E%3Cg transform='translate(200,470) rotate(-6) scale(1.4)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='none' stroke='%23D4AF5A' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='50' cy='36' r='30'/%3E%3Cpath d='M50 90V44'/%3E%3Cpath d='M50 62 36 48M50 62l14-14M50 48 40 37M50 48l10-11M36 48l-6-11M64 48l6-11'/%3E%3Cpath d='M50 90c-9 3-15 7-19 10M50 90c9 3 15 7 19 10M50 90v10'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(520,160) rotate(10) scale(0.55)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='%23D4AF5A'%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(30 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(60 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(90 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(120 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(150 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(180 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(210 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(240 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(270 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(300 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(330 50 50)'/%3E%3Ccircle cx='50' cy='50' r='24' fill-opacity='.9'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:min(94vw,1020px);
}
body[data-patch="moss"] .patches{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700'%3E%3Cg transform='translate(530,190) rotate(9) scale(1.3)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='%23D4AF5A'%3E%3Cpath d='M13 53C16 26 41 12 61 18c19 6 27 24 25 35z'/%3E%3Cpath d='M39 53c-2 14-2 27 2 38h20c-2-13-3-25-4-38z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23D4AF5A' stroke-width='4.5' stroke-linecap='round' d='M22 92c14-4 40-4 56 0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(160,480) rotate(-12) scale(0.55)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='%23D4AF5A'%3E%3Cpath d='M63 13C40 18 25 39 29 62c4 22 26 34 46 26-17-4-30-19-31-36-1-17 7-30 19-39z'/%3E%3Cpath d='M76 20l4 11 12 1-9 8 3 12-10-7-11 6 4-12-9-8 12-1z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(190,150) rotate(6) scale(0.45)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='%23D4AF5A' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M50 50C36 25 13 20 8 33c-5 13 14 21 42 17z'/%3E%3Cpath d='M50 50c-15 8-29 20-23 31 7 11 20-6 23-31z'/%3E%3Cpath d='M50 50C64 25 87 20 92 33c5 13-14 21-42 17z'/%3E%3Cpath d='M50 50c15 8 29 20 23 31-7 11-20-6-23-31z'/%3E%3Cpath d='M50 31c3 9 3 42 0 51-3-9-3-42 0-51z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23D4AF5A' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M50 33c-3-7-8-11-14-13M50 33c3-7 8-11 14-13'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:min(90vw,940px);
}
body[data-patch="marigold"] .patches{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700'%3E%3Cg transform='translate(200,210) rotate(-8) scale(1.35)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='%23D4AF5A'%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(30 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(60 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(90 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(120 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(150 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(180 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(210 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(240 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(270 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(300 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(330 50 50)'/%3E%3Ccircle cx='50' cy='50' r='24' fill-opacity='.9'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(540,480) rotate(14) scale(0.5)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='%23D4AF5A'%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(45 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(90 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(135 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(180 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(225 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(270 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(315 50 50)'/%3E%3Ccircle cx='50' cy='50' r='8' fill='none' stroke='%23D4AF5A' stroke-width='5'/%3E%3Ccircle cx='50' cy='50' r='2.6'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:min(94vw,1020px);
}
body[data-patch="clay"] .patches{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700'%3E%3Cg transform='translate(530,200) rotate(8) scale(1.3)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='none' stroke='%23D4AF5A' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 44c10-13 28-13 38 0-10 12-28 12-38 0z'/%3E%3Cpath d='M56 44c10-13 28-13 38 0-10 12-28 12-38 0z'/%3E%3Cpath d='M6 28c12-9 28-9 38-1M56 27c10-8 26-8 38 1'/%3E%3Cpath d='M50 58c-6 0-10 5-10 11s5 11 12 11'/%3E%3C/g%3E%3Cg fill='%23D4AF5A'%3E%3Ccircle cx='25' cy='44' r='5.4'/%3E%3Ccircle cx='75' cy='44' r='5.4'/%3E%3Ccircle cx='50' cy='42' r='3.4'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(180,470) rotate(-6) scale(0.65)'%3E%3Cg transform='translate(-50,-50)'%3E%3Ctext x='50' y='54' text-anchor='middle' dominant-baseline='middle' fill='%23D4AF5A' font-size='80' font-family='Kohinoor Devanagari,Devanagari Sangam MN,Noto Sans Devanagari,serif'%3E%E0%A5%90%3C/text%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(200,140) rotate(10) scale(0.42)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='none' stroke='%23D4AF5A' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 49c3-5 11-3 11 4 0 9-11 11-18 5-9-8-4-23 8-25 15-2 25 11 24 24-1 15-13 25-27 24'/%3E%3C/g%3E%3Cg fill='%23D4AF5A'%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(45 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(90 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(135 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(180 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(225 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(270 50 50)'/%3E%3Cpath d='M50 5c2 8 5 11 4 17h-9c-1-6 2-9 5-17z' transform='rotate(315 50 50)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:min(92vw,980px);
}
body[data-patch="flag"] .patches{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700'%3E%3Cg transform='translate(210,190) rotate(-10) scale(1.3)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='%23D4AF5A'%3E%3Cpath d='M63 13C40 18 25 39 29 62c4 22 26 34 46 26-17-4-30-19-31-36-1-17 7-30 19-39z'/%3E%3Cpath d='M76 20l4 11 12 1-9 8 3 12-10-7-11 6 4-12-9-8 12-1z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(520,470) rotate(6) scale(0.55)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='none' stroke='%23D4AF5A' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='50' cy='36' r='30'/%3E%3Cpath d='M50 90V44'/%3E%3Cpath d='M50 62 36 48M50 62l14-14M50 48 40 37M50 48l10-11M36 48l-6-11M64 48l6-11'/%3E%3Cpath d='M50 90c-9 3-15 7-19 10M50 90c9 3 15 7 19 10M50 90v10'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(500,140) rotate(-14) scale(0.42)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='%23D4AF5A'%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(45 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(90 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(135 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(180 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(225 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(270 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(315 50 50)'/%3E%3Ccircle cx='50' cy='50' r='8' fill='none' stroke='%23D4AF5A' stroke-width='5'/%3E%3Ccircle cx='50' cy='50' r='2.6'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:min(94vw,1020px);
}
body[data-patch="stone"] .patches{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700'%3E%3Cg transform='translate(200,460) rotate(12) scale(1.4)'%3E%3Cg transform='translate(-50,-50)'%3E%3Cg fill='%23D4AF5A'%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(45 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(90 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(135 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(180 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(225 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(270 50 50)'/%3E%3Cpath d='M50 8c9 15 9 26 0 38-9-12-9-23 0-38z' transform='rotate(315 50 50)'/%3E%3Ccircle cx='50' cy='50' r='8' fill='none' stroke='%23D4AF5A' stroke-width='5'/%3E%3Ccircle cx='50' cy='50' r='2.6'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(530,180) rotate(-8) scale(0.6)'%3E%3Cg transform='translate(-50,-50)'%3E%3Ctext x='50' y='54' text-anchor='middle' dominant-baseline='middle' fill='%23D4AF5A' font-size='80' font-family='Kohinoor Devanagari,Devanagari Sangam MN,Noto Sans Devanagari,serif'%3E%E0%A5%90%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:min(94vw,1020px);
}

/* ── shared type ─────────────────────────────────── */
.eyebrow{
  display:flex; align-items:center; gap:.85rem;
  margin:0 0 1.4rem;
  font-size:.72rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold);
}
.eyebrow i{ flex:0 0 auto; width:clamp(28px,6vw,68px); height:1px; background:var(--gold-deep); }
.eyebrow span{ white-space:nowrap; }

.sec-h{
  margin:0;
  font-family:var(--display);
  font-variation-settings:"SOFT" 90,"WONK" 1,"opsz" 144;
  font-weight:400;
  font-size:clamp(2.9rem,1.4rem + 6.6vw,7.6rem);
  line-height:.88;
  letter-spacing:-.025em;
  color:var(--bone);
}
.sec-h em{ font-style:italic; color:var(--gold); }

.sec-head{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.sec-head--center{ text-align:center; }
.sec-head--center .eyebrow{ justify-content:center; }

.btn{
  --bg:var(--gold);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95em 1.7em;
  background:var(--bg); color:var(--soot);
  font-weight:600; font-size:.86rem;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--gold);
  border-radius:999px;
  transition:transform .35s cubic-bezier(.2,.9,.2,1), background .35s, color .35s;
}
.btn:hover{ transform:translateY(-3px); background:var(--bone); border-color:var(--bone); }
.btn--ghost{ background:transparent; color:var(--gold); }
.btn--ghost:hover{ background:var(--gold); color:var(--soot); border-color:var(--gold); }
.btn--big{ font-size:clamp(.9rem,.7rem + .5vw,1.15rem); padding:1.05em 2.1em; }

.seam{
  position:relative; z-index:2;
  height:14px;
  background-image:var(--stitch);
  background-repeat:repeat-x;
  background-position:center;
}

/* ── loader ──────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:var(--soot);
}
.loader__inner{ text-align:center; }
.loader__seed{ width:clamp(70px,10vw,110px); height:auto; overflow:visible; }
.loader__word{
  margin:1.1rem 0 0;
  font-family:var(--display); font-style:italic;
  font-variation-settings:"SOFT" 90,"WONK" 1;
  font-size:clamp(1rem,.85rem + .6vw,1.5rem);
  color:var(--gold);
  opacity:0;
}
body.is-loaded .loader{ pointer-events:none; }

/* ── topbar ──────────────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  padding:.85rem var(--pad);
  /* Opaque, and no backdrop-filter: the bar is its own stacking context, so
     the logo's black plate can only blend away against a matching ground. */
  background:var(--soot);
  border-bottom:1px solid color-mix(in oklab, var(--gold) 16%, transparent);
}
.topbar__mark{ flex:0 0 auto; line-height:0; }
.topbar__mark img{ width:clamp(92px,9.5vw,132px); height:auto; }
.topbar__nav{
  margin-left:auto;
  display:flex; gap:clamp(1rem,2.4vw,2.4rem);
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
}
.topbar__nav a{ text-decoration:none; color:var(--bone-dim); position:relative; padding-bottom:3px; }
.topbar__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.9,.2,1);
}
.topbar__nav a:hover{ color:var(--bone); }
.topbar__nav a:hover::after{ transform:scaleX(1); }
.topbar__cta{
  flex:0 0 auto;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  text-decoration:none; color:var(--gold);
  border:1px solid var(--gold-deep); border-radius:999px;
  padding:.6em 1.2em;
  transition:background .35s,color .35s;
}
.topbar__cta:hover{ background:var(--gold); color:var(--soot); }

/* ── language toggle ─────────────────────────────── */
.langs{
  flex:0 0 auto;
  display:flex; align-items:center; gap:.35rem;
  font-size:.72rem; letter-spacing:.16em; font-weight:600;
  color:var(--gold-deep);
}
.langs button{
  appearance:none; border:0; background:none; cursor:pointer;
  font:inherit; letter-spacing:inherit;
  color:var(--bone-dim);
  padding:.35em .15em;
  transition:color .3s;
}
.langs button:hover{ color:var(--bone); }
.langs button.is-on{ color:var(--gold); text-decoration:underline; text-underline-offset:5px; }

/* ── mobile drawer ───────────────────────────────── */
.burger{
  display:none;                       /* desktop keeps the inline nav */
  flex:0 0 auto;
  appearance:none; border:0; background:none; cursor:pointer;
  width:42px; height:42px; padding:0;
  place-items:center; align-content:center; gap:6px;
}
.burger i{
  display:block; width:24px; height:1.5px; background:var(--bone);
  transition:transform .4s cubic-bezier(.2,.9,.2,1), opacity .3s;
}
body.nav-open .burger i:first-of-type{ transform:translateY(3.75px) rotate(45deg); }
body.nav-open .burger i:last-of-type{ transform:translateY(-3.75px) rotate(-45deg); }

.mnav{
  position:fixed; inset:0; z-index:49;
  display:grid; align-content:center;
  padding:clamp(5rem,14vh,8rem) var(--pad) clamp(2rem,6vh,4rem);
  background:var(--soot);
  opacity:0; transform:translateY(-8px);
  transition:opacity .38s ease, transform .38s cubic-bezier(.2,.9,.2,1);
}
.mnav[hidden]{ display:none; }
.mnav.is-open{ opacity:1; transform:none; }
.mnav::before{           /* the same stitched seam that divides the page */
  content:""; position:absolute; left:0; right:0; top:calc(4.2rem + 1px); height:14px;
  background-image:var(--stitch); background-repeat:repeat-x;
}
.mnav__list{ list-style:none; margin:0 0 clamp(2rem,6vh,3rem); padding:0; display:grid; gap:.2rem; }
.mnav__list a{
  display:block; padding:.3em 0;
  text-decoration:none;
  font-family:var(--display);
  font-variation-settings:"SOFT" 95,"WONK" 1,"opsz" 90;
  font-weight:400; font-size:clamp(2.2rem,1.2rem + 6vw,3.4rem);
  line-height:1.05; letter-spacing:-.03em;
  color:var(--bone);
}
.mnav__list a:hover, .mnav__list a[aria-current]{ color:var(--gold); }
.mnav__cta{ justify-self:start; }
body.nav-open{ overflow:hidden; }

/* ── the trellis spine ───────────────────────────── */
.spine{
  position:fixed; z-index:1; pointer-events:none;
  left:calc(var(--pad) * .28); top:0;
  width:clamp(48px,5vw,86px); height:100vh;
  overflow:visible;
  opacity:.85;
}

/* ── hero ────────────────────────────────────────── */
.hero{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
  min-height:100svh;
  padding:clamp(7rem,14vh,11rem) var(--pad) clamp(4rem,9vh,7rem);
  max-width:var(--maxw); margin:0 auto;
}
/* The rack the pairs hang on, bled past the hero's own max-width, then
   drowned in black so the type keeps the contrast it was drawn for. */
.hero__bg{
  position:absolute; z-index:0;
  top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw);
  display:block; pointer-events:none;
}
.hero__bg img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 42%;
  filter:saturate(.86) contrast(1.04);
}
.hero__veil{
  position:absolute; z-index:1; pointer-events:none;
  top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw);
  background:
    linear-gradient(180deg,
      rgba(8,7,5,.94) 0%,
      rgba(8,7,5,.66) 26%,
      rgba(8,7,5,.72) 62%,
      var(--soot) 100%),
    radial-gradient(96% 78% at 24% 52%, rgba(8,7,5,.90) 0%, rgba(8,7,5,.30) 62%, transparent 100%);
}
/* One column, so the type is over the middle of the photograph, not beside
   it — the side-weighted wash would black the whole thing out. */
@media (max-width:720px){
  .hero__veil{
    background:linear-gradient(180deg,
      rgba(8,7,5,.90) 0%,
      rgba(8,7,5,.54) 30%,
      rgba(8,7,5,.78) 68%,
      var(--soot) 100%);
  }
}
.hero__type, .hero__stage, .hero__scroll{ position:relative; z-index:2; }

.hero__h{
  margin:0 0 1.6rem;
  font-family:var(--display);
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;
  font-weight:300;
  font-size:clamp(3.6rem,1.1rem + 11.4vw,11.5rem);
  line-height:.82;
  letter-spacing:-.035em;
}
.hero__h .ln{ display:block; overflow:hidden; }
.hero__h .w{ display:block; }
.hero__earth{
  font-style:italic;
  font-weight:500;
  color:var(--gold);
  padding-left:.09em;
}
.hero__lede{
  max-width:46ch;
  margin:0 0 2.2rem;
  color:var(--bone-dim);
  font-size:clamp(1rem,.92rem + .35vw,1.2rem);
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:.8rem; }

.hero__stage{
  position:relative;
  display:grid; justify-items:center; align-items:start;
  min-height:clamp(380px,62vh,760px);
}
.helix{
  position:absolute; inset:0; margin:auto;
  width:100%; height:100%;
  overflow:visible;
}
/* Hung from the top of the stage, where the vine's own strand starts
   (dead centre at y=0 in its viewBox) — so the string closes onto the
   vine instead of dangling loose in the middle of the hero. */
.tag{
  position:relative; z-index:3;
  margin:clamp(44px,8vh,84px) 0 0;
  width:clamp(148px,17vw,246px);
  transform-origin:50% -22%;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.72));
}
/* The tag is a black card on a black page — it needs an edge to be an object. */
.tag img{
  border-radius:5px;
  border:1px solid color-mix(in oklab, var(--gold) 26%, transparent);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
}
.tag::before{ /* jute string */
  content:"";
  position:absolute; left:50%; bottom:100%;
  width:1.5px; height:clamp(36px,7vh,74px);
  background:linear-gradient(to bottom, transparent, #b9a887);
  transform:translateX(-50%);
}

.hero__scroll{
  grid-column:1 / -1;
  margin:clamp(1.5rem,4vh,3rem) 0 0;
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--bone-dim);
}
.hero__scroll span{ position:relative; padding-left:2.6rem; }
.hero__scroll span::before{
  content:""; position:absolute; left:0; top:50%;
  width:2rem; height:1px; background:var(--gold-deep);
  animation:crawl 2.6s ease-in-out infinite;
}
@keyframes crawl{ 0%,100%{ transform:scaleX(.35); transform-origin:left; } 50%{ transform:scaleX(1); transform-origin:left; } }

/* ── ticker ──────────────────────────────────────── */
.ticker{
  position:relative; z-index:2;
  overflow:hidden;
  padding:clamp(.7rem,1.6vh,1.2rem) 0;
  background:var(--soot-2);
}
.ticker__row{
  display:flex; align-items:center; gap:clamp(1.6rem,4vw,3.4rem);
  width:max-content;
  will-change:transform;
}
.ticker__row span{
  font-family:var(--display);
  font-variation-settings:"SOFT" 80,"WONK" 1;
  font-weight:400; font-style:italic;
  font-size:clamp(1.3rem,.9rem + 1.9vw,3rem);
  color:var(--bone);
  white-space:nowrap;
}
.tick-i{ flex:0 0 auto; width:clamp(20px,2.4vw,34px); height:clamp(20px,2.4vw,34px); color:var(--gold); }

/* ── the story, told before anything is sold ─────── */
.tale{ position:relative; z-index:2; padding:clamp(4rem,10vh,8rem) 0 clamp(2rem,5vh,4rem); }
.tale__lede{ margin:1.4rem 0 0; max-width:46ch; color:var(--bone-dim); font-size:clamp(1rem,.94rem + .3vw,1.15rem); }

.beats{
  list-style:none;
  max-width:var(--maxw); margin:clamp(3rem,8vh,6rem) auto 0; padding:0 var(--pad);
  display:grid; gap:clamp(3rem,9vh,7rem);
}
.beat{
  display:grid; grid-template-columns:minmax(0,26%) minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem); align-items:start;
}
/* the stage name is the structure: grown, cut, dyed, printed, sewn */
.beat__k{
  margin:0;
  font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
  padding-top:.7rem;
  border-top:1px solid var(--gold-deep);
}
.beat__body{ max-width:56ch; }
.beat__body h3{
  margin:0 0 1rem;
  font-family:var(--display);
  font-variation-settings:"SOFT" 95,"WONK" 1,"opsz" 120;
  font-weight:400;
  font-size:clamp(1.9rem,1.1rem + 3vw,4.2rem);
  line-height:.94; letter-spacing:-.032em;
}
.beat__body p{ margin:0 0 1rem; color:var(--bone-dim); font-size:clamp(1rem,.94rem + .25vw,1.1rem); }
.beat__body p:last-child{ margin-bottom:0; }
/* alternate sides so the eye zig-zags down the process */
.beat--flip{ grid-template-columns:minmax(0,1fr) minmax(0,26%); }
.beat--flip .beat__k{ grid-column:2; grid-row:1; }
.beat--flip .beat__body{ grid-column:1; grid-row:1; justify-self:end; }

.beat--art{ grid-template-columns:1fr; }
.beat__shot{ margin:0; }
.beat__shot img{
  width:100%; max-height:min(70vh,680px); object-fit:cover;
  border:1px solid color-mix(in oklab, var(--gold) 22%, transparent);
}
.beat__shot figcaption{
  margin-top:.9rem; max-width:56ch;
  font-size:.86rem; color:var(--bone-dim);
}
.beat__shot figcaption strong{ color:var(--bone); font-weight:600; }

/* ── six vats ──────────────────────────────────────
   Rows and columns, same order as the printed catalogue: one column on
   a phone (nothing to arrange there), two on a tablet, three on desktop. */
.vats{ position:relative; z-index:2; }
.vats__pin{
  display:flex; flex-direction:column;
  padding:clamp(4rem,9vh,7rem) 0 clamp(2rem,5vh,4rem);
}
.vats__head{
  padding:0 var(--pad); max-width:var(--maxw); margin:0 auto; width:100%;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1.5rem;
}
.vats__head .sec-h{ font-size:clamp(2.3rem,1.2rem + 4.2vw,5rem); }
.vats__note{
  margin:0 0 .4rem; max-width:30ch; text-align:right;
  color:var(--bone-dim); font-size:.88rem;
}
.rail{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.6rem,6vh,3.6rem) clamp(1.6rem,3vw,3rem);
  padding:clamp(1.4rem,3.4vh,2.8rem) var(--pad);
  max-width:var(--maxw); margin:0 auto; width:100%;
}
@media (min-width:721px){
  .rail{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1025px){
  .rail{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.vat{
  display:grid;
  gap:1.1rem;
  align-content:start;
}
/* The 3:4 box is wider than the widest cut we sell (Monsoon Fern, 0.79), so
   nothing is ever clamped by width and short on height: all nine hang at
   the same scale, whatever their own width. */
.vat__img{ aspect-ratio:3 / 4; }
.vat__img img{
  width:100%; height:100%;
  object-fit:contain; object-position:50% 100%;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55)) saturate(1.04);
  transition:transform 1.1s cubic-bezier(.16,.84,.3,1);
}
.vat:hover .vat__img img{ transform:scale(1.02); }
.vat__meta{ align-self:start; }
.vat__idx{
  margin:0 0 .4rem;
  font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
}
.vat__name{
  margin:0 0 1.1rem;
  font-family:var(--display);
  font-variation-settings:"SOFT" 90,"WONK" 1,"opsz" 100;
  font-weight:400;
  font-size:clamp(1.8rem,1.1rem + 2.1vw,3.1rem);
  line-height:.9; letter-spacing:-.03em;
}
.spec{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.35rem 1.1rem; }
.spec dt{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); padding-top:.28rem; white-space:nowrap;
}
.spec dd{ margin:0; font-size:.92rem; color:var(--bone-dim); }
.vat__price{
  margin:1.3rem 0 0;
  font-family:var(--display);
  font-variation-settings:"SOFT" 70,"WONK" 1,"opsz" 60;
  font-weight:500; font-size:clamp(1.5rem,1.1rem + 1.1vw,2.1rem);
  line-height:1; color:var(--gold);
}
.vat__price span{
  font-family:var(--body); font-weight:600;
  font-size:.6em; letter-spacing:.16em; color:var(--bone-dim);
  margin-left:.35em;
}

/* ── volume two ──────────────────────────────────────
   Seventeen pairs in three families. The rail was right for nine; this
   many only reads as a grid, so they hang in rows instead. */
.vol2{
  position:relative; z-index:2;
  padding:clamp(4rem,10vh,8rem) 0 clamp(2rem,6vh,5rem);
}
.vol2__note{ margin:1.4rem 0 0; max-width:52ch; color:var(--bone-dim); font-size:clamp(1rem,.94rem + .3vw,1.12rem); }

.fams{
  max-width:var(--maxw); margin:clamp(2.5rem,7vh,5rem) auto 0; padding:0 var(--pad);
  display:grid; gap:clamp(3rem,8vh,6rem);
}
.fam__head{
  display:grid; gap:.35rem;
  padding-top:1rem;
  border-top:1px solid var(--gold-deep);
  margin-bottom:clamp(1.4rem,3.4vh,2.4rem);
}
.fam__ref{
  margin:0;
  font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
}
.fam__name{
  margin:0;
  font-family:var(--display);
  font-variation-settings:"SOFT" 95,"WONK" 1,"opsz" 120;
  font-weight:400;
  font-size:clamp(1.8rem,1.1rem + 2.6vw,3.4rem);
  line-height:.98; letter-spacing:-.03em;
}
.fam__note{ margin:.4rem 0 0; max-width:56ch; color:var(--bone-dim); font-size:.95rem; }

/* Fixed counts rather than auto-fill: five and six divide into two and three
   without leaving one pair stranded on a row of its own. */
.crops{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.2vw,2.2rem);
}
@media (min-width:560px){
  .crops{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* Wide enough and a family hangs as one rail, the whole family at once.
   Six tracks for every family, not one track per pair: sized by count, the
   five-pair family drew its garments 23% larger than the six-pair ones. The
   short row just leaves its last track empty. */
@media (min-width:1180px){
  .crops{ grid-template-columns:repeat(6,minmax(0,1fr)); }
}
.crop{
  display:grid; gap:.2rem;
  align-content:start;
  padding-bottom:.4rem;
}
/* They all hang off one line, like the rack in the hero. The 3:4 box is
   wider than the widest cut in this volume (0.73), so every garment is
   limited by height, never by width — one scale across all seventeen. */
.crop__img{
  aspect-ratio:3 / 4;
  margin-bottom:1rem;
}
.crop__img img{
  width:100%; height:100%;
  object-fit:contain; object-position:50% 100%;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.55));
  transform:translateZ(0) scale(.98);
  transition:transform .8s cubic-bezier(.16,.84,.3,1);
}
.crop:hover .crop__img img{ transform:translateZ(0) scale(1.03); }
.crop__ref{
  margin:0;
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.crop__name{
  margin:.15rem 0 .35rem;
  font-family:var(--display);
  font-variation-settings:"SOFT" 90,"WONK" 1,"opsz" 90;
  font-weight:400; font-size:1.35rem; line-height:1.05; letter-spacing:-.02em;
  color:var(--bone);
}
.crop__price{
  margin:0 0 .8rem;
  font-size:.95rem; letter-spacing:.05em; color:var(--bone);
}
.crop__price span{ font-size:.66em; letter-spacing:.16em; color:var(--bone-dim); margin-left:.35em; }
.btn--sm{ padding:.7em 1.2em; font-size:.7rem; justify-self:start; }

/* [hidden] loses to the button's own display, and the empty bag was
   showing "0 in your order" on every first visit. */
.bagbtn[hidden]{ display:none; }

/* ── the block drawer ────────────────────────────────
   Ten carved blocks lying in a tray. Lift one to print it. */
.drawer{
  position:relative; z-index:2;
  padding:clamp(4.5rem,11vh,9rem) 0;
}
.drawer__note{ margin:1.2rem 0 0; max-width:42ch; color:var(--bone-dim); font-size:.95rem; }

.tray{
  list-style:none;
  max-width:min(1000px, 100%); margin:clamp(2.4rem,6vh,4.4rem) auto 0;
  padding:clamp(1.4rem,3vw,2.4rem) var(--pad);
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.8rem);
}
.tray li{ margin:0; }

.block{
  appearance:none; border:0; cursor:pointer; padding:0;
  background:none; font:inherit; color:inherit;
  display:grid; justify-items:center; gap:.7rem;
  width:100%;
}
/* every block sits a little differently, the way they land on a bench */
.tray li:nth-child(3n)   .block__face{ transform:rotate(-2.5deg); }
.tray li:nth-child(3n+1) .block__face{ transform:rotate(1.8deg); }
.tray li:nth-child(4n)   .block__face{ transform:rotate(3deg); }

.block__face{
  width:100%; aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:3px;
  background:
    linear-gradient(150deg, #5C4830 0%, #43341F 46%, #2C2114 100%);
  box-shadow:
    inset 0 1px 0 rgba(240,205,140,.4),
    inset 0 -3px 8px rgba(0,0,0,.55),
    0 12px 22px rgba(0,0,0,.5);
  transition:transform .45s cubic-bezier(.2,.9,.2,1), box-shadow .45s;
}
.block__cut{
  width:58%; height:58%;
  color:#F5E9CC;
  /* cut into the wood rather than sitting on it */
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.85)) drop-shadow(0 -1px 0 rgba(255,225,170,.18));
  transition:color .45s;
}
.block__tag{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim); text-align:center; line-height:1.35;
  transition:color .4s;
}
.block:hover .block__face,
.block:focus-visible .block__face{
  transform:translateY(-8px) rotate(0deg);
  box-shadow:
    inset 0 1px 0 rgba(212,175,90,.4),
    inset 0 -2px 6px rgba(0,0,0,.6),
    0 22px 34px rgba(0,0,0,.62);
}
.block:hover .block__cut,
.block:focus-visible .block__cut{ color:var(--gold); }
.block:hover .block__tag,
.block:focus-visible .block__tag{ color:var(--bone); }
.block:active .block__face{ transform:translateY(2px) scale(.97); }

/* ── the press sheet (dialog) ────────────────────── */
.press, .bag{
  padding:0; border:0; background:transparent;
  max-width:min(1080px,94vw); width:100%;
  color:var(--bone);
}
.press::backdrop, .bag::backdrop{ background:rgba(8,7,5,.82); backdrop-filter:blur(4px); }

.press__inner{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.6rem);
  background:var(--soot-2);
  border:1px solid color-mix(in oklab, var(--gold) 26%, transparent);
  padding:clamp(1.4rem,3vw,2.6rem);
}
.press__x{
  position:absolute; top:.5rem; right:.7rem; z-index:3;
  appearance:none; border:0; background:none; cursor:pointer;
  font-size:2rem; line-height:1; color:var(--bone-dim);
  padding:.2em .35em;
}
.press__x:hover{ color:var(--gold); }

/* the impression, on cotton paper */
.press__sheet{
  display:grid; place-items:center;
  aspect-ratio:1;
  background:
    radial-gradient(120% 120% at 30% 20%, #F2EADA 0%, #E2D7C0 70%, #D3C6AC 100%);
  box-shadow:inset 0 0 60px rgba(120,100,70,.28);
}
.press__ink{
  width:66%; height:66%;
  color:#17130D;
  opacity:.92;
  filter:blur(.15px);
}
.press__side{ align-self:center; }
.press__kind{
  margin:0 0 .5rem;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}
.press__name{
  margin:0 0 1rem;
  font-family:var(--display);
  font-variation-settings:"SOFT" 90,"WONK" 1,"opsz" 90;
  font-weight:400; line-height:.95; letter-spacing:-.03em;
  font-size:clamp(1.9rem,1.2rem + 2.2vw,3.2rem);
}
.press__say{ margin:0 0 1.6rem; color:var(--bone-dim); font-size:.98rem; }
.press__on-label{
  margin:0 0 .3rem;
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep);
}
.press__on{ margin:0 0 1.8rem; font-size:.9rem; }
.press__nav{ display:flex; gap:.6rem; flex-wrap:wrap; }
.press__nav button{
  appearance:none; cursor:pointer;
  background:transparent; color:var(--gold);
  border:1px solid var(--gold-deep); border-radius:999px;
  padding:.55em 1.1em;
  font:inherit; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  transition:background .3s, color .3s;
}
.press__nav button:hover{ background:var(--gold); color:var(--soot); }

/* ── the order bag ───────────────────────────────── */
.btn--add{
  margin-top:1.4rem;
  font-size:.72rem; padding:.8em 1.4em;
  background:transparent; color:var(--gold);
}
.btn--add:hover{ background:var(--gold); color:var(--soot); }
.btn--add.is-in{ background:var(--leaf); border-color:var(--leaf); color:var(--bone); }
.btn--add.just-added{ animation:pop .45s cubic-bezier(.2,.9,.2,1); }
@keyframes pop{ 0%{ transform:scale(.9); } 60%{ transform:scale(1.06); } 100%{ transform:scale(1); } }

.bagbtn{
  position:fixed; z-index:55; right:clamp(1rem,3vw,2.2rem); bottom:clamp(1rem,3vw,2.2rem);
  appearance:none; cursor:pointer;
  display:flex; align-items:center; gap:.6rem;
  padding:.85em 1.4em;
  background:var(--gold); color:var(--soot);
  border:1px solid var(--gold); border-radius:999px;
  font:inherit; font-size:.76rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 16px 34px rgba(0,0,0,.5);
  transition:transform .35s cubic-bezier(.2,.9,.2,1);
}
.bagbtn:hover{ transform:translateY(-3px); }
.bagbtn__n{
  display:grid; place-items:center;
  width:1.7em; height:1.7em; border-radius:50%;
  background:var(--soot); color:var(--gold);
}

.bag{ max-width:min(620px,94vw); }
.bag__inner{
  background:var(--soot-2);
  border:1px solid color-mix(in oklab, var(--gold) 26%, transparent);
  padding:clamp(1.3rem,3vw,2.2rem);
}
.bag__head{ position:relative; display:flex; align-items:center; margin-bottom:1.2rem; }
.bag__head h2{
  margin:0;
  font-family:var(--display);
  font-variation-settings:"SOFT" 90,"WONK" 1,"opsz" 60;
  font-weight:400; font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem); letter-spacing:-.02em;
}
.bag__list{ list-style:none; margin:0 0 1.2rem; padding:0; display:grid; gap:.6rem; }
.bag__empty{ color:var(--bone-dim); font-size:.92rem; padding:.8rem 0; }
.bag__line{
  display:grid; grid-template-columns:56px 1fr auto auto; align-items:center; gap:.8rem;
  padding:.6rem; border:1px solid color-mix(in oklab, var(--gold) 16%, transparent);
}
.bag__line img{ width:56px; height:66px; object-fit:contain; }
.bag__meta{ min-width:0; }
.bag__name{ margin:0; font-weight:600; font-size:.94rem; }
.bag__cut{ margin:0; font-size:.72rem; color:var(--bone-dim); }
.bag__price{ margin:0; font-weight:600; font-size:.94rem; color:var(--gold); white-space:nowrap; }
.bag__total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:0 0 1.2rem; padding-top:1rem;
  border-top:1px solid color-mix(in oklab, var(--gold) 24%, transparent);
}
.bag__total span{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-dim); }
.bag__total strong{
  font-family:var(--display);
  font-variation-settings:"SOFT" 70,"WONK" 1,"opsz" 60;
  font-weight:500; font-size:clamp(1.4rem,1.1rem + 1vw,2rem); color:var(--gold);
}
.bag__drop{
  appearance:none; border:0; background:none; cursor:pointer;
  color:var(--bone-dim); font:inherit; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.bag__drop:hover{ color:#D97757; }
.bag__notewrap{ display:grid; gap:.4rem; margin-bottom:1.2rem; }
.bag__notewrap span{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.bag__notewrap textarea{
  background:var(--soot); color:var(--bone);
  border:1px solid var(--gold-deep); border-radius:4px;
  padding:.7em .8em; font:inherit; font-size:.92rem; resize:vertical;
}
.bag__send{ width:100%; justify-content:center; }
.bag__send:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.bag__fine{ margin:.9rem 0 0; font-size:.74rem; line-height:1.5; color:var(--bone-dim); }

.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── by hand ─────────────────────────────────────── */
.hands{
  position:relative; z-index:2;
  padding:clamp(4.5rem,11vh,9rem) 0;
}
.steps{
  list-style:none;
  max-width:var(--maxw); margin:clamp(2.4rem,6vh,4rem) auto 0;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:clamp(1.6rem,3vw,2.8rem);
}
.step{ position:relative; padding-top:1.4rem; border-top:1px solid var(--gold-deep); }
.step__n{
  display:block; margin-bottom:.7rem;
  font-family:var(--display);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 40;
  font-size:1.5rem; color:var(--gold);
}
.step h3{
  margin:0 0 .5rem;
  font-family:var(--display);
  font-variation-settings:"SOFT" 80,"WONK" 1,"opsz" 60;
  font-weight:500; font-size:1.28rem; line-height:1.1; letter-spacing:-.015em;
}
.step p{ margin:0; font-size:.92rem; color:var(--bone-dim); }

.hands__tag{
  max-width:var(--maxw); margin:clamp(3rem,7vh,5rem) auto 0;
  padding:0 var(--pad);
  display:grid; grid-template-columns:auto 1fr; align-items:end; gap:clamp(1.2rem,3vw,2.6rem);
}
.hands__tag img{
  width:clamp(190px,22vw,320px);
  border-radius:5px;
  border:1px solid color-mix(in oklab, var(--gold) 26%, transparent);
  box-shadow:0 22px 44px rgba(0,0,0,.6);
}
.hands__tag figcaption{
  font-family:var(--display); font-style:italic;
  font-variation-settings:"SOFT" 90,"WONK" 1;
  font-size:clamp(1.1rem,.9rem + 1vw,2rem);
  color:var(--gold);
  padding-bottom:.5rem;
}

/* ── close ───────────────────────────────────────── */
.close{
  position:relative; z-index:2;
  text-align:center;
  padding:clamp(5rem,13vh,10rem) var(--pad);
  display:grid; justify-items:center; gap:1.4rem;
}
.close__emblem{ width:clamp(64px,8vw,110px); height:clamp(64px,8vw,110px); color:var(--gold); }
.close__h{
  margin:0;
  font-family:var(--display);
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;
  font-weight:300;
  font-size:clamp(2.5rem,1.2rem + 5.6vw,6.4rem);
  line-height:.92; letter-spacing:-.03em;
}
.close__p{ max-width:44ch; margin:0; color:var(--bone-dim); }
.close__acts{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:.6rem; }

/* ── footer ──────────────────────────────────────── */
.foot{
  position:relative; z-index:2;
  border-top:1px solid color-mix(in oklab, var(--gold) 22%, transparent);
  background:var(--soot);
  padding:clamp(2.6rem,6vh,4.4rem) var(--pad) clamp(1.6rem,4vh,2.6rem);
  display:grid; gap:clamp(1.8rem,4vw,3rem);
  max-width:var(--maxw); margin:0 auto;
}
.foot__mark img{ width:clamp(150px,17vw,240px); height:auto; }
.foot__cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:clamp(1.4rem,3vw,2.6rem);
}
.foot__cols h4{
  margin:0 0 .5rem;
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
  font-weight:600;
}
.foot__cols p{ margin:0; font-size:.9rem; color:var(--bone-dim); line-height:1.55; }
.foot__cols a{ text-decoration:none; border-bottom:1px solid var(--gold-deep); }
.foot__cols a:hover{ color:var(--gold); }
.foot__line{
  margin:0; padding-top:1.4rem;
  border-top:1px solid color-mix(in oklab, var(--gold) 14%, transparent);
  font-family:var(--display); font-style:italic;
  font-variation-settings:"SOFT" 90,"WONK" 1;
  font-size:.95rem; color:var(--bone-dim);
}

/* ══ the reading pages ═════════════════════════════ */
.page__main{ position:relative; z-index:2; padding-top:clamp(4.5rem,9vh,7rem); }

.root{
  position:fixed; z-index:1; pointer-events:none;
  left:calc(var(--pad) * .3); top:0;
  width:clamp(48px,5vw,84px); height:100vh;
  overflow:visible; opacity:.8;
}

.phead{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(3rem,9vh,7rem) var(--pad) clamp(2.5rem,7vh,5rem);
}
.phead--deep{ padding-bottom:clamp(4rem,12vh,9rem); }
.phead__h{
  margin:0 0 1.6rem;
  font-family:var(--display);
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;
  font-weight:300;
  font-size:clamp(3rem,1.3rem + 8.4vw,9rem);
  line-height:.85; letter-spacing:-.035em;
}
.phead__lede{ max-width:52ch; margin:0; color:var(--bone-dim); font-size:clamp(1rem,.92rem + .35vw,1.2rem); }
.phead__cue{
  margin:clamp(2rem,5vh,3.5rem) 0 0;
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}

/* ── care: the label ─────────────────────────────── */
.label{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(3rem,8vh,6rem) var(--pad);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem); align-items:center;
}
.label__card{
  background:var(--soot-2);
  border:1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  border-radius:4px;
  padding:clamp(1.6rem,3vw,2.8rem);
  text-align:center;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.label__brand{
  margin:0 0 .4rem;
  font-size:.8rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
}
.label__fibre{
  margin:0 0 1.6rem; padding-bottom:1.4rem;
  border-bottom:1px solid color-mix(in oklab, var(--gold) 24%, transparent);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim);
}
.label__syms{
  list-style:none; margin:0 0 1.6rem; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:1.2rem .6rem;
}
.label__syms li{ display:grid; justify-items:center; gap:.55rem; }
.label__syms svg{ width:clamp(38px,4vw,52px); height:clamp(38px,4vw,52px); color:var(--bone); }
.label__syms span{ font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); line-height:1.35; }
.label__line{
  margin:0; padding-top:1.4rem;
  border-top:1px solid color-mix(in oklab, var(--gold) 24%, transparent);
  font-family:var(--display); font-style:italic;
  font-variation-settings:"SOFT" 90,"WONK" 1;
  color:var(--gold); font-size:1rem;
}
.label__side p{ margin:1.2rem 0 0; max-width:34ch; color:var(--bone-dim); }

/* ── care: the rules ─────────────────────────────── */
.rules{ padding:clamp(3rem,8vh,6rem) 0; }
.rulelist{
  list-style:none; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; gap:0;
}
.rule{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.2rem,3vw,3rem);
  padding:clamp(1.6rem,3.4vh,2.6rem) 0;
  border-top:1px solid color-mix(in oklab, var(--gold) 20%, transparent);
}
.rule:last-child{ border-bottom:1px solid color-mix(in oklab, var(--gold) 20%, transparent); }
.rule__n{
  margin:0; min-width:2.2ch;
  font-family:var(--display);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 60;
  font-size:clamp(1.6rem,1rem + 1.8vw,2.6rem); line-height:1; color:var(--gold);
}
.rule h3{
  margin:0 0 .6rem;
  font-family:var(--display);
  font-variation-settings:"SOFT" 80,"WONK" 1,"opsz" 60;
  font-weight:500; font-size:clamp(1.3rem,1rem + 1.1vw,2rem);
  line-height:1.05; letter-spacing:-.02em;
}
.rule p{ margin:0 0 .8rem; max-width:62ch; color:var(--bone-dim); font-size:.98rem; }
.rule p:last-child{ margin-bottom:0; }

.fade{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(3.5rem,9vh,7rem) var(--pad);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.6rem,4vw,4rem); align-items:center;
}
.fade__type p{ margin:0 0 1.1rem; max-width:50ch; color:var(--bone-dim); }
.fade__type .btn{ margin-top:.8rem; }
.fade__shot{ margin:0; }
.fade__shot img{ width:100%; filter:drop-shadow(0 26px 44px rgba(0,0,0,.55)); }
.fade__shot figcaption{
  margin-top:1rem;
  font-size:.76rem; letter-spacing:.06em; color:var(--bone-dim); text-align:center;
}

/* ── origin: the story ───────────────────────────── */
.chapter{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(2.6rem,7vh,5.5rem) var(--pad);
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.2rem,3.5vw,3.5rem);
  align-items:start;
}
.chapter--flip .chapter__body{ margin-left:auto; }
.chapter__n{
  margin:0;
  font-family:var(--display);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144;
  font-weight:300;
  font-size:clamp(2.6rem,1.4rem + 4.4vw,6rem);
  line-height:.8; letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px var(--gold-deep);
}
.chapter__body{ max-width:60ch; }
.chapter__body h2{
  margin:0 0 1rem;
  font-family:var(--display);
  font-variation-settings:"SOFT" 90,"WONK" 1,"opsz" 90;
  font-weight:400; font-size:clamp(1.7rem,1.1rem + 2.2vw,3.2rem);
  line-height:.98; letter-spacing:-.028em;
}
.chapter__body p{ margin:0 0 1rem; color:var(--bone-dim); }
.chapter__body p:last-child{ margin-bottom:0; }
.chapter__shot{ grid-column:2; margin:1.6rem 0 0; }
.chapter__shot img{
  width:clamp(180px,24vw,300px);
  border-radius:4px;
  border:1px solid color-mix(in oklab, var(--gold) 26%, transparent);
  box-shadow:0 24px 44px rgba(0,0,0,.55);
}
.inline-link{
  color:var(--gold); text-decoration:none;
  border-bottom:1px solid var(--gold-deep);
  font-size:.9rem; letter-spacing:.04em;
}
.inline-link:hover{ border-bottom-color:var(--gold); }

.band{
  margin:clamp(1.5rem,4vh,3rem) 0;
  padding:0 var(--pad);
  max-width:var(--maxw); margin-inline:auto;
}
.band img{
  width:100%; max-height:min(76vh,760px); object-fit:cover;
  border:1px solid color-mix(in oklab, var(--gold) 22%, transparent);
}
.band figcaption{
  margin-top:.9rem;
  font-size:.86rem; color:var(--bone-dim); max-width:56ch;
}
.band figcaption strong{ color:var(--bone); font-weight:600; }

/* ── weight, on machines that feel it ────────────────
   Touch devices (phones, and iPads especially) paint the full-screen
   blend and every drop-shadow again on each scroll frame. None of it is
   load-bearing, so it comes off there and the scroll stays at 60fps. */
@media (hover:none), (pointer:coarse){
  .grain{ display:none; }
  /* The patches stay — they are the brand, not decoration. What comes off
     is the blend: a fixed, full-viewport mix-blend-mode layer forces the
     compositor to re-blend the whole screen on every scrolled frame, which
     is what made the iPad stutter. Plain alpha reads nearly the same. */
  .patches{ mix-blend-mode:normal; opacity:.16; }
  .vat__img img,
  .crop__img img,
  .tag{ filter:none; }
  .vat__img img{ transition:none; }
  .press::backdrop, .bag::backdrop{ backdrop-filter:none; background:rgba(8,7,5,.92); }
}

/* Five links, two language buttons and a CTA stop fitting well before the
   phone breakpoint — hand the whole lot to the drawer earlier. */
@media (max-width:900px){
  .topbar__nav, .topbar__cta{ display:none; }
  .burger{ display:grid; }
  .langs{ margin-left:auto; }
}

/* ── responsive ──────────────────────────────────── */
@media (max-width:1024px){
  .hero{ grid-template-columns:1fr; min-height:auto; }
  .hero__stage{ order:-1; min-height:clamp(300px,46vh,460px); }
  .spine{ display:none; }
  .hands__tag{ grid-template-columns:1fr; align-items:start; }
  .press__inner{ grid-template-columns:1fr; }
  .press__sheet{ aspect-ratio:16/10; }
  .root{ display:none; }
  .label, .fade{ grid-template-columns:1fr; }
  .chapter--flip .chapter__body{ margin-left:0; }
  .tray{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .beat{ grid-template-columns:minmax(0,22%) minmax(0,1fr); }
}
@media (max-width:720px){
  .topbar__nav{ display:none; }
  .topbar__cta{ display:none; }        /* it moves into the drawer */
  .langs{ margin-left:auto; }
  .burger{ display:grid; }
  .vats__note{ text-align:left; }
  .hero__stage{ min-height:320px; }
  .tray{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bag__line{ grid-template-columns:44px 1fr auto; grid-template-areas:"img meta price" "img drop drop"; }
  .bag__line img{ grid-area:img; width:44px; height:54px; }
  .bag__meta{ grid-area:meta; }
  .bag__price{ grid-area:price; }
  .bag__drop{ grid-area:drop; justify-self:start; padding-top:.3rem; }
  .beat{ grid-template-columns:1fr; gap:.9rem; }
  .beat--flip{ grid-template-columns:1fr; }
  .beat--flip .beat__k,
  .beat--flip .beat__body{ grid-column:1; grid-row:auto; justify-self:start; }
  .beat__k{ justify-self:start; padding-top:.6rem; }
  .chapter{ grid-template-columns:1fr; gap:.6rem; }
  .chapter__shot{ grid-column:1; }
  .rule{ grid-template-columns:1fr; gap:.4rem; }
}

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