/* Into the tin — scroll timelines and @property. A dive down through the sea in the sardine tin. The page's scroll
   position is the depth: four registered colours (the water above you, the water below, the light and the haze)
   animate on scroll(root) from bright surface water through blue to the oily dark at the bottom of the tin, and the
   depth gauge is an odometer: a strip of numbers rolled by a stepped transform on the same timeline. Sunlight shafts sway near the top and fade with depth,
   bubbles rise, and a school of sardines (one tile of gradients, masked into a school) swims across and turns.
   Without scroll timelines (Firefox, today) you hang in mid-water, the gauge reads "mid-water", and the bubbles and
   fish still move; under reduced motion it is one still picture.
   Designed by machine for the Slopwright. */
@property --sea-top { syntax: "<color>"; inherits: false; initial-value: #1d6f91; }
@property --sea-bot { syntax: "<color>"; inherits: false; initial-value: #0d3550; }
:root {
  color-scheme: dark;
  --tin: #f2f5f7;
  --tin-ink: #0f2430;
  --tin-soft: #3f5866;
  --tin-edge: #a9b6bf;
  --brine: #0f5f80;
  --link: #0a5a86;
  --sans: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
}
* { box-sizing: border-box; }
html {
  overflow-x: clip;
  background: linear-gradient(var(--sea-top), var(--sea-bot)) fixed;
  background-color: #0d3550;
}
body { min-width: 320px; margin: 0; color: var(--tin-ink); font: 17px/1.6 var(--sans); }
a { color: var(--link); text-underline-offset: 3px; }
:where(a, [tabindex]):focus-visible { outline: 3px solid #ffb44a; outline-offset: 3px; border-radius: 3px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; top: -80px; left: 8px; z-index: 60; padding: 8px 14px; border-radius: 8px; background: #ffb44a; color: #1b1205; }
.skip:focus { top: 8px; }
.main:focus { outline: none; }
h1, h2 { margin: 0; line-height: 1.1; }
.page { position: relative; z-index: 5; max-width: 880px; margin: auto; padding: 0 22px; }

/* ------------------------------------------------------------------ the water, back to front
   .extra-1  sunlight shafts from the surface      .extra-2  bubbles rising
   .extra-3  the school of sardines                .extra-4  the depth gauge, fixed at the side
   body::before  the surface, seen from below (only at the top of the page)  body::after  the tin floor at the bottom */
.extra { position: fixed; pointer-events: none; }
.extra-1 {
  inset: -10% -20% 0; z-index: 0; opacity: .45; transform-origin: 50% 0;
  background:
    repeating-linear-gradient(100deg, transparent 0 5%, rgb(255 255 240 / .22) 6% 8%, transparent 9% 15%, rgb(255 255 240 / .12) 16% 17%, transparent 18% 24%);
  -webkit-mask: linear-gradient(#000, transparent 75%);
  mask: linear-gradient(#000, transparent 75%);
}
.extra-2 {
  left: 0; right: 0; top: 0; height: 200vh; z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / .0) 0 3px, rgb(255 255 255 / .55) 4px, transparent 5px) 7% 0 / 160px 210px,
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / .0) 0 5px, rgb(255 255 255 / .45) 6px, transparent 7px) 63% 40px / 230px 300px,
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / .0) 0 2px, rgb(255 255 255 / .5) 3px, transparent 4px) 31% 90px / 120px 170px;
  -webkit-mask: linear-gradient(90deg, #000 0 14%, transparent 18% 82%, #000 86%);
  mask: linear-gradient(90deg, #000 0 14%, transparent 18% 82%, #000 86%);
}
/* the school: one sardine drawn with gradients (a silver body, a blue-green back, an eye and a tail), tiled twice
   with an offset so the fish stagger, then masked into the shape of a school */
.extra-3 {
  --fish:
    radial-gradient(circle at 14px 16px, #0b1820 0 1.6px, transparent 2.2px),
    radial-gradient(ellipse 22px 4px at 30px 13px, rgb(28 72 96 / .85) 0 60%, transparent 66%),
    radial-gradient(ellipse 26px 8px at 32px 17px, #f4f8fa 0 35%, #a9bccb 72%, transparent 76%),
    conic-gradient(from 60deg at 57px 17px, #93a9b8 0 60deg, transparent 0);
  top: 34%; left: -10%; z-index: 1; width: 560px; height: 240px;
  background: var(--fish), var(--fish);
  background-size: 96px 40px;
  background-position: 0 0, 0 0, 0 0, 0 0, 48px 20px, 48px 20px, 48px 20px, 48px 20px;
  -webkit-mask: radial-gradient(ellipse 48% 44% at 50% 50%, #000 50%, transparent 70%);
  mask: radial-gradient(ellipse 48% 44% at 50% 50%, #000 50%, transparent 70%);
  opacity: .85;
}
.extra-4 {
  right: 44px; top: 50%; z-index: 6; translate: 0 -50%; overflow: hidden;
  display: grid; place-items: center; width: 84px; height: 30px; border-radius: 6px;
  background: #0f2430;
  box-shadow: 0 0 0 3px #c9d2d8, 0 0 0 5px #56656e, 0 0 0 26px #183a4b, 0 0 0 28px #c9d2d8, 0 10px 34px 26px rgb(0 0 0 / .4);
  color: #e8f6ff; font: 700 13px/1.15 var(--sans); text-align: center;
}
.extra-4::after { content: "mid-water"; }
/* the gauge is an odometer: a strip of depths behind a window, rolled by a stepped transform on the scroll timeline,
   so the numbers change without the page ever being laid out again */
.extra-4::before { content: none; }
body::before {
  content: ""; position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 220px; pointer-events: none;
  background:
    radial-gradient(ellipse 40px 10px at 50% 100%, rgb(255 255 255 / .45), transparent 70%) 0 0 / 140px 30px,
    linear-gradient(rgb(220 250 255 / .6), transparent);
  -webkit-mask: linear-gradient(#000, transparent);
  mask: linear-gradient(#000, transparent);
}
body::after {
  content: ""; display: block; height: 220px; margin-top: -40px; position: relative; z-index: 1;
  background:
    radial-gradient(ellipse 50% 60% at 50% 100%, rgb(212 168 72 / .35), transparent 70%),
    repeating-linear-gradient(90deg, #2a2516 0 3px, #3b3420 3px 40px),
    linear-gradient(#2a2516, #14110a);
  -webkit-mask: linear-gradient(transparent, #000 40%);
  mask: linear-gradient(transparent, #000 40%);
}

/* ambient: the shafts sway, the bubbles rise, the school swims across and turns at each end */
@media (prefers-reduced-motion: no-preference) {
  .extra-1 { animation: sway 9s ease-in-out infinite alternate; }
  .extra-2 { animation: rise 16s linear infinite; }
  .extra-3 { animation: school 26s ease-in-out infinite; }
}
/* ------------------------------------------------------------------ the dive: the scroll position is the depth */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html { animation: depth linear both; animation-timeline: scroll(root); }
    .extra-4::after { content: none; }
    .extra-4::before {
      content: "0 m\A 3 m\A 6 m\A 9 m\A 12 m\A 15 m\A 18 m\A 21 m\A 24 m\A 27 m\A 30 m"; white-space: pre; position: absolute; left: 0; right: 0; top: 0;
      font: 700 18px/30px var(--sans); color: #e8f6ff; --step: 30px;
      animation: gauge steps(10, jump-none) both; animation-timeline: scroll(root);
    }
    /* the shafts fade with depth: a second animation, on the scroll timeline, layered over their sway */
    .extra-1 { animation: sway 9s ease-in-out infinite alternate, fade linear both; animation-timeline: auto, scroll(root); }
  }
}
@keyframes depth {
  0%   { --sea-top: #8fdcef; --sea-bot: #3fa6c9; }
  30%  { --sea-top: #3a9cc0; --sea-bot: #155f86; }
  65%  { --sea-top: #12506f; --sea-bot: #0b2c40; }
  100% { --sea-top: #2b2a17; --sea-bot: #0f0d07; }
}
@keyframes gauge { from { transform: translateY(0); } to { transform: translateY(calc(var(--step) * -10)); } }
@keyframes fade { 0% { opacity: 1; } 30% { opacity: .7; } 65% { opacity: .25; } 100% { opacity: 0; } }
@keyframes sway { from { transform: skewX(-4deg) translateX(-2%); } to { transform: skewX(5deg) translateX(2%); } }
@keyframes rise { from { transform: translateY(0); } to { transform: translateY(-100vh); } }
@keyframes school {
  0%   { transform: translateX(0) scaleX(1); }
  46%  { transform: translateX(calc(100vw - 300px)) scaleX(1); }
  50%  { transform: translateX(calc(100vw - 300px)) scaleX(-1); }
  96%  { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}

/* ------------------------------------------------------------------ the manual: printed on the inside of the lid */
.site-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px;
  margin: 26px 0 0; padding: 8px 18px; border-radius: 14px;
  background: rgb(242 245 247 / .94); box-shadow: inset 0 0 0 1px var(--tin-edge), 0 8px 24px rgb(0 30 50 / .3);
}
.masthead { display: flex; align-items: center; gap: 12px; }
.masthead .brand { display: inline-flex; align-items: center; min-height: 40px; }
.masthead .brand img { display: block; height: 24px; width: auto; }
.site-name { display: inline-flex; align-items: center; min-height: 40px; padding-left: 12px; border-left: 1px solid var(--tin-edge); color: var(--tin-ink); font-weight: 700; text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 15px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--tin-ink); }

.title-block { margin: 70px 0 120px; padding: 34px 24px 30px; border-radius: 28px; text-align: center; color: #06212e; background: rgb(240 250 253 / .82); box-shadow: 0 18px 40px rgb(0 30 50 / .25); }
.edition { display: inline-block; margin: 0; padding: 4px 14px; border-radius: 999px; background: rgb(255 255 255 / .75); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.title { margin: 18px 0 10px; font: 900 clamp(46px, 9vw, 108px)/.95 "Arial Black", Impact, var(--sans); letter-spacing: -.02em; color: #062433; text-shadow: 0 2px 0 rgb(255 255 255 / .5); }
.subtitle { display: inline-block; max-width: 36ch; margin: 0; padding: 8px 16px; border-radius: 12px; background: rgb(255 255 255 / .75); font-size: 19px; }

.contents, .chapter, .outfits {
  position: relative; margin: 0 0 30px; padding: 26px 30px; border-radius: 22px;
  background: linear-gradient(160deg, #ffffff, var(--tin) 40%, #e3e9ed);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--tin-edge), 0 18px 40px rgb(0 20 30 / .35);
  scroll-margin-top: 40px;
}
.contents { margin-bottom: 70px; }
.contents-title { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--tin-soft); }
.contents-list { columns: 2 220px; margin: 10px 0 0; padding-left: 1.4em; }
.contents-list a { display: inline-flex; align-items: center; min-height: 30px; }
.chapter { margin-bottom: 90px; }
/* every chapter is a depth marker on its rope */
.chapter::before {
  content: ""; position: absolute; left: 50%; top: -90px; width: 2px; height: 90px; translate: -50% 0;
  background: repeating-linear-gradient(#e9d9a8 0 6px, #b89a52 6px 9px);
}
.chapter-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; font-size: clamp(25px, 3.6vw, 34px); color: #08304a; }
.chapter-num { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--brine); color: #fff; font-size: 20px; }
.chapter-body { max-width: 64ch; }
.first { font-size: 19px; }
.plate { margin: 22px 0 0; }
.plate img { display: block; width: 100%; border-radius: 14px; }
.plate figcaption { margin-top: 8px; color: var(--tin-soft); font-size: 14px; }
.tools, .rules { padding-left: 1.3em; }
.tools li, .rules li { margin: 8px 0; }
.tools li::marker { content: "◦ "; color: var(--brine); }
.note { margin: 20px 0; padding: 14px 18px; border-radius: 14px; background: #ffe7bf; color: #3a2405; }
.note p { margin: 0; }
.saying { margin: 24px 0 0; padding: 16px 20px; border-radius: 14px; background: #dff1f8; }
.saying p { margin: 0; font-size: 22px; font-style: italic; color: #08304a; }
.saying footer { margin-top: 6px; color: var(--tin-soft); font-size: 14px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
caption { padding-bottom: 8px; color: var(--tin-soft); text-align: left; }
th, td { padding: 8px 10px; border-bottom: 1px solid #cdd6dc; text-align: left; vertical-align: top; }
thead th { color: var(--tin-soft); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.hazards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0; }
.hazard { padding: 14px; border-radius: 14px; background: #e6eef3; }
.hazard dt { font-weight: 700; color: #08304a; }
.hazard dd { margin: 4px 0 0; font-size: 15px; }
.glossary dt { font-weight: 700; color: #08304a; }
.glossary dd { margin: 0 0 10px 1.3em; }
.sign-off { font-weight: 700; }

.outfits { margin-bottom: 40px; }
.outfits-title { font-size: clamp(24px, 3.4vw, 32px); color: #08304a; }
.outfits-lede { color: var(--tin-soft); }
.outfit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 18px; margin: 16px 0 0; padding: 0; list-style: none; }
.outfit { padding: 8px 0; border-bottom: 1px solid #d7dfe4; font-size: 15px; }
.outfit-link { display: inline-flex; align-items: center; min-height: 28px; font-weight: 700; }
.outfit-by, .outfit-note { display: none; }
.outfit-technique { display: block; color: var(--tin-soft); font-size: 14px; }
#th-dive { padding: 10px 12px; border: 0; border-radius: 12px; background: #0f2430; color: #e8f6ff; }
#th-dive .outfit-link { color: #9fe3ff; }
#th-dive .outfit-link::before { content: "Diving in: "; color: #e8f6ff; font-weight: 400; }
#th-dive .outfit-technique, #th-dive .outfit-note { display: block; color: #cfe6f1; font-size: 14px; }

.site-foot { position: relative; z-index: 5; max-width: 760px; margin: 0 auto; padding: 16px 22px; border-radius: 16px; background: rgb(242 245 247 / .94); color: var(--tin-soft); text-align: center; font-size: 14px; }
.site-foot p { margin: 4px 0; }

/* phones: a smaller gauge in the corner, no shafts, a smaller school */
@media (max-width: 700px) {
  .page { padding: 0 14px; }
  .site-head { margin-top: 72px; }
  .contents, .chapter, .outfits { padding: 22px 18px; }
  .chapter { margin-bottom: 70px; }
  .chapter::before { top: -70px; height: 70px; }
  /* the gauge sits at the top of the dive and scrolls away, so it never covers the text */
  .extra-4 { position: absolute; top: 24px; right: auto; left: 50%; translate: -50% 0; width: 64px; height: 26px; font-size: 11px;
    box-shadow: 0 0 0 3px #c9d2d8, 0 0 0 5px #56656e, 0 0 0 12px #183a4b, 0 0 0 14px #c9d2d8; }
  .extra-4::before { font-size: 15px; line-height: 26px; --step: 26px; }
  .extra-3 { width: 300px; height: 140px; }
  .title-block { margin: 50px 0 80px; }
}
@media (prefers-reduced-motion: reduce) {
  html, .extra-1, .extra-2, .extra-3, .extra-4, .extra-4::before { animation: none; }
}

/* moving between outfits: a cross-document view transition where the browser has them (Chromium did, Firefox did not, when check.mjs last ran), with the
   masthead and the title carried across; an ordinary page load elsewhere, and under reduced motion */
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
.title { view-transition-name: manual-title; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }