/* web.vi v2 shared system. Owned by the lead; parts read it, never edit it. */
@font-face{font-family:"Fraktur";src:url(/v2/fonts/unifraktur.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Didone";src:url(/v2/fonts/noto-serif-display.woff2) format("woff2");font-weight:100 900;font-stretch:62.5% 100%;font-display:swap}
@font-face{font-family:"Didone";src:url(/v2/fonts/noto-serif-display-italic.woff2) format("woff2");font-weight:100 900;font-stretch:62.5% 100%;font-style:italic;font-display:swap}
@font-face{font-family:"Garamond";src:url(/v2/fonts/eb-garamond.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Garamond";src:url(/v2/fonts/eb-garamond-italic.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/v2/fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/v2/fonts/plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jacquard";src:url(/v2/fonts/jacquard-24.woff2) format("woff2");font-display:swap}

:root{
  /* ground: a museum at night */
  --night:#050708;
  --night-2:#0B1012;
  --night-3:#131A1D;
  /* marble */
  --marble:#ECE7DC;
  --marble-2:#BDB6A8;
  --ash:#7D8683;
  /* light */
  --lagoon:#46E8D4;      /* Caribbean shallow-water light: the "alive" energy */
  --lagoon-deep:#0C8F86;
  --flame:#E2352B;       /* flamboyant-tree red: rare, for the sun/moon and urgency */
  --brass:#C7A35A;       /* engraved hairlines, inherited from the parent brand; sparing */

  --fraktur:"Fraktur",serif;                    /* display moments: rings, giant words */
  --didone:"Didone","Times New Roman",serif;    /* headlines; condensed via font-stretch */
  --garamond:"Garamond",Georgia,serif;          /* reading text */
  --mono:"Plex Mono",ui-monospace,monospace;    /* technical annotations */
  --pixel:"Jacquard",monospace;                 /* digital blackletter, rare */

  --g:20px;
  --ease:cubic-bezier(.2,.7,0,1);
}
@media (min-width:900px){:root{--g:clamp(32px,3.2vw,64px)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--marble);font:400 19px/1.5 var(--garamond);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
/* browsers leave <source> inline, so a picture set to display:contents would hand it a grid or flex slot */
source{display:none}
p,h1,h2,h3{margin:0}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lagoon);outline-offset:3px}
::selection{background:var(--lagoon);color:var(--night)}

/* One museum: every plate shares the same grain, vignette and light.
   Key light comes from the UPPER LEFT, warm marble white (--key). A faint lagoon rim
   light comes from the LOWER RIGHT (--rim). Rendered statues use --marble-lit in the light
   and --marble-shade in shadow. Keep any 3D lighting consistent with this. */
:root{
  --key:#F6F1E7; --rim:#46E8D4; --marble-lit:#E9E3D6; --marble-shade:#2B3438;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* .plate: a full section of the museum. Adds grain and vignette above its content. */
.plate{position:relative;isolation:isolate;background:var(--night)}
.plate::after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55)),var(--grain);
  background-size:auto,220px 220px;opacity:.9;mix-blend-mode:normal}
.plate.no-vignette::after{background:var(--grain);background-size:220px 220px;opacity:.5}

/* Grounds. The page alternates night, sea and paper so it reads as an island business,
   not a dark tech site. A plate declares its ground with data-tone="light" (paper) or
   data-tone="sea"; the header follows whichever plate sits under it. */
:root{
  --paper:#EEE9DE; --paper-2:#E2DCCF; --ink:#0F1A1B; --ink-2:#3E4B4A;
  --sea:#062F2D; --sea-2:#0A3D3A; --foam:#A9C4BE;
  --grain-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .05 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.plate[data-tone=light]{background:var(--paper);color:var(--ink)}
.plate[data-tone=light]::after{background:radial-gradient(130% 100% at 50% 40%,transparent 62%,rgba(70,55,30,.1)),var(--grain-ink);background-size:auto,220px 220px;opacity:1}
.plate[data-tone=sea]{background:var(--sea)}