/* Pop-up book — the manual as a pop-up book lying open: every chapter is a card hinged on the spread that folds up
   off the page as it scrolls into view. The hinge is a rotateX in perspective on a view() timeline, so each card's own
   journey through the screen drives it; a paper shadow on the page grows as the card stands. Without view timelines
   (Firefox today) every card is already up, and under reduced motion nothing moves. Designed by machine for the
   Slopwright. */
@font-face { font-family: "Archivo Black"; src: url(/fonts/archivo-black-latin.woff2) format("woff2"); font-weight: 400 1000; font-display: swap; }
:root {
  color-scheme: light;
  --cloth: #23415f;
  --page: #f6efdc;
  --page-shade: #e4d8b8;
  --card: #fffaf0;
  --ink: #1d1a14;
  --muted: #5a5040;
  --red: #b3321f;
  --blue: #1f5f9a;
  --yellow: #f1c232;
  --focus: #1f5f9a;
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { min-width: 320px; margin: 0; color: var(--ink); font: 17px/1.6 "Trebuchet MS", Arial, Helvetica, sans-serif;
  /* the cloth of the cover, showing round the edges of the open book */
  background: repeating-linear-gradient(45deg, rgb(255 255 255 / .04) 0 2px, transparent 2px 6px), var(--cloth); }
a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:where(a, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 30; padding: 10px 16px; border-radius: 8px; background: var(--card); color: var(--ink); font-weight: 700; }
.skip:focus { top: 12px; }
.extra { display: none; }

/* the open book: two pages and a spine down the middle */
.page { position: relative; max-width: 1120px; margin: 26px auto 40px; padding: 0 4.5% 40px;
  background:
    linear-gradient(90deg, transparent calc(50% - 26px), rgb(0 0 0 / .16) calc(50% - 3px), rgb(0 0 0 / .3) 50%, rgb(0 0 0 / .16) calc(50% + 3px), transparent calc(50% + 26px)),
    linear-gradient(90deg, var(--page-shade), var(--page) 6%, var(--page) 94%, var(--page-shade));
  border-radius: 6px; box-shadow: 0 0 0 6px #1a3049, 0 24px 60px rgb(0 0 0 / .5); }
.main:focus { outline: none; }
h1, h2 { margin: 0; font-family: "Archivo Black", "Arial Black", Arial, sans-serif; font-weight: 1000; font-synthesis: none; line-height: 1.05; }

.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding: 16px 0 10px; border-bottom: 2px dashed #cdbf98; }
.masthead { display: flex; align-items: center; min-width: 0; }
.masthead .brand { display: flex; align-items: center; min-height: 42px; }
.masthead .brand img { display: block; width: auto; height: 26px; }
.site-name { display: inline-flex; align-items: center; min-height: 42px; margin-left: 14px; padding-left: 14px; border-left: 1px solid #cdbf98; color: var(--ink); font-weight: 700; text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: 14px; font-weight: 700; }
.site-nav a { display: inline-flex; align-items: center; min-height: 42px; color: var(--ink); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- the pop-ups */
.manual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 64px; padding: 40px 0 0; }
.title-block, .contents, .chapter, .outfits {
  position: relative; padding: 26px 28px 28px; border-radius: 4px; background: var(--card);
  box-shadow: 0 0 0 1px #d9cca8, 0 1px 0 4px var(--card), 0 1px 0 5px #d9cca8;
  transform-origin: 50% 100%; transform-style: preserve-3d;
}
/* a coloured paper tab folded at the top of each card, standing a little proud of it */
.chapter::before { content: ""; position: absolute; top: -18px; left: 26px; width: 74px; height: 22px; border-radius: 4px 4px 0 0; background: var(--tab, var(--red)); transform: translateZ(2px); }
.chapter:nth-of-type(3n+2) { --tab: var(--blue); }
.chapter:nth-of-type(3n) { --tab: var(--yellow); }
/* the card's shadow on the page under it: a flattened ellipse that grows as the card stands up */
.chapter::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -16px; height: 22px; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, rgb(60 40 10 / .45), transparent 70%); transform-origin: 50% 0; }
.title-block { grid-column: 1 / -1; padding: 34px 36px; text-align: center; background:
  radial-gradient(circle at 10% 20%, rgb(241 194 50 / .35) 0 60px, transparent 61px), radial-gradient(circle at 92% 80%, rgb(31 95 154 / .18) 0 80px, transparent 81px), var(--card); }
.chapter-1, .chapter-5 { grid-column: 1 / -1; }
.outfits { margin-top: 56px; }

/* the fold: each card's own trip through the viewport is its clock */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .contents, .chapter, .outfits { animation: popup-fold linear both; animation-timeline: view(); animation-range: entry 5% cover 38%; }
    .chapter::after { animation: popup-shadow linear both; animation-timeline: view(); animation-range: entry 5% cover 38%; }
  }
}
@keyframes popup-fold {
  0% { transform: perspective(1100px) rotateX(78deg); }
  70% { transform: perspective(1100px) rotateX(-4deg); }
  100% { transform: perspective(1100px) rotateX(0deg); }
}
@keyframes popup-shadow { from { transform: scaleY(.2); opacity: .3; } to { transform: scaleY(1); opacity: 1; } }

/* a paper bird bobbing on the title page: the only thing that moves on its own */
.title-block::after { content: ""; position: absolute; top: 18px; right: 8%; width: 46px; height: 30px; background: var(--red);
  clip-path: polygon(0 60%, 45% 40%, 60% 0, 70% 45%, 100% 30%, 72% 70%, 30% 85%); }
@media (prefers-reduced-motion: no-preference) {
  .title-block::after { animation: popup-bird 4s ease-in-out infinite alternate; }
}
@keyframes popup-bird { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-10px) rotate(5deg); } }

.edition { margin: 0 0 10px; color: var(--red); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.title { font-size: clamp(42px, 7vw, 92px); letter-spacing: -.02em; }
.subtitle { margin: 14px auto 0; max-width: 34ch; font-size: 20px; }
.contents-title { font-size: 22px; }
.contents-list { margin: 10px 0 0; padding-left: 22px; line-height: 1.95; }
.chapter-title { display: flex; gap: 12px; align-items: center; font-size: clamp(22px, 2.5vw, 30px); margin-bottom: 10px; }
.chapter-num { display: inline-grid; place-items: center; min-width: 40px; height: 40px; border-radius: 50%; background: var(--tab, var(--red)); color: #fff; font: 700 17px Arial, Helvetica, sans-serif; }
.chapter:nth-of-type(3n) .chapter-num { color: var(--ink); }
.chapter-body > :first-child { margin-top: 0; }
.first { font-size: 19px; }
.plate { margin: 16px 0 0; padding: 8px; background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / .2); transform: rotate(1deg); }
.plate img { display: block; width: 100%; border-radius: 2px; }
.plate figcaption { margin-top: 6px; color: var(--muted); font-size: 14px; }
.note { margin: 16px 0; padding: 12px 16px; border-radius: 10px; background: #fde9b0; border: 2px dashed var(--red); }
.note p { margin: 0; }
.saying { margin: 18px 0 0; padding: 14px 18px; border-radius: 22px; background: #e8f0f8; font-size: 19px; }
.saying p { margin: 0; }
.saying footer { margin-top: 4px; color: var(--muted); font-size: 14px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
caption { text-align: left; color: var(--muted); padding-bottom: 6px; }
th, td { padding: 8px 10px 8px 0; border-top: 1px solid #e3d6b2; text-align: left; vertical-align: top; }
thead th { border-top: 0; border-bottom: 2px solid var(--ink); font-size: 13px; }
.hazards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0; }
.hazard { padding: 10px 12px; border-radius: 10px; background: #fbf0d0; }
.hazard dt { font-weight: 700; }
.hazard dd { margin: 2px 0 0; font-size: 15px; }
.glossary dt { font-weight: 700; margin-top: 8px; }
.glossary dd { margin: 0 0 0 16px; }

.outfits-title { font-size: clamp(26px, 3.2vw, 38px); }
.outfits-lede { color: var(--muted); }
.outfit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 20px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; }
.outfit-link { display: inline-flex; align-items: center; min-height: 26px; font-weight: 700; }
.outfit-by, .outfit-technique, .outfit-note { display: none; }
#th-popup { padding: 6px 10px; border-radius: 8px; background: var(--yellow); }
#th-popup .outfit-link { color: var(--ink); }
#th-popup .outfit-link::after { content: " ← this book"; font-weight: 400; }

.site-foot { margin-top: 40px; padding-top: 14px; border-top: 2px dashed #cdbf98; font-size: 14px; }
.site-foot p { margin: 4px 0; }

@media (max-width: 760px) {
  .page { margin: 12px 8px 24px; padding: 0 16px 24px; background: var(--page); }
  .manual { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 28px; }
  .chapter-1, .chapter-5, .title-block { grid-column: auto; }
  .title-block, .contents, .chapter, .outfits { padding: 20px 16px; }
  .title-block { padding-top: 34px; background: radial-gradient(circle at 0 0, rgb(241 194 50 / .35) 0 34px, transparent 35px), radial-gradient(circle at 100% 100%, rgb(31 95 154 / .18) 0 46px, transparent 47px), var(--card); }
  .title-block::after { top: 8px; right: 12px; width: 30px; height: 20px; }
  .masthead .brand img { height: 22px; }
}

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