/* /take: one page of a zine made for this cause, in the app's own dress: its ground, light square panels without outlines,
   display heads, the blue as the one spot colour, yellow for markers. Dense, with room between sections rather than inside them. */
:root {
  /* the app's paper grain (from the record's own stylesheet) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .40 0 0 0 0 .40 0 0 0 .75 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .40 0 0 0 0 .40 0 0 0 .4 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html:has(body.take-page) { overflow: auto; height: auto; }
body.take-page { margin: 0; overflow: auto; height: auto; overscroll-behavior: auto; background: var(--grain), var(--ground); color: var(--ink); font: 15px/1.5 var(--sans); }
.zine { max-width: 1060px; margin: 0 auto; padding: 40px 24px 96px; }
.zine a { color: var(--blue); text-decoration: none; }
.zine a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* home masthead: the app's eyebrow */
.zine-mast { display: flex; gap: 18px; align-items: baseline; font: 700 11.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.zine-mast a { color: var(--blue); }
.zine-mast span:last-child { margin-left: auto; }

/* the header IS the question: "What if we… opened a grocery store on 63rd Street" in the head type, across the whole top,
   the question editable in place. Fixed; slims to one line once the page scrolls (a spacer keeps its full height). */
.ask { position: fixed; z-index: 10; top: 0; left: 0; right: 0; isolation: isolate; }
.ask::before { content: ""; position: absolute; inset: -8px -8px 0; z-index: -1; background: var(--grain-fine), var(--sheet); filter: url(#riso-edge); }
/* the strip across the very top: the Common Sense nav on the ground color (white is kept for the question box) */
.ask-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ground); color: var(--blue); padding: 7px max(24px, calc((100vw - 1060px) / 2 + 24px)); }
.ask-bar a { color: var(--blue); text-decoration: none; }
.ask-brand { font: 700 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.ask-map { font: 600 13px/1 var(--sans); }
.ask-map:hover { text-decoration: underline; text-underline-offset: 2px; }
.ask-field { position: relative; }
.ask-hint { position: absolute; inset: 0; color: #6b7075; pointer-events: none; opacity: 0; transition: opacity .5s ease; font: 900 clamp(38px, 6.4vw, 78px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.ask-hint.is-on { opacity: 1; }
.ask-hint[hidden] { display: none; }
.ask.is-small .ask-hint { font-size: 22px; line-height: 1.1; white-space: nowrap; overflow: hidden; }
.ask-in { position: relative; max-width: 1060px; margin: 0 auto; padding: 30px 24px 30px; box-sizing: border-box; transition: padding .2s ease; }
.ask-lead, .ask textarea { font: 900 clamp(38px, 6.4vw, 78px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.005em; transition: font-size .2s ease; }
.ask-h { margin: 0; font: inherit; text-transform: none; overflow-wrap: normal; }   /* the h1 around the lead word is only for the page's outline */
.ask-lead { display: block; color: var(--blue); white-space: nowrap; transition: font-size .2s ease; }
.ask textarea { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink);
                resize: none; overflow: hidden; outline: none; caret-color: var(--blue); }
.ask textarea::placeholder { color: #6b7075; opacity: 1; }
.ask-in:has(textarea:focus-visible) { outline: 3px solid var(--blue); outline-offset: -3px; }
.ask button { margin: 16px 0 0; font: 800 22px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; padding: 10px 18px 9px; border: 0; border-radius: 0; background: var(--blue); color: var(--onblue); cursor: pointer; white-space: nowrap; }
.ask button { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; }
.ask button .chev { width: 12px; height: 19px; overflow: visible; filter: url(#paint); }
.ask button .chev path { fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.ask.is-small button .chev { width: 9px; height: 14px; }
.ask button:hover:not(:disabled) .chev { transform: translateX(2px); }
.ask button:hover:not(:disabled) { filter: brightness(1.15); }
.ask button:disabled { background: var(--band); color: var(--muted); cursor: default; }
.ask.is-small .ask-in { padding: 10px 24px; display: flex; align-items: center; gap: 12px; }
.ask.is-small .ask-lead, .ask.is-small textarea { font-size: 22px; line-height: 1.1; }
.ask.is-small .ask-lead { position: absolute; top: 50%; left: 24px; transform: translateY(-50%); pointer-events: none; }
.ask.is-small .ask-field { flex: 1; min-width: 0; }
.ask.is-small textarea { white-space: nowrap; height: 1.1em !important; text-overflow: ellipsis; }
.ask.is-small button { margin: 0 0 0 auto; padding: 7px 12px 6px; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .ask-in, .ask-lead, .ask textarea { transition: none; } }
@media (max-width: 760px) {
  .ask-in { padding: 18px 16px 14px; }
  .ask.is-small .ask-lead { left: 16px; }
  .ask button { font-size: 18px; padding: 8px 14px 7px; margin-top: 12px; }
  .ask.is-small .ask-in { padding: 8px 16px; }
  .ask.is-small .ask-lead, .ask.is-small textarea, .ask.is-small .ask-hint { font-size: 18px; }
  .ask-bar { padding: 7px 16px; }
}

/* plans and promises: dated cards, two across */
.zine-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.zine-plan { display: flex; flex-direction: column; gap: 3px; background: transparent; position: relative; isolation: isolate; border: 0; padding: 16px 18px 18px; color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.zine a.zine-plan:hover { text-decoration: none; outline: 1.5px solid var(--blue); outline-offset: 0; }
.zine-plan-top { display: flex; gap: 6px; align-items: baseline; font-size: 12px; color: var(--muted); }
.zine-plan-top b { margin-left: auto; color: var(--ink); }
.zine-plan strong { font-size: 15px; line-height: 1.3; }
.zine-plan-ask { margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--blue); }
.zine-tier-more { margin: 10px 0 0; font-size: 13px; font-weight: 600; }
.zine-plan-quote { font-size: 12.5px; line-height: 1.45; color: var(--muted); font-style: italic; }
.zine-plan-at { font-size: 12px; color: var(--muted); }
.chip { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 0 5px; background: var(--band); color: var(--ink); }
.chip-open { background: var(--hi); }
.chip-done { background: var(--sky); color: var(--blue); }

/* cover */
.zine-cover { padding: 6px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.zine-kicker { font: 400 13px/1.4 var(--sans); margin: 0 0 10px; }
.zine-kicker { color: var(--muted); }
.zine-head { font: 900 clamp(44px, 7vw, 84px)/.88 var(--display); text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 18px; max-width: 13ch; }
.zine-wait { color: var(--muted); }
.zine-lede { font: 400 15.5px/1.5 var(--sans); max-width: 46em; margin: 0; }

/* section heads: the app's display type */
.zine-sec { margin-top: 72px; }
.zine-h { font: 800 30px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); margin: 0 0 16px; }
.sec-intro { margin: 0 0 22px; max-width: 46em; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.zine-note { font: 400 12px/1.5 var(--sans); color: var(--muted); margin: 8px 0 0; }
.zine-wait-line { font: 400 13px/1.4 var(--sans); color: var(--muted); }

/* steps: big numerals, square cards, three across */
.zine-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.zine-step { background: var(--sheet); border: 0; padding: 10px 12px 12px; }
.zine-step:first-child { background: var(--hi); }
.zine-n { display: block; font: 900 46px/.9 var(--display); color: var(--blue); margin-bottom: 6px; }
.zine-step strong { display: block; font-size: 16px; line-height: 1.25; margin-bottom: 4px; }
.zine-step p { margin: 0; font-size: 14px; line-height: 1.45; }
.zine-step .zine-links { margin-top: 6px; font: 400 12px/1.4 var(--sans); }

/* already here: a photo wall; the first picture big, the rest around it; photos printed in one ink until you point at them */
.zine-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 6px; }
.zine-thing { display: flex; flex-direction: column; background: var(--sheet); border: 0; color: var(--ink); }
.zine .zine-thing:hover { outline: 1.5px solid var(--blue); outline-offset: 0; }
.zine-thing.has-photo:first-child { grid-column: span 2; grid-row: span 2; }
.zine-photo { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--band); }
.zine-thing.has-photo:first-child .zine-photo { aspect-ratio: auto; flex: 1; min-height: 260px; }
.zine-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zine-here.has-map { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr); gap: 6px; align-items: start; }
.zine-here.has-map .zine-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zine-here-map { position: sticky; top: 12px; }
.zine-cap .zine-pin { display: inline-block; width: 18px; height: 18px; font-size: 10px; line-height: 15px; margin-right: 6px; vertical-align: 1px; }
.zine-cap strong a { color: var(--ink); }
.zine-onmap { display: inline-block; margin-top: 4px; font: 700 11px/1.3 var(--sans); }
.zine-cap { display: block; padding: 7px 9px 9px; font-size: 13px; line-height: 1.4; }
.zine-cap strong { display: block; font: 700 14px/1.3 var(--sans); margin-bottom: 2px; }

/* the app's paper: each panel's sheet sits behind it with a rough, printed edge */
.feed-item::before, .start li::before, .zine-plan::before, .zine-tier::before, .facts::before, .btl::before, .zine a.catalog-card::before, .zine-site::before, .soon-card::before, .zine-map::before, .take-examples a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain-fine), var(--sheet); filter: url(#riso-edge);
  box-shadow: 0 1px 2px rgba(22, 25, 27, .06), 0 8px 18px -14px rgba(22, 25, 27, .35); }
.zine-map::before { box-shadow: none; }

/* where to start: numbered first steps, each with the page that does it */
.start { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 46em; }
.start li { counter-increment: st; position: relative; isolation: isolate; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 4px; padding: 16px 18px 16px 12px; }
.start li::after { content: counter(st); grid-column: 1; grid-row: 1 / span 2; font: 800 34px/1 var(--display); color: var(--blue); }
.start li p { grid-column: 2; margin: 0 0 8px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.zine a.start-link { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 8px; font: 800 17px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--blue); }
.start-link .chev { width: 10px; height: 16px; overflow: visible; }
.start-link .chev path { fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }

/* already here: a feed — photo beside what it is */
.feed { display: grid; gap: 12px; }
.feed-item { display: grid; grid-template-columns: 144px minmax(0, 1fr); align-items: start; background: transparent; position: relative; isolation: isolate; min-height: 124px; }
.feed-thumb { display: block; position: relative; margin: 16px 0 16px 16px; min-height: 100px; overflow: hidden; background: var(--band); }
.feed-thumb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* no photo: a blue-tinted paper with a faint printed hatch, nothing written on it */
.feed-thumb.is-empty { pointer-events: none; background: repeating-linear-gradient(135deg, rgba(28, 53, 130, .13) 0 1.5px, transparent 1.5px 7px), var(--grain-fine), #dde6f7; }
.feed-body { padding: 18px 24px 20px 20px; }
.feed-body h3 { margin: 0 0 4px; font: 800 22px/1.05 var(--display); text-transform: uppercase; }
.feed-body h3 a { color: var(--ink); }
.feed-body p { margin: 0; font-size: 14.5px; line-height: 1.45; max-width: 46em; }
.feed-body .feed-meta { display: flex; gap: 14px; margin-top: 8px; font-size: 12.5px; }
.feed-meta a:last-child:not(:first-child), .feed-meta a[target] { color: var(--muted); }
@media (max-width: 760px) { .feed-item { grid-template-columns: 104px minmax(0, 1fr); min-height: 104px; } .feed-thumb { margin: 12px 0 12px 12px; min-height: 80px; } .feed-body { padding: 14px 16px 16px 14px; } .feed-body h3 { font-size: 18px; } }

/* lots: their own small map beside the numbered list */
.zine-lots { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.zine-lots.no-map { grid-template-columns: 1fr; }
.zine-map { border: 0; background: transparent; position: relative; isolation: isolate; }
.lotmap { display: block; width: 100%; height: auto; }
.lm-ground { fill: var(--sheet); }
.lm-block { fill: var(--band); stroke: none; }
.lm-street { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.lm-lot { fill: var(--blue); stroke: var(--blue); }
.lm-pin circle { fill: var(--hi); stroke: var(--blue); }
.lm-pin text { font-family: var(--mono); font-weight: 700; text-anchor: middle; fill: var(--ink); }
.lm-name { font-family: var(--mono); fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: var(--sheet); }
.zine-sites { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zine-site { display: flex; gap: 9px; align-items: flex-start; background: transparent; position: relative; isolation: isolate; border: 0; padding: 11px 14px; color: var(--ink); }
.zine a.zine-site:hover { text-decoration: none; outline: 1.5px solid var(--blue); outline-offset: 0; }
.zine-pin { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--hi); border: 1.5px solid var(--blue); color: var(--blue); font: 700 11px/19px var(--sans); text-align: center; }
.zine-site strong { display: block; font-size: 14px; line-height: 1.3; }
.zine-site em { display: block; font: 400 12px/1.4 var(--sans); font-style: normal; color: var(--muted); }

/* what the City has cited: a few figures, then one card per problem */
/* a few facts in one panel: small label over a plain value, hairlines between */
.facts { display: flex; flex-wrap: wrap; margin: 0 0 12px; background: transparent; position: relative; isolation: isolate; padding: 4px 0; }
.facts > div { flex: 1 1 160px; padding: 14px 20px; border-left: 1px solid var(--rule); }
.facts > div:first-child { border-left: 0; }
.facts dt { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
/* the building's timeline, newest first: date, a node on the rail, what happened that day */
.btl { list-style: none; margin: 0; padding: 22px 24px 12px; background: transparent; position: relative; isolation: isolate; }
.btl-year { font: 800 22px/1 var(--display); color: var(--blue); margin: 6px 0 8px; padding-left: 86px; }
.btl-year:first-child { margin-top: 0; }
.btl-day { display: grid; grid-template-columns: 70px 16px minmax(0, 1fr); column-gap: 10px; position: relative; padding-bottom: 18px; }
.btl-day::before { content: ""; position: absolute; left: 85px; top: 12px; bottom: -2px; width: 1.5px; background: var(--sky); }
.btl-day:last-child::before { display: none; }
.btl-date { font-size: 12.5px; color: var(--muted); text-align: right; padding-top: 2px; }
.btl-node { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--sheet); border: 1.5px solid var(--blue); position: relative; z-index: 1; }
.btl-events { display: grid; gap: 6px; }
.btl-ev p { margin: 0; font-size: 14.5px; line-height: 1.4; }
.btl-ev b { font-weight: 700; margin-right: 2px; }
.btl-call p { color: var(--muted); }
.btl-call b { color: var(--muted); }
/* the City's own wording: an info icon, its words in a popover on hover or tap */
.info { position: relative; display: inline-flex; vertical-align: -2px; margin-left: 4px; cursor: help; color: var(--blue); outline: none; }
.info svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.info-pop { position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: min(340px, 80vw);
            background: var(--ink); color: var(--paper); font-size: 12.5px; line-height: 1.45; padding: 8px 10px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
            opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; }
.info-pop b { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
.info-pop::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.info:hover .info-pop, .info:focus .info-pop { opacity: 1; visibility: visible; }
.info:focus-visible svg { outline: 2px solid var(--hi); outline-offset: 1px; border-radius: 50%; }
@media (max-width: 760px) { .btl-day { grid-template-columns: 52px 14px minmax(0, 1fr); } .btl-day::before { left: 65px; } .btl-year { padding-left: 66px; } }

/* who pays: one column per place, never added together */
.zine-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.zine-tier { background: transparent; position: relative; isolation: isolate; border: 0; padding: 18px 20px 20px; }
.zine-tier-name { font: 700 11px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.zine-tier-total { font: 900 40px/1 var(--display); margin: 4px 0 10px; }
.zine-tier-total a { color: var(--ink); }
.zine-funder { margin: 0 0 14px; font-size: 13px; line-height: 1.3; }
.zine-funder div { display: flex; justify-content: space-between; gap: 8px; }
.zine-funder div span { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zine-funder i { display: block; height: 4px; background: var(--blue); margin: 3px 0 2px; }
.zine-funder em { display: block; font: 400 12px/1.35 var(--sans); font-style: normal; color: var(--muted); }

/* coming soon: what each part will hold, as ghosted cards */
.soon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.soon-col { display: grid; gap: 12px; align-content: start; }
.soon-what { margin: 0 0 2px; font-size: 14px; color: var(--muted); }
.soon-what strong { color: var(--ink); margin-right: 4px; }
.soon-card { background: transparent; position: relative; isolation: isolate; padding: 12px 14px; display: grid; gap: 7px; }
.soon-case { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.soon-case > div { display: grid; gap: 7px; align-content: start; }
.soon-k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.soon dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; margin: 4px 0 0; align-items: center; }
.soon dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.soon dd { margin: 0; }
.sk { display: block; height: 9px; width: 60%; background: var(--band); }
.sk-t { height: 13px; }
.sk-s { height: 8px; opacity: .7; }
.sk-photo { width: 96px; height: 84px; }
.soon dd .sk { width: 70%; }
@media (max-width: 760px) { .soon { grid-template-columns: 1fr; } }

/* the catalog: every what-if, by neighborhood */
.ask-plain { position: static; }
.ask-plain .ask-lead { text-decoration: none; }
.ask-sub { margin: 6px 0 0; font-size: 17px; color: var(--muted); }
.ask-space-plain { display: none; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: start; }
.zine a.catalog-card { display: flex; flex-direction: column; background: transparent; position: relative; isolation: isolate; color: var(--ink); }
.zine a.catalog-card:hover { text-decoration: none; outline: 1.5px solid var(--blue); outline-offset: 0; }
.catalog-card .zine-photo { aspect-ratio: 16 / 9; }
.catalog-card .zine-photo.is-empty { display: flex; align-items: center; justify-content: center; background: var(--sky); }
.catalog-card .zine-photo.is-empty span { font: 800 40px/1 var(--display); color: var(--blue); opacity: .5; }
.catalog-q { display: block; padding: 10px 12px 4px; font: 800 22px/1.02 var(--display); text-transform: uppercase; }
.catalog-q em { font-style: normal; color: var(--blue); }
.catalog-lede { display: block; padding: 0 12px 12px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.zine-all { margin-top: 44px; font-weight: 600; }
@media (max-width: 760px) { .catalog-grid { grid-template-columns: 1fr; } }

/* what people are asking for: a cause is one block, its question cards beneath */
.zine-home .zine-sec { margin-top: 36px; }
.zine-cover { margin: 14px 0 0; }
.wondered { display: grid; gap: 10px; margin-top: 10px; }
.zine a.wonder { display: block; padding: 14px 18px 15px; color: var(--ink); position: relative; isolation: isolate; text-decoration: none; }
.zine a.wonder::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain-fine), var(--sheet); filter: url(#riso-edge); box-shadow: 0 1px 2px rgba(22, 25, 27, .06), 0 8px 18px -14px rgba(22, 25, 27, .35); }
.zine a.wonder:hover .wonder-q { color: var(--blue); }
.wonder-q { display: block; font: 800 20px/1.05 var(--display); text-transform: uppercase; }
.wonder-q em { font-style: normal; color: var(--blue); }
.wonder-area { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--blue); }
.wonder-lede, .wonder-gap { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.4; color: var(--muted); max-width: 52em; }
.wonder-gap { font-size: 12.5px; }
.ask-cause.is-bare { padding: 10px 0 8px; }
.ask-cause.is-bare .ask-sum { margin: 0; }

/* home */
.zine-home .zine-head { font-size: clamp(40px, 7vw, 80px); max-width: 16ch; margin-top: 26px; }
.take-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 18px; padding: 14px 16px; border: 0; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 10px 30px -12px rgba(28, 53, 130, .45); color: var(--ink); resize: vertical; }
.take-form button { margin-top: 10px; font: 600 14px/1 var(--sans); padding: 12px 20px; border: 0; border-radius: 999px; background: var(--blue); color: var(--onblue); cursor: pointer; }
.take-examples { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.take-choice { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 0; padding: 8px 12px; font: 600 inherit/1.4 var(--sans); color: var(--ink); cursor: pointer; }
.take-choice:hover { color: var(--blue); }
.take-notice { margin: 0 0 24px; padding: 12px 16px; border-left: 4px solid var(--blue); background: var(--sky); font-size: 15.5px; line-height: 1.5; color: var(--ink); max-width: 46em; }
.zine-scope { margin: 14px 0 8px; max-width: 46em; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.zine-fail p { margin: 0 0 14px; font-size: 15.5px; color: var(--ink); }
.take-retry { display: inline-flex; align-items: center; gap: 9px; font: 800 20px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; padding: 9px 16px 8px; border: 0; border-radius: 0; background: var(--blue); color: var(--onblue); cursor: pointer; }
.take-retry .chev { width: 12px; height: 19px; overflow: visible; }
.take-retry .chev path { fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.take-examples a { display: block; background: transparent; position: relative; isolation: isolate; border: 0; padding: 8px 12px; font-weight: 600; color: var(--ink); }

@media (max-width: 760px) {
  .zine { padding: 30px 16px 72px; }
  .zine-sec { margin-top: 44px; }
  .zine-steps, .zine-lots, .zine-plans, .zine-here.has-map { grid-template-columns: 1fr; }
  .zine-wall, .zine-here.has-map .zine-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zine-mast span:not(:last-child) { display: none; }
}

/* a rubber stamp across the ghosted cards: inked blue, slanted, a little uneven */
.soon { position: relative; }
.soon-stamp { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-15deg); padding: 12px 32px 8px; border: 7px solid #6f6b64; border-radius: 6px; font: 900 clamp(54px, 12vw, 132px)/1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: #6f6b64; opacity: .8; filter: url(#paint); mix-blend-mode: multiply; pointer-events: none; }
@media (max-width: 760px) { .soon-stamp { top: 40%; } }

/* the landing's causes: the cause is plain body text with its counts beside it, the question card is the only title; places and repeats are tags */
.zine .ask-cause h3 { margin: 0 0 2px; font: 700 16px/1.35 var(--sans); text-transform: none; letter-spacing: 0; }
.zine .ask-cause h3 .ask-sum { font-weight: 400; font-size: 13.5px; color: var(--muted); margin-left: 6px; }
.wonder-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 3px; border: 1px solid var(--rule); background: var(--ground); font: 600 12px/1.1 var(--sans); color: var(--muted); }
/* what the grant was for, in the funder's own words from its filing */
.zine-funder .zine-funder-why { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ink); quotes: "\201C" "\201D"; }

/* a place on a question: a soft pill, the same rounded shape as the neighborhood pills on the home card */
.tag { border: 0; border-radius: 999px; padding: 4px 10px; background: rgba(22, 25, 27, .06); }
.tag.place { background: rgba(28, 53, 130, .09); color: var(--blue); }

/* the band at the foot of every Imagine page, linking the product */
.product-band { background: var(--blue); color: var(--onblue); margin-top: 72px; padding: 44px max(24px, calc((100vw - 1060px) / 2 + 24px)) 52px; }
.product-band-in { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k k" "t go"; gap: 10px 40px; align-items: end; }
.product-band-kicker { grid-area: k; margin: 0; font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #bcd3ff; }
.product-band-text { grid-area: t; margin: 0; max-width: 34em; font-size: 19px; line-height: 1.45; }
.product-band-go { grid-area: go; display: inline-block; background: #ffd23f; color: var(--ink) !important; font: 700 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 14px 20px; text-decoration: none; white-space: nowrap; }
.product-band-go:hover { background: #ffe066; }
@media (max-width: 760px) {
  .product-band { margin-top: 48px; padding: 32px 16px 40px; }
  .product-band-in { grid-template-columns: 1fr; grid-template-areas: "k" "t" "go"; gap: 14px; }
  .product-band-text { font-size: 17px; }
  .product-band-go { justify-self: start; }
}