/* ============================================================
   BARBEE v TOURISM
   One static file. Sits next to /images and /articles.
   Configuration lives under CONFIGURE HERE in the script below.
   ============================================================ */

:root{
  --cream:#F4EFE7;
  --cream-2:#EDE7DC;
  --paper:#FBF8F2;
  --ink:#000000;
  --ink-2:#1A1A1A;
  --grey:#6B6660;
  --pink:#FD26AE;
  --yellow:#F2E94E;
  --rule:rgba(0,0,0,.2);
  --rule-soft:rgba(0,0,0,.1);

  --serif:"Playfair Display",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Oswald","Arial Narrow",sans-serif;

  --gut:clamp(18px,4vw,56px);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;overflow-x:hidden;
}
body::after{      /* paper grain, the one texture that survives */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.03;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ---------- type ---------- */
.display{font-family:var(--serif);font-weight:900;line-height:.94;letter-spacing:-.022em;margin:0}
.label{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.hl{background:var(--pink);color:#fff;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:.06em .28em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;
  padding:15px 24px;border:2px solid var(--ink);background:var(--ink);color:#fff;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.btn--pink{background:var(--pink);border-color:var(--pink)}
.btn--pink:hover{box-shadow:4px 4px 0 var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--onDark{background:transparent;border-color:rgba(255,255,255,.5);color:var(--cream)}
.btn--onDark:hover{background:var(--cream);border-color:var(--cream);color:var(--ink);box-shadow:4px 4px 0 var(--pink)}
.btn .ar{transition:transform .15s ease}
.btn:hover .ar{transform:translateX(4px)}

.tlink{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px;
}
.tlink:hover{color:var(--pink);border-color:var(--pink)}
.tlink--onDark{border-color:rgba(255,255,255,.55);color:var(--cream)}
.tlink--onDark:hover{color:var(--pink);border-color:var(--pink)}

/* ---------- lane tags ---------- */
.lane{
  display:inline-block;font-family:var(--mono);font-weight:700;font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--pink);
}
.lane--onDark{color:var(--pink)}

/* ---------- images ---------- */
.ph{position:relative;margin:0;overflow:hidden;background:var(--cream-2)}
.ph::after{
  content:attr(data-ph);position:absolute;top:0;right:0;max-width:74%;padding:12px 14px;
  text-align:right;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(0,0,0,.38);line-height:1.7;
}
.ph img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover}
.ph--bw img{filter:grayscale(1) contrast(1.06)}

/* ---------- views ---------- */
.view{display:none}
.view.on{display:block}

/* ============================================================
   SECTION FURNITURE
   ============================================================ */
.section{padding-block:clamp(46px,5.4vw,86px)}
.sechead{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(22px,2.6vw,34px)}
.sechead .line{flex:1;height:1px;background:var(--rule);transform:translateY(-4px)}
.sechead .aside{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--grey);text-transform:uppercase}

/* ============================================================
   FRONT PAGE
   ============================================================ */
.front{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(26px,3.4vw,54px)}
.lead{border-top:3px solid var(--ink);padding-top:22px}
.lead .lane{margin-bottom:12px}
.lead h2{font-family:var(--serif);font-weight:900;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(32px,4.2vw,58px);margin:0 0 16px}
.lead h2 a{text-decoration:none}
.lead h2 a:hover{color:var(--pink)}
.lead .deck{font-size:clamp(16.5px,1.5vw,19px);line-height:1.5;color:var(--ink-2);max-width:32em;margin:0 0 18px}
.lead .meta{margin-bottom:20px}

.stack{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,28px)}
.mini{border-top:1px solid var(--rule);padding-top:18px}
.mini .lane{margin-bottom:9px}
.mini h3{font-family:var(--serif);font-weight:900;letter-spacing:-.012em;line-height:1.1;
  font-size:clamp(19px,1.75vw,24px);margin:0 0 9px}
.mini h3 a{text-decoration:none}
.mini h3 a:hover{color:var(--pink)}
.mini p{margin:0 0 10px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}

/* ---------- you may have missed ---------- */
.missed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,38px)}
.missed .mini{border-top:1px solid var(--rule)}

/* ============================================================
   THE BOOK — modern, expensive, no scrapbook
   ============================================================ */
.band-black{background:var(--ink);color:var(--cream);padding:clamp(56px,6vw,96px) 0}
.book{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(30px,4.4vw,72px);align-items:center}
.book-cover .ph{aspect-ratio:2/3;box-shadow:0 24px 60px rgba(0,0,0,.55);background:#1c1c1c}
.book-cover .ph::after{color:rgba(255,255,255,.4)}
.book h2{font-family:var(--serif);font-weight:900;line-height:.98;letter-spacing:-.024em;
  font-size:clamp(34px,4.6vw,64px);margin:14px 0 0;color:var(--cream)}
.book .stamp{display:inline-block;background:var(--yellow);color:var(--ink);padding:7px 11px;margin:18px 0 0}
.book p{max-width:34em;font-size:16px;line-height:1.6;color:rgba(244,239,231,.86);margin:20px 0 0}
.book .kicker{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.7vw,22px);
  color:var(--cream);margin:18px 0 0}
.book .when{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.16em;margin:24px 0 20px}
.bookfacts{list-style:none;margin:24px 0 0;padding:0;max-width:34em}
.bookfacts li{font-size:15.5px;line-height:1.5;color:rgba(244,239,231,.82);
  padding:9px 0;border-top:1px solid rgba(255,255,255,.14)}
.bookfacts li b{color:var(--cream);font-weight:700}
.book-btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- book contents ---------- */
.contents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3vw,44px) clamp(30px,4vw,70px)}
.part{border-top:2px solid var(--ink);padding-top:18px}
.part .pn{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pink)}
.part h3{font-family:var(--serif);font-weight:900;font-size:clamp(20px,2.1vw,27px);
  line-height:1.1;letter-spacing:-.014em;margin:10px 0 14px}
.part ol{margin:0;padding:0;list-style:none;counter-reset:ch}
.part li{counter-increment:ch;display:grid;grid-template-columns:2.2em 1fr;gap:6px;
  padding:7px 0;border-bottom:1px solid var(--rule-soft);font-size:15px;line-height:1.45}
.part li::before{content:counter(ch,decimal-leading-zero);font-family:var(--mono);
  font-size:10.5px;letter-spacing:.08em;color:var(--grey);padding-top:4px}
.part--wide{grid-column:1/-1}
.contents-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey);margin:26px 0 0}

/* ---------- prologue teaser ---------- */
.prologue{background:var(--paper);padding:clamp(26px,3.4vw,48px);margin-top:clamp(30px,3.6vw,50px)}
.prologue .prose{max-width:34em;font-size:17.5px}
.prologue .prose p:first-child::first-letter{
  font-family:var(--serif);font-weight:900;float:left;font-size:3.9em;line-height:.78;
  padding:.05em .09em 0 0;color:var(--pink);
}
.prologue .more{margin-top:20px}
.prologue [hidden]{display:none}

/* ============================================================
   SPEAKING
   ============================================================ */
.speak{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,3.6vw,58px);align-items:start}
.speak h2{font-family:var(--serif);font-weight:900;line-height:.98;letter-spacing:-.022em;
  font-size:clamp(34px,4.4vw,60px);margin:12px 0 20px}
.speak p{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:34em;margin:0 0 16px}
.formats{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 28px;padding:0;list-style:none}
.formats li{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--rule);padding:8px 12px;color:var(--ink-2)}
.talk{border-top:3px solid var(--ink);padding-top:22px}
.talk h3{font-family:var(--serif);font-weight:900;font-size:clamp(21px,2.1vw,28px);
  line-height:1.08;letter-spacing:-.012em;margin:12px 0 10px}
.talk .where{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--grey);margin:0 0 14px;line-height:1.8}
.talk p{font-size:15px;margin:0 0 18px}

/* ============================================================
   INTERIOR PAGES
   ============================================================ */
.page-head{padding-block:clamp(44px,5vw,80px) clamp(26px,3vw,40px);border-bottom:1px solid var(--rule)}
.page-head h1{font-size:clamp(40px,6vw,84px)}
.page-head .lede{margin:22px 0 0;max-width:34em;font-size:clamp(16px,1.35vw,18.5px);line-height:1.55;color:var(--ink-2)}
.page-body{padding-block:clamp(34px,4vw,60px) clamp(50px,6vw,90px)}

.readbar{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin:0 0 30px}
.readcount{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 13px;border:1.5px solid var(--rule);background:transparent;color:var(--ink-2)}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.searchbar{display:flex;gap:10px;margin:0;max-width:460px;flex:1 1 300px}
.searchbar input{flex:1;border:2px solid var(--ink);background:var(--paper);padding:13px 15px;font:inherit;font-size:15px}
.searchbar input::placeholder{color:#8b867f}
.morewrap{display:flex;justify-content:center;padding:34px 0 0}
.morewrap[hidden]{display:none}

.piece{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.4vw,34px);
  align-items:start;padding:26px 0;border-bottom:1px solid var(--rule-soft)}
.piece .when{min-width:104px;padding-top:5px}
.piece h3{font-family:var(--serif);font-weight:900;font-size:clamp(21px,2.3vw,30px);
  line-height:1.08;margin:8px 0;letter-spacing:-.014em}
.piece h3 a{text-decoration:none}
.piece h3 a:hover{color:var(--pink)}
.piece p{margin:0;font-size:15.5px;color:var(--ink-2);max-width:42em}

.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:start}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.boxed{background:var(--paper);padding:clamp(22px,2.6vw,34px)}
.boxed h3{font-family:var(--serif);font-weight:900;font-size:clamp(20px,2vw,26px);line-height:1.1;margin:0 0 10px}
.boxed p{margin:0;font-size:15px;color:var(--ink-2)}
.boxed p + p{margin-top:12px}

h2.sec{font-family:var(--serif);font-weight:900;font-size:clamp(28px,3.4vw,44px);
  line-height:1;letter-spacing:-.022em;margin:0 0 22px}
.sec-rule{display:flex;align-items:center;gap:16px;margin:clamp(40px,5vw,66px) 0 26px}
.sec-rule .line{flex:1;height:1px;background:var(--rule)}

.prose{max-width:38em;font-size:17.5px;line-height:1.68}
.prose p{margin:0 0 1.15em}

.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);margin:clamp(28px,3.4vw,46px) 0}
.stat .n{font-family:var(--serif);font-weight:900;font-size:clamp(44px,5.4vw,74px);line-height:.88;letter-spacing:-.03em}
.stat .t{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:10px;color:var(--grey)}

.epi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;padding:22px 0;
  border-bottom:1px solid var(--rule-soft);align-items:start}
.epi .num{font-family:var(--serif);font-weight:900;font-size:clamp(26px,2.8vw,38px);line-height:1;color:var(--pink);min-width:56px}
.epi h3{font-family:var(--serif);font-weight:900;font-size:clamp(19px,1.9vw,25px);line-height:1.12;margin:0 0 6px}
.epi h3 a{text-decoration:none}
.epi h3 a:hover{color:var(--pink)}
.epi p{margin:0;font-size:15px;color:var(--ink-2)}
.epi-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);margin:0 0 8px !important}

.callout{background:var(--ink);color:var(--cream);padding:clamp(26px,3.4vw,46px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;margin:clamp(34px,4vw,56px) 0 0}
.callout h3{font-family:var(--serif);font-weight:900;font-size:clamp(24px,2.8vw,38px);line-height:1.04;margin:0 0 10px;color:var(--cream)}
.callout p{margin:0;color:rgba(244,239,231,.84);font-size:15.5px;max-width:34em}
.callout .btn{background:var(--pink);border-color:var(--pink)}
.callout .btn:hover{box-shadow:4px 4px 0 var(--cream)}

.fieldset{display:grid;gap:14px;max-width:560px}
.fieldset label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:6px}
.fieldset input,.fieldset textarea{width:100%;border:2px solid var(--ink);background:var(--paper);padding:13px 14px;font:inherit;font-size:15px}
.fieldset textarea{min-height:130px;resize:vertical}
.fieldset input::placeholder,.fieldset textarea::placeholder{color:#8b867f}

.pull{font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:clamp(24px,3.1vw,40px);line-height:1.16;letter-spacing:-.012em;
  border-left:5px solid var(--pink);padding-left:clamp(18px,2.2vw,30px);
  margin:clamp(30px,3.6vw,48px) 0;max-width:20em}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .front{grid-template-columns:1fr}
  .missed{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .quiz,.listen,.book,.speak,.aboutrow,.sub-grid,.two,.three,.missed{grid-template-columns:1fr}
  .book-cover{max-width:250px}
  .callout{grid-template-columns:1fr}
  .statrow{grid-template-columns:1fr;gap:26px}
  .piece{grid-template-columns:1fr;gap:6px}
  .piece .when{padding-top:0}
}

/* ============================================================
   2026 HOMEPAGE — glossy editorial magazine, punk energy.
   Black, cream, hot pink. Yellow only when something must be pressed.
   ============================================================ */
:root{
  --black:#0B0B0B;
  --black-2:#161616;
  --display:"Anton","Oswald",Impact,sans-serif;
  --cond:"Oswald","Arial Narrow",sans-serif;
  --marker:"Permanent Marker","Comic Sans MS",cursive;
  --hand:"Caveat","Bradley Hand",cursive;
  --tearA:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 36' preserveAspectRatio='none'%3E%3Cpath d='M0,36 L0,11.33150477928648 L14.7,9.5 L30.4,11.3 L37.4,4.5 L56.8,2 L66.6,8.9 L80.1,13.6 L93.7,15.6 L102.1,17.5 L122.0,17.8 L139.9,20.2 L146.9,23.8 L162.4,21.0 L168.9,26.2 L182.4,29.2 L202.5,30 L223.2,28.5 L242.0,27.8 L263.0,30 L270.6,24.9 L280.0,30 L293.0,30 L303.8,30 L316.0,27.9 L331.4,29.1 L351.8,30 L372.7,30 L394.5,30 L403.2,30 L424.6,30 L439.7,30 L449.1,30 L464.2,27.0 L471.3,30 L493.1,24.2 L511.9,23.0 L520.3,20.1 L538.6,25.3 L545.3,26.9 L552.0,30.0 L563.3,30 L585.0,30 L607.0,27.3 L614.2,28.7 L620.7,24.5 L633.3,26.0 L641.8,19.6 L661.7,17.0 L683.0,22.6 L695.0,22.0 L709.4,24.0 L724.9,24.9 L740.8,30 L754.9,29.0 L772.4,25.4 L783.3,30 L797.6,30 L803.8,28.8 L819.1,22.1 L834.9,23.9 L841.9,25.7 L855.3,28.2 L867.0,30 L884.8,23.3 L891.8,25.8 L913.2,22.3 L926.5,23.6 L937.6,21.7 L948.6,19.9 L964.1,17.1 L976.2,20.9 L982.6,21.8 L1000.4,19.2 L1009.9,23.4 L1019.7,19.1 L1032.7,21.8 L1040.3,19.3 L1051.7,24.0 L1064.7,29.0 L1073.4,26.7 L1089.8,30 L1103.0,26.2 L1110.9,26.6 L1120.0,30 L1139.4,25.6 L1149.9,29.9 L1166.1,30 L1177.7,24.8 L1188.3,28.9 L1198.7,26.8 L1211.3,25.7 L1223.9,30 L1232.4,23.1 L1253.5,28.4 L1275.3,27.5 L1296.5,30 L1306.0,30 L1325.4,30 L1339.7,27.0 L1351.2,23.2 L1358.3,24.5 L1368.9,28.8 L1375.6,30 L1392.7,30 L1413.0,30 L1428.3,23.2 L1440,18.6 L1440,36 Z'/%3E%3C/svg%3E");
  --tearB:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 36' preserveAspectRatio='none'%3E%3Cpath d='M0,36 L0,14.33331374913746 L15.0,20.3 L28.4,20.4 L43.8,16.0 L58.0,17.8 L76.7,12.1 L87.5,6.4 L106.5,9.1 L113.2,15.8 L134.6,18.0 L150.4,13.2 L156.7,13.6 L163.6,9.3 L173.5,2.7 L186.9,2 L206.4,2.3 L222.7,2.3 L239.3,2 L249.7,9.0 L271.6,13.7 L289.0,11.1 L298.6,8.2 L305.8,11.9 L318.2,16.8 L330.4,23.2 L349.9,16.2 L359.3,21.9 L372.8,28.7 L385.1,22.7 L401.2,26.6 L411.5,20.8 L422.9,27.3 L441.0,22.0 L450.9,16.4 L457.9,20.5 L466.7,21.4 L479.9,17.0 L497.6,11.9 L513.9,6.5 L526.6,2.5 L536.9,9.1 L555.8,6.3 L576.0,2.3 L588.3,7.2 L604.5,2 L626.4,2 L636.5,5.8 L647.8,3.0 L654.9,2 L670.3,2 L685.9,2 L699.1,8.4 L712.9,9.5 L732.7,5.0 L741.2,10.7 L760.3,7.2 L769.3,10.6 L790.4,6.3 L811.6,11.7 L827.2,10.6 L834.9,4.1 L856.3,2 L873.6,2 L892.7,3.4 L903.4,2 L921.0,2 L930.6,2.8 L950.3,4.4 L960.7,10.3 L970.0,3.5 L980.3,2.7 L987.3,2 L999.2,3.0 L1007.3,2 L1027.5,8.7 L1044.0,11.4 L1059.4,6.4 L1066.0,2 L1086.5,4.8 L1107.9,2 L1124.1,2 L1141.8,2 L1163.8,2 L1178.5,5.3 L1198.9,8.6 L1216.2,12.7 L1236.8,10.7 L1253.8,16.3 L1273.7,15.1 L1292.4,20.2 L1307.5,22.0 L1319.7,23.1 L1335.4,17.2 L1351.6,24.1 L1371.7,27.3 L1383.9,30 L1399.2,29.2 L1418.6,23.3 L1436.6,16.8 L1440,16.5 L1440,36 Z'/%3E%3C/svg%3E");
}

/* ---------- masthead ---------- */
header.site{position:sticky;top:0;z-index:200;background:var(--black);color:var(--cream);
  border-bottom:1px solid rgba(255,255,255,.07)}
.hdr{display:flex;align-items:center;gap:clamp(14px,2vw,30px);padding:12px var(--gut);max-width:1500px;margin:0 auto}
.mark{text-decoration:none;flex:0 0 auto;line-height:.84}
.mark img{width:clamp(110px,10vw,140px)}
.mark .m1,.mark .m2{display:block;font-family:var(--display);text-transform:uppercase;color:var(--pink);
  font-size:clamp(22px,2.1vw,30px);letter-spacing:.004em;line-height:1}
.mark .m2{margin-top:-.01em}
nav.main{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,1.7vw,28px)}
nav.main a{font-family:var(--cond);font-weight:500;font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
nav.main a:hover{color:var(--pink)}
nav.main a.on{border-color:var(--pink)}
.srch{background:none;border:0;padding:6px;display:grid;place-items:center;color:var(--cream)}
.srch:hover{color:var(--pink)}
.srch svg{width:19px;height:19px}
.sub-cta{display:inline-flex;align-items:center;gap:.45em;white-space:nowrap;background:var(--pink);color:#fff;
  font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;padding:11px 18px;transition:background .15s,color .15s}
.sub-cta:hover{background:#fff;color:var(--black)}
.burger{display:none;background:none;border:0;padding:8px;margin-left:4px}
.burger span{display:block;width:24px;height:2px;background:var(--cream);margin:5px 0;transition:transform .2s,opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.ar{display:inline-block;transition:transform .15s ease}
a:hover .ar,button:hover .ar{transform:translateX(4px)}

/* ---------- torn paper ---------- */
.tear{position:absolute;left:0;right:0;top:-25px;height:27px;background:var(--tc);pointer-events:none;z-index:3;
  -webkit-mask:var(--tearA) center/100% 100% no-repeat;mask:var(--tearA) center/100% 100% no-repeat}
.tear--b{-webkit-mask-image:var(--tearB);mask-image:var(--tearB)}
.tear--shadow{top:-29px;z-index:2;filter:blur(1.5px)}

/* ---------- shared bits ---------- */
.h-label{font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin:0 0 10px}
.h-serif{font-family:var(--serif);font-weight:800;letter-spacing:-.024em;word-spacing:.05em;line-height:.94;margin:0}
.h-btn{display:inline-flex;align-items:center;gap:.5em;background:var(--pink);color:#fff;text-decoration:none;
  font-family:var(--cond);font-weight:600;font-size:17px;letter-spacing:.07em;text-transform:uppercase;padding:14px 24px;
  transition:background .15s,color .15s,box-shadow .15s,transform .15s}
.h-btn:hover{background:var(--black);color:#fff;box-shadow:5px 5px 0 var(--pink);transform:translate(-2px,-2px)}
.h-tlink{display:inline-flex;align-items:center;gap:.45em;font-family:var(--cond);font-weight:600;font-size:16px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--black);border-bottom:3px solid var(--black);padding-bottom:3px}
.h-tlink:hover{color:var(--pink);border-color:var(--pink)}
.h-kicker{font-family:var(--marker);font-size:clamp(22px,2vw,29px);line-height:1.1;text-transform:uppercase;margin:0;color:var(--black)}
.tape{display:inline-block;background:var(--pink);color:var(--black);padding:.08em .5em .02em;transform:rotate(-2deg);
  clip-path:polygon(1% 8%,6% 0,30% 6%,58% 1%,84% 7%,100% 2%,98% 50%,100% 94%,72% 100%,40% 93%,14% 100%,0 92%,2% 48%)}
.h-kicker .aside{font-family:var(--hand);font-weight:600;font-size:clamp(21px,1.8vw,27px);text-transform:none;margin-left:.3em;color:var(--black)}
.h-form{display:flex;width:100%;max-width:520px}
.h-form input[type=email]{flex:1;min-width:0;border:0;border-radius:0;padding:17px 18px;font:inherit;font-size:15px;background:#fff;color:#111}
.h-form input::placeholder{color:#8b867f;text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.h-form button{flex:0 0 auto;border:0;background:var(--pink);color:#fff;font-family:var(--cond);font-weight:600;font-size:17px;
  letter-spacing:.07em;text-transform:uppercase;padding:0 26px;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;
  transition:background .15s,color .15s}
.h-form button:hover{background:var(--yellow);color:#111}
.h-proof{font-size:14px;color:rgba(244,239,231,.72);margin:12px 0 0}
.h-proof:empty{display:none}
.mc-msg{font-family:var(--cond);font-size:14px;letter-spacing:.04em;margin-top:10px;min-height:0;color:var(--yellow)}
.mc-msg:empty{display:none}

/* ---------- 1. hero ---------- */
.h-hero{position:relative;background:var(--black);color:var(--cream);overflow:hidden;
  min-height:min(calc(100vh - 64px),900px);display:flex;align-items:center}
.h-hero-photo{position:absolute;top:-4%;right:0;bottom:0;width:min(54vw,800px);margin:0;z-index:1}
.h-hero-photo img{width:100%;height:112%;object-fit:cover;object-position:50% 20%;
  filter:grayscale(1) contrast(1.1) brightness(.97);will-change:transform;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 22%,#000 46%),linear-gradient(to top,transparent 0,#000 26%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 22%,#000 46%),linear-gradient(to top,transparent 0,#000 26%);
  mask-composite:intersect}
.h-hero-copy{position:relative;z-index:2;padding-block:clamp(40px,6vw,96px);width:100%;max-width:1400px}
.h-headline{font-family:var(--display);font-weight:400;text-transform:uppercase;margin:0;
  font-size:clamp(54px,7.6vw,124px);line-height:.9;letter-spacing:.004em}
.h-headline .w{display:block;color:#fff}
.h-headline .p{display:block;color:var(--pink)}
.h-headline .ul{position:relative;display:inline-block}
.h-headline .ul svg{position:absolute;left:-2%;width:104%;bottom:-.2em;height:.26em;overflow:visible}
.h-headline .ul path{fill:none;stroke:var(--pink);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.h-headline .ul path + path{stroke-width:3;opacity:.8}
.h-hero-sub{max-width:17em;font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(21px,2vw,30px);line-height:1.2;letter-spacing:-.01em;color:#fff;margin:clamp(28px,2.8vw,40px) 0 24px}

/* ---------- 2. commercial strip ---------- */
.h-strip{position:relative;background:var(--black-2);color:var(--cream);padding:clamp(30px,3.2vw,48px) 0 clamp(34px,3.4vw,50px)}
.h-strip-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,46px);align-items:center;max-width:1400px}
.h-strip-lead{position:relative;font-family:var(--marker);text-transform:uppercase;font-size:clamp(23px,2.2vw,32px);line-height:1.02;
  margin:0;padding-right:clamp(22px,2.4vw,40px);border-right:2px solid var(--pink);transform:rotate(-4deg);transform-origin:left center}
.h-strip-lead .arw{position:absolute;width:52px;height:26px;right:-6px;top:-18px;transform:rotate(-6deg)}
.h-strip-lead .arw path{fill:none;stroke:var(--pink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.h-paths{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,30px)}
.h-paths a{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;row-gap:2px;text-decoration:none;color:inherit}
.h-paths svg{grid-row:span 2;width:30px;height:30px;fill:none;stroke:var(--cream);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s,transform .2s}
.h-paths b{font-family:var(--cond);font-weight:600;font-size:15.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.15}
.h-paths span{font-size:13.5px;line-height:1.35;color:rgba(244,239,231,.7)}
.h-paths em{font-style:normal;font-weight:700;text-transform:uppercase}
.h-paths a:hover b{color:var(--pink)}
.h-paths a:hover svg{stroke:var(--pink);transform:rotate(-8deg)}
.h-strip-lead{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.6vw,40px);line-height:.95;margin:0;color:#fff}
.h-strip-list{margin:0;font-family:var(--serif);font-weight:700;font-style:italic;font-size:clamp(19px,1.8vw,26px);line-height:1.3;color:var(--cream)}
.h-strip-list a{color:inherit;text-decoration:none;border-bottom:2px solid transparent;margin-right:.35em;white-space:nowrap;transition:color .15s,border-color .15s}
.h-strip-list a:hover{color:var(--pink);border-color:var(--pink)}
.h-bring{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;background:var(--yellow);color:#111;text-decoration:none;
  font-family:var(--cond);font-weight:700;font-size:18px;letter-spacing:.07em;text-transform:uppercase;padding:16px 26px;
  box-shadow:5px 5px 0 var(--pink);transform:rotate(-1.5deg);transition:transform .15s,box-shadow .15s}
.h-bring:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:8px 8px 0 var(--pink)}

/* ---------- 3. the latest ---------- */
.h-latest{position:relative;background:var(--cream);padding:clamp(56px,6vw,100px) 0 clamp(36px,4vw,60px)}
.h-latest-in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4.4vw,72px);align-items:center;max-width:1400px}
.h-latest .h-kicker{color:var(--pink);margin-bottom:16px}
.h-latest .h-kicker span{position:relative;display:inline-block}
.h-latest .h-kicker svg{position:absolute;left:0;bottom:-8px;width:100%;height:10px;overflow:visible}
.h-latest .h-kicker path{fill:none;stroke:var(--pink);stroke-width:3;stroke-linecap:round}
.h-latest h2{font-size:clamp(54px,7vw,112px);margin:0 0 22px}
.h-latest h2 a{text-decoration:none;color:inherit}
.h-latest h2 a:hover{color:var(--pink)}
.h-latest .dek{font-size:clamp(17px,1.5vw,21px);line-height:1.45;max-width:24em;color:#222;margin:0 0 28px}
.h-art{position:relative;display:block;transform:rotate(1.4deg);box-shadow:12px 12px 0 var(--black);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.h-art::before{content:"";position:absolute;z-index:2;top:-14px;left:12%;width:110px;height:28px;background:rgba(253,38,174,.78);transform:rotate(-5deg);
  clip-path:polygon(2% 0,98% 6%,100% 52%,97% 100%,3% 94%,0 48%)}
.h-art:hover{transform:rotate(0) translate(-3px,-3px);box-shadow:16px 16px 0 var(--black)}
.h-art svg,.h-art img,.h-card .art svg,.h-card .art img,.h-pin .art svg,.h-pin .art img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- 4. right now ---------- */
.h-now{background:var(--cream);padding:clamp(18px,2.4vw,34px) 0 clamp(56px,6vw,96px)}
.h-now .wrap,.h-obs .wrap{max-width:1400px}
.h-now-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 24px;flex-wrap:wrap;
  border-top:3px solid var(--black);padding-top:24px;margin-bottom:clamp(22px,2.6vw,34px)}
.h-now-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,30px)}
.h-card a{display:block;text-decoration:none;color:inherit}
.h-card .art{aspect-ratio:4/3;overflow:hidden;border:2px solid var(--black);background:#ddd;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.h-card a:hover .art{transform:translate(-3px,-3px) rotate(-.7deg);box-shadow:6px 6px 0 var(--pink)}
.h-card h3{font-family:var(--serif);font-weight:800;font-size:clamp(20px,1.65vw,25px);line-height:1.05;letter-spacing:-.018em;margin:16px 0 7px}
.h-card a:hover h3{color:var(--pink)}
.h-card .sub{font-size:14.5px;line-height:1.42;color:#2a2a2a;margin:0 0 9px}
.h-card .date{font-family:var(--cond);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}

/* ---------- 5. currently obsessed ---------- */
.h-obs{position:relative;background:#EAE2D6;padding:clamp(50px,5.4vw,86px) 0 clamp(46px,5vw,76px);overflow:hidden}
.h-kicker--big{font-size:clamp(28px,3vw,44px)}
.h-obs-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,56px);margin-top:clamp(30px,3.4vw,48px);align-items:start}
.h-pin{--r:-2deg;position:relative;background:#FFFDF8;padding:14px 14px 22px;transform:rotate(var(--r));
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 22px 30px -20px rgba(0,0,0,.55);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s ease,box-shadow .3s}
.h-pin:nth-child(2){--r:1.6deg;margin-top:26px}
.h-pin:nth-child(3){--r:-1deg;margin-top:8px}
.h-pin::before{content:"";position:absolute;z-index:3;top:-9px;left:50%;width:19px;height:19px;margin-left:-9px;border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#ffb3df 0 12%,var(--pink) 42%,#9c0065 100%);box-shadow:0 4px 5px rgba(0,0,0,.35)}
.h-pin:hover{transform:rotate(0) translateY(-5px);box-shadow:0 1px 0 rgba(0,0,0,.06),0 30px 36px -20px rgba(0,0,0,.55)}
.h-pin.pre{opacity:0;transform:translateY(-28px) rotate(calc(var(--r) * 4))}
.h-pin .art{aspect-ratio:3/2;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.h-pin h3{font-family:var(--marker);font-weight:400;text-transform:uppercase;font-size:clamp(20px,1.8vw,27px);line-height:1.05;margin:16px 0 8px}
.h-pin p{font-family:var(--hand);font-weight:500;font-size:clamp(21px,1.7vw,24px);line-height:1.12;margin:0;color:#1d1d1d}
.h-obs-foot{margin:clamp(30px,3.4vw,46px) 0 0;text-align:center}
.h-obs-foot a{font-family:var(--hand);font-weight:700;font-size:clamp(22px,2vw,27px);color:var(--black);text-decoration:none;
  border-bottom:3px solid var(--pink);padding-bottom:1px}
.h-obs-foot a:hover{color:var(--pink)}

/* ---------- the book ---------- */
.h-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.h-media{position:relative;overflow:hidden;background:var(--black);color:var(--cream);
  padding:clamp(46px,5vw,84px) clamp(24px,3.6vw,64px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,2.6vw,40px);align-items:center}
.h-media h2{color:#fff;font-size:clamp(36px,3.6vw,58px);margin:0 0 16px}
.h-media .kind{font-family:var(--cond);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,231,.6);margin:0 0 8px}
.h-media .dek{font-size:16px;line-height:1.5;color:rgba(244,239,231,.86);margin:0 0 26px;max-width:26em}
.h-media .h-btn:hover{background:#fff;color:var(--black)}
.h-sleeve{position:relative;display:block;padding-right:18%}
.h-sleeve img{position:relative;z-index:2;width:100%;aspect-ratio:1/1;object-fit:cover;box-shadow:0 20px 40px rgba(0,0,0,.6);transform:rotate(-3deg);transition:transform .4s}
.h-sleeve .vinyl{position:absolute;z-index:1;top:5%;right:0;width:82%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle,#0b0b0b 0 2.4%,#111 2.6% 15%,var(--pink) 15.5% 16.5%,transparent 17%),
    repeating-radial-gradient(circle,#ff3ab8 0 1.5px,#e0158f 1.5px 3.5px);
  box-shadow:0 14px 30px rgba(0,0,0,.55);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.h-sleeve:hover img{transform:rotate(-1deg) translateX(-4px)}
.h-sleeve:hover .vinyl{transform:translateX(12%) rotate(140deg)}
.h-media-more{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.h-media-more a{font-family:var(--cond);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);text-decoration:none;
  border:1px solid rgba(255,255,255,.3);padding:8px 12px}
.h-media-more a:hover{border-color:var(--pink);color:var(--pink)}
.h-book{background:var(--cream);padding:clamp(46px,5vw,84px) clamp(24px,3.6vw,64px);display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,2.6vw,40px);align-items:center}
.h-book h2{font-size:clamp(36px,3.6vw,58px);margin:0 0 18px}
.h-book-dek{font-size:16px;line-height:1.5;color:#222;margin:0 0 26px;max-width:24em}
.h-book-cover{display:block;transform:rotate(3deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.h-book-cover img{width:100%;box-shadow:-6px 18px 34px rgba(0,0,0,.35),0 2px 0 rgba(0,0,0,.2)}
.h-book-cover:hover{transform:rotate(0) translateY(-6px)}
#bookCta .h-form{margin-top:4px}
#bookCta .h-form input{border:2px solid var(--black)}
#bookCta .fine{font-size:13px;color:var(--grey);margin:10px 0 0}

/* ---------- 8. about ---------- */
.h-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--cream);align-items:center}
.h-about-photo{margin:0;align-self:center;position:relative}
.h-about-photo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.h-about-copy{padding:clamp(44px,5vw,84px) clamp(24px,4.4vw,80px)}
.h-about h2{font-size:clamp(40px,4.4vw,70px);margin:0 0 22px}
.h-about-copy > p:not(.h-label){font-size:16.5px;line-height:1.6;color:#222;max-width:34em;margin:0 0 14px}
.h-about-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:10px}
.h-hang{margin-top:clamp(34px,3.6vw,50px);padding-top:clamp(24px,2.6vw,34px);border-top:2px dashed rgba(0,0,0,.25);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;align-items:center}
.h-hang-title{grid-column:1/-1;margin:0;font-family:var(--marker);text-transform:uppercase;font-size:clamp(24px,2.2vw,32px)}
.h-hang-lines{font-family:var(--hand);font-weight:600;font-size:clamp(23px,2vw,28px);line-height:1.08;margin:6px 0 0}
.h-socials{display:flex;flex-wrap:wrap;gap:10px}
.h-socials a{display:inline-flex;align-items:center;gap:10px;background:var(--black);color:#fff;text-decoration:none;
  font-family:var(--cond);font-weight:600;font-size:16px;letter-spacing:.07em;text-transform:uppercase;padding:13px 18px;
  transition:background .15s,transform .15s}
.h-socials a:hover{background:var(--pink);transform:translateY(-2px)}
.h-socials svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
.h-socials--small a{background:transparent;padding:6px;color:var(--cream)}
.h-socials--small a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.h-socials--small a:hover{background:transparent;color:var(--pink)}
.h-socials--small svg{width:22px;height:22px}

/* ---------- 9. subscribe (every page) ---------- */
.band-sub{position:relative;background:var(--black);color:var(--cream);padding:clamp(60px,6.4vw,104px) 0 clamp(54px,5.6vw,90px);text-align:center}
.sub-in{display:flex;flex-direction:column;align-items:center}
.sub-kick{font-family:var(--cond);font-weight:500;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,239,231,.78);margin:0 0 16px}
.sub-title{font-family:var(--serif);font-weight:800;font-size:clamp(42px,5.6vw,86px);line-height:.95;letter-spacing:-.032em;margin:0 0 30px;color:#fff}
.band-sub .h-form{max-width:580px}

/* form.mc is still used on the Book page */
form.mc{display:flex;gap:0;flex-wrap:wrap}
form.mc input[type=email]{flex:1;min-width:220px;border:0;padding:16px;font:inherit;font-size:15px;background:var(--paper);color:var(--ink)}
form.mc input[type=email]::placeholder{color:#8b867f}
form.mc button{border:0;background:var(--pink);color:#fff;padding:16px 26px;
  font-family:var(--cond);font-weight:600;font-size:16px;letter-spacing:.07em;text-transform:uppercase}
form.mc button:hover{background:var(--yellow);color:var(--ink)}
.fineprint{font-family:var(--cond);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,231,.55);margin:12px 0 0}

/* ---------- 10. footer ---------- */
footer.site{background:var(--black);color:rgba(244,239,231,.66);padding:clamp(30px,3vw,44px) 0 34px;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
footer.site .wrap{max-width:1400px}
.foot-top{display:flex;align-items:center;flex-wrap:wrap;gap:18px clamp(20px,3.4vw,52px)}
.foot-mark{text-decoration:none;line-height:.86}
.foot-mark span{display:block;font-family:var(--display);text-transform:uppercase;color:var(--pink);font-size:28px;line-height:1}
.foot-mark span + span{margin-top:-.01em}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px clamp(16px,2.2vw,30px)}
.foot-nav a{font-family:var(--cond);font-weight:500;font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--cream);text-decoration:none}
.foot-nav a:hover{color:var(--pink)}
.foot-top .h-socials{margin-left:auto}
.foot-line{font-family:var(--hand);font-weight:600;font-size:clamp(23px,2.2vw,30px);text-align:center;color:var(--cream);margin:clamp(30px,3.4vw,46px) 0 24px}
.foot-line span{border-bottom:2px solid var(--pink)}
.foot{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;border-top:1px solid rgba(255,255,255,.1);padding-top:18px}
footer.site .foot a{color:rgba(244,239,231,.6);text-decoration:none;border:0}
footer.site .foot a:hover{color:var(--pink)}

/* ---------- tablet ---------- */
@media (max-width:1180px){
  nav.main{gap:14px}
  nav.main a{font-size:13px;letter-spacing:.07em}
  .h-strip-in{grid-template-columns:1fr;gap:26px}
  .h-strip-lead{border-right:0;padding-right:0;transform:rotate(-2deg)}
  .h-strip-lead br{display:none}
  .h-bring{justify-self:start}
  .h-duo{grid-template-columns:1fr}
  .h-now-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
}

/* ---------- phone: an unruly little magazine, not a stacked desktop ---------- */
@media (max-width:900px){
  .burger{display:block}
  .hdr{gap:10px;padding:10px var(--gut)}
  .mark .m1,.mark .m2{font-size:21px}
  .sub-cta{margin-left:auto;font-size:13.5px;padding:9px 12px}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;margin:0;background:var(--black);
    flex-direction:column;align-items:stretch;gap:0;padding:6px var(--gut) 22px;border-bottom:3px solid var(--pink)}
  nav.main.open{display:flex}
  nav.main a{padding:15px 0;font-size:22px;font-family:var(--display);letter-spacing:.02em;border-bottom:1px solid rgba(255,255,255,.1)}
  nav.main a.on{border-color:rgba(255,255,255,.1);color:var(--pink)}
  nav.main .srch{justify-content:start;padding:16px 0 0}

  .h-hero{display:block;min-height:0}
  .h-hero-photo{position:relative;top:auto;width:100%;height:min(118vw,640px);overflow:hidden}
  .h-hero-photo img{height:108%;object-position:50% 0;
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 34%);-webkit-mask-composite:source-over;
    mask-image:linear-gradient(to top,transparent 0,#000 34%);mask-composite:add}
  .h-hero-copy{margin-top:calc(min(118vw,640px) * -.17);padding-block:0 48px}
  .h-headline{font-size:clamp(50px,15vw,84px)}
  .h-hero-sub{font-size:22px}
  .h-form{flex-direction:column}
  .h-form button{padding:15px 20px;justify-content:center}

  .h-strip{padding:40px 0 44px}
  .h-strip-lead{font-size:28px}
  .h-strip-lead .arw{right:auto;left:10.5em;top:6px}
  .h-paths{grid-template-columns:1fr 1fr;gap:24px 16px}
  .h-paths a{grid-template-columns:1fr}
  .h-paths svg{grid-row:auto;margin-bottom:8px}
  .h-bring{width:100%;justify-content:center;transform:rotate(-1deg)}

  .h-latest{padding-top:54px}
  .h-latest-in{grid-template-columns:1fr;gap:34px}
  .h-latest-in .h-art{order:-1;margin-right:12px}
  .h-latest h2{font-size:clamp(50px,15vw,74px)}

  .h-now-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:80%;gap:18px;overflow-x:auto;
    scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:4px var(--gut) 16px;scroll-padding-left:var(--gut);
    scrollbar-width:none}
  .h-now-grid::-webkit-scrollbar{display:none}
  .h-card{scroll-snap-align:start}
  .h-now-head{flex-direction:column;align-items:flex-start}
  .h-now-head .h-tlink{order:3}
  .h-kicker .aside{display:block;margin:10px 0 0}

  .h-obs-board{grid-template-columns:1fr;gap:34px}
  .h-pin{width:86%}
  .h-pin:nth-child(1){--r:-2.4deg}
  .h-pin:nth-child(2){--r:2.2deg;margin-top:0;justify-self:end}
  .h-pin:nth-child(3){--r:-1.2deg;margin-top:0;justify-self:center}

  .h-media{grid-template-columns:1fr;gap:34px}
  .h-sleeve{order:-1;max-width:330px}
  .h-book{grid-template-columns:1fr;gap:30px}
  .h-book-cover{order:-1;max-width:220px;justify-self:center}

  .h-about{grid-template-columns:1fr}
  .h-hang{grid-template-columns:1fr}
  .h-socials a{flex:1 1 auto;justify-content:center}

  .foot-top{flex-direction:column;align-items:flex-start}
  .foot-top .h-socials{margin-left:0}
  .foot{justify-content:flex-start}
}
@media (max-width:420px){
  .h-headline{font-size:clamp(46px,14.6vw,64px)}
  .h-paths b{font-size:14px}
}

/* ---------- come hang out page ---------- */
.h-hang-go{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hg-head{background:var(--black);color:var(--cream);padding:clamp(48px,6vw,96px) 0 clamp(52px,6vw,90px)}
.hg-head .wrap,.hg-body{max-width:1240px}
.hg-title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(52px,8vw,120px);line-height:.9;margin:clamp(22px,2.6vw,34px) 0 0;color:#fff}
.hg-title span{color:var(--pink)}
.hg-lede{font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:rgba(244,239,231,.86);max-width:30em;margin:24px 0 30px}
.hg-socials a{background:var(--pink)}
.hg-socials a:hover{background:#fff;color:var(--black)}
.hg-body{padding-block:clamp(44px,5vw,80px) clamp(56px,6vw,96px)}
.hg-rule{display:flex;align-items:center;gap:18px;margin-bottom:clamp(18px,2vw,26px)}
.hg-rule .line{flex:1;height:3px;background:var(--black)}
.hg-event{display:grid;grid-template-columns:minmax(150px,.3fr) minmax(0,1fr);gap:clamp(18px,3vw,44px);padding:clamp(20px,2.2vw,30px) 0;border-bottom:1px solid var(--rule);align-items:start}
.hg-date{font-family:var(--display);font-size:clamp(30px,3.4vw,50px);line-height:.95;color:var(--black)}
.hg-date small{display:block;font-family:var(--cond);font-size:13px;letter-spacing:.14em;color:var(--grey);margin-top:6px}
.hg-event h3{font-family:var(--serif);font-weight:800;font-size:clamp(24px,2.6vw,38px);line-height:1.02;letter-spacing:-.02em;margin:0 0 8px}
.hg-event h3 a{text-decoration:none}
.hg-event h3 a:hover{color:var(--pink)}
.hg-city{font-family:var(--cond);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin:0 0 8px}
.hg-what{font-size:16px;line-height:1.5;color:#222;margin:0;max-width:40em}
.hg-none{font-family:var(--hand);font-size:26px;margin:10px 0 0}
.hg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(44px,5vw,72px)}
.hg-card{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--black);background:#fff;border:2px solid var(--black);
  padding:clamp(22px,2.4vw,32px);transition:transform .2s,box-shadow .2s}
.hg-card:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--black)}
.hg-card b{font-family:var(--serif);font-weight:800;font-size:clamp(22px,2vw,28px);line-height:1.05;letter-spacing:-.015em}
.hg-card span:not(.h-label){font-size:15px;line-height:1.45;color:#2a2a2a}
.hg-card em{font-style:normal;margin-top:auto;padding-top:8px;font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.hg-card--pink{background:var(--pink);color:#fff}
.hg-card--pink .h-label{color:var(--black)}
.hg-card--pink span:not(.h-label){color:rgba(255,255,255,.92)}
@media (max-width:900px){
  .hg-event{grid-template-columns:1fr;gap:8px}
  .hg-grid{grid-template-columns:1fr}
}

/* ---------- as heard on (homepage + press) ---------- */
.h-proof-band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(16px,2.4vw,36px);
  background:var(--pink);color:var(--black);text-decoration:none;padding:18px var(--gut);overflow:hidden}
.h-proof-label{font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1.25}
.h-proof-win{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.h-proof-track{display:flex;width:max-content;animation:proofRoll 48s linear infinite}
.h-proof-band:hover .h-proof-track,.pr-strip:hover .h-proof-track{animation-play-state:paused}
.h-proof-run{display:flex;align-items:center;flex:0 0 auto}
.h-proof-run span{font-family:var(--serif);font-weight:800;font-style:italic;font-size:clamp(20px,2vw,28px);letter-spacing:-.01em;white-space:nowrap}
.h-proof-run span:nth-child(4n+3){font-family:var(--display);font-style:normal;font-weight:400;text-transform:uppercase;letter-spacing:.01em}
.h-proof-run i{font-style:normal;margin:0 .8em;opacity:.6}
.h-proof-go{font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;border-bottom:2px solid var(--black)}
@keyframes proofRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- press page ---------- */
.pr-head{padding-bottom:clamp(44px,5vw,76px)}
.pr-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.pr-ctas .h-btn:hover{background:#fff;color:var(--black)}
.pr-tlink{color:var(--cream);border-color:var(--cream)}
.pr-strip{background:var(--pink);color:var(--black);padding:16px 0;overflow:hidden}
.pr-topics{list-style:none;margin:0 0 clamp(44px,5vw,70px);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.pr-topics li{border-top:3px solid var(--black);padding-top:14px}
.pr-topics b{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(20px,1.8vw,24px);line-height:1.08;letter-spacing:-.012em;margin-bottom:8px}
.pr-topics span{font-size:15px;line-height:1.45;color:#2a2a2a}
.pr-quotes{columns:3 280px;column-gap:clamp(16px,2vw,24px);margin-bottom:clamp(44px,5vw,70px)}
.pr-quote{margin:0 0 clamp(16px,2vw,24px);break-inside:avoid;background:var(--black);color:var(--cream);padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;gap:16px}
.pr-quote:nth-child(3n+2){background:var(--pink);color:var(--black)}
.pr-quote:nth-child(3n+2) figcaption a{color:var(--black)}
.pr-quote blockquote{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(19px,1.6vw,23px);line-height:1.28;letter-spacing:-.005em}
.pr-quote figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pr-quote figcaption a{font-family:var(--cond);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);text-decoration:none;border-bottom:1px solid currentColor}
.pr-quote figcaption a:hover{color:var(--pink)}
.pr-quote button{flex:0 0 auto}
.pr-praise-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-bottom:clamp(44px,5vw,70px)}
.pr-praise{margin:0;border-top:3px solid var(--black);padding-top:16px}
.pr-praise blockquote{margin:0 0 14px;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.5vw,21px);line-height:1.35}
.pr-praise b{display:block;font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.pr-praise span{font-size:14px;color:var(--grey)}
.pr-quote button,.pr-bio button{align-self:flex-start;background:transparent;border:1px solid currentColor;color:inherit;padding:7px 12px;
  font-family:var(--cond);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.pr-quote button:hover{background:var(--pink);border-color:var(--pink);color:#fff}
.pr-note{font-size:16px;line-height:1.5;max-width:42em;margin:0 0 22px;color:#222}
.pr-record{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3.4vw,52px);margin-bottom:clamp(44px,5vw,70px)}
.pr-col h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.4vw,34px);margin:0 0 6px}
.pr-col ul{list-style:none;margin:0;padding:0}
.pr-col li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:13px 0;border-bottom:1px solid var(--rule)}
.pr-col b{font-family:var(--serif);font-weight:800;font-size:18px;line-height:1.15}
.pr-col b a{text-decoration:none}
.pr-col b a:hover{color:var(--pink)}
.pr-col small{font-family:var(--cond);font-size:13px;letter-spacing:.1em;color:var(--grey);grid-row:1;grid-column:2}
.pr-col span{grid-column:1/-1;font-size:14.5px;line-height:1.4;color:#333}
.pr-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-bottom:clamp(44px,5vw,70px)}
.pr-shot{margin:0}
.pr-shot img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border:2px solid var(--black)}
.pr-shot figcaption{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:10px;font-size:14px}
.pr-flag{font-style:normal;font-family:var(--cond);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--black);color:#fff;padding:2px 6px;margin-left:6px;white-space:nowrap}
.pr-shot figcaption a{font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--black);border-bottom:2px solid var(--pink);text-decoration:none}
.pr-bios{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(16px,2vw,28px);margin-bottom:clamp(44px,5vw,70px)}
.pr-bio{background:#fff;border:2px solid var(--black);padding:clamp(20px,2.2vw,30px)}
.pr-bio-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.pr-bio-top .h-label{margin:0}
.pr-bio p:not(.h-label){font-size:15.5px;line-height:1.6;margin:10px 0 0;color:#222}
.pr-bio button:hover{background:var(--black);color:#fff}
.pr-contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background:var(--pink);color:var(--black);padding:clamp(26px,3.2vw,46px)}
.pr-contact h2{font-size:clamp(30px,3.2vw,46px);margin:0 0 12px}
.pr-contact p:not(.h-label){margin:0;font-size:16px;max-width:36em}
.pr-contact .h-label{color:var(--black)}
.pr-contact a:not(.h-btn){color:var(--black)}
.pr-contact .h-btn{background:var(--black)}
.pr-contact .h-btn:hover{background:#fff;color:var(--black);box-shadow:5px 5px 0 var(--black)}

/* ---------- ask jenn ---------- */
.ask{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,3vw,48px);align-items:start;
  background:var(--black);color:var(--cream);padding:clamp(26px,3.4vw,50px);margin:clamp(40px,5vw,70px) 0 0}
.ask .h-kicker{color:var(--black)}
.ask h2{color:#fff;font-size:clamp(30px,3.2vw,46px);margin:16px 0 14px}
.ask p{margin:0;font-size:16px;line-height:1.5;color:rgba(244,239,231,.85)}
.ask-form{display:grid;gap:10px}
.ask-form textarea,.ask-form input{width:100%;border:0;border-radius:0;padding:15px 16px;font:inherit;font-size:15px;background:#fff;color:#111}
.ask-form textarea{min-height:130px;resize:vertical}
.ask-form button{justify-self:start;border:0;background:var(--pink);color:#fff;font-family:var(--cond);font-weight:600;font-size:17px;letter-spacing:.07em;text-transform:uppercase;padding:14px 24px}
.ask-form button:hover{background:var(--yellow);color:#111}
.ask .ask-note{font-family:var(--cond);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,231,.55)}
.sub-wine{font-family:var(--hand);font-weight:600;font-size:clamp(24px,2.4vw,32px);color:rgba(244,239,231,.9);margin:-14px 0 26px}
.sub-wine span{color:var(--pink);border-bottom:2px solid var(--pink)}

@media (max-width:900px){
  .h-proof-band{grid-template-columns:1fr;gap:10px;padding:16px var(--gut)}
  .h-proof-label br{display:none}
  .pr-topics,.pr-record,.pr-shots,.pr-bios,.ask,.pr-praise-list{grid-template-columns:1fr}
  .pr-contact{grid-template-columns:1fr}
}

/* ---------- the tour poster ---------- */
.tour{position:relative;background:var(--black);color:var(--cream);padding:clamp(30px,4vw,64px) clamp(22px,4vw,64px) clamp(28px,3.4vw,48px);
  border:3px solid var(--black);box-shadow:12px 12px 0 var(--pink);margin-bottom:clamp(40px,5vw,72px)}
.tour::before{content:"";position:absolute;inset:12px;border:1px solid rgba(244,239,231,.25);pointer-events:none}
.tour-head{text-align:center;border-bottom:2px solid var(--pink);padding-bottom:clamp(16px,2vw,26px);margin-bottom:clamp(8px,1vw,14px)}
.tour-kick{font-family:var(--cond);font-weight:500;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,239,231,.7);margin:0 0 6px}
.tour-title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(64px,11vw,168px);line-height:.86;margin:0;color:#fff;letter-spacing:.01em}
.tour-title span{color:var(--pink)}
.tour-years{font-family:var(--display);font-size:clamp(22px,2.4vw,34px);letter-spacing:.3em;margin:10px 0 0;color:var(--cream)}
.tour-list{list-style:none;margin:0;padding:0}
.tour-list li{display:grid;grid-template-columns:minmax(150px,.26fr) minmax(170px,.3fr) minmax(0,1fr);gap:8px clamp(16px,2.4vw,34px);align-items:baseline;
  padding:clamp(16px,1.8vw,24px) 0;border-bottom:1px dashed rgba(244,239,231,.3)}
.tour-date{font-family:var(--display);font-size:clamp(26px,2.8vw,40px);line-height:1;color:var(--pink)}
.tour-city{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,2vw,28px);line-height:1.05;color:#fff}
.tour-what b{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(19px,1.7vw,24px);line-height:1.1;color:#fff}
.tour-what b a{color:inherit;text-decoration:none;border-bottom:2px solid var(--pink)}
.tour-what b a:hover{color:var(--pink)}
.tour-what span{display:block;font-size:14.5px;line-height:1.4;color:rgba(244,239,231,.8);margin-top:4px}
.tour-what em{display:block;font-style:normal;font-family:var(--hand);font-weight:600;font-size:22px;line-height:1.1;color:var(--cream);margin-top:8px}
.tour-what em::before{content:"Find me: ";color:var(--pink)}
.tour-foot{text-align:center;margin:clamp(18px,2vw,26px) 0 0;font-family:var(--cond);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,231,.75)}
.tour-foot a{color:var(--pink);text-decoration:none;border-bottom:2px solid var(--pink);margin-left:8px}

/* ---------- what I'm drinking ---------- */
.drink{max-width:520px;margin:0 auto clamp(40px,5vw,72px);text-align:center;background:#fff;border:2px solid var(--black);padding:26px 28px;
  transform:rotate(-1.5deg);box-shadow:8px 8px 0 var(--black)}
.drink-kick{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin:0 0 8px}
.drink-pour{font-family:var(--serif);font-weight:800;font-size:clamp(26px,2.6vw,36px);line-height:1.05;margin:0 0 8px}
.drink-note{font-family:var(--hand);font-weight:600;font-size:24px;line-height:1.15;margin:0}
.drink-stamp{font-family:var(--cond);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin:10px 0 0}

/* ---------- bingo ---------- */
.bingo{margin-bottom:clamp(20px,3vw,40px)}
.bingo-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;align-items:end;margin-bottom:clamp(18px,2vw,28px)}
.bingo-head h2{font-size:clamp(34px,3.6vw,54px);margin:16px 0 12px}
.bingo-head p:not(.h-kicker){margin:0;font-size:16px;line-height:1.5;max-width:36em;color:#222}
.bingo-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.bingo-btns .h-tlink{background:none;border-top:0;border-left:0;border-right:0;padding:0 0 3px;cursor:pointer}
.bingo-btns .h-btn{border:0;cursor:pointer}
.bingo-grid{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;background:var(--black);padding:8px;border:3px solid var(--black)}
.bcell{position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--cream);border:0;
  padding:8px;font-family:var(--cond);font-weight:600;font-size:clamp(11px,1.15vw,15.5px);line-height:1.15;letter-spacing:.03em;text-transform:uppercase;color:var(--black);
  text-align:center;cursor:pointer;transition:background .15s,transform .15s}
.bcell:hover{transform:scale(.97)}
.bcell.on{background:var(--pink);color:#fff}
.bcell.on::after{content:"";position:absolute;inset:14%;border:3px solid rgba(255,255,255,.55);border-radius:50%;transform:rotate(-8deg)}
.bcell.free{cursor:default;background:var(--black);color:var(--pink);outline:2px solid var(--pink);outline-offset:-6px}
.bcell.free::after{display:none}
.bcell small{font-family:var(--hand);font-size:clamp(14px,1.4vw,20px);text-transform:none;letter-spacing:0;color:var(--cream)}
.bingo-grid.won{animation:bingoWin .9s ease 2}
@keyframes bingoWin{0%,100%{box-shadow:0 0 0 0 var(--pink)}50%{box-shadow:0 0 0 10px var(--pink)}}

@media (max-width:900px){
  .tour-list li{grid-template-columns:1fr;gap:4px}
  .tour{box-shadow:8px 8px 0 var(--pink)}
  .bingo-head{grid-template-columns:1fr}
  .bingo-grid{gap:4px;padding:4px}
  .bcell{font-size:9.5px;padding:4px;letter-spacing:0}
  .bcell small{font-size:13px}
  .bcell.on::after{display:none}
}

/* ---------- final pass: quieter handwriting, notebook, vault ---------- */
.h-strip-lead{transform:none;border-right:0;padding-right:0}
.h-strip-in{grid-template-columns:auto minmax(0,1fr) auto}
.h-latest .h-label{font-size:15px;margin-bottom:14px}
.h-hang-title{font-family:var(--display);font-weight:400;font-size:clamp(28px,2.6vw,38px);letter-spacing:.01em}
.h-obs-foot .h-tlink{font-family:var(--cond)}
.hg-rule .h-kicker,.ask .h-kicker,.bingo-head .h-kicker{font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.16em}
.hg-rule .tape,.ask .tape,.bingo-head .tape{background:none;clip-path:none;transform:none;padding:0;color:var(--pink)}
.ask .tape{color:var(--pink)}
.h-note{background:var(--cream);padding:0 0 clamp(18px,2vw,26px)}
.h-note-in{max-width:1400px;display:grid;grid-template-columns:minmax(150px,.22fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:clamp(18px,2vw,26px)}
.h-note-title{margin:0;font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,2vw,28px);line-height:1}
.h-note-date,.h-note-sponsor{margin:6px 0 0;font-family:var(--cond);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.h-note-sponsor a{color:var(--black)}
.h-note-sponsor:empty{display:none}
.h-note-items{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px)}
.h-note-items dt{font-family:var(--cond);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin:0 0 6px}
.h-note-items dd{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.4vw,20px);line-height:1.28}
.h-now-go{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
.h-depth{font-family:var(--cond);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.h-depth:empty{display:none}
.h-vault{margin:clamp(26px,3vw,40px) 0 0;padding-top:16px;border-top:1px solid var(--rule);font-size:16px;line-height:1.5}
.h-vault:empty{display:none}
.h-vault-k{font-family:var(--cond);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-right:10px}
.h-vault a{font-family:var(--serif);font-weight:800;font-size:clamp(18px,1.5vw,21px);color:var(--black);text-decoration:none;border-bottom:2px solid var(--pink)}
.h-vault a:hover{color:var(--pink)}
.h-vault-y{font-family:var(--cond);font-size:13px;letter-spacing:.1em;color:var(--grey);margin-left:8px}
.skift{margin:14px 0 0;font-family:var(--cond);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.skift span{text-transform:none;letter-spacing:0;font-family:var(--sans);font-style:italic}
@media (max-width:1180px){ .h-strip-in{grid-template-columns:1fr} }
@media (max-width:900px){
  .h-note-in{grid-template-columns:1fr}
  .h-note-items{grid-template-columns:1fr;gap:14px}
  .h-strip-lead br{display:none}
}

/* ---------- hot take machine ---------- */
.hotake{background:var(--pink);color:var(--black);padding:clamp(24px,3.4vw,48px);margin-bottom:clamp(40px,5vw,72px);border:3px solid var(--black);box-shadow:10px 10px 0 var(--black)}
.hotake-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:18px}
.hotake-kick{margin:0;font-family:var(--display);text-transform:uppercase;font-size:clamp(34px,4.4vw,64px);line-height:.9}
.hotake-sub{margin:0;font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.hotake-out{margin:0 0 20px;background:var(--black);color:#fff;padding:clamp(22px,3vw,40px);min-height:170px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.hotake-out blockquote{margin:0;font-family:var(--serif);font-weight:800;font-size:clamp(22px,2.5vw,36px);line-height:1.18;letter-spacing:-.01em}
.hotake-out figcaption{font-family:var(--cond);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,231,.7)}
.hotake-out figcaption a{color:var(--pink);text-decoration:none;border-bottom:1px solid var(--pink)}
.hotake-out.spin blockquote{animation:takeIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes takeIn{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}
.hotake-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.hotake-lever{border:3px solid var(--black);background:var(--yellow);color:#111;font-family:var(--cond);font-weight:700;font-size:18px;letter-spacing:.07em;text-transform:uppercase;padding:14px 24px;box-shadow:5px 5px 0 var(--black);transition:transform .12s,box-shadow .12s}
.hotake-lever:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--black)}
.hotake-lever:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--black)}
.hotake-copy{background:none;border-top:0;border-left:0;border-right:0;padding:0 0 3px;cursor:pointer}

/* ---------- tourism-to-english dictionary ---------- */
.dict{margin-bottom:clamp(40px,5vw,72px)}
.dict-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:18px}
.dict-head p:not(.h-kicker){margin:0;font-size:15px;color:#333}
.dict-head .h-kicker{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,52px);line-height:.95}
.dict-head .tape{background:none;clip-path:none;transform:none;padding:0;color:var(--black)}
.dict-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dcard{position:relative;display:block;aspect-ratio:4/3;border:2px solid var(--black);background:#fff;padding:0;cursor:pointer;text-align:left;overflow:hidden;font:inherit;color:var(--black)}
.dcard > span{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:16px;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
.dfront{justify-content:flex-end}
.dnum{position:absolute;top:12px;left:16px;font-family:var(--cond);font-size:12px;letter-spacing:.14em;color:var(--pink)}
.dfront b{font-family:var(--serif);font-weight:800;font-size:clamp(19px,1.6vw,24px);line-height:1.08}
.dfront small,.dback small{font-family:var(--cond);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.dback{background:var(--black);color:#fff;transform:translateY(100%);opacity:0;justify-content:center}
.dterm{font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
.ddef{font-family:var(--serif);font-weight:700;font-size:clamp(15px,1.2vw,18px);line-height:1.3}
.dback small{color:rgba(244,239,231,.6)}
.dcard.on .dback{transform:none;opacity:1}
.dcard.on .dfront{opacity:0}
.dcard:hover{box-shadow:5px 5px 0 var(--pink)}
.hg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){ .dict-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .hg-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .hg-grid{grid-template-columns:1fr} .dcard{aspect-ratio:auto;min-height:150px} }
@media (max-width:480px){ .dict-grid{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ---------- unified masthead: same bar as the homepage ---------- */
header.site{border-bottom:3px solid var(--pink)}
.mark.bvt{display:flex;align-items:center;gap:10px;line-height:1}
.mark.bvt img{width:38px;height:38px;border-radius:50%;display:block}
.mark.bvt .bt{font-family:"Covered By Your Grace",var(--display);-webkit-text-stroke:.02em currentColor;text-transform:uppercase;font-size:26px;color:var(--cream);letter-spacing:.01em;white-space:nowrap}
.mark.bvt .bt b{color:var(--pink);font-weight:400}
nav.main a{font-family:"Covered By Your Grace",var(--display);-webkit-text-stroke:.02em currentColor;font-weight:400;font-size:21px;letter-spacing:.02em}
nav.main a.on{border-color:var(--pink)}
nav.main .nav2{display:flex;align-items:center;gap:14px;padding-left:16px;border-left:2px solid rgba(255,255,255,.18)}
nav.main .nav2 a{font-size:17px;color:#cfc7ca}
.sub-cta{background:#ff2fb3;color:#1a0710;border:0;font-family:"Covered By Your Grace",var(--display);-webkit-text-stroke:.02em currentColor;font-weight:400;font-size:19px;letter-spacing:.02em;padding:6px 14px;transform:rotate(-1deg)}
.sub-cta:hover{background:#fff;color:var(--black)}
.foot-nav .nav2{display:contents}
@media (max-width:1040px){
  .burger{display:block}
  .sub-cta{margin-left:auto}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;margin:0;background:var(--pink);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 22px;border-bottom:3px solid var(--black)}
  nav.main.open{display:flex}
  nav.main a{padding:10px 0;font-size:34px;color:var(--black);border-bottom:2px solid rgba(0,0,0,.15)}
  nav.main a:hover,nav.main a.on{color:var(--cream);border-color:rgba(0,0,0,.15)}
  nav.main .nav2{border-left:0;padding:12px 0 0;gap:22px}
  nav.main .nav2 a{font-size:24px;color:var(--black);border-bottom:0}
  nav.main .srch{color:var(--black);justify-content:start;padding:14px 0 0}
}
@media (max-width:420px){.mark.bvt .bt{display:none}}

/* the menu: a quiet insert */
.menu-insert{max-width:640px;background:#fff;border:2px solid var(--black);padding:16px 20px 14px;transform:rotate(-.5deg);margin-bottom:10px}
.menu-insert dl{margin:0}
.menu-insert dl div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;border-bottom:1px dashed var(--rule)}
.menu-insert dl div:last-child{border-bottom:0}
.menu-insert dt{font-weight:600;font-size:15.5px}
.menu-insert dd{margin:0;font-family:var(--cond);letter-spacing:.06em;text-transform:uppercase;font-size:13px;color:var(--grey);white-space:nowrap}
.menu-insert p{font-size:14px;color:var(--grey);margin:10px 0 0}
.menu-insert a{color:var(--pink)}

/* ============================================================
   MOTEL SKIN: the inside pages, dressed to match the motel world
   (dusk palette, motel type, a scene banner at the top of every room)
   ============================================================ */
:root{
  --cream:#F2E9D6;--cream-2:#E9DDC5;--paper:#FBF6EA;
  --ink:#1C140E;--ink-2:#2A1D14;--grey:#6D5F50;
  --pink:#FF2FB3;--yellow:#FFD84A;
  --black:#160B14;--black-2:#21121E;
  --rule:rgba(28,20,14,.22);--rule-soft:rgba(28,20,14,.1);
  --serif:"Old Standard TT",Georgia,serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Courier Prime","Courier New",monospace;
  --cond:"Courier Prime","Courier New",monospace;
  --marker:"Covered By Your Grace",cursive;
  --hand:"Covered By Your Grace",cursive;
}
*{--r:0deg !important}
body{background:#F2E9D6;background-image:radial-gradient(ellipse at 50% -10%,rgba(255,47,179,.07),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(255,179,71,.08),transparent 50%)}
body::after{opacity:.06}
.tear{display:none!important}
/* masthead floats over the scene on a gradient, like the motel; it goes solid once you scroll past the scene */
:root{--hdrH:73px;--bannerH:calc(clamp(160px,28vh,300px) + var(--hdrH))}
@media (max-width:900px){:root{--hdrH:64px}}
html,body{overflow-x:clip}
header.site{position:fixed!important;top:0;left:0;right:0;background-color:transparent;background-image:linear-gradient(rgba(11,6,16,.74),rgba(11,6,16,.4) 60%,rgba(11,6,16,0));background-repeat:no-repeat;border-bottom:2px solid transparent!important;box-shadow:none}
@media (min-width:1041px) and (max-width:1500px){.hdr{gap:clamp(12px,1.3vw,22px)}nav.main{gap:clamp(10px,1.25vw,20px)}}
header.site .bt,header.site nav.main>a,header.site .nav2 a{text-shadow:0 1px 10px rgba(0,0,0,.6)}
@keyframes hdrSolid{to{background-color:#0B0610;border-bottom-color:rgba(255,63,191,.6);box-shadow:0 10px 30px rgba(0,0,0,.25)}}
@supports (animation-timeline:scroll()){header.site{animation:hdrSolid linear both;animation-timeline:scroll(root);animation-range:calc(var(--bannerH) - var(--hdrH) - 90px) calc(var(--bannerH) - var(--hdrH))}}
@supports not (animation-timeline:scroll()){header.site{background-color:#0B0610;border-bottom-color:rgba(255,63,191,.6)!important}}
header.site:has(nav.main.open){background-color:#0B0610!important}
header.site .bt{color:#fff}
header.site .bt b{color:#FF3FBF}
footer.site{background:#0B0610!important;color:#E9DDC5;border-top:2px solid rgba(255,63,191,.5)}
footer.site a{color:#fff}
.display,h1.display{font-family:"Covered By Your Grace",cursive!important;-webkit-text-stroke:.02em currentColor;text-transform:uppercase;letter-spacing:.01em;font-weight:400}
.label{font-family:"Courier Prime",monospace!important;letter-spacing:.18em}
.lede{font-family:"Old Standard TT",Georgia,serif}
/* the scene banner at the top of every room */
.view::before{content:var(--place,"");display:flex;align-items:flex-end;justify-content:flex-start;box-sizing:border-box;height:clamp(200px,38vh,400px);padding:0 var(--gut) 22px;
  background:linear-gradient(rgba(11,6,16,.15),rgba(11,6,16,.1) 45%,rgba(11,6,16,.82)),var(--scene) center 38%/cover no-repeat,#160B14;
  color:#FFF0FA;font-family:"Courier Prime",monospace;font-size:clamp(12px,1.3vw,15px);letter-spacing:.32em;text-transform:uppercase;
  text-shadow:0 0 6px #FF2FB3,0 0 18px rgba(255,47,179,.6);border-bottom:2px solid rgba(255,63,191,.55)}
#v-read{--scene:url(images/scenes/newsstand.webp);--place:"Mile 1 \00B7  The newsstand \00B7  every essay, every back issue"}
#v-book{--scene:url(images/scenes/giftshop.webp);--place:"Mile 5 \00B7  The gift shop \00B7  the book"}
#v-speaking{--scene:url(images/scenes/agency.webp);--place:"The travel agency \00B7  work with Jenn"}
#v-hangout{--scene:url(images/scenes/conference.webp);--place:"The conference \00B7  come hang out"}
#v-press{--scene:url(images/scenes/lounge.webp);--place:"The departure lounge \00B7  press"}
#v-about{--scene:url(images/scenes/club.webp);--place:"The Club \00B7  meet Jenn"}
/* paper for reading, ink and neon for accents */
.btn,.btn--pink,button.btn{border-radius:0}
.btn--pink,.sub-cta{background:#FF2FB3!important;color:#1A0710!important}
::selection{background:#FF2FB3;color:#fff}
/* ---------- article pages ---------- */
.art-head{padding-block:clamp(36px,4.6vw,72px) clamp(18px,2.2vw,30px)}
.art-head .lane{display:block}
.art-head h1{font-size:clamp(32px,4.8vw,66px);max-width:17em;letter-spacing:-.024em;line-height:1}
.art-deck{font-family:var(--serif);font-size:clamp(18px,1.9vw,25px);line-height:1.34;
  color:var(--ink-2);max-width:26em;margin:20px 0 0}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--rule)}
.art-body{padding-bottom:clamp(36px,4.4vw,64px)}
.art-body .prose h2{font-family:var(--serif);font-weight:900;font-size:clamp(23px,2.4vw,32px);
  line-height:1.1;letter-spacing:-.016em;margin:1.9em 0 .5em}
.art-body .prose h3{font-family:var(--serif);font-weight:900;font-size:clamp(19px,1.9vw,24px);
  line-height:1.15;margin:1.7em 0 .4em}
.art-body .prose img{margin:1.7em 0;width:100%;height:auto}
.art-body .prose blockquote{margin:1.7em 0;padding-left:22px;border-left:4px solid var(--pink);
  font-family:var(--serif);font-style:italic;font-size:1.14em;line-height:1.4}
.art-body .prose ul,.art-body .prose ol{padding-left:1.2em;margin:0 0 1.15em}
.art-body .prose li{margin-bottom:.45em}
.art-body .prose a{color:var(--pink)}
.art-body .prose strong{font-weight:700}
.art-origin{margin-top:clamp(28px,3.2vw,44px);padding-top:20px;border-top:1px solid var(--rule);
  font-size:14px;color:var(--grey);max-width:38em}
.art-origin a{color:var(--pink)}

/* related reading comes before any ask */
.related{border-top:3px solid var(--ink);padding-block:clamp(30px,3.6vw,52px) clamp(40px,4.6vw,72px)}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,38px);margin-top:26px}
.related .mini{border-top:1px solid var(--rule)}

/* share, quietly */
.share{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:26px}
.share .meta{margin-right:4px}
.share .share-ask{flex-basis:100%;font-family:var(--hand);font-weight:700;font-size:24px;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 4px}
.share a,.share button{
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--rule);background:transparent;color:var(--ink-2);
  padding:8px 12px;text-decoration:none;
}
.share a:hover,.share button:hover{border-color:var(--ink);color:var(--ink)}

@media (max-width:900px){
  .related-grid{grid-template-columns:1fr}
  .art-head h1{font-size:clamp(30px,8vw,40px)}
  .prose{font-size:17.5px}
}

/* the article masthead banner: you're at the newsstand */
.art-head{position:relative;padding-top:0!important}
.art-head::before{content:"Mile 1 · The newsstand · today’s paper";display:flex;align-items:flex-end;box-sizing:border-box;margin:0 calc(50% - 50vw) 28px;height:var(--bannerH);padding:0 var(--gut) 18px;
  background:linear-gradient(rgba(11,6,16,.1),rgba(11,6,16,.82)),url(../images/scenes/newsstand.webp) center 38%/cover no-repeat,#160B14;
  color:#FFF0FA;font-family:"Courier Prime",monospace;font-size:clamp(11px,1.2vw,14px);letter-spacing:.32em;text-transform:uppercase;text-shadow:0 0 6px #FF2FB3,0 0 18px rgba(255,47,179,.6);border-bottom:2px solid rgba(255,63,191,.55)}
.prose{font-family:"Old Standard TT",Georgia,serif;font-size:1.16rem;line-height:1.65}
.prose h2,.prose h3{font-family:"Old Standard TT",Georgia,serif;font-weight:700}

/* editorial titles: Anton bold caps for headlines, Archivo heavy caps for list titles */
.display,h1.display,h2.display,.h-serif,.sec,.sub-title,.callout h3,.art-head h1,.page-head h1{font-family:"Anton","Oswald",Impact,sans-serif!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.005em!important;-webkit-text-stroke:0!important;word-spacing:normal!important}
.display,h1.display,.page-head h1{line-height:.92!important}
.h-serif,.sec,.sub-title,.callout h3{line-height:.98!important}
.art-head h1{line-height:.95!important;max-width:18em}
.piece h3,.related h3,.related-grid h3,.rel h3{font-family:"Archivo","Helvetica Neue",Arial,sans-serif!important;font-weight:800!important;text-transform:uppercase;letter-spacing:-.005em!important;line-height:1.12!important}
.prose h2,.prose h3{font-family:"Archivo","Helvetica Neue",Arial,sans-serif!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.01em!important;line-height:1.15}
.prose h2{font-size:1.35em}.prose h3{font-size:1.1em}