/* The flat site: an old sea chart. Written from the spec's "The page", "Navigation", "Paper and texture" and
   "Gradation rules". Styles hang off class names; every value is a token from tokens.css. */

/* ---------- the sheet: grain, rhumb lines and foxing on one still layer behind the page ---------- */
html { background: var(--paper); color: var(--i0); scroll-padding-top: var(--s6); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; overflow-x: clip; font: var(--t1)/var(--leading) var(--face-text);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  /* the rhumb sheet is centred on the compass, bottom right (still there on phones, where the compass is hidden) */
  background: url("../paper/rhumbs.svg") no-repeat right calc(var(--s2) + var(--compass-size) / 2 - 1500px) bottom calc(var(--s2) + var(--compass-size) / 2 - 1500px) / 3000px 3000px,
              url("../paper/grain.png") repeat; }
/* foxing only in the margins, where no text goes: each strip ends where the caption or text column begins */
body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../paper/foxing.svg") repeat-y left calc(var(--edge) - 120px) top 0 / 120px auto,
              url("../paper/foxing.svg") repeat-y right calc(var(--compass-clear) - 120px) top 40vh / 120px auto; }
@media (max-width: 44rem) { body::after { content: none; } }   /* phones: the text runs to the edge */

/* ---------- type ---------- */
p { margin: 0; }
p + p { margin-top: var(--s2); }
h1, h2, h3 { margin: 0; font-weight: 400; }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: var(--fine); text-underline-offset: .2em; }
.leg-text a:hover, .closing a:hover { text-decoration-color: transparent;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 92% / 100% .4em; }
:focus-visible { outline: var(--focus) solid var(--i0); outline-offset: 2px; }

.skip { position: absolute; left: var(--edge); top: var(--s2); z-index: 10; padding: var(--s0) var(--s1); background: var(--paper);
  transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- masthead and menu ---------- */
.masthead { padding: var(--s4) var(--edge) 0; }
.wordmark { font: inherit; }

.menu { position: fixed; z-index: 5; top: var(--s4); right: var(--edge);
  background: var(--paper); box-shadow: 0 0 14px 12px var(--paper); border-radius: 999px; }
.menu ul { display: flex; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.menu a { display: block; text-decoration: none; padding-bottom: var(--s0);
  /* the blue bar sits under the word, with s0 between them */
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 100% 0; }
.menu a:hover { background-image: linear-gradient(color-mix(in srgb, var(--accent) 50%, transparent), color-mix(in srgb, var(--accent) 50%, transparent)); background-size: 100% .3em; }
.menu a[aria-current] { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% .3em; }

/* ---------- a section: one grid, a third for the caption and two thirds for the text ---------- */
main { padding: var(--s5) 0 0; }
.leg { /* the drawing's width: one scale, with a floor on small screens, and never wider than the page's content */
  --iw: min(max(calc(var(--isle) * 1vw), calc(var(--isle) * 7px)), calc(100vw - 2 * var(--edge)));
  --sea-h: calc(var(--iw) * var(--sea));                                 /* how far the engraved sea hangs below the horizon */
  display: grid; padding: 0 var(--edge); margin-bottom: var(--s7);
  grid-template-columns: calc(100% / 3 - var(--s4)) calc(200% / 3 - var(--s4));
  column-gap: calc(2 * var(--s4));
  grid-template-areas: "head isle" "cap text"; align-items: end; }
.leg-head { grid-area: head; font: var(--head)/1 var(--face-head); padding-bottom: var(--s5); }
/* The island is centred on the page, but never closer than s4 to the heading beside it: a Didot letter at heading
   size is at most .6em wide, so a long heading such as "What?" pushes the island right rather than touching it. */
.leg-isle { grid-row: 1; grid-column: 1 / -1; justify-self: start; position: relative;
  margin-left: max(calc(50% - var(--iw) / 2), calc(var(--hl) * .6 * var(--head) + var(--s4)));
  /* the horizon: a full-bleed fine line at i1 under row 1 */
  border-bottom: var(--fine) solid var(--i1);
  border-image: linear-gradient(var(--i1), var(--i1)) 0 0 1 0 / 0 0 var(--fine) 0 / 0 100vw; }
.leg-isle svg { display: block; width: var(--iw); height: auto; overflow: visible; margin-bottom: calc(-1 * var(--sea-h)); }
.leg-caption, .leg-text { align-self: start; margin-top: calc(var(--sea-h) + var(--s3)); }
.leg-caption { grid-area: cap; font-style: italic; color: var(--i1); }
.leg-text { grid-area: text; margin-right: max(0px, calc(var(--compass-clear) - var(--edge))); }
.leg-text h3 { font-size: var(--t2); line-height: 1.25; margin: var(--s4) 0 var(--s1); }
.leg-text h3 + p { margin-top: 0; }

/* the drop cap: Didot, full ink, sinking two lines, with s0 to its right; its paragraph contains it */
.leg-text > p:first-child { display: flow-root; }
.leg-text > p:first-child::first-letter { font-family: var(--face-head); color: var(--i0);
  -webkit-initial-letter: 2; initial-letter: 2; margin-right: var(--s0); }
@supports not ((initial-letter: 2) or (-webkit-initial-letter: 2)) {
  .leg-text > p:first-child::first-letter { float: left; font-size: calc(2 * var(--leading) * 1em * .98); line-height: .8;
    padding-top: .08em; }
}

/* the island drawing: outline and shadow engraving in full ink, sunlit engraving and sea at i2 */
.isle-view .horizon { display: none; }   /* the page draws the horizon edge to edge */
.isle-view .rim { fill: none; stroke: var(--i0); stroke-width: .4; stroke-linejoin: round; }
.isle-view .cut-d { fill: none; stroke: var(--i0); stroke-width: .3; stroke-linecap: round; }
.isle-view .cut-l { fill: none; stroke: var(--i2); stroke-width: .17; stroke-linecap: round; }
.isle-view .cut-s { fill: none; stroke: var(--i2); stroke-width: .2; stroke-linecap: round; }

/* tablets: the columns stack, the island still shares the heading's row */
@media (max-width: 50rem) {
  .leg { grid-template-columns: 100%; column-gap: 0; grid-template-areas: "head" "cap" "text"; }
  .leg-text { margin-top: var(--s2); }
}
/* phones: the islands are too wide to share the heading's row, so the heading moves above */
@media (max-width: 40rem) {
  .leg { grid-template-areas: "head" "isle" "cap" "text"; }
  .leg-head { padding-bottom: var(--s3); }
  .leg-isle { grid-area: isle; justify-self: center; margin-left: 0; }
}

/* ---------- ornaments: engraved marks as ink masks, decoration only (ink at i0 or i1, never the blue) ---------- */
.orn { display: inline-block; vertical-align: middle; background: var(--orn-ink, var(--i0));
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.orn[style*="compass-star"] { aspect-ratio: 169 / 179; }
.orn[style*="scallop"] { aspect-ratio: 154 / 145; }
.orn[style*="wave"] { aspect-ratio: 180 / 120; }
/* the subheading lead: a compass star, the words, then a hairline rule running on to the column's edge */
.leg-text h3.lead { display: flex; align-items: center; gap: var(--s1); }
.leg-text h3.lead::after { content: ''; flex: 1; border-top: var(--hair) solid var(--i1); }
.orn-lead { height: 1em; flex: none; }
/* the end mark: one scallop after the last words of the page */
.orn-end { --orn-ink: var(--i1); height: var(--s3); margin-left: var(--s1); vertical-align: -.35em; }

/* ---------- the closing line, lined up with the text column ---------- */
.closing { padding: 0 var(--edge) var(--s7); color: var(--i1);
  margin-left: calc((100% - 2 * var(--edge)) / 3 + var(--s4)); margin-right: max(0px, calc(var(--compass-clear) - var(--edge))); }
.closing a { white-space: nowrap; color: var(--i0); }
@media (max-width: 50rem) { .closing { margin-left: 0; } }

/* ---------- the compass: fixed bottom right, no background, turning to the current section ---------- */
.compass { --turn: 0; position: fixed; z-index: 5; right: var(--s2); bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  width: var(--compass-size); height: var(--compass-size); }
.compass .rose { position: absolute; inset: 18%; width: 64%; height: 64%; rotate: calc(var(--turn) * -1deg); }
.compass .ring { fill: none; stroke: var(--i1); stroke-width: var(--fine); vector-effect: non-scaling-stroke; }
.compass .tick { stroke: var(--i2); stroke-width: var(--hair); vector-effect: non-scaling-stroke; }
.compass .shade { fill: var(--i0); }
.compass .lit { fill: var(--paper); stroke: var(--i0); stroke-width: var(--hair); vector-effect: non-scaling-stroke; }
.compass a { position: absolute; left: 50%; top: 50%; width: 1.6rem; height: 1.6rem; margin: -.8rem; display: grid; place-items: center;
  font-size: var(--t0); line-height: 1; color: var(--i1); text-decoration: none;
  transform: rotate(calc((var(--a) - var(--turn)) * 1deg)) translateY(calc(var(--compass-size) * -.42)) rotate(calc((var(--turn) - var(--a)) * 1deg)); }
.compass a[aria-current] { color: var(--i0); }
@media (prefers-reduced-motion: no-preference) {
  .compass .rose, .compass a { transition: rotate .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
}

/* ---------- phones (44rem and below): the compass hides and the menu moves to the foot, under the thumb ---------- */
@media (max-width: 44rem) {
  html { scroll-padding-top: var(--s4); }
  .compass { display: none; }
  .leg-text, .closing { margin-right: 0; }
  .menu { top: auto; bottom: 0; left: 0; right: 0; border-radius: 0; box-shadow: none;
    padding: var(--s3) var(--edge) calc(var(--s1) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--paper) 70%, color-mix(in srgb, var(--paper) 0%, transparent)); }
  .menu ul { justify-content: space-between; gap: 0; }
  .closing { padding-bottom: calc(var(--s7) + var(--s5)); }   /* the menu never covers the closing line */
}