/* Studio Viridian — collage on paper.
   Palette: cream paper, green-black ink, viridian, and six theme colors
   taken from the studio's collage references. */

:root {
  --paper: #f3ecdb;
  --paper-2: #e9dfc6;
  --paper-3: #fbf7ec;
  --news: #ece3cd;
  --ink: #1b2622;
  --ink-2: #47554f;
  --rule: rgba(27, 38, 34, .22);
  --viridian: #2f7d6b;
  --viridian-deep: #163f36;
  --sun: #f2b632;
  --ochre: #e8b84a;
  --rose: #e3879a;
  --brick: #d8542c;
  --sky: #3f9cc6;
  --plum: #5a4f96;
  --leaf: #2f7d6b;
  --indigo: #27386b;
  --c: var(--ochre);
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --wide: 78rem;
  --measure: 41rem;
}

.c-sun { --c: var(--sun); } .c-ochre { --c: var(--ochre); } .c-rose { --c: var(--rose); }
.c-brick { --c: var(--brick); } .c-sky { --c: var(--sky); } .c-plum { --c: var(--plum); }
.c-leaf { --c: var(--leaf); } .c-viridian { --c: var(--viridian); } .c-indigo { --c: var(--indigo); }
.c-ink { --c: var(--ink); } .c-paper { --c: var(--paper-3); } .c-news { --c: var(--news); }
.c-deep { --c: var(--viridian-deep); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .14 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  font: 400 1.1875rem/1.6 var(--serif);
  font-optical-sizing: auto;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-color: var(--viridian); text-decoration-thickness: .09em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .16em; }
:focus-visible { outline: 3px solid var(--viridian); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--sun); color: var(--ink); }
.defs { position: absolute; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 99; font: 600 .9rem var(--sans); }
.skip:focus { left: 0; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 420; line-height: 1.06; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
h1 em, h2 em, .pull em { font-style: italic; font-weight: 380; }
p { margin: 0 0 1em; }

.eyebrow, .dateline, .meta, .byline, .q-num, .status, .lens-label, .ask-label, .blk-title, .beat {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.eyebrow { margin: 0 0 1rem; }
.eyebrow::before { content: ""; display: inline-block; width: 1.6em; height: 2px; background: var(--ink); vertical-align: .28em; margin-right: .7em; }
.eyebrow a { text-decoration: none; }
.standfirst { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); line-height: 1.42; color: var(--ink); max-width: 36rem; margin: 1.2rem 0 0; }
.meta { font-size: .74rem; margin: 0; }

/* ---------- buttons, chips */
.btn {
  display: inline-block; font: 700 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--paper-3); background: var(--ink); border: 1.5px solid var(--ink); padding: 1.05em 1.5em; cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease; border-radius: 1px;
}
.btn:hover { transform: rotate(-1.2deg) translateY(-2px); background: var(--viridian-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-style: dashed; }
.btn-ghost:hover { background: var(--paper-3); }
.chip {
  display: inline-block; font: 700 .64rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  padding: .42em .65em .38em; background: color-mix(in srgb, var(--c) 34%, var(--paper-3)); color: var(--ink); border-radius: 1px;
}
.chip::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--c); margin-right: .5em; }
.chip-link { text-decoration: none; }
.chip-link:hover .chip { background: color-mix(in srgb, var(--c) 55%, var(--paper-3)); }

/* ---------- header */
.site-head {
  position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--wide); margin: 0 auto; padding: 1.1rem var(--gutter) .4rem;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand img { width: 4.6rem; height: auto; display: block; }
.brand-name {
  font: 500 1.28rem/1 var(--sans); letter-spacing: -.02em;
  background: linear-gradient(100deg, #1c2a26 5%, #2f7d6b 55%, #3b4c8c 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.site-nav ul { list-style: none; display: flex; gap: clamp(.9rem, 2.2vw, 2rem); margin: 0; padding: 0; }
.site-nav a { font: 600 .78rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; text-decoration: none; padding: .5em 0; position: relative; }
.site-nav a::after {
  content: ""; position: absolute; left: -4%; right: -4%; bottom: -.1em; height: .55em; background: var(--sun); z-index: -1;
  transform: scaleX(0) rotate(-1deg); transform-origin: left; transition: transform .22s ease; filter: url(#rough);
}
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1) rotate(-1deg); }
.nav-toggle { display: none; font: 700 .76rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; background: none; border: 1.5px dashed var(--ink); padding: .7em 1em; color: var(--ink); cursor: pointer; }

/* ---------- collage */
.collage { position: relative; aspect-ratio: var(--ar, 1); container-type: inline-size; margin: 0; width: 100%; }
.cl {
  position: absolute; display: block; height: auto; max-width: none;
  transform: translate(-50%, -50%) translate3d(0, calc(var(--p, 0) * var(--d, 0) * -70px), 0) rotate(var(--r, 0deg));
}
.cl-img { filter: drop-shadow(0 .5cqw .7cqw rgba(40, 32, 14, .2)); user-select: none; -webkit-user-drag: none; }
.cl-img.flat { filter: none; }
.cl-img.b-multiply { mix-blend-mode: multiply; filter: none; }
.cl-img.gray { filter: grayscale(1) contrast(1.15) drop-shadow(0 .5cqw .7cqw rgba(40, 32, 14, .2)); }
.cl-disc { border-radius: 50%; background: var(--c); filter: url(#rough); }
.cl-square { background: var(--c); filter: url(#rough); }
.cl-scrap { background: var(--c); }
.cl-ring { border-radius: 50%; border: 1.5px dashed var(--c); }
.cl-dots { background-image: radial-gradient(circle, var(--c) 24%, transparent 27%); background-size: 14.2857% 14.2857%; }
.cl-tape { background: rgba(246, 226, 150, .82); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.cl-speck { border-radius: 50%; background: var(--c); }
.cl-blob { overflow: visible; }
.cl-blob path { fill: var(--c); }
.cl-path { overflow: visible; }
.cl-path path { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-dasharray: 5 7; stroke-linecap: round; }
.cl-word { font-size: calc(var(--fs) * 1cqw); line-height: 1; white-space: nowrap; width: auto !important; }
.w-label { font-family: var(--sans); font-weight: 800; font-stretch: 78%; text-transform: uppercase; letter-spacing: .02em; background: var(--c); color: var(--paper-3); padding: .22em .45em .16em; }
.w-label.c-paper, .w-label.c-sun, .w-label.c-ochre, .w-label.c-news { color: var(--ink); }
.w-poster { font-family: var(--sans); font-weight: 900; font-stretch: 75%; text-transform: uppercase; color: var(--c); letter-spacing: -.01em; }
.w-type { font-family: var(--mono); background: var(--paper-3); color: var(--ink); padding: .3em .55em; box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.w-serif { font-family: var(--display); font-style: italic; color: var(--c); }
.cl-news {
  font: 400 calc(var(--fs) * 1cqw) / 1.28 var(--serif); text-align: justify; hyphens: auto; background: var(--news); color: #2c2a22;
  padding: 1.6em 1.5em; column-count: 2; column-gap: 1.4em; overflow: hidden; filter: drop-shadow(0 .4cqw .5cqw rgba(40, 32, 14, .18));
}
.float { animation: float 9s ease-in-out infinite alternate; }
.float-2 { animation: float 12s ease-in-out -4s infinite alternate; }
@keyframes float { from { translate: 0 -.5cqw; } to { translate: 0 .9cqw; } }
/* the hero pieces settle into place only when the script says the page is on screen; without it they simply show */
.collage-hero.anim .cl { animation: place .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.collage-hero.anim .cl.float { animation: place .9s cubic-bezier(.2, .8, .2, 1) both, float 9s ease-in-out 1.2s infinite alternate; }
/* no fade: a piece is never hidden, so a paused animation clock cannot blank the collage */
@keyframes place { from { scale: 1.07; rotate: 1.6deg; } to { scale: 1; rotate: 0deg; } }

/* ---------- hero */
.hero {
  position: relative; max-width: var(--wide); margin: 0 auto; padding: clamp(1rem, 3vw, 2.5rem) var(--gutter) clamp(2.5rem, 6vw, 5rem);
  display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); gap: clamp(1rem, 2.5vw, 2.5rem); align-items: center;
}
.hero h1 { font-size: clamp(3rem, 1.2rem + 6vw, 6.2rem); line-height: .93; letter-spacing: -.03em; font-weight: 400; }
.hero h1 em { position: relative; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: .04em; height: .3em; background: var(--sun); z-index: -1; transform: rotate(-1.2deg); filter: url(#rough); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 0; }
.hero .collage { margin-right: calc(var(--gutter) * -.4); }

/* ---------- bands */
.band { max-width: var(--wide); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5.5rem) var(--gutter); position: relative; }
.band-head { max-width: 44rem; margin-bottom: clamp(1.5rem, 3vw, 2.6rem); }
.band-head h2, .page-head h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.1rem); }
.band-head p:not(.eyebrow) { margin: 1rem 0 0; font-size: 1.22rem; color: var(--ink-2); max-width: 38rem; }
.band-more { margin: 2.2rem 0 0; }

/* a band head with a collage beside it */
.band-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1rem, 4vw, 4rem); align-items: center; margin-bottom: 2.5rem; }
.band-split .band-head { margin-bottom: 0; }

/* this week */
.band-week { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1rem, 4vw, 4rem); align-items: center; }
.week-card { background: var(--news); padding: clamp(1.4rem, 3.5vw, 3rem); filter: drop-shadow(0 6px 10px rgba(40, 32, 14, .16)); transform: rotate(-.6deg); }
.week-mast { border-bottom: 3px double var(--ink); padding-bottom: 1.1rem; margin-bottom: 1.1rem; }
.week-mast h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); margin: .5rem 0 .7rem; }
.week-mast h2 a { text-decoration: none; }
.week-mast p:last-child { margin: 0; color: var(--ink-2); }
.dateline { margin: 0; }
.dateline a { text-decoration: none; }
.week-heads { list-style: none; counter-reset: h; margin: 0; padding: 0; }
.week-heads li { counter-increment: h; display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .6rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.week-heads li::before { content: counter(h, decimal-leading-zero); font: 400 .8rem var(--mono); color: var(--ink-2); }
.week-heads a { font: 500 1.16rem/1.25 var(--display); text-decoration: none; }
.week-heads a:hover { text-decoration: underline; text-decoration-color: var(--viridian); }
.week-more { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin: 1.6rem 0 0; }

/* cards */
.card-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.card-row.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter) 3rem; }
.rel .card-row.wrap { padding: 0; }
.card { --tilt: 0deg; transform: rotate(var(--tilt)); transition: transform .25s ease, filter .25s ease; filter: drop-shadow(0 4px 7px rgba(40, 32, 14, .14)); }
.tilt-0 { --tilt: -1.1deg; } .tilt-1 { --tilt: .8deg; } .tilt-2 { --tilt: -.5deg; } .tilt-3 { --tilt: 1.3deg; }
.card:hover, .card:focus-within { transform: rotate(0deg) translateY(-5px); filter: drop-shadow(0 12px 14px rgba(40, 32, 14, .2)); }
.card > a { display: block; height: 100%; text-decoration: none; padding: 1.5rem 1.5rem 1.3rem; background: var(--paper-3); position: relative; }
.card-essay > a::before { content: ""; position: absolute; top: -.7rem; left: 50%; width: 5.2rem; height: 1.5rem; background: rgba(246, 226, 150, .85); transform: translateX(-50%) rotate(-2.5deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.card h3 { font-size: 1.55rem; line-height: 1.1; margin: .7rem 0 .6rem; }
.card p { font-size: 1.02rem; line-height: 1.45; color: var(--ink-2); margin: 0 0 .9rem; }
.card-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 !important; }

/* questions wall */
.q-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.q-wall.q-small { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.card-q > a { background: color-mix(in srgb, var(--c) 30%, var(--paper-3)); padding: 1.3rem 1.4rem 1.2rem; min-height: 11.5rem; display: flex; flex-direction: column; overflow: hidden; }
.card-q h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); font-style: italic; font-weight: 400; margin: 0 0 auto; position: relative; padding-bottom: 1rem; }
.card-q .q-mark { position: absolute; right: .3rem; bottom: -1.6rem; font: italic 300 9rem/1 var(--display); color: var(--c); opacity: .55; margin: 0; }
.card-q .meta { position: relative; color: var(--ink); }

/* themes */
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.6rem) clamp(1rem, 2.4vw, 2rem); max-width: var(--wide); margin: 0 auto; }
.page-theme .theme-grid, main > .theme-grid { padding: 0 var(--gutter) 4rem; }
.theme-card { text-decoration: none; display: block; }
.theme-card .collage { transition: transform .3s ease; }
.theme-card:hover .collage { transform: rotate(-1.5deg) scale(1.02); }
.theme-card h3 { font-size: 1.7rem; margin: .4rem 0 .4rem; }
.theme-card h3::after { content: ""; display: block; width: 3.2rem; height: .5rem; margin-top: .5rem; background: var(--c); filter: url(#rough); }
.theme-card p { font-size: 1.02rem; line-height: 1.45; color: var(--ink-2); margin: 0; }

/* method */
.method { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; position: relative; }
.method::before { content: ""; position: absolute; left: 3%; right: 3%; top: 1.5rem; border-top: 2px dashed var(--ink); opacity: .35; }
.method li { position: relative; background: var(--paper-3); padding: 2.6rem 1rem 1.1rem; filter: drop-shadow(0 3px 5px rgba(40, 32, 14, .12)); display: flex; flex-direction: column; gap: .3rem; }
.method li:nth-child(odd) { transform: rotate(-1deg); } .method li:nth-child(even) { transform: rotate(.9deg) translateY(.5rem); }
.step-n { position: absolute; top: -.2rem; left: .8rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--sun); display: grid; place-items: center; font: 700 1rem var(--mono); filter: url(#rough); }
.method strong { font: 500 1.22rem/1.15 var(--display); }
.method span:last-child { font-size: .98rem; line-height: 1.4; color: var(--ink-2); }
.home-prose { margin-top: 5rem; }

/* subscribe */
.band-sub { text-align: center; }
.subscribe { max-width: 40rem; margin: 0 auto; background: var(--paper-3); padding: clamp(1.6rem, 4vw, 3rem); filter: drop-shadow(0 6px 10px rgba(40, 32, 14, .14)); transform: rotate(.5deg); position: relative; }
.subscribe::before { content: ""; position: absolute; top: -.8rem; left: 50%; width: 7rem; height: 1.7rem; background: rgba(246, 226, 150, .85); transform: translateX(-50%) rotate(2deg); }
.subscribe .eyebrow::before { display: none; }
.subscribe h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); margin-bottom: .8rem; }
.subscribe p { color: var(--ink-2); }
.sub-form label { display: block; font: 600 .72rem var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .4rem; }
.sub-row { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1rem; }
.sub-row input { font: inherit; padding: .55em .8em; border: 1.5px solid var(--ink); background: #fff; min-width: min(100%, 17rem); border-radius: 1px; }
.sub-alt { margin: 0; }
.open-line { max-width: 34rem; margin: 2rem auto 0; font-size: 1.02rem; color: var(--ink-2); font-style: italic; }

/* ---------- page heads */
.page-head { max-width: var(--wide); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3.5rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1rem, 4vw, 4rem); align-items: center; }
.page-head:not(:has(.collage)) { grid-template-columns: minmax(0, 1fr); }
.page-head h1 { max-width: 16em; }
.page-head.c-sun h1::after, .page-head.c-rose h1::after, .page-head.c-brick h1::after, .page-head.c-sky h1::after, .page-head.c-plum h1::after, .page-head.c-leaf h1::after {
  content: ""; display: block; width: 5rem; height: .7rem; margin-top: 1rem; background: var(--c); filter: url(#rough);
}

/* ---------- prose */
.prose { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter) 2rem; box-sizing: content-box; }
.prose.narrow { padding-bottom: .5rem; }
.band .prose { padding-left: 0; padding-right: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem); margin-top: 2.2em; }
.prose h3 { font-size: 1.45rem; margin-top: 1.8em; font-weight: 500; }
.prose h4 { font: 700 .8rem var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-top: 1.8em; }
.prose p { margin: 1.1em 0 0; }
.prose > p:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .45em 0; padding-left: .2em; }
.prose li::marker { color: var(--viridian); font-family: var(--mono); font-size: .9em; }
.prose strong { font-weight: 600; }
.prose hr { border: 0; height: 1.6rem; margin: 2.6rem auto; width: 9rem; background: radial-gradient(circle, var(--ink) 1.5px, transparent 2.5px) center / 1.6rem 1.6rem repeat-x; opacity: .6; }
.prose blockquote { margin: 1.8em 0 0; padding: .2em 0 .2em 1.4em; border-left: .45rem solid var(--sun); font-size: 1.12em; }
.prose blockquote p:first-child { margin-top: 0; }
.prose .pull { border: 0; padding: 0; margin: 2.6rem -1rem 2.2rem; font: italic 380 clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem)/1.15 var(--display); text-align: center; text-wrap: balance; position: relative; }
.prose .pull::after { content: ""; display: block; width: 6rem; height: .6rem; margin: 1.2rem auto 0; background: var(--sun); transform: rotate(-1.5deg); filter: url(#rough); }
.prose .pull p { margin: 0; }
.prose code { font: .86em var(--mono); background: var(--paper-2); padding: .1em .35em; }
.prose pre { background: var(--paper-2); padding: 1rem; overflow-x: auto; font-size: .9rem; }
.fig { margin: 2rem 0 0; }
.fig img { display: block; width: 100%; height: auto; }
.fig figcaption { font: .82rem/1.4 var(--mono); color: var(--ink-2); margin-top: .6rem; }
.table-wrap { overflow-x: auto; margin-top: 1.6em; }
table { border-collapse: collapse; width: 100%; font: .98rem/1.4 var(--serif); }
th { font: 700 .72rem var(--sans); letter-spacing: .08em; text-transform: uppercase; text-align: left; border-bottom: 2px solid var(--ink); padding: .5rem .7rem .5rem 0; vertical-align: bottom; }
td { border-bottom: 1px solid var(--rule); padding: .6rem .7rem .6rem 0; vertical-align: top; }
.fn a { text-decoration: none; font: 700 .72em var(--sans); padding: 0 .15em; color: var(--viridian-deep); }
.notes { margin-top: 3rem; padding-top: 1.2rem; border-top: 3px double var(--ink); font-size: .98rem; }
.notes h2 { font: 700 .78rem var(--sans) !important; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .8rem !important; }
.notes ol { padding-left: 1.4em; margin: 0; }
.notes li { margin: .4em 0; overflow-wrap: anywhere; }
.fn-back { text-decoration: none; font-family: var(--sans); }

.blk { margin-top: 1.8em; }
.blk-brief, .blk-note { background: var(--paper-3); padding: 1.3rem 1.5rem; filter: drop-shadow(0 3px 5px rgba(40, 32, 14, .1)); border-top: .5rem solid var(--sun); }
.blk-title { margin: 0 0 .5rem; font-weight: 700; }
.blk-brief p:first-of-type, .blk-note p:first-of-type { margin-top: 0; }
.clip { background: var(--news); padding: 1.6rem 1.7rem; margin: 2rem -1rem 0; font-size: 1.05rem; filter: drop-shadow(0 4px 6px rgba(40, 32, 14, .14)); transform: rotate(-.7deg); }
.clip p:first-child { margin-top: 0; }
.clip ul { columns: 2; column-gap: 2rem; list-style: none; padding: 0; margin: 0; }
.clip li { break-inside: avoid; margin: 0 0 .7em; padding: 0 0 .7em; border-bottom: 1px solid var(--rule); font-family: var(--display); font-size: 1.12rem; line-height: 1.25; }
.stamp { display: inline-block; border: 2px solid var(--brick); color: var(--brick); padding: .5rem .9rem; font: 700 .8rem var(--mono); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg); margin-top: 1.5em; }
.stamp p { margin: 0; }
.steps ol { list-style: none; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 0 0 0 3.4rem; margin: 1.2em 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -.1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--sun); display: grid; place-items: center; font: 700 1rem var(--mono); filter: url(#rough); }
.byline { max-width: var(--measure); margin: 0 auto 2rem; padding: .8rem var(--gutter); box-sizing: content-box; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; }
.byline span + span::before { content: "·"; margin-right: 1.2rem; }
.provenance { max-width: var(--measure); margin: 2.5rem auto 0; padding: 1rem var(--gutter) 0; box-sizing: content-box; font: .86rem/1.5 var(--mono); color: var(--ink-2); }
.provenance::before { content: ""; display: block; width: 4rem; border-top: 2px solid var(--ink); margin-bottom: 1rem; }
.next, .rel-q, .rel { max-width: var(--wide); margin: 3.5rem auto 0; padding: 0 var(--gutter); }
.next { max-width: calc(var(--measure) + 2 * var(--gutter)); margin-bottom: 4rem; }
.next a { font: 420 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem)/1.1 var(--display); text-decoration-thickness: .06em; }
.rel h2 { font-size: 1.9rem; margin-bottom: 1.4rem; }
.rel:last-child, .rel-q:last-child { margin-bottom: 4rem; }
.rel-items { list-style: none; padding: 0; margin: 0; max-width: 46rem; }
.rel-items li { padding: .7rem 0; border-bottom: 1px solid var(--rule); font: 500 1.15rem/1.3 var(--display); }
.rel-items a { text-decoration: none; }
.rel-items a:hover { text-decoration: underline; }

/* ---------- weekly issue */
.issue-mast { max-width: 62rem; margin: clamp(1rem, 3vw, 2.5rem) auto 0; background: var(--news); padding: clamp(1.6rem, 5vw, 4rem) clamp(1.3rem, 5vw, 4.5rem); filter: drop-shadow(0 6px 10px rgba(40, 32, 14, .16)); }
.issue-mast .dateline { border-bottom: 3px double var(--ink); padding-bottom: .9rem; margin-bottom: 1.6rem; }
.issue-mast h1 { font-size: clamp(2.3rem, 1.3rem + 4.4vw, 4.6rem); }
.issue-mast .byline { margin: 1.6rem 0 0; padding: 0; max-width: none; }
.issue-toc { max-width: var(--measure); margin: 2.5rem auto 0; padding: 0 var(--gutter); box-sizing: content-box; }
.issue-toc ol { margin: 0; padding-left: 1.4em; font: 500 1.1rem/1.3 var(--display); }
.issue-toc li { margin: .45em 0; }
.issue-toc li::marker { font: 400 .8rem var(--mono); color: var(--ink-2); }
.issue-toc a { text-decoration: none; }
.issue-toc a:hover { text-decoration: underline; }
.issue-body { margin-top: 2.5rem; }
.issue-body > h2 { font: 800 .9rem var(--sans); font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; border-top: 3px double var(--ink); padding-top: 1rem; margin-top: 3.4rem; }
.gl-item { margin-top: 2.4rem; padding-left: 1.4rem; position: relative; }
.gl-item::before { content: ""; position: absolute; left: 0; top: .3rem; bottom: .2rem; width: .42rem; background: var(--c); filter: url(#rough); }
.gl-chips { display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: center; margin: 0 0 .5rem !important; }
.beat { font-size: .72rem; }
.gl-item h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); margin-top: 0; font-weight: 450; scroll-margin-top: 2rem; }
.lens { background: var(--paper-3); padding: 1rem 1.2rem 1.05rem; margin-top: 1.1rem; filter: drop-shadow(0 2px 4px rgba(40, 32, 14, .1)); }
.lens-label, .ask-label { margin: 0 0 .35rem !important; font-weight: 700; color: var(--ink); }
.lens p { margin-top: .6em; font-size: 1.08rem; }
.lens p:nth-child(2) { margin-top: 0; }
.ask { margin-top: 1.1rem; padding-left: 3rem; position: relative; }
.ask::before { content: "?"; position: absolute; left: .2rem; top: -.6rem; font: italic 300 3.6rem/1 var(--display); color: var(--c); }
.ask p:not(.ask-label) { font: italic 400 1.3rem/1.3 var(--display); margin: 0; }
.prevnext { max-width: var(--measure); margin: 3rem auto 0; padding: 0 var(--gutter); box-sizing: content-box; display: flex; justify-content: space-between; font: 700 .8rem var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.issue-list { list-style: none; max-width: 52rem; margin: 1rem auto 3rem; padding: 0 var(--gutter); box-sizing: content-box; }
.issue-list a { display: grid; gap: .25rem; text-decoration: none; padding: 1.3rem 0; border-bottom: 1px solid var(--rule); }
.issue-list strong { font: 450 1.9rem/1.1 var(--display); }
.issue-list a:hover strong { text-decoration: underline; text-decoration-color: var(--viridian); text-decoration-thickness: .06em; }
.issue-list span:last-of-type { color: var(--ink-2); }
.draft-tag { font: 700 .7rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brick); font-style: normal; }

/* ---------- questions */
.q-list { max-width: 54rem; margin: 2rem auto 4rem; padding: 0 var(--gutter); box-sizing: content-box; display: grid; gap: 2.2rem; }
.q { background: color-mix(in srgb, var(--c) 16%, var(--paper-3)); padding: clamp(1.4rem, 3.5vw, 2.6rem); position: relative; filter: drop-shadow(0 5px 8px rgba(40, 32, 14, .13)); scroll-margin-top: 1.5rem; }
.q:nth-child(odd) { transform: rotate(-.35deg); } .q:nth-child(even) { transform: rotate(.3deg); }
.q:target { outline: 3px dashed var(--ink); outline-offset: 6px; }
.q header { border-bottom: 1.5px dashed var(--rule); padding-bottom: 1.1rem; margin-bottom: 1.2rem; }
.q-num { margin: 0 0 .5rem; }
.q h2 { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.7rem); font-style: italic; font-weight: 400; }
.q-meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin: 1rem 0 0; }
.status { font-size: .72rem; border: 1.5px solid var(--ink); padding: .25em .6em; }
.q .prose { padding: 0; margin: 0; max-width: 40rem; }
.q .prose h3 { font: 700 .74rem var(--sans); letter-spacing: .12em; text-transform: uppercase; margin-top: 1.6em; }
.q .prose h3 + p { margin-top: .4em; }
.q-rel { font: .84rem var(--mono); margin: 1.5rem 0 0; }

/* ---------- footer */
.site-foot { margin-top: clamp(3rem, 7vw, 6rem); background: var(--viridian-deep); color: var(--paper); position: relative; }
.foot-wave { position: absolute; left: 0; right: 0; top: -2.2rem; height: 2.3rem; background: var(--viridian-deep);
  clip-path: polygon(0 62%, 4% 38%, 9% 55%, 14% 22%, 20% 48%, 26% 30%, 31% 58%, 37% 26%, 43% 44%, 49% 18%, 55% 50%, 61% 34%, 67% 60%, 73% 28%, 79% 46%, 85% 20%, 91% 52%, 96% 32%, 100% 56%, 100% 100%, 0 100%); }
.foot-inner { max-width: var(--wide); margin: 0 auto; padding: 3.2rem var(--gutter) 1.5rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; }
.foot-tag { font: italic 380 clamp(2rem, 1.4rem + 2.4vw, 3.2rem)/1 var(--display); margin: 0 0 1rem; max-width: 9em; }
.foot-brand p:last-child { font: .82rem/1.6 var(--mono); letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
.foot-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.foot-nav h2 { font: 700 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sun); margin: 0 0 .8rem; }
.foot-nav ul { list-style: none; margin: 0; padding: 0; }
.foot-nav li { margin: .45rem 0; }
.foot-nav a { text-decoration: none; font-size: 1.05rem; overflow-wrap: anywhere; }
.foot-nav a:hover { text-decoration: underline; text-decoration-color: var(--sun); }
.foot-small { max-width: var(--wide); margin: 0 auto; padding: 1.2rem var(--gutter) 2.2rem; font: .78rem/1.6 var(--mono); opacity: .82; }
.site-foot a { text-decoration-color: var(--sun); }
.site-foot :focus-visible { outline-color: var(--sun); }

.credits { font-size: .98rem; padding-left: 1.2em; }
.draft-ribbon { position: sticky; top: 0; z-index: 50; background: var(--brick); color: #fff; font: 700 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: .55rem 1rem; margin: 0; }
.contact { font-size: 1.1rem; }

/* ---------- small screens */
@media (max-width: 62rem) {
  .hero, .band-week, .page-head, .band-split { grid-template-columns: minmax(0, 1fr); }
  .hero .collage { max-width: 34rem; margin: 0 auto; order: -1; }
  .page-head .collage, .band-week .collage, .band-split .collage { max-width: 22rem; margin: 0 auto; }
  .page-head .collage { order: -1; }
  .card-row, .q-wall, .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem .9rem; }
  .method::before { display: none; }
  .foot-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  body { font-size: 1.09rem; }
  .card-row, .q-wall, .theme-grid, .method { grid-template-columns: minmax(0, 1fr); }
  .card-q > a { min-height: 9rem; }
  .nav-toggle { display: block; }
  .site-nav ul { display: none; position: absolute; right: var(--gutter); top: 100%; flex-direction: column; gap: 0; background: var(--paper-3); padding: .6rem 1.2rem; filter: drop-shadow(0 6px 10px rgba(40, 32, 14, .2)); min-width: 12rem; }
  .site-nav ul.open { display: flex; }
  .site-nav li a { display: block; padding: .95em 0; }
  .site-nav a::after { display: none; }
  .brand img { width: 3.7rem; }
  .week-heads li { grid-template-columns: 1.9rem 1fr; }
  .week-heads .chip { grid-column: 2; justify-self: start; }
  .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clip { margin-left: 0; margin-right: 0; }
  .clip ul { columns: 1; }
  .prose .pull { margin-left: 0; margin-right: 0; }
  .byline span + span::before { margin-right: .6rem; }
  .byline { gap: .4rem .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cl { transform: translate(-50%, -50%) rotate(var(--r, 0deg)); }
}

@media print {
  body { background: #fff; font-size: 11pt; }
  .site-nav, .site-foot, .band-sub, .draft-ribbon, .hero-cta, .next, .prevnext, .skip { display: none !important; }
  .collage { max-width: 8cm; }
  .card, .q, .week-card, .issue-mast, .subscribe, .lens, .clip { filter: none; transform: none; }
  a { text-decoration: none; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font: 8pt var(--mono); overflow-wrap: anywhere; }
}