/* ============================================================
   TRANCENT — Nuit & Laiton
   Single page. 8px spatial system. GPU-only motion.
   ============================================================ */

:root{
  --night:#0B1220;
  --slate:#16202F;
  --brass:#B08D57;
  --alabaster:#E8E4DC;
  --celadon:#7C8C7E;
  --smoke:#3A4654;

  /* Every card was painted --night: the same value as the page behind it.
     Nineteen rectangles separated from their ground by a single hairline,
     which reads as a stylesheet that has not finished loading rather than
     as objects sitting on a surface. Light has to come from somewhere. */
  --surface:#141D2C;
  --surface-2:#1A2434;
  --edge:rgba(var(--fg-rgb),.06);
  --edge-lit:rgba(var(--brass-rgb),.34);

  /* Colour is declared twice: once as a finished value, once as a bare triplet
     for the places that need it at an alpha. --bg and --fg are the pair that
     swap wholesale between the two themes, which is what lets one hairline
     rule read as light-on-dark here and dark-on-light there without a second
     declaration anywhere. */
  --bg-rgb:11,18,32;
  --fg-rgb:232,228,220;
  --brass-rgb:176,141,87;
  --rule-rgb:58,70,84;
  --slate-rgb:22,32,47;
  --celadon-rgb:124,140,126;

  /* The bar already carries 14px of its own padding under the label, which is
     most of the clearance a home indicator needs. Adding the whole inset on top
     left the label floating some fifty pixels off the edge with a band of empty
     bar beneath it. Absorb 12px of it, and keep one value so the bar and the
     space reserved for it in the body can never disagree. */
  --safe-b:max(0px, calc(env(safe-area-inset-bottom, 0px) - 12px));

  --wash:rgba(7,11,20,.55);
  --wash-solid:rgba(7,11,20,.72);
  --err:#C98A7A;
  --shadow:none;
  color-scheme:dark;

  --text:var(--alabaster);
  --muted:rgba(var(--fg-rgb),.80);
  --faint:rgba(var(--fg-rgb),.52);
  --rule:rgba(var(--rule-rgb),.72);
  --rule-soft:rgba(var(--rule-rgb),.42);

  --u:8px;
  --gut:clamp(20px, 5vw, 64px);
  --max:1400px;

  --serif:"Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:"IBM Plex Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* The mono sibling of the body face, so there is nothing to reconcile: it is
     the same superfamily, drawn to sit beside it. It carries READINGS only --
     a coordinate, a clock, a month on a scale, an index. Never a sentence and
     never a label that is a word: mono on prose turns an institutional page
     into a developer tool, which is the opposite of what this site is for. */
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --fast:140ms;
  --mid:260ms;
  --slow:300ms;
}


/* ============================================================
   ALBATRE & ENCRE  --  the same house by daylight
   Nuit & Laiton stays the default and the identity. This exists
   because the manufacturer reads the site on a mid-range phone in a
   workshop, often in daylight, where a dark ground is genuinely harder
   to read -- and because a buyer's procurement desk expects paper.
   Only tokens are redefined here. If a rule needs a second declaration
   to survive the swap, the rule is wrong, not the theme.
   ============================================================ */
:root[data-theme="light"]{
  color-scheme:light;

  /* Albatre is a stone, not a sheet of copier paper. The first pass put the
     ground at #EFECE4 -- brighter than the brand's own alabaster -- and ran
     the card ladder up to pure white, which read as a white app rather than
     as the same house by daylight. The ground now sits below --alabaster and
     the ladder never reaches #FFF: nothing on the page is pure white. */
  --night:#E2DCCE;      /* the ground is paper, and paper has a tone */
  --slate:#D6CFBE;      /* the plate a photograph sits on */
  --brass:#6F5229;      /* re-solved against the deepened ground: #B08D57 is
                           2.6:1 on paper, #8A6A3B 4.23, #7E5F33 4.30 here --
                           all short of 4.5 for the 11px uppercase this is
                           mostly used on. This measures 5.27 / 5.83. */
  --celadon:#4E6048;    /* 4.97 / 5.50; #55684F fell to 4.42 on this ground */
  --smoke:#968E80;

  --text:#141A24;
  --muted:rgba(20,26,36,.76);
  --faint:rgba(20,26,36,.68);   /* .54 measured 3.62:1, .64 fell to 4.63 here */
  --rule:rgba(134,125,108,.70);
  --rule-soft:rgba(134,125,108,.44);

  /* light still falls from above, so a card is lighter than its ground --
     the exact inverse of the dark theme, where it is lighter too. The
     ladder keeps its direction; only its footing moves. */
  --surface:#EBE7DB;
  --surface-2:#F2EFE6;
  --edge:rgba(20,26,36,.10);
  --edge-lit:rgba(111,82,41,.45);

  --bg-rgb:226,220,206;   /* must track --night exactly: 24 rules veil with it */
  --fg-rgb:20,26,36;
  --brass-rgb:111,82,41;
  --rule-rgb:134,125,108;
  --slate-rgb:214,207,190;
  --celadon-rgb:78,96,72;

  --wash:rgba(20,26,36,.05);
  --wash-solid:#DCD5C5;
  --err:#9B3B2A;
  /* paper needs a shadow to say a card is in front; night does it with value */
  --shadow:0 1px 2px rgba(20,26,36,.05), 0 8px 24px rgba(20,26,36,.05);
}
:root[data-theme="light"] .cell,
:root[data-theme="light"] .crit,
:root[data-theme="light"] .col,
:root[data-theme="light"] .wood,
:root[data-theme="light"] .base,
:root[data-theme="light"] .market,
:root[data-theme="light"] .gate a{ box-shadow:var(--shadow) }

/* The grain was tuned to sit on night; on paper the same opacity reads as
   dirt rather than tooth. */
:root[data-theme="light"] body::after{opacity:.02}

/* On night the primary door is a lit edge against a dark ground. On paper
   there is no glow to borrow, so it has to be an actual filled button. */
:root[data-theme="light"] .hero-cta{
  background:linear-gradient(180deg,rgba(var(--brass-rgb),.16),rgba(var(--brass-rgb),.09));
  border-color:rgba(var(--brass-rgb),.55);
  box-shadow:var(--shadow);
}
:root[data-theme="light"] .hero-cta:hover{
  background:linear-gradient(180deg,rgba(var(--brass-rgb),.26),rgba(var(--brass-rgb),.16));
  border-color:rgba(var(--brass-rgb),.8);
}

*,*::before,*::after{box-sizing:border-box}
h1,h2,h3,p,ul,figure,figcaption{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--night);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:300;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (min-width:900px){ body{font-size:18px} }

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:rgba(var(--brass-rgb),.28);color:var(--text)}

/* --- atmosphere ------------------------------------------------ */
body::before{ /* deep field + one restrained brass ember */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120vw 80vh at 12% -10%, rgba(var(--brass-rgb),.07), transparent 62%),
    radial-gradient(90vw 70vh at 92% 8%, rgba(var(--celadon-rgb),.05), transparent 60%),
    radial-gradient(100vw 100vh at 50% 120%, rgba(var(--slate-rgb),.9), transparent 70%);
}
/* The drafting grid, fixed to the viewport rather than to each band. Per band
   it restarted its phase at every top edge, so the majors never lined up and
   every seam between sections showed as a break in the ruling. Fixed, it is
   one continuous sheet the content slides over -- which is also what the frame
   and the readout already are. Drawn from --fg, so it inverts with the theme. */
#grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(var(--fg-rgb),.05) 0 1px,transparent 1px 320px),
    repeating-linear-gradient(0deg,rgba(var(--fg-rgb),.05) 0 1px,transparent 1px 320px),
    repeating-linear-gradient(90deg,rgba(var(--fg-rgb),.02) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,rgba(var(--fg-rgb),.02) 0 1px,transparent 1px 64px);
}
@media (max-width:899px){
  /* a 64px cell is six lines of noise behind a 390px column */
  #grid{background-image:
    repeating-linear-gradient(90deg,rgba(var(--fg-rgb),.04) 0 1px,transparent 1px 130px),
    repeating-linear-gradient(0deg,rgba(var(--fg-rgb),.04) 0 1px,transparent 1px 130px)}
}
@media (prefers-reduced-transparency:reduce){ #grid{opacity:.5} }
body::after{ /* grain */
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
#page{position:relative;z-index:2}

/* --- shared layout --------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
section{position:relative}
.band{position:relative;padding-block:calc(var(--u)*13)}
/* the globe belongs behind the opening; under a paragraph it is a texture, not a subject */
.band::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(var(--bg-rgb),.66);
}
/* Wide enough for the text to stop short of the right edge: protect the column,
   release the rest. Below this the text runs full-bleed and the flat veil above
   is the correct one -- do not let the gradient reach a phone. */
@media (min-width:1100px){
  .band::before{
    background:linear-gradient(96deg,
      rgba(var(--bg-rgb),.88) 0%,
      rgba(var(--bg-rgb),.84) 40%,
      rgba(var(--bg-rgb),.62) 62%,
      rgba(var(--bg-rgb),.24) 82%,
      rgba(var(--bg-rgb),.08) 100%);
  }
}
.gate-band::before{background:rgba(var(--bg-rgb),.5)}
@media (min-width:1100px){
  .gate-band::before{
    background:linear-gradient(96deg,
      rgba(var(--bg-rgb),.78) 0%,rgba(var(--bg-rgb),.70) 46%,
      rgba(var(--bg-rgb),.34) 74%,rgba(var(--bg-rgb),.06) 100%);
  }
}
@media (min-width:900px){ .band{padding-block:clamp(56px,6vw,100px)} }


/* One hairline along the top edge of every tile: the side the light falls on.
   Without it a surface is just a rectangle of paint; with it the tile sits in
   front of the page instead of being a hole cut out of it. */
.cell,.crit,.col,.wood,.base,.gate a{position:relative}
.cell::before,.crit::before,.col::before,.wood::before,.base::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--edge),rgba(var(--fg-rgb),.02));
  pointer-events:none;
}

.rule{height:1px;background:var(--rule-soft);border:0;margin:0}

.eyebrow{
  display:flex;align-items:baseline;gap:calc(var(--u)*2);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--faint);font-weight:400;
  margin:0 0 calc(var(--u)*5);
}
.eyebrow .idx{color:var(--brass);font-variant-numeric:tabular-nums}
.flag{ /* muted just enough to sit in the palette, still itself */
  width:17px;height:auto;flex:none;align-self:center;
  box-shadow:0 0 0 1px rgba(var(--fg-rgb),.12);
  filter:saturate(.82) brightness(.92);
}
.eyebrow::after{
  content:"";flex:1;height:1px;transform:translateY(-3px);
  background:linear-gradient(90deg,rgba(var(--brass-rgb),.42),var(--rule-soft) 22%,rgba(var(--rule-rgb),.12));
}

h1,h2,h3,.serif{font-family:var(--serif);font-weight:300;letter-spacing:-.012em}
h2,.band h1{
  font-size:clamp(1.75rem,4.6vw,3.55rem);
  line-height:1.07;margin:0 0 calc(var(--u)*4);
}
.sub{color:var(--muted);max-width:62ch;margin:0}
.brass{color:var(--brass)}

/* Vietnamese sits taller (stacked diacritics) */
html[lang="vi"] h1,html[lang="vi"] h2,html[lang="vi"] h3,html[lang="vi"] .serif{line-height:1.18}
html[lang="vi"] .display{line-height:1.1}
html[lang="vi"] .stat-figure{line-height:1.1}


/* --- the readings ------------------------------------------------- */
/* Everything below is a number being reported, not language. Kept to numerals
   and the few Latin marks around them, so the Vietnamese diacritics elsewhere
   never have to come out of a monospaced face. */
.readout,
.base .clock,
.s-m,
.eyebrow .idx{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"zero" 1;
}
.readout{letter-spacing:.06em}
.base .clock{letter-spacing:.02em}
.s-m{letter-spacing:0}
.eyebrow .idx{letter-spacing:.04em;font-size:10.5px}

/* --- header ----------------------------------------------------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,rgba(var(--brass-rgb),0),var(--brass));
}
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(var(--bg-rgb),.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--mid) var(--ease), background var(--mid) var(--ease);
}
header.stuck{border-bottom-color:var(--rule-soft);background:rgba(var(--bg-rgb),.88)}
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*3);
  height:64px;
}
@media (min-width:900px){ .bar{height:80px} }

.mark{
  display:flex;align-items:center;gap:10px;color:var(--text);
  transition:color var(--fast) var(--ease);
}
.mark:hover{color:var(--brass)}
.mark .glyphmark{width:15px;height:auto;fill:var(--brass);flex:none}
.mark .wordmark{height:9px;width:auto;fill:currentColor;flex:none}
@media (min-width:900px){
  .mark .glyphmark{width:18px}
  .mark .wordmark{height:11px}
}

nav.links{display:none;gap:calc(var(--u)*4);align-items:center}
@media (min-width:1080px){ nav.links{display:flex} }
nav.links a{
  position:relative;font-size:13px;letter-spacing:.06em;color:var(--muted);
  padding-block:4px;transition:color var(--fast) var(--ease);
}
nav.links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--fast) var(--ease);
}
nav.links a:hover{color:var(--text)}
nav.links a:hover::after{transform:scaleX(1)}

/* the nav forks: one door for the maker, one for the buyer */
.drop{position:relative;display:flex;align-items:center}
.drop-t{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;letter-spacing:.06em;color:var(--muted);
  padding-block:4px;transition:color var(--fast) var(--ease);
}
.drop-t i{
  width:4px;height:4px;flex:none;opacity:.55;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  transition:transform var(--fast) var(--ease),opacity var(--fast) var(--ease);
}
.drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
.drop-p{
  position:absolute;top:100%;left:calc(var(--u)*-2.5);margin-top:14px;min-width:250px;
  background:rgba(var(--bg-rgb),.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--rule);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease),
             visibility 0s linear var(--fast);
}
.drop:hover .drop-t,.drop:focus-within .drop-t,.drop.open .drop-t{color:var(--text)}
.drop:hover .drop-t i,.drop.open .drop-t i{opacity:1;transform:rotate(45deg) translateY(1px)}
.drop:hover .drop-p,.drop:focus-within .drop-p,.drop.open .drop-p{
  opacity:1;visibility:visible;transform:none;transition-delay:0s;
}
nav.links .drop-p a{
  display:flex;align-items:center;gap:calc(var(--u)*2);
  padding:calc(var(--u)*2) calc(var(--u)*2.5);color:var(--muted);
  border-bottom:1px solid var(--rule-soft);
}
.drop-p .d-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.drop-p .flag{width:19px;opacity:.72;transition:opacity var(--fast) var(--ease),filter var(--fast) var(--ease)}
nav.links .drop-p a:hover .flag{opacity:1;filter:saturate(.95) brightness(1)}
.menu nav a .flag{width:20px;margin-right:calc(var(--u)*.5);opacity:.75}
nav.links .drop-p a:last-child{border-bottom:0}
nav.links .drop-p a::after{display:none}
nav.links .drop-p a:hover{background:rgba(var(--brass-rgb),.07);color:var(--text)}
.drop-p .d-n{font-family:var(--serif);font-weight:300;font-size:17px;line-height:1.1;color:var(--text)}
.drop-p .d-k{font-size:11px;letter-spacing:.04em;color:var(--faint)}
nav.links .drop-p a:hover .d-k{color:var(--brass);opacity:.9}
.band{scroll-margin-top:96px}

.bar-right{display:flex;align-items:center;gap:calc(var(--u)*3)}
.btn-contact{
  display:none;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--rule);padding:9px 15px;
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease),
             background var(--fast) var(--ease);
}
.btn-contact::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);
  opacity:.72;transition:opacity var(--fast) var(--ease);flex:none;
}
.btn-contact:hover{
  color:var(--text);border-color:rgba(var(--brass-rgb),.5);background:rgba(var(--brass-rgb),.07);
}
.btn-contact:hover::before{opacity:1}
@media (min-width:760px){ .btn-contact{display:inline-flex} }

.burger{
  display:none;position:relative;width:24px;height:22px;flex:none;
  color:var(--text);transition:color var(--fast) var(--ease);
}
@media (max-width:1079px){ .burger{display:block} }
.burger:hover{color:var(--brass)}
.burger i{
  position:absolute;left:1px;right:1px;height:1px;background:currentColor;
  transition:transform var(--mid) var(--ease);
}
.burger i:nth-child(1){top:8px}
.burger i:nth-child(2){top:14px}
.menu-open .burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.menu-open .burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:49;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--u)*13) var(--gut) calc(var(--u)*7);
  background:rgba(var(--bg-rgb),.95);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;
  transition:opacity var(--mid) var(--ease),visibility 0s linear var(--mid);
}
.menu-open .menu{opacity:1;visibility:visible;transition-delay:0s}
.menu nav{display:flex;flex-direction:column;border-top:1px solid var(--rule-soft)}
.menu nav a{
  display:flex;align-items:baseline;gap:calc(var(--u)*2.5);
  padding-block:calc(var(--u)*2.5);border-bottom:1px solid var(--rule-soft);
  font-family:var(--serif);font-weight:300;line-height:1.2;
  font-size:clamp(1.5rem,7.4vw,2.3rem);
  transition:color var(--fast) var(--ease);
}
.menu nav a:hover{color:var(--brass)}
.menu nav a{flex-wrap:wrap}
.menu nav a .i{flex-basis:100%;order:2;margin-top:2px;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;color:var(--brass);
  font-variant-numeric:tabular-nums;
}

/* the burger sheet folds the two markets away behind their own name,
   the way the bar does on a pointer */
.menu .m-drop-t{
  display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*2);
  width:100%;text-align:left;color:inherit;
  padding-block:calc(var(--u)*2.5);border-bottom:1px solid var(--rule-soft);
  font-family:var(--serif);font-weight:300;line-height:1.2;
  font-size:clamp(1.5rem,7.4vw,2.3rem);
  transition:color var(--fast) var(--ease);
}
.menu .m-drop.open .m-drop-t{color:var(--brass)}
.menu .m-drop-t i{
  width:8px;height:8px;flex:none;opacity:.5;margin-right:3px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-3px);
  transition:transform var(--mid) var(--ease),opacity var(--fast) var(--ease);
}
.menu .m-drop.open .m-drop-t i{opacity:1;transform:rotate(-135deg) translateY(2px)}
/* 0fr → 1fr expands to the content's own height, no magic number to outgrow */
.menu .m-drop-p{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--mid) var(--ease)}
.menu .m-drop.open .m-drop-p{grid-template-rows:1fr}
.menu .m-drop-p>div{overflow:hidden}
.menu .m-drop-p a{
  padding-left:calc(var(--u)*3);
  font-size:clamp(1.2rem,5.6vw,1.75rem);
}

/* The theme switch sits with the language flags: both are the same kind of
   control -- how you would rather read the page, not where you want to go.
   Half a disc, so it states the choice rather than the current state. */
.theme-t{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;color:var(--faint);flex:none;
  transition:color var(--fast) var(--ease),transform var(--mid) var(--ease);
}
.theme-t svg{width:17px;height:17px;display:block}
.theme-t:hover{color:var(--brass)}
/* How much ink the disc carries is the state: half for auto -- the page taking
   the device's word for it -- empty for light, full for dark. One mark, three
   readings, and no second glyph to learn. */
.theme-t .t-full{display:none}
:root[data-theme-pref="light"] .theme-t .t-half{display:none}
:root[data-theme-pref="dark"] .theme-t .t-half{display:none}
:root[data-theme-pref="dark"] .theme-t .t-full{display:block}
:root[data-theme-pref="auto"] .theme-t{color:var(--faint)}
:root[data-theme-pref="light"] .theme-t,
:root[data-theme-pref="dark"] .theme-t{color:var(--brass)}
.theme-t:hover{color:var(--brass)}
/* On a phone the bar leaves 24px between the wordmark and the first control.
   With the switch first, "TRANCENT" and a half disc read as one mark. The
   flags lead again -- as they did before the switch existed -- and the switch
   sits between them and the burger, away from the logo. */
@media (max-width:1079px){
  .lang{order:1}
  .theme-t{order:2}
  .burger{order:3}
}

.lang{display:flex;align-items:center;gap:calc(var(--u)*1.5)}
.lang button{position:relative;padding:4px 0;line-height:0}
.lang .flag{
  height:12px;width:auto;    /* aligned on height: the union flag is wider */
  opacity:.42;filter:saturate(.55) brightness(.85);
  transition:opacity var(--fast) var(--ease),filter var(--fast) var(--ease);
}
.lang button:hover .flag{opacity:.8;filter:saturate(.8) brightness(.95)}
.lang button[aria-current="true"] .flag{opacity:1;filter:saturate(.9) brightness(.95)}
.lang button[aria-current="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--brass);
}

/* --- hero -------------------------------------------------------- */
.hero{ /* deliberately short of the fold: 01 has to show under it */
  min-height:86svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--u)*12);padding-bottom:calc(var(--u)*2);
  position:relative;
}
#who{padding-block-start:calc(var(--u)*5)}
@media (min-width:900px){ #who{padding-block-start:calc(var(--u)*6)} }
.hero-inner{position:relative;width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gut);flex:1;display:flex;flex-direction:column;justify-content:center}
/* Every band carries a veil so the globe cannot cross its text. The hero is
   not a band and had none: on a phone the globe sits in the document right
   behind the opening, and on paper its lit sphere came up through the second
   door and the answer note. A scrim centred on the copy, clearing at the
   edges so the instrument still shows around it. */
@media (max-width:899px){
  .hero-inner::before{
    /* Bleeds left only. A right bleed is scrollable overflow: the document
       came out 14% wider than the screen and the phone zoomed the WHOLE
       page out to fit it. The gradient is centred at 30%, so the room it
       needs is on the left. Never give this box a right or bottom bleed. */
    content:"";position:absolute;inset:-8% 0 -4% -14%;z-index:-1;pointer-events:none;
    /* Reaches the doors. Centred at 44% it died just under the paragraph and
       the graticule ran straight through "I am a French buyer" and the answer
       note — worst in light, where the sphere is filled. Lower and taller;
       the horizontal extent is unchanged so the instrument still shows at the
       sides. */
    background:radial-gradient(122% 80% at 32% 54%,
      rgba(var(--bg-rgb),.94) 34%,
      rgba(var(--bg-rgb),.72) 58%,
      rgba(var(--bg-rgb),0) 86%);
  }
}
.kicker{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);
  display:flex;align-items:center;gap:calc(var(--u)*2);margin-bottom:calc(var(--u)*5);
}
.kicker .dot{width:5px;height:5px;border-radius:50%;background:var(--brass);flex:none}
.display{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.85rem,4.8vw,4.35rem);
  line-height:1.1;letter-spacing:-.02em;
  margin:0;max-width:23ch;
}
/* The hero is one sentence and it is the whole proposition. Bounded by height as
   well as width: a wide short laptop must not push the CTA under the fold. */
.hero .display{
  font-size:clamp(2rem,min(6.4vw,9.2vh),5.75rem);
  line-height:1.06;letter-spacing:-.028em;max-width:18ch;
}
.display .em{font-style:italic;color:var(--brass)}
.baseline{
  margin:calc(var(--u)*4) 0 0;max-width:48ch;
  font-size:clamp(1rem,1.8vw,1.22rem);line-height:1.55;
  letter-spacing:.01em;color:var(--muted);
}
/* The first screen had one door and it was the manufacturer's. The buyer is
   the side that pays the commission and had nowhere to go above the fold. */
.hero-doors{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:calc(var(--u)*3);margin-top:calc(var(--u)*5);
}
.hero-alt{
  font-size:12.5px;letter-spacing:.06em;color:var(--muted);
  padding-block:6px;position:relative;transition:color var(--fast) var(--ease);
}
.hero-alt::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--mid) var(--ease);
}
.hero-alt:hover{color:var(--text)}
.hero-alt:hover::after{transform:scaleX(1)}
@media (max-width:559px){ .hero-doors{gap:calc(var(--u)*2)} }

.hero-cta{
  display:inline-flex;align-items:center;gap:11px;align-self:flex-start;
  padding:13px 22px;
  border:1px solid var(--rule);
  font-size:13.5px;letter-spacing:.03em;color:var(--text);
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.hero-cta::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);flex:none;
}
.hero-cta{
  border-color:rgba(var(--brass-rgb),.42);
  background:linear-gradient(180deg,rgba(var(--brass-rgb),.13),rgba(var(--brass-rgb),.05));
  box-shadow:0 1px 0 rgba(var(--fg-rgb),.05) inset;
}
.hero-cta:hover{
  border-color:rgba(var(--brass-rgb),.72);
  background:linear-gradient(180deg,rgba(var(--brass-rgb),.22),rgba(var(--brass-rgb),.10));
}
.foot-mail{color:var(--muted)}



/* --- the landing proof block --------------------------------------- */
.why-band{padding-block:calc(var(--u)*12) calc(var(--u)*4)}
.why-band .lead-quote{margin-bottom:calc(var(--u)*8)}
.more{
  display:inline-flex;align-items:center;gap:11px;margin-top:calc(var(--u)*9);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  transition:color var(--fast) var(--ease);
}
.more::after{
  content:"";width:22px;height:1px;background:var(--brass);opacity:.6;
  transition:width var(--mid) var(--ease),opacity var(--fast) var(--ease);
}
.more:hover{color:var(--text)}
.more:hover::after{width:34px;opacity:1}

/* --- the landing gate --------------------------------------------- */
.gate-band{padding-block:calc(var(--u)*10) calc(var(--u)*14)}
.gate{display:grid;gap:1px;background:var(--rule-soft);border-block:1px solid var(--rule-soft)}
@media (min-width:620px){ .gate{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1240px){
  .gate{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gate:has(> :last-child:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
  .gate:has(> :last-child:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* the 404 offers three ways back, not four: without this the four-column
   rule leaves an empty lit cell hanging off the end of the row */
.gate--three{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
@media (min-width:1240px){ .gate--three{grid-template-columns:repeat(3,minmax(0,1fr))} }
.gate a{
  background:var(--night);padding:calc(var(--u)*5) calc(var(--u)*4) calc(var(--u)*6);
  position:relative;display:block;
}
@media (min-width:900px){ .gate a{padding:calc(var(--u)*6) calc(var(--u)*5) calc(var(--u)*8)} }
.gate a{background:var(--surface);transition:background var(--mid) var(--ease)}
.gate a:hover{background:var(--surface-2)}
.gate h2{
  font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.15;
  margin:0 0 calc(var(--u)*2);
  transition:color var(--fast) var(--ease);
}
.gate p{margin:0;color:var(--muted);font-size:.95em;max-width:34ch}
.gate a::before{
  content:"";position:absolute;right:calc(var(--u)*4);top:calc(var(--u)*6);
  width:16px;height:1px;background:var(--brass);opacity:.5;
  transition:width var(--mid) var(--ease),opacity var(--fast) var(--ease);
}
.gate a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--mid) var(--ease);
}
.gate a:hover h2{color:var(--brass)}
.gate a:hover::before{width:26px;opacity:1}
.gate a:hover::after{transform:scaleX(1)}

/* --- section 01 : who ------------------------------------------- */
.who{display:grid;gap:calc(var(--u)*8)}
@media (min-width:980px){ .who{grid-template-columns:1.35fr .65fr;gap:calc(var(--u)*12);align-items:end} }
.statement{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.3rem,2.7vw,2.1rem);
  line-height:1.35;letter-spacing:-.008em;margin:0;color:var(--text);
}
.statement + .statement{margin-top:calc(var(--u)*3)}

.frame{position:relative;background:var(--slate);aspect-ratio:4/5;overflow:hidden}
.frame::before{content:"";position:absolute;inset:10px;border:1px solid rgba(var(--brass-rgb),.28)}
.frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg, rgba(var(--fg-rgb),.045), transparent 46%),
             radial-gradient(60% 50% at 50% 100%, rgba(var(--bg-rgb),.7), transparent);
}
.plate-mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(64px,22%,120px);height:auto;fill:rgba(var(--brass-rgb),.3);
}
.plate-wide .plate-mark{width:clamp(72px,12%,140px)}
.caption{
  margin-top:calc(var(--u)*1.5);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);
}

#who .spec{margin:calc(var(--u)*8) 0 0}
#who .team{margin-top:calc(var(--u)*4)}

/* Both ends of the route, drawn the same way as the atlas: a coarse ring from
   real coordinates and marks at real positions. Two panels rather than one
   world, because the claim is not "we are global" -- it is that there are
   exactly two ends and we stand at both. France is drawn with its longitudes
   scaled by cos(46 deg), or the hexagon comes out stretched sideways. */
.ends{display:grid;gap:calc(var(--u)*6);margin:calc(var(--u)*8) 0 calc(var(--u)*9)}
@media (min-width:700px){ .ends{grid-template-columns:1fr 1fr;gap:calc(var(--u)*8)} }
.ends-map{margin:0;display:flex;flex-direction:column;align-items:flex-start}
/* direct child only: the flag in the heading below is an svg too, and this
   rule was giving it the height of the map */
.ends-map > svg{display:block;height:clamp(150px,22vw,210px);width:auto;margin-bottom:calc(var(--u)*3)}
.e-coast{
  fill:rgba(var(--fg-rgb),.05);stroke:var(--rule);stroke-width:1.1;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
.e-pin{fill:var(--brass)}
/* Two tiers: brass where the house sits, celadon where the work also takes it.
   Both are filled, and the rank is carried by size -- roughly three times the
   area. A hollow ring was tried and read as emphasis rather than as a lesser
   mark: an outline draws the eye like a target, so the second rank came out
   looking like the first. Colour alone will not do it either, since --faint
   against --brass was the same value at a different hue.
   The marks are named under the brass ones in the same order and in the colour
   they are drawn in: an unexplained second colour on a map is a riddle. */
.e-pin-sec{fill:var(--celadon);opacity:.9}
.ends-also{
  margin:0 0 calc(var(--u)*1.5);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--celadon);opacity:.85;
}
.ends-head{
  display:flex;align-items:center;gap:calc(var(--u)*1.5);margin:0 0 calc(var(--u)*1);
  font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.1;
}
.ends-cities{
  margin:0 0 calc(var(--u)*1.5);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);
}
.ends-note{margin:0;color:var(--muted);font-size:.95em;line-height:1.65;max-width:34ch}

/* the house says what it is, on the page that is about the house */
.house{
  margin:calc(var(--u)*7) 0 0;padding-top:calc(var(--u)*3);
  border-top:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--faint);
}

/* --- the faces, inside 01 ----------------------------------------- */
.team{ /* two up even on the narrowest phone: four portraits stacked is a scroll */
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:calc(var(--u)*3) calc(var(--u)*2);margin-top:calc(var(--u)*5);
}
@media (min-width:620px){ .team{gap:calc(var(--u)*5) calc(var(--u)*3)} }
@media (min-width:1040px){ .team{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*4)} }
.member .shot{
  position:relative;aspect-ratio:4/5;overflow:hidden;
}
.member .shot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%;
  filter:grayscale(.34) contrast(1.04) brightness(.96) saturate(.85);
  transition:filter var(--slow) var(--ease);
}
.member .shot::after{ /* nightfall, so a lit photograph sits in the palette */
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(168deg, rgba(var(--bg-rgb),0), rgba(var(--bg-rgb),.42) 82%),
    linear-gradient(0deg, rgba(var(--brass-rgb),.10), rgba(var(--brass-rgb),0) 48%);
}
.member .shot::before{
  content:"";position:absolute;inset:7px;z-index:3;
  border:1px solid rgba(var(--brass-rgb),.28);
  transition:border-color var(--mid) var(--ease);
}
/* A plate with no photograph on it was reading as a failed image load:
   a slate rectangle, a hairline, a ghost mark, three times in a row next
   to a real portrait. It is a struck plate now — the person's initials
   cut into the same grain as the bands, the house mark stamped small in
   the corner. It says "portrait to come", not "image missing". */
/* no :has() needed — a photograph covers the box, so the ground only
   ever shows on the plates that have none */
.member .shot{background:var(--slate) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='1000'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.006' numOctaves='2' seed='59' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.30' numOctaves='3' seed='19' stitchTiles='stitch' result='n'/%3E%3CfeDisplacementMap in='n' in2='d' scale='40' xChannelSelector='R' yChannelSelector='G' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0.69  0 0 0 0 0.553  0 0 0 0 0.341  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='680' height='1000' filter='url(%23w)'/%3E%3C/svg%3E");background-size:auto,680px 450px}
.member .initials{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.1rem,3.4vw,3.1rem);letter-spacing:.14em;text-indent:.14em;
  color:rgba(var(--brass-rgb),.38);
  transition:color var(--mid) var(--ease);
}
.member:hover .initials{color:rgba(var(--brass-rgb),.62)}
/* the house mark stops being the subject and becomes a stamp in the corner */
.member .shot .plate-mark{
  z-index:2;fill:rgba(var(--brass-rgb),.22);
  /* the base rule pins this dead centre with a translate; unset all of it
     or the stamp sits on top of the initials */
  position:absolute;left:auto;top:auto;transform:none;
  right:14px;bottom:12px;width:30px;height:auto;
}
@media (min-width:620px){ .member .shot::before{inset:10px} }
.member:hover .shot img{filter:grayscale(.06) contrast(1.04) brightness(1.04) saturate(1)}
.member:hover .shot::before{border-color:rgba(var(--brass-rgb),.52)}
/* The role sits beside the name rather than beneath it: it is what the name
   means, not a second caption. Baseline-aligned and allowed to wrap under on a
   narrow column, where a four-up grid leaves no room to keep it on the line. */
.member .name{
  font-family:var(--serif);font-weight:300;line-height:1.15;
  font-size:clamp(1.05rem,4.2vw,1.5rem);
  margin:calc(var(--u)*1.5) 0 0;
  display:flex;flex-wrap:wrap;align-items:baseline;
  column-gap:calc(var(--u)*1.25);row-gap:2px;
}
/* Two up, the pair in a row carries the same content and the links line up on
   their own (measured at 390 and 800). Four up they do not: Tommy's function
   runs to two lines in all three languages and his icon sat 19px below the
   other three. Same answer as the market doors — subgrid, so the four cards
   share one set of rows (portrait, name, function, links) and the function
   row is as tall as the longest of them. Must come after the base rule: put
   the subgrid before it and display:flex wins, the rows compute and do
   nothing. row-gap:0 because the spacing is already carried by the margins
   inside the card; a gap here would rule three lines across the four faces. */
.member{display:flex;flex-direction:column}
@media (min-width:1040px){
  @supports (grid-template-rows:subgrid){
    .team{grid-template-rows:repeat(4,auto);row-gap:0}
    .member{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0}
  }
}
.member-links{
  display:flex;align-items:center;gap:calc(var(--u)*2);
  margin-top:auto;padding-top:calc(var(--u)*1.5);
}
.member-link{
  display:block;line-height:0;
  color:var(--faint);transition:color var(--mid) var(--ease);
}
.member-link svg{width:16px;height:16px;fill:currentColor;display:block}
@media (min-width:620px){
  .member-links{margin-top:calc(var(--u)*2);gap:calc(var(--u)*2.5)}
  .member-link svg{width:18px;height:18px}
}
.member-link:hover{color:var(--brass)}

/* The title sits with the name -- it is the rank -- and the function goes
   beneath, because it is the part a buyer actually reads: "Quality" says where
   someone sits on a chart, "on the ground, audits and quality" says what they
   will do about your container. */
.member .title{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);white-space:nowrap;
}
.member .role{
  margin:calc(var(--u)*.75) 0 0;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);line-height:1.6;
}
@media (min-width:620px){
  .member .name{font-size:clamp(1.2rem,2.1vw,1.5rem);margin-top:calc(var(--u)*2.5)}
  .member .role{margin-top:calc(var(--u)*1);font-size:10px;letter-spacing:.2em;line-height:1.9}
}

.h-sub{
  font-size:clamp(1.5rem,3vw,2.25rem);
  margin-top:calc(var(--u)*14);margin-bottom:calc(var(--u)*3);
}

/* The one passage on the site written by people rather than by a house, so it
   is set as a letter: laid on its own sheet, in the serif the headlines use,
   at a measure you read rather than scan, and signed. Everything else here
   affirms; this one explains, and it is allowed to. */
.letter{
  position:relative;background:var(--surface);box-shadow:var(--shadow);
  margin-top:calc(var(--u)*5);max-width:70ch;
  padding:calc(var(--u)*5) calc(var(--u)*4) calc(var(--u)*4);
}
@media (min-width:760px){ .letter{padding:calc(var(--u)*8) calc(var(--u)*8) calc(var(--u)*6)} }
.letter::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--edge-lit),rgba(var(--brass-rgb),.05));
}
.letter p{
  font-family:var(--serif);font-weight:300;color:var(--text);
  font-size:clamp(1.02rem,1.75vw,1.24rem);line-height:1.72;
  margin:0 0 1.15em;max-width:62ch;
}
.letter p:last-of-type{margin-bottom:0}
/* the short line in the middle is the turn of the argument: let it stand */
.letter .letter-beat{
  font-style:italic;color:var(--brass);
  margin-top:1.5em;margin-bottom:1.5em;
}
.letter-sign{
  margin-top:calc(var(--u)*5) !important;padding-top:calc(var(--u)*3);
  border-top:1px solid var(--rule-soft);
  display:flex;flex-direction:column;gap:4px;
}
/* Name and rank on one line, as the roster sets them -- and the rank reads
   from m1_title, so it can only ever say what the team block says. */
.letter-sign .ls-who{
  display:flex;align-items:baseline;flex-wrap:wrap;
  column-gap:calc(var(--u)*1.5);row-gap:2px;
}
.letter-sign .ls-names{
  font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--text);
}
.letter-sign .ls-title{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);
}
.letter-sign .ls-place{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}

/* --- section 02 : method ---------------------------------------- */
.triad{display:grid;gap:1px;background:var(--rule-soft);margin-top:calc(var(--u)*6)}
@media (min-width:860px){ .triad{grid-template-columns:repeat(3,1fr)} }
.crit{background:var(--surface);padding:calc(var(--u)*5) calc(var(--u)*4) calc(var(--u)*6);position:relative}
@media (min-width:860px){ .crit{padding:calc(var(--u)*6) calc(var(--u)*5) calc(var(--u)*8)} }
.crit h3{font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.1;margin:0 0 calc(var(--u)*2)}
.crit p{margin:0;color:var(--muted);font-size:.99em;line-height:1.72}
.crit::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--mid) var(--ease);
}
.crit:hover::after{transform:scaleX(1)}

/* --- the file, ciphered ------------------------------------------
   The one figure on the site that is not a map. It earns the space by
   showing the claim instead of repeating it: the five readings a
   competitor would actually want, sitting in the state they sit in.
   The values are mono because ciphertext is a reading and nothing
   else; the labels beside them are words, so they are not. No frame --
   the surface does the separating, as everywhere else on the page. */
.cipher{margin:calc(var(--u)*6) 0 0;max-width:560px}
.cipher-card{background:var(--surface);padding:calc(var(--u)*3.5) calc(var(--u)*4)}
.ci-row{
  display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr);
  gap:calc(var(--u)*2);align-items:baseline;margin:0;
  padding:calc(var(--u)*1.75) 0;border-bottom:1px solid var(--edge);
}
.ci-row:last-child{border-bottom:0}
.ci-k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.ci-v{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--muted);word-break:break-all;
  transition:color var(--mid) var(--ease);
}
/* the half second in which it is still readable */
.ci-v.is-plain{color:var(--alabaster)}
.cipher-key{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--u)*1.5);
  margin:calc(var(--u)*2.5) 0 0;padding-top:calc(var(--u)*2.25);
  border-top:1px solid var(--rule-soft);
}
.ci-target-k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.ci-target{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--brass)}
.cipher-note{
  margin:calc(var(--u)*2.5) 0 0;color:var(--muted);
  font-size:.95em;line-height:1.65;max-width:46ch;
}
@media (max-width:520px){
  .cipher-card{padding:calc(var(--u)*3)}
  .ci-row{grid-template-columns:1fr;gap:calc(var(--u)*.75)}
}

/* --- where the fee sits ------------------------------------------
   The buyer's page turns on one sentence — our fee is beside the price
   and not inside it — and a sentence is precisely what a buyer has
   already heard from everyone who wanted the order. Two bars say it
   instead, and the gap in the second one is the whole argument.
   The widths are not a rate and must not be read as one: what the
   drawing carries is where the line falls, and whether anybody shows
   it to you. Brass for the money that is ours, hatching for the money
   that is nobody's business but the house that took it. */
.fee{margin:calc(var(--u)*6) 0 0;max-width:620px}
.fee-row{padding:calc(var(--u)*3.5) 0;border-top:1px solid var(--rule-soft)}
.fee-row:first-child{border-top:0;padding-top:0}
.fee-who{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin:0 0 calc(var(--u)*2.25);
}
.fee-bar{display:flex;align-items:stretch;height:13px}
.fee-bar span{display:block;height:100%}

/* the two fills, shared with the swatches that name them below */
.f-price,.k-price{
  background:linear-gradient(90deg,rgba(var(--brass-rgb),.30),rgba(var(--brass-rgb),.15));
  box-shadow:inset 0 0 0 1px rgba(var(--brass-rgb),.26);
}
.f-hidden,.k-hidden{
  background:repeating-linear-gradient(135deg,
    rgba(var(--brass-rgb),.30) 0 2px, transparent 2px 6px);
  box-shadow:inset 0 0 0 1px rgba(var(--brass-rgb),.20);
}
.f-ours,.k-ours{
  background:linear-gradient(90deg,rgba(var(--brass-rgb),.92),rgba(var(--brass-rgb),.58));
  box-shadow:inset 0 0 0 1px rgba(var(--brass-rgb),.5);
}
/* The three widths are deliberately equal across the two rows: left to
   grow, the second row's price ran longer than the first and the drawing
   said the factory charges more through us, which is the opposite of the
   claim. Same money in both rows. The only difference is the gap, and
   which of the two blocks you are allowed to see. */
.fee-bar .f-price{flex:0 0 64%}
.fee-bar .f-hidden{flex:0 0 20%}
.fee-bar .f-ours{flex:0 0 20%}
/* the space between the price and our line is not decoration */
.fee-bar .f-gap{flex:0 0 calc(var(--u)*2.5)}

.fee-keys{
  display:flex;flex-wrap:wrap;gap:calc(var(--u)*1) calc(var(--u)*4);
  margin:calc(var(--u)*2) 0 0;padding:0;list-style:none;
}
.fee-k{display:flex;align-items:baseline;gap:calc(var(--u)*1.25);
       font-size:11.5px;line-height:1.5;color:var(--muted)}
.fee-k i{width:16px;height:8px;flex:0 0 16px;display:block;transform:translateY(-1px)}
.fee-note{
  margin:calc(var(--u)*3.5) 0 0;color:var(--muted);
  font-size:.95em;line-height:1.65;max-width:52ch;
}
@media (max-width:560px){
  .fee-bar{height:11px}
  .fee-keys{flex-direction:column;gap:calc(var(--u)*1.25)}
}

.synthesis{
  margin-top:calc(var(--u)*8);display:flex;align-items:center;gap:calc(var(--u)*4);
}
.synthesis .line{flex:1;height:1px;background:var(--rule-soft)}
.synthesis p{
  margin:0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.1rem,2.2vw,1.6rem);color:var(--brass);white-space:nowrap;
}
@media (max-width:640px){
  .synthesis .line:last-child{display:none}
  .synthesis p{white-space:normal}
}

/* --- section 03 : steps ------------------------------------------ */
.spec{
  font-family:var(--serif);font-style:italic;color:var(--muted);
  font-size:clamp(1rem,1.8vw,1.2rem);margin:0 0 calc(var(--u)*5.5);
}
.steps{border-top:1px solid var(--rule-soft)}
.step{
  display:grid;grid-template-columns:1fr;gap:calc(var(--u)*2);
  padding:calc(var(--u)*4) 0;border-bottom:1px solid var(--rule-soft);
  transition:transform var(--fast) var(--ease);
}
@media (min-width:860px){
  .step{grid-template-columns:5fr 7fr;gap:calc(var(--u)*5);align-items:baseline;padding:calc(var(--u)*4) 0}
  .step p{max-width:60ch}
}
.step{position:relative}
/* Not the brass numerals — those were struck on purpose. A rule that arrives
   instead: it marks the row you are on and leaves nothing behind when you go. */
.step::before{
  content:"";position:absolute;left:calc(var(--gut)*-.5);top:calc(var(--u)*4);bottom:calc(var(--u)*4);
  width:1px;background:var(--brass);transform:scaleY(0);transform-origin:top;
  opacity:0;transition:transform var(--mid) var(--ease),opacity var(--mid) var(--ease);
}
@media (hover:hover){ .step:hover::before{transform:none;opacity:.85} }
.step:hover{transform:translateX(6px)}

/* Only the rows that sit straight on the globe need help. A card is already opaque:
   darkening it just made one tile look wrong next to its neighbours. */
.step,.qa,.wood{
  transition:background var(--mid) var(--ease),transform var(--fast) var(--ease),
             color var(--mid) var(--ease);
}
@media (hover:hover){
  .step:hover,.qa:hover{background:var(--wash)}
  .wood:hover{background:var(--surface-2)}
  .step:hover p,.wood:hover .wood-b{color:var(--text)}
  .crit:hover,.cell:hover{background:var(--surface-2)}
}
.crit,.cell{transition:background var(--mid) var(--ease)}
.step h3{font-size:clamp(1.18rem,2.05vw,1.62rem);margin:0;line-height:1.14}
.step p{margin:calc(var(--u)*1) 0 0;color:var(--muted);font-size:.98em;line-height:1.72}
@media (min-width:860px){ .step p{margin:0} }
@media (max-width:859px){ .step .num{grid-row:1/3} .step h3{grid-column:2} .step p{grid-column:2} }

/* ==================================================================
   Section shapes. Every band used to be the same ruled two-column
   list -- nineteen identical rows on the home page. Each one now
   takes the shape of its own sentence.
   ================================================================== */

/* 01 "Four things -- and we carry all four."
   A closed set, so it is drawn as one block of four rather than a
   list you could keep scrolling. Same 1px-gutter idiom as .duo. */
.quad{display:grid;gap:1px;background:var(--rule-soft);
      border:1px solid var(--rule-soft);margin-top:calc(var(--u)*4)}
@media (min-width:820px){ .quad{grid-template-columns:1fr 1fr} }
.cell{background:var(--surface);padding:calc(var(--u)*4)}
@media (min-width:820px){ .cell{padding:calc(var(--u)*6) calc(var(--u)*5)} }
.cell h3{font-size:clamp(1.1rem,1.7vw,1.36rem);margin:0 0 calc(var(--u)*1.5);line-height:1.15}
.cell p{margin:0;color:var(--muted);font-size:.95em;line-height:1.7}

/* The two ends of the route, named.
   "Why France" and "Why Vietnam" carry the whole argument of the house -- one
   for the manufacturer, one for the buyer -- and they were reaching the home
   page as two 12px links at the foot of a column, plus an entry in a hover
   menu. They were also two of six identical rows on the spine below. A door
   that carries an argument has to be built as a door. */
.markets{
  /* row-gap draws the divider between the two doors once they stack; the
     subgrid rule below zeroes it, because there the rows are internal to the
     cards and a row gap would rule four lines straight across both of them. */
  display:grid;column-gap:1px;row-gap:1px;background:var(--rule-soft);
  border:1px solid var(--rule-soft);margin-top:calc(var(--u)*6);
}
@media (min-width:900px){ .markets{grid-template-columns:1fr 1fr} }
.market{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);color:inherit;
  padding:calc(var(--u)*5) calc(var(--u)*4) calc(var(--u)*4);
  transition:background var(--mid) var(--ease);
}
@media (min-width:900px){ .market{padding:calc(var(--u)*7) calc(var(--u)*6) calc(var(--u)*5)} }
/* The two arguments do not run to the same length -- the French body is a line
   longer than the Vietnamese one in every language -- so left to itself each
   card started its proof points at its own height and the pair read as two
   unrelated blocks. Subgrid hands both cards the same five rows, so role,
   heading, body, points and door sit on shared baselines across the gutter.
   This has to come after the .market base rule: declared before it, the
   display:flex above wins and the subgrid rows compute but do nothing.
   Without subgrid the flex column still stacks; only cross-card alignment is
   lost, which is why the fallback needs no separate rule. */
@media (min-width:900px){
  @supports (grid-template-rows:subgrid){
    .markets{grid-template-rows:repeat(5,auto)}
    .markets{row-gap:0}
    .market{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0}
  }
}
/* Brass on the top edge rather than the alabaster hairline the other tiles
   carry: these two are the only cards on the page that are also a door. */
.market::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--edge-lit),rgba(var(--brass-rgb),.05));
  pointer-events:none;
}
.market:hover{background:var(--surface-2)}

.market-role{
  display:flex;align-items:center;gap:calc(var(--u)*1.5);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);margin:0 0 calc(var(--u)*2);
}
.market h3{
  font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.06;
  margin:0 0 calc(var(--u)*2);
  transition:color var(--mid) var(--ease);
}
.market:hover h3{color:var(--brass)}
.market-b{margin:0;color:var(--muted);font-size:.98em;line-height:1.7;max-width:52ch}

.market-pts{list-style:none;margin:calc(var(--u)*4) 0 0;padding:0}
.market-pts li{
  position:relative;padding:calc(var(--u)*2) 0 calc(var(--u)*2) calc(var(--u)*3);
  border-top:1px solid var(--rule-soft);
  color:var(--muted);font-size:.93em;line-height:1.62;
}
.market-pts li::before{
  content:"";position:absolute;left:0;top:calc(var(--u)*2 + .62em);
  width:calc(var(--u)*1.5);height:1px;background:var(--brass);opacity:.7;
}

/* Pushed to the foot of whichever card is taller, so the two doors line up
   however unevenly the arguments above them run. */
.market-door{
  margin-top:auto;padding-top:calc(var(--u)*4);
  display:flex;flex-direction:column;gap:2px;
}
.market-door .md-k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.market-door .md-t{
  position:relative;display:inline-block;align-self:flex-start;
  font-family:var(--serif);font-size:1.05rem;color:var(--brass);
  padding-bottom:3px;
}
.market-door .md-t::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--brass);opacity:.4;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--mid) var(--ease),opacity var(--mid) var(--ease);
}
.market:hover .md-t::after{transform:scaleX(1);opacity:.75}

/* 02 "One corridor. Both ends. Nothing else."
   The route itself: one line, and the statements standing on either
   side of it. The two ends of the argument are the two ends of it. */
.spine{position:relative;margin-top:calc(var(--u)*5)}
.spine::before{
  content:"";position:absolute;top:0;bottom:0;left:11px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(var(--brass-rgb),.42) 8%,
             rgba(var(--brass-rgb),.42) 92%,transparent);
  /* the route lays itself down as you travel it. --draw defaults to 1, so
     without JS, and under reduced-motion, the line is simply there. */
  transform:scaleY(var(--draw,1));transform-origin:top;
}
.node::before{opacity:var(--lit,1)}
@media (prefers-reduced-motion:reduce){
  .spine::before{transform:none}
  .node::before{opacity:1}
}
.node{position:relative;padding:0 0 calc(var(--u)*5) calc(var(--u)*5);}
.node:last-child{padding-bottom:0}
.node::before{ /* the station on the line */
  content:"";position:absolute;left:7px;top:calc(var(--u)*1.1);
  width:9px;height:9px;border:1px solid var(--brass);background:var(--night);
  transform:rotate(45deg);transition:background var(--mid) var(--ease);
}
.node h3{font-size:clamp(1.08rem,1.7vw,1.32rem);margin:0 0 calc(var(--u)*1);line-height:1.18}
.node p{margin:0;color:var(--muted);font-size:.95em;line-height:1.72;max-width:58ch}
@media (hover:hover){ .node:hover::before{background:var(--brass)} }

@media (min-width:1000px){
  /* on a wide screen the line runs down the middle and the route has
     two visible sides; the eye reads it as a corridor, not a list */
  .spine::before{left:50%}
  .node{width:calc(50% - var(--u)*5);padding:0 0 calc(var(--u)*6) 0}
  .node:nth-child(odd){margin-right:auto;text-align:right}
  .node:nth-child(even){margin-left:auto}
  .node p{max-width:none}
  .node:nth-child(odd)::before{left:auto;right:calc(var(--u)*-5 - 4px)}
  .node:nth-child(even)::before{left:calc(var(--u)*-5 - 4px)}
}

/* 03 "One desk. One voice. Same day."
   Everything else on this page is ruled into rows. This one is not:
   an unbroken column is the argument. */
.solo{margin-top:calc(var(--u)*5);display:flex;flex-direction:column;
      gap:calc(var(--u)*6);max-width:64ch}
.one h3{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.3rem,2.5vw,1.95rem);line-height:1.15;
  margin:0 0 calc(var(--u)*1.5);letter-spacing:-.014em;
}
.one p{margin:0;color:var(--muted);max-width:56ch}
@media (min-width:1000px){
  .solo{margin-left:auto;margin-right:0;gap:calc(var(--u)*7)}
}

/* 04 "From your first message to your first container."
   The headings already carried their own time marker behind an
   em dash and the list was throwing it away. It is a column now. */
.chrono{position:relative;margin-top:calc(var(--u)*5)}
.leg{position:relative;padding-bottom:calc(var(--u)*5)}
.leg:last-child{padding-bottom:0}
.leg h3{font-size:clamp(1.08rem,1.7vw,1.32rem);margin:0 0 calc(var(--u)*1);line-height:1.2}
.leg p{margin:0;color:var(--muted);font-size:.95em;line-height:1.72;max-width:60ch}
.when{
  display:block;font-family:var(--sans);font-weight:400;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);margin-bottom:calc(var(--u)*.75);
  font-variant-numeric:tabular-nums;
}
@media (min-width:900px){
  /* the marker steps out into its own rail and the stages line up */
  .chrono{padding-left:0}
  .leg{display:grid;grid-template-columns:minmax(150px,190px) 1fr;
       /* one gap value also spaced the rows, opening a hole between each
          heading and its own paragraph */
       column-gap:calc(var(--u)*4);row-gap:calc(var(--u)*1);
       align-items:baseline;
       padding-block:calc(var(--u)*3.5);border-top:1px solid var(--rule-soft)}
  .leg:first-child{border-top:0}
  .when{margin-bottom:0;padding-top:.4em}
  .leg h3,.leg p{grid-column:2}
}

/* --- section 04 : two audiences ---------------------------------- */
.duo{display:grid;gap:1px;background:var(--rule-soft);margin-top:calc(var(--u)*4)}
@media (min-width:900px){ .duo{grid-template-columns:1fr 1fr} }
.col{background:var(--surface);padding:calc(var(--u)*6) calc(var(--u)*4)}
@media (min-width:900px){ .col{padding:calc(var(--u)*8) calc(var(--u)*6)} }
.col .who-you{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
  margin:0 0 calc(var(--u)*4);
}
.col h3{
  font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.12;margin:0 0 calc(var(--u)*5);
}
.col ul{list-style:none;margin:0;padding:0}
.col-links{display:flex;flex-wrap:wrap;gap:calc(var(--u)*4);margin:calc(var(--u)*5) 0 0}
.col-lede{margin:calc(var(--u)*2.5) 0 calc(var(--u)*4);color:var(--muted);line-height:1.7}
.who-you .flag{width:17px;margin-right:calc(var(--u)*1.25);vertical-align:-2px}
.col li{
  position:relative;padding-left:calc(var(--u)*3.5);padding-block:calc(var(--u)*1.5);
  color:var(--muted);font-size:.98em;line-height:1.65;
  border-top:1px solid var(--rule-soft);
}
.col li:first-child{border-top:0;padding-top:0}
.col li::before{
  content:"";position:absolute;left:0;top:calc(var(--u)*1.5 + .72em);
  width:10px;height:1px;background:var(--brass);opacity:.7;
}
.col li:first-child::before{top:.72em}
.col li.key{color:var(--text)}
.col .foot{
  margin:calc(var(--u)*5) 0 0;font-family:var(--serif);font-style:italic;
  color:var(--celadon);font-size:1.05em;
}

/* --- section 05 : vietnam ---------------------------------------- */
.lead-quote{
  font-family:var(--serif);font-size:clamp(1.2rem,2.6vw,1.9rem);line-height:1.32;
  margin:0 0 calc(var(--u)*9);max-width:26ch;
}
.stats{display:grid;gap:calc(var(--u)*7)}
@media (min-width:800px){ .stats{grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*6)} }
.stat{border-top:1px solid var(--rule);padding-top:calc(var(--u)*3)}
/* These are the only display-size numbers on the site, and they are readings.
   Mono at this scale is wider, so the tracking comes back to 0 and the size
   down a step -- serif tracking on a monospaced face sets the digits touching. */
.stat-figure{
  font-family:var(--mono);font-weight:400;color:var(--brass);
  font-size:clamp(2.7rem,6.6vw,5.2rem);line-height:.96;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:.08em;
  /* tabular so an animating counter cannot change width mid-count, but NOT the
     slashed zero: it disambiguates 0 from O at 10px and reads as a glitch at
     5rem. The slash belongs on the small readings, not on display figures. */
  font-variant-numeric:tabular-nums;
}
.stat-figure .pre{font-size:.34em;letter-spacing:.02em;color:var(--brass);opacity:.85}
.stat-figure .suf{font-size:.42em;line-height:1;letter-spacing:0;align-self:flex-start;padding-top:.14em}
.stat-figure .num{font-variant-numeric:tabular-nums}
.stat-note{margin:calc(var(--u)*2.5) 0 0;color:var(--muted);font-size:.98em;line-height:1.6;max-width:30ch}

/* species of the section 05 */
.woods{
  display:grid;gap:1px;background:var(--rule-soft);
  margin-top:calc(var(--u)*6);border-block:1px solid var(--rule-soft);
}
@media (min-width:760px){ .woods{grid-template-columns:1fr 1fr} }
@media (min-width:1180px){ .woods{grid-template-columns:repeat(3,1fr)} }
.wood{background:var(--surface);padding:calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*5)}
/* The one place the grain means something. It used to be painted across every
   band on the site at an alpha of .06 -- invisible on night, and on paper
   literally below perception, about one value per channel. Here it sits on the
   six species cards, where timber IS the content, at a strength you can
   actually see. Used as a MASK rather than an image, so the colour comes from
   a token and follows the theme: the tile had the dark theme's brass baked
   into it and could never have worked on paper. */
.wood::after,
.plate::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--brass);opacity:.14;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='1000'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.006' numOctaves='2' seed='59' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.30' numOctaves='3' seed='19' stitchTiles='stitch' result='n'/%3E%3CfeDisplacementMap in='n' in2='d' scale='40' xChannelSelector='R' yChannelSelector='G' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0.69  0 0 0 0 0.553  0 0 0 0 0.341  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='680' height='1000' filter='url(%23w)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='1000'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.006' numOctaves='2' seed='59' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.30' numOctaves='3' seed='19' stitchTiles='stitch' result='n'/%3E%3CfeDisplacementMap in='n' in2='d' scale='40' xChannelSelector='R' yChannelSelector='G' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0.69  0 0 0 0 0.553  0 0 0 0 0.341  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='680' height='1000' filter='url(%23w)'/%3E%3C/svg%3E");
  -webkit-mask-size:1360px 900px;mask-size:1360px 900px;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
}
:root[data-theme="light"] .wood::after{opacity:.10}
@media (prefers-reduced-transparency:reduce){ .wood::after{opacity:.06} .plate::after{opacity:.03} }
/* the fibre is behind the words, never through them */
.wood > *{position:relative;z-index:1}
.wood-head{
  margin:0 0 calc(var(--u)*2);display:flex;align-items:baseline;gap:calc(var(--u)*2);
  flex-wrap:wrap;
}
.wood-en{font-family:var(--serif);font-size:clamp(1.08rem,1.7vw,1.3rem);line-height:1.1}
.wood-vn{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);opacity:.85;
}
.wood-b{margin:0;color:var(--muted);font-size:.98em;line-height:1.65;max-width:42ch}
.wood-note{
  margin:calc(var(--u)*5) 0 0;font-family:var(--serif);font-style:italic;
  color:var(--celadon);font-size:clamp(1.05rem,1.9vw,1.3rem);max-width:56ch;
}

/* The French season, as a calendar rather than a list.
   The programme runs fifteen months, Feb of one year to Apr of the next, and
   the single most useful thing about it is that the legs do not overlap and
   that the crossing happens over Tet. A bulleted list of five date ranges said
   none of that. The scale is numbered, not lettered: month initials happen to
   coincide in French and English and say nothing at all in Vietnamese. */
.season{margin-top:calc(var(--u)*6)}
.season-grid{
  display:grid;
  grid-template-columns:minmax(0,32%) repeat(var(--cols,15),minmax(0,1fr));
  grid-template-rows:auto repeat(var(--rows,5),auto);
  align-items:center;
  column-gap:2px;row-gap:calc(var(--u)*2);
  border-top:1px solid var(--rule-soft);
  padding-top:calc(var(--u)*3);
}
.s-corner{grid-column:1;grid-row:1}
.s-m{
  grid-row:1;grid-column:calc(1 + var(--c));
  text-align:center;font-size:10.5px;letter-spacing:.04em;
  color:var(--faint);font-variant-numeric:tabular-nums;
}
.s-m-turn{color:var(--brass)}

/* the year turns between December and January */
.s-turn,.s-tet{
  grid-column:calc(1 + var(--c));grid-row:1 / -1;
  justify-self:start;align-self:stretch;width:1px;
  position:relative;pointer-events:none;
}
.s-turn{background:linear-gradient(var(--rule-soft),transparent)}
.s-tet{background:repeating-linear-gradient(var(--brass) 0 3px,transparent 3px 7px);opacity:.55}
.s-turn b,.s-tet b{
  position:absolute;left:0;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
  white-space:nowrap;transform:translateX(-50%);
}
.s-turn b{color:var(--faint);top:-15px}
.s-tet b{color:var(--brass);top:calc(100% + 6px)}

.s-lab{grid-column:1;grid-row:var(--r);display:flex;flex-direction:column;gap:1px;padding-right:calc(var(--u)*3)}
.s-when{
  font-family:var(--serif);font-weight:300;font-size:clamp(.98rem,1.5vw,1.14rem);
  line-height:1.2;color:var(--text);
}
.s-what{font-size:.86em;line-height:1.5;color:var(--muted)}

.s-bar{
  grid-row:var(--r);
  grid-column:calc(1 + var(--from)) / span var(--span);
  height:9px;position:relative;
  background:linear-gradient(90deg,rgba(var(--brass-rgb),.85),rgba(var(--brass-rgb),.42));
  box-shadow:inset 0 0 0 1px rgba(var(--brass-rgb),.32);
}
/* the legs run end to end: a tick at the head of each says where it starts */
.s-bar::before{
  content:"";position:absolute;left:0;top:-4px;bottom:-4px;width:1px;background:var(--brass);
}

/* A fifteen-column track cannot survive a phone. Each leg keeps its own
   miniature of the same fifteen months instead, so the sequence and the
   proportion still read; the shared scale is what is given up, not the idea. */
@media (max-width:820px){
  .season-grid{grid-template-columns:1fr;row-gap:calc(var(--u)*3)}
  .s-corner,.s-m,.s-turn,.s-tet{display:none}
  .s-lab{grid-column:1;grid-row:auto;padding-right:0}
  .s-bar{
    grid-column:1;grid-row:auto;height:5px;
    margin-top:calc(var(--u)*1);
    margin-left:calc(var(--from) * 100% / var(--cols,15) - 100% / var(--cols,15));
    width:calc(var(--span) * 100% / var(--cols,15));
  }
  .s-bar::before{display:none}
  /* Offsetting a short bar says nothing on its own -- a dash floating at 40%
     of nowhere. The track puts the whole span back behind it, so the leg reads
     as a position inside the programme rather than as a stray rule. Both
     figures are percentages of the bar itself, which is span/cols of the row:
     back out to the row's left edge, then across its full width. */
  .s-bar::after{
    content:"";position:absolute;top:50%;margin-top:-.5px;height:1px;z-index:-1;
    left:calc((var(--from) - 1) / var(--span) * -100%);
    width:calc(var(--cols,15) / var(--span) * 100%);
    background:var(--rule-soft);
  }
}

/* Where it is made, as a map rather than a list.
   Two of the three rows here were geography -- the clusters and the ports --
   and read as two unrelated lists of place names. Put on one map they make the
   point the lists could not: the whole southern cluster and both ports sit
   inside one corner of the country, an hour or two apart. The marks are
   plotted from real coordinates through one equirectangular projection; only
   the coastline is drawn schematic, and the note says so. */
.atlas{display:grid;gap:calc(var(--u)*5);margin-top:calc(var(--u)*6)}
@media (min-width:880px){
  .atlas{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:calc(var(--u)*8);align-items:start}
}
.atlas-map{position:relative;margin:0;justify-self:center;width:100%;max-width:300px}
.atlas-map svg{display:block;width:100%;height:auto}
.a-coast{
  fill:rgba(var(--fg-rgb),.055);
  stroke:var(--rule);stroke-width:1.1;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
.a-pin{fill:var(--brass)}
.a-port{fill:none;stroke:var(--brass);stroke-width:1.4;vector-effect:non-scaling-stroke}

/* Two names, set beside their marks. Kept as HTML rather than SVG text so the
   type does not shrink with the drawing on a narrow screen. */
@media (max-width:560px){ .atlas-tag{font-size:9.5px;letter-spacing:.1em} }
.atlas-tag{
  position:absolute;top:var(--y);right:calc(100% - var(--x));
  transform:translateY(-50%);padding-right:calc(var(--u)*1.5);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);text-align:right;white-space:nowrap;pointer-events:none;
}

.atlas-key{display:grid;gap:calc(var(--u)*5)}
@media (min-width:620px){ .atlas-key{grid-template-columns:1fr 1fr;gap:calc(var(--u)*6)} }
.ak-head{
  margin:0 0 calc(var(--u)*2);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);
}
.atlas-key ul{list-style:none;margin:0;padding:0}
.atlas-key li{
  position:relative;padding:calc(var(--u)*1.5) 0 calc(var(--u)*1.5) calc(var(--u)*3);
  border-top:1px solid var(--rule-soft);
}
.atlas-key li:first-of-type{border-top:0;padding-top:0}
.ak-m{
  position:absolute;left:0;top:calc(var(--u)*1.5 + .45em);
  width:7px;height:7px;flex:none;
}
.atlas-key li:first-of-type .ak-m{top:.45em}
.ak-pin{border-radius:50%;background:var(--brass)}
.ak-port{border:1px solid var(--brass)}
.atlas-key .gi-name{display:block}
/* The same figures the marks were plotted from, set as a reading. The map is
   the picture; this is the number behind it. */
.ak-co{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--faint);margin-top:2px;font-variant-numeric:tabular-nums;
}
.atlas-note{
  grid-column:1/-1;margin:0;font-size:11.5px;line-height:1.6;color:var(--faint);
}

.ground{
  margin-top:calc(var(--u)*10);border-top:1px solid var(--rule-soft);
  padding-top:calc(var(--u)*5);display:grid;gap:calc(var(--u)*5);
}
.ground-row{display:grid;gap:calc(var(--u)*3)}
@media (min-width:860px){
  .ground-row{grid-template-columns:150px 1fr;gap:calc(var(--u)*4);align-items:start}
}
.ground-label{
  margin:0;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass);opacity:.85;padding-top:.35em;
}
.ground-items{
  list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u)*3);
}
@media (min-width:620px){ .ground-items{grid-template-columns:1fr 1fr} }
@media (min-width:1020px){ .ground-items{grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*4)} }
@media (min-width:1020px){ .ground-ports{grid-template-columns:repeat(2,minmax(0,1fr));max-width:50%} }
.ground-items li{
  border-top:1px solid var(--rule-soft);padding-top:calc(var(--u)*2);
}
.gi-name{
  display:block;font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.15rem);
  line-height:1.2;color:var(--text);
}
.gi-role{
  display:block;margin-top:calc(var(--u)*1);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);opacity:.8;line-height:1.9;
}

/* The wide plate. Nothing uses it yet; it keeps its own name because the
   journal kit further down also draws a plate, and this one's aspect-ratio
   was silently deciding the height of every plate in a note. */
.plate-wide{position:relative;background:var(--slate);aspect-ratio:21/9;margin-top:calc(var(--u)*12);overflow:hidden}
.plate-wide::before{content:"";position:absolute;inset:12px;border:1px solid rgba(var(--brass-rgb),.22)}
.plate-wide::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 20% 0%, rgba(var(--fg-rgb),.05), transparent 60%);
}

/* --- section 06 : contact ---------------------------------------- */
.contact-mail{
  display:inline-block;position:relative;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.6rem,5.4vw,3.6rem);line-height:1.2;letter-spacing:-.015em;
  margin:calc(var(--u)*2) 0 calc(var(--u)*10);color:var(--text);
  word-break:break-word;
}
.contact-mail::after{
  content:"";position:absolute;left:0;bottom:-.06em;height:1px;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--mid) var(--ease);
}
.contact-mail:hover{color:var(--brass)}
.contact-mail:hover::after{transform:scaleX(1)}

.bases{ /* the two bases sit side by side at every width: they are a pair */
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-soft);
}
.base{background:var(--surface);padding:calc(var(--u)*4) calc(var(--u)*2);text-align:center}
@media (min-width:760px){ .base{padding:calc(var(--u)*6)} }
.base .city{
  font-family:var(--serif);font-size:clamp(1.1rem,4.4vw,1.85rem);
  line-height:1.2;margin:0;letter-spacing:-.01em;
}
.base .country{
  margin:calc(var(--u)*1) 0 0;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.base .country .flag{height:10px;width:auto}
@media (min-width:760px){
  .base .city{font-size:clamp(1.3rem,2.6vw,1.85rem)}
  .base .country{margin-top:calc(var(--u)*1.5);font-size:11px;letter-spacing:.22em;gap:9px}
  .base .country .flag{height:auto;width:17px}
}
.base .clock{
  margin:calc(var(--u)*2) 0 0;font-size:11.5px;letter-spacing:.1em;color:var(--brass);
  font-variant-numeric:tabular-nums;
}
@media (min-width:760px){
  .base .clock{margin-top:calc(var(--u)*3);font-size:13px;letter-spacing:.16em}
}
.base .clock .tz{color:var(--faint);letter-spacing:.2em;font-size:10px;margin-left:.6em}

/* --- the questions ------------------------------------------------ */
.faq{border-top:1px solid var(--rule-soft);margin-top:calc(var(--u)*6)}
.qa{border-bottom:1px solid var(--rule-soft)}
.qa summary{
  list-style:none;cursor:pointer;position:relative;
  padding:calc(var(--u)*4) calc(var(--u)*7) calc(var(--u)*4) 0;
  font-family:var(--serif);font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.35;
  color:var(--text);transition:color var(--fast) var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--brass)}
.qa summary::after{ /* a hairline cross that becomes a minus */
  content:"";position:absolute;right:2px;top:50%;width:11px;height:1px;
  background:var(--brass);opacity:.75;
}
.qa summary::before{
  content:"";position:absolute;right:7px;top:50%;width:1px;height:11px;
  margin-top:-5px;background:var(--brass);opacity:.75;
  transition:transform var(--mid) var(--ease);
}
.qa[open] summary::before{transform:scaleY(0)}
.qa[open] summary{color:var(--brass)}
.qa > p{
  margin:0;padding:0 calc(var(--u)*7) calc(var(--u)*5) 0;
  color:var(--muted);font-size:.97em;line-height:1.7;max-width:68ch;
}
@media (prefers-reduced-motion:no-preference){
  .qa[open] > p{animation:qa-in .45s var(--ease) both}
}
@keyframes qa-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- journal : the list ------------------------------------------- */
.entries{border-top:1px solid var(--rule-soft);margin-top:calc(var(--u)*6)}
.entry{
  display:block;padding:calc(var(--u)*5) 0;border-bottom:1px solid var(--rule-soft);
  transition:transform var(--fast) var(--ease);
}
@media (min-width:860px){
  .entry{display:grid;grid-template-columns:150px 1fr;gap:calc(var(--u)*4);align-items:baseline;padding:calc(var(--u)*6) 0}
}
.entry:hover{transform:translateX(6px)}
.entry-date{
  margin:0 0 calc(var(--u)*1.5);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);font-variant-numeric:tabular-nums;
}
@media (min-width:860px){ .entry-date{margin:0} }
.entry h2{
  font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.15;margin:0 0 calc(var(--u)*1.5);
  transition:color var(--fast) var(--ease);
}
.entry:hover h2{color:var(--brass)}
.entry-excerpt{margin:0;color:var(--muted);font-size:.95em;max-width:62ch}
/* Date, title and excerpt are three flat children of a two-column grid, so
   the excerpt wrapped back into the 150px date column and came out as a
   ribbon one word wide. Title and excerpt both belong in the second. */
@media (min-width:860px){ .entry h2,.entry-excerpt{grid-column:2} }
.entries-empty{
  margin:calc(var(--u)*8) 0 0;font-family:var(--serif);font-style:italic;
  color:var(--faint);font-size:clamp(1.05rem,2vw,1.3rem);
}

/* --- journal : a post --------------------------------------------- */
.post .eyebrow{justify-content:flex-start;gap:calc(var(--u)*3)}
.post .eyebrow::after{display:none}
.post .eyebrow a{color:var(--faint);transition:color var(--fast) var(--ease)}
.post .eyebrow a:hover{color:var(--brass)}
.post .eyebrow time{color:var(--brass);font-variant-numeric:tabular-nums}
.post-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.06;letter-spacing:-.015em;
  margin:calc(var(--u)*2) 0 calc(var(--u)*4);max-width:22ch;
}
.post-lede{
  font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.6rem);line-height:1.4;
  color:var(--muted);margin:0 0 calc(var(--u)*7);max-width:46ch;
}
.post [data-post-lang] > p{margin:0 0 calc(var(--u)*3);max-width:68ch}
.post [data-post-lang] > h2{
  font-size:clamp(1.4rem,2.8vw,2rem);line-height:1.2;
  margin:calc(var(--u)*7) 0 calc(var(--u)*3);
}
.post [data-post-lang] > ul,.post [data-post-lang] > ol{
  margin:0 0 calc(var(--u)*3) calc(var(--u)*3);color:var(--muted);max-width:64ch;
}
.post [data-post-lang] > ul li,.post [data-post-lang] > ol li{margin-bottom:calc(var(--u)*1)}
.post [data-post-lang] > blockquote{
  margin:calc(var(--u)*5) 0;padding-left:calc(var(--u)*3);
  border-left:1px solid rgba(var(--brass-rgb),.5);
  font-family:var(--serif);font-style:italic;font-size:1.25em;color:var(--text);max-width:52ch;
}
.post .more{margin-top:calc(var(--u)*10)}

/* A post opens on its eyebrow -- the section name and the date -- with no
   hero above it. The band's own top padding is 6vw, which is shorter than
   the 81px fixed header on any laptop-width screen, so that first line was
   parked behind the bar and read as missing. Clear the header explicitly. */
.band.post{padding-top:calc(var(--u)*12)}

/* --- key figures inside a post ------------------------------------
   Three readings at the head of a long piece, so the argument has a
   spine before the prose starts. Mono on the number because it is a
   reading; the caption under it is a sentence, so it is not. */
.post [data-post-lang] > .figs{
  display:grid;gap:1px;background:var(--rule-soft);
  margin:calc(var(--u)*5) 0 calc(var(--u)*7);
}
@media (min-width:640px){ .post [data-post-lang] > .figs{grid-template-columns:repeat(3,minmax(0,1fr))} }
.figs > div{background:var(--surface);padding:calc(var(--u)*3.5) calc(var(--u)*3.5) calc(var(--u)*4)}
.fig-n{
  display:block;font-family:var(--mono);
  font-size:clamp(1.3rem,3.2vw,1.7rem);line-height:1.1;
  letter-spacing:.01em;color:var(--brass);
}
.fig-l{
  display:block;margin-top:calc(var(--u)*1.5);
  font-size:12.5px;line-height:1.55;color:var(--muted);
}

/* --- journal : the editorial kit ----------------------------------
   A note is the only page on this site a stranger reads slowly, and the
   only one where the prose has to hold on its own for four minutes. Left
   as title, paragraph, subheading, it reads as a memo. What follows is a
   small set of pieces a writer can reach for -- a plate, a reading, an
   aside, a strip of season -- so a note has changes of rhythm the way a
   printed page does, without any of them needing a photograph we do not
   have yet. Every piece is built from the same six colours and the same
   hairline as the rest of the site: nothing here is decoration for its
   own sake, and the brass stays at a tenth of the surface.
   ------------------------------------------------------------------- */

/* The line under the title: who wrote it, how long it takes, what it is
   about. Reading time is written by the script from the live language
   block, because the three versions are never the same length. */
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:calc(var(--u)*1.5) calc(var(--u)*3);
  margin:calc(var(--u)*-4) 0 calc(var(--u)*7);
  font-size:12.5px;letter-spacing:.02em;color:var(--faint);
}
.post-meta > * + *::before{
  content:"";display:inline-block;vertical-align:middle;
  width:3px;height:3px;margin-right:calc(var(--u)*3);
  background:var(--brass);opacity:.7;border-radius:50%;
}
.post-meta b{font-weight:400;color:var(--muted)}
.post-meta .pm-read b{font-family:var(--mono);color:var(--brass)}
.post-tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brass);border:1px solid rgba(var(--brass-rgb),.34);
  padding:3px calc(var(--u)*1.25);
}
.post-tag::before{display:none !important}

/* Where the note is going, before it starts going there. Four lines at
   most: past that it is a table of contents for something too long. */
.post [data-post-lang] > .post-toc{
  margin:0 0 calc(var(--u)*7);padding:calc(var(--u)*3) calc(var(--u)*3.5);
  border:1px solid var(--rule-soft);border-left:2px solid rgba(var(--brass-rgb),.55);
  background:var(--surface);max-width:52ch;
}
.post-toc p{
  margin:0 0 calc(var(--u)*1.5) !important;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
}
.post-toc ol{margin:0 !important;padding:0;list-style:none;counter-reset:toc}
.post-toc li{counter-increment:toc;margin:0 0 2px;font-size:14px;line-height:1.6}
.post-toc li::before{
  content:counter(toc,decimal-leading-zero);margin-right:calc(var(--u)*1.5);
  font-family:var(--mono);font-size:11px;color:var(--brass);
}
.post-toc a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.post-toc a:hover{color:var(--text);border-bottom-color:rgba(var(--brass-rgb),.5)}

/* Numbered sections, opt-in. The rest of the site numbers its bands, and
   a long note reads better when a reader can say "I stopped at three". */
.post [data-post-lang].numbered{counter-reset:sec}
.post [data-post-lang].numbered > h2{counter-increment:sec;position:relative}
.post [data-post-lang].numbered > h2::before{
  content:counter(sec,decimal-leading-zero);
  display:block;margin-bottom:calc(var(--u)*1);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--brass);opacity:.9;
}

/* One large letter, once, on the first paragraph. Two drop caps in one
   note is a magazine trick; one is an opening. */
.post [data-post-lang] > p.opens::first-letter{
  float:left;font-family:var(--serif);font-weight:300;
  font-size:3.9em;line-height:.82;
  margin:6px calc(var(--u)*1.5) 0 0;color:var(--brass);
}

/* The plate: an illustration that is not a photograph. A hairline frame,
   four brass ticks at the corners the way the screen itself is ticked,
   and the grain underneath at the alpha it is worth. Drop an inline SVG
   in it -- a route, a container, a joint -- and caption it. */
/* Unscoped from the journal on 30/08: the machinery below was already
   written against a bare .plate and only this box rule and the caption
   were locked inside a note, so a section page could not draw anything.
   The cap is what a note got for free from its reading column -- without
   it a plate stretches to the full band and the 11px mono labels come out
   at eighteen. */
.plate{
  position:relative;margin:calc(var(--u)*6) 0 calc(var(--u)*7);
  padding:calc(var(--u)*5) calc(var(--u)*4);max-width:720px;
  background:var(--surface);border:1px solid var(--rule-soft);overflow:hidden;
}
/* The grain comes from the same masked turbulence as the species cards --
   the selector is joined onto that rule above so there is one texture on
   this site, not two. Weaker here: on a card the timber is the content,
   on a plate it is the paper the drawing sits on. */
.plate::after{opacity:.07;z-index:0}
.plate > *{position:relative;z-index:1}
/* No max-height. A drawing is sized by the viewBox it was drawn at, and a
   cap would letterbox it inside a taller box instead of shrinking it. Keep
   the viewBox wide and the plate stays short on its own. */
.plate svg{display:block;width:100%;height:auto;color:var(--brass)}
/* A drawing labels itself in mono, the way a reading is written everywhere
   else on this site. Muted by default; brass only on the figure that is the
   point of the drawing. */
.plate svg text{font-family:var(--mono);font-size:11px;letter-spacing:.04em;fill:var(--faint)}
.plate svg text.n{fill:var(--brass);font-size:12.5px}
.plate i.tick{position:absolute;z-index:2;width:14px;height:14px;opacity:.55}
.plate i.tick::before,.plate i.tick::after{content:"";position:absolute;background:var(--brass)}
.plate i.tick::before{width:14px;height:1px}
.plate i.tick::after{width:1px;height:14px}
.plate i.tl{top:8px;left:8px}
.plate i.tr{top:8px;right:8px}
.plate i.tr::before{right:0}.plate i.tr::after{right:0}
.plate i.bl{bottom:8px;left:8px}
.plate i.bl::before{bottom:0}.plate i.bl::after{bottom:0}
.plate i.br{bottom:8px;right:8px}
.plate i.br::before{bottom:0;right:0}.plate i.br::after{bottom:0;right:0}

/* Caption, shared by the plate and by a real photograph when we have
   one. Mono on the credit because a credit is a reference, not a line
   of prose. */
.plate figcaption,
.post figcaption{
  margin-top:calc(var(--u)*2.5);padding-top:calc(var(--u)*2);
  border-top:1px solid var(--rule-soft);
  font-size:13px;line-height:1.6;color:var(--muted);max-width:60ch;
}
.plate figcaption b,
.post figcaption b{display:block;font-weight:400;color:var(--text)}
.plate figcaption em,
.post figcaption em{
  display:block;margin-top:4px;font-family:var(--mono);font-style:normal;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
}

/* A photograph, when Tommy sends one. Wide breaks the text column on a
   large screen, because the column is set for reading and a picture is
   not read. Duo is the before and after. */
.post [data-post-lang] > .post-fig{margin:calc(var(--u)*6) 0 calc(var(--u)*7)}
.post [data-post-lang] > .post-fig img{
  display:block;width:100%;height:auto;border:1px solid var(--rule-soft);
}
@media (min-width:1100px){
  .post [data-post-lang] > .post-fig.wide{width:min(96vw,1180px);margin-inline:calc(50% - min(48vw,590px))}
}
.post-fig.duo .duo-g{display:grid;gap:calc(var(--u)*2)}
@media (min-width:700px){ .post-fig.duo .duo-g{grid-template-columns:1fr 1fr} }

/* The sentence the note is really about, pulled out of the flow. Serif,
   large, and set against a brass rule rather than quotation marks --
   the mark would be a second voice, and there is only one here. */
.post [data-post-lang] > .pull{
  /* it is a <blockquote>, so it arrives carrying the plain blockquote rule
     above: a left rule, an indent and an italic. Put all three back. */
  border-left:0;padding-left:0;font-style:normal;
  margin:calc(var(--u)*7) 0;padding-top:calc(var(--u)*3);
  border-top:1px solid rgba(var(--brass-rgb),.45);
  font-family:var(--serif);font-weight:300;font-size:clamp(1.35rem,3vw,1.95rem);
  line-height:1.24;letter-spacing:-.012em;color:var(--text);max-width:26ch;
}
.post [data-post-lang] > .pull span{
  display:block;margin-top:calc(var(--u)*2);
  font-family:var(--sans);font-size:12.5px;letter-spacing:.02em;color:var(--faint);
}

/* The aside: the thing a reader would ask in the margin. Labelled,
   because an unlabelled box is just a paragraph that moved. */
.post [data-post-lang] > .post-note{
  margin:calc(var(--u)*5) 0;padding:calc(var(--u)*3.5) calc(var(--u)*4);
  background:var(--surface);border-left:2px solid var(--brass);max-width:64ch;
}
.post-note > p:last-child{margin-bottom:0 !important}
.post-note .nl{
  display:block;margin-bottom:calc(var(--u)*1.5);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass);
}
.post [data-post-lang] > .post-note.risk{border-left-color:var(--err)}
.post-note.risk .nl{color:var(--err)}

/* A sequence that has an order, where a bulleted list would lose it. */
.post [data-post-lang] > .post-steps{
  margin:calc(var(--u)*5) 0 calc(var(--u)*6) !important;
  padding:0;list-style:none;counter-reset:st;max-width:64ch;
}
.post-steps > li{
  counter-increment:st;position:relative;
  padding:0 0 calc(var(--u)*3) calc(var(--u)*6);
  margin:0 0 calc(var(--u)*3);border-bottom:1px solid var(--rule-soft);
}
.post-steps > li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.post-steps > li::before{
  content:counter(st,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:12px;color:var(--brass);
}
.post-steps b{display:block;font-weight:400;color:var(--text);margin-bottom:3px}
.post-steps span{color:var(--muted);font-size:14.5px;line-height:1.65}

/* A table earns its place when three columns say what four paragraphs
   would. It scrolls inside its own box: the page never scrolls sideways. */
.post [data-post-lang] > .t-scroll{
  margin:calc(var(--u)*5) 0 calc(var(--u)*6);overflow-x:auto;
  border:1px solid var(--rule-soft);
  -webkit-overflow-scrolling:touch;
}
.post-table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
.post-table th,.post-table td{
  padding:calc(var(--u)*1.75) calc(var(--u)*2.25);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule-soft);
}
.post-table thead th{
  background:var(--surface-2);
  font-family:var(--mono);font-weight:400;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  white-space:nowrap;
}
.post-table tbody tr:last-child td{border-bottom:0}
.post-table td.n{font-family:var(--mono);color:var(--brass);white-space:nowrap}
.post-table caption{
  caption-side:bottom;padding:calc(var(--u)*1.75) calc(var(--u)*2.25);
  text-align:left;font-size:12px;color:var(--faint);border-top:1px solid var(--rule-soft);
}

/* What a reader should have in hand when they close the note. */
.post [data-post-lang] > .post-check{
  margin:calc(var(--u)*5) 0 calc(var(--u)*6) !important;padding:0;list-style:none;max-width:60ch;
}
.post-check > li{position:relative;padding-left:calc(var(--u)*4);margin-bottom:calc(var(--u)*1.75);color:var(--muted)}
.post-check > li::before{
  content:"";position:absolute;left:2px;top:.55em;
  width:9px;height:5px;border-left:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass);
  transform:rotate(-45deg);
}

/* Season, calendar, phase: the one shape this trade thinks in. Each cell
   is a month; a filled cell is a month where something has to happen. */
.post [data-post-lang] > .post-time{margin:calc(var(--u)*6) 0 calc(var(--u)*7)}
.post-time .tt-row{display:grid;grid-template-columns:minmax(96px,1.1fr) 3fr;gap:calc(var(--u)*2);align-items:center;margin-bottom:6px}
.post-time .tt-k{font-size:13px;color:var(--muted);line-height:1.35}
.post-time .tt-b{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;height:18px}
.post-time .tt-b i{background:rgba(var(--fg-rgb),.07);border-radius:1px}
.post-time .tt-b i.on{background:rgba(var(--brass-rgb),.62)}
.post-time .tt-b i.peak{background:var(--brass)}
/* The scale rides in a .tt-row of its own, with an empty key cell, so it
   inherits the same two columns as the legs above it. It used to be offset
   by a hand-measured 96px, which only lined up while every row label was
   short enough to leave the key column at its minimum. */
.post-time .tt-s{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;
  margin-top:calc(var(--u)*1);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.04em;color:var(--faint);text-align:center;
}
@media (max-width:699px){
  .post-time .tt-row{grid-template-columns:1fr;gap:calc(var(--u)*0.5)}
  .post-time .tt-scale{display:none}
}

/* Two words a note cannot avoid and a reader may not have. */
.post [data-post-lang] > .post-kv{
  margin:calc(var(--u)*5) 0 calc(var(--u)*6);display:grid;gap:1px;
  background:var(--rule-soft);border-block:1px solid var(--rule-soft);
}
.post-kv > div{background:var(--surface);padding:calc(var(--u)*2.5) calc(var(--u)*3)}
.post-kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--brass);margin-bottom:4px}
.post-kv dd{margin:0;font-size:14px;line-height:1.65;color:var(--muted)}

/* A change of movement, where a subheading would be too loud. */
.post [data-post-lang] > .post-sep{
  border:0;height:auto;margin:calc(var(--u)*8) 0;
  text-align:center;color:var(--brass);opacity:.75;
}
.post-sep::before{content:"◈";font-size:13px;letter-spacing:.6em}

/* Someone wrote this, and says so. */
.post [data-post-lang] > .post-sign{
  margin:calc(var(--u)*8) 0 0;padding-top:calc(var(--u)*3);
  border-top:1px solid var(--rule-soft);
  font-family:var(--serif);font-style:italic;color:var(--muted);max-width:56ch;
}
.post-sign b{display:block;font-style:normal;font-weight:400;color:var(--text);margin-bottom:4px}

/* The end of the note, and the way back. */
.post-end{
  display:flex;flex-wrap:wrap;gap:calc(var(--u)*3) calc(var(--u)*6);
  align-items:baseline;justify-content:space-between;
  margin-top:calc(var(--u)*9);padding-top:calc(var(--u)*4);
  border-top:1px solid var(--rule-soft);
}
.post-end .more{margin-top:0 !important}

/* Light theme: the grain and the tick were tuned on night. On paper the
   same alphas read as dirt, and the surface needs its shadow back. */
:root[data-theme="light"] .plate{box-shadow:var(--shadow)}
:root[data-theme="light"] .plate::after{opacity:.06}
:root[data-theme="light"] .post-time .tt-b i{background:rgba(var(--fg-rgb),.10)}

/* Print: a note is the one page anyone would put on paper before a
   meeting. Drop the furniture, keep the argument. */
@media print{
  .post-toc,.post-end,.post-meta .pm-read{display:none}
  .plate,.post-note,.post-kv > div,.post-table thead th{background:transparent}
  .post [data-post-lang] > .post-fig.wide{width:auto;margin-inline:0}
}

/* --- footer ------------------------------------------------------ */
footer{border-top:1px solid var(--rule-soft);padding-block:calc(var(--u)*7)}
.foot-grid{
  display:flex;flex-wrap:wrap;gap:calc(var(--u)*4) calc(var(--u)*6);
  align-items:baseline;justify-content:space-between;
}
.foot-mark{display:block;height:12px;width:auto;fill:var(--text)}
.foot-base{font-size:12px;color:var(--muted);letter-spacing:.02em}
.foot-since{
  margin:calc(var(--u)*1.5) 0 0;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint);
}
/* wrap is not optional here: .foot-entity takes flex-basis:100% to claim its
   own line, and without wrapping it just competed for width and squeezed
   every other item into two lines. This was nowrap on desktop and wrap only
   in the mobile query, so the break showed on wide screens alone. */
.foot-right{display:flex;flex-wrap:wrap;
  gap:calc(var(--u)*4);row-gap:calc(var(--u)*1.5);
  align-items:baseline;font-size:12px;color:var(--faint)}
.foot-right a{position:relative;transition:color var(--fast) var(--ease)}
.foot-right a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--fast) var(--ease);
}
.foot-right .foot-social{
  display:inline-flex;align-self:center;color:var(--faint);
}
.foot-right .foot-social::after{display:none}
.foot-social svg{width:19px;height:19px;fill:currentColor;display:block}
/* the row shares a 32px gap with the text items, which left the four marks
   looking scattered once they grew; close the ranks between icons only */
.foot-social + .foot-social{margin-left:calc(var(--u)*-2)}
.foot-social:hover{color:var(--brass)}
.foot-social.idle{display:none}
.foot-right a:hover{color:var(--text)}
.foot-right a:hover::after{transform:scaleX(1)}

/* The address alone is wider than half the row on a phone, so the line ran out
   between the two social marks and split the pair: one at the end of a line,
   one at the start of the next. Give the address its own line and close the
   gaps, and the marks stay a group. */
@media (max-width:620px){
  .foot-right{gap:calc(var(--u)*3);row-gap:calc(var(--u)*2)}
  .foot-right .foot-mail{flex-basis:100%}
}


/* --- reaching us ------------------------------------------------- */
.cta-note{
  margin:calc(var(--u)*2) 0 0;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);opacity:.85;
}
.reach{
  margin:calc(var(--u)*7) 0 calc(var(--u)*8);padding:calc(var(--u)*4) calc(var(--u)*4);
  border:1px solid var(--rule);background:var(--wash-solid);
}
@media (min-width:900px){ .reach{padding:calc(var(--u)*5) calc(var(--u)*5)} }
.reach-t{
  margin:0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);
}
.reach-spec{margin:calc(var(--u)*2) 0 calc(var(--u)*4);color:var(--muted);font-size:.95em;max-width:60ch}
.reach-lines{display:flex;flex-wrap:wrap;gap:calc(var(--u)*2)}
.reach-line{
  display:flex;flex-direction:column;gap:3px;padding:calc(var(--u)*2) calc(var(--u)*3);
  border:1px solid var(--rule);color:var(--muted);
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.reach-line:hover{color:var(--text);border-color:rgba(var(--brass-rgb),.5);background:rgba(var(--brass-rgb),.07)}
.rl-k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);opacity:.85}
.rl-v{font-family:var(--serif);font-size:15px}
.reach .channels{margin:0;display:flex;flex-wrap:wrap;gap:calc(var(--u)*2)}
/* for the desktop with no mail client configured, where a mailto does nothing */
.reach-copy{
  font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);padding:10px 14px;border:1px solid var(--rule-soft);
  align-self:center;transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.reach-copy:hover{color:var(--text);border-color:rgba(var(--brass-rgb),.5)}

/* the bar a thumb can always reach */
/* The bar is opaque on purpose. It used to be 97% opaque over a 12px backdrop
   blur, which bought three percent of translucency and cost a bright hairline
   along its edge whenever the page moved underneath it: a blur samples past
   the element it belongs to, and at the boundary iOS clamps those samples and
   lightens them. Nothing behind the bar was ever meant to be legible, so the
   blur was paying for a seam and no more. The separators moved onto the icons
   as borders so the bar background no longer has to show through gaps — which
   also stops the safe-area strip below the buttons reading as a grey band. */
.reachbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  background:rgb(var(--bg-rgb));
  /* --rule composites darker than paper and lighter than night. Everywhere else
     that is fine; here it is a hairline pinned to the bottom edge of a phone
     screen, and a line lighter than the page in that position does not read as
     a separation -- it reads as a stray white line under the thumb. At night the
     bar is lifted off the page with depth instead, and only paper keeps a rule. */
  border-top:1px solid rgba(0,0,0,.55);
  box-shadow:0 -14px 30px rgba(0,0,0,.45);
  padding-bottom:var(--safe-b);
}
@media (max-width:899px){ .reachbar{display:flex} body{padding-bottom:calc(56px + var(--safe-b))} }
.reachbar a{
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:rgb(var(--bg-rgb));
  color:var(--text);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 12px;
}
.reachbar .rb-write{flex:1}
.reachbar .rb-ch{width:58px;flex:none;color:var(--brass);border-left:1px solid var(--rule)}
.reachbar .rb-ch svg{width:20px;height:20px;fill:currentColor;display:block}
:root[data-theme="light"] .reachbar{
  border-top-color:var(--rule);
  box-shadow:0 -12px 26px rgba(20,26,36,.09);
}


/* --- reveal ------------------------------------------------------ */
.js .rv{opacity:0;transform:translateY(20px);will-change:transform,opacity}
.js .rv.in{
  opacity:1;transform:none;
  transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay:calc(var(--i,0) * 26ms);
}

/* --- focus & a11y ------------------------------------------------ */
:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--slate);color:var(--text);padding:12px 18px;font-size:13px;
}
.skip:focus{left:var(--gut);top:12px}
[hidden]{display:none !important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important}
  .rv,.js .rv{opacity:1;transform:none}
  .step:hover{transform:none}
}
/* ============================================================
   IMMERSION — instrument layer
   A fixed brass globe, a HUD frame, an act rail, staged type.
   All of it is decoration: the page reads fine without any of it.
   ============================================================ */

/* --- the globe --------------------------------------------------- */
#globe{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;height:100lvh;  /* lvh: a collapsing URL bar must not resize it */
  opacity:0;transition:opacity 900ms var(--ease);
}
#globe.lit{opacity:1}

/* A phone has no room for an instrument behind the text, and a fixed canvas
   fights the URL bar every time it slides. On a phone the globe belongs to
   the opening alone: it sits in the document and scrolls away with it. */
@media (max-width:899px){
  #globe{
    position:absolute;top:0;left:0;right:auto;bottom:auto;
    width:100vw;height:100svh;
  }
  /* and only on the home page: a section has no hero, so nothing stands
     between the globe and the first thing the reader is trying to read.
     The script also refuses to start the loop in this case; this is the
     half that holds without it. */
  :root:not([data-page="home"]) #globe{display:none}
}

/* --- HUD frame --------------------------------------------------- */
.hud{position:fixed;inset:0;z-index:40;pointer-events:none;display:none}
@media (min-width:1000px){ .hud{display:block} }
.hud i{position:absolute;width:22px;height:22px;opacity:.5}
.hud i::before,.hud i::after{content:"";position:absolute;background:var(--brass)}
.hud i::before{width:22px;height:1px}
.hud i::after{width:1px;height:22px}
.hud .tl{top:16px;left:16px}
.hud .tr{top:16px;right:16px}
.hud .bl{bottom:16px;left:16px}
.hud .br{bottom:16px;right:16px}
.hud .tl::before,.hud .tl::after{top:0;left:0}
.hud .tr::before{top:0;right:0}
.hud .tr::after{top:0;right:0}
.hud .bl::before{bottom:0;left:0}
.hud .bl::after{bottom:0;left:0}
.hud .br::before{bottom:0;right:0}
.hud .br::after{bottom:0;right:0}
/* Ticks along the top and bottom rules: the corners already say "frame", the
   scale says "instrument". Short marks every 80px, inset clear of the corners. */
.hud b{
  position:absolute;left:64px;right:64px;height:5px;opacity:.28;
  background-image:repeating-linear-gradient(90deg,var(--brass) 0 1px,transparent 1px 80px);
}
.hud b.t{top:16px}
.hud b.b{bottom:16px;transform:scaleY(-1)}

/* facing coordinates — the instrument tells you where it is looking */
.readout{
  position:fixed;right:44px;bottom:20px;z-index:41;pointer-events:none;display:none;
  font-size:9.5px;letter-spacing:.22em;color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.readout b{font-weight:400;color:rgba(var(--brass-rgb),.72)}
@media (min-width:1000px){ .readout{display:block} }

/* --- act rail ---------------------------------------------------- */
.rail{
  position:fixed;left:22px;top:50%;transform:translateY(-50%);
  z-index:45;display:none;flex-direction:column;gap:2px;
}
@media (min-width:1280px){ .rail{display:flex} }
.rail button{
  display:flex;align-items:center;gap:10px;padding:7px 0;
  color:var(--faint);transition:color var(--fast) var(--ease);
}
.rail .tick{
  display:block;width:14px;height:1px;background:currentColor;opacity:.55;
  transition:width var(--mid) var(--ease),opacity var(--fast) var(--ease),
             background var(--fast) var(--ease);
}
.rail .t{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transform:translateX(-4px);
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.rail button:hover{color:var(--text)}
.rail button:hover .tick{width:22px;opacity:1}
.rail button.on{color:var(--brass)}
.rail button.on .tick{width:26px;opacity:1;background:var(--brass)}
/* The word waits for a left margin to stand in. Measured on the home hero:
   the label runs to x=173 while the headline starts at 64 (1280px) and 84
   (1440px) — 109px and 89px of the act's name printed over "orders". Only at
   1500px, where --anchor moves the column right, is the margin real. Below
   that the ticks carry the rail on their own; they end at 48px and clear.
   The label stays in the DOM at opacity 0 — it is the button's accessible
   name, so it must never become display:none. */
@media (min-width:1500px){
  .rail button:hover .t{opacity:1;transform:none}
  .rail button.on .t{opacity:.9;transform:none}
}

/* --- staged display type ------------------------------------------ */
.js .display{opacity:0}
.js .display.split{opacity:1}
.display .ln{display:block;overflow:hidden;padding-bottom:.04em}
.display .ln > i{
  display:block;font-style:inherit;
  transform:translateY(104%);
  transition:transform 1000ms var(--ease);
  transition-delay:calc(var(--l,0) * 105ms + 140ms);
}
.display.split.in .ln > i{transform:none}

@media (prefers-reduced-motion:reduce){
  .js .display,.js .display.split{opacity:1}
  .display .ln > i{transform:none !important;transition:none}
  #globe{transition:none}
}


/* --- contact : the two paths -------------------------------------- */
.paths{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-soft);
  border-block:1px solid var(--rule-soft);margin:calc(var(--u)*2) 0 calc(var(--u)*7);
}
.paths button{
  background:var(--night);padding:calc(var(--u)*3) calc(var(--u)*2.5);text-align:left;
  position:relative;color:var(--muted);
  transition:color var(--fast) var(--ease),background var(--fast) var(--ease);
}
@media (min-width:760px){ .paths button{padding:calc(var(--u)*4) calc(var(--u)*4)} }
.paths button::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--mid) var(--ease);
}
.paths button .p-side{
  display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  margin-bottom:calc(var(--u)*1);
}
@media (min-width:760px){ .paths button .p-side{font-size:11px} }
.paths button .p-name{
  display:block;font-family:var(--serif);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(1.05rem,3.2vw,1.5rem);line-height:1.2;
}
.paths button:hover{color:var(--text);background:linear-gradient(rgba(var(--brass-rgb),.05),rgba(var(--brass-rgb),.05)),var(--night)}
.paths button[aria-selected="true"]{color:var(--text);background:linear-gradient(rgba(var(--brass-rgb),.10),rgba(var(--brass-rgb),.10)),var(--night)}
.paths button[aria-selected="true"]::after{transform:scaleX(1)}
.paths button[aria-selected="true"] .p-side{color:var(--brass)}

/* --- contact : the form ------------------------------------------- */
.form{display:grid;gap:calc(var(--u)*5)}
@media (min-width:760px){ .form{grid-template-columns:1fr 1fr;gap:calc(var(--u)*6) calc(var(--u)*5)} }
.f-full{grid-column:1/-1}
.f{display:flex;flex-direction:column;gap:calc(var(--u)*1.5);min-width:0}
.f > label{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  transition:color var(--fast) var(--ease);
}
@media (min-width:760px){ .f > label{font-size:11px} }
.f:focus-within > label{color:var(--brass)}
.f input,.f select,.f textarea{
  font:inherit;font-size:16px;color:var(--text);background:transparent;
  border:0;border-bottom:1px solid var(--rule);border-radius:0;
  padding:calc(var(--u)*1.5) 0;width:100%;
  transition:border-color var(--fast) var(--ease);
  -webkit-appearance:none;appearance:none;
}
.f textarea{resize:vertical;min-height:calc(var(--u)*15);line-height:1.6}
.f input::placeholder,.f textarea::placeholder{color:rgba(var(--fg-rgb),.22)}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-bottom-color:var(--brass)}
.f select{
  cursor:pointer;padding-right:calc(var(--u)*3);
  background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),
                   linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:calc(100% - 9px) calc(50% + 1px),calc(100% - 4px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.f select option{background:var(--slate);color:var(--text)}
.f input:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  transition:background-color 9999s ease-in-out 0s;
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.f-send{
  display:inline-flex;align-items:center;gap:11px;align-self:start;
  padding:15px 26px;border:1px solid var(--rule);
  font-size:13.5px;letter-spacing:.03em;color:var(--text);
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease),
             opacity var(--fast) var(--ease);
}
.f-send::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);flex:none}
.f-send:hover{border-color:rgba(var(--brass-rgb),.55);background:rgba(var(--brass-rgb),.08)}
.f-send[disabled]{opacity:.45;cursor:default}
.f-send[disabled]:hover{border-color:var(--rule);background:none}

.f-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*3) calc(var(--u)*4);
  margin-top:calc(var(--u)*2);
}
/* the identity line: quiet, but a firm states who it is on every page */
.foot-entity{
  flex-basis:100%;order:9;margin-top:calc(var(--u)*1.5);
  font-size:11px;letter-spacing:.11em;color:var(--faint);
}
.f-status{font-size:13px;color:var(--muted);margin:0;min-height:1.4em}
.f-status.err{color:var(--err)}
.f-status.ok{color:var(--celadon)}
.f-note{
  margin:calc(var(--u)*5) 0 0;font-size:12.5px;line-height:1.7;color:var(--faint);max-width:56ch;
}
.f-note a{border-bottom:1px solid var(--rule);color:var(--muted)}
.f-note a:hover{color:var(--brass);border-bottom-color:rgba(var(--brass-rgb),.55)}

/* the sent state replaces the form outright — nothing left to click twice */
/* the second door, when the endpoint cannot take a filled specification */
.rescue{
  margin-top:calc(var(--u)*3);padding:calc(var(--u)*3);
  border:1px solid rgba(var(--brass-rgb),.34);background:rgba(var(--brass-rgb),.05);
}
.rescue h3{margin:0 0 calc(var(--u)*1);font-size:1.05rem}
.rescue p{margin:0 0 calc(var(--u)*2.5);color:var(--muted);font-size:.92em;max-width:56ch}
.resc-row{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.5)}
.resc-row > *{
  font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 18px;border:1px solid var(--rule);color:var(--text);
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.resc-row > *:hover{border-color:rgba(var(--brass-rgb),.6);background:rgba(var(--brass-rgb),.09)}
.resc-a{color:var(--brass)}

.sent{
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
  padding:calc(var(--u)*8) 0;
}
.sent h3{
  font-family:var(--serif);font-weight:300;letter-spacing:-.015em;
  font-size:clamp(1.4rem,3.6vw,2.2rem);line-height:1.2;margin:0 0 calc(var(--u)*2);
}
.sent p{margin:0;color:var(--muted);max-width:52ch}

/* --- contact : direct channels ------------------------------------ */
.channels{
  display:flex;flex-wrap:wrap;gap:calc(var(--u)*2);margin:calc(var(--u)*6) 0 0;
}
.channel{
  display:inline-flex;align-items:center;gap:10px;padding:11px 18px;
  border:1px solid var(--rule);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease),
             background var(--fast) var(--ease);
}
.channel svg{width:18px;height:18px;fill:currentColor;flex:none;opacity:.8}
.channel:hover{color:var(--text);border-color:rgba(var(--brass-rgb),.5);background:rgba(var(--brass-rgb),.07)}
.channel:hover svg{opacity:1}
.channel .ch-for{color:var(--faint);letter-spacing:.1em;text-transform:none;font-size:11.5px}

/* --- legal ---------------------------------------------------------- */
.legal{max-width:74ch}
.legal h3{
  font-family:var(--serif);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.25;
  margin:calc(var(--u)*8) 0 calc(var(--u)*2);
}
.legal h3:first-of-type{margin-top:calc(var(--u)*6)}
.legal p{margin:0 0 calc(var(--u)*2);color:var(--muted)}
.legal p:last-child{margin-bottom:0}
.legal dl{margin:0;display:grid;gap:calc(var(--u)*1) calc(var(--u)*4)}
@media (min-width:620px){ .legal dl{grid-template-columns:auto 1fr} }
.legal dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding-top:.35em}
.legal dd{margin:0 0 calc(var(--u)*1.5);color:var(--muted)}
.legal a{color:var(--text);border-bottom:1px solid var(--rule)}
.legal a:hover{color:var(--brass);border-bottom-color:rgba(var(--brass-rgb),.55)}
.foot-legal{color:var(--faint) !important;font-size:12px}

/* ==================================================================
   PHONE — the same house, with the air taken out of it.
   Everything below 700px: shorter bands, tighter rows, bigger targets.
   ================================================================== */
@media (max-width:699px){
  .band{padding-block:clamp(44px,11vw,68px)}
  .band + .band > .wrap > .eyebrow{margin-top:0}

  /* the opening does not need three quarters of the screen to itself */
  .hero{min-height:auto;padding-top:calc(var(--u)*14);padding-bottom:calc(var(--u)*10)}
  .kicker{margin-bottom:calc(var(--u)*3)}
  .baseline{margin-top:calc(var(--u)*3)}
  .hero-cta{margin-top:calc(var(--u)*4)}

  /* headings: one notch down, so a Vietnamese line does not run to four rows */
  .display{font-size:clamp(1.75rem,8.2vw,2.4rem);line-height:1.14}
  h2.rv,.band h1.rv,.h-sub{font-size:clamp(1.5rem,6.6vw,2rem);line-height:1.16}
  .spec{font-size:1rem;margin-bottom:calc(var(--u)*5)}
  .lead-quote{font-size:clamp(1.3rem,5.6vw,1.7rem)}
  .statement{font-size:clamp(1.15rem,5.2vw,1.5rem)}

  /* rows */
  .step{padding:calc(var(--u)*3) 0;gap:calc(var(--u)*1.5)}
  .step h3{font-size:1.05rem}
  .step p{font-size:.95em;line-height:1.62}
  .steps{border-top-color:var(--rule-soft)}

  /* cards */
  .col{padding:calc(var(--u)*4) calc(var(--u)*3)}
  .crit{padding:calc(var(--u)*4) calc(var(--u)*3) calc(var(--u)*5)}
  .gate a{padding:calc(var(--u)*4) calc(var(--u)*3) calc(var(--u)*5)}
  /* the 1px gap IS the rule line between cards: widening it paints a grey band */
  .duo,.triad{gap:1px;margin-top:calc(var(--u)*4)}
  .col li{padding-block:calc(var(--u)*1.25);font-size:.95em}
  .col-links{gap:calc(var(--u)*3);margin-top:calc(var(--u)*4)}

  /* questions: a tap target, not a line of type */
  .qa summary{padding:calc(var(--u)*3) calc(var(--u)*6) calc(var(--u)*3) 0;font-size:1.05rem}

  /* the two doors stack: side by side they were three words on three lines each */
  .paths{grid-template-columns:1fr;margin-bottom:calc(var(--u)*5)}
  .paths button{padding:calc(var(--u)*2.5) calc(var(--u)*2.5)}
  .paths .p-name{font-size:1.05rem}
  .form{gap:calc(var(--u)*3)}
  .qa p{font-size:.95em;line-height:1.62}

  /* the closing lines */
  .synthesis{margin-block:calc(var(--u)*5)}
  .reach{padding:calc(var(--u)*3);margin:calc(var(--u)*5) 0 calc(var(--u)*6)}
  .reach-spec{margin-bottom:calc(var(--u)*3)}

  /* footer */
  .foot-grid{gap:calc(var(--u)*4)}
  .foot-right{flex-wrap:wrap;gap:calc(var(--u)*2.5) calc(var(--u)*3)}

  /* the language flags need a thumb-sized hit area */
  .lang{gap:calc(var(--u)*1)}
  .lang button{padding:10px 6px}
  .lang .flag{height:13px}

  /* the bar itself: shorter, and out of the way of the safe area */
  .reachbar a{padding:14px 12px;font-size:11px;letter-spacing:.14em}
  .reachbar .rb-ch{width:52px}
  body{padding-bottom:calc(52px + var(--safe-b))}

  /* the burger sheet: the two market entries carry a flag and a caption */
  .menu nav a{font-size:clamp(1.35rem,6.4vw,1.9rem);padding-block:calc(var(--u)*2)}
  .menu nav a .flag{width:18px}
  .menu .m-drop-t{font-size:clamp(1.35rem,6.4vw,1.9rem);padding-block:calc(var(--u)*2)}
  .menu .m-drop-p a{font-size:clamp(1.1rem,5vw,1.55rem)}
}

/* Narrow phones: the ground rows stop pretending to be a table */
@media (max-width:479px){
  .ground-items{grid-template-columns:1fr}
  .display{font-size:clamp(1.6rem,8.4vw,2.1rem)}
  .reachbar a{font-size:10.5px;padding:13px 8px}
}

/* ------------------------------------------------------------------
   Wide screens. Two things were wrong above 1500px: a 1280 column sat
   marooned in the middle with ~670px of nothing beside it, and a flat
   veil covered the globe everywhere it could have been seen.

   So: one left anchor shared by the header mark, the hero and every
   band, and a veil that keeps its grip under the column and lets go
   toward the right. The globe gets the space that was empty anyway.

   This block runs last on purpose — .hero-inner sets `margin:0 auto`
   further up the file and would otherwise win on source order.
   ------------------------------------------------------------------ */
@media (min-width:1500px){
  :root{ --anchor:max(var(--gut),7.5vw) }

  .band > .wrap,
  .hero-inner{ margin-left:var(--anchor); margin-right:auto }

  /* the header rail spans the full width, its mark on the column's edge */
  .bar{ max-width:none;
       padding-left:calc(var(--anchor) + var(--gut));
       padding-right:calc(var(--gut)*.9) }

  .band::before{
    background:
      linear-gradient(97deg,
        rgba(var(--bg-rgb),.93) 0%,
        rgba(var(--bg-rgb),.91) 46%,
        rgba(var(--bg-rgb),.72) 68%,
        rgba(var(--bg-rgb),.28) 100%);
  }
  .gate-band::before{
    background:
      linear-gradient(97deg,
        rgba(var(--bg-rgb),.74) 0%,rgba(var(--bg-rgb),.64) 60%,rgba(var(--bg-rgb),.24) 100%);
  }
}