/* ==========================================================================
   eXchange — Design System v1 (production port)
   Source of truth: design-system/design.md + eXchangeDesignSystem.html
   No inline styles anywhere (strict CSP: style-src 'self').
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:#FFFDF8;--surface:#FBF3E4;--ink:#26221C;--muted:#575045;
  --line:rgba(38,34,28,.16);
  --coral:#C8502E;--coral-text:#8A3315;--blue:#2A63C8;--blue-text:#1B4489;
  --green:#3E9E58;--green-text:#22603A;--yellow:#F2A922;
  --tape:rgba(242,169,34,.85);
  --btn-bg:#8A3315;--btn-fg:#FFFDF8;--focus:#1B4489;
  --stripe:rgba(140,130,110,.16);--stripe-soft:rgba(140,130,110,.06);
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Inclusive Sans',system-ui,sans-serif;
  --font-mono:ui-monospace,Menlo,monospace;
}
body[data-theme="dark"]{
  --bg:#1E1B16;--surface:#2A261F;--ink:#F5F1E8;--muted:#C9C2B4;
  --line:rgba(245,241,232,.18);
  --coral:#F0906E;--coral-text:#F0906E;--blue:#8FB4F2;--blue-text:#8FB4F2;
  --green:#85C99B;--green-text:#85C99B;--yellow:#F2A922;
  --tape:rgba(242,169,34,.7);
  --btn-bg:#F0906E;--btn-fg:#1E1B16;--focus:#F2A922;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6;transition:background-color .25s ease,color .25s ease}
img,svg,video{max-inline-size:100%}
a{color:var(--blue-text);text-underline-offset:3px}
a:hover{color:var(--coral-text)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
button{flex:none;white-space:nowrap;font:inherit}
input,select,textarea{font:inherit}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

.skip{position:absolute;left:-9999px;top:0;z-index:99}
.skip:focus{left:16px;top:12px;background:var(--btn-bg);color:var(--btn-fg);padding:12px 20px;border-radius:8px;font-weight:600;text-decoration:none}

/* ---------- 3. Layout primitives ---------- */
.wrap{max-width:1320px;margin:0 auto;padding-left:clamp(18px,4vw,24px);padding-right:clamp(18px,4vw,24px)}
.section{padding-top:clamp(40px,7vw,56px);padding-bottom:8px}
.section-end{padding-bottom:64px}
.pathway{height:5px;background:linear-gradient(90deg,var(--yellow) 25%,var(--coral) 25% 50%,var(--blue) 50% 75%,var(--green) 75%)}
@media(prefers-reduced-motion:no-preference){
  .site-header .pathway--draw{animation:pathway-draw .7s ease-out both;transform-origin:left}
  @keyframes pathway-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ---------- 4. Typography helpers ---------- */
.kicker{margin:0 0 6px;font:600 .75rem var(--font-mono);letter-spacing:.08em;color:var(--coral-text);text-transform:uppercase}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.section-head .h-section{margin-bottom:0}
.kicker--muted{color:var(--muted)}
.h-page{margin:0 0 10px;font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4.5vw,3rem);letter-spacing:-0.02em;line-height:1.1;text-wrap:pretty}
.h-section{margin:0 0 24px;font-family:var(--font-display);font-weight:700;font-size:1.7rem;letter-spacing:-0.01em;text-wrap:pretty}
.lede{margin:0;font-size:1.15rem;line-height:1.65;max-width:62ch;color:var(--muted);text-wrap:pretty}
.mono-meta{font:500 .85rem var(--font-mono);color:var(--muted)}

/* ---------- 5. Buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border-radius:99px;font-weight:600;font-size:1.05rem;cursor:pointer;text-decoration:none;border:1.5px solid transparent;transition:transform .16s ease-out,background-color .16s ease-out,color .16s ease-out,border-color .16s ease-out}
.btn--primary{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.btn--secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--small{min-height:44px;padding:10px 20px;font-size:.95rem}
.link-standalone{display:inline-flex;align-items:center;min-height:44px;font-weight:600;transition:transform .16s ease-out,color .16s ease-out}
@media(hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn--primary:hover{background:color-mix(in srgb,var(--btn-bg) 86%,#000);color:var(--btn-fg)}
  body[data-theme="dark"] .btn--primary:hover{background:color-mix(in srgb,var(--btn-bg) 86%,#fff);color:var(--btn-fg)}
  .btn--secondary:hover{background:var(--ink);color:var(--bg)}
  .link-standalone:hover{transform:translateX(2px)}
  .card{transition:transform .18s ease-out}
  .card:hover{transform:translateY(-3px)}
  .card .xmark{transition:transform .18s ease-out}
  .card:hover .xmark{transform:rotate(-4deg) scale(1.06)}
  .theme-toggle:hover,.menu-btn:hover{border-color:var(--ink)}
}
.btn:active{transform:translateY(0) scale(.97)}
@media(hover:none){.btn:active{transform:scale(.97)}}

/* ---------- 6. Texture: tape, dots, tags, x-mark, squiggle, placeholders ---------- */
.tape{position:absolute;width:60px;height:17px;background:var(--tape)}
.tape--tl{top:-10px;left:-14px;transform:rotate(-3deg)}
.tape--tr{top:-9px;right:36px;transform:rotate(2deg)}
.tape--corner-tl{top:-9px;left:-10px;width:58px;height:16px;transform:rotate(-40deg)}
.tape--corner-br{bottom:-9px;right:-10px;width:58px;height:16px;transform:rotate(-40deg)}
.tape--top-center{top:-9px;left:50%;width:56px;height:15px;transform:translateX(-50%) rotate(-2deg)}
.dot{width:13px;height:13px;border-radius:50%;flex:none}
.dot--small{width:10px;height:10px}
.dot--yellow{background:var(--yellow)}.dot--blue{background:var(--blue)}
.dot--coral{background:var(--coral)}.dot--green{background:var(--green)}
.tag{font:600 .7rem var(--font-mono);background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:3px 7px}
.xmark{flex:none}
.xmark .xa{stroke:var(--coral)}.xmark .xb{stroke:var(--blue)}
.xmark--schools .xa{stroke:var(--yellow)}.xmark--schools .xb{stroke:var(--blue)}
.xmark--arts .xa{stroke:var(--coral)}.xmark--arts .xb{stroke:var(--yellow)}
.xmark--artists .xa{stroke:var(--green)}.xmark--artists .xb{stroke:var(--coral)}
.photo-ph{position:relative;border-radius:12px;background:repeating-linear-gradient(45deg,var(--stripe),var(--stripe) 9px,var(--stripe-soft) 9px,var(--stripe-soft) 18px);display:flex;align-items:center;justify-content:center}
.photo-ph__label{font:500 .75rem var(--font-mono);color:var(--muted);text-align:center;padding:0 16px}
.squiggle{flex:none}
.squiggle path{stroke:var(--coral)}
.squiggle--yellow path{stroke:var(--yellow)}

/* ---------- 7. Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:baseline;font-family:var(--font-display);font-weight:700;font-size:1.85rem;letter-spacing:-0.02em;color:var(--ink);text-decoration:none;min-height:44px;align-self:center}
.brand:hover{color:var(--ink)}
.brand .xmark{width:.82em;height:.82em;margin:0 -.06em;transform:translateY(.1em)}
.site-footer .brand{align-self:flex-start}
.hdr-ctl{display:flex;align-items:center;gap:16px;margin-left:auto}
.menu-ctl{display:none;gap:16px;flex-wrap:wrap;align-items:center}
@media(max-width:779px){.hdr-ctl{display:none}.menu-ctl{display:flex}}
.menu-btn{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 18px;border:1.5px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);font-weight:600;font-size:.95rem;cursor:pointer}
@media(max-width:779px){.menu-btn{margin-left:auto}}
.menu-btn__bars{display:flex;flex-direction:column;gap:4px}
.menu-btn__bars span{display:block;width:18px;height:2.5px;border-radius:2px;background:var(--ink)}

/* text-size slider + theme toggle */
.exr{-webkit-appearance:none;appearance:none;width:120px;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--yellow) var(--fill,25%),var(--line) var(--fill,25%));cursor:pointer}
.exr::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--bg);border:3px solid var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.exr::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--bg);border:3px solid var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ctl-cluster{display:flex;align-items:center;gap:10px}
.ctl-cluster--pill{background:var(--surface);border-radius:99px;padding:10px 18px;min-height:44px}
.ctl-label{font:600 .78rem var(--font-mono);color:var(--muted)}
.ctl-value{font:600 .78rem var(--font-mono);color:var(--muted);min-width:38px}
.theme-toggle{display:flex;align-items:center;gap:9px;min-height:44px;padding:6px 16px;border:1.5px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);font-weight:600;font-size:.9rem;cursor:pointer}
.theme-toggle__track{display:inline-block;width:30px;height:16px;border-radius:99px;background:var(--line);position:relative}
.theme-toggle__knob{position:absolute;top:2px;left:0;width:12px;height:12px;border-radius:50%;background:var(--yellow);transform:translateX(2px);transition:transform .2s}
.theme-toggle[aria-pressed="true"] .theme-toggle__knob{transform:translateX(16px)}

/* ---------- 8. Menu dialog ---------- */
.menu-dialog{padding:0;border:none;background:var(--bg);color:var(--ink);width:100%;max-width:none;height:100%;max-height:none;margin:0}
.menu-dialog::backdrop{background:var(--bg)}
/* Desktop: right-hand drawer instead of full-screen. */
@media(min-width:780px){
  .menu-dialog{width:min(440px,100%);max-width:440px;margin-left:auto;box-shadow:-12px 0 40px rgba(38,34,28,.18)}
  .menu-dialog::backdrop{background:rgba(38,34,28,.35)}
  .menu-dialog[open]{animation:drawer-in .22s ease-out}
  @keyframes drawer-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
  @media(prefers-reduced-motion:reduce){.menu-dialog[open]{animation:none}}
}
.menu-dialog__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px}
.menu-dialog__nav{display:flex;flex-direction:column;padding-top:16px;padding-bottom:8px}
.menu-dialog__link{display:flex;align-items:center;gap:16px;min-height:56px;padding:8px 4px;font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,4.5vw,2.1rem);letter-spacing:-0.02em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.menu-dialog__link:hover{color:var(--ink)}
.menu-dialog__link .squiggle{width:46px;height:10px;opacity:0}
.menu-dialog__link[aria-current="page"] .squiggle{opacity:1}
.menu-dialog__foot{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding-top:20px;padding-bottom:44px}
.menu-dialog__mail{margin-left:auto;font-weight:600;font-size:.95rem;min-height:44px;display:inline-flex;align-items:center}
/* Menu open/close motion (JS toggles .is-closing; reduced-motion safe) */
@media(max-width:779px){.menu-dialog[open]{animation:menu-fade .18s ease-out}@keyframes menu-fade{from{opacity:0}to{opacity:1}}}
.menu-dialog.is-closing{transition:transform .18s ease-in,opacity .18s ease-in;opacity:0}
@media(min-width:780px){.menu-dialog.is-closing{transform:translateX(100%)}}

/* ---------- 9. Block: hero (home) ---------- */
.b-hero{background:var(--surface)}
.b-hero__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:40px;align-items:center;padding-top:clamp(48px,8vw,72px);padding-bottom:clamp(40px,7vw,64px)}
.b-hero__copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start;position:relative}
.b-hero h1{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,5.5vw,3.6rem);line-height:1.08;letter-spacing:-0.02em;max-width:15ch;text-wrap:pretty}
.b-hero h1 mark{background:linear-gradient(transparent 58%,rgba(242,169,34,.5) 58%);color:inherit}
.b-hero__lede{margin:0;font-size:1.25rem;line-height:1.6;max-width:52ch;color:var(--muted);text-wrap:pretty}
.b-hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.b-hero__media{display:flex;flex-direction:column;gap:12px;justify-content:center}
.b-hero__photo{height:clamp(220px,30vw,340px)}
.b-hero__frame{position:relative;border-radius:12px;aspect-ratio:3/2;background:var(--surface)}
.b-hero__img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}
/* Tape strips hang OUTSIDE the photo edge: pseudo-elements on an unclipped
   wrapper (the image clips itself with border-radius). */
.taped-corners{position:relative}
.taped-corners::before,.taped-corners::after{content:"";position:absolute;width:58px;height:16px;background:var(--tape);z-index:2;pointer-events:none}
.taped-corners::before{top:-9px;left:-10px;transform:rotate(-40deg)}
.taped-corners::after{bottom:-9px;right:-10px;transform:rotate(-40deg)}
.b-hero__caption{margin:0;display:flex;align-items:center;gap:8px;font:500 .75rem var(--font-mono);color:var(--muted)}
.b-hero__caption .xmark{width:15px;height:15px}
.has-tape{position:relative}

/* ---------- 10. Block: card grid ---------- */
.b-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:var(--surface);border-radius:12px;padding:26px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.card--door{border-top:6px solid var(--yellow)}
.card--door-arts{border-top-color:var(--coral)}
.card--door-artists{border-top-color:var(--green)}
.card .xmark{width:30px;height:30px}
.card h3,.card h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:1.25rem}
.card p{margin:0;font-size:1rem;line-height:1.6;color:var(--muted)}
.card .btn,.card .link-standalone{margin-top:auto}
.card--news{gap:8px;padding:24px}
.card--news h2{font-size:1.2rem}
.card__links{display:flex;gap:16px;margin-top:auto}
.card__photo{margin:-26px -26px 6px;border-radius:12px 12px 0 0;overflow:hidden;align-self:stretch}
.card__photo .photo-ph{border-radius:0;height:140px}
.chip{display:inline-flex;align-items:center;gap:7px;font:600 .72rem var(--font-mono);text-transform:uppercase}
.chip--green{color:var(--green-text)}.chip--blue{color:var(--blue-text)}
.chip--coral{color:var(--coral-text)}.chip--muted{color:var(--muted)}

/* ---------- 11. Block: list rows ---------- */
.b-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.b-rows--narrow{max-width:900px}
.row{display:flex;align-items:center;gap:14px;padding:16px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.row__label{font:600 .72rem var(--font-mono);letter-spacing:.06em;color:var(--muted);width:96px;flex:none;text-transform:uppercase}
.row__date{font:500 .85rem var(--font-mono);color:var(--muted);width:104px;flex:none}
.row__title{font-size:1.05rem;font-weight:600;flex:1;min-width:200px}
.row__sub{display:block;font-size:.95rem;font-weight:400;color:var(--muted)}
.row__meta{font:500 .8rem var(--font-mono);color:var(--muted)}

/* ---------- 12. Block: CTA band ---------- */
.b-cta{background:var(--surface);border-radius:14px;padding:36px 30px;position:relative;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.b-cta__copy{flex:1;min-width:260px}
.b-cta__copy h2{margin:0 0 8px;font-family:var(--font-display);font-weight:700;font-size:1.5rem}
.b-cta__copy p{margin:0;font-size:1.05rem;line-height:1.6;color:var(--muted)}

/* ---------- 13. Forms ---------- */
.form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:.95rem}
.field--inline label{font-size:.85rem}
.input{min-height:48px;padding:10px 16px;border:1.5px solid var(--ink);border-radius:10px;background:var(--bg);color:var(--ink);font-size:1rem;width:min(280px,70vw)}
.input--wide{width:100%}
textarea.input{padding:12px 16px;resize:vertical}
select.input{width:auto;min-width:min(280px,70vw)}
.form-panel{background:var(--surface);border-radius:14px;padding:30px;display:flex;flex-direction:column;gap:18px}
.form-panel .btn{align-self:flex-start}
.form-error{color:var(--coral-text);font-weight:600;margin:0}
.form-note{margin:0;font-size:.95rem;color:var(--muted)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 14. Block: event cards ---------- */
.b-events{display:flex;flex-direction:column;gap:14px}
.event-card{background:var(--surface);border-radius:12px;padding:22px 24px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.event-card__date{flex:none;text-align:center;background:var(--bg);border-radius:10px;padding:10px 16px;border:1px solid var(--line)}
.event-card__month{font:600 .72rem var(--font-mono);color:var(--coral-text);text-transform:uppercase}
.event-card__day{font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1}
.event-card__body{flex:1;min-width:220px}
.event-card__body h3{margin:0 0 4px;font-family:var(--font-display);font-weight:700;font-size:1.2rem}
.event-card__body p{margin:0;font-size:1rem;color:var(--muted)}

/* ---------- 15. Block: full-bleed slide ---------- */
.b-slide{background:var(--surface);min-height:76vh;display:flex;align-items:center;position:relative;overflow:hidden}
.b-slide__bg{position:absolute;right:-4%;top:50%;transform:translateY(-50%);width:min(48vw,540px);height:min(48vw,540px);opacity:.13}
.b-slide__bg path{stroke-width:9}
.b-slide__inner{position:relative;width:100%;padding-top:64px;padding-bottom:64px;display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.b-slide h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,6.5vw,4.6rem);line-height:1.05;letter-spacing:-0.02em;max-width:16ch;text-wrap:pretty}

/* ---------- 16. Block: pull quote ---------- */
.b-quote{margin:0;max-width:820px;display:flex;flex-direction:column;gap:16px}
.b-quote p{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,3vw,2rem);line-height:1.3;letter-spacing:-0.01em;text-wrap:pretty}
.b-quote .squiggle{width:110px;height:12px}
.b-quote footer{font:600 .8rem var(--font-mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}

/* ---------- 17. Block: text + taped image ---------- */
.b-textimg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:36px;align-items:center}
.b-textimg__copy{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.b-textimg__copy h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:1.6rem;letter-spacing:-0.01em;text-wrap:pretty}
.b-textimg__copy p{margin:0;font-size:1.1rem;line-height:1.7}
.b-textimg .photo-ph{height:clamp(200px,26vw,300px)}

/* ---------- 18. Block: stats band ---------- */
.b-stats{background:var(--ink);color:var(--bg)}
.b-stats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;padding-top:clamp(36px,6vw,60px);padding-bottom:clamp(36px,6vw,60px)}
.b-stats__num{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1}
.b-stats__label{margin:8px 0 0;font:600 .78rem var(--font-mono);letter-spacing:.08em;opacity:.75;text-transform:uppercase}

/* ---------- 19. Block: accordion ---------- */
.b-accordion{display:flex;flex-direction:column;gap:10px;max-width:900px}
.b-accordion details{background:var(--surface);border-radius:10px;padding:4px 20px}
.b-accordion summary{min-height:48px;display:flex;align-items:center;font-family:var(--font-display);font-weight:600;font-size:1.1rem;cursor:pointer}
.b-accordion details p{margin:0 0 16px;font-size:1.05rem;line-height:1.7;max-width:65ch}

/* ---------- 20. Block: embed ---------- */
.b-embed{position:relative;max-width:900px}
.b-embed .photo-ph{aspect-ratio:16/9;height:auto}
.b-embed__transcript{margin:10px 0 0;font:500 .8rem var(--font-mono)}

/* ---------- 21. Block: divider ---------- */
.b-divider{display:flex;justify-content:center;padding-bottom:64px}
.b-divider .squiggle{width:180px;height:16px}

/* ---------- 22. Block: team grid ---------- */
.b-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.person{background:var(--surface);border-radius:12px;overflow:hidden}
.person__photo{aspect-ratio:1/1;border-radius:0;overflow:hidden;background:var(--bg)}
.person__photo picture{display:block;width:100%;height:100%}
.person__photo img{display:block;width:100%;height:100%;object-fit:cover}
.person__body{padding:16px 18px}
.person__name{margin:0;font-weight:700;font-size:1.05rem}
.person__role{margin:2px 0 0;font-size:.95rem;color:var(--muted)}

/* ---------- 23. Block: page intro & prose ---------- */
.b-intro{max-width:720px}
.b-intro .lede + .lede{margin-top:14px}
.b-panel{background:var(--surface);border-radius:14px;padding:30px}
.b-panel h2{margin:0 0 12px;font-family:var(--font-display);font-weight:700;font-size:1.5rem}
.b-panel > p{margin:0 0 16px;font-size:1.05rem;line-height:1.65;max-width:68ch;color:var(--muted)}

/* ---------- 23a. Newsletter (web edition) ---------- */
.b-newsletter{max-width:68ch;display:flex;flex-direction:column;gap:34px}
.b-newsletter__section h2{margin-bottom:10px}
.b-newsletter__section p{margin:0 0 12px;font-size:1.08rem;line-height:1.7}
.b-newsletter__signoff{font-size:1.1rem;font-weight:600}

/* ---------- 23b. Image & gallery blocks ---------- */
.b-image{margin:0}
.b-image--narrow{max-width:820px}
.b-image__frame{position:relative;border-radius:12px}
.b-image__frame img{display:block;width:100%;height:auto;border-radius:12px}
.b-image__caption{margin:10px 0 0;display:flex;align-items:center;gap:8px;font:500 .75rem var(--font-mono);color:var(--muted)}
.b-image__caption .xmark{width:15px;height:15px}
.b-gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.b-gallery__item{border-radius:10px;overflow:hidden;background:var(--surface)}
.b-gallery__item img{display:block;width:100%;height:auto}

/* ---------- 24. Contact layout ---------- */
.b-contact{display:flex;gap:44px;flex-wrap:wrap}
.b-contact__copy{flex:1;min-width:280px;max-width:480px}
.b-contact__copy p{font-size:1.15rem;line-height:1.7;margin:0 0 12px}
.b-contact__copy p:last-child{font-size:1.05rem;color:var(--muted);margin:0}
.b-contact .form-panel{flex:1.2;min-width:300px}

/* ---------- 24b. Contact modal ---------- */
.modal-contact{border:none;padding:0;background:transparent;width:min(480px,92vw);margin:auto}
.modal-contact::backdrop{background:rgba(38,34,28,.45)}
.modal-contact[open]{animation:modal-in .2s ease-out}
@keyframes modal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.modal-contact[open]{animation:none}}
.modal-contact.is-closing{transition:opacity .16s ease-in,transform .16s ease-in;opacity:0;transform:translateY(10px)}

/* ---------- 24c. Scroll motion (pure CSS, no JS style writes) ----------
   Scroll-driven animations where supported; static everywhere else.
   Off entirely under prefers-reduced-motion. */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    /* Gentle block reveal as sections enter */
    main > *{
      animation:block-reveal ease-out both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }
    @keyframes block-reveal{
      from{opacity:0;transform:translateY(14px)}
      to{opacity:1;transform:none}
    }
    /* Soft parallax inside taped photo holders */
    .b-hero__frame picture,.b-image__frame picture{
      display:block;
      animation:photo-parallax linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes photo-parallax{
      from{transform:translateY(-12px) scale(1.07)}
      to{transform:translateY(12px) scale(1.07)}
    }
  }
}
.modal-contact__card{position:relative;background:var(--surface);border-radius:14px;padding:34px 30px;display:flex;flex-direction:column;gap:16px}
.modal-contact__card h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-0.01em}
.modal-contact__close{position:absolute;top:14px;right:14px;min-height:40px;min-width:40px;padding:8px 12px;border:1.5px solid var(--line);border-radius:99px;background:var(--bg);color:var(--ink);font-weight:600;cursor:pointer}
.modal-contact .input{width:100%}
.modal-contact__form{display:flex;flex-direction:column;gap:14px}
.modal-contact__thanks{margin:0;font-size:1.1rem;line-height:1.6}
.human-check{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.human-check label{font-weight:600;font-size:.95rem}
.human-check .input{width:96px;min-height:48px;text-align:center}

/* ---------- 25. Footer ---------- */
.site-footer{background:var(--surface);margin-top:24px}
.site-footer__inner{display:flex;gap:40px;flex-wrap:wrap;padding-top:44px;padding-bottom:36px}
.site-footer__brand{flex:1.4;min-width:240px;display:flex;flex-direction:column;gap:10px}
.site-footer__brand .brand{font-size:1.7rem}
.site-footer__tagline{margin:0;font:600 .72rem var(--font-mono);letter-spacing:.1em;color:var(--muted)}
.site-footer__blurb{margin:6px 0 0;font-size:.95rem;line-height:1.6;color:var(--muted);max-width:34ch}
.site-footer__col{flex:1;min-width:160px}
.site-footer__colhead{margin:0 0 10px;font:600 .72rem var(--font-mono);letter-spacing:.08em;color:var(--muted)}
.site-footer__nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.site-footer__nav a{display:inline-flex;align-items:center;min-height:40px;font-size:1rem}
.site-footer__contact p{margin:0 0 6px;font-size:1rem}
.site-footer__contact .mono{margin:0;font-size:.95rem;color:var(--muted);line-height:1.6}
.site-footer__legal{margin:0;font:500 .78rem var(--font-mono);color:var(--muted);padding-bottom:28px}

/* Text-size scale: attribute-driven (no CSSOM writes → strict-CSP safe).
   prefs.js/site.js only set html[data-scale]; these rules do the rest. */
html[data-scale="85"]{font-size:85%}
html[data-scale="90"]{font-size:90%}
html[data-scale="95"]{font-size:95%}
html[data-scale="100"]{font-size:100%}
html[data-scale="105"]{font-size:105%}
html[data-scale="110"]{font-size:110%}
html[data-scale="115"]{font-size:115%}
html[data-scale="120"]{font-size:120%}
html[data-scale="125"]{font-size:125%}
html[data-scale="130"]{font-size:130%}
html[data-scale="135"]{font-size:135%}
html[data-scale="140"]{font-size:140%}
html[data-scale="145"]{font-size:145%}
html[data-scale="150"]{font-size:150%}
html[data-scale="85"] .exr{--fill:0.0%}
html[data-scale="90"] .exr{--fill:7.69%}
html[data-scale="95"] .exr{--fill:15.38%}
html[data-scale="100"] .exr{--fill:23.08%}
html[data-scale="105"] .exr{--fill:30.77%}
html[data-scale="110"] .exr{--fill:38.46%}
html[data-scale="115"] .exr{--fill:46.15%}
html[data-scale="120"] .exr{--fill:53.85%}
html[data-scale="125"] .exr{--fill:61.54%}
html[data-scale="130"] .exr{--fill:69.23%}
html[data-scale="135"] .exr{--fill:76.92%}
html[data-scale="140"] .exr{--fill:84.62%}
html[data-scale="145"] .exr{--fill:92.31%}
html[data-scale="150"] .exr{--fill:100.0%}