@font-face{font-family:"League Gothic";src:url(/fonts/league-gothic.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(/fonts/libre-franklin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(/fonts/libre-franklin-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Marcellus";src:url(/fonts/marcellus.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Holtwood One SC";src:url(/fonts/holtwood-one-sc.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Overpass";src:url(/fonts/overpass.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(/fonts/courier-prime-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Sorts Mill Goudy";src:url(/fonts/sorts-mill-goudy.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sorts Mill Goudy";src:url(/fonts/sorts-mill-goudy-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
/* St. Clement's Church & Theater: the site's one stylesheet.
   The brand is the source: brand/guidelines in the church folder.
   Frame: Paper, Ink and Harbor; League Gothic for titles, Libre Franklin for
   everything else; Door red for the one thing to do. Photos in true color.
   The plan is website/plan.md in the church folder. */

:root{
  --door:#C2152F; --door-lit:#9C111F; --rubric:#86101F; --night:#4F0910;
  --mist:#EDF5F9; --w100:#D9E9F0; --spray:#BDD6E0; --slate:#74A0B2;
  --channel:#32728A; --w700:#165F77; --hudson:#004D63; --harbor:#002B3A; --ink:#05161F;
  --paper:#F9F5EC; --paper2:#EEE7DB;
  --green:#006747; --green-deep:#004F36; --sage:#AAC39C;
  /* one size for every section heading; page openings and a few set pieces
     (Rope, Saved by grace, 1963, 3,000, Church, theater, pantry) keep their own */
  --h2:clamp(64px,min(6.2vw,12svh),104px);
  --title:"League Gothic","Arial Narrow",Impact,sans-serif;
  --text:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --band:clamp(64px,min(7vw,10svh),112px);
  --max:1440px;
  --edge:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px;scroll-behavior:smooth}
@media (max-width:820px){html{scroll-padding-top:68px}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (max-width:640px){body{font-size:17px}}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{text-decoration-color:var(--door)}
:focus-visible{outline:3px solid var(--door);outline-offset:3px}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:inherit}
ul,ol{margin:0;padding:0;list-style:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--door);color:var(--paper);padding:10px 16px;font-weight:600}
.skip:focus{top:12px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.band{padding:var(--band) 0;position:relative}
.band.tight{padding:calc(var(--band)*.66) 0}
.on-paper{background:var(--paper);color:var(--ink)}
.on-paper2{background:var(--paper2);color:var(--ink)}
.on-mist{background:var(--mist);color:var(--ink)}
.on-harbor{background:var(--harbor);color:var(--paper)}
.on-hudson{background:var(--hudson);color:var(--paper)}
.on-ink{background:var(--ink);color:var(--paper)}
.on-night{background:var(--night);color:var(--paper)}
.on-door{background:var(--door);color:var(--paper)}
.on-green{background:var(--green);color:var(--paper)}
/* the one texture: fine grain on color fields, never on photos, faint */
.grain{isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:url(/grain.svg);opacity:.07;mix-blend-mode:multiply}
.on-harbor.grain::after,.on-ink.grain::after,.on-night.grain::after,.on-green.grain::after,.on-hudson.grain::after,.on-door.grain::after{mix-blend-mode:screen;opacity:.06}

/* ---------- type ---------- */
.t{font-family:var(--title);font-weight:400;text-transform:uppercase;line-height:.88;letter-spacing:.004em;font-variation-settings:"wdth" 100;text-wrap:balance}
.t-xxl{font-size:clamp(84px,min(8.5vw,15svh),128px)}
.t-xl{font-size:clamp(64px,min(7.6vw,14svh),120px)}
.t-l{font-size:clamp(52px,min(5.6vw,11svh),88px)}
.t-m{font-size:clamp(40px,4.8vw,72px)}
.t-s{font-size:clamp(30px,2.8vw,40px);line-height:.92}
.t .red,.red{color:var(--door)}
.on-harbor .t .red,.on-ink .t .red,.on-night .t .red{color:var(--paper)}
.label{font:600 13px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px}
.label .sep{margin:0 .5em;opacity:.55}
.lede{font-size:clamp(20px,1.7vw,25px);line-height:1.42;max-width:34em}
.small{font-size:15px;line-height:1.5}
.muted{opacity:.72}
.measure{max-width:36em}
.num{font-family:var(--title);line-height:.84;font-weight:400}
/* direction voices: one per page at most */
.v-chapel{font-family:"Marcellus",Georgia,serif;text-transform:uppercase;letter-spacing:.03em;line-height:.98;font-weight:400}
.v-bill{font-family:"Holtwood One SC",Georgia,serif;text-transform:uppercase;line-height:.92;font-weight:400;letter-spacing:-.005em}
.v-street{font-family:"Overpass",var(--text);font-weight:700;letter-spacing:-.01em;line-height:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;min-height:52px;padding:14px 26px;border:2px solid var(--door);background:var(--door);color:var(--paper);font:600 15px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;border-radius:0;transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--door-lit);border-color:var(--door-lit);color:var(--paper)}
.btn.line{background:transparent;border-color:currentColor;color:inherit}
.btn.line:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.on-paper .btn.line:hover,.on-mist .btn.line:hover,.on-paper2 .btn.line:hover{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.on-harbor .btn.line:hover,.on-ink .btn.line:hover,.on-night .btn.line:hover,.on-green .btn.line:hover,.hero .btn.line:hover{color:var(--ink);background:var(--paper);border-color:var(--paper)}
.on-door .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.on-door .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.more{font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--paper);color:var(--ink);transition:background .25s,color .25s,box-shadow .25s}
.top .wrap{display:flex;align-items:center;gap:28px;height:76px}
.top .home{display:block;flex:none;line-height:0;padding:3px 0}
.top .home img{height:44px;width:auto}
.top .home .lk-light{display:none}
.top nav{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2vw,30px)}
.top nav a{white-space:nowrap;font:600 14px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.top nav a:hover,.top nav a[aria-current=page]{border-bottom-color:var(--door)}
.top nav .btn{padding:12px 20px;min-height:44px;border-bottom-width:2px}
.top .menu-btn{display:none;margin-left:auto;background:none;border:0;color:inherit;font:600 14px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;padding:15px 4px;cursor:pointer}
body.over .top{position:fixed;left:0;right:0;background:transparent;color:var(--paper)}
body.over .top .lk-dark{display:none}
body.over .top .lk-light{display:block}
body.over.scrolled .top{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 rgba(5,22,31,.08)}
body.over.scrolled .top .lk-dark{display:block}
body.over.scrolled .top .lk-light{display:none}
.top.solid-line{box-shadow:0 1px 0 rgba(5,22,31,.08)}
.pmenu{position:fixed;inset:76px 0 0 0;z-index:49;background:var(--ink);color:var(--paper);padding:28px var(--gutter) 28px;overflow:auto;display:flex;flex-direction:column;align-items:flex-start}
.pmenu[hidden]{display:none}
/* the page links are big; the rules below are scoped so they don't reach Give, the address or the icons */
.pmenu>a:not(.btn){display:block;font-family:var(--title);text-transform:uppercase;font-size:56px;line-height:1.02;text-decoration:none;padding:4px 0}
.pmenu>a[aria-current=page]{color:var(--spray)}
.pmenu .btn{margin-top:24px;flex:none}
/* Sundays at 11, the address to Maps, the icons: at the foot of the panel */
.pmenu .pm-visit{margin-top:auto;padding-top:32px;font-size:18px;line-height:1.5}
.pmenu .pm-visit p{margin:0;color:rgba(249,245,236,.8)}
.pmenu .pm-addr{display:inline-block;color:var(--paper);text-underline-offset:4px;padding:6px 0 10px}
.pmenu .social{margin-left:-10px}
@media (max-width:820px){:root{--h2:clamp(56px,18.5vw,76px)}}
@media (max-width:900px){
  .top nav{display:none}
  .top .menu-btn{display:block}
  .top .wrap{height:68px}
  .top .home img{height:38px}
  .pmenu{inset:68px 0 0 0}
}
body.menu-open .top{background:var(--ink)!important;color:var(--paper)!important}
body.menu-open .top .lk-dark{display:none!important}
body.menu-open .top .lk-light{display:block!important}
body.menu-open{overflow:hidden}

/* ---------- hero: a full-bleed photo, words where the photo is empty ---------- */
.hero{position:relative;min-height:min(100svh,980px);display:flex;align-items:flex-end;color:var(--paper);background:var(--ink);overflow:hidden}
.hero .ph{position:absolute;inset:0}
.hero .ph img{width:100%;height:100%;object-fit:cover;animation:push 28s ease-out both}
.hero .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,22,31,.4) 0,rgba(5,22,31,0) 20%,rgba(5,22,31,0) 40%,rgba(5,22,31,.8) 100%),linear-gradient(90deg,rgba(5,22,31,.55) 0,rgba(5,22,31,.18) 45%,rgba(5,22,31,0) 65%)}
.hero .wrap{position:relative;padding-top:140px;padding-bottom:clamp(40px,6vw,84px)}
.hero h1{margin:0 0 22px}
.hero .lede{margin:0;max-width:30em;color:rgba(249,245,236,.92)}
.hero .btns .btn.line{color:var(--paper)}
.hero.short{min-height:min(82svh,820px)}
@keyframes push{from{transform:scale(1.08)}to{transform:scale(1)}}

/* a title-led opening on a field (no photo) */
.opening{padding:calc(var(--band)*.8) 0 var(--band);position:relative}
.opening h1{margin:0 0 28px}

/* ---------- the welcome: four lines, four photos ---------- */
.welcome .intro{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:clamp(48px,7vw,104px)}
.welcome .intro p{grid-column:1 / span 7;font-size:clamp(22px,2.1vw,30px);line-height:1.38;margin:0}
.welcome .intro p+p{grid-column:8 / span 5;align-self:end;font-size:18px;line-height:1.55}
.place{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-top:clamp(28px,4vw,56px)}
.place h2{grid-column:1 / span 8}
.place figure{grid-column:9 / span 4;margin:0}
.place:nth-of-type(even) h2{grid-column:5 / span 8;grid-row:1;text-align:right}
.place:nth-of-type(even) figure{grid-column:1 / span 4;grid-row:1}
.place figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.place:last-of-type figure img{aspect-ratio:3/2}
@media (max-width:820px){
  .welcome .intro p,.welcome .intro p+p{grid-column:1 / -1}
  .place h2,.place:nth-of-type(even) h2{grid-column:1 / -1;grid-row:auto;text-align:left}
  .place figure,.place:nth-of-type(even) figure{grid-column:1 / span 9;grid-row:auto}
  .place:nth-of-type(even) figure{grid-column:4 / -1}
}

/* ---------- now: the current campaign art ---------- */
.now .head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.now .rail{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.now .card{display:block;text-decoration:none;color:inherit}
.now .card .art{overflow:hidden;background:var(--paper2)}
.now .card img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.now .card:hover img{transform:scale(1.035)}
.now .card .when{margin:18px 0 8px}
.now .card h3{margin:0 0 6px}
.now .card p{margin:0;font-size:16px;opacity:.8}
@media (max-width:900px){
  .now .rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin-right:calc(var(--gutter)*-1);padding-right:var(--gutter)}
  .now .card{scroll-snap-align:start}
}

/* ---------- signposts: one flat color, one true number ---------- */
.doors .head{margin-bottom:44px}
.signs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px)}
.sign{position:relative;overflow:hidden;min-height:clamp(460px,44vw,620px);padding:clamp(24px,2.4vw,36px);display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;color:var(--paper);isolation:isolate}
.sign .ghost{position:absolute;z-index:-1;left:-.04em;top:-.06em;font-family:var(--title);font-size:clamp(220px,23vw,360px);line-height:.8;letter-spacing:-.01em;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sign:hover .ghost{transform:translateY(-14px)}
.sign.church{background:var(--harbor)}.sign.church .ghost{color:var(--hudson)}
.sign.theater{background:var(--night)}.sign.theater .ghost{color:var(--rubric)}
.sign.pantry{background:var(--green)}.sign.pantry .ghost{color:var(--green-deep)}
.sign h3{margin:0 0 14px}
.sign p{margin:0 0 22px;font-size:16px;line-height:1.5;max-width:24em;opacity:.9}
.sign .more{font-size:14px}
@media (max-width:900px){.signs{grid-template-columns:1fr}.sign{min-height:400px}.sign .ghost{font-size:300px}}

/* ---------- Sunday, start to finish: steps beside one changing photo ---------- */
.steps-wrap{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,5vw,96px);align-items:start}
.steps-photo{position:sticky;top:108px;margin:0}
.steps-photo .frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper2)}
.steps-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.steps-photo img.on{opacity:1}
.steps-photo figcaption{margin-top:12px;font-size:14px;opacity:.7;min-height:1.5em}
.steps li{display:grid;grid-template-columns:clamp(96px,10vw,150px) 1fr;gap:20px;padding:30px 0;border-top:1px solid rgba(5,22,31,.16)}
.steps li:last-child{border-bottom:1px solid rgba(5,22,31,.16)}
.steps .when{font-family:var(--title);font-size:clamp(34px,3.4vw,52px);line-height:.9;text-transform:uppercase;color:var(--door)}
.steps h3{font-family:var(--title);font-size:clamp(34px,3.2vw,48px);line-height:.92;text-transform:uppercase;margin:0 0 10px}
.steps p{margin:0;max-width:30em}
.steps .inline{display:none}
@media (max-width:900px){
  .steps-wrap{grid-template-columns:1fr}
  .steps-photo{display:none}
  .steps .inline{display:block;grid-column:1 / -1;margin:0 0 6px}
  .steps .inline img{width:100%;aspect-ratio:3/2;object-fit:cover}
  .steps li{grid-template-columns:1fr;gap:10px}
}

/* ---------- questions ---------- */
.qa{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,64px) clamp(28px,5vw,96px)}
.qa h3{font-family:var(--title);text-transform:uppercase;font-size:clamp(34px,3vw,46px);line-height:.92;margin:0 0 12px}
.qa p{margin:0;max-width:30em}
@media (max-width:760px){.qa{grid-template-columns:1fr}}


/* ---------- people ---------- */
.company .head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.cast{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.cast figure{margin:0}
.cast img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1)}
.cast figcaption{margin-top:14px}
.cast .name{font-family:var(--title);text-transform:uppercase;font-size:clamp(28px,2.4vw,36px);line-height:.92;display:block}
.cast .role{display:block;font-size:15px;margin-top:6px;opacity:.75}
@media (max-width:900px){.cast{grid-template-columns:repeat(2,1fr)}}

/* ---------- numbers ---------- */
.numbers{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:24px}
.numbers div{border-top:2px solid currentColor;padding-top:18px}
.numbers b{display:block;font-family:var(--title);font-weight:400;font-size:clamp(72px,9vw,144px);line-height:.84}
.numbers span{display:block;margin-top:10px;font-size:15px;line-height:1.45;max-width:20em;opacity:.82}
@media (max-width:760px){.numbers{grid-template-columns:repeat(2,1fr)}}

/* ---------- facts list (definition rows) ---------- */
.rows{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,5vw,80px)}
.rows div{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:22px 0;border-top:1px solid currentColor}
.rows dt{font:600 13px/1.5 var(--text);letter-spacing:.14em;text-transform:uppercase}
.rows dd{margin:0;font-size:16px;line-height:1.5}
.rows{margin:0}
@media (max-width:820px){.rows{grid-template-columns:1fr}.rows div{grid-template-columns:1fr;gap:6px}}

/* ---------- split: words and a picture ---------- */
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.split > .words{grid-column:1 / span 6}
.split > figure{grid-column:8 / span 5;margin:0}
.split.flip > .words{grid-column:7 / span 6;grid-row:1}
.split.flip > figure{grid-column:1 / span 5;grid-row:1}
.split > .words.right{grid-column:8 / span 5}
.split > .words.half{grid-column:7 / span 6}
.split figure img{width:100%;object-fit:cover}
.split.wide > figure{grid-column:7 / span 6}
.split.wide.flip > figure{grid-column:1 / span 6}
@media (max-width:900px){.split > .words.right,.split > .words.half,.split > .words,.split > figure,.split.flip > .words,.split.flip > figure,.split.wide > figure,.split.wide.flip > figure{grid-column:1 / -1;grid-row:auto}}
.credit{font-size:13px;opacity:.65;margin-top:10px}

/* ---------- forms ---------- */
/* one set of parts for the contact, theater and pantry forms: solid boxes, chips
   for every choice. Each form sets its colors with the --f- variables and keeps
   its own grid. */
.form{--f-field:var(--paper);--f-edge:transparent;--f-chip:currentColor;--f-on:var(--ink);--f-on-ink:var(--paper);--f-focus:var(--hudson);--f-check:var(--door)}
.form > label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{width:100%;height:46px;border:0;border-radius:0;padding:0 14px;background:var(--f-field);box-shadow:inset 0 0 0 1px var(--f-edge);color:var(--ink);font:400 17px/1.4 var(--text)}
.form textarea{padding:12px 14px;resize:vertical}
.form input:focus-visible,.form textarea:focus-visible{outline:3px solid var(--f-focus);outline-offset:2px}
.form fieldset{margin:0;padding:0;border:0;min-width:0}
.form legend{padding:0;margin:0 0 8px;font-size:14px;font-weight:600}
.form .chips{display:flex;flex-wrap:wrap;gap:8px}
.form .chip{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:2px solid var(--f-chip);color:var(--f-chip);font-size:15px;line-height:1.2;cursor:pointer}
.form .chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.form .chip:has(input:checked){background:var(--f-on);border-color:var(--f-on);color:var(--f-on-ink)}
.form .chip:has(input:focus-visible){outline:3px solid var(--f-focus);outline-offset:2px}
.form .check{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;cursor:pointer}
.form .check input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--f-check)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* ---------- footer ---------- */
/* the footer: only the playbill sign-up on Ink, one block centered on the page,
   the heading and its line left-aligned on the email box. The address, phone,
   email and social icons live in the phone menu and on Contact (Stephen,
   October 30) */
.foot{background:var(--ink);color:var(--paper);padding:48px 0 56px;margin-top:-1px}
.foot .news{display:flex;flex-direction:column;gap:4px;max-width:440px;margin:0 auto}
.foot .news h2{font-size:32px;line-height:1;margin:0;text-wrap:balance}
.foot .news .pitch{margin:0;font-size:16px;line-height:1.4;color:rgba(249,245,236,.78)}
.foot .news .row{display:flex;width:100%;margin-top:14px}
.foot .news input{flex:1;min-width:0;height:44px;font:400 16px/1 var(--text);color:var(--paper);background:transparent;border:1px solid rgba(249,245,236,.55);border-right:0;padding:0 14px;border-radius:0;outline:none}
.foot .news input::placeholder{color:rgba(249,245,236,.6)}
/* one clean box on focus, not the site's red ring on top of the border */
.foot .news input:focus-visible{border-color:var(--paper);box-shadow:inset 0 0 0 1px var(--paper)}
/* Chrome's autofill paints the field pale blue; keep it on Ink */
.foot .news input:-webkit-autofill{-webkit-text-fill-color:var(--paper);caret-color:var(--paper);box-shadow:inset 0 0 0 100px var(--ink);transition:background-color 9999s}
.foot .news input:-webkit-autofill:focus-visible{box-shadow:inset 0 0 0 1px var(--paper),inset 0 0 0 100px var(--ink)}
.foot .news .btn{min-height:44px;height:44px;padding:0 22px;border:0;white-space:nowrap}
.foot .news-ok,.foot .news-err{margin:0;font-size:15px;font-weight:600;color:var(--paper)}
@media (max-width:820px){.foot{padding:40px 0 48px}}

/* Instagram and Facebook, kept quiet: 24px marks in 44px targets */
.social{display:flex;gap:4px;margin:0}
.social a{display:grid;place-items:center;width:44px;height:44px;color:inherit}
.social a:hover{color:var(--spray)}
.social svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.social svg .fill{fill:currentColor;stroke:none}

/* ---------- motion: titles and pictures arrive once ---------- */
.rise{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
.no-js .rise{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .hero .ph img{animation:none}
  .now .card img,.sign .ghost,.steps-photo img{transition:none}
}


/* ---------- page: Give ---------- */

/* ---------- page: Home (designed section by section, October 29, 2026; design/home/) ---------- */
br.d{display:inline}br.m{display:none}
@media (max-width:820px){br.d{display:none}br.m{display:inline}}
.btn.paper{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn.paper:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
body.over:not(.scrolled) .top nav .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* 1 · the opening: the anchor, pressed into Door red */
.art-open{position:relative;min-height:min(calc(100svh - 76px),980px);display:flex;align-items:stretch;background:var(--door);color:var(--paper);overflow:hidden}
.art-open .press{position:absolute;inset:0;filter:url(#press)}
.art-open .anchor-big{position:absolute;width:min(104vw,1500px);aspect-ratio:1;left:max(20vw,calc(100% - 1150px));top:-17%;background:var(--door-lit);-webkit-mask:url(/assets/marks/mark-navy.svg) 0 0/100% 100% no-repeat;mask:url(/assets/marks/mark-navy.svg) 0 0/100% 100% no-repeat}
.art-open .wrap{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding-top:clamp(40px,8svh,96px);padding-bottom:clamp(40px,6vw,84px)}
.art-open .invite{margin:0;font:italic 400 clamp(56px,min(6.6vw,11.5svh),112px)/1.04 "Sorts Mill Goudy",Georgia,serif;font-variant-numeric:lining-nums}
.art-open .invite .nw{white-space:nowrap}
.art-open .name{margin:0 0 12px;font-size:clamp(64px,min(6.2vw,12svh),104px);line-height:.86}
.art-open .lede{margin:0;font-size:clamp(18px,1.7vw,24px);line-height:1.42;max-width:none}
@media (max-width:820px){.art-open .invite{font-size:clamp(40px,11vw,56px)}.art-open .name{font-size:72px}.art-open .anchor-big{width:230vw;left:-34vw;top:0}}

/* 1 · the opening: one photo held still, "You have a place here." and two buttons */
.hero-open{position:relative;height:min(100svh,1000px);min-height:600px;display:flex;align-items:flex-end;background:var(--ink);color:var(--paper);overflow:hidden}
.hero-open .ph{position:absolute;inset:0;margin:0}
.hero-open .ph img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;filter:saturate(.85) sepia(.14) contrast(1.04)}
.hero-open .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,22,31,.7) 0,rgba(5,22,31,.38) 50%,rgba(5,22,31,.06) 100%),linear-gradient(180deg,rgba(5,22,31,.4) 0,rgba(5,22,31,0) 26%,rgba(5,22,31,0) 60%,rgba(5,22,31,.5) 100%)}
.hero-open .wrap{position:relative;padding-top:120px;padding-bottom:clamp(56px,10svh,120px)}
.hero-open h1{margin:0;font-size:clamp(96px,min(12vw,22svh),200px);line-height:.86}
.hero-open .btns{margin-top:clamp(28px,5svh,48px);gap:14px}
.hero-open .btn{font-size:16px;padding:18px 34px}
.hero-open .btn.line{color:var(--paper)}

/* 2 · a place to be: its photo as a light blur behind; "A place to" holds still; each word rises in with its photo, round and round */
/* the arch and the door print behind it are sized and centered as one piece, from the arch's top to the door's foot
   (1.635 arch widths), with at least 60px clear above and below so the red door never meets the red section after */
.place-stage{--sh:max(560px,min(calc(100svh - 76px),940px));--aw:clamp(220px,min(34.7vw,calc((var(--sh) - 120px)/1.635)),500px);--big:clamp(84px,min(11.1vw,19svh),160px);position:relative;height:min(calc(100svh - 76px),940px);min-height:560px;overflow:hidden;background:var(--paper);color:var(--ink)}
.place-stage .ps-bg img{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);max-width:none;object-fit:cover;object-position:50% 40%;opacity:0;transition:opacity 1.2s ease;filter:saturate(.7) sepia(.1) brightness(1.08) blur(12px)}
.place-stage .ps-bg img.on{opacity:1}
.place-stage .ps-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(249,245,236,.9) 0,rgba(249,245,236,.72) 50%,rgba(249,245,236,.55) 100%)}
.place-stage .ps-door,.place-stage .ps-arch{position:absolute;width:var(--aw);aspect-ratio:500/760}
.place-stage .ps-door{right:calc(clamp(40px,10.6vw,152px) - var(--aw)*.112);top:calc((100% - var(--aw)*1.635)/2 + var(--aw)*.115);height:auto;object-fit:contain;max-width:none}
.place-stage .ps-arch{right:clamp(40px,10.6vw,152px);top:calc((100% - var(--aw)*1.635)/2);overflow:hidden;background:var(--ink);border-radius:50% 50% 0 0/18.8% 18.8% 0 0}
.place-stage .ps-arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease-in-out;filter:saturate(.85) sepia(.14) contrast(1.04)}
.place-stage .ps-arch img.on{opacity:1}
.place-stage .ps-big{position:absolute;left:var(--edge);bottom:clamp(56px,min(7.6vw,10svh),110px);margin:0;width:min(720px,55vw);font-size:var(--big);line-height:.86}
.place-stage .ps-big .l2{color:var(--door);display:inline-grid}
.place-stage .ps-big .l2 .w{grid-area:1/1;transition:transform 1s cubic-bezier(.45,0,.25,1),opacity 1s ease}
.place-stage .ps-big .l2 .w.in{transform:translateY(.45em);opacity:0}
.place-stage .ps-big .l2 .w.out{transform:translateY(-.22em);opacity:0;transition:transform .6s cubic-bezier(.45,0,.25,1),opacity .4s ease}
.place-stage>.grain{position:absolute;inset:0;background:#fff;mix-blend-mode:multiply;opacity:.5;pointer-events:none}
@media (max-width:820px){
  .hero-open h1{font-size:clamp(76px,23vw,108px)}
  .hero-open .wrap{padding-bottom:40px}
  .hero-open .btns{flex-wrap:nowrap;gap:10px}
  .hero-open .btn{flex:1 1 0;justify-content:center;white-space:nowrap;padding:17px 8px;font-size:13px;letter-spacing:.08em}
  .place-stage .ps-bg img{inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px)}
  .place-stage .ps-shade{background:linear-gradient(180deg,rgba(249,245,236,.6) 0,rgba(249,245,236,.72) 50%,rgba(249,245,236,.9) 100%)}
  .place-stage{--paw:min(69vw,calc((100svh - 68px - 300px)/1.48));height:calc(100svh - 68px);min-height:540px}
  /* the photo and the door print behind it are centered as one piece; the print sits 6vw right of the photo.
     Their left edge follows --paw, which shrinks with the screen's height, so they stay centered on short screens */
  .place-stage .ps-door{width:var(--paw);right:auto;left:calc((100% - var(--paw) - 6vw)/2 + 6vw);top:62px}
  .place-stage .ps-arch{width:var(--paw);right:auto;left:calc((100% - var(--paw) - 6vw)/2);top:40px;aspect-ratio:270/400;border-radius:50% 50% 0 0/19% 19% 0 0}
  .place-stage{--big:84px}
  .place-stage .ps-big{width:auto;right:var(--gutter);bottom:48px}
}
/* under 360px the two opening buttons don't fit side by side; stack them */
@media (max-width:359px){.hero-open .btns{flex-direction:column}.hero-open .btn{flex:none;width:100%}}

/* 3 · what Sunday's like: eight cards, each its own color */
.sunday{position:relative;background:var(--paper);padding:clamp(64px,min(7.6vw,8svh),110px) 0;overflow:hidden}
.sunday h2{font-size:var(--h2);line-height:.86;margin:0 0 clamp(28px,5svh,48px)}
.sunday .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.card{position:relative;height:470px;overflow:hidden;padding:28px;display:flex;flex-direction:column;background:var(--bg)}
.card .print{position:absolute;left:-40px;top:-30px;width:420px;max-width:none;opacity:.9}
.card .pp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.3) brightness(1.08);opacity:.92}
.card .pgrain{position:absolute;inset:0;filter:url(#grain-photo);background:#fff;mix-blend-mode:overlay;opacity:.85;pointer-events:none}
.card .fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--to),0) 30%,rgba(var(--to),.92) 74%)}
.card .cue{position:relative;z-index:1;align-self:flex-start;margin:0;padding:6px 10px 5px;background:var(--bg);font:700 16px/1.2 "Courier Prime","Courier New",monospace}
.card .ttl{position:relative;margin:auto 0 10px;font:400 50px/.9 var(--title);text-transform:uppercase}
.card .ttl.big{font-size:76px}
.card .bd{position:relative;margin:0;font-size:16px;line-height:1.5;text-wrap:pretty}
.card .btn{position:relative;align-self:flex-start}
@media (max-width:1100px){.sunday .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .sunday h2{font-size:var(--h2);margin-bottom:28px}
  .sunday .wrap{padding:0}.sunday h2{padding:0 var(--gutter)}
  .sunday .cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 4px;scrollbar-width:none}
  .sunday .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 300px;scroll-snap-align:start}
}
.sunday>.grain,.grace-page>.grain{position:absolute;inset:0;background:#fff;mix-blend-mode:multiply;pointer-events:none}

/* 4 · one house, three doors: bands on paper, one open at a time */
.three-doors{--pad:clamp(48px,min(7.6vw,7svh),110px);--h:var(--h2);--gap:clamp(20px,3.5svh,44px);--strip:clamp(56px,9svh,128px);background:var(--paper);padding:var(--pad) 0}
.three-doors h2{font-size:var(--h);line-height:.86;margin:0 0 var(--gap)}
.bands{display:flex;flex-direction:column;gap:12px}
.band-door{position:relative}
.band-door .strip{position:relative;display:flex;align-items:center;width:100%;height:var(--strip);padding:0 36px;border:0;background:var(--ink);color:var(--paper);overflow:hidden;cursor:pointer;text-align:left}
.band-door .strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band-door .strip::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,22,31,.9) 0,rgba(5,22,31,.72) 30%,rgba(5,22,31,.3) 62%,rgba(5,22,31,.6) 100%)}
.band-door .strip span{position:relative;z-index:1;font:400 clamp(48px,7svh,88px)/1 var(--title);text-transform:uppercase}
/* under the menu: heading, the open door, and the two closed strips with their gaps */
.band-door .body{display:none;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;height:clamp(300px,calc(100svh - 76px - 2*var(--pad) - var(--h)*.86 - var(--gap) - 24px - 2*var(--strip)),600px)}
.band-door.open .strip{display:none}
.band-door.open .body{display:grid}
.band-door .ph{grid-column:1 / span 7;overflow:hidden}
.band-door .ph img{width:100%;height:100%;object-fit:cover}
.band-door .words{grid-column:8 / span 5;display:flex;flex-direction:column;justify-content:flex-end;padding:8px 0 8px 8px}
.band-door .words h3{font-size:clamp(72px,12svh,132px);line-height:.84;margin:0 0 clamp(10px,2svh,18px)}
.band-door .words .ttl{margin:0 0 12px;font-size:26px;font-weight:600;line-height:1.2}
.band-door .words p{font-size:18px;line-height:1.5}
.band-door .words .btn{align-self:flex-start;margin-top:8px}
/* a short laptop screen has no room for "Food Pantry" on two lines */
@media (min-width:821px) and (max-height:880px){.band-door .words{padding-top:0;padding-bottom:0}.band-door .words h3 br.d{display:none}}
/* the set line breaks need the full column; narrower, let the lines wrap evenly instead of leaving one word alone */
@media (min-width:821px) and (max-width:1400px){.band-door .words p br.d{display:none}.band-door .words p{text-wrap:pretty}}
@media (max-width:820px){
  .three-doors{--pad:64px}
  .three-doors h2{font-size:var(--h2);margin-bottom:28px}
  .band-door .strip{height:92px;padding:0 18px}.band-door .strip span{font-size:60px}
  .band-door .body{height:auto;display:none;grid-template-columns:1fr;gap:0}
  .band-door.open .body{display:flex;flex-direction:column}
  .band-door .ph{height:280px}
  .band-door .words{padding:22px 0 0}.band-door .words h3{font-size:84px;margin-bottom:12px}
  .band-door .words .ttl{font-size:21px}.band-door .words p{font-size:16px}
}

/* 5 · saved by grace: a hymnal page */
.grace-page{position:relative;background:var(--paper2);text-align:center;padding:clamp(72px,min(8.3vw,9svh),120px) var(--gutter) clamp(64px,min(7vw,9svh),100px);overflow:hidden}
.grace-page h2{font-size:clamp(108px,min(9.6vw,17svh),138px);line-height:.84;margin:0 0 clamp(28px,5svh,52px)}
.grace-page .hymn{margin:0 0 clamp(28px,5svh,52px);font:italic 400 clamp(22px,min(2.9vw,5.2svh),42px)/1.34 "Sorts Mill Goudy",Georgia,serif}
.grace-page .hymn p{margin:0 0 .55em}
.grace-page .practice{margin:0 0 clamp(40px,5svh,64px);font-size:clamp(52px,min(5vw,9svh),72px);line-height:1;display:flex;justify-content:center;flex-wrap:wrap;gap:0 22px}
.grace-page .practice .w{color:rgba(5,22,31,.85);transition:color 1s ease}
.grace-page .practice .w.on{color:var(--door)}
.grace-page .mark-end{width:56px;height:56px;margin:0 auto;background:var(--rubric);-webkit-mask:url(/assets/marks/mark-navy.svg) 0 0/100% 100% no-repeat;mask:url(/assets/marks/mark-navy.svg) 0 0/100% 100% no-repeat}
@media (max-width:820px){.grace-page h2{font-size:108px;margin-bottom:32px}.grace-page .practice{flex-direction:column;align-items:center;gap:2px}.grace-page .hymn{margin-bottom:32px}}

/* 6 · meet the company, on Ink, running into the footer */
.company-ink{background:var(--ink);color:var(--paper);padding:clamp(64px,min(7.6vw,8svh),110px) 0 clamp(24px,min(4vw,4svh),56px)}
.company-ink h2{font-size:var(--h2);line-height:.86;margin:0 0 clamp(28px,4.5svh,44px)}
.company-ink .faces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.company-ink figure{margin:0}
.company-ink img{width:100%;aspect-ratio:4/5;max-height:48svh;object-fit:cover;object-position:50% 25%;filter:grayscale(1) contrast(1.04)}
.company-ink .nm{display:block;margin:16px 0 4px;font:400 38px/.95 var(--title);text-transform:uppercase}
.company-ink .rl{display:block;font-size:15px;line-height:1.4;color:rgba(249,245,236,.78)}
@media (max-width:820px){.company-ink h2{font-size:var(--h2);margin-bottom:28px}.company-ink .faces{grid-template-columns:1fr 1fr;gap:24px 14px}.company-ink .nm{font-size:26px;margin-top:10px}.company-ink .rl{font-size:13px}}
@media (prefers-reduced-motion:reduce){.place-stage *,.grace-page .w{transition:none!important;animation:none!important}}

/* ---------- page: Theater (designed section by section, October 29, 2026; design/theater/) ---------- */
/* 1 · Off-Broadway lives here: Night red, the empty house on the right */
.th-open{position:relative;min-height:min(100svh,980px);display:flex;align-items:flex-end;background:var(--night);color:var(--paper);overflow:hidden}
.th-open .ph{position:absolute;left:52.8%;right:0;top:76px;bottom:0}
.th-open .ph img{width:100%;height:100%;object-fit:cover;object-position:44% 50%;filter:saturate(.85) sepia(.14) contrast(1.04)}
.th-open .wrap{position:relative;padding-top:140px;padding-bottom:clamp(48px,5.6vw,80px)}
.th-open h1{font-size:clamp(84px,min(8.2vw,15svh),118px);line-height:.86;margin:0 0 30px}
.th-open .lede{margin:0;font-size:clamp(17px,1.46vw,21px);line-height:1.45;max-width:none}
.th-open .btns{margin-top:36px;gap:14px}
.th-open .btns .btn.line{color:var(--paper)}
@media (max-width:820px){
  .th-open{display:flex;flex-direction:column;align-items:stretch;min-height:0}
  .th-open .wrap{order:1;padding-top:96px;padding-bottom:40px}
  .th-open h1{font-size:clamp(64px,21vw,96px);margin-bottom:20px}
  .th-open .btns{flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px}
  .th-open .ph{position:relative;order:2;left:auto;top:auto;height:clamp(240px,66vw,340px)}
  .th-open .ph img{object-position:44% 62%}
}

/* 2 · Rope, in The New Group's own look (a partner's show uses the partner's art) */
.th-rope{background:#FDFDFD;color:#FDFDFD}
.th-rope .shot{height:clamp(300px,min(39.7vw,52svh),572px);overflow:hidden;background:#FDFDFD}
.th-rope .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;mix-blend-mode:multiply}
.th-rope .band-tng{background:#171B1B;padding:52px 0 clamp(56px,5vw,72px)}
.th-rope .band-tng .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.th-rope h2{grid-column:1 / span 4;font-size:clamp(104px,min(10.4vw,19svh),150px);line-height:.8;letter-spacing:.05em;margin:0}
.th-rope .about{grid-column:5 / span 4;padding-top:6px}
.th-rope .about p{margin:0;font-size:clamp(15px,1.39vw,20px);line-height:1.5}
.th-rope .about b{font-weight:700}
.th-rope .about .credit{margin:28px 0 0;font-size:13px;line-height:1.4;opacity:1}
.th-rope .go{grid-column:9 / span 4;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.th-rope .when{margin:0;font-size:clamp(36px,3.9vw,56px);line-height:.9;letter-spacing:.02em}
@media (max-width:820px){
  .th-rope .shot{height:auto;padding-top:18px}
  .th-rope .shot img{height:auto;object-fit:fill}
  .th-rope .band-tng{padding:36px 0 48px}
  .th-rope .band-tng .wrap{display:flex;flex-direction:column;align-items:flex-start}
  .th-rope h2{font-size:clamp(110px,36vw,150px);margin-bottom:24px}
  .th-rope .about{display:contents}
  .th-rope .about p{font-size:17px}
  .th-rope .go{margin-top:26px}
  .th-rope .when{font-size:44px}
  .th-rope .about .credit{order:4;margin-top:24px;font-size:12px}
}

/* 3 · The house: 161 plain squares, one per seat, not a floor plan */
.th-house{background:var(--mist);color:var(--harbor);padding:clamp(44px,min(6vw,7svh),88px) 0 clamp(44px,min(6vw,7svh),88px)}
.th-house .head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.th-house h2{grid-column:1 / span 6;font-size:var(--h2);line-height:.84;margin:0}
.th-house .head p{grid-column:7 / span 6;margin:0 0 4px;font-size:clamp(17px,1.46vw,21px);line-height:1.5}
.th-house .seats{margin-top:clamp(24px,min(3.6vw,4svh),52px);display:grid;grid-template-columns:repeat(23,minmax(0,1fr));gap:clamp(5px,.56vw,8px)}
/* on a short screen the squares get smaller and the space between seats in a row widens, so the grid keeps its full width and the numbers under it stay on screen */
.th-house .seats i{display:block;aspect-ratio:1;max-height:calc((100svh - 390px - 6*clamp(5px,.56vw,8px))/7);border:2px solid var(--harbor);background:var(--harbor);transition:background .25s ease-out,border-color .25s ease-out}
.th-house.pre .seats i:not(.on){background:transparent;border-color:#98BCCC}
.th-house .nums{margin-top:clamp(20px,3.5svh,44px);display:flex;align-items:baseline;gap:56px;white-space:nowrap}
.th-house .nums p,.th-house .size{margin:0;display:flex;align-items:baseline;gap:14px}
.th-house .size{gap:56px}
.th-house .nums b{font-size:clamp(64px,min(7.2vw,11svh),104px);line-height:.84}
.th-house .count{display:inline-block;width:.9em}
.th-house .nums p > span{font-size:20px;font-weight:600}
@media (max-width:820px){
  .th-house{padding:56px 0}
  .th-house .head{display:block}
  .th-house h2{font-size:var(--h2)}
  .th-house .head p{margin:20px 0 0;font-size:17px}
  .th-house .seats{margin-top:32px;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px}
  .th-house .nums{flex-direction:column;align-items:flex-start;gap:20px;margin-top:32px}
  .th-house .seat-n b{font-size:88px}
  .th-house .size{gap:28px}
  .th-house .size b{font-size:64px}
  .th-house .nums p > span{font-size:18px}
}

/* 4 · The booth: the House Lights fader brings up the view (the visitor moves it) */
.th-booth{--house:.29;background:var(--ink);color:var(--paper);padding:clamp(44px,min(6vw,7svh),88px) 0 clamp(44px,min(5vw,7svh),72px)}
.no-js .th-booth{--house:1}
.th-booth .head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.th-booth h2{grid-column:1 / span 6;font-size:var(--h2);line-height:.84;margin:0}
.th-booth .head p{grid-column:9 / span 4;margin:0 0 4px;font-size:clamp(17px,1.46vw,21px);line-height:1.5;color:var(--mist);text-wrap:balance}
.th-booth .desk{margin-top:clamp(28px,4.5svh,52px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.th-booth .view{grid-column:1 / span 7;margin:0;height:clamp(300px,min(37.5vw,48svh),540px);overflow:hidden;background:var(--ink)}
.th-booth .view img{width:100%;height:100%;object-fit:cover;object-position:50% 68%;opacity:var(--house);transition:opacity .12s linear;filter:saturate(.85) sepia(.14) contrast(1.04)}
.th-booth .board{grid-column:8 / span 1;display:flex;flex-direction:column;align-items:center;gap:14px}
.th-booth .nm{margin:0;font:600 12px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;text-align:center;color:var(--spray)}
.th-booth .fader{flex:1;min-height:0;display:flex;gap:8px;align-items:stretch}
.th-booth .fader input{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:36px;margin:0;background:transparent;cursor:pointer}
.th-booth .fader input::-webkit-slider-runnable-track{width:6px;border-radius:3px;background:#2A4250}
.th-booth .fader input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:36px;height:22px;margin-left:-15px;border:0;border-radius:2px;background:var(--paper);box-shadow:inset 0 -3px 0 #98BCCC}
.th-booth .fader input::-moz-range-track{width:6px;border-radius:3px;background:#2A4250}
.th-booth .fader input::-moz-range-thumb{width:36px;height:22px;border:0;border-radius:2px;background:var(--paper)}
.th-booth .fader input:focus-visible{outline:3px solid var(--paper);outline-offset:4px}
.th-booth .scale{display:flex;flex-direction:column;justify-content:space-between;padding:4px 0;font:600 11px/1 var(--text);color:#98BCCC}
.th-booth .rig{grid-column:9 / span 4;margin:0}
.th-booth .rig .label{margin:0;font-size:13px;letter-spacing:.12em;color:#98BCCC}
.th-booth .rig dl{margin:clamp(14px,2.5svh,20px) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3svh,28px) 24px}
.th-booth .rig dl div{padding-top:14px;border-top:1px solid rgba(189,214,224,.3)}
.th-booth .rig dt{font-size:clamp(56px,min(6.1vw,9svh),88px);line-height:.84}
.th-booth .rig dd{margin:10px 0 0;font-size:15px;line-height:1.45;color:var(--spray)}
@media (max-width:820px){
  .th-booth{padding:56px 0 48px}
  .th-booth .head{display:block}
  .th-booth h2{font-size:var(--h2)}
  .th-booth .head p{margin:20px 0 0;font-size:17px;text-wrap:pretty}
  .th-booth .desk{display:flex;flex-direction:column;margin-top:32px}
  .th-booth .view{margin:0 calc(-1 * var(--gutter));height:clamp(240px,74vw,320px)}
  .th-booth .board{flex-direction:row;margin-top:18px}
  .th-booth .nm{text-align:left}
  .th-booth .fader{flex:1}
  .th-booth .fader input{writing-mode:horizontal-tb;direction:ltr;width:100%;height:44px}
  .th-booth .fader input::-webkit-slider-runnable-track{width:auto;height:6px}
  .th-booth .fader input::-webkit-slider-thumb{width:22px;height:36px;margin:-15px 0 0;box-shadow:inset -3px 0 0 #98BCCC}
  .th-booth .fader input::-moz-range-track{height:6px}
  .th-booth .fader input::-moz-range-thumb{width:22px;height:36px}
  .th-booth .scale{display:none}
  .th-booth .rig{order:4;margin-top:32px}
  .th-booth .rig dl{grid-template-columns:1fr;gap:0;margin-top:14px}
  .th-booth .rig dl div{display:flex;align-items:center;gap:16px;padding:14px 0}
  .th-booth .rig dt{flex:none;width:64px;font-size:72px}
  .th-booth .rig dd{margin:0}
}

/* 5 · For producers: production's eight answers, a quiet sheet */
.th-prod{background:var(--paper);color:var(--harbor);padding:clamp(44px,min(6vw,7svh),88px) 0 clamp(44px,min(7vw,7svh),100px)}
.th-prod h2{font-size:var(--h2);line-height:.84;margin:0}
.th-prod dl{margin:clamp(20px,3.5svh,56px) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:72px}
.th-prod dl div{padding:clamp(12px,1.8svh,20px) 0 clamp(14px,2.2svh,24px);border-top:2px solid var(--harbor)}
.th-prod dt{font:700 13px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase}
.th-prod dd{margin:8px 0 0;font-size:18px;line-height:1.5;color:var(--ink);text-wrap:pretty}
@media (max-width:820px){
  .th-prod{padding:56px 0 48px}
  .th-prod h2{font-size:var(--h2)}
  .th-prod dl{grid-template-columns:1fr;margin-top:32px}
  .th-prod dl div{padding:14px 0 18px}
  .th-prod dt{font-size:12px}
  .th-prod dd{margin-top:6px;font-size:16px}
}

/* 6 · 1963: the words and the year on the left, the company and the film on a diagonal */
.th-1963{background:var(--harbor);color:var(--paper);padding:clamp(44px,min(6vw,7svh),88px) 0 40px;overflow:hidden}
.th-1963 .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.th-1963 .words{grid-column:1 / span 6;display:flex;flex-direction:column;align-items:flex-start}
.th-1963 h2{font-size:var(--h2);line-height:.9;margin:0}
.th-1963 .words > p:not(.yr){margin:24px 0 0;max-width:30em;font-size:clamp(17px,1.39vw,20px);line-height:1.5;color:var(--mist);text-wrap:pretty}
.th-1963 .more{margin-top:14px;min-height:44px;display:inline-flex;align-items:center;font-size:15px;letter-spacing:.08em;color:var(--paper)}
.th-1963 .yr{margin:auto 0 0;padding-top:clamp(24px,4svh,40px);font-size:clamp(180px,min(27.8vw,26svh),400px);line-height:.8;color:var(--spray)}
/* the two pictures shrink with the screen's height, keeping their overlap */
.th-1963 .pics{grid-column:7 / span 6;justify-self:start;width:100%;max-width:calc(100svh - 300px)}
.th-1963 .company{margin:0;width:82%}
.th-1963 .company img{width:100%;aspect-ratio:520/392;object-fit:cover}
.th-1963 .film{position:relative;width:73.4%;margin:-80px 0 0 auto;background:var(--paper);color:var(--ink)}
.th-1963 .film img{width:100%;aspect-ratio:2/1;object-fit:cover}
.th-1963 .film .txt{padding:18px 22px}
.th-1963 .film .meta{margin:0;font-size:13px;font-weight:600;color:var(--hudson)}
.th-1963 .film h3{margin:6px 0 0;font-size:40px;line-height:.95}
.th-1963 .film .txt > p:not(.meta){margin:8px 0 0;font-size:15px;line-height:1.45;text-wrap:pretty}
.th-1963 .film .row{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px}
.th-1963 .film .row a{display:inline-flex;align-items:center;min-height:44px;font:600 14px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;text-underline-offset:5px;color:var(--ink)}
.th-1963 .film .credit{margin:0;font-size:12px;color:var(--hudson);opacity:1}
@media (max-width:820px){
  .th-1963{padding:56px 0 40px}
  .th-1963 .wrap{display:flex;flex-direction:column;align-items:flex-start}
  .th-1963 .words{display:contents}
  .th-1963 h2{font-size:var(--h2)}
  .th-1963 .words > p:not(.yr){font-size:17px}
  .th-1963 .more{font-size:14px}
  .th-1963 .pics{order:2;width:calc(100% + 2 * var(--gutter));margin:28px calc(-1 * var(--gutter)) 0}
  .th-1963 .company{width:88%}
  .th-1963 .film{width:88%;margin-top:-56px}
  .th-1963 .film .txt{padding:16px 20px}
  .th-1963 .film h3{font-size:34px}
  .th-1963 .film .row{flex-direction:column;align-items:flex-start}
  .th-1963 .yr{order:3;margin:20px 0 0;padding:0;font-size:220px}
}

/* 7 · Bring your show: the bow on the closed traveler, and the form on Paper */
.th-inquire{display:grid;grid-template-columns:1fr 1fr;min-height:min(calc(100svh - 76px),900px);background:var(--paper);color:var(--ink)}
.th-inquire .stage{position:relative;overflow:hidden;background:var(--ink)}
.th-inquire .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.85) sepia(.14) contrast(1.04)}
.th-inquire .stage h2{position:absolute;left:0;right:0;top:36.5%;margin:0;text-align:center;font-size:clamp(84px,min(7.4vw,14svh),110px);line-height:.86;color:var(--paper)}
.th-inquire .ask{padding:clamp(40px,6svh,64px) clamp(16px,3.9vw,56px) clamp(40px,min(5vw,6svh),72px)}
.th-inquire .lede{margin:0 0 28px;max-width:none;font-size:20px;line-height:1.5;text-wrap:pretty}
.th-inquire .nobr{white-space:nowrap}
.th-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.th-form .full{grid-column:1 / -1}
.th-form{--f-field:var(--paper2);--f-edge:rgba(5,22,31,.35);--f-chip:var(--harbor);--f-on:var(--harbor);--f-check:var(--harbor)}
.th-form .send-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.th-form .v-ok{margin:0;font-size:16px;font-weight:600;color:var(--hudson)}
.th-form .v-err{grid-column:1 / -1;margin:0;font-weight:600;color:var(--door)}
/* on a laptop the whole form fits beside the photo: name, email and phone share a row, then title and dates */
@media (min-width:821px){
  .th-inquire .ask{padding-top:clamp(24px,4svh,64px);padding-bottom:clamp(24px,3svh,72px)}
  .th-inquire .lede{margin-bottom:clamp(16px,3svh,28px)}
  .th-form{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.8svh,16px) 20px}
  .th-form > label:has(input[name=name],input[name=email],input[name=phone]){grid-column:span 2}
  .th-form > label:has(input[name=title],input[name=dates]){grid-column:span 3}
  .th-form textarea{height:clamp(56px,9svh,110px)}
  .th-form .chip{min-height:36px}
}
@media (max-width:820px){
  .th-inquire{grid-template-columns:1fr;min-height:0}
  .th-inquire .stage{height:clamp(340px,108vw,440px)}
  .th-inquire .stage h2{top:31%;font-size:clamp(72px,21.5vw,96px)}
  .th-inquire .ask{padding:32px var(--gutter) 48px}
  .th-inquire .lede{font-size:17px;margin-bottom:24px}
  .th-form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.th-house .seats i,.th-booth .view img{transition:none!important}}

/* ---------- page: Give (locked October 30; design/give/) ---------- */
.gv-open{position:relative;min-height:min(100svh,980px);display:flex;background:var(--ink);color:var(--paper);overflow:clip}
.gv-open .ph{position:absolute;inset:0}
.gv-open .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(.85) sepia(.14) contrast(1.04)}
.gv-open .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,22,31,.7) 0%,rgba(5,22,31,.55) 26%,rgba(5,22,31,0) 46%)}
.gv-open .wrap{position:relative;min-height:inherit;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:clamp(32px,5vw,96px);padding-top:calc(76px + clamp(16px,3svh,48px));padding-bottom:clamp(32px,5svh,56px)}
/* Givebutter's form is taller than a laptop screen; the title and line stay on the first screen beside it */
.gv-open .words{align-self:end;position:sticky;bottom:clamp(32px,6svh,64px);padding-bottom:0}
.gv-open h1{font-size:clamp(104px,min(7.8vw,14svh),112px);line-height:.86;margin:0 0 30px}
.gv-open .lede{margin:0;font-size:clamp(17px,1.46vw,21px);line-height:1.45}
.gv-open .widget{background:var(--paper);color:var(--ink);padding:clamp(16px,2.6svh,28px);min-height:560px;max-width:100%;overflow:hidden}
.gv-open .widget givebutter-widget{display:block;max-width:100%}
.gv-open .widget .ph-note{margin:0;font-size:16px;opacity:.75}
.gv-other{background:var(--paper2);color:var(--ink);padding:clamp(56px,min(6vw,8svh),88px) 0}
.gv-other .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.gv-other .words{grid-column:span 5;display:flex;flex-direction:column;gap:28px}
.gv-other h2{margin:0;font-size:var(--h2);line-height:.86}
.gv-other p{margin:0;font-size:20px;line-height:1.5}
.gv-other .ask a{white-space:nowrap}
.gv-other .envelope{grid-column:7/span 6;position:relative;height:400px;margin:8px 0 0;background:var(--paper);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center}
.gv-other .stamp{position:absolute;top:30px;right:30px;width:80px;height:100px;background:var(--door);-webkit-mask:radial-gradient(circle,transparent 3.2px,#000 3.6px) -5px -5px/10px 10px,linear-gradient(#000 0 0) center/calc(100% - 7px) calc(100% - 7px) no-repeat;mask:radial-gradient(circle,transparent 3.2px,#000 3.6px) -5px -5px/10px 10px,linear-gradient(#000 0 0) center/calc(100% - 7px) calc(100% - 7px) no-repeat}
.gv-other .stamp::before{content:"";position:absolute;inset:9px;border:1.5px solid var(--paper)}
.gv-other .stamp img{position:absolute;inset:0;margin:auto;width:36px;height:36px}
.gv-other .addr{font:700 28px/1.4 "Courier Prime","Courier New",monospace;white-space:nowrap}
@media (max-width:1100px){.gv-other .words{grid-column:span 6}.gv-other .envelope{grid-column:7/span 6}.gv-other .addr{font-size:22px}}
@media (max-width:820px){
  .gv-open{display:block;min-height:0}
  .gv-open .ph{position:relative;height:520px}
  .gv-open .ph img{object-position:42% 50%}
  .gv-open .ph::after{background:linear-gradient(180deg,rgba(5,22,31,.55) 0%,rgba(5,22,31,0) 20%,rgba(5,22,31,0) 36%,rgba(5,22,31,.85) 74%,var(--ink) 100%)}
  .gv-open .wrap{display:block;min-height:0;padding-top:0;padding-bottom:40px}
  .gv-open .words{position:static;padding:0}
  .gv-open h1{position:relative;font-size:clamp(84px,30vw,116px);margin:calc(-1.72em - 6px) 0 24px}
  .gv-open .lede{font-size:18px;line-height:1.5;margin-bottom:28px}
  .gv-open .widget{padding:18px;min-height:520px}
  .gv-other{padding:64px 0}
  .gv-other .wrap{display:flex;flex-direction:column;align-items:stretch;gap:22px}
  .gv-other .words{display:contents}
  .gv-other h2{order:1;font-size:var(--h2);margin-bottom:4px}
  .gv-other .check{order:2}
  .gv-other .envelope{order:3;height:240px;margin:0}
  .gv-other .receipt{order:4}
  .gv-other .ask{order:5}
  .gv-other p{font-size:18px}
  .gv-other .ask .or{display:none}
  .gv-other .ask a{display:flex;align-items:center;min-height:44px;width:max-content}
  .gv-other .stamp{top:12px;right:12px;width:50px;height:60px}
  .gv-other .stamp::before{inset:6px}
  .gv-other .stamp img{width:22px;height:22px}
  .gv-other .addr{font-size:16px}
}

/* ---------- page: Contact (locked October 30; design/contact/) ---------- */
/* 1 · We'd love to meet you: the front steps on the left, the note form on Harbor */
/* the photo column keeps the canvas's tall crop (680 by 900): the steps and doors, not the neighbors */
.ct-open{position:relative;display:grid;grid-template-columns:min(47.2%,calc(min(100svh,980px)*.756)) minmax(0,1fr);min-height:min(100svh,980px);background:var(--harbor);color:var(--paper)}
.ct-open .ph{position:relative;overflow:hidden}
.ct-open .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 0%;filter:saturate(.85) sepia(.14) contrast(1.04)}
.ct-open .ph::after{content:"";position:absolute;left:0;right:0;top:0;height:160px;background:linear-gradient(180deg,rgba(0,43,58,.7) 0%,rgba(0,43,58,0) 100%)}
.ct-open .ask{padding:calc(76px + clamp(12px,2.2svh,36px)) var(--edge) clamp(28px,5svh,56px) clamp(32px,4.4vw,64px);align-self:center}
.ct-open h1{margin:0 0 clamp(14px,2.4svh,22px);font-size:clamp(72px,min(8.2vw,12svh),118px);line-height:.86}
.ct-open h1 span{display:block;white-space:nowrap}
.ct-open .ways{display:flex;flex-wrap:wrap;gap:4px 36px;margin:0 0 clamp(18px,3.4svh,30px);font-size:20px;line-height:1.4}
.ct-open .ways a{text-decoration:none;white-space:nowrap}
.ct-open .ways a:hover{text-decoration:underline}
.ct-open .ways b{font-weight:700}
/* Instagram and Facebook sit quietly after Email; the marks line up with the words, the targets stay 44px */
.ct-open .ways .social{margin:-10px 0 -10px -10px}
.ct-open .ways .social a{justify-content:center}
/* on a laptop the short fields share a row and the news box sits beside Send, so the whole form shows */
.ct-form{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.8svh,14px) 16px}
.ct-form{--f-chip:var(--paper);--f-on:var(--paper);--f-on-ink:var(--ink);--f-focus:var(--spray);--f-check:var(--paper)}
.ct-form > label{grid-column:span 2}
.ct-form > .msg,.ct-form fieldset,.ct-form .send-row,.ct-form .v-ok,.ct-form .v-err{grid-column:1 / -1}
.ct-form textarea{height:clamp(56px,8svh,92px)}
.ct-form .send-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.ct-form .btn{padding:0 40px}
.ct-form .v-ok{margin:0;font-size:18px;font-weight:600}
.ct-form .v-err{margin:0;font-weight:600;color:var(--paper)}

/* 2 · Visit: the address set large on Mist, and a street map drawn from production's directions */
.ct-visit{background:var(--mist);color:var(--ink);padding:clamp(48px,min(6.7vw,7svh),96px) 0}
.ct-visit .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.ct-visit .words{grid-column:1 / span 6}
.ct-visit h2{margin:0 0 16px;font-size:var(--h2);line-height:.86}
.ct-visit h2 span{display:block;white-space:nowrap}
.ct-visit .city{margin:0 0 clamp(20px,3.4svh,28px);font-size:clamp(20px,1.8vw,26px);line-height:1.3}
.ct-visit .maps{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border:2px solid var(--ink);font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s}
.ct-visit .maps:hover{background:var(--ink);color:var(--paper)}
.ct-visit .note{margin:0 0 14px;font-size:20px;line-height:1.5}
.ct-visit .maps + .note{margin-top:clamp(28px,5svh,52px)}
.ct-visit figure{grid-column:7 / span 6;width:100%;margin:0}
.ct-visit figcaption{margin:16px 0 0;font-size:16px;line-height:1.5}
/* the map runs to the page's right edge as drawn and keeps its labels; on a short screen its streets sit closer together so it fits under the menu */
.ct-map{position:relative;width:100%;height:clamp(380px,calc(100svh - 76px - 2*clamp(48px,min(6.7vw,7svh),96px) - 96px),560px);overflow:hidden;background:var(--paper)}
.ct-map > *{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%)}
.ct-map .st{left:0;right:0;height:4px;background:var(--spray)}
.ct-map .st.big{height:10px}
.ct-map .av{top:0;bottom:0;width:14px;background:var(--spray)}
.ct-map .rt{background:var(--hudson)}
.ct-map .rt.v{width:6px;height:calc(var(--h)*1%)}
.ct-map .rt.h{height:6px;width:calc(var(--w)*1%)}
.ct-map .lb{padding:0 4px;background:var(--paper);font:600 14px/20px var(--text);white-space:nowrap}
.ct-map .lb.v{padding:4px 0;writing-mode:vertical-rl;transform:rotate(180deg)}
.ct-map .tag{display:flex;align-items:center;justify-content:center;gap:8px;height:28px;padding:0 12px;background:var(--ink);color:var(--paper);font:700 14px/1 var(--text)}
.ct-map .tag b{font-weight:700}
.ct-map .here{width:26px;height:26px;background:var(--ink)}
.ct-map .name{padding:0 6px;background:var(--paper);font:400 30px/32px var(--title);text-transform:uppercase;white-space:nowrap}
@media (max-width:820px){
  .ct-open{display:block;min-height:0}
  .ct-open .ph{height:420px}
  .ct-open .ph img{object-position:54% 0%}
  .ct-open .ph::after{height:120px}
  .ct-open .ask{padding:28px var(--gutter) 40px}
  .ct-open h1{font-size:clamp(72px,23vw,90px);margin-bottom:18px}
  .ct-open .ways{flex-direction:column;gap:4px;margin-bottom:28px;font-size:18px;line-height:1.45}
  .ct-open .ways a{display:inline-flex;align-items:center;min-height:34px}
  .ct-open .ways b{margin-right:8px}
  .ct-open .ways .social{margin:6px 0 0 -10px}
  .ct-form{display:flex;flex-direction:column;gap:16px}
  .ct-form input[type=text],.ct-form input[type=email],.ct-form input[type=tel]{height:48px}
  .ct-form textarea{height:120px}
  .ct-form > .phone{order:1}
  .ct-form .send-row,.ct-form .v-ok,.ct-form .v-err{order:2}
  .form .chip{min-height:44px}
  .ct-form .send-row{flex-direction:column;align-items:stretch;gap:16px;margin:0}
  .ct-form .check{min-height:40px;font-size:16px;gap:12px}
  .ct-form .btn{justify-content:center;min-height:54px}
  .ct-visit{padding:56px 0}
  .ct-visit .words,.ct-visit figure{grid-column:1 / -1}
  .ct-visit h2{font-size:var(--h2);margin-bottom:12px}
  .ct-visit .city{font-size:20px;margin-bottom:22px}
  .ct-visit .maps{padding:0 22px}
  .ct-visit .note{font-size:17px;margin-bottom:12px}
  .ct-visit .maps + .note{margin-top:36px}
  .ct-visit .note:last-child{margin-bottom:36px}
  .ct-visit figcaption{margin-top:14px;font-size:15px}
  .ct-map{width:100%;height:auto;aspect-ratio:350/380}
  .ct-map > *{left:calc(var(--px)*1%);top:calc(var(--py)*1%)}
  .ct-map .st{height:3px}.ct-map .st.big{height:8px}
  .ct-map .av{width:12px}
  .ct-map .rt.v{width:5px;height:calc(var(--ph)*1%)}
  .ct-map .rt.h{height:5px;width:calc(var(--pw)*1%)}
  .ct-map .lb{font-size:13px;line-height:18px}
  .ct-map .tag{height:26px;padding:0 10px;gap:7px;font-size:13px}
  .ct-map .here{width:22px;height:22px}
  .ct-map .name{font-size:26px;line-height:28px;padding:0 5px}
}

/* ---------- page: Food Pantry (locked October 30; design/food-pantry/, drawn at 1512 by 740) ---------- */
/* sizes are the canvas's at 1512 by 740, tied to the screen's width and height from there */
/* 1 · Groceries, on the house: pantry green, the doors on the left, the next run as calendar leaves */
/* over the green the menu marks Food Pantry in Paper, as drawn; Door red stays the one action */
body.over:not(.scrolled):has(main.pantry) .top nav a[aria-current=page]{border-bottom-color:var(--paper)}
.fp-open{display:grid;grid-template-columns:39.7% minmax(0,1fr);min-height:min(100svh,980px);background:var(--green);color:var(--paper)}
.fp-open .ph{position:relative;margin-top:76px;overflow:hidden}
.fp-open .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 60%;filter:saturate(.85) sepia(.14) contrast(1.04)}
.fp-open .words{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3.5svh,26px);padding:76px var(--edge) 0 clamp(32px,4.2vw,64px)}
.fp-open h1{margin:0;font-size:clamp(64px,min(6.1vw,12.4svh),108px);line-height:.86;white-space:nowrap}
.fp-open .next{display:flex;flex-direction:column;gap:14px}
.fp-open .lbl{margin:0;font-size:18px;font-weight:600;line-height:1.3}
.fp-open .leaves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fp-open .leaves li{display:flex;flex-direction:column;background:var(--paper);color:var(--ink)}
.fp-open .leaves .none{padding:24px;font-size:20px;font-weight:600;grid-column:1 / -1}
.fp-open .pg{display:flex;flex-direction:column;align-items:center;padding:18px 12px 14px;font-family:var(--title);text-transform:uppercase}
.fp-open .mo,.fp-open .pg .wd{font-size:clamp(24px,min(2.1vw,4.3svh),36px);line-height:1}
.fp-open .mo{color:var(--green)}
.fp-open .dy{margin:4px 0 2px;font-size:clamp(100px,min(11.1vw,22.7svh),200px);line-height:.9}
.fp-open .ft{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 10px;background:var(--green-deep);color:var(--paper);font-size:18px;font-weight:700;white-space:nowrap}
.fp-open .ft .wd{display:none}
.fp-open .addr{margin:0;font-size:20px;font-weight:600;line-height:1.4}

/* 2 · Pantry weekends: a ledger of every date ahead on Paper, what to know on Paper2 */
.fp-weeks{display:grid;grid-template-columns:minmax(0,1fr) 36%;min-height:clamp(560px,calc(100svh - 76px),820px);background:var(--paper);color:var(--ink)}
.fp-weeks .dates{display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3.8svh,28px);padding:clamp(40px,6svh,56px) clamp(32px,4.8vw,72px) clamp(40px,6svh,56px) var(--edge)}
.fp-weeks h2{margin:0;font-size:var(--h2);line-height:.86}
.fp-weeks .ledger{display:flex;flex-direction:column;gap:6px}
.fp-weeks .ledger li{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:clamp(56px,10.3svh,84px);padding:0 24px;background:var(--paper2)}
.fp-weeks .ledger li.next{background:var(--green);color:var(--paper)}
.fp-weeks .ledger li.event{background:var(--sage)}
.fp-weeks .ledger .dates{padding:0;font:400 clamp(40px,min(3.84vw,7.8svh),64px)/1 var(--title);text-transform:uppercase;white-space:nowrap}
.fp-weeks .ledger .note{display:flex;align-items:center;gap:16px;font-size:18px;font-weight:600;line-height:1.3;text-align:right}
.fp-weeks .tag{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;background:var(--paper);color:var(--green);font-size:15px;font-weight:700;white-space:nowrap}
.fp-weeks .know{display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,6svh,44px);padding:clamp(40px,6svh,56px) var(--edge) clamp(40px,6svh,56px) clamp(32px,3.7vw,56px);background:var(--paper2)}
.fp-weeks .know div{display:flex;flex-direction:column;gap:14px}
.fp-weeks h3{margin:0;font-size:clamp(44px,min(4.23vw,8.6svh),72px);line-height:.9}
.fp-weeks .know p{margin:0;font-size:clamp(18px,1.46vw,22px);line-height:1.5}

/* 3 · 3,000: the line down West 46th Street edge to edge, the number on a Harbor block clear of faces */
.fp-3000{position:relative;height:clamp(560px,calc(100svh - 76px),820px);overflow:hidden;background:var(--harbor);color:var(--paper)}
.fp-3000 .ph{position:absolute;inset:0}
.fp-3000 .ph img{width:100%;height:100%;object-fit:cover;object-position:0% 82%;filter:saturate(.85) sepia(.14) contrast(1.04)}
.fp-3000 .block{position:absolute;right:var(--edge);top:clamp(32px,6.5svh,48px);width:clamp(380px,34.4vw,560px);padding:36px 40px 40px;background:var(--harbor)}
.fp-3000 .num{margin:0 0 18px;font:400 clamp(140px,min(14.55vw,29.7svh),240px)/.82 var(--title);color:var(--spray)}
.fp-3000 .block p:last-child{margin:0;font-size:20px;line-height:1.5}

/* 4 · Join the crew: sage, production's volunteer form, the pantry team on the right */
.fp-crew{display:grid;grid-template-columns:minmax(0,1fr) 42.33%;min-height:clamp(560px,calc(100svh - 76px),820px);background:var(--sage);color:var(--ink)}
.fp-crew .words{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.7svh,20px);padding:clamp(32px,5svh,48px) clamp(32px,3.7vw,56px) clamp(32px,5svh,48px) var(--edge)}
.fp-crew h2{margin:0;font-size:var(--h2);line-height:.86}
.fp-crew .say{margin:0;font-size:clamp(17px,1.26vw,19px);line-height:1.5}
.fp-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;margin-top:4px}
.fp-form{--f-focus:var(--ink)}
.fp-form textarea{height:clamp(72px,13.2svh,110px)}
.fp-form .chips{display:inline-flex;flex-direction:column;align-items:stretch}
.fp-form .msg{grid-column:span 2}
.fp-form .send-row,.fp-form .v-ok,.fp-form .v-err{grid-column:1 / -1}
.fp-form .send-row{display:flex;align-items:center;gap:28px;margin-top:6px}
.fp-form .btn{flex:none;padding:0 36px}
.fp-form .send-row p{margin:0;font-size:16px;line-height:1.45}
.fp-form .send-row a{font-weight:700;text-decoration-thickness:2px;text-underline-offset:.2em}
.fp-form .v-ok{margin:0;font-size:18px;font-weight:600}
.fp-form .v-err{margin:0;font-weight:600;color:var(--door-lit)}
.fp-crew .ph{position:relative;overflow:hidden}
.fp-crew .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.85) sepia(.14) contrast(1.04)}

@media (min-width:821px){.fp-open h1 span,.fp-weeks h2 span{white-space:nowrap}}
@media (max-width:820px){
  .fp-open{display:flex;flex-direction:column;min-height:0}
  .fp-open .words{order:1;gap:22px;padding:calc(68px + 18px) var(--gutter) 30px}
  .fp-open h1{font-size:clamp(56px,18vw,70px);white-space:normal}
  .fp-open h1 span{display:block;white-space:nowrap}
  .fp-open .next{gap:10px}
  .fp-open .lbl{font-size:16px}
  .fp-open .leaves{display:flex;flex-direction:column;gap:10px}
  .fp-open .leaves li{flex-direction:row;height:104px;background:none}
  .fp-open .pg{flex:none;width:112px;justify-content:center;padding:0;background:var(--paper)}
  .fp-open .mo{font-size:22px}
  .fp-open .dy{margin:0;font-size:70px;line-height:.92}
  .fp-open .pg .wd{display:none}
  .fp-open .ft{flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;min-height:0;padding:0 18px}
  .fp-open .ft .wd{display:block;font:400 34px/1 var(--title);text-transform:uppercase}
  .fp-open .hr{font-size:17px;line-height:1.2}
  .fp-open .addr{font-size:17px;line-height:1.45}
  .fp-open .ph{order:2;height:380px;margin-top:0}
  .fp-open .ph img{object-position:55% 62%}
  .fp-weeks{display:block;min-height:0}
  .fp-weeks .dates{gap:22px;padding:40px var(--gutter) 36px}
  .fp-weeks h2{font-size:var(--h2)}
  .fp-weeks h2 span{display:block;white-space:nowrap}
  .fp-weeks .ledger li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;min-height:86px;padding:12px 16px}
  .fp-weeks .ledger .dates{font-size:38px}
  .fp-weeks .ledger .note{display:contents}
  .fp-weeks .ledger .note > span{grid-column:1;font-size:15px;text-align:left}
  .fp-weeks .tag{grid-column:2;grid-row:1 / span 2;align-self:center;min-height:30px;padding:0 10px;font-size:14px}
  .fp-weeks .know{gap:32px;padding:40px var(--gutter)}
  .fp-weeks .know div{gap:10px}
  .fp-weeks h3{font-size:48px}
  .fp-weeks .know p{font-size:18px}
  .fp-3000{height:auto}
  .fp-3000 .ph{position:relative;height:330px}
  .fp-3000 .ph img{object-position:30% 80%}
  .fp-3000 .block{position:static;width:auto;padding:32px var(--gutter) 40px}
  .fp-3000 .num{font-size:150px;margin-bottom:16px}
  .fp-3000 .block p:last-child{font-size:18px}
  .fp-crew{display:flex;flex-direction:column;min-height:0}
  .fp-crew .ph{order:-1;height:320px}
  .fp-crew .ph img{object-position:50% 25%}
  .fp-crew .words{gap:18px;padding:32px var(--gutter) 40px}
  .fp-crew h2{font-size:var(--h2)}
  .fp-crew .say{font-size:17px}
  .fp-form{display:flex;flex-direction:column;gap:14px}
  .fp-form input[type=text],.fp-form input[type=email],.fp-form input[type=tel]{height:48px}
  .fp-form textarea{height:100px}
  .fp-form .chips{flex-direction:row}
  .fp-form .send-row{flex-direction:column;align-items:stretch;gap:20px;margin-top:4px}
  .fp-form .btn{justify-content:center;padding:0 28px}
  .fp-form .send-row p{font-size:16px;line-height:1.5}
}

/* ---------- page: History (locked October 30; design/history/, drawn at 1512 by 740) ---------- */
/* sizes are the canvas's at 1512 by 740, tied to the screen's width and height from there; each section is one screen under the menu */
.history .t{text-wrap:nowrap}
.history .nw{white-space:nowrap}
.history .era{margin:10px 0 0;font:400 clamp(28px,min(2.38vw,4.86svh),40px)/1 var(--title);text-transform:uppercase;color:var(--hudson)}
.history h2 > span{display:block;white-space:nowrap}
.hfig{margin:0}
.hfig img{display:block;width:100%;object-fit:cover}
.hfig figcaption{margin-top:10px;font-size:13px;line-height:1.45}
.hfig figcaption b{display:block;font-weight:700}
.hfig figcaption span{display:block}
.hfig .src{color:var(--hudson)}
/* the set line breaks need the canvas's width; narrower, the lines wrap evenly */
@media (min-width:821px) and (max-width:1399px){.history br.d{display:none}.history p{text-wrap:pretty}}

/* 1 · Since 1830 */
.hs-open{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;column-gap:48px;min-height:clamp(560px,calc(100svh - 76px),900px);padding:clamp(20px,4.3svh,32px) var(--edge) clamp(24px,4.6svh,34px);background:var(--paper);color:var(--ink)}
.hs-open .words{padding-top:clamp(24px,5.7svh,42px)}
.hs-open h1{margin:0;font-size:clamp(120px,min(15.3vw,31.4svh),260px);line-height:.86;white-space:nowrap}
.hs-open .lede{margin:clamp(20px,4.6svh,34px) 0 0;max-width:none;font-size:clamp(20px,1.6vw,24px);line-height:1.4}
.hs-open .credit{margin:clamp(16px,3.5svh,26px) 0 0;font-size:16px;line-height:1.5;color:var(--hudson);opacity:1}
.hs-open .hfig{width:clamp(180px,min(17.9vw,36.5svh),300px)}
.hs-open .hfig img{aspect-ratio:468/759}
.hs-open .years{grid-column:1 / -1;display:flex;justify-content:space-between;margin-top:24px;border-top:2px solid var(--ink)}
.hs-open .years a{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;font:400 clamp(28px,min(2.65vw,5.4svh),44px)/1 var(--title);text-transform:uppercase}
.hs-open .years a:last-child{align-items:flex-end}
.hs-open .years a:hover .y{color:var(--door)}
.hs-open .tick{display:block;width:2px;height:14px;margin-bottom:8px;background:var(--ink)}
.hs-open .years .lb{display:none}

/* 2 · A church on Amity Street: Ink, the album page and the El in a row */
.hs-amity{display:grid;grid-template-columns:clamp(460px,42.3vw,700px) minmax(0,1fr);column-gap:clamp(24px,2.9vw,44px);align-items:start;min-height:clamp(560px,calc(100svh - 76px),900px);padding:clamp(32px,5.9svh,44px) var(--edge) clamp(32px,5.9svh,44px);background:var(--ink);color:var(--paper)}
.hs-amity h2{margin:0;font-size:var(--h2);line-height:.86}
.hs-amity .era{margin-top:12px;color:var(--spray)}
.hs-amity .words p:not(.era){margin:14px 0 0;font-size:17px;line-height:1.5;color:var(--mist)}
.hs-amity .words p.big{margin-top:26px;font-size:20px;line-height:1.45;color:var(--paper)}
.hs-amity .row{display:flex;gap:24px;align-items:flex-start;max-width:calc(46svh*2.033 + 24px);margin-top:44px}
.hs-amity .album{flex:1.411 1 0;min-width:0}
.hs-amity .el{flex:.622 1 0;min-width:0}
.hs-amity .album img{aspect-ratio:776/550}
.hs-amity .el img{aspect-ratio:168/270}
.hs-amity .hfig figcaption{margin-top:12px}
.hs-amity .hfig .src{color:var(--spray)}

/* 3 · A new home on West 46th Street: the 1925 atlas across the top, lot 22 marked */
.hs-west46{position:relative;min-height:clamp(560px,calc(100svh - 76px),900px);padding-bottom:clamp(24px,4svh,40px);background:var(--paper2);color:var(--ink)}
.hs-west46 .map{position:relative;height:min(22.5vw,400px);overflow:hidden}
.hs-west46 .map img{position:absolute;left:0;top:-23.41vw;width:100%;max-width:none;height:auto}
.hs-west46 .lot{pointer-events:none;position:absolute;left:37.57vw;top:1.16vw;width:9vw;height:17.71vw;border:5px solid var(--door)}
.hs-west46 .mapcap{position:absolute;left:var(--edge);bottom:16px;margin:0;padding:7px 12px;background:var(--paper2);font-size:13px;line-height:1.4}
.hs-west46 .mapcap b{font-weight:700}
.hs-west46 .tax{position:absolute;right:var(--edge);top:6.08vw;width:clamp(150px,14vw,240px)}
.hs-west46 .tax img{aspect-ratio:866/1300}
.hs-west46 .body{display:grid;grid-template-columns:minmax(0,440fr) minmax(0,680fr);column-gap:36px;padding:clamp(20px,3.6svh,36px) calc(var(--edge) + clamp(150px,14vw,240px) + 32px) 0 var(--edge)}
.hs-west46 h2{margin:0;font-size:var(--h2);line-height:.86}
.hs-west46 .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;font-size:17px;line-height:1.5}
.hs-west46 .cols p{margin:12px 0 0}
.hs-west46 .cols p:first-child{margin-top:0}

/* 4 · The sanctuary becomes a stage: Night red, the 1966 photo, Lanier's words */
.hs-stage{display:grid;grid-template-columns:47.6% minmax(0,1fr);min-height:clamp(560px,calc(100svh - 76px),900px);background:var(--night);color:var(--paper)}
.hs-stage .ph{position:relative;overflow:hidden}
.hs-stage .ph img{position:absolute;left:0;top:-30px;width:100%;height:calc(100% + 60px);object-fit:cover}
.hs-stage .cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:10px 56px 12px 24px;background:var(--night);font-size:13px;line-height:1.45;color:var(--paper2)}
.hs-stage .cap b{font-weight:700;color:var(--paper)}
.hs-stage .words{padding:clamp(28px,4.9svh,44px) var(--edge) clamp(28px,4.9svh,44px) clamp(28px,3.2vw,48px)}
.hs-stage h2{margin:0;font-size:var(--h2);line-height:.86}
.hs-stage .era{color:var(--spray)}
.hs-stage blockquote{margin:clamp(16px,3svh,28px) 0 0;padding:0}
.hs-stage blockquote .t{margin:0;font-size:clamp(34px,min(3.04vw,5.6svh),50px);line-height:.95}
.hs-stage cite{display:block;margin-top:8px;font-style:normal;font-size:14px;line-height:1.4;color:var(--paper2)}
.hs-stage .words > p:not(.era){margin:12px 0 0;font-size:17px;line-height:1.5}
.hs-stage blockquote + p{margin-top:clamp(14px,2.4svh,22px)!important}

/* 5 · Hard years, and new growth: Mist, type only, a row of big years */
.hs-growth{display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-height:clamp(560px,calc(100svh - 76px),900px);padding:clamp(40px,7.6svh,56px) var(--edge) clamp(36px,7svh,52px);background:var(--mist);color:var(--ink)}
.hs-growth .lead{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.hs-growth h2{margin:0;font-size:var(--h2);line-height:.86}
.hs-growth .say{padding-top:8px;font-size:clamp(18px,1.32vw,20px);line-height:1.5}
.hs-growth .say p{margin:0}
.hs-growth .say p + p{margin-top:14px}
.hs-growth .yrs{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.hs-growth .y{margin:0;font:400 clamp(96px,min(10.3vw,21svh),170px)/.86 var(--title);color:var(--hudson)}
.hs-growth .yrs li{flex:1 1 0;min-width:0}
.hs-growth .yrs p:not(.y){margin:14px 0 0;font-size:17px;line-height:1.45;text-wrap:pretty}
@media (min-width:821px) and (max-width:1399px){
  .hs-onstage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hs-onstage .lights h3{font-size:44px}
  .hs-onstage li b{font-size:21px}
  .hs-west46 .body{grid-template-columns:auto minmax(0,1fr)}
}
@media (min-width:821px) and (max-width:1399px){.hs-growth .say{max-width:58%}.hs-growth .yrs li{flex:1 1 0;min-width:0}.hs-growth .yrs p:not(.y){white-space:normal}}

/* 6 · On our stage: Hudson, the six companies as a bill, Names in lights */
.hs-onstage{--pad:clamp(28px,5svh,48px);display:grid;grid-template-columns:clamp(520px,42.3vw,700px) minmax(0,1fr);column-gap:clamp(32px,3.2vw,48px);align-items:start;min-height:clamp(560px,calc(100svh - 76px),900px);padding:var(--pad) var(--edge);background:var(--hudson);color:var(--paper)}
.hs-onstage h2{margin:0;font-size:var(--h2);line-height:.86;white-space:nowrap}
.hs-onstage .era{color:var(--spray)}
.hs-onstage .cos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;align-items:start;margin-top:clamp(18px,3.5svh,34px)}
.hs-onstage .cos > div{display:flex;flex-direction:column;gap:clamp(12px,2.4svh,22px)}
.hs-onstage .yr{margin:0;font:400 24px/1 var(--title);text-transform:uppercase;color:var(--spray)}
.hs-onstage article h3{margin:6px 0 0;font-size:16px;line-height:1.35;font-weight:700}
.hs-onstage article p:not(.yr){margin:4px 0 0;font-size:15px;line-height:1.45;color:var(--mist)}
.hs-onstage .lights{align-self:stretch;margin:calc(-1 * var(--pad)) calc(-1 * var(--edge)) calc(-1 * var(--pad)) 0;padding:calc(var(--pad) + 4px) var(--edge) var(--pad) clamp(32px,3.2vw,48px);background:var(--ink)}
.hs-onstage .lights h3{margin:0;font-size:clamp(44px,min(4.2vw,8.6svh),68px);line-height:.9;color:var(--paper)}
.hs-onstage ul{margin:clamp(12px,2.2svh,22px) 0 0;column-count:3;column-gap:24px}
.hs-onstage li{break-inside:avoid;margin:0 0 clamp(4px,.9svh,10px)}
.hs-onstage li b{display:block;font:400 24px/.95 var(--title);text-transform:uppercase}
.hs-onstage li span{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--spray)}

/* 7 · Every production on record: search on the left, the list scrolls beside it */
.hs-prod{display:grid;grid-template-columns:clamp(360px,34vw,580px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:64px;height:clamp(560px,calc(100svh - 76px),900px);padding:clamp(32px,6.5svh,48px) var(--edge) clamp(24px,4.9svh,36px);background:var(--paper);color:var(--ink)}
.hs-prod h2{margin:0;font-size:var(--h2);line-height:.86}
.hs-prod .era{font-size:clamp(26px,min(2.25vw,4.6svh),36px)}
.hs-prod label{display:block;margin-top:clamp(16px,3.2svh,24px);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.hs-prod input{display:block;width:100%;min-height:48px;margin-top:8px;padding:0 14px;border:2px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:16px var(--text)}
.hs-prod input:focus-visible{outline:3px solid var(--door);outline-offset:2px}
.hs-prod .og{display:flex;align-items:flex-end;gap:18px;margin-top:clamp(18px,3.5svh,26px)}
.hs-prod .og .crop{position:relative;flex:none;width:240px;height:clamp(140px,25.4svh,188px);overflow:hidden}
.hs-prod .og img{position:absolute;left:-10px;top:-9px;width:262px;max-width:none;height:auto}
.hs-prod .og .gap{margin-top:4px}
.hs-prod .list{min-height:0;overflow-y:auto;padding-right:12px}
/* the list's scrollbar: a narrow Hudson bar riding a thin Spray rail */
.hs-prod .list::-webkit-scrollbar{width:14px}
.hs-prod .list::-webkit-scrollbar-track{background:linear-gradient(90deg,transparent 6px,var(--spray) 6px,var(--spray) 8px,transparent 8px)}
.hs-prod .list::-webkit-scrollbar-thumb{min-height:56px;border:0 solid transparent;border-width:0 4px;background:var(--hudson) padding-box}
.hs-prod .list::-webkit-scrollbar-thumb:hover{background-color:var(--ink)}
@supports not selector(::-webkit-scrollbar){.hs-prod .list{scrollbar-width:thin;scrollbar-color:var(--hudson) transparent}}
.hs-prod .list h3{margin:0;padding:18px 0 6px;font:400 30px/1 var(--title);text-transform:uppercase;color:var(--hudson)}
.hs-prod .prow{display:flex;gap:16px;padding:9px 0;border-bottom:1px solid var(--spray)}
.hs-prod .py{flex:none;width:48px;font:400 22px/1.05 var(--title)}
.hs-prod .pt{min-width:0;font-size:16px;line-height:1.4;font-weight:600}
.hs-prod .aw{margin-left:10px;padding:1px 7px;border:1px solid var(--hudson);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--hudson);white-space:nowrap}
.hs-prod .pm{display:block;margin-top:2px;font-size:14px;line-height:1.45;font-weight:400;color:var(--hudson)}
.hs-prod .note{margin:0;padding:18px 0 8px;font-size:13px;line-height:1.5;color:var(--hudson)}
.hs-prod .none{margin:0;padding:18px 0;font-size:16px}

/* 8 · Church, theater, pantry: Spray, where it stands today */
.hs-today{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;column-gap:48px;min-height:clamp(560px,calc(100svh - 76px),900px);padding:clamp(32px,6.5svh,48px) var(--edge) clamp(40px,7svh,52px);background:var(--spray);color:var(--ink)}
.hs-today h2{margin:0;font-size:clamp(112px,min(13.2vw,27svh),220px);line-height:.94}
.hs-today .words{padding-bottom:8px}
.hs-today .era{margin:0}
.hs-today .words > p:not(.era){margin:16px 0 0;font-size:clamp(18px,1.39vw,21px);line-height:1.5}
.hs-today .era + p{margin-top:18px!important}
.hs-today .btn{margin-top:30px}

/* Any History picture opens large, with its caption under it */
.history img{cursor:zoom-in}
.hzoom{width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:clamp(56px,8svh,72px) var(--gutter) clamp(20px,4svh,36px);border:0;background:var(--ink);color:var(--paper)}
.hzoom::backdrop{background:var(--ink)}
.hzoom figure{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:14px;height:100%;margin:0}
.hzoom img{display:block;max-width:100%;max-height:100%;min-height:0;object-fit:contain;cursor:zoom-out}
.hzoom figcaption{max-width:72ch;font-size:14px;line-height:1.45;text-align:center;color:var(--paper2)}
.hzoom figcaption b{font-weight:700;color:var(--paper)}
.hzoom figcaption span{display:block}
.hzoom figcaption .src{color:var(--spray)}
.hzoom br{display:none}
.hzoom .x{position:absolute;top:clamp(14px,2.4svh,20px);right:var(--gutter);min-height:40px;padding:0 16px;border:2px solid var(--paper);background:none;color:var(--paper);font:600 14px var(--text);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.hzoom .x:hover,.hzoom .x:focus-visible{background:var(--paper);color:var(--ink);outline:none}

@media (max-width:820px){
  .history h2 > span{white-space:normal}
  .hs-open{display:block;min-height:0;padding:0 var(--gutter) 36px}
  .hs-open .words{padding-top:28px}
  .hs-open h1{font-size:140px;white-space:normal}
  .hs-open .lede{margin-top:24px;font-size:18px;line-height:1.45}
  .hs-open .credit{margin-top:18px;font-size:15px}
  .hs-open .hfig{width:236px;margin-top:32px}
  .hs-open .years{flex-direction:column;margin:40px 0 0 4px;border-top:0;border-left:2px solid var(--ink)}
  .hs-open .years a,.hs-open .years a:last-child{flex-direction:row;align-items:center;gap:14px;min-height:58px;font-size:38px}
  .hs-open .tick{flex:none;width:18px;height:2px;margin:0}
  .hs-open .years .y{flex:none;min-width:62px}
  .hs-open .years .lb{display:block;font:400 15px/1.35 var(--text);text-transform:none}
  .hs-amity{display:block;min-height:0;padding:64px 0}
  .hs-amity .words{padding:0 var(--gutter)}
  .hs-amity h2{font-size:var(--h2)}
  .hs-amity .era{margin-top:10px;font-size:32px}
  .hs-amity .words p.big{margin-top:22px;font-size:18px}
  .hs-amity .row{flex-direction:column;gap:28px;max-width:none;margin-top:32px;padding:0 var(--gutter)}
  .hs-amity .album{flex:none;width:100%}
  .hs-amity .el{flex:none;width:220px}
  .hs-amity .hfig figcaption{margin-top:10px}
  .hs-west46{display:flex;flex-direction:column;min-height:0;padding-bottom:64px}
  .hs-west46 .map{height:auto;padding-top:250px;overflow:hidden}
  .hs-west46 .map img{left:-150px;top:-150px;width:820px}
  .hs-west46 .lot{left:158px;top:51px;width:74px;height:145px;border-width:4px}
  .hs-west46 .mapcap{position:static;margin:10px var(--gutter) 0;padding:0;background:none}
  .hs-west46 .mapcap span{color:var(--hudson)}
  .hs-west46 .body{order:3;display:block;padding:36px var(--gutter) 0}
  .hs-west46 h2{font-size:var(--h2);line-height:.88}
  .hs-west46 .era{font-size:30px}
  .hs-west46 .cols{display:block;margin-top:22px}
  .hs-west46 .cols p,.hs-west46 .cols p:first-child{margin:14px 0 0}
  .hs-west46 .cols > div:first-child p:first-child{margin-top:0}
  .hs-west46 .tax{order:4;position:static;width:200px;margin:30px var(--gutter) 0}
  .hs-stage{display:block;min-height:0;padding-bottom:64px}
  .hs-stage .ph{overflow:visible}
  .hs-stage .ph img{position:static;width:100%;height:300px;object-position:50% 40%}
  .hs-stage .cap{position:static;padding:10px var(--gutter) 0;background:none}
  .hs-stage .words{padding:36px var(--gutter) 0}
  .hs-stage h2{font-size:var(--h2);line-height:.88}
  .hs-stage .era{font-size:30px}
  .hs-stage blockquote{margin-top:26px}
  .hs-stage blockquote .t{font-size:40px}
  .hs-stage .words > p:not(.era){margin-top:14px}
  .hs-growth{display:block;min-height:0;padding:64px var(--gutter)}
  .hs-growth .lead{display:block}
  .hs-growth h2{font-size:var(--h2);line-height:.88}
  .hs-growth .era{font-size:30px}
  .hs-growth .say{padding-top:0;margin-top:22px;font-size:18px}
  .hs-growth .yrs{flex-direction:column;gap:22px;margin-top:36px}
  .hs-growth .yrs li{display:flex;align-items:baseline;gap:18px}
  .hs-growth .y{flex:none;width:96px;font-size:72px;line-height:.9}
  .hs-growth .yrs p:not(.y){margin:0;white-space:normal}
  .hs-onstage{display:block;min-height:0;padding:64px var(--gutter)}
  .hs-onstage h2{font-size:var(--h2);line-height:.88;white-space:normal}
  .hs-onstage .era{font-size:30px}
  .hs-onstage .cos{display:flex;flex-direction:column;gap:24px;margin-top:30px}
  .hs-onstage .cos > div{gap:24px}
  .hs-onstage .yr{font-size:26px}
  .hs-onstage article p:not(.yr){font-size:16px}
  .hs-onstage .lights{margin:48px calc(-1 * var(--gutter)) -64px;padding:44px var(--gutter) 56px}
  .hs-onstage ul{margin-top:20px;column-count:2;column-gap:20px}
  .hs-prod{display:block;height:auto;padding:56px var(--gutter) 48px}
  .hs-prod h2{font-size:var(--h2)}
  .hs-prod .era{font-size:30px}
  .hs-prod label{margin-top:22px}
  .hs-prod .og{display:none}
  .hs-prod .list{height:600px;margin-top:20px}
  .hs-today{display:block;min-height:0;padding:64px var(--gutter)}
  .hs-today h2{font-size:112px}
  .hs-today .words{padding:0}
  .hs-today .era{margin-top:28px;font-size:30px}
  .hs-today .era + p{margin-top:16px!important}
  .hs-today .words > p:not(.era){margin-top:14px;font-size:18px}
  .hs-today .btn{margin-top:28px}
}

/* ---------- smaller laptops and tablets on their side (October 30) ----------
   The pages are drawn at 1512 by 740 and stay exactly as drawn there and larger. Narrower or
   shorter screens (a 13-inch laptop at 1280, a 1366 by 768 laptop, an iPad on its side) keep
   the same type sizes and get room back from layout instead: wider text columns, fields side
   by side, fewer rows. Measure with tools/fit_check.mjs --at 1366x657,1280x680,1024x680. */

/* set breaks and forced breaks were placed for the drawn column width; in a narrower column
   they leave one word alone on a line, so the lines wrap evenly there instead */
@media (min-width:821px) and (max-width:1199px){
  .fp-crew .say br,.ct-visit figcaption br,.gv-other .receipt br,.th-rope .about br,.ct-visit .note br:not(.m){display:none}
  .fp-crew .say,.ct-visit figcaption,.gv-other .receipt,.th-rope .about p,.th-booth dd,.ct-visit .note,.fp-open .addr{text-wrap:pretty}
  .th-house .head p br:not(.m){display:none}
  .th-house .head p{text-wrap:pretty}
  .th-rope .about .credit{text-wrap:balance}
  .hs-west46 .mapcap{right:calc(var(--edge) + clamp(150px,14vw,240px) + 16px)}
  .fp-3000 .block{width:auto;min-width:clamp(380px,34.4vw,560px)}
  .fp-3000 .block p:last-child{white-space:nowrap}
}

/* Home: the first row of Sunday cards shows whole under the heading */
@media (min-width:821px){.card{height:clamp(400px,calc(100svh - 254px),470px)}}

/* Screens under 700px tall: leave air under the sections that ended at the screen's edge */
@media (min-width:821px) and (max-height:700px){
  .company-ink img{max-height:42svh}
  .three-doors{--pad:clamp(36px,6svh,110px)}
  .band-door .body{height:clamp(280px,calc(100svh - 76px - 2*var(--pad) - var(--h)*.86 - var(--gap) - 48px - 2*var(--strip)),600px)}
  .th-rope .shot{height:clamp(280px,min(39.7vw,48svh),572px)}
  .th-booth .view{height:clamp(260px,min(37.5vw,44svh),540px)}
  .th-1963 .yr{padding-top:16px;font-size:clamp(130px,min(27.8vw,21svh),400px)}
  .th-1963 .company{width:70%}
}

/* History */
@media (min-width:821px) and (max-width:1399px),(min-width:821px) and (max-height:700px){
  .hs-stage blockquote .t{text-wrap:balance}
  .hs-stage .words{padding-top:clamp(24px,4.4svh,44px);padding-bottom:clamp(24px,4.4svh,44px)}
  /* the stage lights in the Give photo sit behind the menu on narrower screens */
  .gv-open .ph::before{content:"";position:absolute;left:0;right:0;top:0;height:140px;z-index:1;background:linear-gradient(180deg,rgba(5,22,31,.7) 0%,rgba(5,22,31,0) 100%)}
  .hs-amity{grid-template-columns:minmax(0,54fr) minmax(0,46fr)}
  .hs-amity .row{margin-top:clamp(24px,5svh,44px)}
  .hs-west46 .map{height:clamp(19.5vw,30svh,min(22.5vw,400px))}
  /* On our stage: the bill runs across the screen in three columns, Names in lights follows it as a list */
  .hs-onstage{display:block}
  .hs-onstage .cos{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3svh,26px) 36px}
  .hs-onstage .cos > div{display:contents}
  .hs-onstage .lights{margin:clamp(40px,7svh,64px) calc(-1 * var(--edge)) calc(-1 * var(--pad));padding:var(--pad) var(--edge)}
  .hs-onstage .lights h3{font-size:52px}
  .hs-onstage ul{column-count:5}
  .hs-onstage li b{font-size:24px}
}
@media (min-width:821px) and (max-width:1199px){
  .hs-onstage ul{column-count:4}
  .hs-stage{grid-template-columns:42% minmax(0,1fr)}
  .hs-stage .words{padding-top:24px;padding-bottom:24px}
  .hs-stage blockquote .t{font-size:30px}
  .hs-amity .el figcaption b{display:inline}
  .hs-west46 .body{display:block;padding-right:var(--edge)}
  .hs-west46 .body > div:first-child{margin-right:calc(clamp(150px,14vw,240px) + 32px)}
  .hs-west46 .cols{margin-top:18px}
}

/* Theater, 1963: the trailer link stays on one line in the narrower card */
@media (min-width:821px) and (max-width:1399px),(min-width:821px) and (max-height:700px){
  .th-1963 .film{width:80%}
  .th-1963 .film .row a{font-size:13px;letter-spacing:.06em;white-space:nowrap}
}

/* Theater, the booth: the lighting package gets a wider column, so its lines wrap less */
@media (min-width:821px) and (max-width:1399px){
  .th-booth .view{grid-column:1 / span 6}
  .th-booth .board{grid-column:7 / span 1}
  .th-booth .rig{grid-column:8 / span 5}
  .th-booth .head p{grid-column:8 / span 5}
}

/* Forms: the Send button stays on the first screen. The photo gives the form more width,
   so the choices sit on fewer rows */
@media (min-width:821px) and (max-width:1399px),(min-width:821px) and (max-height:700px){
  .th-inquire .stage h2{font-size:clamp(72px,min(6.4vw,12svh),110px)}
  .th-inquire .lede{font-size:18px}
  .th-inquire{grid-template-columns:38% minmax(0,1fr)}
  .th-form .chips{gap:6px}
  .th-form .chip{padding:0 10px}
  .th-form > label.full:has(textarea){grid-column:span 4}
  .th-form .full.send-row{grid-column:span 2;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:6px}
  .th-form .send-row .btn{justify-content:center;padding:0 16px}
}
@media (min-width:1200px) and (max-width:1399px),(min-width:1200px) and (max-height:700px){
  .th-prod dl{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px}
}
@media (min-width:821px) and (max-width:1199px){
  .ct-open{grid-template-columns:38% minmax(0,1fr)}
  .ct-open .ask{padding-left:32px}
  .ct-open .ways{column-gap:28px}
  .ct-form > label.msg{grid-column:span 4}
  .ct-form .send-row{grid-column:span 2;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:4px}
  .ct-form .send-row .btn{justify-content:center;padding:0 16px}
  .ct-form .check{min-height:36px;font-size:14px}
}

/* an iPad held upright (821 to 999 wide) has room to scroll but not to squeeze: headings may
   wrap, and the form's message box and Send button keep their own full-width rows */
@media (min-width:821px) and (max-width:999px){
  .fp-open h1 span{display:block}
  .th-form > label.full:has(textarea),.th-form .full.send-row,.ct-form > label.msg,.ct-form .send-row{grid-column:1 / -1}
  .th-form .full.send-row,.ct-form .send-row{flex-direction:row;align-items:center;justify-content:space-between}
  .th-form .send-row .btn,.ct-form .send-row .btn{padding:0 32px}
}