/* ===================================================================
   Caravan — a You Ship, We Ship from Hack Club

   Drawn in crayon on cheap paper. Every rule and outline on this page is
   a real stroke pushed through an SVG turbulence filter (#wob / #wob2 /
   #wob3, shipped by src/components/PaperDefs.astro), so no two lines are
   the same twice.

   One pass, top to bottom, and nothing below re-declares anything above:

     1  tokens
     2  base            reset, body, browser surfaces, hidden helpers
     3  type
     4  drawn edges     the wobbly border every panel and button borrows
     5  icons
     6  buttons
     7  photographs     the pinned-up snapshot, shared by every page
     8  landing         /
     9  consignment     /ship
    10  landing after sign-in   /joined
    11  footer
    12  motion          the one place motion is switched off

   Page sections (8–10) carry their own narrow-screen block at the end of
   the section, so a mobile override lives next to what it overrides and
   can never be undone by a later desktop rule.
   =================================================================== */


/* ── 1. tokens ─────────────────────────────────────────────────── */

:root{
  /* paper */
  --paper:#f6efdf;
  --paper-2:#efe4cd;
  --ink:#2b2320;
  --ink-2:#5f5044;

  /* crayons — the strokes */
  --red:#c8402f;
  --orange:#cf7226;
  --yellow:#d9a72c;
  --green:#4a8f45;
  --blue:#31629f;
  --purple:#75459f;
  /* the crayons above go on paper as strokes; text needs deeper versions */
  --red-ink:#a3301f;
  --orange-ink:#9c5011;
  --green-ink:#35682f;

  /* crayons — the fills, laid down light the way wax actually goes on */
  --fill-yellow:#f2d98a;
  --fill-blue:#c3d6ee;
  --fill-red:#eda294;

  /* pale papers: every panel is a different colour of scrap */
  --tint-yellow:#f6e8c0;
  --tint-green:#dcead3;
  --tint-pink:#f6ded9;

  /* /ship is pre-printed rather than drawn: one flat press ink, plus the
     stamp pad. --press-faint is for rules only, never text — it composites
     to 1.79:1 and fails outright. */
  --press:#365a83;
  --press-faint:rgba(54,90,131,.42);
  --stamp:#a3301f;

  /* type: a bouncy chunky face for anything shouted, a slanted handwriting
     for anything read. Comic Sans MS is not a webfont: it ships with Windows
     and macOS but not Linux, Android or iOS, so Comic Neue (the same shapes,
     redrawn as a real webfont) catches everyone else. Naming Comic Sans MS
     directly in the stack is not enough — some Android font configs alias
     unknown MS family names onto the system sans, which swallows the fallback
     before Comic Neue gets a look in. The local()-only faces below sidestep
     that: if the machine really has Comic Sans installed the face loads, and
     if it does not the face fails and the stack falls through to Comic Neue. */
  --display:Grandstander,"Comic Sans Local","Comic Neue",ui-rounded,cursive;
  --hand:"Comic Sans Local","Comic Neue",ui-rounded,cursive;
  /* file literals only. Not a costume for "technical": these are paths you
     type, and the system stack costs no extra font load. */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* measure and rhythm */
  --measure:58rem;
  --band:clamp(3.5rem,7vw,6rem);
  --gutter:clamp(1.1rem,4vw,3rem);

  /* paper tooth: the grain the whole page sits in */
  --tooth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='0.46'/%3E%3C/svg%3E");
  /* wax: a faint drag across the tooth. Anything stronger than this reads as
     woodgrain on a large panel rather than crayon. */
  --wax:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.34' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23w)' opacity='0.2'/%3E%3C/svg%3E");

  /* the one shadow shape on the site: hard offset, no blur, the way a print
     lying on paper throws an edge rather than a glow */
  --lift:7px 8px 0 rgba(43,35,32,.16);
}

@font-face{
  font-family:"Comic Sans Local";
  src:local("Comic Sans MS"),local("ComicSansMS");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Comic Sans Local";
  src:local("Comic Sans MS Bold"),local("ComicSansMS-Bold");
  font-weight:700;font-style:normal;font-display:swap;
}


/* ── 2. base ───────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
/* decoration deliberately hangs off the edge of its sheet, and a rotated
   near-full-width panel throws a few pixels either side. A guard, not a fix:
   nothing on the page is sized past the viewport. */
html{scroll-behavior:smooth;overflow-x:hidden}

body{
  margin:0;
  font-family:var(--hand);
  font-size:1.1875rem;
  font-weight:400;
  line-height:1.62;
  color:var(--ink);
  background-color:var(--paper);
  background-image:var(--tooth);
  background-blend-mode:multiply;
}

/* nothing on the page is allowed to be wider than the page */
img{max-width:100%}

/* the surfaces the browser would otherwise draw for us */
::selection{background:var(--fill-yellow);color:var(--ink)}
:focus-visible{outline:3px dashed var(--purple);outline-offset:4px;border-radius:2px}
::-webkit-scrollbar{width:14px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--red);border:3px solid var(--paper-2);border-radius:99px}

/* the filter and symbol library, and anything else present but not seen */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.vh,.skip{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.skip:focus{
  position:fixed;left:.5rem;top:.5rem;z-index:99;
  width:auto;height:auto;margin:0;clip-path:none;
  background:var(--fill-yellow);color:var(--ink);padding:.6rem 1rem;font-weight:700;
}


/* ── 3. type ───────────────────────────────────────────────────── */

h1,h2,h3{font-family:var(--display);filter:url(#wob);margin:0}

h1{
  font-size:clamp(2.4rem,6.6vw,4.6rem);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.015em;
  text-wrap:balance;
}
h2{
  font-size:clamp(1.75rem,3.4vw,2.4rem);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.01em;
  margin-bottom:1.5rem;
}
h3{font-size:1.4375rem;font-weight:700;line-height:1.32;margin-bottom:.35rem}

p{margin:0 0 1rem}
b{font-weight:700}

a{color:var(--blue);text-underline-offset:4px;text-decoration-thickness:2px}
a:hover{color:var(--red-ink)}

/* a note in the margin, in a second crayon */
.marg{
  display:inline-flex;align-items:center;gap:.35rem;
  margin:0;color:var(--red-ink);font-size:.875rem;
  transform:rotate(-3.5deg);
}


/* ── 4. drawn edges ────────────────────────────────────────────── */
/* The border lives on a pseudo-element so the turbulence never touches the
   text, and the shadow rides the same filter as the line. */

.btn,.example-card,.sheet{position:relative}
.btn::before,.example-card::before,.sheet::before{
  content:"";position:absolute;inset:-5px;pointer-events:none;
  border:3.5px solid var(--ink);
  border-radius:6px;
  filter:url(#wob2);
}
.example-card::before,.sheet::before{box-shadow:var(--lift)}
.example-card::before{border-color:var(--orange)}
.sheet::before{border-color:var(--green)}

/* a hand-drawn rule between two things in a list */
.get+.get::before,
.qs details+details::before,
.not-yet::before{
  content:"";position:absolute;top:0;left:0;
  border-top:2.5px solid var(--ink);opacity:.28;
  filter:url(#wob2);
}
.get+.get::before,.qs details+details::before{right:0}


/* ── 5. icons: one family, one stroke weight, all hand-drawn ───── */

.ic{
  width:2.4rem;height:2.4rem;flex:none;
  color:var(--ink);
  fill:none;stroke:currentColor;stroke-width:3.6;
  stroke-linecap:round;stroke-linejoin:round;
  filter:url(#wob2);
}
.ic-lg{width:3.25rem;height:3.25rem}
.ic-sm{width:1.1rem;height:1.1rem;stroke-width:4.5;vertical-align:-.15em;margin-left:.45em}
.heart{color:var(--red);margin-left:.25em}


/* ── 6. buttons ────────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;
  font-family:var(--display);font-weight:700;
  text-decoration:none;padding:.65rem 1.35rem;
  transition:transform .14s cubic-bezier(.2,.8,.25,1);
}
.btn-go{
  background-color:var(--fill-yellow);color:var(--ink);
  background-image:var(--wax);background-blend-mode:multiply;
}
.btn-go::before{box-shadow:5px 6px 0 var(--ink)}
.btn-big{font-size:1.4375rem;padding:.85rem 1.75rem}
.btn:hover{transform:translate(-1px,-2px)}
.btn-go:hover::before{box-shadow:7px 9px 0 var(--ink)}
.btn:active{transform:translate(2px,3px)}
.btn-go:active::before{box-shadow:2px 2px 0 var(--ink)}

.actions{
  display:flex;align-items:center;justify-content:center;
  gap:1.25rem;flex-wrap:wrap;margin-top:2.25rem;
}

/* the submit button while the browser is off to Hack Club auth. The spinner
   slot is always in the layout (just hidden), so the button never jumps
   width on click. */
.btn-submit .spinner{
  visibility:hidden;
  flex:none;margin-left:.6rem;
  width:1.05em;height:1.05em;border-radius:50%;
  border:3px dashed currentColor;border-right-color:transparent;
  animation:spin 1.1s linear infinite;
}
.signup.is-sending .spinner{visibility:visible}
.btn-submit:disabled{cursor:progress;opacity:.85}
.btn-submit:disabled:hover{transform:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn-submit .spinner{animation-duration:2.6s}
}


/* ── 7. photographs ───────────────────────────────────────────────
   A photo on this site is a print lying on the paper: a white margin, a hard
   offset edge, and one thing holding it down. One fastening per print — tape,
   a pushpin or a paperclip, never two on the same corner. */

.snap{
  position:relative;margin:0;
  flex:0 0 auto;
  padding:.6rem .6rem 1.5rem;
  background:#fffdf7;
  box-shadow:5px 7px 0 rgba(43,35,32,.14);
}
.snap img{display:block;width:100%;height:auto}
.snap figcaption{
  margin-top:.45rem;text-align:center;
  font-size:.875rem;color:var(--ink-2);
}

/* tape: the default fastening, and the one the example card uses too */
.tape,.snap:not(.pinned)::after{
  background:var(--fill-yellow);opacity:.72;
  background-image:var(--wax);background-blend-mode:multiply;
  border-left:2px dashed rgba(43,35,32,.28);
  border-right:2px dashed rgba(43,35,32,.28);
  filter:url(#wob3);
}
.tape{position:absolute;top:-.75rem;width:5.5rem;height:1.6rem}
.tape-l{left:-1.4rem;transform:rotate(-7deg)}
.tape-r{right:-1.4rem;transform:rotate(5deg)}
.snap:not(.pinned)::after{
  content:"";position:absolute;top:-.7rem;left:50%;
  width:4.5rem;height:1.5rem;margin-left:-2.25rem;
  opacity:.7;
}

/* a pushpin or a paperclip instead, on the prints marked .pinned */
.snap img.fastener{
  position:absolute;z-index:2;
  width:auto;
  filter:drop-shadow(1px 2px 0 rgba(43,35,32,.2));
  image-rendering:pixelated;   /* hard-edged pixel art, never smoothed */
}
.snap img.pin{height:2.7rem;top:-.9rem;left:50%;margin-left:-.6rem;transform:rotate(-8deg)}
.snap img.clip{height:2.9rem;top:-1.15rem;right:2rem;transform:rotate(9deg)}


/* ── 8. landing ────────────────────────────────────────────────── */

/* the hero is a drawing, not a header bar. No nav rail across the top: the
   page opens on the booth itself, the way a flyer opens on the picture. */
.hero{
  position:relative;
  max-width:var(--measure);margin:0 auto;
  padding:clamp(2.5rem,6vw,4rem) var(--gutter) clamp(2rem,5vw,3.5rem);
  text-align:center;
}
/* the hero sprite and the wordmark are both hard-edged pixel art: no smoothing */
.scene{display:block;width:min(100%,615px);height:auto;margin:0 auto;image-rendering:pixelated}

/* the two pieces of lettering are one lockup: the block is the Caravan
   wordmark's width, and "hack club" sits along its left edge above it, so the
   small line reads off the big one instead of off the page gutter. */
.wordmark{width:min(88%,640px);margin:.6rem auto 0;line-height:0}
.wordmark img{display:block;width:100%;height:auto;image-rendering:pixelated}
/* the kicker is flat single-colour art, so its ink lives in the PNG itself
   (--ink-2 #5f5044), not here: a mask would resample the pixel grid. */
.wordmark img.wordmark-kicker{width:40%;margin-bottom:.3rem}   /* 128px art to the 256px: half the size */
.by{color:var(--red-ink);font-size:1.125rem;margin:.15rem 0 0}

.hook{
  font-family:var(--display);
  position:relative;display:inline-block;
  font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700;
  /* the underline is drawn across the whole block, so the block has to hug
     its text: cap the measure and balance the lines, or a short last line
     leaves the line hanging under empty space */
  max-width:30ch;
  text-wrap:balance;
  margin:2.25rem 0 0;
  filter:url(#wob);
}
/* the one authored moment on the page: the underline gets drawn */
.uline{
  position:absolute;left:0;right:0;bottom:-.2em;
  width:100%;height:.32em;overflow:visible;
  fill:none;stroke:var(--yellow);stroke-width:9;stroke-linecap:round;
  filter:url(#wob3);
}
.uline path{stroke-dasharray:440;stroke-dashoffset:440;animation:draw 1.05s cubic-bezier(.2,.8,.25,1) .35s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.sub{max-width:46ch;font-size:1.625rem;line-height:1.45;margin:2rem auto 0}

/* the signup: one field, drawn like everything else. The input borrows the
   button's wobble so the pair reads as two objects on the same page rather
   than a form bolted onto a drawing. */
.signup{display:flex;align-items:center;justify-content:center;gap:1.1rem;flex-wrap:wrap}
.signup-input{
  position:relative;
  font:inherit;font-size:1.25rem;
  padding:.8rem 1.1rem;min-width:min(19rem,80vw);
  color:var(--ink);background:var(--paper-2);
  border:3.5px solid var(--ink);border-radius:6px;
  filter:url(#wob3);
}
.signup-input::placeholder{color:var(--ink-2);opacity:.7}
.signup-input:focus-visible{outline:3px solid var(--red);outline-offset:3px;background:var(--paper)}
.signup-msg{
  flex-basis:100%;margin:.25rem 0 0;
  color:var(--red-ink);font-size:.9375rem;font-weight:700;
  transform:rotate(-1.5deg);
}

/* the worked example: off-axis, taped down, overlapping its own heading */
.example{padding:0 var(--gutter);max-width:var(--measure);margin:0 auto}
.example-card{
  transition:transform .4s cubic-bezier(.2,.8,.25,1);
  padding:2.25rem clamp(1.4rem,3.5vw,2.5rem) 1.75rem;
  background-color:var(--tint-yellow);
  background-image:var(--wax);background-blend-mode:multiply;
  transform:rotate(-1.1deg);
}
.example:hover .example-card{transform:rotate(0deg)}
.example-card h2{margin:0 0 1rem;font-size:clamp(1.5rem,3vw,2.05rem)}
.example-card p:last-of-type{margin-bottom:0}
.whole-thing{font-weight:700;color:var(--orange-ink)}
/* the photo laid on top of the worked example */
.snap-inline{
  float:right;width:min(42%,20rem);
  margin:.2rem 0 1.1rem 1.9rem;
  transform:rotate(2.4deg);
}

/* proof: real booths, pinned to the paper. Deliberately not a section — no
   heading, no panel, no band — the way you'd pin up evidence. */
.proof{
  position:relative;
  max-width:min(100%,78rem);
  margin:calc(var(--band) * .85) auto 0;
  padding:1rem var(--gutter) 0;
  display:grid;grid-template-columns:repeat(3,1fr);
  align-items:start;
  gap:clamp(1rem,2.6vw,2.25rem);
}
/* matched on height, so a portrait shot sits narrow beside the landscapes
   instead of towering over them */
.proof .snap > img:not(.fastener){width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.snap-1{transform:rotate(-2.2deg)}
.snap-2{transform:rotate(1.6deg);margin-top:1.1rem}
.snap-3{transform:rotate(-1.4deg);margin-top:.4rem}
.marg-proof{
  order:-1;grid-column:1/-1;
  margin:0 0 .5rem clamp(.5rem,4vw,3.5rem);transform:rotate(-2.5deg);
}

/* bands */
.band{padding:var(--band) var(--gutter) 0;max-width:var(--measure);margin:0 auto}

/* how it works: staggered, not a card grid */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1.75rem,4vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  grid-template-rows:auto auto auto;
}
.step{
  position:relative;max-width:26rem;
  display:grid;grid-row:span 3;grid-template-rows:subgrid;
  align-content:start;
}
.step:nth-child(1){transform:rotate(-1deg)}
.step:nth-child(2){transform:rotate(.7deg)}
.step:nth-child(3){transform:rotate(-.5deg)}
.step h3{display:flex;align-items:baseline;gap:.5rem}
/* ragged right. Justified was the first instinct — three columns of one
   measure reading as a single block of type — but at 14–18rem a column is
   too narrow to justify without stretching word spaces into rivers, and
   hyphenation only trades the rivers for a stack of hyphens. */
.step p{color:var(--ink-2);margin-bottom:0}
.step .ic{width:3rem;height:3rem;margin-bottom:.6rem}
/* hand-numbered, the way you'd number them on paper */
.n{flex:none;font-family:var(--display);font-size:1.4375rem;font-weight:800;color:var(--red)}
/* the arrow that carries you from one step to the next */
.joiner{
  display:none;
  position:absolute;top:.6rem;right:-2.4rem;
  width:5rem;height:2.2rem;
  fill:none;stroke:var(--ink-2);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
  filter:url(#wob3);
}
/* Subgrid only earns its keep when all three steps are on one row: below that
   the columns wrap and the shared rows line up steps that are no longer beside
   each other. Off it goes, and each step is its own flow again. */
@media (max-width:63.999rem){
  .step{display:block}
}

/* only run the arrows between the steps when all three are on one row */
@media (min-width:64rem){
  /* Three across, so the grid's rows are now *inside* each step rather than
     between steps: the icon, its heading and its paragraph. Only the column
     gap still separates one step from the next, so the row gap drops to a
     hair and each step's own margins set its internal rhythm. */
  .steps{grid-template-columns:repeat(3,1fr);row-gap:.4rem}
  .joiner{display:block}
  .step:last-child .joiner{display:none}
}

/* what we send you: the poster is a real object, the list reads beside it */
.crate-spread{display:flex;align-items:flex-start;gap:clamp(1.5rem,5vw,3.5rem);flex-wrap:wrap}
.crate-left{flex:0 0 auto;width:min(100%,16rem)}
.crate-spread .gets{flex:1 1 24rem;min-width:0}
.snap-poster{width:100%;transform:rotate(1.8deg)}
/* the stickers loose underneath it: each at its own angle and size */
.stickers{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.55rem .7rem;margin-top:1.4rem;
}
.stickers img{width:auto;height:2.9rem;filter:drop-shadow(2px 3px 0 rgba(43,35,32,.13))}
.stickers img:nth-child(1){height:2.4rem;transform:rotate(-4deg)}
.stickers img:nth-child(2){height:3.5rem;transform:rotate(3deg)}
.stickers img:nth-child(3){height:3.1rem;transform:rotate(-6deg)}
.stickers img:nth-child(4){height:3.8rem;transform:rotate(4deg)}
.stickers img:nth-child(5){height:3.4rem;transform:rotate(-3deg)}
.stickers img:nth-child(6){height:3rem;transform:rotate(6deg)}
.stickers img:nth-child(7){height:2.6rem;transform:rotate(-2deg)}
.stickers-note{margin:.7rem 0 0;text-align:center;font-size:.875rem;color:var(--ink-2)}

/* rows, not boxes */
.gets{margin:0;display:grid;gap:0}
.get{padding:1.5rem 0;position:relative}
.get:first-child{padding-top:0}
.get .ic{margin-top:.15rem}
dt{
  font-family:var(--display);font-size:1.4375rem;font-weight:700;
  display:flex;align-items:center;gap:clamp(1rem,3vw,1.5rem);
  margin-bottom:.35rem;
}
dd{margin:0 0 0 calc(3.25rem + clamp(1rem,3vw,1.5rem));color:var(--ink-2);max-width:52ch}

/* what's eligible: one sheet, five ticks */
.sheet{
  padding:1.75rem clamp(1.3rem,3.5vw,2rem);
  background-color:var(--tint-green);
  transform:rotate(-.7deg);
  background-image:var(--wax);background-blend-mode:multiply;
}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.checks li{display:flex;gap:.9rem;align-items:flex-start;max-width:64ch}
.tick{
  width:1.35rem;height:1.35rem;flex:none;margin-top:.28rem;
  fill:none;stroke:var(--green);stroke-width:5.5;
  stroke-linecap:round;stroke-linejoin:round;
  filter:url(#wob3);
}

/* faq */
.qs{margin-top:.5rem}
.qs details{position:relative;padding:.15rem 0}
.qs summary{
  cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:700;
  padding:.85rem 2rem .85rem 0;position:relative;
}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{
  content:"";position:absolute;right:0;top:1.05rem;
  width:1.3rem;height:1.3rem;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2320' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 8.4C7.4 11.1 9.6 13.9 12.1 16.5 14.3 13.7 17 11.1 19.9 7.9'/%3E%3C/svg%3E");
  transition:transform .22s cubic-bezier(.2,.8,.25,1);
}
.qs details[open] summary::after{transform:rotate(180deg)}
.qs summary:hover{color:var(--red-ink)}
.qs details p{margin:0 0 1rem;color:var(--ink-2);max-width:66ch}

/* the closing ask */
.ship{
  position:relative;
  max-width:var(--measure);
  margin:calc(var(--band) * 1.35) auto 0;
  padding:0 var(--gutter);
}
.ship h2{max-width:15ch;font-size:clamp(2.1rem,5vw,3.4rem);margin-bottom:1rem}
.ship p{max-width:42ch;font-size:1.375rem;color:var(--ink-2);margin-bottom:2.25rem}
/* he shows up again at the end, next to the last thing you read */
.stickguy{
  position:absolute;right:clamp(1.1rem,7vw,5rem);bottom:.5rem;
  width:auto;height:clamp(5rem,10vw,7.5rem);
  transform:rotate(3deg);
  image-rendering:pixelated;   /* same sprite, same rule: no smoothing */
}
@media (max-width:56rem){
  .stickguy{display:none}
}

@media (max-width:44rem){
  .actions{gap:.85rem}
  .sub{font-size:1.375rem}
  .example-card{transform:rotate(-.6deg)}
  /* the card runs nearly edge to edge here, so the tape has to sit on it
     rather than hang off the side of the screen */
  .tape{width:4rem;top:-.6rem}
  .tape-l{left:1.1rem}
  .tape-r{right:1.1rem}
  .snap-inline{float:none;width:100%;margin:.6rem 0 1.25rem;transform:rotate(1.2deg)}
  /* one per row here: two-up makes them too small to read as evidence */
  .proof{grid-template-columns:1fr}
  .proof .snap{max-width:21rem;margin-inline:auto}
  .proof .snap-2,.proof .snap-3{margin-top:.9rem}
  .marg-proof{margin:0 0 .35rem}
  .crate-left{width:min(100%,17rem);margin:0 auto}
}

@media (prefers-reduced-motion:reduce){
  .example-card{transition:none}
  .uline path{animation:none;stroke-dashoffset:0}
}


/* ── 9. consignment note — /ship ───────────────────────────────────
   The submission itself is a hosted form on someone else's domain, so this is
   the last page that belongs to us. Caravan mails you a crate, so the page is
   the paperwork: a pre-printed docket, filled in by hand.

   The whole device is one register clash. The form's own furniture — field
   names, notices, stage labels — is PRINTED: the display face, small, caps,
   wide-tracked, in a single flat press ink. Everything a person would write on
   it stays in the site's lowercase hand. Printed rules run through the gentlest
   turbulence only, because a cheap press is off true, not wobbly. */

.ship-page{max-width:52rem;margin:0 auto;padding:clamp(1.75rem,5vw,3rem) var(--gutter) 0}

/* not a nav bar — the way you'd write where you came from at the top of a page */
.crumb{margin:0 0 clamp(1.5rem,4vw,2.25rem);font-size:1rem}
.crumb a{color:var(--ink-2);text-decoration-thickness:2px;text-underline-offset:5px;font-weight:700}
.crumb a:hover{color:var(--red-ink)}

/* flex, not absolute: off the wrapper's 100% he measured the full column and
   hung past the viewport. The heading is capped so it wraps and leaves him
   somewhere to stand. */
.ship-top{display:flex;align-items:flex-end;flex-wrap:wrap;gap:.25rem .85rem;margin-bottom:1.25rem}
.ship-h1{font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.04;max-width:17ch;margin-bottom:0}
/* the sprite is hard-edged pixel art: whole-pixel sizes only, never smoothed */
.ship-guy{width:110px;height:113px;margin-bottom:.35rem;image-rendering:pixelated}

.ship-lede{
  font-size:1.375rem;line-height:1.5;
  max-width:44ch;color:var(--ink-2);
  margin-bottom:clamp(2.25rem,5vw,3rem);
}

/* the printed register: form furniture only, never body copy */
.printed{
  font-family:var(--display);
  font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--press);
}

/* the docket itself */
.note{
  position:relative;
  background-color:var(--tint-pink);
  background-image:var(--wax);background-blend-mode:multiply;
  padding:clamp(1.4rem,3.5vw,2.25rem) clamp(1.25rem,3.5vw,2.25rem) clamp(1.5rem,3.5vw,2rem);
  margin-bottom:clamp(2.5rem,6vw,3.5rem);
  box-shadow:var(--lift);
}
/* the printed frame: a double rule, press ink, only barely off true */
.note::before,.note::after{content:"";position:absolute;pointer-events:none;filter:url(#wob3)}
.note::before{inset:0;border:2px solid var(--press)}
.note::after{inset:5px;border:1px solid var(--press-faint)}

/* a docket gets franked, and that is the one mark on the sheet */
.frank{
  position:absolute;z-index:3;
  top:-1.5rem;right:calc(-1 * clamp(.35rem,2vw,1.6rem));
  width:3.6rem;padding:.3rem;
  background:#fffdf7;
  transform:rotate(6deg);
  filter:drop-shadow(3px 4px 0 rgba(43,35,32,.15));
}
/* the perforation is a dashed rule inside the paper margin: at this size that
   reads better than a real notched edge, for one pseudo-element instead of
   four mask layers. */
.frank::before{content:"";position:absolute;inset:.17rem;pointer-events:none;border:1.5px dashed rgba(54,90,131,.45)}
.frank img{display:block;width:100%;height:auto}

.note-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  padding-bottom:.7rem;margin-bottom:1.35rem;position:relative;
}
.note-head::after{
  content:"";position:absolute;bottom:0;left:0;right:0;
  border-top:2px solid var(--press);
  border-bottom:1px solid var(--press-faint);height:3px;
  filter:url(#wob3);
}
.note-head h2{
  margin:0;font-size:clamp(1.4rem,3.4vw,1.9rem);
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--press);filter:none;   /* printed, so no crayon wobble */
}
.note-ref{
  margin:0;font-family:var(--display);
  font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--press);
}

/* the small print, which is the one thing here that can disqualify you */
.note-notice{margin:0 0 1.6rem;max-width:58ch;font-size:1.0625rem;line-height:1.5;color:var(--ink-2)}
.note-notice .printed{
  color:var(--stamp);
  margin-right:.6rem;
  /* a printed box around the word, the way a form flags its own warning */
  border:1.5px solid var(--stamp);padding:.1rem .4rem .05rem;
  display:inline-block;vertical-align:.1em;
}
.note-notice b{color:var(--ink)}
.note-notice a{color:var(--stamp);font-weight:700}
.note-notice a:hover{color:var(--purple)}

/* the form's own section breaks */
.note-sec{margin:1.9rem 0 1rem;padding-bottom:.45rem;position:relative;font-size:.8125rem}
.note-sec::after{
  content:"";position:absolute;bottom:0;left:0;right:0;
  border-top:1.5px solid var(--press);filter:url(#wob3);
}
.fields+.note-sec{margin-top:2.1rem}

/* the ruled fields */
.fields{list-style:none;margin:0;padding:0}
.field{position:relative}
.field+.field{margin-top:1.15rem;padding-top:1.15rem}
.field+.field::before{
  content:"";position:absolute;top:0;left:0;right:0;
  border-top:1.5px solid var(--press-faint);
  filter:url(#wob3);
}

/* box · FIELD NAME · leader rule / then the hand-written answer beneath */
.field-label{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  grid-template-areas:"tick name rule tag" ".    body body body";
  align-items:center;
  column-gap:.7rem;row-gap:.4rem;
  cursor:pointer;
}
.field-box:focus-visible+.field-label{outline:3px dashed var(--purple);outline-offset:6px}

/* printed on the form, so crisp — not a crayon box */
.field-tick{
  grid-area:tick;position:relative;
  width:1.5rem;height:1.5rem;
  border:2px solid var(--press);
  background:rgba(246,239,223,.7);
  filter:url(#wob3);
}
/* the mark in the box is made by hand, in pen, so it is not the printed ink */
.field-tick::after{
  content:"";position:absolute;left:14%;top:6%;width:78%;height:88%;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335682f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 13.2 9.2 19.4 20.8 4.2'/%3E%3C/svg%3E");
  opacity:0;transform:scale(.6) rotate(-8deg);
  transition:opacity .12s ease-out, transform .16s cubic-bezier(.2,.8,.25,1);
}
.field-box:checked+.field-label .field-tick::after{opacity:1;transform:none}

/* printed caps = a form field, mono = a file you produce, hand = a thing you do */
.field-name{
  grid-area:name;
  /* the file chip is a box around a filename, so it has to hug it: at narrow
     widths this cell is the 1fr column and the chip stretched across it */
  justify-self:start;
  font-family:var(--display);font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--press);
}
.field-name.is-file{
  font-family:var(--mono);font-size:1.0625rem;font-weight:700;
  text-transform:none;letter-spacing:0;color:var(--ink);
  background:rgba(246,239,223,.72);
  border:1px solid var(--press-faint);
  padding:.06em .34em;
}
.field-name.is-phrase{
  font-family:var(--display);font-size:1.1875rem;font-weight:700;
  text-transform:none;letter-spacing:0;color:var(--ink);
}

/* the leader rule that runs off to the edge of the form, as on any real docket */
.field-rule{grid-area:rule;height:0;border-top:1.5px dashed var(--press-faint);filter:url(#wob3)}

/* required vs genuinely conditional — the distinction does real work here */
.field-tag{grid-area:tag;justify-self:end;white-space:nowrap}
.field-tag.is-cond{color:var(--ink-2)}

.field-body{grid-area:body;min-width:0;display:block}
.field-what{
  display:block;
  font-family:var(--display);font-size:1.25rem;font-weight:700;
  line-height:1.3;margin-bottom:.1rem;
}
.field-detail{grid-area:body;display:block;color:var(--ink-2);max-width:56ch;line-height:1.55}

.field-box:checked+.field-label .field-what,
.field-box:checked+.field-label .field-name.is-phrase,
.field-box:checked+.field-label .field-name.is-file{
  text-decoration:line-through;
  text-decoration-color:var(--green);text-decoration-thickness:3px;
}

/* the signature line */
.note-sign{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  margin:1.75rem 0 0;padding-top:1.15rem;position:relative;
}
.note-sign::before{
  content:"";position:absolute;top:0;left:0;right:0;
  border-top:1.5px solid var(--press-faint);filter:url(#wob3);
}
.note-sign-line{
  flex:1 1 12rem;min-width:0;
  padding-bottom:.15rem;
  border-bottom:1.5px solid var(--press-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* a stamp lands, it does not fade: scaled down from oversize, fast ease-out.
   Slapped over the signature line, the way a real one would be, rather than
   hanging off the edge of the sheet. */
.stamp{
  position:absolute;pointer-events:none;
  font-family:var(--display);font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--stamp);
  border:3.5px solid var(--stamp);
  padding:.3rem .7rem .2rem;
  font-size:clamp(.9375rem,2.4vw,1.1875rem);
  opacity:0;
  filter:url(#wob3);
}
.stamp-all{
  right:clamp(1rem,4vw,2.5rem);bottom:clamp(.6rem,2vw,1rem);
  transform-origin:100% 100%;
  transform:rotate(-4deg) scale(1.7);
}
.note.is-complete .stamp-all{
  opacity:.85;transform:rotate(-4deg) scale(1);
  transition:opacity .1s ease-out, transform .26s cubic-bezier(.15,.9,.3,1);
}
/* restored from storage on load: already stamped, never thudded */
.field.is-restored .field-tick::after,
.note.no-thud .stamp-all{transition:none}

/* the handoff */
.handoff{text-align:center;margin-bottom:clamp(2.75rem,7vw,4rem)}
.handoff .actions{margin-top:0}
.handoff-note{max-width:40ch;margin:1.5rem auto 0;font-size:1rem;color:var(--ink-2)}

/* tracking: the parcel's stages, not a numbered how-to */
.track{margin-bottom:clamp(2.5rem,6vw,3.5rem)}
.stages{list-style:none;margin:0;padding:0}
.stage{
  position:relative;
  display:grid;grid-template-columns:auto 1fr;
  column-gap:1rem;row-gap:.2rem;
  grid-template-areas:"dot name" ". body";
  padding-bottom:1.35rem;
}
.stage:last-child{padding-bottom:0}
/* the dashed run between stages, the way a tracking strip joins them */
.stage:not(:last-child)::before{
  content:"";position:absolute;
  left:.4375rem;top:1.25rem;bottom:.2rem;
  border-left:2px dashed var(--press-faint);
  filter:url(#wob3);
}
.stage-dot{
  grid-area:dot;
  width:.9375rem;height:.9375rem;margin-top:.32rem;
  border:2.5px solid var(--press);border-radius:50%;
  background:var(--paper);filter:url(#wob3);
}
.stage-name{grid-area:name;padding-top:.15rem}
.stage-body{grid-area:body;color:var(--ink-2);max-width:58ch}

/* what turns up, laid out: three real posters cascading down with the stickers
   scattered over and between them. Every coordinate is --s times a number, so
   the spread rescales from one value instead of a dozen breakpoint overrides. */
.arrives{
  --s:2;
  position:relative;margin:2.5rem auto 0;
  width:calc(var(--s) * 172px);
}
.arrives-scene{
  position:relative;
  width:calc(var(--s) * 172px);
  height:calc(var(--s) * 268px);
}
.arrives-scene img{position:absolute;display:block;height:auto}
.arrives figcaption{margin-top:.55rem;text-align:center;font-size:.875rem;color:var(--ink-2)}

/* three prints. One lies flat — with everything tilted, nothing reads as
   tilted, so the pile needs something square to be crooked against. */
.a-poster{
  border:calc(var(--s) * 1.5px) solid #fffdf7;   /* the print margin */
  filter:drop-shadow(4px 5px 0 rgba(43,35,32,.15));
}
.a-onboard{
  left:calc(var(--s) * 10px);top:calc(var(--s) * 8px);width:calc(var(--s) * 82px);
}
.a-hackpad{
  left:calc(var(--s) * 78px);top:calc(var(--s) * 44px);width:calc(var(--s) * 80px);
  transform:rotate(9deg);
}
.a-sprig{
  left:calc(var(--s) * 34px);top:calc(var(--s) * 140px);width:calc(var(--s) * 86px);
  transform:rotate(-5deg);
}

/* the handful. Two pairs, each pair sat together off the same sheet; one almost
   square, one on its head, one at an angle nobody would choose. The one mostly
   under the hackpad poster gets a corner showing, the way a real pile buries
   things. Each shadow is its own offset — nothing here fell the same way. */
.a-stk{filter:drop-shadow(2px 3px 0 rgba(43,35,32,.15))}
.a-skullpup{left:calc(var(--s) * 68px);top:calc(var(--s) * 92px);width:calc(var(--s) * 23px);transform:rotate(-11deg)}
.a-iheart{left:calc(var(--s) * 114px);top:calc(var(--s) * 5px);width:calc(var(--s) * 24px);transform:rotate(13deg);filter:drop-shadow(3px 2px 0 rgba(43,35,32,.17))}
.a-iheart2{left:calc(var(--s) * 133px);top:calc(var(--s) * 21px);width:calc(var(--s) * 20px);transform:rotate(-4deg)}
.a-boba{left:calc(var(--s) * 148px);top:calc(var(--s) * 46px);width:calc(var(--s) * 18px);transform:rotate(-15deg)}
.a-boba2{left:calc(var(--s) * 139px);top:calc(var(--s) * 63px);width:calc(var(--s) * 16px);transform:rotate(27deg);filter:drop-shadow(1px 3px 0 rgba(43,35,32,.12))}
.a-ship{left:calc(var(--s) * 6px);top:calc(var(--s) * 116px);width:calc(var(--s) * 26px);transform:rotate(-22deg);filter:drop-shadow(2px 4px 0 rgba(43,35,32,.19))}
.a-epoch{left:calc(var(--s) * 5px);top:calc(var(--s) * 143px);width:calc(var(--s) * 22px);transform:rotate(2deg)}
.a-pcb{left:calc(var(--s) * 97px);top:calc(var(--s) * 155px);width:calc(var(--s) * 30px);transform:rotate(17deg);filter:drop-shadow(3px 4px 0 rgba(43,35,32,.13))}
.a-flask{left:calc(var(--s) * 9px);top:calc(var(--s) * 212px);width:calc(var(--s) * 19px);transform:rotate(-47deg);filter:drop-shadow(4px 2px 0 rgba(43,35,32,.14))}
.a-onboard-stk{left:calc(var(--s) * 58px);top:calc(var(--s) * 233px);width:calc(var(--s) * 26px);transform:rotate(8deg)}
.a-kitten{left:calc(var(--s) * 127px);top:calc(var(--s) * 206px);width:calc(var(--s) * 24px);transform:rotate(169deg);filter:drop-shadow(1px 2px 0 rgba(43,35,32,.2))}

/* the cold-visitor line: body size, not marginalia. Someone can land on /ship
   first, and for them this is the only useful line on the page. */
.not-yet{max-width:48ch;padding-top:1.5rem;position:relative;color:var(--ink-2)}
.not-yet::before{width:min(100%,14rem);opacity:.26}

/* a tall spread is exactly the shape a column beside a vertical list wants */
@media (min-width:62rem){
  .track{
    display:grid;grid-template-columns:1fr auto;
    column-gap:clamp(1rem,2.5vw,1.75rem);align-items:end;
  }
  .track h2{grid-column:1/-1}
  .arrives{margin:0}
}

@media (max-width:44rem){
  .ship-lede{font-size:1.25rem}
  /* the leader rule needs room to read as a rule; below this it is a stub */
  .field-rule{display:none}
  .field-label{
    grid-template-columns:auto 1fr;
    grid-template-areas:"tick name" ".    tag" ".    body";
  }
  .field-tag{justify-self:start}
  /* anchored left here, so the oversize start state grows rightward; 1.7 was
     wider than a 320px phone for the 260ms of the thud */
  .stamp-all{
    right:auto;left:clamp(.75rem,3vw,2rem);
    transform-origin:0 100%;
    transform:rotate(-4deg) scale(1.35);
  }
}

/* the spread needs 344px at 2x plus the page gutters */
@media (max-width:24rem){
  .arrives{--s:1}
}

@media (prefers-reduced-motion:reduce){
  .stamp,.field-tick::after{transition:none !important}
  .stamp-all{transform:rotate(-4deg) scale(1)}
}


/* ── 10. landing after sign-in — /joined ───────────────────────── */

.joined{
  max-width:34rem;margin:0 auto;
  padding:clamp(2.5rem,9vw,5rem) var(--gutter);
  text-align:center;
}
.joined .scene{width:min(19rem,72vw);margin-bottom:1.25rem}
.joined h1{font-size:clamp(2rem,7vw,3rem);margin:0 0 .6rem}
.joined p{color:var(--ink-2);font-size:1.0625rem;margin:0 auto 1rem;max-width:30rem}
.joined .actions{margin-top:1.75rem}
.joined .marg{margin-top:2rem}


/* ── 11. footer ────────────────────────────────────────────────── */

.foot{
  margin-top:var(--band);
  padding:2.5rem var(--gutter) 3.5rem;
  max-width:var(--measure);margin-inline:auto;position:relative;
}
.foot::before{
  content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);
  border-top:3px solid var(--ink);filter:url(#wob2);
}
.foot p{margin:.35rem 0}
/* required on every YSWS site: Hack Club's privacy notice and the
   fulfillment bounty */
.legal{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1rem}
.legal a{
  color:var(--ink-2);font-size:.875rem;
  padding:.72rem .4rem;margin-inline:-.4rem;   /* 44px+ touch target, laid out as before */
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;
}
.legal a:hover,.legal a:focus-visible{color:var(--red-ink)}


/* ── 12. motion ────────────────────────────────────────────────── */
/* Last, and !important, so nothing declared above outlives it. */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important}
}