/* Brand fonts, self-hosted: Ubuntu (Ubuntu Font Licence) and PT Serif (SIL OFL), latin and cyrillic subsets.
   Each subset loads only when a page uses its letters; font-display: optional never makes a page wait. */
@font-face { font-family: 'PT Serif'; font-style: italic; font-weight: 400; font-display: optional; src: url(/fonts/pt-serif-400i-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'PT Serif'; font-style: italic; font-weight: 400; font-display: optional; src: url(/fonts/pt-serif-400i-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'PT Serif'; font-style: italic; font-weight: 400; font-display: optional; src: url(/fonts/pt-serif-400i-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: 'PT Serif'; font-style: normal; font-weight: 400; font-display: optional; src: url(/fonts/pt-serif-400-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: optional; src: url(/fonts/pt-serif-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: optional; src: url(/fonts/pt-serif-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: 'PT Serif'; font-style: normal; font-weight: 700; font-display: optional; src: url(/fonts/pt-serif-700-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: optional; src: url(/fonts/pt-serif-700-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: optional; src: url(/fonts/pt-serif-700-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: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: optional; src: url(/fonts/ubuntu-400-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: optional; src: url(/fonts/ubuntu-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: optional; src: url(/fonts/ubuntu-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: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: optional; src: url(/fonts/ubuntu-700-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: optional; src: url(/fonts/ubuntu-700-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: optional; src: url(/fonts/ubuntu-700-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; }

/* Site palette and base type. */
:root {
  --serif: "PT Serif", Georgia, serif;
  --sans: Ubuntu, Arial, sans-serif;
  --paper: #f2e0ca;
  /* Brand palette (Springfolk/branding): spring, soil, paper. Body text is a soil/paper mix. */
  --soil: #4f4239;
  --ink: #716157;
  --brand: #4f8a5d;
  --print: #fbf8f1;      /* photo paper */
  --tape: rgb(250 246 232 / 0.55);
  --lift: 0 2px 3px rgb(70 45 25 / 0.2), 0 14px 24px -6px rgb(70 45 25 / 0.38);
  /* slight cartoon spring, ~0.7s, ~9% overshoot */
  --spring: linear(0, 0.005, 0.082, 0.221, 0.387, 0.556, 0.710, 0.839, 0.941, 1.013, 1.060, 1.085, 1.094, 1.091, 1.080, 1.065, 1.049, 1.034, 1.020, 1.010, 1.002, 0.996, 0.993, 0.991, 0.991, 0.992, 0.993, 0.995, 0.996, 0.998, 0.999, 1.000, 1.000, 1.001, 1);
}

html { background: var(--paper); color: var(--ink); font-family: var(--serif); }
body { max-width: 650px; margin: 40px auto; padding: 0 16px; overflow-x: clip; }
.logo { margin: 0.67em 0; line-height: 0; }
.logo img { display: block; width: 155px; height: auto; }
h1, h2, h3 { color: var(--soil); }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 24px; }
header nav { display: flex; gap: 18px; font-family: var(--sans); }
@media (max-width: 560px) {
  .logo img { width: 130px; }
  header nav { gap: 12px; font-size: 0.9em; }
}
a { color: inherit; }

.logo a { color: inherit; text-decoration: none; }
/* Anchor links glide, unless the visitor asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Section headings: PT Serif with a hand-drawn brush stroke under it in brand green. */
section > h2, .page-title { width: fit-content; margin-top: 0.8em; padding-bottom: 10px; font: bold 1.6em var(--serif);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c40-6 90-7 130-5 22 1 44 2 64 5' fill='none' stroke='%234f8a5d' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 12px no-repeat; }
section { padding-top: 0.5em; }
.motto span { display: inline-block; }
.project:last-child { margin-bottom: 4.5em; }
.clippings .stain { top: 4px; right: 8px; width: 140px; }

/* Cursors: a hand for anything clickable; image links that enlarge get zoom-in (below). */
a, button, summary, label[for] { cursor: pointer; }

/* Keyboard focus ring for every interactive element; only shows when focus comes from the keyboard. */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--ink); color: var(--paper); }

/* Taped photo: <figure class="photo" data-tilt="-2" data-tape="right"><img …><figcaption>…</figcaption></figure>.
   data-tilt (also on .project): whole degrees, -6 to 6 (default 0). data-tape="right": tape on the top-right and
   bottom-left corners instead of top-left and bottom-right. Works anywhere on the site. */
.photo {
  --tilt: 0deg;
  --tape-w: 92px;
  --tape-h: 26px;
  position: relative;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 2.5em auto;
  padding: 10px 10px 12px;
  background: var(--print);
  transform: rotate(var(--tilt));
  box-shadow:
    0 1px 1px rgb(70 45 25 / 0.18),
    0 6px 14px -4px rgb(70 45 25 / 0.35),
    0 18px 30px -18px rgb(70 45 25 / 0.4);
}
[data-tilt="-6"] { --tilt: -6deg; }
[data-tilt="-5"] { --tilt: -5deg; }
[data-tilt="-4"] { --tilt: -4deg; }
[data-tilt="-3"] { --tilt: -3deg; }
[data-tilt="-2"] { --tilt: -2deg; }
[data-tilt="-1"] { --tilt: -1deg; }
[data-tilt="1"] { --tilt: 1deg; }
[data-tilt="2"] { --tilt: 2deg; }
[data-tilt="3"] { --tilt: 3deg; }
[data-tilt="4"] { --tilt: 4deg; }
[data-tilt="5"] { --tilt: 5deg; }
[data-tilt="6"] { --tilt: 6deg; }
.photo img { display: block; max-width: 100%; height: auto; }
.photo figcaption { margin-top: 8px; font-size: 0.9em; font-style: italic; text-align: center; }

.photo::before,
.photo::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: var(--tape-w);
  height: var(--tape-h);
  background:
    linear-gradient(rgb(255 255 255 / 0.35), transparent 40%, rgb(0 0 0 / 0.03)),
    var(--tape);
  box-shadow: 0 1px 1.5px rgb(70 45 25 / 0.14);
  /* torn ends */
  clip-path: polygon(0 8%, 4% 0, 7% 12%, 3% 30%, 6% 48%, 2% 66%, 5% 84%, 1% 100%,
                     97% 100%, 100% 88%, 96% 70%, 99% 52%, 95% 34%, 98% 16%, 96% 0);
}
.photo::before { top: calc(var(--tape-h) * -0.4); left: calc(var(--tape-w) * -0.33); transform: rotate(-38deg); }
.photo::after { bottom: calc(var(--tape-h) * -0.4); right: calc(var(--tape-w) * -0.33); transform: rotate(-38deg); }
.photo[data-tape="right"]::before { left: auto; right: calc(var(--tape-w) * -0.33); transform: rotate(38deg); }
.photo[data-tape="right"]::after { right: auto; left: calc(var(--tape-w) * -0.33); transform: rotate(38deg); }

/* Polaroid: deep bottom border carrying a written caption (figcaption after the link). */
.photo.polaroid { padding: 10px 10px 0; }
.photo.polaroid figcaption { margin: 0; padding: 12px 0 16px; font-size: 1em; }

/* Full-screen photo viewer (site.js). */
.viewer {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.viewer::backdrop { background: rgb(30 22 16 / 0.88); }
.viewer { cursor: zoom-out; }
.viewer[open] { display: grid; place-content: center; justify-items: center; }
.viewer-caption { margin: 0; padding-top: 12px; color: var(--print); font-style: italic; text-align: center; }
.viewer:has(.viewer-caption:not([hidden])) { --caption: 3em; }
/* --ratio (width / height) is set by site.js, so the picture fills the screen without letterboxing. */
.viewer img {
  width: min(100vw - 32px, (100dvh - var(--caption, 0px) - 32px) * var(--ratio, 1));
  height: auto;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.45);
}
.viewer-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--print);
  color: var(--ink);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
}
.viewer-close svg { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }


/* P1 index card: ruled lines, red header rule, clipped thumbnail, a stack of cards behind. */
.index-card {
  position: relative;
  max-width: 460px;
  margin: 2em 0 2em 12px;
  padding: 14px 22px 18px;
  background:
    linear-gradient(transparent 50px, #e8a5a0 50px, #e8a5a0 52px, transparent 52px),
    repeating-linear-gradient(transparent 0 25px, #c6d6e2 25px 26px) 0 52px / 100% calc(100% - 52px) no-repeat,
    #fffdf6;
  line-height: 26px;
  transform: rotate(-0.6deg);
  /* two more cards in the file behind it */
  box-shadow: 0 1px 1px rgb(70 45 25 / 0.18), 6px 6px 0 -1px #f7f1e3, 6px 6px 2px -1px rgb(70 45 25 / 0.2), 11px 11px 0 -2px #f3ecdc, 11px 11px 3px -2px rgb(70 45 25 / 0.2);
}
/* Text sits on the ruling: 14px padding + a 36px title + 2px = the red rule at 52px; every line after is one 26px row. */
.index-card > :first-child { margin: 0 0 2px; font: 1.25em/36px var(--serif); }
.index-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; margin: 0; }
.index-card dt { font: 0.8em/26px var(--sans); text-transform: uppercase; letter-spacing: 0.06em; }
.index-card dd { margin: 0; }
.index-card p { margin: 0; }
.index-card .thumb { position: absolute; top: 18px; right: 24px; border: 4px solid #fff; box-shadow: 0 2px 4px rgb(0 0 0 / 0.2); transform: rotate(3deg); }
.index-card .clip { position: absolute; top: 4px; right: 120px; z-index: 1; transform: rotate(8deg); }

/* P2 ticket: perforated stub; the notches at the tear line are page-coloured dots. */
.ticket {
  --stub: 110px;
  position: relative;
  display: flex; max-width: 520px; margin: 2em 0; text-decoration: none; color: var(--ink);
  background: #f7efd9;
  box-shadow: 0 1px 1px rgb(70 45 25 / 0.18), 0 6px 14px -4px rgb(70 45 25 / 0.3);
  transform: rotate(-1deg);
}
.ticket::before, .ticket::after {
  content: ""; position: absolute; right: calc(var(--stub) - 9px); width: 18px; height: 18px; border-radius: 50%; background: var(--paper);
}
.ticket::before { top: -9px; }
.ticket::after { bottom: -9px; }
.ticket-main { flex: 1; display: grid; gap: 4px; padding: 18px 22px; border-right: 2px dashed rgb(113 97 87 / 0.45); }
.ticket-main b { font: 700 1.4em var(--serif); color: #8a5a3c; }
.ticket-main small { font: 0.85em var(--sans); text-decoration: underline; white-space: nowrap; }
.ticket-stub { width: var(--stub); display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 0.85em var(--sans); letter-spacing: 0.25em; text-transform: uppercase; color: #8a5a3c; }

/* P3 rubber stamp: double border, uneven ink from a noise mask. */
.stamp {
  --ink-c: #b5543f;
  display: inline-block; padding: 4px 10px; color: var(--ink-c);
  border: 3px double var(--ink-c); border-radius: 4px;
  font: 700 0.8em var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  transform: rotate(-8deg); opacity: 0.85; mix-blend-mode: multiply;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.7'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)'/%3E%3C/svg%3E");
}
.index-card .stamp { position: absolute; top: 60px; right: 24px; font-size: 0.95em; }
.stamp.green { --ink-c: #4f8a5d; transform: rotate(5deg); }
.stamp.blue { --ink-c: #4d6f99; transform: rotate(-3deg); }

/* Project card file: <div class="project" data-tilt="1"> with an index card, a taped polaroid, a .stamp,
   an optional .bookmark flag or .clip and a .tickets row of coupons on the bottom edge. Add "flip" to put the
   polaroid on the left. */
.project { position: relative; margin: 3.5em 0 5em; transform: rotate(var(--tilt, 0deg)); }
.project .index-card { max-width: none; margin: 0; padding-right: 170px; padding-bottom: 60px; transform: none; }
.project .photo { position: absolute; top: -18px; right: -6px; z-index: 2; width: 148px; margin: 0; --tape-w: 54px; --tape-h: 16px; }
.project .photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.project .stamp, .project .clip { pointer-events: none; }
.project .stamp { position: absolute; top: auto; right: 176px; bottom: 36px; z-index: 3; }
.project.flip .index-card { padding: 14px 22px 44px 186px; }
.project.flip .photo { right: auto; left: -6px; }
.project.flip .stamp { right: 24px; }
.project .clip { position: absolute; top: -14px; left: 34%; z-index: 3; transform: rotate(8deg); }

/* Coupons: cut out along a dotted scissors line and laid on the card's bottom edge, half on the paper.
   Labels wrap, so long ones never break. Hover lifts a coupon a little on a slight spring. */
.project .tickets { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; margin: -26px 0 0 26px; padding-right: 26px; }
.project .ticket { --t: -2deg; display: block; will-change: transform; max-width: 46%; margin: 0; background: #fbf5e6; outline: 2px dashed rgb(113 97 87 / 0.5); outline-offset: -7px;
  transform: rotate(var(--t)); transition: transform 0.7s var(--spring), box-shadow 0.35s ease; }
.project .ticket:nth-child(2) { --t: 1.5deg; margin-top: 8px; }
.project .ticket::before, .project .ticket::after, .project .ticket-stub { display: none; }
.project .ticket:hover, .project .ticket:focus-visible { transform: translateY(-4px) rotate(var(--t)); box-shadow: var(--lift); }
.project .ticket-main { padding: 14px 18px 15px; border: 0; }
.project .ticket-main b { font-size: 1.1em; line-height: 1.2; }
.project .ticket-main small { white-space: normal; }

/* Bookmark: a sticky index flag stuck on the card's top edge. The sticky half on the card is
   see-through; the half sticking out is solid and casts a small shadow. */
.bookmark { --flag: 181 84 63; position: absolute; top: -22px; left: var(--at, 40px); z-index: 1; width: 22px; height: 46px;
  background: linear-gradient(rgb(var(--flag) / 0.85) 0 22px, rgb(var(--flag) / 0.35) 22px);
  border-radius: 2px 2px 0 0; transform: rotate(-2deg); pointer-events: none;
  box-shadow: 0 -1px 2px rgb(70 45 25 / 0.15); }
.bookmark.green { --flag: 90 143 105; }
.bookmark.blue { --flag: 95 127 168; }

@media (prefers-reduced-motion: reduce) { .project .ticket { transition: box-shadow 0.35s ease; } .project .ticket:hover, .project .ticket:focus-visible { transform: rotate(var(--t)); } }
@media (max-width: 560px) {
  /* Same card file, scaled down: a small polaroid over the top-right corner, flip ignored. */
  .project { margin: 5em 0 3.5em; }
  .project .tickets { margin: -22px 0 0 12px; padding-right: 12px; gap: 10px 12px; }
  .project .ticket { max-width: 80%; }
  .project .index-card, .project.flip .index-card { padding: 14px 18px 48px; }
  .project .index-card h3 { padding-right: 92px; }
  .project:not(.page) .index-card dl { padding-right: 84px; }
  /* Facts stack label over value, so long labels don't squeeze the values. */
  .project .index-card dl { display: block; }
  .project .index-card dd { margin-bottom: 0; }
  .project .photo, .project.flip .photo { top: -46px; right: -4px; left: auto; width: 96px; --tape-w: 40px; --tape-h: 12px; padding: 5px 5px 0; }
  .project .photo figcaption { padding: 4px 0 6px; font-size: 0.7em; }
  .project .stamp, .project.flip .stamp { right: 16px; bottom: 34px; font-size: 0.7em; }
  .project .bookmark { left: 56%; }
  .project .clip { left: 52%; }
}

/* Postcard (Contact): message on the left, stamp, postmark and address lines on the right. */
.postcard {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; aspect-ratio: 25 / 11; margin: 2em 0;
  background: #fbf6ea; transform: rotate(0.8deg);
  box-shadow: 0 1px 1px rgb(70 45 25 / 0.18), 0 6px 14px -4px rgb(70 45 25 / 0.3);
}
.postcard-msg { margin: 0; padding: 26px 22px; font-style: italic; border-right: 1px solid rgb(113 97 87 / 0.35); }
.postcard-addr { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 26px 22px 30px; }
.postcard-addr > a, .postcard-addr > span:last-child { border-bottom: 1px solid rgb(113 97 87 / 0.35); padding-bottom: 2px; }
.postcard .postmark { position: absolute; top: 34px; right: 46px; width: 150px; color: rgb(80 60 120 / 0.55); transform: rotate(-12deg); mix-blend-mode: multiply; }
.postage {
  position: absolute; top: 16px; right: 16px; width: 58px; height: 68px; padding: 4px; box-sizing: border-box;
  background: #fff;
  mask: radial-gradient(circle 3px, transparent 95%, #000) -4px -4px / 8px 8px, linear-gradient(#000 0 0) content-box;
}
.postage > span { display: grid; place-items: center; height: 100%; background: linear-gradient(160deg, #8fb79b, #6b9d7a 60%, #e0b86a 60%); color: #fff; font: 700 0.9em var(--sans); }
.postcard-msg p { margin: 0 0 1em; }
@media (max-width: 560px) {
  .postcard { grid-template-columns: 1fr; aspect-ratio: auto; }
  .postcard-msg { border-right: 0; border-bottom: 1px solid rgb(113 97 87 / 0.35); padding-right: 90px; }
  .postcard-addr { padding-top: 120px; }
  .postcard .postmark { top: 22px; right: 60px; }
}

.postcard-addr svg.icon { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Card link: the project title links to its page and its hit area covers the whole card. */
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:hover, .card-link:focus-visible { text-decoration: underline; }
.card-link span { font-size: 0.8em; }
.project .index-card { transition: box-shadow 0.35s ease; }
.project .index-card:has(.card-link:hover) { box-shadow: var(--lift); }

/* Project page: the same card, opened up. All text keeps to the 26px ruling. */
.project.page { margin: 3em 0 7em; }
.project.page .index-card { padding: 14px 22px 26px; }
.project.page .stamp { top: 20px; right: 22px; bottom: auto; }
.sheet h2 { margin: 26px 0 0; font: 0.8em/26px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soil); }
.sheet h3 { margin: 26px 0 0; font: italic 1em/26px var(--serif); }
.index-card.sheet p, .sheet ul, .sheet blockquote, .sheet pre { margin: 26px 0 0; }
.index-card.sheet h2 + p, .sheet h2 + ul, .sheet h3 + ul, .sheet h3 + p, .sheet dl + p { margin-top: 0; }
.sheet ul { padding-left: 1.2em; }
.sheet blockquote { padding-left: 1em; border-left: 2px solid rgb(113 97 87 / 0.35); font-style: italic; }
.sheet blockquote p { margin: 0; }
.sheet blockquote footer::before { content: "— "; }
.sheet pre { font: 0.8em/26px "Courier New", monospace; white-space: pre-wrap; word-break: break-all; }
.sheet .credits > :first-child { margin-top: 26px; font-weight: bold; }
.sheet .credits p { margin: 0; }
.sheet h2 + .credits > :first-child { margin-top: 0; }
.project.page .index-card > h1 { font-size: 1.5em; }

/* Gallery of taped screenshots on a project page: a grid after the card, or, where the screen has
   room beside the column, scattered down both margins. Hover straightens and lifts a photo. */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; margin: 0 0 4em; }
.gallery .photo { margin: 0; transition: transform 0.35s ease, box-shadow 0.35s ease; }
.gallery .photo:hover { z-index: 3; box-shadow: var(--lift); }
@media (prefers-reduced-motion: no-preference) { .gallery .photo:hover { transform: rotate(0deg) scale(1.04); } }
@media (min-width: 1180px) {
  /* Each photo has its own spot: --s scales the width, --f places it across its margin (0 = outer edge). */
  .gallery { --w: min(250px, calc(50% - 325px - 56px)); position: absolute; top: 150px; left: 0; width: 100%; margin: 0; display: block; pointer-events: none; }
  .gallery .photo { --s: 1; --f: 0.5; position: absolute; width: calc(var(--w) * var(--s)); pointer-events: auto; }
  .gallery .photo:nth-child(odd) { left: calc((50% - 325px - var(--w) * var(--s)) * var(--f)); }
  .gallery .photo:nth-child(even) { right: calc((50% - 325px - var(--w) * var(--s)) * var(--f)); }
  .gallery .photo:nth-child(1) { top: 20px; --s: 0.92; --f: 0.25; }
  .gallery .photo:nth-child(2) { top: 140px; --s: 1; --f: 0.7; }
  .gallery .photo:nth-child(3) { top: 300px; --s: 0.82; --f: 0.75; }
  .gallery .photo:nth-child(4) { top: 470px; --s: 0.95; --f: 0.15; }
  .gallery .photo:nth-child(5) { top: 590px; --s: 1; --f: 0.4; }
  .gallery .photo:nth-child(6) { top: 790px; --s: 0.86; --f: 0.55; }
}

/* Opening a project card grows it into its page (cross-document view transition), motion allowed only. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: 0.45s; animation-timing-function: ease; }
}

/* News clippings: newsprint cut out with scissors and taped down; the first runs across both columns. */
.clippings { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 28px; margin: 2.5em 0 1.5em; }
.clipping {
  position: relative; padding: 22px 20px 26px; background: #f6f1e6;
  box-shadow: 0 1px 1px rgb(70 45 25 / 0.16), 0 5px 12px -5px rgb(70 45 25 / 0.3);
  clip-path: polygon(0 0, 100% 0, 100% 97%, 96% 100%, 91% 98%, 85% 100%, 78% 98.5%, 70% 100%, 62% 98%, 55% 100%, 47% 98.5%, 39% 100%, 31% 98%, 24% 100%, 16% 98.5%, 8% 100%, 3% 98%, 0 100%);
  transform: rotate(var(--tilt, 0deg)); transition: box-shadow 0.35s ease;
}
.clippings .clipping:first-child { grid-column: 1 / -1; }
.clipping:has(:is(h2, h3) a:hover) { box-shadow: var(--lift); }
.clipping .kicker { margin: 0 0 6px; font: 0.72em var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.clipping h3, .clipping h2, .clipping h1 { margin: 0 0 12px; font: bold 1.25em/1.25 var(--serif); }
.clipping h1 { font-size: 1.8em; }
.clipping :is(h2, h3) a { color: inherit; text-decoration: none; }
.clipping :is(h2, h3) a:hover { text-decoration: underline; }
.clipping .cover { display: block; width: 100%; height: auto; margin: 0 0 12px; filter: sepia(0.12) saturate(0.9); }
.clipping p { margin: 0 0 1em; line-height: 1.5; }
.clipping > p:last-child { margin-bottom: 0; }
.more { margin: 0 0 1em; text-align: right; font-family: var(--sans); }

/* A whole article: one wide clipping, straight, set for reading. */
.clipping.full { margin: 2em 0 4em; padding: 30px 30px 40px; clip-path: none; }
.clipping .byline { font: italic 0.95em var(--serif); }
.clipping .video a { font-family: var(--sans); }
.clipping.full :is(h2, h3) { margin: 1.6em 0 0.4em; font: bold 1.05em var(--serif); }
.clipping blockquote { margin: 1em 0; padding-left: 1em; border-left: 2px solid rgb(113 97 87 / 0.35); font-style: italic; }
.gz-figure { margin: 1.5em 0; }
.gz-figure img { display: block; width: 100%; height: auto; }
.gz-figure figcaption { margin-top: 6px; font-size: 0.85em; font-style: italic; }
.gz-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gz-pair figcaption { grid-column: 1 / -1; }

body > footer { margin: 5em 0 2.5em; font: 0.8em/1.6 var(--sans); }
body > footer p { margin: 0.3em 0; }
body > footer a[aria-current] { font-weight: bold; text-decoration: none; }

@media (max-width: 560px) {
  .clippings { grid-template-columns: 1fr; }
  .clipping.full { padding: 22px 18px 32px; }
}

/* Coffee-cup ring on the latest article: decorative, ignores the pointer. */
.stain { position: absolute; top: -34px; right: 18px; z-index: 2; width: 170px; height: auto; pointer-events: none; mix-blend-mode: multiply;
  transform: rotate(18deg); mask-image: linear-gradient(200deg, #000 30%, rgb(0 0 0 / 0.25) 75%, rgb(0 0 0 / 0.6)); }
.clipping.full { position: relative; }
@media (max-width: 560px) { .stain { width: 120px; top: -30px; right: -20px; } }

/* Desk pieces in the wide-screen margins (placed by site.js): dimmed, behind everything, never in the way. */
html { overflow-x: clip; }
.desk { position: absolute; z-index: -1; opacity: 0.55; filter: saturate(0.75); pointer-events: none; user-select: none; }

/* 404 pile (site.js): desk pieces over the message; they lift on hover and follow the pointer. */
.tidy { position: relative; margin: 1.5em 0 3em; }
.tidy.piled { height: 420px; overflow: hidden; touch-action: none; }
.tidy.piled .under { position: absolute; inset: 0; display: grid; place-content: center; padding: 0 16px; text-align: center; }
.tidy .big { margin: 0; font: 700 4em/1 var(--sans); color: var(--soil); }
.tidy h1 { margin: 0.3em 0 0.2em; }
.tidy .under p { margin: 0.4em 0; }
.tidy .piece { position: absolute; top: 0; left: 0; cursor: grab; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 0 0 rgb(70 45 25 / 0)); transition: filter 0.2s ease, scale 0.2s ease; }
.tidy .piece:hover { scale: 1.03; filter: drop-shadow(0 10px 10px rgb(70 45 25 / 0.25)); }
.tidy .piece.held { cursor: grabbing; scale: 1.06; filter: drop-shadow(0 16px 14px rgb(70 45 25 / 0.3)); }
.tidy-hint { margin: 1.5em 0 0; font: italic 1em var(--serif); }

/* Logo slip (site.js), shown by right-clicking the logo: each file as a picture on its intended background. */
.brand-slip { position: absolute; z-index: 20; width: 420px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 14px 16px 16px; background: #fbf6ea; color: var(--soil);
  font: 0.8em/1.35 var(--sans); box-shadow: 0 1px 2px rgb(70 45 25 / 0.2), 0 10px 22px -6px rgb(70 45 25 / 0.4); transform: rotate(-1deg); }
.brand-slip[hidden] { display: none; }
.brand-slip > a { display: block; margin-bottom: 12px; font-size: 1.1em; font-weight: bold; }
.brand-slip ul { display: grid; gap: 12px 10px; margin: 0; padding: 0; list-style: none; }
.brand-slip .logos { grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
.brand-slip .marks { grid-template-columns: repeat(4, 1fr); }
.brand-slip li { display: flex; flex-direction: column; gap: 3px; }
.brand-slip li img { display: block; box-sizing: border-box; width: 100%; aspect-ratio: 16 / 7; object-fit: contain; padding: 8px 12px; background: var(--paper); border-radius: 4px; }
.brand-slip li.is-logo-on-black img { background: #000; }
.brand-slip .marks img { aspect-ratio: 1; padding: 10px; }
.brand-slip .marks li[class^="is-tile"] img { padding: 6px; background: none; }
.brand-slip li span:last-child { color: var(--ink); }

/* Playtest notes (/qa-<date>/): an old note, set like an article. */
.qa .dateline { font: 0.8em var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.qa .important { margin: 1em 0; padding: 4px 16px; border-left: 3px solid #b5543f; }

/* YouTube in an article: the cover with a play button until clicked (site.js), then the player at the same size. */
.yt { position: relative; z-index: 3; display: block; margin: 0 0 12px; }
.yt .cover { margin: 0; }
.yt .play { position: absolute; top: 50%; left: 50%; width: 76px; height: 54px; margin: -27px 0 0 -38px; border-radius: 14px; background: rgb(46 39 34 / 0.82);
  transition: background 0.2s ease, transform 0.2s ease; }
.yt .play::after { content: ""; position: absolute; top: 15px; left: 30px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #f2e0ca; }
.yt:hover .play, .yt:focus-visible .play { background: #4f8a5d; transform: scale(1.06); }
/* Above the coffee ring and not rotated: Safari mis-hits clicks in a player under blended or transformed layers. */
.yt-frame { position: relative; z-index: 3; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 12px; border: 0; }
.clipping.full:has(.yt, .yt-frame) { transform: none; }
.chapters { padding-left: 0; list-style: none; columns: 2; column-gap: 24px; }
.chapters li { break-inside: avoid; }
.chapters time { display: inline-block; min-width: 3.2em; font-family: var(--sans); font-size: 0.9em; }
@media (max-width: 560px) { .chapters { columns: 1; } }