/* Sardine-tin sea — the manual printed on the inside of the lid. Rolled tin edges, rivets and a ring pull from
   radial gradients and border-radius; the sea underneath is a wave made of overlapping circles.
   Designed by machine for the Slopwright. */
:root {
  color-scheme: light;
  --tin-1: #e9edf0;
  --tin-2: #b8c0c7;
  --tin-3: #8a939b;
  --ink: #12202c;
  --muted: #3b4a57;
  --sea: #1f5f86;
  --sea-2: #2f7fae;
  --oil: #c79a2e;
  --label: #c8372d;
  --tin: linear-gradient(135deg, #f5f7f9 0%, #c3cad0 22%, #eef1f3 40%, #aab3ba 62%, #e4e8eb 80%, #b9c1c7 100%);
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0; min-width: 320px; color: var(--ink);
  font: 17px/1.6 Georgia, "Times New Roman", serif;
  /* the sea: rows of overlapping circles, a wave, in two blues, over the deep */
  background-color: #123f5c;
  background-image:
    radial-gradient(circle at 50% 100%, transparent 0 14px, rgba(255,255,255,.22) 15px 17px, transparent 18px),
    radial-gradient(circle at 50% 100%, var(--sea-2) 0 18px, transparent 19px),
    radial-gradient(circle at 50% 100%, var(--sea) 0 18px, transparent 19px);
  background-size: 40px 20px, 40px 20px, 40px 20px;
  background-position: 0 0, 0 0, 20px 10px;
}
a { color: #0f4c75; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--label); }
a:focus-visible { outline: 3px solid var(--label); outline-offset: 3px; border-radius: 3px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: 10px; top: -80px; z-index: 10; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 8px; }
.skip:focus { top: 10px; }
.main:focus { outline: none; }

/* the lid: a big rounded rectangle of brushed tin with a rolled rim */
.page {
  position: relative; max-width: 1000px; margin: 40px auto 60px; padding: 40px clamp(16px, 5vw, 64px) 40px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 3px),
    var(--tin);
  border-radius: 90px / 70px;
  box-shadow:
    inset 0 0 0 10px #c4cbd1, inset 0 0 0 12px #8e979f, inset 0 0 0 16px #eef1f3, inset 0 0 0 18px #9aa3aa,
    0 0 0 6px #7c858c, 0 24px 60px rgba(0, 0, 0, .55);
}
/* rivets in the four corners of the lid */
.page::before {
  content: ""; position: absolute; inset: 34px; pointer-events: none;
  background:
    radial-gradient(circle at 30% 30%, #fff 0 2px, #9aa3aa 3px 6px, #5f676e 7px, transparent 8px) left top / 16px 16px no-repeat,
    radial-gradient(circle at 30% 30%, #fff 0 2px, #9aa3aa 3px 6px, #5f676e 7px, transparent 8px) right top / 16px 16px no-repeat,
    radial-gradient(circle at 30% 30%, #fff 0 2px, #9aa3aa 3px 6px, #5f676e 7px, transparent 8px) left bottom / 16px 16px no-repeat,
    radial-gradient(circle at 30% 30%, #fff 0 2px, #9aa3aa 3px 6px, #5f676e 7px, transparent 8px) right bottom / 16px 16px no-repeat;
}

/* the ring pull, top centre: a ring on a tab */
.site-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding: 70px 0 18px; border-bottom: 2px solid var(--tin-3); }
.site-head::before {
  content: ""; position: absolute; top: -8px; left: 50%; width: 120px; height: 66px; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, transparent 0 24px, #e6eaed 25px 30px, #8f989f 31px 33px, transparent 34px);
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.35));
}
.site-head::after {
  content: ""; position: absolute; top: 46px; left: 50%; width: 46px; height: 18px; transform: translateX(-50%);
  border-radius: 9px; background: linear-gradient(#f4f6f8, #a8b1b8); box-shadow: 0 2px 3px rgba(0,0,0,.35);
}
.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: 26px; width: auto; }
.site-name { display: inline-flex; align-items: center; min-height: 40px; padding-left: 12px; border-left: 2px solid var(--tin-3); color: var(--ink); font: 700 16px Arial, sans-serif; text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 15px Arial, sans-serif; }
.site-nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

/* the label: red with an embossed oval */
.title-block {
  margin: 32px auto 30px; max-width: 680px; padding: 28px 30px; text-align: center; color: #fff6e8;
  background: radial-gradient(ellipse at 50% 40%, #b83228, #a42a21 60%, #84201a);
  border-radius: 50% / 38%;
  box-shadow: inset 0 0 0 5px #f2d27a, inset 0 0 0 7px #9c2a22, 0 6px 14px rgba(0,0,0,.3);
}
.edition { margin: 0 0 6px; font: 700 12px Arial, sans-serif; letter-spacing: 3px; text-transform: uppercase; }
.title { margin: 0; font: italic 700 clamp(34px, 6.4vw, 66px)/1.02 Georgia, serif; text-shadow: 0 2px 0 #7a1e18; }
.subtitle { max-width: 36ch; margin: 10px auto 0; font-size: 17px; }

.contents { padding: 18px 22px; background: rgba(255,255,255,.62); border-radius: 18px; border: 1px solid var(--tin-3); }
.contents-title { margin: 0 0 8px; font: 700 13px Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.contents-list { margin: 0; padding-left: 22px; columns: 2 200px; }
.contents-list a { display: inline-block; min-height: 28px; }

/* chapters: pressed into the tin as panels */
.chapter { margin: 28px 0; padding: 24px clamp(16px, 3vw, 32px); background: rgba(250, 251, 252, .82); border-radius: 22px; box-shadow: inset 0 2px 4px rgba(0,0,0,.18), 0 1px 0 #fff; }
.chapter-title { margin: 0 0 12px; font: 700 clamp(24px, 3.2vw, 32px)/1.15 Georgia, serif; }
.chapter-num { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: 10px; border-radius: 50%; background: var(--sea); color: #fff; font: 700 .6em Arial, sans-serif; vertical-align: .25em; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.chapter-body { max-width: 66ch; }
.first { font-size: 19px; }
.plate { margin: 20px 0 0; }
.plate img { display: block; border-radius: 40px / 30px; border: 6px solid #e2e6e9; box-shadow: 0 0 0 2px var(--tin-3); }
.plate figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); font-style: italic; }
.tools { padding-left: 0; list-style: none; }
.tools li { position: relative; margin: 8px 0; padding-left: 34px; }
/* a small sardine for every bullet */
.tools li::before { content: ""; position: absolute; left: 0; top: .55em; width: 24px; height: 10px; border-radius: 50% 40% 40% 50% / 50%; background: linear-gradient(#cfd8de, #7d8a94); clip-path: polygon(0 50%, 15% 0, 82% 10%, 100% 0, 92% 50%, 100% 100%, 82% 90%, 15% 100%); }
.note { margin: 18px 0; padding: 16px 20px; background: var(--oil); color: #1d1300; border-radius: 16px; box-shadow: inset 0 0 0 3px #a27b1d; }
.note p { margin: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 440px; border-collapse: separate; border-spacing: 0; font: 15px Arial, sans-serif; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--tin-3); }
caption { padding-bottom: 8px; text-align: left; font-style: italic; color: var(--muted); }
th, td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid #d5dbe0; }
thead th { background: var(--sea); color: #fff; }
tbody th { color: var(--sea); }
.rules { padding-left: 26px; }
.rules li { margin: 8px 0; }
.rules li::marker { color: var(--label); font-weight: 700; }
.saying { margin: 22px 0 0; padding: 18px 24px; background: var(--sea); color: #f2f8fb; border-radius: 40px 40px 40px 6px; }
.saying p { margin: 0; font-size: 20px; font-style: italic; }
.saying footer { margin-top: 6px; font: 14px Arial, sans-serif; color: #d7e8f2; }
.hazards { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.hazard { padding: 14px 16px; background: #fff; border-radius: 16px; border: 2px solid var(--tin-2); }
.hazard dt { font-weight: 700; color: var(--label); }
.hazard dd { margin: 4px 0 0; font-size: 15px; }
.glossary dt { font-weight: 700; margin-top: 10px; }
.glossary dd { margin: 2px 0 0 20px; }
.sign-off { font-weight: 700; }

.outfits { margin: 30px 0 10px; padding: 24px clamp(16px, 3vw, 32px); background: rgba(18, 63, 92, .92); color: #eef6fa; border-radius: 22px; }
.outfits a { color: #fff; }
.outfits-title { margin: 0; font: 700 clamp(24px, 3.2vw, 32px)/1.15 Georgia, serif; }
.outfits-lede { color: #cfe3ee; }
.outfit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.outfit { padding: 10px 14px; background: rgba(255,255,255,.1); border-radius: 30px 30px 30px 8px; font-size: 14px; }
.outfit-link { display: inline-block; min-height: 26px; font-weight: 700; }
.outfit-by, .outfit-note { display: none; }
.outfit-technique { display: block; color: #cfe3ee; font-size: 13px; }
#th-sardine { background: var(--tin); color: var(--ink); box-shadow: inset 0 0 0 3px var(--oil); }
#th-sardine a { color: var(--ink); }
#th-sardine .outfit-technique, #th-sardine .outfit-by, #th-sardine .outfit-note { color: var(--ink); }
#th-sardine .outfit-link::before { content: "In the tin: "; font-weight: 400; }
#th-sardine .outfit-by, #th-sardine .outfit-note { display: block; font-size: 13px; margin-top: 4px; }

.site-foot { padding: 20px 0 0; border-top: 2px solid var(--tin-3); font: 14px Arial, sans-serif; color: var(--muted); }
.site-foot p { margin: 0 0 8px; max-width: 70ch; }
.extra { display: none; }

@media (max-width: 600px) {
  .page { margin: 16px 8px 30px; border-radius: 50px / 40px; padding-top: 30px; }
  .page::before { inset: 22px; }
  .title-block { border-radius: 40px; }
}

/* 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; } }