/* ══════════════════════════════════════════════════════════════
   Taverna Centrale — v3 "organic" draft
   Built against design/design-system/foundations/tokens.json
   and design/COMPONENT-CRAFT.md.
   Wordmark: the hand-lettered artwork from the benchmark mock, knocked out
   to transparency (COMPONENT-CRAFT.md). No web font imitates it, so it stays
   an image with real text in alt. Everything else is real text: Inter for UI,
   Caveat Brush for margin notes. Marks are inline SVG so they scale and recolour.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* colour — tokens.json */
  --paper:#F7F2EB; --ink:#171411; --muted:#6B6660; --line:#DDD3C2; --card:#EFE9DF;
  --red:#D2202E; --pink:#F3B9C4; --yellow:#F2C63D; --blue:#4A46D6;
  --dark:#141110; --dark-fg:#E8DFCF; --dim:#8C8579;

  /* radius — one value, almost square, deliberately */
  --r:0.15rem;

  /* space scale — tokens.json */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:26px; --s7:34px; --s8:44px; --s9:68px; --s10:96px;

  /* No real Taverna artefact contains a serif or a painted face — the logo
     disc, the facade letters and the red type in the room photo are all
     grotesk. Display is Inter 900; the hand is kept only for margin notes. */
  --ui:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --hand:"Caveat Brush", "Bradley Hand", cursive;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  /* paper grain — stand-in until the real tile exists (artefact 1.5) */
  background-image:
    radial-gradient(circle at 17% 23%, rgba(23,20,17,.020) 0 1px, transparent 1px),
    radial-gradient(circle at 71% 61%, rgba(23,20,17,.018) 0 1px, transparent 1px),
    radial-gradient(circle at 43% 87%, rgba(23,20,17,.015) 0 1px, transparent 1px);
  background-size:37px 37px, 53px 53px, 29px 29px;
}
img{max-width:100%; display:block}
a{color:var(--red)}

.wrap{max-width:940px; margin:0 auto; padding:0 var(--s5)}
@media(min-width:720px){ .wrap{padding:0 var(--s8)} }

/* ── the hand: margin notes, never the display face set small ── */
.hand{
  font-family:var(--hand); color:var(--blue);
  font-size:1.35rem; line-height:1.2; transform:rotate(-1.5deg);
  display:inline-block;
}

/* ── work-in-progress note, as a taped scrap ────────────────── */
/* A slim strip, not a splash. The notice has to be read, but it must
   never be the reason the one action sits below the fold. */
.wipbar{
  background:var(--ink); color:#E8DFCF; text-align:center;
  padding:var(--s2) var(--s5); font-size:.74rem; line-height:1.45;
}
.wipbar strong{color:#fff; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.wipbar i{opacity:.6; margin-left:var(--s3)}
@media(max-width:640px){
  .wipbar i{display:block; margin:2px 0 0}
}


/* ══ hero: the benchmark composition ══════════════════════════
   Left: kicker, hand-lettered wordmark, tagline, the one action,
   a note on a pink blob. Right: annotation with an arrow into a
   taped cut-out on a colour block, and a circled note beneath.
   Rotation stays inside −4°…+4° (halved on mobile) per the tokens. */

.hero{padding:var(--s7) 0 var(--s9)}
.hero .wrap{position:relative}

.kicker{
  font-family:var(--ui); font-weight:700; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  line-height:1.5; margin:0 0 var(--s4); position:relative;
  display:inline-block; transform:rotate(-1deg);
}
.kicker .star{position:absolute; left:calc(100% + 14px); top:2px; width:22px; height:22px}
.kicker .star path{fill:none; stroke:var(--ink); stroke-width:3.4; stroke-linecap:round}

.wordmark{margin:0; line-height:0}
.wordmark img{width:100%; max-width:440px; height:auto; transform:rotate(-1.2deg)}

.lettertag{margin:var(--s4) 0 0; position:relative; display:inline-block}
.lettertag .hand{font-size:1.5rem; color:var(--ink); transform:rotate(-1deg)}
.lettertag .rule{display:block; width:100%; max-width:280px; height:10px; margin-top:2px}
.lettertag .rule path{fill:none; stroke:var(--ink); stroke-width:2.6; stroke-linecap:round}

.addr{
  font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin:var(--s5) 0 0;
}

/* a note sitting on a torn pink blob */
.blobnote{position:relative; margin:var(--s8) 0 0; max-width:300px; transform:rotate(-1.6deg)}
.blobnote{padding:var(--s6) var(--s8)}
.blobnote .blob{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.blobnote .blob path{fill:var(--pink); opacity:.85}
.blobnote span{
  position:relative; display:block; font-family:var(--ui); font-weight:600;
  font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  line-height:1.7; color:var(--ink);
}

/* ── right column ── */
.heroright{position:relative}

.annot{display:flex; align-items:flex-start; gap:var(--s3); margin-bottom:var(--s2)}
.annot span{
  font-family:var(--ui); font-weight:700; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; line-height:1.6;
  color:var(--ink); transform:rotate(-1deg); flex:0 0 auto;
}
.annot-arrow{width:96px; height:48px; margin-top:14px}
.annot-arrow path{fill:none; stroke:var(--ink); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round}

.photo-collage{position:relative; padding:var(--s5) 0 0}
.photo-collage .block{
  position:absolute; left:14%; top:10%; width:62%; height:66%;
  background:var(--yellow); z-index:0; transform:rotate(3deg);
}
.photo-collage img{
  position:relative; z-index:1; width:100%; transform:rotate(-1.4deg);
  filter:drop-shadow(0 16px 26px rgba(23,20,17,.28));
}
.photo-collage .crown{
  position:absolute; z-index:3; left:44%; top:-10px; width:62px; height:38px;
  transform:rotate(4deg);
}
.photo-collage .crown path{fill:none; stroke:var(--ink); stroke-width:3.2;
  stroke-linejoin:round}
.photo-collage .zips{
  position:absolute; z-index:3; right:-6%; top:14%; width:52px; height:66px;
}
.photo-collage .zips path{fill:none; stroke:var(--ink); stroke-width:3;
  stroke-linecap:round}
.photo-collage::after{ /* tape over a corner, px-sized, off-parallel */
  content:""; position:absolute; z-index:2; right:14%; top:26px;
  width:96px; height:26px; background:rgba(74,70,214,.30);
  border-left:1px solid rgba(23,20,17,.08); border-right:1px solid rgba(23,20,17,.08);
  transform:rotate(-7deg);
}

/* a note inside a scribbled blue ring */
.ringnote{position:relative; margin:var(--s7) 0 0 auto; max-width:250px; transform:rotate(-1.2deg)}
.ringnote{padding:var(--s4) var(--s6)}
.ringnote .ring{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.ringnote .ring path{fill:none; stroke:var(--blue); stroke-width:2.4;
  stroke-linecap:round; opacity:.9}
.ringnote span{
  position:relative; display:block; font-family:var(--ui); font-weight:700;
  font-size:.76rem; letter-spacing:.09em; text-transform:uppercase;
  line-height:1.7; color:var(--ink); text-align:center;
}

@media(min-width:900px){
  .hero .wrap{display:grid; grid-template-columns:1fr 1.02fr; gap:var(--s8); align-items:start}
  .wordmark img{max-width:none}
  .photo-collage{padding-top:0}
}
@media(max-width:899px){
  .heroright{margin-top:var(--s8)}
  .ringnote{margin-right:0}
}
@media(max-width:600px){
  .kicker .star{width:18px; height:18px; left:calc(100% + 10px)}
  .wordmark img{transform:rotate(-.8deg)}
  .photo-collage img{transform:rotate(-1deg)}
  .photo-collage .block{transform:rotate(1.8deg)}
  .photo-collage::after{width:68px}
  .photo-collage .crown{width:48px; height:30px}
  .photo-collage .zips{display:none}
  .blobnote,.ringnote{transform:none; margin-left:auto; margin-right:auto}
}

/* ── section heading with a hand-drawn underline ── */
.secthead{
  font-family:var(--ui); font-weight:800; font-size:1.05rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink);
  margin:0 0 var(--s6); display:inline-block; position:relative;
  transform:rotate(-.7deg);
}
.secthead .underline{display:block; width:100%; height:10px; margin-top:3px}
.secthead .underline path{fill:none; stroke:var(--ink); stroke-width:2.4; stroke-linecap:round}
.secthead span{display:block; font-family:var(--ui); font-style:italic;
  font-weight:400; font-size:.78rem; letter-spacing:0; text-transform:none;
  color:var(--muted); margin-top:var(--s2)}
.hero{padding:var(--s7) 0 var(--s8)}
.hero .wrap{position:relative}

@media(min-width:720px){ .disc{width:168px; height:168px} }

.addr{
  font-size:.78rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin:var(--s4) 0 0;
}

/* photo: a real cut-out — no frame, no radius, no rectangular shadow.
   A colour block sits behind and shows through the negative space,
   which is what carries the collage. */

/* desktop: the name and the room read as one composition */
@media(min-width:860px){
  .hero{padding-bottom:var(--s8)}
  .hero .wrap{display:grid; grid-template-columns:1fr 1.15fr; gap:var(--s7); align-items:center}
  .hero .heroleft{grid-column:1}
  .photo-collage{grid-column:2; margin:0; padding:var(--s6) 0}
  .photo-collage img{max-width:none; width:100%}
  .photo-collage .block{left:-6%; top:0; width:64%; height:80%}
}

/* ── pitch ──────────────────────────────────────────────────── */
.pitch{padding:0 0 var(--s8)}
.pitch p{font-size:1.24rem; line-height:1.5; margin:0; max-width:34em}
.pitch .en{display:block; font-style:italic; color:var(--muted); font-size:.92rem; margin-top:var(--s3)}

/* hand-drawn circle around a word — attached mark, scales with its text */
.circled{position:relative; display:inline-block; white-space:nowrap}
.circled svg{
  position:absolute; left:-9%; top:-32%; width:118%; height:164%;
  overflow:visible; pointer-events:none;
}
.circled svg path{fill:none; stroke:var(--red); stroke-width:2.4;
  stroke-linecap:round; opacity:.9}

/* ── collage cards ──────────────────────────────────────────── */
.what{padding:0 0 var(--s9)}
.eyebrow span{display:block; font-family:var(--ui); font-style:italic;
  font-size:.82rem; font-weight:400; color:var(--muted); transform:rotate(.8deg);
  text-transform:none; letter-spacing:0; margin-top:var(--s1)}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6); margin:0; padding:0; list-style:none}
.cards li{
  border-radius:var(--r); padding:var(--s7) var(--s6); min-height:132px;
  display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow:0 12px 28px -22px rgba(23,20,17,.8);
}
.cards li:nth-child(1){background:var(--pink);  transform:rotate(-2.2deg)}
.cards li:nth-child(2){background:var(--yellow); transform:rotate(1.4deg)}
.cards li:nth-child(3){background:var(--blue);  transform:rotate(-1.1deg); color:#FFF9F0}
.cards h3{
  font-family:var(--ui); font-weight:800; font-size:1.2rem;
  line-height:1.15; letter-spacing:-.01em; margin:0;
}
.cards i{display:block; font-style:italic; font-family:var(--body);
  font-size:.8rem; opacity:.72; margin-top:var(--s2)}

/* the row scrolls sideways on a phone — stacking loses the gesture */
@media(max-width:600px){
  .cards{
    display:flex; gap:var(--s5); overflow-x:auto; padding:var(--s3) var(--s5) var(--s6);
    margin:0 calc(var(--s5) * -1); scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .cards::-webkit-scrollbar{display:none}
  .cards li{flex:0 0 78%; scroll-snap-align:center; min-height:118px}
  .cards li:nth-child(1){transform:rotate(-1.4deg)}
  .cards li:nth-child(2){transform:rotate(1deg)}
  .cards li:nth-child(3){transform:rotate(-.8deg)}
}

/* ── call to action ─────────────────────────────────────────── */
.cta{position:relative; padding:var(--s9) 0; background:var(--card);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cta .wrap{text-align:center; position:relative}
.cta h2{
  font-family:var(--ui); font-weight:800; font-size:clamp(1.7rem,4.6vw,2.3rem);
  line-height:1.1; letter-spacing:-.02em; text-transform:uppercase; margin:0 0 var(--s3); transform:rotate(-1deg);
}
.cta h2 span{display:block; font-family:var(--ui); font-style:italic;
  font-weight:400; font-size:.3em; color:var(--muted); margin-top:var(--s3)}

.btn{
  display:inline-block; background:var(--red); color:#fff; text-decoration:none;
  font-weight:700; font-size:1.22rem; letter-spacing:.01em;
  padding:var(--s6) var(--s10); border-radius:var(--r); margin-top:var(--s6);
  transform:rotate(-1.3deg);
  box-shadow:0 14px 30px -18px rgba(210,32,46,.95);
}
.btn i{display:block; font-style:italic; font-weight:400; font-size:.72rem; opacity:.88}
.btn:hover{transform:rotate(-1.3deg) translateY(-2px)}

/* the same one action, said once at the top and once at the bottom */
.hero-cta{margin-top:var(--s7); z-index:5}
.heroleft{position:relative; z-index:4}
.hero-note{margin:var(--s5) 0 0; text-align:left; max-width:26em}
.hero-note{margin:var(--s5) 0 0; text-align:left; max-width:26em}

.note{font-size:.86rem; color:var(--muted); margin:var(--s6) 0 0}
.note span{display:block; font-style:italic; opacity:.8}

/* the button, with the hand-note anchored to it so the arrow
   always lands on the button whatever the viewport does */
.ctabtn{position:relative; display:inline-block; margin-top:var(--s6); z-index:5}
.ctabtn .btn{margin-top:0}
/* on a phone the one action is full width and impossible to miss */
@media(max-width:600px){
  .ctabtn{display:block}
  .ctabtn .btn{display:block; padding:var(--s6) var(--s5); text-align:center}
  .hero-note{text-align:center; margin-left:auto; margin-right:auto}
}
.freenote{
  position:absolute; left:100%; bottom:34%;
  margin-left:var(--s3); white-space:nowrap;
  transform:rotate(-5deg); pointer-events:none;
}
.freenote .arrow{display:block; width:64px; height:50px; margin:calc(var(--s2) * -1) 0 0 calc(var(--s8) * -1)}
.freenote .arrow path{fill:none; stroke:var(--blue); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
@media(max-width:1000px){ .freenote{display:none} }

/* ── footer ─────────────────────────────────────────────────── */
footer{background:var(--dark); color:var(--dark-fg); padding:var(--s9) 0 var(--s8); font-size:.88rem}
footer .wrap{position:relative}
footer img, footer img.fmark{width:52px; height:52px; border-radius:50%; transform:rotate(-4deg); margin-bottom:var(--s4)}
footer strong{font-family:var(--ui); font-weight:800; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:var(--s3)}
footer a{color:var(--dark-fg)}
footer p{margin:0 0 var(--s4)}
footer .dim{color:var(--dim); font-size:.74rem; margin:var(--s7) 0 0}
footer .dim a{color:var(--dim)}

/* ══ sign-up page ═══════════════════════════════════════════ */
.strip{background:var(--dark); color:var(--dark-fg); padding:var(--s5) 0}
.strip a{display:inline-flex; align-items:center; gap:var(--s4); text-decoration:none; color:inherit}
.strip img{width:56px; height:56px; border-radius:50%; transform:rotate(-4deg)}
.strip span{font-family:var(--ui); font-weight:800; font-size:1rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.15}
.strip i{display:block; font-family:var(--body); font-style:normal; font-size:.7rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--dim); margin-top:var(--s1)}

.intro{padding:var(--s8) 0 var(--s6)}
.lede{font-size:1.2rem; margin:0; max-width:32em}
.lede .en{display:block; font-style:italic; color:var(--muted); font-size:.88rem; margin-top:var(--s3)}

.signup-sec{padding:0 0 var(--s9)}
h2.big{font-family:var(--ui); font-weight:800; font-size:clamp(1.7rem,5.4vw,2.2rem);
  line-height:1.1; letter-spacing:-.02em; text-transform:uppercase; margin:0 0 var(--s3); transform:rotate(-1deg)}
h2.big span{display:block; font-family:var(--ui); font-style:italic; font-weight:400;
  font-size:.28em; color:var(--muted); margin-top:var(--s3)}
.small{font-size:.88rem}
.muted{color:var(--muted)}

.formcard{
  position:relative; background:#FFFDF8; border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s8) var(--s6); margin-top:var(--s7);
  transform:rotate(-.35deg);
  box-shadow:0 20px 44px -34px rgba(23,20,17,.8);
}
.formcard::before{
  content:""; position:absolute; top:-12px; right:26px; width:96px; height:26px;
  background:rgba(242,198,61,.5); border-left:1px solid rgba(23,20,17,.07);
  border-right:1px solid rgba(23,20,17,.07); transform:rotate(5deg);
}
@media(max-width:600px){ .formcard{transform:none} .formcard::before{width:68px; right:16px} }

fieldset{border:0; margin:0 0 var(--s5); padding:0}
legend{font-family:var(--ui); font-weight:800; font-size:1.05rem; letter-spacing:.02em; margin-bottom:var(--s4)}
legend i{font-family:var(--ui); font-style:italic; font-size:.6em; color:var(--muted)}
.field{margin-bottom:var(--s5)}
.field label{
  display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:var(--ink); margin-bottom:var(--s2);
}
.field label i{font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted)}
.field input, .field textarea{
  width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s4); line-height:1.45;
}
.field input:focus, .field textarea:focus{outline:2px solid var(--red); outline-offset:1px; border-color:var(--red)}
.field textarea{resize:vertical}

.person{border-top:1px dashed var(--line); padding-top:var(--s6); margin-top:var(--s6); position:relative}
.rm{position:absolute; right:0; top:var(--s5); background:none; border:0; color:var(--red);
  font-family:var(--body); font-size:.78rem; cursor:pointer; text-decoration:underline}
.addbtn{
  width:100%; background:none; border:1.5px dashed var(--line); border-radius:var(--r);
  padding:var(--s5); font-family:var(--body); font-size:.98rem; font-weight:600;
  color:var(--ink); cursor:pointer;
}
.addbtn:hover{border-color:var(--red); color:var(--red)}
.addbtn i{display:block; font-style:italic; font-weight:400; font-size:.78rem; color:var(--muted)}
.handnote{margin:var(--s3) 0 0; text-align:right}
.handnote .hand{font-size:1.15rem; transform:rotate(-2deg)}

.check{display:flex; gap:var(--s3); align-items:flex-start; margin-bottom:var(--s4)}
.check input{margin-top:.32rem; width:18px; height:18px; flex:0 0 auto; accent-color:var(--red)}
.check label{font-size:.9rem; line-height:1.5; margin:0}
.check .en{display:block; font-style:italic; color:var(--muted); font-size:.82rem; margin-top:var(--s1)}

.submit{
  width:100%; background:var(--red); color:#fff; border:0; border-radius:var(--r);
  padding:var(--s6); font-family:var(--body); font-size:1.1rem; font-weight:600;
  cursor:pointer; margin-top:var(--s4);
  box-shadow:0 14px 30px -20px rgba(210,32,46,.95);
}
.submit i{display:block; font-style:italic; font-weight:400; font-size:.74rem; opacity:.88}

.free{
  display:inline-block; background:var(--red); color:#fff; font-size:.68rem;
  letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  padding:var(--s2) var(--s4); border-radius:var(--r); transform:rotate(-2.2deg);
  margin-bottom:var(--s5);
}

.gdpr{margin-top:var(--s7); border-top:1px solid var(--line); padding-top:var(--s5)}
.gdpr summary{cursor:pointer; font-size:.88rem; font-weight:600}
.gdpr summary i{font-weight:400; font-style:italic; color:var(--muted)}
.gdpr .body{font-size:.84rem; color:var(--muted); padding-top:var(--s4)}
.gdpr h4{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin:var(--s5) 0 var(--s2)}
.gdpr h4 i{font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted)}
.gdpr p{margin:0 0 var(--s3)}
.gdpr .en{display:block; font-style:italic; opacity:.8}

.en{font-style:italic}
.sig{font-family:var(--hand); font-size:1.3rem; color:var(--blue); line-height:1.3}
.sig .en{font-family:var(--body); font-size:.78rem; color:var(--muted); display:block; margin-top:var(--s2)}

/* rotation is a static transform, so it stays under reduced-motion;
   motion-like hover lift does not */
@media(prefers-reduced-motion:reduce){
  .btn:hover{transform:rotate(-1.3deg)}
}

/* ── QR: for holding a phone up to a screen, or to a printed poster ── */
.qrblock{
  display:flex; align-items:center; justify-content:center; gap:var(--s7);
  flex-wrap:wrap; margin-top:var(--s9);
  border-top:1px dashed var(--line); padding-top:var(--s8);
}
.qrcard{
  position:relative; background:#FFFDF8; border:1px solid var(--line);
  padding:var(--s4); border-radius:var(--r); transform:rotate(-2deg);
  box-shadow:0 14px 30px -24px rgba(23,20,17,.8);
}
.qrcard::before{ /* tape over a corner, px-sized */
  content:""; position:absolute; top:-11px; left:18px; width:96px; height:26px;
  background:rgba(242,198,61,.55); border-left:1px solid rgba(23,20,17,.07);
  border-right:1px solid rgba(23,20,17,.07); transform:rotate(-7deg);
}
.qrcard img{width:180px; height:180px; display:block}
.qrtext{margin:0; text-align:left; max-width:22em; font-size:.92rem}
.qrtext .hand{display:block; font-size:1.5rem; margin-bottom:var(--s2)}
.qrtext i{display:block; font-style:italic; color:var(--muted); font-size:.82rem; margin-top:var(--s2)}
.qrtext a{display:inline-block; margin-top:var(--s4); font-weight:600; font-size:.86rem}
@media(max-width:600px){
  .qrblock{gap:var(--s5); margin-top:var(--s8); padding-top:var(--s7)}
  .qrcard{transform:rotate(-1deg)}
  .qrcard::before{width:68px}
  .qrtext{text-align:center; max-width:none}
}

/* ── membership number, shown once on screen and nowhere else ── */
.donehead{
  font-family:var(--ui); font-weight:800; font-size:1.6rem;
  letter-spacing:-.02em; text-transform:uppercase; margin:0 0 var(--s5);
}
.donehead .en{display:block; font-size:.5em; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--muted); margin-top:var(--s2)}
.mnum{
  border:2px solid var(--red); border-radius:var(--r);
  padding:var(--s5) var(--s6); margin:0 auto var(--s4); max-width:280px;
  transform:rotate(-.8deg); background:var(--paper);
}
.mnum + .mnum{transform:rotate(.7deg)}
.mnum-name{
  display:block; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:var(--s2);
}
.mnum-label{
  display:block; font-family:var(--ui); font-weight:700; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  margin-bottom:var(--s1);
}
.mnum strong{
  display:block; font-family:var(--ui); font-weight:800;
  font-size:3.2rem; line-height:1; letter-spacing:-.03em; color:var(--red);
}