/* ==========================================================================
   HYDRA — design system
   Polestar Technology · polestartech.co

   World: a pulled screenprint.

   Six flat inks butted against each other on white paper, each landing a hair
   off true registration, and a press line where the ink stops. A screen lays
   ink only where it is open; here it is open only as far as the evidence
   goes, and the years past that line are a bare outline on bare paper. That
   is the artefact an electrolyser project does not have and exactly what this
   company sells, so the sheet is not a metaphor laid over the product — the
   product's own argument is what is printed.

   Nobody finances a curve on the builder's word.

   A hydrographic-chart world shipped here before this one, and some of its
   class names survive because they still describe what they do — .neatline,
   .zoc, .datum, .title-block, .source-diagram. They are load-bearing; the
   world they were named for is not. Do not reason from the names.

   See DESIGN.md (written at finish, from the built world).
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */

/* Spectral — the read. Every structural and numeric moment on the sheet is set
   in block-cap Archivo, so the serif's whole job is the sentences underneath,
   at length, in a lit room. Spectral has a true italic rather than a slanted
   roman, which is what carries an aside inside a paragraph without reaching
   for a second weight. */
@font-face{
  font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/spectral-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/spectral-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/spectral-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/spectral-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Spectral';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/spectral-800-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Spectral';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/spectral-800-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/spectral-italic-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/spectral-italic-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Archivo — the survey office's own lettering. Variable width, so title
   blocks, caution panels and graticule labels can be condensed the way
   chart furniture is, without a second family. */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;
  src:url(fonts/archivo-400700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;
  src:url(fonts/archivo-400700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* The previous world's faces stay declared, and only that. Until the other
   thirty-two pages are moved onto this system they still name Bebas, Syne and
   JetBrains Mono in their own inline CSS; removing the declarations would
   drop them to system fallbacks mid-transition. The unicode-range means a
   page that does not name them downloads nothing. */
@font-face{
  font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/bebas-neue-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/syne-400800-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url(fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* --------------------------------------------------------------- tokens -- */

:root{
  /* One sheet, white throughout. The alternating cream band was a rendition
     reflex twice over: the brief pins a white background, and a chart is a
     single sheet rather than a stack of tinted panels. The neatline and its
     graticule ticks already separate one section from the next, which is how
     a chart does it. */
  --paper:#FFFFFF;
  --paper-2:#FFFFFF;
  --paper-3:#FFFFFF;
  --ink:#101418;            /* 18.5:1 on --paper */

  /* the water. Graduated depth tints, shallow to deep. Backgrounds only —
     soundings print in ink on top of them, so every step stays light. */
  --d1:#EAF2EC;
  --d2:#D5E7DB;
  --d3:#BEDBCA;
  --d4:#A4CDB6;
  --d5:#86BE9F;
  --d6:#66AE86;

  /* line and text greens */
  --depth:#2E7D5B;          /* 4.86:1 on --paper — unprinted ridges, measured values */
  --depth-deep:#1B5B41;     /* the heaviest green that can carry text; emphasis */
  --muted:#5F6D66;          /* 5.28:1 on --paper */
  --faint:#64726B;          /* 5.35:1 on white. Kept at this value rather than
                               lightened back: it was set when the footer sat
                               on a tinted ground, and the tint is gone, but a
                               quiet tone that also survives a tinted surface
                               is the one worth keeping. */

  /* magenta is the chart's caution ink. It means one thing: attend to this. */
  --caution:#C2185B;        /* 5.71:1 on --paper */
  --caution-wash:#FBEAF1;

  /* rules */
  --rule:rgba(16,20,24,0.14);
  --rule-strong:rgba(16,20,24,0.30);
  --neatline:rgba(16,20,24,0.55);   /* the chart border */

  /* faces */
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  /* The poster face. Archivo at full width and full weight, set in caps, is a
     block cap — the same object a silkscreened caption bar is lettered in.
     Named --poster rather than --display on purpose: --display is one of the
     ten aliases the other thirty-two pages still reference and nothing
     defines, and defining it here would silently restyle all of them. */
  --poster:'Archivo',system-ui,-apple-system,sans-serif;

  /* The field. Namespaced so they cannot collide with those same aliases.
     --field-lift is how tall the terrain stands relative to the frame,
     --field-grain how far the ink edges ripple off true registration, and
     --field-loop how many seconds one pass of the press takes. */
  --field-lift:0.62;
  --field-grain:0.55;
  --field-loop:26;

  /* type scale */
  /* The minima are what a 390px phone actually gets, and 2.5rem of an
     800-weight serif does not fit a nine-letter word inside a 350px measure.
     The vw term carries the scale up; the floor only has to be readable. */
  --t-display:clamp(2rem,6.4vw,5.25rem);
  --t-h2:clamp(1.625rem,3.8vw,3rem);
  --t-h3:clamp(1.1875rem,2.1vw,1.625rem);
  --t-lead:clamp(1.0625rem,1.3vw,1.1875rem);
  --t-body:1.0625rem;       /* 17 */
  --t-small:0.9375rem;      /* 15 */
  --t-label:0.75rem;        /* 12 — title-block and caution lettering */
  --t-sounding:0.8125rem;   /* 13 — figures printed on the water */

  /* space */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px;  --s9:96px;  --s10:128px;

  --gutter:clamp(1.25rem,5vw,3.5rem);
  --section-y:clamp(4.5rem,9vw,8rem);
  --measure:70ch;

  --ease:cubic-bezier(0.16,1,0.3,1);
  --nav-h:68px;
}

/* ----------------------------------------------------------------- base -- */

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + var(--s5));
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--t-body);
  line-height:1.7;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:oldstyle-nums proportional-nums;
}

/* Browser surfaces belong to the design system, not to the browser. */
::selection{background:#CDE6D8;color:var(--ink)}
:root{scrollbar-color:var(--rule-strong) var(--paper);caret-color:var(--depth)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--rule-strong);border:3px solid var(--paper);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

:focus-visible{outline:2px solid var(--caution);outline-offset:2px;border-radius:1px}
:focus:not(:focus-visible){outline:none}

img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}

h1,h2,h3{
  font-family:var(--serif);font-weight:800;
  letter-spacing:-0.022em;line-height:1.02;
  text-wrap:balance;color:var(--ink);
}
/* The one block cap on any sheet. A poster carries a single imperative and
   sets it in caps at full width; everything below it reads in the serif.
   Scoped to h1 deliberately — it appears once per page and is short on every
   page in the site, so the thirty-two pages inheriting this sheet get the new
   voice without a caps treatment landing on a heading written for sentence
   case. */
h1{
  font-family:var(--poster);font-weight:700;font-stretch:100%;
  font-size:var(--t-display);line-height:0.94;
  letter-spacing:-0.012em;text-transform:uppercase;
}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);font-weight:600;line-height:1.2;letter-spacing:-0.012em}
h4{
  font-family:var(--sans);font-size:0.9375rem;font-weight:700;
  letter-spacing:0.005em;line-height:1.4;color:var(--ink);
}

p{max-width:var(--measure);text-wrap:pretty}
strong{font-weight:600;color:var(--ink)}
em{font-style:italic}
a{color:inherit;text-underline-offset:0.18em;text-decoration-thickness:from-font}
a:hover{text-decoration-color:var(--depth)}

/* Every figure on a chart is tabular and lining, never old-style: soundings
   have to align in columns and read as measurements. */
.num,table td.num,table th.num,.sounding,.readout-value,.zoc td{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--ink);color:var(--paper);
  padding:var(--s3) var(--s5);font-family:var(--sans);font-weight:700;text-decoration:none;
}
.skip-link:focus{left:var(--s4);top:var(--s4)}

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

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

/* --------------------------------------------------------------- layout -- */

.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{width:100%;max-width:900px;margin-inline:auto;padding-inline:var(--gutter)}

/* The neatline is the chart's border, and on a chart it is a real object with
   a graticule ruled into it, not a decorative hairline. Sections are separated
   by it, and the tick marks are drawn by the gradient below. */
.section{
  padding-top:var(--section-y);padding-bottom:var(--section-y);
  border-top:1px solid var(--rule);position:relative;
}
.section:first-of-type{border-top:none}
/* The trim edge. A poster is pulled on a sheet and the sheet has a top: one
   flat ink band, the lightest in the scale, run full bleed. Drawn as a
   pseudo-element with its own height rather than as the section's
   background-image — as a background it becomes the computed ground for every
   word in the section, which is both wrong and, to anything measuring
   contrast, alarming. */
.section--ticked::before{
  content:'';position:absolute;inset-block-start:0;inset-inline:0;
  height:5px;pointer-events:none;background:var(--d2);
}

/* Reading sections. Separated by a heavier neatline rather than by a tint. */
.section--land{border-top-color:var(--neatline)}

.lead{
  font-size:var(--t-lead);line-height:1.55;color:var(--ink);
  max-width:58ch;
}
.prose{color:var(--muted)}
.prose p + p{margin-top:var(--s5)}
.prose h3{margin-top:var(--s7);margin-bottom:var(--s3);color:var(--ink)}
.prose h3:first-child{margin-top:0}
.prose strong{color:var(--ink)}

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

/* ---------------------------------------------------------- the poster -- */

/* The caption bar. On a WPA sheet the scene is composed above and one
   imperative is set in block caps in the bar beneath it, and the bar is the
   only place caps appear. Here it is the section device: a sheet states
   exactly one thing, in the bar, and then shows it. */
/* Plate number at the top right, level with the first line of the imperative —
   where a printed sheet numbers itself. Aligned to the end of the bar it sank
   to the foot of a three-line heading and read as a stray caption. */
/* Content-led, not edge-pinned. Pushed to the far edge with space-between, the
   plate number floated alone in forty percent of empty sheet and read as an
   unfinished second column; set beside the imperative it reads as what it is,
   a number stamped next to the title. */
.bar{
  display:flex;align-items:flex-start;justify-content:flex-start;
  gap:var(--s5) var(--s7);flex-wrap:wrap;
  padding-top:var(--s4);padding-bottom:var(--s4);
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--rule);
}
.bar > h2,.bar > h3,.bar > p.bar-line{
  font-family:var(--poster);font-weight:700;font-stretch:100%;
  text-transform:uppercase;letter-spacing:-0.006em;line-height:1.0;
  color:var(--ink);max-width:24ch;margin:0;
}
.bar > h2{font-size:clamp(1.375rem,3.1vw,2.5rem)}
.bar > h3{font-size:clamp(1.0625rem,1.9vw,1.4375rem)}
.bar-index{
  font-family:var(--poster);font-size:var(--t-label);font-weight:700;
  font-stretch:88%;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--depth);white-space:nowrap;padding-top:0.5em;
}
.bar-index b{font-weight:700;color:var(--ink)}
/* The bar is the sheet's top edge, so the rule above a heading is the bar's
   own border and nothing is owed above it. */
.sheet > .bar:first-child{border-top-width:2px;padding-top:0}

/* The plane stack. Six flat inks, foreground to sky, edges fixed. It is the
   same ramp the field prints in, at rule scale, so a reader who has looked at
   the terrain already knows what the band under a heading means. */
.planes{
  display:block;height:var(--planes-h,10px);
  background:linear-gradient(
    to bottom,
    var(--d1) 0 16.6667%, var(--d2) 16.6667% 33.3333%,
    var(--d3) 33.3333% 50%,  var(--d4) 50% 66.6667%,
    var(--d5) 66.6667% 83.3333%, var(--d6) 83.3333% 100%);
}
.planes--tall{--planes-h:22px}

/* One sentence, set at the scale a poster sets its subhead. Not a lead
   paragraph in disguise: if it needs two sentences it is prose and belongs in
   a .prose block instead. */
.imperative{
  font-family:var(--poster);font-weight:700;font-stretch:100%;
  font-size:clamp(1.0625rem,1.6vw,1.3125rem);line-height:1.25;
  letter-spacing:-0.004em;color:var(--ink);max-width:38ch;
}

.stack-2>*+*{margin-top:var(--s2)}
.stack-3>*+*{margin-top:var(--s3)}
.stack-4>*+*{margin-top:var(--s4)}
.stack-5>*+*{margin-top:var(--s5)}
.stack-6>*+*{margin-top:var(--s6)}
.stack-7>*+*{margin-top:var(--s7)}

/* -------------------------------------------------- chart furniture ----- */

/* Title block. Every chart carries one: what this sheet is, at what scale,
   on what projection, reduced to what datum. Ours says what the figures are
   and what they are not. */
.title-block{
  border:1px solid var(--neatline);
  background:var(--paper);
  padding:var(--s5) var(--s6) var(--s6);
  max-width:44ch;
}
.title-block > h2,.title-block > h3{margin-bottom:var(--s4)}
.title-block dl{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s5);
  font-size:var(--t-small);
}
.title-block dt{
  font-family:var(--sans);font-size:var(--t-label);font-weight:700;
  font-stretch:88%;letter-spacing:0.07em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;padding-top:0.28em;
}
.title-block dd{color:var(--ink);line-height:1.5}
@media(max-width:560px){
  .title-block dl{grid-template-columns:1fr;gap:var(--s1)}
  .title-block dd{margin-bottom:var(--s3)}
}

/* The datum note. On a chart this is the single most load-bearing sentence
   on the sheet — every depth printed is meaningless without it. */
/* Sentence case, deliberately. A chart letters its datum note in small caps,
   but a chart's datum note is eight words — two hundred characters of caps is
   a paragraph nobody reads, and this is the one paragraph on the page that
   must be read. The sans face and the wider tracking keep it reading as
   furniture rather than prose. */
.datum{
  font-family:var(--sans);font-size:var(--t-small);font-stretch:92%;
  letter-spacing:0.01em;color:var(--muted);
  line-height:1.65;max-width:80ch;
}
.datum strong{color:var(--ink);font-weight:700}

/* Caution. Magenta, ruled, and never used for anything that is not a
   warning — the whole point of a caution ink is that it is scarce. */
.caution{
  border:1px solid var(--caution);
  background:var(--caution-wash);
  padding:var(--s5) var(--s6);
  max-width:76ch;
}
.caution > h3{
  font-family:var(--sans);font-size:var(--t-label);font-weight:700;
  font-stretch:88%;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--caution);margin-bottom:var(--s3);
}
.caution p{font-size:var(--t-small);color:var(--ink);max-width:none}
.caution p + p{margin-top:var(--s3)}

/* Source data diagram. Charts print an inset showing which surveys built
   them, when, and how good each was. This is the company's entire argument
   rendered as a piece of standard chart furniture. */
.source-diagram{
  border:1px solid var(--neatline);background:var(--paper);
  padding:var(--s5) var(--s6) var(--s6);
}
.source-diagram > h3{
  font-family:var(--sans);font-size:var(--t-label);font-weight:700;
  font-stretch:88%;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s4);
}

/* Zone of confidence. The chart states, per region, how much to trust it. */
table.zoc,table.data-table{
  width:100%;border-collapse:collapse;
  font-size:var(--t-small);
}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:var(--s5)}
.table-wrap table{min-width:560px}
table caption{
  caption-side:top;text-align:left;padding-bottom:var(--s3);
  font-family:var(--sans);font-size:var(--t-label);font-stretch:88%;
  letter-spacing:0.07em;text-transform:uppercase;color:var(--faint);
}
table.zoc th,table.data-table th,
table.zoc td,table.data-table td{
  text-align:left;vertical-align:baseline;
  padding:var(--s3) var(--s5) var(--s3) 0;
  border-bottom:1px solid var(--rule);line-height:1.55;
}
table.zoc thead th,table.data-table thead th{
  font-family:var(--sans);font-size:var(--t-label);font-weight:700;
  font-stretch:88%;letter-spacing:0.07em;text-transform:uppercase;
  color:var(--muted);border-bottom-color:var(--neatline);
  padding-bottom:var(--s2);white-space:nowrap;
}
table.zoc tbody th,table.data-table tbody th{
  font-family:var(--sans);font-weight:700;color:var(--ink);white-space:nowrap;
}
table.zoc td,table.data-table td{color:var(--muted)}
table.zoc td.num,table.data-table td.num{color:var(--depth-deep);text-align:right;padding-right:var(--s6)}
table.zoc tbody tr:last-child th,table.zoc tbody tr:last-child td,
table.data-table tbody tr:last-child th,table.data-table tbody tr:last-child td{border-bottom:none}

/* Below 560px a 560px-wide table inside overflow-x:auto hides its last column
   with no scrollbar and no affordance, so a comparison ships one of the two
   things it compares. These tables stack instead: the row header becomes a
   heading and each cell carries its column name in the margin. */
@media(max-width:560px){
  .table-wrap{overflow-x:visible}
  .table-wrap table{min-width:0}
  table.zoc,table.data-table,
  table.zoc tbody,table.data-table tbody,
  table.zoc tr,table.data-table tr,
  table.zoc td,table.data-table td,
  table.zoc tbody th,table.data-table tbody th{display:block;width:auto}
  table.zoc thead,table.data-table thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  /* A caption on a display:block table shrink-to-fits and folds a nine-word
     line into a five-character column. */
  table.zoc > caption,table.data-table > caption{display:block;width:auto}
  table.zoc tbody tr,table.data-table tbody tr{
    padding-top:var(--s4);padding-bottom:var(--s4);
    border-bottom:1px solid var(--rule);
  }
  table.zoc tbody tr:last-child,table.data-table tbody tr:last-child{border-bottom:none}
  table.zoc tbody th,table.data-table tbody th{
    white-space:normal;padding:0 0 var(--s3);border-bottom:none;
    font-family:var(--poster);font-size:0.9375rem;font-stretch:100%;
    letter-spacing:-0.004em;text-transform:uppercase;
  }
  table.zoc td,table.data-table td{
    padding:0 0 var(--s3);border-bottom:none;
  }
  table.zoc td:last-child,table.data-table td:last-child{padding-bottom:0}
  table.zoc td[data-col]::before,table.data-table td[data-col]::before{
    content:attr(data-col);display:block;margin-bottom:2px;
    font-family:var(--poster);font-size:var(--t-label);font-weight:700;
    font-stretch:88%;letter-spacing:0.09em;text-transform:uppercase;
    color:var(--depth);
  }
  table.zoc td.num,table.data-table td.num{text-align:left;padding-right:0}
}

/* Confidence status, lettered onto the ink it belongs to. Surveyed / modelled
   / unsurveyed is the same scale the sheet prints in: solid ink where the
   evidence goes, paler where it is modelled, bare paper where nothing has
   been measured. The column reads as the picture rather than as a word
   repeated four times down a table. */
.zoc td .zone{
  display:inline-block;padding:2px var(--s3);border-radius:1px;
  font-family:var(--sans);font-size:var(--t-label);font-weight:700;
  font-stretch:88%;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
}
.zone--surveyed{background:var(--d5)}
.zone--modelled{background:var(--d3)}
.zone--unsurveyed{
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule-strong);
  color:var(--muted);
}

/* A sounding: a measured value printed directly on the water, in italic,
   the way every chart in the world prints depth. */
.sounding{
  font-style:italic;font-size:var(--t-sounding);
  color:var(--depth-deep);white-space:nowrap;
}

/* The big readouts are soundings at plate scale. */
.readout{
  padding-top:var(--s5);padding-bottom:var(--s5);
  border-top:1px solid var(--rule);
}
/* A poster sets its figures in the same block cap it sets its imperative in.
   The italic serif these were lettered in belonged to a chart's soundings,
   and a chart is not what this sheet is any more. */
.readout-value{
  font-family:var(--poster);font-weight:700;font-stretch:100%;
  font-size:clamp(1.875rem,3.4vw,2.625rem);line-height:1.02;
  text-transform:uppercase;color:var(--depth-deep);letter-spacing:-0.012em;
}
.readout-value .unit{
  font-family:var(--poster);font-weight:700;font-stretch:88%;
  font-size:0.8125rem;color:var(--muted);margin-left:0.5em;
  letter-spacing:0.09em;display:block;margin-top:var(--s2);
}
.readout-label{
  margin-top:var(--s2);font-size:var(--t-small);color:var(--muted);
  line-height:1.5;max-width:36ch;
}
.readout-label strong{color:var(--ink)}

/* Notices. A chart is corrected by dated, numbered notices, and the
   correction history stays on the sheet. Append-only, in print, since 1834. */
.notice{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3) var(--s5);
  padding-top:var(--s4);padding-bottom:var(--s4);
  border-top:1px solid var(--rule);
  font-size:var(--t-small);
}
.notice-n{
  font-family:var(--sans);font-size:var(--t-label);font-weight:700;
  font-stretch:88%;letter-spacing:0.06em;color:var(--depth);
  white-space:nowrap;padding-top:0.25em;
}
.notice p{color:var(--muted);max-width:64ch}
@media(max-width:560px){
  .notice{grid-template-columns:1fr;gap:var(--s1)}
}

/* ------------------------------------------------------------- controls -- */

/* A poster's action is lettered in the same block caps as its caption bar.
   A stock button inside a committed form is a lapse, so the button is the
   bar at small scale rather than a rounded pill borrowed from elsewhere. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--poster);font-size:0.8125rem;font-weight:700;
  font-stretch:88%;letter-spacing:0.09em;text-transform:uppercase;
  line-height:1;text-decoration:none;
  padding:var(--s4) var(--s6);border:1px solid transparent;border-radius:1px;
  cursor:pointer;min-height:46px;
  transition:background .18s var(--ease),color .18s var(--ease),
    border-color .18s var(--ease),transform .18s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:var(--depth-deep)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--neatline)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(16,20,24,0.035)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;pointer-events:none;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}

.link-quiet{color:var(--muted);text-decoration:none}
.link-quiet:hover{color:var(--ink);text-decoration:underline}

/* ------------------------------------------------------------------ nav -- */

.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:200;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding-inline:var(--gutter);
  border-bottom:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.nav.is-stuck,nav.is-stuck{
  /* White, not the cream this was left at when the sheet was still tinted. */
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  border-bottom-color:var(--neatline);
}
.nav-brand{
  display:inline-flex;align-items:baseline;gap:var(--s2);
  font-family:var(--sans);font-weight:700;font-stretch:88%;
  font-size:1rem;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.nav-brand .brand-sub{
  font-weight:400;font-size:0.75rem;letter-spacing:0.05em;
  text-transform:none;color:var(--muted);
}
.nav-list,.nav-links{display:flex;align-items:center;gap:var(--s5);list-style:none}
/* Two nav dialects ship on this site: .nav-list on the sheets authored
   against this stylesheet, .nav-links on the thirty-one pages the codemod
   adopted. Both are addressed here so the shell is one shell, and neither is
   renamed, because hydra-nav.js derives the mobile drawer from .nav-links and
   a rename would silently remove the menu from those pages. */
.nav-list a,.nav-links a{
  font-family:var(--poster);font-size:0.8125rem;font-weight:700;
  font-stretch:88%;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;white-space:nowrap;
  transition:color .18s var(--ease);
}
.nav-list a:hover,.nav-list a[aria-current="page"],
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-list a[aria-current="page"],.nav-links a[aria-current="page"]{
  text-decoration:underline;text-decoration-color:var(--depth);
  text-underline-offset:0.45em;text-decoration-thickness:2px;
}

.nav-actions{display:flex;align-items:center;gap:var(--s3)}
.nav-actions .btn{padding:var(--s3) var(--s4);min-height:38px;font-size:var(--t-small)}

.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;background:transparent;border:1px solid var(--neatline);
  border-radius:1px;cursor:pointer;color:var(--ink);
}
.nav-toggle-bars{display:block;position:relative;width:18px;height:1px;background:currentColor}
.nav-toggle-bars::before,.nav-toggle-bars::after{
  content:'';position:absolute;left:0;width:18px;height:1px;background:currentColor;
  transition:transform .22s var(--ease),opacity .18s var(--ease);
}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}

.nav-drawer{
  position:fixed;inset:0;z-index:190;
  background:var(--paper);
  padding:calc(var(--nav-h) + var(--s6)) var(--gutter) var(--s7);
  display:flex;flex-direction:column;gap:var(--s5);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.nav-drawer[data-open="true"]{opacity:1;visibility:visible;transform:none}
.nav-drawer ul{list-style:none;display:flex;flex-direction:column}
.nav-drawer li + li{border-top:1px solid var(--rule)}
/* At drawer scale these are headings, not labels, so they take the poster
   face at poster size rather than the nav's small tracked caps. */
.nav-drawer ul a{
  display:block;padding:var(--s4) 0;
  font-family:var(--poster);font-weight:700;font-stretch:100%;
  font-size:1.5rem;line-height:1.05;letter-spacing:-0.008em;
  text-transform:uppercase;
  color:var(--ink);text-decoration:none;
}
.nav-drawer ul a[aria-current="page"]{color:var(--depth-deep)}
.nav-drawer .btn{width:100%}
body[data-nav-open="true"]{overflow:hidden}

@media(max-width:900px){
  .nav-list{display:none}
  .nav-actions .btn--ghost{display:none}
  .nav-toggle{display:inline-flex}
}
@media(min-width:901px){ .nav-drawer{display:none} }
@media(max-width:560px){
  .nav-actions .btn--primary{display:none}
  .nav-brand .brand-sub{display:none}
}

/* --------------------------------------------------------------- footer -- */

.footer{
  border-top:1px solid var(--neatline);
  background:var(--paper);
  padding-top:var(--s8);padding-bottom:var(--s7);
  color:var(--muted);
}
.footer-grid{
  display:grid;gap:var(--s7);
  grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(140px,1fr));
}
.footer h2{
  font-family:var(--sans);font-size:var(--t-label);font-weight:700;
  font-stretch:88%;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:var(--s4);
}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.footer a{color:var(--muted);text-decoration:none;font-size:var(--t-small)}
.footer a:hover{color:var(--ink);text-decoration:underline}
.footer-brand{
  font-family:var(--sans);font-weight:700;font-stretch:88%;
  font-size:1rem;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--ink);display:block;margin-bottom:var(--s3);
}
.footer-legal{
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  align-items:baseline;justify-content:space-between;
  font-size:var(--t-small);color:var(--faint);
}
.footer-legal p{max-width:none}
@media(max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand-col{grid-column:1 / -1}
}
@media(max-width:520px){ .footer-grid{grid-template-columns:1fr} }

/* ------------------------------------------------------------- glossary -- */
/* Reachable by tap and by keyboard, not only by hover. */

.term{
  position:relative;display:inline;
  font:inherit;color:inherit;background:none;border:0;padding:0;
  border-bottom:1px dotted var(--rule-strong);
  cursor:help;text-align:left;
}
.term:hover,.term[aria-expanded="true"]{border-bottom-color:var(--depth)}
.term-def{
  position:absolute;bottom:calc(100% + 9px);left:auto;right:0;z-index:300;
  /* Bounded by the viewport, not only by a fraction of it: the popover is
     positioned from its term, so on a term sitting near the right edge an
     80vw box still ends up past the screen. It is hidden until opened, but a
     hidden box still sets the document's scroll width. */
  width:max-content;max-width:min(300px,calc(100vw - 2.5rem));
  padding:var(--s3) var(--s4);
  background:var(--ink);color:var(--paper);
  border-radius:1px;
  font-family:var(--sans);font-size:0.8125rem;line-height:1.5;
  text-transform:none;letter-spacing:0;font-style:normal;
  box-shadow:0 10px 28px -10px rgba(16,20,24,0.45);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
}
.term[aria-expanded="true"] .term-def{opacity:1;visibility:visible;transform:none}
@media(hover:hover){ .term:hover .term-def{opacity:1;visibility:visible;transform:none} }
.term-def::after{
  content:'';position:absolute;top:100%;left:14px;
  border:6px solid transparent;border-top-color:var(--ink);
}

/* ----------------------------------------------------------------- misc -- */

.chips{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none}
.chip{
  font-family:var(--sans);font-size:0.8125rem;color:var(--muted);
  border:1px solid var(--rule-strong);border-radius:1px;
  padding:var(--s1) var(--s3);
}
.chip--depth{color:var(--depth-deep);border-color:var(--depth)}
/* Wrapping freely at narrow the row came out four ragged lines of one and two.
   A deliberate two-up grid is an arrangement; the ragged version was an
   accident the flex algorithm chose. */
@media(max-width:560px){
  .chips{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
  .chip{text-align:center}
  .chips > li:last-child:nth-child(odd){grid-column:1 / -1}
}

.note{
  font-size:var(--t-small);color:var(--muted);font-style:italic;
  border-left:1px solid var(--rule-strong);padding-left:var(--s4);
}

details.faq{border-bottom:1px solid var(--rule)}
details.faq summary{
  list-style:none;cursor:pointer;padding-top:var(--s5);padding-bottom:var(--s5);
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);
  font-family:var(--serif);font-weight:600;font-size:var(--t-h3);
  line-height:1.25;color:var(--ink);
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:'';flex-shrink:0;width:11px;height:11px;margin-top:0.45em;
  border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
details.faq[open] summary::after{transform:rotate(-135deg)}
details.faq > div{padding-bottom:var(--s5);color:var(--muted)}
details.faq > div p{max-width:72ch}
details.faq > div p + p{margin-top:var(--s4)}