/* Vendored from Australian-Christian-Arts/acha-brand @9785249 by scripts/sync-brand-kit.mjs. Do not edit; re-sync. */
/* AChA web kit, from Australian-Christian-Arts/acha-brand web/kit/kit.css @9cd5a90 (gallery layer and Apple refinement included).
   Changes for this design system: @font-face rules removed (tokens.css declares the fonts), first palette block reads tokens.css. */
/* AChA web kit. Source of truth: ../../brand/brand-guidelines.md and ../../tokens/tokens.css.
   Palette fixed: white, off-white, black, teal, taupe, olive (dark grounds or decoration only),
   gray (dividers). No red (removed 2026-10-26). Teal is a FILL or large-text colour, never small text on white.
   Corner radius: soft, 12px controls and 16px cards (SYSTEM.md 1, 2026-10-26). No external requests. */


:root{
  /* palette from tokens.json (tokens.css); edit colours there, not here. --ink-soft and --font-* come from tokens.css too */
  --white:var(--color-white); --offwhite:var(--color-offwhite); --black:var(--color-black);
  --teal:var(--color-teal); --taupe:var(--color-taupe); --olive:var(--color-olive); --gray:var(--color-gray);
  --radius:12px;--radius-card:16px;
  --gutter:clamp(16px,4vw,48px);
  --max:1200px;
  --space-section:clamp(48px,7vw,80px);
  --ease:cubic-bezier(.16,1,.3,1);
  /* Apple-style fluid feedback (see ../../system/APPLE-DESIGN.md, ../../motion/MOTION.md): press responds instantly, releases calmly */
  --press-scale:.97; --press-dur:100ms;
  /* size-specific tracking: tighter as type grows, near 0 on body, a touch open on small text */
  --track-display:-.02em; --track-title:-.012em; --track-body:0em; --track-small:.02em;
  /* diagonal dash / tick texture, AChA signature (marks drawn in black or white) */
  --dash-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M3 9L9 3M14 20L20 14' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --dash-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M3 9L9 3M14 20L20 14' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--offwhite);color:var(--black);font:400 17px/1.7 var(--font-body);letter-spacing:var(--track-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-heading);margin:0;text-wrap:balance}
h1{font-size:clamp(40px,5vw,64px);line-height:1.06;font-weight:700;letter-spacing:var(--track-display)}
h2{font-size:clamp(28px,3.2vw,36px);line-height:1.2;font-weight:700;letter-spacing:var(--track-title)}
h3{font-size:clamp(20px,2vw,24px);line-height:1.3;font-weight:600;letter-spacing:-.005em}
p{margin:0 0 1em;max-width:65ch}
.bold-regular .w{font-weight:700}.bold-regular .r{font-weight:300}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.6}
.sep{font-family:var(--font-heading);font-weight:300;padding-inline:.25em}
.accent{font-family:var(--font-accent);font-weight:400;line-height:1.15}
.label{/* all-caps keeps .08em: capitals need more air than the +.02em lowercase small text */font:700 12px/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase}
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* focus: black ring with white halo reads on white, taupe and teal; white ring on dark grounds */
:focus-visible,.is-focus{outline:3px solid var(--black);outline-offset:3px;box-shadow:0 0 0 3px var(--white)}
.on-dark :focus-visible{outline-color:var(--white);box-shadow:0 0 0 3px var(--black)}

.skip{position:absolute;left:var(--gutter);top:-100px;background:var(--black);color:var(--white);padding:12px 20px;border-radius:var(--radius);font-weight:700;z-index:50;text-decoration:none}
.skip:focus{top:12px}

/* texture overlay: place .tex on a positioned box; opacity is the strength */
.tex{position:relative;isolation:isolate}
.tex::after{content:"";position:absolute;inset:0;background-image:var(--dash-dark);opacity:.12;pointer-events:none;z-index:1}
.tex--light::after{background-image:var(--dash-light);opacity:.16}

/* ---------- links ---------- */
.link,.prose a{color:var(--black);font-weight:700;text-decoration:underline;text-decoration-color:var(--teal);text-decoration-thickness:3px;text-underline-offset:.22em;transition:background-color .2s var(--ease)}
.link:hover,.link.is-hover,.prose a:hover{background:var(--teal);text-decoration-color:var(--black)}
.on-dark .link{color:var(--white)}
.on-dark .link:hover,.on-dark .link.is-hover{color:var(--black);background:var(--teal)}
.link[aria-disabled="true"]{color:#595959;text-decoration-color:var(--gray);pointer-events:none;font-weight:400}

/* ---------- buttons (labels 18px bold: contrast holds in every state) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:12px 28px;border:2px solid var(--black);border-radius:var(--radius);font:700 18px/1.2 var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.btn:active{transform:scale(var(--press-scale));transition:transform var(--press-dur) ease-out,background-color .2s var(--ease),color .2s var(--ease)}
.btn--primary{background:var(--teal);color:var(--black)}
.btn--primary:hover,.btn--primary.is-hover{background:var(--black);color:var(--white)}
.btn--secondary{background:var(--white);color:var(--black)}
.btn--secondary:hover,.btn--secondary.is-hover{background:var(--black);color:var(--white)}
.btn--dark{background:var(--black);color:var(--white)}
.btn--dark:hover,.btn--dark.is-hover{background:var(--teal);color:var(--black)}
.btn--ghost{border-color:transparent;background:transparent;color:var(--black);padding-inline:12px;text-decoration:underline;text-decoration-color:var(--teal);text-decoration-thickness:3px;text-underline-offset:.2em}
.btn--ghost:hover,.btn--ghost.is-hover{background:var(--teal)}
.btn--sm{min-height:44px;padding:8px 20px;font-size:16px}
.on-dark .btn--primary{border-color:var(--teal)}
.on-dark .btn--primary:hover,.on-dark .btn--primary.is-hover{background:var(--white);border-color:var(--white);color:var(--black)}
.on-dark .btn--secondary{background:transparent;color:var(--white);border-color:var(--white)}
.on-dark .btn--secondary:hover{background:var(--white);color:var(--black)}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--gray);border-color:#595959;color:#4a4a4a;cursor:not-allowed;transform:none;text-decoration:none}

/* ---------- form fields ---------- */
.field{display:grid;gap:8px;margin-bottom:24px;max-width:480px}
.field label,.field .field__label{font:700 16px/1.3 var(--font-body)}
.field__hint{font-size:15px;line-height:1.5;color:var(--ink-soft);letter-spacing:var(--track-small)}
.input,.select,.textarea{width:100%;min-height:48px;padding:11px 14px;background:var(--white);color:var(--black);border:2px solid var(--black);border-radius:var(--radius);font:400 17px/1.4 var(--font-body);transition:background-color .2s var(--ease)}
.textarea{min-height:128px;resize:vertical}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--black) 50%),linear-gradient(135deg,var(--black) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.input::placeholder,.textarea::placeholder{color:#595959}
.input:hover,.input.is-hover,.select:hover,.textarea:hover{background:var(--offwhite)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible,.input.is-focus{outline:3px solid var(--black);outline-offset:3px;box-shadow:0 0 0 3px var(--white);border-color:var(--black)}
.input:disabled,.select:disabled,.textarea:disabled{background:var(--gray);border-color:#595959;color:#4a4a4a;cursor:not-allowed}
.field--error .input,.field--error .select,.field--error .textarea{border-color:var(--black);border-width:3px}
.field__error{display:flex;gap:8px;font:700 15px/1.4 var(--font-body);color:var(--black)}
.choice{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:8px 0;cursor:pointer}
.choice input{appearance:none;flex:none;width:24px;height:24px;margin:1px 0 0;border:2px solid var(--black);background:var(--white);display:grid;place-content:center;border-radius:var(--radius)}
.choice input[type=radio]{border-radius:50%}
.choice input::before{content:"";width:12px;height:12px;background:var(--black);transform:scale(0);transition:transform .15s var(--ease);border-radius:2px}
.choice input[type=radio]::before{border-radius:50%}
.choice input:checked::before{transform:scale(1)}
.choice input:hover{background:var(--teal)}
.choice input:disabled{background:var(--gray);border-color:#595959;cursor:not-allowed}
.choice:has(input:disabled){color:#4a4a4a;cursor:not-allowed}
fieldset.field{border:0;padding:0;margin-inline:0;min-inline-size:0}

/* ---------- program badges: text + shape carry meaning, colour is support ---------- */
.badge{display:inline-flex;align-items:center;gap:.4em;padding:6px 12px;border-radius:var(--radius);font:700 12px/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--black)}
.badge--orchestra{background:var(--black);color:var(--white)}
.badge--choir{background:var(--teal);color:var(--black)}
.badge--youth{background:var(--taupe);color:var(--black)}
.badge--youth::before{content:"//";letter-spacing:0}

/* ---------- cards ---------- */
.card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--gray);border-radius:var(--radius);overflow:hidden;transition:transform .25s var(--ease)}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--black)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{display:flex;flex-direction:column;gap:12px;padding:24px;flex:1}
.card__body p{margin:0}
.card__foot{margin-top:auto;padding-top:8px}
.card:hover,.card.is-hover{transform:translateY(-4px)}
.card:active{transform:scale(var(--press-scale));transition:transform var(--press-dur) ease-out}
.card:focus-within{outline:3px solid var(--black);outline-offset:3px}
.card a.stretch{color:inherit;text-decoration:none}
.card a.stretch::after{content:"";position:absolute;inset:0}
.card a.stretch:focus-visible{outline:none;box-shadow:none}
.card{position:relative}

/* concert card: the date is the hero of the card */
.concert{display:grid;grid-template-columns:auto 1fr;background:var(--white);border:1px solid var(--gray);border-radius:var(--radius);overflow:hidden}
.concert__date{display:grid;align-content:center;justify-items:center;gap:2px;min-width:112px;padding:24px 16px;background:var(--black);color:var(--white);text-align:center;font-family:var(--font-heading)}
.concert__date b{font-size:44px;line-height:1;font-weight:700}
.concert__date span{font:700 13px/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase}
.concert__body{display:flex;flex-direction:column;gap:10px;padding:24px}
.concert__body h3{margin:0}
.concert__meta{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.5;letter-spacing:var(--track-small)}
.concert__body .btn{align-self:flex-start;margin-top:6px}

/* ---------- nav ---------- */
.nav{background:var(--white);border-bottom:1px solid var(--gray)}
.nav__row{display:flex;align-items:center;gap:32px;min-height:72px}
.nav__logo{display:block;flex:none;line-height:0}
.nav__logo img{height:34px;width:auto}
.nav__links{display:flex;gap:4px;margin:0 auto 0 8px;padding:0;list-style:none}
.nav__links a,.nav__more a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:var(--black);font:700 16px/1 var(--font-body);text-decoration:none;border-bottom:3px solid transparent}
.nav__links a:hover,.nav__links a.is-hover,.nav__more a:hover{border-bottom-color:var(--teal)}
.nav__links a[aria-current="page"]{border-bottom-color:var(--black)}
.nav__more{display:none;margin-left:auto}
.nav__more summary{list-style:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:2px solid var(--black);border-radius:var(--radius);font:700 16px/1 var(--font-body);cursor:pointer}
.nav__more summary::-webkit-details-marker{display:none}
.nav__more[open] summary{background:var(--black);color:var(--white)}
.nav__more ul{position:absolute;left:0;right:0;top:100%;margin:0;padding:8px var(--gutter) 16px;list-style:none;background:var(--white);border-bottom:1px solid var(--gray);z-index:20}
.nav__more li a{width:100%;border-bottom:1px solid var(--gray);min-height:52px;padding:0}
.nav{position:relative}
@media (max-width:860px){
  .nav__row{gap:12px}
  .nav__links{display:none}
  .nav__more{display:block}
  .nav__row>.btn{margin-left:auto}
  .nav__more{margin-left:0}
}
@media (max-width:420px){.nav__logo img{height:28px}.nav__row>.btn{padding-inline:16px;font-size:16px}}

/* ---------- section dividers ---------- */
.rule{border:0;height:1px;background:var(--gray);margin:0}
.dash-band{height:56px;background-color:var(--taupe);background-image:var(--dash-dark)}
.dash-band--teal{background-color:var(--teal)}
.photo-band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(110,156,156,.85),rgba(110,156,156,0) 22%,rgba(110,156,156,0) 78%,rgba(197,189,162,.85))}
.photo-band::after{content:"";position:absolute;inset:0;z-index:2;background-image:var(--dash-light);opacity:.16;pointer-events:none}

/* ---------- donate call to action (single-colour band, reverse text) ---------- */
.donate{background:var(--black);color:var(--white);position:relative;isolation:isolate;overflow:hidden}
.donate::after{content:"";position:absolute;inset:0;background-image:var(--dash-light);opacity:.1;z-index:-1;pointer-events:none}
.donate__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding-block:var(--space-section)}
.donate__copy{grid-column:1/8;display:grid;gap:20px;justify-items:start}
.donate__copy p{margin:0}
.donate__script{color:var(--olive);font-size:clamp(34px,4vw,52px)}
.donate__note{font-size:15px;line-height:1.5;color:var(--gray);max-width:52ch;letter-spacing:var(--track-small)}
.donate__aside{grid-column:9/13;justify-self:end;display:grid;gap:12px}
@media (max-width:860px){.donate__copy,.donate__aside{grid-column:1/-1;justify-self:start}.donate__row{row-gap:28px}}

/* reduced motion: cross-fade only. No transforms, no movement; colour and opacity changes stay. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .btn,.card{transition-property:background-color,color,opacity;transition-duration:.2s}
  .btn:active,.card:active,.card:hover,.card.is-hover{transform:none}
  .btn:active{opacity:.85}
  .card:active{opacity:.9}
  .choice input::before{transform:none;opacity:0;transition:opacity .15s linear}
  .choice input:checked::before{opacity:1}
}

/* translucent layers: the kit's only translucency is decorative scrims and texture over photos.
   Fall back to near-solid scrims and drop texture when people ask for less transparency or more contrast.
   (No sticky nav or sheet here is translucent; if one is added, use backdrop-filter: blur(20px) saturate(140%)
   over a solid-colour fallback and a 1px rgba(255,255,255,.6) top edge, and add it to these two queries.) */
@media (prefers-reduced-transparency:reduce){
  .tex::after,.donate::after,.event::after,.photo-band::after{display:none}
  .hero__photo::before{background:linear-gradient(180deg,#0d0d0c 0,rgba(0,0,0,.6) 38%,rgba(0,0,0,.1) 56%)}
  .photo-band::before{background:linear-gradient(90deg,var(--teal),rgba(110,156,156,0) 22%,rgba(110,156,156,0) 78%,var(--taupe))}
}
@media (prefers-contrast:more){
  .tex::after,.donate::after,.event::after,.photo-band::after{display:none}
  .hero__photo::before{background:linear-gradient(180deg,#0d0d0c 0,rgba(0,0,0,.78) 40%,rgba(0,0,0,.2) 60%)}
  .card,.concert{border-color:var(--black)}
  .rule{background:var(--black)}
  .donate__note{color:var(--white)}
}
@media (forced-colors:active){.btn,.input,.select,.textarea{border:2px solid ButtonText}.badge{border:2px solid CanvasText}}

/* ================= Gallery layer (../../system/REFRESH-2026.md), 2026-10-26 =================
   Overrides the "stillness" look above: white walls, soft corners (an eighth, as the mark), display type at scale,
   wall-label small text, flat colour fields, true B&W photos, no texture. Delete this block to roll back. */
:root{--radius:12px;--offwhite:#FFFFFF;--track-display:-.035em;--track-title:-.03em}
body{background:var(--white)}
h1{font-weight:300;font-size:clamp(52px,8vw,128px);line-height:.92}
h2{font-weight:300;font-size:clamp(36px,5vw,72px);line-height:.95}
h1 b,h2 b,.bold-regular .w{font-weight:700}
.bold-regular .r{font-weight:300}
.label{font:700 14px/1.3 var(--font-body);letter-spacing:0;text-transform:none}
.sep{display:none}
.tex::after,.dash-band,.photo-band::after,.donate::after{display:none}
.btn{font:700 18px/1.2 var(--font-heading);letter-spacing:-.01em;min-height:52px}
.btn--primary{background:var(--black);color:var(--white);border-color:var(--black)}
.btn--primary:hover,.btn--primary.is-hover{background:var(--teal);color:var(--black);border-color:var(--teal)}
.btn--teal{background:var(--teal);color:var(--black);border-color:var(--teal)}
.badge{font:700 14px/1.2 var(--font-heading);letter-spacing:-.01em;text-transform:none;border-width:0;padding:8px 14px}
.badge--youth{background:var(--olive)}
.badge--youth::before{content:none}
.card{border:0;border-top:3px solid var(--black)}
.card__media img,.hero__photo img,.photo-band img{filter:grayscale(1) contrast(1.06)}
.card__media{clip-path:shape(from 0 0, line to 100% 0, line to 100% 100%, line to 0 100%, close);transition:clip-path .6s var(--ease)}
.card:hover .card__media,.card.is-hover .card__media{clip-path:shape(from 0 calc(7.5% + 12px), curve to 12px calc(7.5% - 2px) with 0 7.5%, line to calc(100% - 12px) 2px, curve to 100% 12px with 100% 0, line to 100% calc(100% - 12px), curve to calc(100% - 12px) calc(100% - 2px) with 100% 100%, line to 12px calc(93.2% + 2px), curve to 0 calc(93.2% - 12px) with 0 93.2%, close)}
.concert{border:0;border-top:3px solid var(--black)}
.concert__date{background:var(--black)}
.concert__date b{font-size:64px;font-weight:700;letter-spacing:-.05em}
.concert__date span{letter-spacing:0;text-transform:none;font-size:15px}
.nav{border-bottom:0}
.nav__links a{font-family:var(--font-heading);font-weight:600}
.nav__links a:hover,.nav__links a.is-hover,.nav__more a:hover{border-bottom-color:var(--black)}
.donate{background:var(--teal);color:var(--black)}
/* black on teal, always (Design Council): the script word, note and link inherit the dark-band colours otherwise */
.donate .donate__script,.donate .donate__note,.donate .link{color:var(--black)}
.donate .link{text-decoration-color:var(--black)}
.donate .link:hover,.donate .link.is-hover{background:var(--black);color:var(--white)}
/* the logo glow bleeds past the footer edge at phone width */
.footer{overflow-x:clip}
.footer{border-top:0}
.input,.select,.textarea{border-radius:var(--radius)}
.btn{border-radius:.66em}
.badge{border-radius:calc(var(--radius) / 2)}
.card,.concert,.hero__photo{border-radius:var(--radius-card)}
.card,.concert{border-top:0;box-shadow:inset 0 3px 0 var(--black)}
/* logo glow (same treatment as tokens/gallery.css) */
.glow{position:relative;isolation:isolate;display:inline-block}
.glow>img{position:relative;display:block}
.glow::before{content:"";position:absolute;inset:-60% -14%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side at 20% 50%,rgba(110,156,156,.75),rgba(110,156,156,0)),radial-gradient(closest-side at 50% 50%,rgba(201,206,85,.7),rgba(201,206,85,0)),radial-gradient(closest-side at 80% 50%,rgba(197,189,162,.75),rgba(197,189,162,0));filter:blur(24px);opacity:.9}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){.glow::before{display:none}}

/* Apple refinement layer (Ryan, 2026-10-26: "apply apple-design to it a little"; system/APPLE-DESIGN.md). A polish, not a restyle:
   the prose scale and its size-specific tracking (system/PROSE.md 2), one easing curve, quiet depth instead of big lifts,
   corners that stay concentric, and text that wraps without runts. */
:root{--ease:cubic-bezier(.23,1,.32,1);--track-display:-.03em;--track-title:-.02em;--track-small:.01em;
  --depth-1:0 1px 2px rgb(0 0 0 / .05);--depth-2:0 12px 32px -8px rgb(0 0 0 / .14)}
body{font:300 clamp(17px,1rem + .15vw,19px)/28px var(--font-body)}
p,li,dd,figcaption{text-wrap:pretty}
h1{font-size:clamp(40px,1.8rem + 2.2vw,56px);line-height:1.07;font-weight:300}
h1 b,h1 strong{font-weight:700}
h2{font-size:clamp(28px,1.4rem + .9vw,36px);line-height:1.11;letter-spacing:-.02em}
h3{font-size:clamp(22px,1.1rem + .8vw,28px);line-height:1.15;font-weight:400;letter-spacing:-.012em}
.card,.concert{box-shadow:var(--depth-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover,.card.is-hover{transform:translateY(-2px);box-shadow:var(--depth-2)}
.card img:first-child{border-radius:calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0}
.btn{transition:transform var(--press-dur) ease-out,background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
:focus-visible{border-radius:inherit}
.prose a{font-weight:inherit;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-thickness .2s var(--ease)}
.prose a:hover{text-decoration-thickness:2px}
@media (prefers-reduced-motion:reduce){.card:hover,.card.is-hover{transform:none}}


/* ===== Gallery primitives: acha-brand tokens/gallery.css @9cd5a90 (font-faces, reset and body rules removed; palette reads tokens.css) ===== */
/* AChA "Gallery" layer (system/REFRESH-2026.md). Fonts, tokens and primitives shared by web/landing, banners and social.
   Palette closed: white, black, teal, olive (+ taupe as a small field). Text on teal or olive is always black. */
:root{
  --white:var(--color-white);--black:var(--color-black);--teal:var(--color-teal);--olive:var(--color-olive);--taupe:var(--color-taupe);--gray:var(--color-gray);
  --display:"Neue Regrade","Helvetica Neue",Arial,sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --script:"Brittany",Georgia,serif;
  --door:polygon(0 7.5%,100% 0,100% 100%,0 93.2%);
  --ease:cubic-bezier(.2,.7,.1,1);
}

/* display type: light against bold in one line. Figma Fonts page lists Neue Regrade Light, Regular, Medium, Semibold and Bold only,
   so the pair is Light 300 against Bold 700 (never 200 or 800). */
.d{font-family:var(--display);font-weight:300;line-height:.9;letter-spacing:-.035em}
.d .hv,.hv{font-weight:700}
.d .lt,.lt{font-weight:300}
.d em{font-style:normal;font-weight:700}

/* wall label: bold title line, regular detail lines */
.wl{font-family:var(--body);font-size:16px;line-height:1.4;font-weight:400}
.wl b,.wl strong{display:block;font-weight:700}
.idx{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* colour fields */
.f-teal{background:var(--teal);color:var(--black)}
.f-olive{background:var(--olive);color:var(--black)}
.f-black{background:var(--black);color:var(--white)}
.f-taupe{background:var(--taupe);color:var(--black)}
.f-white{background:var(--white);color:var(--black)}

/* photography: true B&W, never tinted */
.bw{filter:grayscale(1) contrast(1.06)}
.ph{position:relative;overflow:hidden;background:#111}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}

/* the door: the leaning centre panel of the symbol */
.door{clip-path:var(--door)}

/* logo */
.logo{display:block;height:auto}

/* logo glow: the Figma brand gradient (teal at left, olive, taupe at right), soft light behind the mark. Wrap the logo: <div class="glow"><img ...></div>.
   Figma Logo Mark page: "In 90% of media, the lockup serves as a subtle identifier... Large-scale displays of the lockup should be reserved for rare, special occasions."
   The glow is for those occasions only (brand book cover, title and closing slides). Identifier placements (nav, footers, tiles, banners) use the plain mark with clear space.
   Decoration only: the mark itself is never recoloured, and contrast is measured against the ground, not the glow. */
.glow{position:relative;isolation:isolate;display:block}
.glow>img{display:block;width:100%;height:auto;position:relative}
.glow::before{content:"";position:absolute;inset:-60% -14%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 20% 50%,rgba(110,156,156,.8),rgba(110,156,156,0)),radial-gradient(closest-side at 50% 50%,rgba(201,206,85,.7),rgba(201,206,85,0)),radial-gradient(closest-side at 80% 50%,rgba(197,189,162,.8),rgba(197,189,162,0));
  filter:blur(calc(var(--glow-blur,1) * 24px));opacity:var(--glow-strength,.9)}
.f-black .glow::before,.glow--night::before{opacity:1;background:radial-gradient(closest-side at 20% 50%,rgba(110,156,156,.95),rgba(110,156,156,0)),radial-gradient(closest-side at 50% 50%,rgba(201,206,85,.8),rgba(201,206,85,0)),radial-gradient(closest-side at 80% 50%,rgba(197,189,162,.85),rgba(197,189,162,0))}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){.glow::before{display:none}}

/* brand gradient (Figma Graphic Language page: "The brand gradient is a key component of the brand's identity"). Teal at the left, olive at the centre, taupe at the right,
   as the Figma swatch runs. A field: business card fronts, lanyards, pull-up banners, signage, the brand line panel, one social story. Never over a photo. Text on it is black or white. */
.f-grad{background:linear-gradient(90deg,var(--teal) 8%,var(--olive) 49%,var(--taupe) 90%);color:var(--black)}
.f-grad--v{background:linear-gradient(180deg,var(--teal) 8%,var(--olive) 49%,var(--taupe) 90%);color:var(--black)}

/* colour text (Figma Colours page, "Colour Text"): a headline on a pale tint of its own colour. Decided 2026-10-26 (Ryan: "up to you with colour"):
   only the black variant is in the system, black on Light Gray (16:1). The teal and olive tints fail WCAG AA (2.8:1 and 1.6:1) and are not used. */
.tint-black{background:var(--gray);color:var(--black)}

/* 50/50 pairing (Figma Graphic Language page): the frame divided evenly between a photo, colour or gradient half and a white informational half */
.half{display:grid;grid-template-columns:1fr 1fr}
.half--stack{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.half>.info{background:var(--white);color:var(--black);padding:clamp(24px,4vw,56px)}
.half>.info h2,.half>.info h3{font-family:var(--display);font-weight:400;letter-spacing:-.02em;margin:0 0 .6em}
@media (max-width:720px){.half{grid-template-columns:1fr;grid-template-rows:1fr 1fr}}

/* the handle, as the Figma social frames set it: small tracked caps beside the symbol */
.handle-caps{font-family:var(--body);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* ghost numerals (Genesis pack): a giant section number, tone on tone, bleeding off the edge */
.ghost{font-family:var(--display);font-weight:500;line-height:.8;letter-spacing:-.04em;color:rgba(255,255,255,.55);pointer-events:none;user-select:none}
.f-white .ghost{color:var(--gray)}.f-black .ghost{color:rgba(255,255,255,.12)}

/* the script word (Genesis pack): one large Brittany word per piece, crossing a photo edge or a ghost numeral */
.script{font-family:var(--script);font-weight:400;line-height:1;letter-spacing:0}

/* the night (system/REFRESH-2026.md rule 10): the same triptych with the flats gone black, the door lit, its light spilling onto the floor in the door's own shape.
   .lit goes on the door (a .ph.door box), .spill is an absolutely placed trapezoid under it, .flat--night is a black flat with a hairline edge. */
.lit{clip-path:var(--door);background:#fff;padding:2px;display:grid;min-height:0}.lit>.door{min-height:0;height:100%}
.flat--night{background:#0a0a0a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.spill{background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(110,156,156,.12) 55%,rgba(0,0,0,0));clip-path:polygon(0 0,100% 0,160% 100%,-60% 100%);filter:blur(12px);pointer-events:none}

/* photo frames (SYSTEM.md 5, Ryan 2026-10-26): one logo rectangle at a time, the flat panel or the slanted door, with one corner or two rounded.
   The radius is about a quarter of the width (--frame-r), never a dome. Fifteen frames. For photographs only, in photo sections and galleries:
   never on flats, fields, covers, tiles, backgrounds or the triptych door. The door frames need tokens/frames-defs.svg.html inlined in the page. */
:root{--frame-r:36px}
.frame--tl{border-radius:var(--frame-r) 0 0 0;overflow:hidden}
.frame--tr{border-radius:0 var(--frame-r) 0 0;overflow:hidden}
.frame--br{border-radius:0 0 var(--frame-r) 0;overflow:hidden}
.frame--bl{border-radius:0 0 0 var(--frame-r);overflow:hidden}
.frame--tl-tr{border-radius:var(--frame-r) var(--frame-r) 0 0;overflow:hidden}
.frame--br-bl{border-radius:0 0 var(--frame-r) var(--frame-r);overflow:hidden}
.frame--tl-bl{border-radius:var(--frame-r) 0 0 var(--frame-r);overflow:hidden}
.frame--tr-br{border-radius:0 var(--frame-r) var(--frame-r) 0;overflow:hidden}
.frame--door-tl{clip-path:url(#frame-door-tl)}
.frame--door-tr{clip-path:url(#frame-door-tr)}
.frame--door-br{clip-path:url(#frame-door-br)}
.frame--door-bl{clip-path:url(#frame-door-bl)}
.frame--door-tl-tr{clip-path:url(#frame-door-tl-tr)}
.frame--door-br-bl{clip-path:url(#frame-door-br-bl)}
.frame--door-tl-bl{clip-path:url(#frame-door-tl-bl)}

/* ===== soft corners (Ryan, 2026-10-26: "the arts logo to be the soft rounded one"; SYSTEM.md 1 and 4) =====
   The mark's panels have every corner rounded to an eighth of the panel's width, and so does every rectangle built from it:
   the flats and the door in every triptych (day and night), photo frames, controls and cards. One rule, one token family:
     --soft-r   the panels and the door, about an eighth of a panel's width (4% of the triptych's width, via a container query)
     --radius   controls, a quarter of a 48 px control's height (12 px); buttons use .66em so the quarter holds at any size
     --radius-card  boxes and cards (16 px)
   Sharp originals are archived in identity/logos/archive-sharp/ and logos/archive-sharp/. */
:root{--radius:12px;--radius-card:16px;--soft-r:12px}
.trip,.set,.triptych,.night__set,.night-sec__set{container-type:inline-size}
.trip,.set,.triptych,.night__set,.night-sec__set{--soft-r:4cqi}
:root{--door:shape(from 0 calc(7.5% + var(--soft-r)), curve to var(--soft-r) calc(7.5% - .17 * var(--soft-r)) with 0 7.5%,
  line to calc(100% - var(--soft-r)) calc(.17 * var(--soft-r)), curve to 100% var(--soft-r) with 100% 0,
  line to 100% calc(100% - var(--soft-r)), curve to calc(100% - var(--soft-r)) calc(100% - .15 * var(--soft-r)) with 100% 100%,
  line to var(--soft-r) calc(93.2% + .15 * var(--soft-r)), curve to 0 calc(93.2% - var(--soft-r)) with 0 93.2%, close)}
.door,.lit{clip-path:var(--door)}
.trip>.p,.set>.p,.triptych__panel,.night__flat,.night-sec__flat,.flat--night{border-radius:var(--soft-r)}
/* frames: the big rounded corner stays a quarter (--frame-r); every other corner is soft (an eighth) */
:root{--frame-s:calc(var(--frame-r) / 2)}
.frame--tl{border-radius:var(--frame-r) var(--frame-s) var(--frame-s) var(--frame-s)}
.frame--tr{border-radius:var(--frame-s) var(--frame-r) var(--frame-s) var(--frame-s)}
.frame--br{border-radius:var(--frame-s) var(--frame-s) var(--frame-r) var(--frame-s)}
.frame--bl{border-radius:var(--frame-s) var(--frame-s) var(--frame-s) var(--frame-r)}
.frame--tl-tr{border-radius:var(--frame-r) var(--frame-r) var(--frame-s) var(--frame-s)}
.frame--br-bl{border-radius:var(--frame-s) var(--frame-s) var(--frame-r) var(--frame-r)}
.frame--tl-bl{border-radius:var(--frame-r) var(--frame-s) var(--frame-s) var(--frame-r)}
.frame--tr-br{border-radius:var(--frame-s) var(--frame-r) var(--frame-r) var(--frame-s)}
/* controls and boxes */
.btn,.cta{border-radius:.66em}
.card,.concert,.ask,.chat{border-radius:var(--radius-card)}


/* ===== Helpers: tokens/helpers.css @9cd5a90 ===== */
/* AChA helpers (SYSTEM.md 9): the Ask box and the chat. Four helpers, each a notation face from the
   loops in media/MEDIA.md: Melody (choir), Ludwig (orchestra), Dot (youth), Coda (concerts).
   Faces are for these components only: never a hero, a cover, print, beside the mark, or a program identifier.
   Corners are soft (SYSTEM.md 1): boxes --radius-card (16px), controls --radius (12px). Needs gallery.css for type. */
:root{--ask-face:140px;--ask-avatar:44px}
.ask{display:grid;grid-template-columns:var(--ask-face) 1fr;gap:28px;align-items:center;padding:28px 32px;max-width:720px;background:var(--white);color:var(--black);border:1px solid var(--gray);border-radius:var(--radius-ask,var(--radius-card,16px));box-sizing:border-box}
.ask__face{width:var(--ask-face);height:auto;display:block;justify-self:center}
.ask__title{font-family:var(--display);font-size:clamp(32px,3vw,40px);line-height:.95;letter-spacing:-.035em;font-weight:300;margin:0 0 10px}
.ask__title .hv{font-weight:700}
.ask__lead{margin:0 0 14px;font:400 16px/1.5 var(--body)}
.ask__form{display:flex;gap:10px}
.ask__input{flex:1;min-width:0;min-height:48px;border:2px solid var(--black);padding:0 16px;font:400 16px var(--body);background:var(--white);color:var(--black);border-radius:var(--radius,12px)}
.ask__btn{min-height:48px;padding:0 22px;background:var(--black);color:var(--white);font:700 16px var(--display);display:inline-flex;align-items:center;border:0;cursor:pointer;border-radius:var(--radius,12px)}
.ask__chips{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.ask__chips button{border:1px solid var(--black);background:none;color:inherit;min-height:44px;padding:0 16px;font:400 14px var(--body);cursor:pointer;border-radius:var(--radius,12px)}
/* on the one teal field: black text and the BLACK set (teal-lined faces go only on white or taupe; their lines vanish on teal) */
.ask--teal{background:var(--teal);border:0}
.ask--teal .ask__input{background:var(--teal)}
/* night: the white set */
.ask--night{background:var(--black);color:var(--white);border:0}
.ask--night .ask__lead{color:rgba(255,255,255,.85)}
.ask--night .ask__input{background:var(--black);color:var(--white);border-color:var(--white)}
.ask--night .ask__btn{background:var(--white);color:var(--black)}
.ask--night .ask__chips button{border-color:var(--white)}
/* the face loop: a still by default; the loop only when switched on, and never under reduced motion */
.ask__face--loop{display:none}
.ask--live .ask__face--loop{display:block}
.ask--live .ask__face--still{display:none}
@media (prefers-reduced-motion:reduce){.ask--live .ask__face--loop{display:none}.ask--live .ask__face--still{display:block}}
@media (max-width:560px){.ask{grid-template-columns:1fr;gap:18px;padding:22px}.ask__face{width:min(var(--ask-face),40vw)}}

/* the chat */
.chat{max-width:560px;padding:20px;background:var(--white);color:var(--black);border:1px solid var(--gray);border-radius:var(--radius-ask,var(--radius-card,16px));box-sizing:border-box}
.chat__msg{display:grid;grid-template-columns:var(--ask-avatar) 1fr;gap:12px;align-items:start;margin:0 0 14px}
.chat__msg:last-child{margin-bottom:0}
.chat__avatar{width:var(--ask-avatar);height:auto;display:block}
.chat__bubble{background:var(--offwhite,#F7F6F3);padding:12px 16px;font:400 15px/1.5 var(--body);border-radius:var(--radius,12px)}
.chat__msg--me .chat__bubble{background:var(--black);color:var(--white);margin-left:22%}
.chat__dots{display:inline-flex;gap:6px;align-items:center;height:20px}
.chat__dots i{width:9px;height:9px;border-radius:50%;background:currentColor;display:block;opacity:.35;animation:chat-think 1.2s ease-in-out infinite}
.chat__dots i:nth-child(2){animation-delay:.2s}.chat__dots i:nth-child(3){animation-delay:.4s}
@keyframes chat-think{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.chat__dots i{animation:none;opacity:.7}}

/* Apple refinement (APPLE-DESIGN.md): press answers on pointer-down, 44 px touch targets, the focus ring follows the corner */
.ask__btn,.ask__chips button{transition:transform 100ms ease-out,background-color .2s cubic-bezier(.23,1,.32,1),color .2s cubic-bezier(.23,1,.32,1)}
.ask__btn:active,.ask__chips button:active{transform:scale(.97)}
.ask__chips button:hover{background:var(--black);color:var(--white)}
.ask--night .ask__chips button:hover{background:var(--white);color:var(--black)}
.ask__input:focus-visible,.ask__btn:focus-visible,.ask__chips button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.ask__lead,.chat__bubble{text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.ask__btn:active,.ask__chips button:active{transform:none}}


/* ===== Extended prose: tokens/prose.css @9cd5a90 ===== */
/* AChA extended prose (system/PROSE.md, SYSTEM.md rule 11). Load after gallery.css (fonts, colours).
   Wrap long text in .prose; .prose--night for the black house. Major third scale, 4 px baseline, 34em measure.
   Print and PDF: .prose works under @media print too, with pt values and widow/orphan control. */
:root{
  --p-display:"Neue Regrade","Helvetica Neue",Helvetica,Arial,sans-serif;
  --p-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --p-ink:#0d0d0c;--p-ink-2:#0d0d0c;--p-page:#fff;--p-rule:#0d0d0c;--p-hair:#E2E2E2;--p-callout:#E2E2E2;--p-link-line:#6E9C9C;
  /* the scale: major third (1.25) on an 18 px body; phone body 17 px */
  --p-body-size:clamp(17px,1rem + .15vw,19px);
  --p-s-2:12px;--p-s-1:14px;--p-s1:clamp(20px,1.1rem + .3vw,22px);--p-s2:clamp(22px,1.1rem + .8vw,28px);
  --p-s3:clamp(28px,1.4rem + .9vw,36px);--p-s4:clamp(30px,1.3rem + 1.6vw,44px);--p-s5:clamp(40px,1.8rem + 2.2vw,56px);
  --p-s8:clamp(48px,2rem + 8vw,176px);
  --p-measure:34em;--p-unit:4px;--p-radius:var(--radius-card,16px)}
.prose{font-family:var(--p-body);font-weight:300;font-size:var(--p-body-size);line-height:28px;color:var(--p-ink);
  font-optical-sizing:auto;font-kerning:normal;font-variant-ligatures:common-ligatures;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  max-inline-size:var(--p-measure);hanging-punctuation:first allow-end;text-wrap:pretty;overflow-wrap:break-word}
.prose>*{margin-block:0}
.prose p+p{margin-top:16px}
/* hyphenation only where the measure is short (phones, sidebars) */
@media (max-width:599px){.prose{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3}}
.prose :is(h1,h2,h3,h4,.p-display,.p-pull,figcaption){hyphens:manual;-webkit-hyphens:manual}

/* display and headings: Neue Regrade, tracking tighter as size grows, balanced lines, keep with next */
.prose :is(.p-display,h1,h2,h3){font-family:var(--p-display);text-wrap:balance;break-after:avoid;page-break-after:avoid;color:var(--p-ink-2)}
.prose .p-display{font-size:var(--p-s8);font-weight:300;line-height:.9;letter-spacing:-.035em;margin:0 0 48px}
@media (min-width:1100px){.prose .p-display{letter-spacing:-.04em}}
.prose h1{font-size:var(--p-s5);font-weight:300;line-height:1.07;letter-spacing:-.03em;margin:0 0 24px}
.prose :is(.p-display,h1) :is(b,strong,.hv){font-weight:700}
.prose h2{font-size:var(--p-s3);font-weight:700;line-height:1.11;letter-spacing:-.02em;margin:72px 0 20px}
.prose h3{font-size:var(--p-s2);font-weight:400;line-height:1.15;letter-spacing:-.012em;margin:48px 0 12px}
.prose h4{font-family:var(--p-body);font-size:var(--p-s1);font-weight:700;line-height:28px;letter-spacing:0;margin:32px 0 4px;break-after:avoid}
.prose :is(h2,h3,h4):first-child{margin-top:0}
.prose :is(h1,h2,h3,h4)+p{margin-top:0}
.prose :is(h1,h2,h3,h4)[id]{scroll-margin-top:calc(var(--nav-h,72px) + 24px)}
.prose .p-lead{font-size:var(--p-s1);font-weight:300;line-height:32px;letter-spacing:-.005em;max-inline-size:30em;margin-bottom:24px}

/* emphasis: bold only; no italic body (no real Helvetica Neue italic on the web, faux banned) */
.prose :is(b,strong){font-weight:700}
.prose :is(em,i){font-style:normal}
.prose .p-work{font-style:normal} /* titles of works: upright, Title Case (Proposed) */
.prose a{color:inherit;text-decoration:underline;text-decoration-color:var(--p-link-line);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-thickness .2s cubic-bezier(.23,1,.32,1)}
.prose a:hover{text-decoration-thickness:2px}
.prose a:focus-visible{outline:2px solid var(--p-ink);outline-offset:3px;border-radius:4px}
.prose .nb{white-space:nowrap} /* keep "for Christ", names, numbers and units together */
.prose :is(.num,table){font-variant-numeric:tabular-nums}

/* pull quote: Light, hanging opening quote, a 2 px rule above, one per spread or screen */
.prose .p-pull{font-family:var(--p-display);font-size:var(--p-s4);font-weight:300;line-height:1.09;letter-spacing:-.025em;margin:48px 0;
  padding-top:20px;border-top:2px solid var(--p-rule);max-inline-size:18em;text-wrap:balance;break-inside:avoid}
.prose .p-pull p{margin:0;text-indent:-.4em}
.prose .p-pull footer,.prose .p-pull cite{display:block;margin-top:16px;font:400 var(--p-s-1)/20px var(--p-body);letter-spacing:.01em;font-style:normal}

/* callout: Light Gray box, soft card corners; .p-callout--field for the one teal or olive field per document */
.prose .p-callout{background:var(--p-callout);color:#0d0d0c;border-radius:var(--p-radius);padding:24px;margin:48px 0;break-inside:avoid}
.prose .p-callout>:first-child{margin-top:0}
.prose .p-callout--teal{background:#6E9C9C}.prose .p-callout--olive{background:#C9CE55}

/* lists: hanging soft-square bullets from the mark; two levels at most */
.prose :is(ul,ol){padding:0;margin:16px 0}
.prose li{margin:0 0 8px}
.prose ul>li{list-style:none;position:relative}
.prose ul>li::before{content:"";position:absolute;left:-1em;top:.62em;width:6px;height:6px;background:currentColor;border-radius:1.5px}
.prose ol{list-style:decimal outside;font-variant-numeric:tabular-nums}
.prose ol>li::marker{font-weight:700}
.prose li :is(ul,ol){margin:8px 0 0}
.prose ul ul>li::before{width:.5em;height:1px;top:.8em;border-radius:0}
@media (max-width:599px){.prose :is(ul,ol){padding-left:1em}}

/* tables: rules, no verticals, tabular figures, numbers right */
.prose .p-table{overflow-x:auto;margin:48px 0}
.prose table{border-collapse:collapse;width:100%;font:400 var(--p-s-1)/20px var(--p-body);letter-spacing:.01em}
.prose th{font-weight:700;text-align:left;padding:8px 16px 8px 0;border-bottom:1px solid var(--p-rule);vertical-align:bottom}
.prose td{padding:8px 16px 8px 0;border-bottom:1px solid var(--p-hair);vertical-align:top}
.prose :is(td,th).n{text-align:right}
.prose caption{caption-side:bottom;text-align:left;padding-top:12px;font:400 var(--p-s-1)/20px var(--p-body)}

/* figures and wall-label captions */
.prose figure{margin:48px 0;break-inside:avoid}
.prose figure img{display:block;width:100%;height:auto}
.prose figcaption{margin-top:12px;font:400 var(--p-s-1)/20px var(--p-body);letter-spacing:.01em}
.prose figcaption b{display:block;font-weight:700}

/* footnotes, legal, folio, caps labels */
.prose sup{font-size:.7em;line-height:0;vertical-align:.5em;font-variant-numeric:tabular-nums}
.prose .p-notes{margin-top:72px;padding-top:12px;border-top:.5px solid var(--p-rule);max-inline-size:20em;font:400 var(--p-s-2)/16px var(--p-body);letter-spacing:.02em}
.prose .p-notes li{margin-bottom:4px}
.prose .p-legal{font:400 var(--p-s-2)/16px var(--p-body);letter-spacing:.02em}
.prose .p-caps{font:400 12px/16px var(--p-body);letter-spacing:.12em;text-transform:uppercase}
.prose .p-signoff{margin-top:32px;font:400 var(--p-s-1)/20px var(--p-body)}.prose .p-signoff b{display:block;font-weight:700}

/* section break: a stanza or new chapter on the same page, marked by a ghost numeral */
.prose .p-break{margin:96px 0 48px;position:relative}
.p-ghost{font-family:var(--p-display);font-weight:700;line-height:.8;letter-spacing:-.04em;color:rgba(0,0,0,.06);font-variant-numeric:tabular-nums;user-select:none;pointer-events:none}

/* the reading page: a 12-column grid, the text on columns 2 to 8, notes and wall labels on 10 to 12 */
.p-page{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-inline:clamp(16px,5vw,80px);max-width:1280px;margin-inline:auto;padding-block:96px}
.p-page>.prose{grid-column:2 / 9}
.p-page>.p-side{grid-column:10 / 13;font:400 14px/20px var(--p-body);letter-spacing:.01em;align-self:start}
@media (max-width:1023px){.p-page{display:block}.p-page>.p-side{margin-top:32px;max-inline-size:34em}}
@media (max-width:599px){.p-page{column-gap:16px;padding-block:64px}}

/* night: not an inversion, a remap */
.prose--night,.p-night{--p-ink:#DBDBDB;--p-ink-2:#fff;--p-page:#0d0d0c;--p-rule:#fff;--p-hair:rgba(255,255,255,.14);--p-callout:#141414;background:var(--p-page)}
.prose--night :is(b,strong){font-weight:400;color:#fff}
.prose--night .p-callout{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--p-ink)}
.prose--night .p-callout--teal{background:#6E9C9C;color:#0d0d0c;box-shadow:none}
.p-night .p-ghost,.prose--night .p-ghost{color:rgba(255,255,255,.12)}

/* motion: lines fade and rise 12 px in 400 ms on the settle curve; nothing under reduced motion */
.p-reveal{opacity:0;transform:translateY(12px);transition:opacity .4s cubic-bezier(.23,1,.32,1),transform .4s cubic-bezier(.23,1,.32,1)}
.p-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.p-reveal{opacity:1;transform:none;transition:none}}
@media (prefers-contrast:more){.prose{--p-hair:#0d0d0c;--p-callout:#fff}.prose .p-callout{box-shadow:inset 0 0 0 2px #0d0d0c}}

/* print: pt sizes on a 3.75 pt quarter-line grid, 15 pt body leading, no widows, orphans or runts */
@media print{
  .prose{font-size:10.5pt;line-height:15pt;max-inline-size:none;orphans:2;widows:2;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3;hyphenate-limit-lines:2}
  .prose p+p{margin-top:7.5pt}
  .prose .p-display{font-size:50pt;margin-bottom:22.5pt}
  .prose h1{font-size:32pt;line-height:33.75pt;margin-bottom:11.25pt}
  .prose h2{font-size:20.5pt;line-height:22.5pt;margin:30pt 0 7.5pt}
  .prose h3{font-size:16.5pt;line-height:18.75pt;margin:22.5pt 0 3.75pt}
  .prose h4{font-size:10.5pt;line-height:15pt;margin:15pt 0 0}
  .prose .p-lead{font-size:13pt;line-height:18.75pt;margin-bottom:11.25pt}
  .prose .p-pull{font-size:26pt;line-height:30pt;margin:22.5pt 0;padding-top:7.5pt}
  .prose :is(figcaption,table,.p-pull footer,caption){font-size:8.5pt;line-height:11.25pt}
  .prose :is(.p-notes,.p-legal){font-size:7pt;line-height:11.25pt}
  .prose li{margin-bottom:3.75pt}
  .prose :is(figure,.p-callout,.p-table){margin:22.5pt 0}
  .prose .p-callout{border-radius:4mm;padding:6mm}
  .prose a{text-decoration:none}
}


/* ===== Page compositions from web/landing/landing.css @9cd5a90: triptych, night, give, hero, footer (layout rules only) ===== */
:root{--gut:clamp(16px,4vw,56px);--sec:clamp(72px,11vw,160px)}
.btn--line{border-color:var(--black)}
.btn--line:hover{background:var(--black);color:var(--white)}
.btn--line-w{border-color:var(--white);color:var(--white)}
.btn--line-w:hover{background:var(--white);color:var(--black)}
.hero{padding:clamp(24px,5vw,72px) var(--gut) 0}
.hero__h{font-size:clamp(64px,13.4vw,232px);max-width:12ch}
.hero__h .hv{display:inline-block}
.hero__base{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(28px,4vw,56px)}
.hero__lead{font-size:clamp(19px,1.6vw,23px);line-height:1.45;max-width:34ch;margin-bottom:28px}
.hero__copy{padding-bottom:clamp(0px,4vw,56px)}
.triptych{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:clamp(8px,1.2vw,18px);height:clamp(380px,46vw,660px);position:relative;margin-top:calc(-1 * clamp(0px,10vw,170px))}
.triptych__panel{align-self:center;height:92%}
.triptych__door{margin:0;height:100%}
.triptych__label{position:absolute;right:0;bottom:-58px;font-size:14px;text-align:right}
.btn--white{background:var(--white);color:var(--black)}
.night{background:#0d0d0c;overflow:hidden}
.night__set{position:relative;display:grid;grid-template-columns:111fr 138fr;gap:clamp(10px,1.4vw,20px);height:clamp(360px,44vw,620px);padding-bottom:12%}
.night__door{height:100%;position:relative;z-index:1}.night__door figure{margin:0}
.night__flat{align-self:center;height:84%;background:#0a0a0a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.night__spill{position:absolute;left:8%;width:28%;top:86%;height:34%;background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(110,156,156,.12) 55%,rgba(0,0,0,0));clip-path:polygon(0 0,100% 0,160% 100%,-60% 100%);filter:blur(18px);pointer-events:none}
.night__set::before{content:"";position:absolute;left:-10%;width:60%;top:-10%;bottom:0;background:radial-gradient(closest-side,rgba(255,255,255,.14),rgba(255,255,255,0));filter:blur(40px);pointer-events:none}
.night__label{position:absolute;right:0;bottom:0;font-size:14px;text-align:right;color:#D9D9D9;max-width:30ch}.night__label b{color:var(--white)}
.give{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:stretch}
.give__copy{padding:var(--sec) var(--gut)}
.give__h{font-size:clamp(52px,7vw,120px);margin-bottom:28px;max-width:11ch}
.give__p{font-size:20px;max-width:30ch;margin-bottom:28px}
.give__note{margin-top:28px;max-width:44ch;font-size:15px}
.give__img{margin:0;min-height:420px}
.footer{padding:clamp(72px,9vw,128px) var(--gut) 48px;overflow:hidden}
.footer__logo{width:clamp(180px,20vw,220px);margin-bottom:72px}
.footer__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;border-top:2px solid var(--black);padding-top:24px}
.footer__grid a{display:block;text-decoration:none;padding:4px 0;overflow-wrap:anywhere}
.footer__grid a:hover{text-decoration:underline}
.footer__legal{color:var(--ink-2);font-size:14px}
@media (max-width:860px){.hero__base{grid-template-columns:1fr}.triptych{margin-top:0;order:-1;height:clamp(300px,90vw,520px)}.hero__copy{padding-top:56px}.triptych__label{bottom:-44px}.night__set{height:clamp(300px,80vw,520px);padding-bottom:22%}.give{grid-template-columns:1fr}.give__img{min-height:320px;order:-1}.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}
.btn--line,.btn--line-w{background:transparent}
/* landing pages set a{color:inherit} globally; scoped here so kit links keep their own colours */
.footer a,.btn--line{color:inherit}.btn--line{color:var(--black)}
/* design-system polish (not in the repo yet): the grey placeholder on the teal Ask box is 2.3:1, below WCAG AA; black at 80% on teal reads 5.5:1 */
.ask--teal .ask__input::placeholder{color:rgba(0,0,0,.8)}


/* ===== artsdesign enhancement pass, 2026-11-02: 20 skills in four lanes (systems, taste, motion, quality). Each rule names its skill. ===== */

/* ---- systems lane ---- */
/* ===== SYSTEMS lane (token consistency, form controls, nav, badge). Append after the last rule of bundle.css. =====
   Every value reads a token; fallbacks in var() cover the tokens proposed in patches/systems.md until tokens.json carries them. */

/* [apple-design] one easing curve. The gallery-primitives block resets --ease to cubic-bezier(.2,.7,.1,1) after the
   Apple refinement set "settle"; that later value was winning everywhere. Restore settle and pin the press tokens. */
:root{
  --ease:var(--ease-settle,cubic-bezier(.23,1,.32,1));
  --press-dur:var(--duration-press,100ms);
  /* [ui-ux-pro-max:design-system] kit aliases read the semantic layer instead of shadowing it */
  --radius:var(--radius-control,12px);
}

/* [apple-design + design-system] one focus ring: 2px, 2px offset, white halo filling the gap (CONTRAST.md, APPLE-DESIGN.md).
   Was three rings: 3px/3px with a 3px halo (kit), 3px on inputs, 2px currentColor (Ask), 2px/3px (prose). */
:focus-visible,.is-focus{
  outline:var(--focus-ring-width,2px) solid var(--focus-ring-color,#0d0d0c);
  outline-offset:var(--focus-ring-offset,2px);
  box-shadow:0 0 0 var(--focus-ring-offset,2px) var(--focus-ring-halo,#fff);
}
.on-dark :focus-visible,.f-black :focus-visible{
  outline-color:var(--focus-ring-color-on-inverse,#fff);
  box-shadow:0 0 0 var(--focus-ring-offset,2px) var(--focus-ring-halo-on-inverse,#0d0d0c);
}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible,.input.is-focus{
  outline-width:var(--focus-ring-width,2px);outline-offset:var(--focus-ring-offset,2px);
  box-shadow:0 0 0 var(--focus-ring-offset,2px) var(--focus-ring-halo,#fff);
}
/* the Apple layer's ":focus-visible{border-radius:inherit}" squares any control whose own radius rule sits earlier
   in the file (inputs, selects, choices, the nav More button) because it inherits the parent's 0. Restore each corner. */
.input:focus-visible,.select:focus-visible,.textarea:focus-visible,.input.is-focus,
.nav__more summary:focus-visible{border-radius:var(--radius-control,12px)}
.choice input[type=checkbox]:focus-visible{border-radius:var(--radius-badge,6px)}
.choice input[type=radio]:focus-visible{border-radius:50%}

/* [apple-design: hover is a swap between palette colours] input hover used the background shorthand with var(--offwhite),
   which the gallery layer sets to #fff: hover did nothing, and on a select the shorthand also wiped the chevron, so the
   select lost its arrow under the pointer. Hover now sets only background-color, to the off-white token (control hover fill).
   Not an inset ring: a 2px border plus a 1px ring renders exactly like the 3px error edge. */
.input:hover,.input.is-hover,.select:hover,.textarea:hover{background-color:var(--control-hover-bg,#f7f6f3)}
.input:disabled:hover,.select:disabled:hover,.textarea:disabled:hover{background-color:var(--control-disabled-bg,#e2e2e2)}

/* [ui-ux-pro-max:ui-styling] the invalid state follows aria-invalid, not only the wrapper class, and the 3px error edge
   gives back 1px of padding so the value does not shift when the error appears */
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"],
.field--error .input,.field--error .select,.field--error .textarea{
  border-width:var(--control-border-width-error,3px);border-color:var(--state-error,#0d0d0c);padding:10px 13px;
}
.field--error .select,.select[aria-invalid="true"]{padding-right:43px}

/* [ui-ux-pro-max:design-system] placeholder and disabled greys come from named tokens, not loose hex */
.input::placeholder,.textarea::placeholder{color:var(--text-placeholder,#595959)}
.input:disabled,.select:disabled,.textarea:disabled,
.btn:disabled,.btn[aria-disabled="true"]{
  background-color:var(--control-disabled-bg,#e2e2e2);border-color:var(--control-disabled-border,#595959);color:var(--control-disabled-text,#4a4a4a);
}
.choice input:disabled{background:var(--control-disabled-bg,#e2e2e2);border-color:var(--control-disabled-border,#595959)}
.choice:has(input:disabled){color:var(--control-disabled-text,#4a4a4a)}
.link[aria-disabled="true"]{color:var(--control-disabled-border,#595959)}

/* [apple-design: concentric corners; refactoring-ui: shape is a signal] a checkbox took the 12px control radius,
   which on a 24px box is a circle, so it read as a radio. A quarter of 24px is the badge radius. */
.choice input[type=checkbox]{border-radius:var(--radius-badge,6px)}
.choice input[type=checkbox]::before{border-radius:2px}

/* [refactoring-ui: hierarchy; frontend-design: structure is information] options inside a fieldset inherited the
   bold 16px field label, so the question and its answers had equal weight. Answers are regular body size. */
.field .choice{font:400 17px/1.4 var(--font-body);letter-spacing:var(--track-body,0)}

/* [refactoring-ui: emphasise by de-emphasising] nav hover and the current page drew the same black 3px line, so the
   hovered item looked like the page you are on. Hover takes the teal underline every link carries (3.04:1, a UI mark,
   not text); the current page keeps black. */
.nav__links a:hover,.nav__links a.is-hover,.nav__more a:hover{border-bottom-color:var(--border-brand,#6e9c9c)}
.nav__links a[aria-current="page"],.nav__links a[aria-current="page"]:hover{border-bottom-color:var(--state-current,#0d0d0c)}
.nav__links a,.nav__more a{padding-inline:var(--space-3,12px);transition:border-color var(--duration-hover,200ms) var(--ease)}
.nav__more ul{z-index:var(--z-raised,10);box-shadow:var(--shadow-3)}
.skip{z-index:var(--z-toast,1200)}

/* [design-system] badge reads its own radius token and sits on the 4px rhythm (was 8px 14px, calc(var(--radius)/2)) */
.badge{border-radius:var(--radius-badge,6px);padding:var(--space-2,8px) var(--space-3,12px)}

/* [design-system] the helper bubble read var(--offwhite), which the gallery layer turned white, so the helper's bubble
   vanished into the white chat box. The bubble reads the off-white token directly (chat is an app surface). */
.chat__bubble{background:var(--bg-canvas,#f7f6f3)}

@media (prefers-reduced-motion:reduce){.nav__links a,.nav__more a{transition:none}}

/* ---- taste lane ---- */
/* ===== Taste lane (2026-11-02): premium polish, append to bundle.css. Palette, radii and weights unchanged. ===== */

/* depth: one quiet two-layer shadow (minimalist-skill: diffuse, low opacity; soft-skill: no harsh drop shadows).
   Contact shadow + soft ambient, offset down so the light source stays single (impeccable craft floor: depth). */
:root{--depth-1:0 0 0 1px rgb(0 0 0 / .04),0 1px 2px rgb(0 0 0 / .04);
  --depth-2:0 0 0 1px rgb(0 0 0 / .04),0 2px 4px rgb(0 0 0 / .04),0 16px 32px -12px rgb(0 0 0 / .12)}

/* boxes: the Ask box and chat sit on the same quiet depth as cards instead of a generic 1px gray border
   (soft-skill: no generic 1px gray borders; taste-skill: one materiality system for every box) */
.ask:not(.ask--teal):not(.ask--night),.chat{border-color:transparent;box-shadow:var(--depth-1)}
@media (prefers-contrast:more){.ask,.chat{border-color:var(--black)}}

/* Ask box hierarchy (impeccable typeset): title, lead, then the action. Lead held to a reading measure,
   a clearer step before the form, chips quieter than the Ask button but still 44px targets */
.ask{gap:32px}
.ask__title{margin-bottom:12px}
.ask__lead{max-width:46ch;margin-bottom:18px;font-weight:300;font-size:17px;line-height:1.5}
.ask--night .ask__lead{font-weight:400} /* light text on black: one step more weight (impeccable typeset) */
.ask__chips button{font-size:15px}
@media (max-width:560px){.ask{padding:24px;gap:20px}}

/* cards: group the title with its text, separate it from the badge (redesign-skill: tight groups, generous separation) */
.card__body{gap:8px;padding:24px 24px 28px}
.card__body>.badge{margin-bottom:8px}
.card__body h3{text-wrap:balance}

/* concert card: the date numeral is set tabular so 1 and 28 sit the same; the date column breathes */
.concert__date{min-width:120px;padding:28px 20px}
.concert__date b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.concert__body{gap:8px;padding:24px 28px 28px}
.concert__body>.badge{margin-bottom:4px}
.concert__body .btn{margin-top:12px}

/* buttons on dark: the primary was a black fill with a teal hairline on black, weaker than the white secondary.
   Primary becomes the white fill, hover teal (black text on teal) (taste-skill: button contrast and hierarchy check) */
.on-dark .btn--primary{background:var(--white);border-color:var(--white);color:var(--black)}
.on-dark .btn--primary:hover,.on-dark .btn--primary.is-hover{background:var(--teal);border-color:var(--teal);color:var(--black)}

/* display tracking by size: at hero scale the -.035em pair reads loose; -.04em is the floor (impeccable craft floor) */
@media (min-width:1100px){.hero__h{letter-spacing:-.04em}}
.hero__lead{text-wrap:pretty}

/* prose: the pull quote's negative indent was pulling the first letter outside the measure when there is
   no opening quote mark; hang only a real quote mark (impeccable polish: optical alignment) */
.prose .p-pull p{text-indent:0}
.prose .p-pull .p-hang{margin-left:-.4em}
/* callout: inner paragraphs kept the global 1em bottom margin, so the box was bottom-heavy (redesign-skill: optical padding) */
.prose .p-callout>:last-child{margin-bottom:0}
.prose .p-callout p+p{margin-top:12px}

/* footer: the email broke mid-word ("australianchristianar ts.com"); break only at a <wbr> or between words,
   and give the contact column more room (redesign-skill: footer link farm, impeccable typeset: stress) */
.footer__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr)}
.footer__grid a{overflow-wrap:break-word;padding:2px 0}
.footer__grid .wl b{margin-bottom:8px}
.footer__legal{font-size:14px;line-height:1.5}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr;row-gap:40px}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}

/* browser surfaces carry the palette (impeccable craft floor): selection in teal with black text */
::selection{background:var(--teal);color:var(--black)}
.on-dark ::selection,.f-black ::selection,.ask--night ::selection{background:var(--white);color:var(--black)}

/* ---- motion lane ---- */
/* ===== Motion lane (append to bundle.css). CSS only, transform and opacity only, one easing family.
   Canon: motion/MOTION.md and SYSTEM.md 6 (moving things opt-in; several allowed since 2 November 2026). Skills: find-animation-opportunities (FAO),
   animation-vocabulary (VOC), animate (ANI), emil-design-eng (EMIL), review-animations (REV). ===== */

/* [ANI] extend the existing tokens, don't fork them. --ease already equals settle (Apple refinement layer).
   These mirror the proposed tokens.json "duration" and "easing" families; drop this block once tokens.css carries them. */
:root{
  --easing-settle:cubic-bezier(.23,1,.32,1);   /* every entrance, exit, hover and press */
  --easing-glide:cubic-bezier(.77,0,.175,1);   /* on-screen A to B, and the breathing loop */
  --duration-press:120ms;                       /* pointer-down response */
  --duration-fast:200ms;                        /* hover, release, small state change, reduced-motion fade */
  --duration-reveal:320ms;                      /* card media corners, the most a UI move takes */
  --duration-door:700ms;                        /* the door opens (canon) */
  --duration-breath:9s;                         /* the night light breathes (canon) */
  --press-dur:var(--duration-press);
  --ease:var(--easing-settle);
}

/* ---------- Button [EMIL, ANI]: press lands on pointer-down, release settles slower (MOTION: instant in, fast out).
   Was: release reused the 100ms ease-out press, so the button snapped back. */
.btn{transition:transform var(--duration-fast) var(--easing-settle),background-color var(--duration-fast) var(--easing-settle),color var(--duration-fast) var(--easing-settle),border-color var(--duration-fast) var(--easing-settle)}
.btn:active{transform:scale(var(--press-scale));transition-duration:var(--duration-press)}
.btn:disabled:active,.btn[aria-disabled="true"]:active{transform:none}

/* ---------- Link [FAO]: hover is tens a day, so colour only, no movement. Fill and underline colour move together. */
.link{transition:background-color var(--duration-fast) var(--easing-settle),color var(--duration-fast) var(--easing-settle),text-decoration-color var(--duration-fast) var(--easing-settle)}

/* ---------- Card [EMIL, ANI, REV]: hover lift gated to real pointers (touch fires false hovers),
   press confirms on pointer-down, the media's door corners move inside the UI budget (was .6s). */
.card{transition:transform var(--duration-fast) var(--easing-settle),box-shadow var(--duration-fast) var(--easing-settle)}
.card:hover{transform:none}
@media (hover:hover) and (pointer:fine){.card:hover{transform:translateY(-2px)}}
.card.is-hover{transform:translateY(-2px)}
.card:active{transform:scale(var(--press-scale));transition-duration:var(--duration-press)}
.card__media{transition:clip-path var(--duration-reveal) var(--easing-settle)}

/* ---------- Ask box button and chips [EMIL]: same press and release as .btn, one curve. */
.ask__btn,.ask__chips button{transition:transform var(--duration-fast) var(--easing-settle),background-color var(--duration-fast) var(--easing-settle),color var(--duration-fast) var(--easing-settle)}
.ask__btn:active,.ask__chips button:active{transform:scale(var(--press-scale));transition-duration:var(--duration-press)}

/* ---------- Choice [EMIL, REV]: the mark never grows from scale(0). It arrives from .6 with a fade (entry 160ms),
   and leaves faster (exit about 60% of entry). The box fill eases instead of flashing teal. */
.choice input{transition:background-color var(--duration-fast) var(--easing-settle)}
.choice input::before{transform:scale(.6);opacity:0;transition:transform 100ms var(--easing-settle),opacity 100ms var(--easing-settle)}
.choice input:checked::before{transform:scale(1);opacity:1;transition-duration:160ms}

/* ---------- Chat thinking dots [VOC: pulse, opacity only]: a state, not decoration; shown only while a helper types.
   One easing family: glide for the swell. */
.chat__dots i{animation:chat-think 1.2s var(--easing-glide) infinite}

/* ---------- The door opens [ANI, VOC: reveal]: the photograph rises 60px into the door from black, with a fade,
   700ms settle, once. Opt-in: put .door-opens on .triptych or .night__door. Never on by default (SYSTEM.md 6). */
@keyframes acha-door-open{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
.door-opens .ph>img{animation:acha-door-open var(--duration-door) var(--easing-settle) both}

/* ---------- The light breathes [VOC: alternate loop]: spill and halo ease between 82% and 100% over 9s.
   Opt-in: .is-live on .night. Opacity only (the blur filter stays static, so nothing repaints the blur each frame). */
@keyframes acha-breathe{from{opacity:.82}to{opacity:1}}
.night.is-live .night__spill,.night.is-live .night__set::before{animation:acha-breathe var(--duration-breath) var(--easing-glide) infinite alternate;will-change:opacity}

/* ---------- Several moving things may share a page (Ryan, 2 November 2026): ambients are opt-in, never forced off by each other.
   Reduced motion still stops them all. */

/* ---------- Reduced motion [ANI, EMIL]: fewer and gentler, not none. Colour and opacity stay; transforms go;
   the door is already open and the light is still. */
@media (prefers-reduced-motion:reduce){
  .btn:active,.card:active,.ask__btn:active,.ask__chips button:active,.card:hover,.card.is-hover{transform:none}
  .btn,.card,.ask__btn,.ask__chips button{transition-property:background-color,color,border-color,opacity;transition-duration:var(--duration-fast)}
  .card__media{transition:none}
  .choice input::before{transform:none;transition:opacity var(--duration-fast) linear}
  .door-opens .ph>img{animation:none;opacity:1;transform:none}
  .night.is-live .night__spill,.night.is-live .night__set::before{animation:none;opacity:1}
}

/* ---- quality lane ---- */
/* ===== Quality lane (accessibility, web interface guidelines, brand review, design critique, design review), 2026-11-02 =====
   Append to bundle.css. Overrides only; palette closed, existing tokens only. */

/* [accessibility] Night grounds: the black ring vanished on .night/.f-black (no .on-dark there). White ring, black gap. */
.night :focus-visible,.f-black :focus-visible,.night__set :focus-visible{outline-color:var(--white);box-shadow:0 0 0 3px var(--black)}

/* [accessibility] The teal donate band kept the dark band's white ring (3.04:1). CONTRAST.md: on teal the ring is black (6.90:1), teal gap. */
.donate :focus-visible{outline-color:var(--black);box-shadow:0 0 0 3px var(--teal)}

/* [accessibility] Ask button ring was currentColor = white on a white box (invisible) and white on teal (3.04:1). */
.ask__btn:focus-visible{outline-color:var(--black)}
.ask--night .ask__btn:focus-visible,.ask--night .ask__input:focus-visible,.ask--night .ask__chips button:focus-visible{outline-color:var(--white)}

/* [accessibility] SYSTEM.md 3: 44 px touch targets. Footer links measured 30 px, the nav logo link 34 px. */
.footer__grid a{display:flex;align-items:center;min-height:44px;padding-block:0}
.nav__logo{display:flex;align-items:center;min-height:44px}

/* [web-design-guidelines] Long addresses broke mid-word ("australianchristianar / ts.com"). Keep the kit's overflow-wrap:anywhere as the
   safety net (break-word overflowed into the next column in testing) and fix it in markup: <wbr> after the @ (see quality.md). */

/* [web-design-guidelines] Touch: no double-tap zoom delay on controls. */
.btn,.ask__btn,.ask__chips button,.nav__more summary,.choice{touch-action:manipulation}

/* [web-design-guidelines] The card photo reshapes into the door (clip-path, .6s) and kept moving under reduced motion. */
@media (prefers-reduced-motion:reduce){.card__media{transition:none}}

/* [web-design-guidelines] The black house is a dark scheme: native controls and scrollbars follow. */
.night,.f-black,.ask--night,.prose--night{color-scheme:dark}

/* [brand-review] Chat: the gallery layer set --offwhite to white, so Dot's bubble was white on white.
   SYSTEM.md 9: "white with a hairline by day". Hairline from the gray divider token. */
.chat__bubble{background:var(--white);box-shadow:inset 0 0 0 1px var(--gray)}
.chat__msg--me .chat__bubble{box-shadow:none}

/* [brand-review] SYSTEM.md 2 and 5: no gradient over a photograph. .photo-band::before is a teal-to-taupe wash over the photo
   and was never switched off by the gallery layer (only ::after was). */
.photo-band::before{display:none}

/* [design-critique] Wall labels at night: off-palette #D9D9D9 becomes white at 85% (same tone, 14.6:1, one token family with .ask--night). */
.night__label{color:rgb(255 255 255 / .85)}

/* [design-review] Triptych label sat 58 px below the set, closer to the next section than to its photograph. Wall labels sit close. */
.triptych__label{bottom:-44px}

/* [design-review] Phone width: the NightDoor preview's inline 5fr/6fr grid never stacks (the lit door sits over "Concert." at 375 px)
   and the Field pair overflows (page 453 px wide at 375). Classes replace the inline grids (markup edits in quality.md). */
.night__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center}
.field-pair{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
@media (max-width:720px){
  .night__grid{grid-template-columns:1fr;gap:32px}
  .field-pair{grid-template-columns:1fr}
}

/* ---- integration ---- */
/* press timing follows MOTION.md (100ms instant), not the motion lane's 120ms */
:root{--duration-press:100ms;--press-dur:100ms}
/* footer: the email breaks at its <wbr>; break-word pushed it into the next column */
.footer__grid a{overflow-wrap:normal}

/* ===== Router libraries pass (2 November 2026): Aceternity, Animate UI, Uiverse, Magic UI patterns, redrawn for AChA ===== */
/* Focus cards (Aceternity) -> .lib: the photo you point at stays, the rest step back. No blur, no tint: opacity only. */
.lib{display:grid;gap:16px}
.lib__filter{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0}
.lib__filter legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lib__filter input{position:absolute;opacity:0;pointer-events:none}
.lib__filter label{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--border-strong,#767676);border-radius:999px;font:700 16px/1 var(--font-body);cursor:pointer;transition:background-color var(--duration-fast,200ms) var(--easing-settle,cubic-bezier(.23,1,.32,1)),border-color var(--duration-fast,200ms) var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.lib__filter input:checked+label{background:var(--black,#0d0d0c);border-color:var(--black,#0d0d0c);color:var(--white,#fff)}
.lib__filter input:focus-visible+label{outline:2px solid #0d0d0c;outline-offset:2px;box-shadow:0 0 0 2px #fff}
.lib__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.lib__item{margin:0;transition:opacity var(--duration-fast,200ms) var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.lib__item figure{margin:0}
.lib__item img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.lib__item figcaption{font:400 14px/1.35 var(--font-body);margin-top:8px}
.lib__item figcaption b{display:block;font-weight:700}
.lib__grid:has(.lib__item:hover,.lib__item:focus-within) .lib__item:not(:hover):not(:focus-within){opacity:.42}
.lib:has(#lib-orch:checked) .lib__item:not([data-scope=orchestra]),
.lib:has(#lib-choir:checked) .lib__item:not([data-scope=choir]),
.lib:has(#lib-gen:checked) .lib__item:not([data-scope=general]){display:none}

/* Switch (Uiverse, Animate UI) -> .switch: a 44px target, the track a soft control, the knob a notehead. */
.switch{display:inline-flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font:400 18px/1.3 var(--font-body)}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch__track{position:relative;flex:none;width:56px;height:32px;border:2px solid var(--border-strong,#767676);border-radius:16px;background:#fff;transition:background-color var(--duration-fast,200ms) var(--easing-settle,cubic-bezier(.23,1,.32,1)),border-color var(--duration-fast,200ms) var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.switch__knob{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:6px;background:#0d0d0c;transform:rotate(-6deg);transition:transform var(--duration-fast,200ms) var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.switch input:checked+.switch__track{background:var(--teal,#6E9C9C);border-color:#0d0d0c}
.switch input:checked+.switch__track .switch__knob{transform:translateX(24px) rotate(6deg)}
.switch input:focus-visible+.switch__track{outline:2px solid #0d0d0c;outline-offset:2px;box-shadow:0 0 0 2px #fff}
.switch input:disabled+.switch__track{opacity:.45}
.switch__state{font-weight:700}

/* Tabs (Animate UI) -> .tabs: a teal underline that glides to the chosen tab. */
.tabs{--n:3;--i:0}
.tabs__list{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);border-bottom:1px solid var(--border-subtle,#e2e2e2)}
.tabs__list input{position:absolute;opacity:0;pointer-events:none}
.tabs__list label{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 12px;font:700 16px/1.2 var(--font-body);color:var(--text-secondary,#4a4a4a);cursor:pointer;transition:color var(--duration-fast,200ms) var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.tabs__list input:checked+label{color:#0d0d0c}
.tabs__list input:focus-visible+label{outline:2px solid #0d0d0c;outline-offset:-4px}
.tabs__bar{position:absolute;left:0;bottom:-1px;height:3px;width:calc(100% / var(--n));background:var(--teal,#6E9C9C);transform:translateX(calc(100% * var(--i)));transition:transform var(--duration-reveal,320ms) var(--easing-glide,cubic-bezier(.77,0,.175,1))}
.tabs:has(.tabs__list input:nth-of-type(2):checked){--i:1}
.tabs:has(.tabs__list input:nth-of-type(3):checked){--i:2}
.tabs:has(.tabs__list input:nth-of-type(4):checked){--i:3}
.tabs__panel{display:none;padding:20px 0 0}
.tabs:has(.tabs__list input:nth-of-type(1):checked) .tabs__panel:nth-child(2),
.tabs:has(.tabs__list input:nth-of-type(2):checked) .tabs__panel:nth-child(3),
.tabs:has(.tabs__list input:nth-of-type(3):checked) .tabs__panel:nth-child(4),
.tabs:has(.tabs__list input:nth-of-type(4):checked) .tabs__panel:nth-child(5){display:block}

/* Loader (Uiverse) -> .staff-loader: three noteheads climbing a staff while a helper thinks. */
.staff-loader{display:inline-block;position:relative;width:72px;height:40px}
.staff-loader::before{content:"";position:absolute;inset:4px 0;background:repeating-linear-gradient(180deg,currentColor 0 1px,transparent 1px 8px);opacity:.55}
.staff-loader i{position:absolute;width:12px;height:10px;border-radius:3px;background:currentColor;transform:rotate(-8deg);bottom:6px;animation:staff-step 1.2s var(--easing-settle,cubic-bezier(.23,1,.32,1)) infinite}
.staff-loader i:nth-child(1){left:8px}
.staff-loader i:nth-child(2){left:30px;animation-delay:.15s}
.staff-loader i:nth-child(3){left:52px;animation-delay:.3s}
@keyframes staff-step{0%,100%{transform:translateY(0) rotate(-8deg)}40%{transform:translateY(-16px) rotate(4deg)}}

/* Ink icons: the Icons group, brush-drawn like the helpers. Inline them so they take color. */
.ink{display:inline-block;width:24px;height:24px;flex:none;vertical-align:-.2em}
.ink--16{width:16px;height:16px}.ink--20{width:20px;height:20px}.ink--32{width:32px;height:32px}.ink--48{width:48px;height:48px}

@media (prefers-reduced-motion:reduce){
 .staff-loader i{animation:none}
 .tabs__bar,.switch__knob,.lib__item{transition:none}
}

/* ===== Alive pass (2 November 2026): entrances, kinetic type, the opening door, scroll-driven reveals, ink hovers =====
   Rule: entrances play once and responses follow the pointer; neither counts as the page's moving thing.
   Ambient loops (ticker, breathing light, live face) are still one per page and always opt-in. */
:root{--duration-entrance:640ms;--stagger:70ms}
@keyframes acha-rise{from{transform:translateY(108%)}to{transform:none}}
@keyframes acha-fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes acha-write{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% 0 -10% 0)}}
@keyframes acha-door-wipe{from{clip-path:inset(0 50% 0 50%);transform:scale(1.06)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes acha-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Kinetic type: each word rises out of its own line, Light first, Bold after; one Brittany word writes itself on. */
.kin__w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin:0 -.02em -.1em}
.kin__w>span{display:inline-block;animation:acha-rise var(--duration-entrance) var(--easing-settle) both;animation-delay:calc(120ms + var(--i,0) * var(--stagger))}
.kin-fade{animation:acha-fade-up var(--duration-entrance) var(--easing-settle) both;animation-delay:calc(120ms + var(--i,0) * var(--stagger))}
.kin-write{display:inline-block;animation:acha-write 1100ms var(--easing-glide) both;animation-delay:calc(120ms + var(--i,0) * var(--stagger))}

/* NightLamp v3: the mark itself. The two flats and the door use the logo's own geometry (logo-acha-symbol.svg, viewBox 434 x 205):
   the door stands closed like a third flat, swings to the logo's leaning shape, turns to light, and its light falls on the floor. */
.nl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;background:var(--night-house,#0a0a0a);color:#fff;padding:56px 48px;overflow:hidden}
.nl__copy .d{color:#fff;margin:0 0 20px}
.nl__copy p{color:var(--night-body,#dbdbdb);font-size:18px;line-height:28px;max-width:30ch;margin:0 0 28px}
.nl__mark{display:block;width:100%;height:auto;overflow:visible}
.nl__flat{fill:#151515;stroke:rgba(255,255,255,.16);stroke-width:1;vector-effect:non-scaling-stroke;animation:acha-fade-up 600ms var(--easing-settle) both}
.nl__flat--r{animation-delay:90ms}
.nl__door{fill:#fff;animation:nl-swing var(--duration-door,700ms) var(--easing-settle) 450ms both,nl-lit 500ms var(--easing-settle) 650ms both}
.nl__floor{stroke:var(--night-rule,rgba(255,255,255,.14));stroke-width:1;vector-effect:non-scaling-stroke}
.nl__spill{transform-box:fill-box;transform-origin:50% 0;animation:nl-spill 900ms var(--easing-settle) 950ms both}
@keyframes nl-swing{from{d:path("M161.71,182.60 Q161.71,196.44 175.55,196.44 L258.60,196.44 Q272.44,196.44 272.44,182.60 L272.44,22.08 Q272.44,8.24 258.60,8.24 L175.55,8.24 Q161.71,8.24 161.71,22.08 Z")}to{d:path("M161.71,176.98 Q161.71,190.82 175.44,192.54 L258.71,202.97 Q272.44,204.69 272.44,190.85 L272.44,13.84 Q272.44,0.00 258.73,1.90 L175.42,13.45 Q161.71,15.35 161.71,29.19 Z")}}
@keyframes nl-lit{from{fill:#1b1b1b}to{fill:#fff}}
@keyframes nl-spill{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}
.nl.is-live .nl__spill{animation:nl-spill 900ms var(--easing-settle) 950ms both,nl-breathe var(--duration-breath,9s) var(--easing-glide) 1.9s infinite alternate}
@keyframes nl-breathe{from{opacity:1}to{opacity:.7}}
@media (max-width:720px){.nl{grid-template-columns:1fr;padding:40px 24px;gap:32px}}
@media (prefers-reduced-motion:reduce){.nl__flat,.nl__door,.nl__spill,.nl.is-live .nl__spill{animation:none}}

/* Ticker (Magic UI marquee, the canon olive ticker): one band drifting, pauses under the pointer or focus. */
.ticker{background:var(--olive,#C9CE55);color:#0d0d0c;overflow:hidden;padding:18px 0;font:700 22px/1 var(--font-heading)}
.ticker__track{display:flex;width:max-content;animation:ticker-drift 38s linear infinite}
.ticker__set{display:flex;align-items:center;gap:28px;padding-right:28px;white-space:nowrap}
.ticker__set .lt{font-weight:300}
.ticker__set .ink{width:22px;height:22px}
.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused}
@keyframes ticker-drift{to{transform:translateX(-50%)}}

/* PhotoWall: gallery photos arriving through the door, one after another; the pointer opens a frame's big corner. */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.wall li{margin:0}
.wall figure{margin:0;overflow:hidden;border-radius:var(--frame-s,18px);transition:border-radius var(--duration-reveal,320ms) var(--easing-settle),transform var(--duration-fast) var(--easing-settle)}
.wall img{display:block;width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.06);animation:acha-door-wipe var(--duration-entrance) var(--easing-settle) both;animation-delay:calc(80ms + var(--i,0) * 55ms);transition:scale var(--duration-reveal) var(--easing-settle)}
.wall li:nth-child(4n+1) figure:hover,.wall li:nth-child(4n+1) figure:focus-within{border-radius:var(--frame-r,36px) var(--frame-s) var(--frame-s) var(--frame-s)}
.wall li:nth-child(4n+2) figure:hover,.wall li:nth-child(4n+2) figure:focus-within{border-radius:var(--frame-s) var(--frame-r,36px) var(--frame-s) var(--frame-s)}
.wall li:nth-child(4n+3) figure:hover,.wall li:nth-child(4n+3) figure:focus-within{border-radius:var(--frame-s) var(--frame-s) var(--frame-r,36px) var(--frame-s)}
.wall li:nth-child(4n) figure:hover,.wall li:nth-child(4n) figure:focus-within{border-radius:var(--frame-s) var(--frame-s) var(--frame-s) var(--frame-r,36px)}
.wall figure:hover img{scale:1.05}

/* Reveal on scroll: put .reveal (rise) or .reveal--door (photos) on anything; driven by the scroll itself where the browser can,
   a short entrance where it cannot. Already-visible content is never hidden. */
.reveal{animation:acha-fade-up var(--duration-entrance) var(--easing-settle) both}
.reveal--door{animation:acha-door-wipe var(--duration-entrance) var(--easing-settle) both}
@supports (animation-timeline:view()){
 .reveal,.reveal--door{animation-timeline:view();animation-range:entry 5% entry 100%;animation-duration:auto;animation-delay:0s}
}
/* Scroll progress: a teal hairline that fills as you read. On a page use .progress--page; in a scrolling box name the box --read. */
.progress{position:sticky;top:0;z-index:2;height:3px;background:var(--teal,#6E9C9C);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline:scroll()){
 .progress{animation:acha-grow-x linear both;animation-timeline:--read}
 .progress--page{position:fixed;left:0;right:0;animation-timeline:scroll(root)}
 .readbox{scroll-timeline:--read}
}
@supports not (animation-timeline:scroll()){.progress{display:none}}

/* Ink hovers: the link underline is inked over left to right; the primary button fills with black like a brush pass; cards lift. */
.ink-link{color:#0d0d0c;text-decoration:none;background:linear-gradient(#0d0d0c,#0d0d0c) 0 100%/0 3px no-repeat,linear-gradient(var(--teal,#6E9C9C),var(--teal,#6E9C9C)) 0 100%/100% 3px no-repeat;padding-bottom:3px;transition:background-size var(--duration-reveal) var(--easing-settle)}
.ink-link:hover,.ink-link:focus-visible{background-size:100% 3px,100% 3px}
.btn--sweep{position:relative;isolation:isolate;overflow:hidden}
.btn--sweep::before{content:"";position:absolute;inset:-2px;z-index:-1;background:#0d0d0c;transform:scaleX(0);transform-origin:0 50%;transition:transform var(--duration-reveal) var(--easing-settle)}
.btn--sweep:hover::before,.btn--sweep:focus-visible::before{transform:scaleX(1)}
.btn--sweep.btn--primary:hover{background:var(--teal,#6E9C9C);color:#fff}
.btn--sweep .ink{transition:transform var(--duration-reveal) var(--easing-settle)}
.btn--sweep:hover .ink{transform:translateX(4px)}
.lift{transition:transform var(--duration-fast) var(--easing-settle),box-shadow var(--duration-fast) var(--easing-settle)}
.lift:hover,.lift:focus-within{transform:translateY(-4px);box-shadow:var(--depth-2,0 8px 24px rgba(0,0,0,.1))}

/* Accordion: questions that open smoothly to their full height; the chevron turns. */
.acc{border-top:1px solid var(--border-subtle,#e2e2e2);interpolate-size:allow-keywords}
.acc:last-of-type{border-bottom:1px solid var(--border-subtle,#e2e2e2)}
.acc summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;cursor:pointer;list-style:none;font:700 20px/1.3 var(--font-body)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ink{transition:transform var(--duration-reveal) var(--easing-settle)}
.acc[open] summary .ink{transform:rotate(180deg)}
.acc summary:focus-visible{outline:2px solid #0d0d0c;outline-offset:2px}
.acc__body{padding:0 0 20px;max-width:34em;line-height:28px}
.acc::details-content{block-size:0;overflow:clip;transition:block-size var(--duration-reveal) var(--easing-settle),content-visibility var(--duration-reveal) allow-discrete}
.acc[open]::details-content{block-size:auto}

/* ChatLive: a helper conversation that plays in, bubble by bubble, with the staff loader between. */
.chat--live .chat__msg{animation:acha-fade-up 420ms var(--easing-settle) both;animation-delay:calc(200ms + var(--i,0) * 900ms)}
.chat--live .chat__typing{animation:chat-typing 900ms steps(1,end) both;animation-delay:calc(200ms + var(--i,0) * 900ms - 900ms)}
@keyframes chat-typing{0%{opacity:1}100%{opacity:0;height:0;margin:0;overflow:hidden}}

@media (prefers-reduced-motion:reduce){
 .kin__w>span,.kin-fade,.kin-write,.wall img,.reveal,.reveal--door,.chat--live .chat__msg{animation:none}
 .ticker__track{animation:none}
 .chat--live .chat__typing{display:none}
 .wall figure,.wall img,.btn--sweep::before,.ink-link,.lift,.acc summary .ink,.acc::details-content{transition:none}
 .progress{animation:none;display:none}
}

/* Video in the door (2 November 2026): the Video group's short greyscale loops play inside any photo frame or door.
   Markup: .ph > img (the still, from the same clip) + video[autoplay muted loop playsinline]. The still shows under reduced motion. */
.ph>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);filter:grayscale(1) contrast(1.06)}
.door-opens .ph>video{animation:acha-door-open var(--duration-door) var(--easing-settle) both}
@media (prefers-reduced-motion:reduce){.ph>video{display:none}}

/* Fonts, embedded in this file so every card preview loads them wherever it is shown (2 November 2026).
   tokens.css points at fonts/ relative to itself, which card previews cannot reach; these rules make Neue Regrade, Helvetica Neue and Brittany load everywhere. */






/* Links, redrawn (2 November 2026): no teal block on hover. Black text on a 3px teal line; on hover or focus black ink draws across the line, left to right. */
.link,.prose a{color:var(--black,#0d0d0c);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat,linear-gradient(var(--teal,#6E9C9C),var(--teal,#6E9C9C)) 0 100%/100% 3px no-repeat;padding-bottom:2px;transition:background-size var(--duration-reveal,320ms) var(--easing-settle,cubic-bezier(.23,1,.32,1)),color var(--duration-fast,200ms)}
.link:hover,.link.is-hover,.link:focus-visible,.prose a:hover,.prose a:focus-visible{background:linear-gradient(currentColor,currentColor) 0 100%/100% 3px no-repeat,linear-gradient(var(--teal,#6E9C9C),var(--teal,#6E9C9C)) 0 100%/100% 3px no-repeat;text-decoration:none}
.on-dark .link,.on-dark .link:hover,.on-dark .link.is-hover{color:var(--white,#fff)}
.donate .link,.donate .link:hover,.donate .link.is-hover{color:var(--black,#0d0d0c);background-color:transparent;background-image:linear-gradient(#fff,#fff),linear-gradient(#0d0d0c,#0d0d0c)}
.link[aria-disabled="true"]{color:var(--control-disabled-border,#595959);background:linear-gradient(var(--gray,#e2e2e2),var(--gray,#e2e2e2)) 0 100%/100% 3px no-repeat}
@media (prefers-reduced-motion:reduce){.link,.prose a{transition:none}}

/* Door corners match the flats (2 November 2026): --door is resolved on the door itself, so it picks up the container-relative --soft-r instead of the 12px root value. */
 .door,.lit{--door:shape(from 0 calc(7.5% + var(--soft-r)), curve to var(--soft-r) calc(7.5% - .17 * var(--soft-r)) with 0 7.5%,
  line to calc(100% - var(--soft-r)) calc(.17 * var(--soft-r)), curve to 100% var(--soft-r) with 100% 0,
  line to 100% calc(100% - var(--soft-r)), curve to calc(100% - var(--soft-r)) calc(100% - .15 * var(--soft-r)) with 100% 100%,
  line to var(--soft-r) calc(93.2% + .15 * var(--soft-r)), curve to 0 calc(93.2% - var(--soft-r)) with 0 93.2%, close)}

/* ===== Key words, grain, gradient ring, gradient icons, mosaic, layered doors (2 November 2026) ===== */

/* Key words. Christ is always set in Brittany at 18px and above. A headline has one key word:
   Light lead-in, Bold on the words leading to the key word, Brittany on the key word ("The arts belong **to** *Christ*").
   When the key word carries information (a place, program, date, action) swap them: Brittany leads in, Bold sets the key word. */
.kw{font-family:var(--font-accent,"Brittany Signature",cursive);font-weight:400;font-style:normal;letter-spacing:0;font-size:1.25em;line-height:0;display:inline-block;padding:0 .06em 0 .02em;vertical-align:baseline;text-transform:none}
.kw--lead{font-size:.8em}
.d .kw{font-size:.92em;line-height:1.3;margin-left:-.02em}.d .kw--lead{font-size:.86em;line-height:1}
/* Rising words keep a shared baseline: the mask clips instead of hiding overflow, so light and bold words sit on one line */
.kin__w{overflow:visible;vertical-align:baseline;padding:0;margin:0;clip-path:inset(-.5em -.2em -.24em -.2em)}
.kin__w:has(.kw){clip-path:inset(-1.2em -.4em -.7em -.4em)}
@keyframes acha-write{from{clip-path:inset(-1.2em 100% -1.2em -.3em)}to{clip-path:inset(-1.2em -.3em -1.2em -.3em)}}

/* Grain: every field, band, flat, door and photograph carries a fine print grain. White walls stay clean. */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0 .03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--grain-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='5' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 .38 0 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--grain-photo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='4' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--gradient-brand:linear-gradient(270deg,#C5BDA2 8%,#C9CE55 49%,#6E9C9C 90%)}
.f-teal,.f-olive,.f-taupe,.donate,.grain{background-image:var(--grain)}
.f-black,.night,.flat--night,.grain--dark{background-image:var(--grain-light)}
.f-grad{background-image:var(--grain),linear-gradient(90deg,var(--teal) 8%,var(--olive) 49%,var(--taupe) 90%)}
.ph::after{content:"";position:absolute;inset:0;background:var(--grain-photo);mix-blend-mode:overlay;opacity:.22;pointer-events:none;z-index:2}
.grain-off,.grain-off::after{background-image:none!important}

/* Gradient ring: an animated brand-gradient border for the one Give or headline action in a view */
@property --ring{syntax:"<angle>";inherits:false;initial-value:0deg}
.btn--ring,.btn--ring:hover,.btn--ring.is-hover,.btn--ring:focus-visible{--fill:var(--black,#0d0d0c);border:3px solid transparent;background:var(--btn-grain,var(--grain-light)) padding-box,linear-gradient(var(--fill),var(--fill)) padding-box,conic-gradient(from var(--ring),#6E9C9C,#C9CE55,#C5BDA2,#C9CE55,#6E9C9C) border-box;animation:acha-ring 5s linear infinite,acha-glow 5s ease-in-out infinite}
.btn--ring{color:var(--white,#fff)}
.btn--ring:hover,.btn--ring.is-hover,.btn--ring:focus-visible{--fill:var(--teal,#6E9C9C);--btn-grain:var(--grain);color:var(--black,#0d0d0c)}
.on-dark .btn.btn--ring,.donate .btn.btn--ring,.f-black .btn.btn--ring{--fill:var(--white,#fff);--btn-grain:linear-gradient(transparent,transparent);color:var(--black,#0d0d0c);border:3px solid transparent;background:var(--btn-grain,var(--grain-light)) padding-box,linear-gradient(var(--fill),var(--fill)) padding-box,conic-gradient(from var(--ring),#6E9C9C,#C9CE55,#C5BDA2,#C9CE55,#6E9C9C) border-box}
.on-dark .btn.btn--ring:hover,.on-dark .btn.btn--ring.is-hover,.donate .btn.btn--ring:hover,.f-black .btn.btn--ring:hover{--fill:var(--black,#0d0d0c);--btn-grain:var(--grain-light);color:var(--white,#fff)}
@keyframes acha-glow{0%,100%{box-shadow:0 6px 22px -6px rgba(110,156,156,.75)}50%{box-shadow:0 6px 26px -6px rgba(201,206,85,.85)}}
@keyframes acha-ring{to{--ring:360deg}}
@media (prefers-reduced-motion:reduce){.btn--ring,.btn--ring:hover{animation:none;box-shadow:0 6px 22px -6px rgba(110,156,156,.6)}}

/* Photo mosaic (Bauhaus wall): the sharp old mark's flats and doors, each with one to four corners rounded at the mark's own radius (an eighth of the panel's width) */
.bw-mosaic{display:block;width:100%;height:auto;overflow:visible}
.bw-mosaic .t{transform-box:fill-box;transform-origin:50% 50%;animation:acha-mz var(--duration-entrance,640ms) var(--easing-settle,cubic-bezier(.23,1,.32,1)) both;animation-delay:calc(120ms + var(--i,0) * var(--stagger,70ms))}
.bw-mosaic image{transform-box:fill-box;transform-origin:50% 50%;transition:transform .7s var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.bw-mosaic g.t:hover image,.bw-mosaic g.t:focus-visible image{transform:scale(1.05)}
.bw-mosaic g.t:focus-visible{outline:none}
@keyframes acha-mz{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bw-mosaic .t{animation:none}.bw-mosaic image{transition:none}}

/* Grain on filled buttons (2 November 2026): the same print grain as the colour fields on black and teal fills. White, outline, text and disabled buttons stay clean. */
.btn--primary:not(.btn--ring),.btn--dark:not(.btn--ring){background-image:var(--grain-light)}
.btn--teal,.btn--primary:not(.btn--ring):hover,.btn--primary.is-hover:not(.btn--ring),.btn--dark:not(.btn--ring):hover{background-image:var(--grain)}
.on-dark .btn--primary:not(.btn--ring):hover,.on-dark .btn--primary.is-hover:not(.btn--ring),.donate .btn--primary:not(.btn--ring){background-image:none}
.btn:disabled,.btn[aria-disabled="true"]{background-image:none}

/* Colour on hover (2 November 2026): photographs rest in black and white and turn to full colour under the pointer or keyboard focus, easing back when it leaves. The night stays black and white. */
.bw,.ph img,.card__media img,.hero__photo img,.lib__item img,.wall img,.bw-mosaic image,.reveal img{filter:grayscale(1) contrast(1.06);transition:filter 600ms var(--easing-settle,cubic-bezier(.23,1,.32,1)),transform .7s var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.bw:hover,.ph:hover img,.ph:focus-within img,.card:hover .card__media img,.card:focus-within .card__media img,.lib__item:hover img,.lib__item:focus-within img,.wall li:hover img,.wall figure:focus-visible img,.bw-mosaic g.t:hover image,.bw-mosaic g.t:focus-visible image,.reveal:hover img{filter:none}
.night img,.night .ph img,.night .ph:hover img,.flat--night img{filter:grayscale(1) contrast(1.06)}
@media (hover:none){.bw:hover,.ph:hover img,.card:hover .card__media img,.lib__item:hover img,.wall li:hover img,.bw-mosaic g.t:hover image,.reveal:hover img{filter:grayscale(1) contrast(1.06)}}

/* Fixes (2 November 2026, later) */
/* Buttons are set in Helvetica Neue Bold, the body face; Neue Regrade stays for display type */
.btn,.btn--sm{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:0}
/* No grain on a button that already sits on a grain field */
:is(.f-teal,.f-olive,.f-taupe,.f-black,.f-grad,.donate,.night,.grain,.grain--dark) .btn:not(.btn--ring){background-image:none}
:is(.f-teal,.f-olive,.f-taupe,.f-black,.f-grad,.donate,.night,.grain,.grain--dark) .btn.btn--ring{--btn-grain:linear-gradient(transparent,transparent)}
/* Bands inside the page column take the card radius; full-bleed bands (.band--bleed) stay square */
.donate,.give{border-radius:var(--radius-card,16px);overflow:hidden}
.donate.band--bleed,.give.band--bleed{border-radius:0}
/* Lists in prose: an ink check icon instead of a bullet, hung in the margin, on the 8px rhythm */
.prose ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:8px}
.prose ul>li{position:relative;padding-left:32px;margin:0;line-height:28px}
.prose ul>li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:0;background:currentColor;-webkit-mask:var(--ii-check) center/contain no-repeat;mask:var(--ii-check) center/contain no-repeat}
.prose ul ul{margin:8px 0 0}
.prose ul ul>li::before{width:16px;height:16px;top:6px}
.prose :is(h3,h4)+ul{margin-top:4px}


/* ===== From the AChA brand assets lab (2 November 2026): the best hover, type, waiting, transition, field and scroll moves, rebuilt on the kit's tokens ===== */
/* Hover: arrow link (the arrow leaves, its twin arrives) */
.arrow-link{display:inline-flex;align-items:center;gap:.5em;font:700 18px/1.2 var(--font-body);color:var(--black,#0d0d0c);text-decoration:none}
.arrow-link .al{position:relative;display:inline-block;width:1.1em;height:1em;overflow:hidden}
.arrow-link .al::before,.arrow-link .al::after{content:"\2192";position:absolute;left:0;top:-.08em;transition:transform var(--duration-reveal,320ms) var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.arrow-link .al::after{transform:translateX(-120%)}
.arrow-link:hover .al::before,.arrow-link.is-hover .al::before,.arrow-link:focus-visible .al::before{transform:translateX(120%)}
.arrow-link:hover .al::after,.arrow-link.is-hover .al::after,.arrow-link:focus-visible .al::after{transform:none}
/* Hover: letter roll (each letter rolls up to its twin) */
.roll{display:inline-flex;font:700 18px/1.2 var(--font-body);color:var(--black,#0d0d0c);text-decoration:none;overflow:hidden;height:1.2em}
.roll>span{display:inline-block;white-space:pre;text-shadow:0 1.2em 0 currentColor;transition:transform 420ms var(--easing-settle,cubic-bezier(.23,1,.32,1));transition-delay:calc(var(--i) * 18ms)}
.roll:hover>span,.roll.is-hover>span,.roll:focus-visible>span{transform:translateY(-1.2em)}
/* Hover: olive highlighter sweeps under the words (black text, olive is a highlight, never a text colour) */
.hl{background:linear-gradient(var(--olive,#C9CE55),var(--olive,#C9CE55)) 0 88%/0 .42em no-repeat;transition:background-size 520ms var(--easing-settle,cubic-bezier(.23,1,.32,1));color:var(--black,#0d0d0c)}
.hl:hover,.hl.is-hover,a:hover .hl,a:focus-visible .hl{background-size:100% .42em}
.hl--on{background-size:100% .42em}
/* Hover: card lifts, its photo crops to the door, a teal marker wipes under the title */
.lift-card{display:grid;gap:12px;text-decoration:none;color:var(--black,#0d0d0c);transition:transform var(--duration-reveal,320ms) var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.lift-card .ph{aspect-ratio:4/5;border-radius:var(--radius-card,16px);transition:clip-path 600ms var(--easing-settle,cubic-bezier(.23,1,.32,1));clip-path:inset(0 round var(--radius-card,16px))}
.lift-card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.lift-card h4{margin:0;font:700 20px/1.2 var(--font-heading);justify-self:start;background:linear-gradient(var(--teal,#6E9C9C),var(--teal,#6E9C9C)) 0 100%/0 4px no-repeat;transition:background-size 520ms var(--easing-settle,cubic-bezier(.23,1,.32,1));padding-bottom:4px}
.lift-card:hover,.lift-card.is-hover,.lift-card:focus-visible{transform:translateY(-4px)}
.lift-card:hover .ph,.lift-card.is-hover .ph,.lift-card:focus-visible .ph{clip-path:var(--door-soft)}
.lift-card:hover h4,.lift-card.is-hover h4,.lift-card:focus-visible h4{background-size:100% 4px}
/* Hover: a soft teal light follows the pointer inside a card (--x/--y set by pointer; centred without script) */
.glow-card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-card,16px);border:1px solid rgba(0,0,0,.12);background:var(--white,#fff);padding:24px}
.glow-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(260px circle at var(--x,50%) var(--y,50%),rgba(110,156,156,.28),transparent 70%);opacity:0;transition:opacity var(--duration-reveal,320ms)}
.glow-card:hover::before,.glow-card.is-hover::before{opacity:1}
/* Press and hold to confirm: olive fills while held, rewinds on early release (CSS :active) */
.hold{position:relative;isolation:isolate;overflow:hidden}
.hold::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--olive,#C9CE55);transform:scaleX(0);transform-origin:0 50%;transition:transform 300ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.hold:active::before,.hold.is-holding::before{transform:scaleX(1);transition:transform 1400ms linear}
.hold:active,.hold.is-holding{color:var(--black,#0d0d0c)}
/* Tooltip grows from its trigger */
.tip{position:relative;display:inline-block}
.tip__b{position:absolute;left:50%;bottom:calc(100% + 10px);translate:-50% 0;white-space:nowrap;background:var(--black,#0d0d0c);color:var(--white,#fff);font:400 14px/1.3 var(--font-body);padding:8px 12px;border-radius:8px;transform:scale(.6);transform-origin:50% 100%;opacity:0;pointer-events:none;transition:transform 260ms var(--easing-settle,cubic-bezier(.23,1,.32,1)),opacity 160ms}
.tip:hover .tip__b,.tip:focus-within .tip__b,.tip.is-hover .tip__b{transform:none;opacity:1}

/* Type: weight wave, Light to Bold letter by letter (the display pair, moving) */
.wwave>span{display:inline-block;white-space:pre;font-weight:300;animation:acha-wgt 2.8s var(--easing-glide,cubic-bezier(.65,0,.35,1)) infinite;animation-delay:calc(var(--i) * 90ms)}
@keyframes acha-wgt{0%,100%{font-weight:300}50%{font-weight:700}}
/* Type: blur resolve (characters sharpen and rise) */
.bresolve>span{display:inline-block;white-space:pre;animation:acha-resolve 900ms var(--easing-settle,cubic-bezier(.23,1,.32,1)) both;animation-delay:calc(120ms + var(--i) * 36ms)}
@keyframes acha-resolve{from{opacity:0;filter:blur(10px);transform:translateY(.35em)}to{opacity:1;filter:none;transform:none}}
/* Type: tracking settle (wide caps tighten as they fade up) */
.tsettle{animation:acha-track 1400ms var(--easing-settle,cubic-bezier(.23,1,.32,1)) both}
@keyframes acha-track{from{opacity:0;letter-spacing:.38em}to{opacity:1;letter-spacing:-.03em}}
/* Type: words swap in one place with a blur crossfade, no layout jump */
.wswap{display:inline-grid;vertical-align:bottom}
.wswap>span{grid-area:1/1;opacity:0;filter:blur(8px);animation:acha-swap calc(var(--n,4) * 2.2s) var(--easing-settle,cubic-bezier(.23,1,.32,1)) infinite;animation-delay:calc(var(--i) * 2.2s)}
@keyframes acha-swap{0%{opacity:0;filter:blur(8px);transform:translateY(.2em)}6%,22%{opacity:1;filter:none;transform:none}28%,100%{opacity:0;filter:blur(8px);transform:translateY(-.2em)}}
/* Type: weight rises as the line scrolls into view; words ink in as you read */
.sweight{font-weight:300;animation:acha-sw linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
@keyframes acha-sw{to{font-weight:700}}
.sfill>span{opacity:.2;animation:acha-ink linear both;animation-timeline:view();animation-range:cover calc(var(--i) * 2%) cover calc(30% + var(--i) * 2%)}
@keyframes acha-ink{to{opacity:1}}
@supports not (animation-timeline:view()){.sweight{font-weight:700;animation:none}.sfill>span{opacity:1;animation:none}}

/* Waiting: the mark's three panels rise and light in turn */
.w-mark{display:flex;gap:6%;align-items:flex-end;width:72px;height:40px}
.w-mark i{flex:111.4;height:92%;background:var(--black,#0d0d0c);border-radius:12.5% / 9%;transform-origin:50% 100%;animation:acha-rise3 1.4s var(--easing-settle,cubic-bezier(.23,1,.32,1)) infinite;animation-delay:calc(var(--i) * 160ms)}
.w-mark i:nth-child(2){flex:89.28;height:100%;background:var(--teal,#6E9C9C);clip-path:var(--door-soft);border-radius:0}
@keyframes acha-rise3{0%,100%{transform:scaleY(.35);opacity:.35}40%{transform:none;opacity:1}}
/* Waiting: a staff writes itself, then notes drop on */
/* Waiting: the door breathes light */
.w-breath{width:34px;height:56px;background:var(--black,#0d0d0c);clip-path:var(--door-soft);position:relative}
.w-breath::after{content:"";position:absolute;inset:0;background:linear-gradient(#fff,var(--teal,#6E9C9C));animation:acha-breathe 3.2s ease-in-out infinite}
@keyframes acha-breathe{0%,100%{opacity:.15}50%{opacity:1}}

/* Transitions: the door slit widens to the full door, and a staff-line wipe */
.t-door{clip-path:polygon(48% 3.6%,52% 3.3%,52% 96.7%,48% 96.4%);animation:acha-tdoor 3.6s var(--easing-settle,cubic-bezier(.23,1,.32,1)) infinite}
@keyframes acha-tdoor{0%,12%{clip-path:polygon(48% 3.6%,52% 3.3%,52% 96.7%,48% 96.4%)}45%,85%{clip-path:var(--door-soft)}100%{clip-path:polygon(48% 3.6%,52% 3.3%,52% 96.7%,48% 96.4%)}}

/* Fields: slow mesh drift, slow rays, light shafts with drifting specks, pointer-lit sand */
@property --mx{syntax:"<percentage>";inherits:false;initial-value:20%}
@property --my{syntax:"<percentage>";inherits:false;initial-value:30%}
@keyframes acha-mesh{to{--mx:70%;--my:65%}}
@media (prefers-reduced-motion:reduce){.wwave>span,.bresolve>span,.tsettle,.wswap>span,.w-mark i,.w-breath::after,.t-door,.sweight,.sfill>span{animation:none}.wswap>span:not(:first-child){display:none}.wswap>span:first-child{opacity:1;filter:none}.t-door{clip-path:var(--door-soft)}.roll>span,.arrow-link .al::before,.arrow-link .al::after,.hl,.lift-card,.lift-card .ph,.lift-card h4,.hold::before,.tip__b{transition:none}}

/* Scroll: stacking cards, ghost numerals that drift against the scroll, a line that draws as you read */
.stack-cards{display:grid;gap:16px}
.stack-cards>*{position:sticky;top:calc(16px + var(--i) * 14px);border-radius:var(--radius-card,16px);padding:28px;min-height:180px;box-shadow:0 -1px 0 rgba(0,0,0,.06)}
.ghost-step{position:relative;overflow:clip}
.ghost__n{position:absolute;right:-.04em;top:0;font:700 clamp(120px,22vw,260px)/.8 var(--font-heading);letter-spacing:-.06em;color:rgba(0,0,0,.06);pointer-events:none;animation:acha-ghost linear both;animation-timeline:view();animation-range:cover}
@keyframes acha-ghost{from{transform:translateY(30%)}to{transform:translateY(-30%)}}
.draw-line path{fill:none;stroke:var(--black,#0d0d0c);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;animation:acha-dl linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
.draw-line circle{fill:var(--olive,#C9CE55)}
@keyframes acha-dl{to{stroke-dashoffset:0}}
@supports not (animation-timeline:view()){.ghost__n,.draw-line path{animation:none}.draw-line path{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.ghost__n,.draw-line path{animation:none}.draw-line path{stroke-dashoffset:0}}

.bw-mosaic use{filter:grayscale(1) contrast(1.06);transition:filter 600ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.bw-mosaic g.t:hover use,.bw-mosaic g.t:focus-visible use{filter:none}
.mzi .bw-mosaic{width:100%;height:auto}
@media (hover:none){.bw-mosaic g.t:hover use{filter:grayscale(1) contrast(1.06)}}

/* glass on the kit: a nav that floats over photography, a glass tab lens, a glass switch knob while pressed */
.switch input:active+.switch__track .switch__knob,.switch:active .switch__knob{box-shadow:0 0 0 6px rgba(255,255,255,.35),inset 0 1px .5px rgba(255,255,255,.6);transform:translateX(var(--kx,0)) scale(1.18)}
.switch input:checked+.switch__track{--kx:24px}

/* ===== From the brand assets kit, part two (2 November 2026): site parts from the component library, rebuilt on the kit ===== */
:root{--ii-check:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTQuMyAxMi43TDQuNSAxMy4yTDQuOCAxMy42TDUuMSAxNEw1LjQgMTQuNEw1LjggMTQuN0w2LjEgMTUuMUw2LjQgMTUuNUw2LjcgMTUuOEw3LjIgMTYuMUw3LjUgMTYuNEw3LjggMTYuOEw4LjMgMTcuMUw4LjYgMTcuNEw5LjEgMThMMTAgMTcuOEwxMC40IDE3LjNMMTAuOCAxN0wxMS4xIDE2LjZMMTEuNCAxNi4yTDExLjcgMTUuOEwxMi4xIDE1LjVMMTIuNSAxNS4yTDEyLjcgMTQuOEwxMy4xIDE0LjVMMTMuNSAxNC4xTDEzLjggMTMuOEwxNC4yIDEzLjVMMTQuNiAxMy4yTDE0LjggMTIuN0wxNS4yIDEyLjRMMTUuNyAxMi4yTDE1LjkgMTEuN0wxNi4zIDExLjRMMTYuNiAxMUwxNy4xIDEwLjhMMTcuNCAxMC40TDE3LjcgMTBMMTcuOSA5LjVMMTguMyA5LjNMMTguNiA4LjlMMTguOSA4LjVMMTkuMyA4LjFMMTkuNSA3LjdMMTkuNyA3LjJMMTkuMiA2LjdMMTguOSA3LjFMMTguNCA3LjNMMTguMSA3LjdMMTcuNyA4TDE3LjMgOC4zTDE3IDguNkwxNi42IDlMMTYuMyA5LjRMMTUuOSA5LjZMMTUuNiAxMC4xTDE1LjIgMTAuM0wxNC45IDEwLjdMMTQuNiAxMS4xTDE0LjMgMTEuNUwxNCAxMS45TDEzLjYgMTIuM0wxMy4zIDEyLjZMMTMuMSAxM0wxMi42IDEzLjNMMTIuNCAxMy43TDEyIDE0LjFMMTEuNyAxNC41TDExLjQgMTQuOEwxMSAxNS4yTDEwLjYgMTUuNUwxMC40IDE1LjlMMTAgMTYuM0w5LjcgMTYuNkw5LjQgMTYuOEw5LjYgMTYuN0w5LjQgMTYuNkw5LjEgMTYuMkw4LjcgMTUuOUw4LjUgMTUuNUw4LjEgMTUuMUw3LjggMTQuN0w3LjQgMTQuNEw3LjEgMTQuMUw2LjcgMTMuOEw2LjQgMTMuNEw1LjkgMTMuMkw1LjYgMTIuOEw1LjIgMTIuNUw0LjggMTIuMloiLz48L3N2Zz4=");--ii-close:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTQuNyA1LjNMNSA1LjdMNS4zIDYuMUw1LjcgNi40TDYgNi44TDYuNCA3LjFMNi42IDcuNkw3IDcuOUw3LjQgOC4yTDcuOCA4LjVMOCA5TDguNSA5LjJMOC44IDkuNkw5LjIgOS45TDkuNiAxMC4yTDkuOSAxMC42TDEwLjIgMTFMMTAuNiAxMS4zTDEwLjkgMTEuN0wxMS4yIDEyLjFMMTEuNiAxMi40TDEyIDEyLjdMMTIuMyAxMy4xTDEyLjYgMTMuNUwxMi45IDEzLjlMMTMuMiAxNC4zTDEzLjUgMTQuN0wxMy45IDE1TDE0LjIgMTUuNEwxNC42IDE1LjdMMTQuOCAxNi4yTDE1LjMgMTYuNEwxNS43IDE2LjdMMTYgMTcuMUwxNi4zIDE3LjVMMTYuNyAxNy44TDE3LjIgMThMMTcuNiAxOC4zTDE4IDE4LjZMMTguNCAxOC45TDE4LjggMTkuMkwxOS4yIDE4LjhMMTguOSAxOC40TDE4LjYgMThMMTguMyAxNy42TDE4IDE3LjJMMTcuOCAxNi43TDE3LjQgMTYuNEwxNy4xIDE2TDE2LjcgMTUuN0wxNi40IDE1LjNMMTYuMSAxNC45TDE1LjcgMTQuNkwxNS40IDE0LjJMMTUgMTMuOUwxNC43IDEzLjVMMTQuMyAxMy4yTDEzLjkgMTIuOUwxMy42IDEyLjVMMTMuMSAxMi4zTDEyLjggMTEuOUwxMi41IDExLjVMMTIuMSAxMS4yTDExLjYgMTFMMTEuMiAxMC43TDExIDEwLjJMMTAuNiA5LjlMMTAuMyA5LjVMOS45IDkuMkw5LjYgOC44TDkuMyA4LjRMOC45IDguMUw4LjYgNy43TDguMyA3LjNMOCA2LjlMNy42IDYuNkw3LjIgNi4zTDYuOCA2TDYuNSA1LjZMNi4xIDUuM0w1LjcgNUw1LjMgNC43WiIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTE4LjQgNS4xTDE4IDUuNEwxNy42IDUuN0wxNy4zIDYuMUwxNi45IDYuNEwxNi42IDYuOEwxNi4zIDcuMkwxNS45IDcuNUwxNS42IDcuOUwxNS4yIDguMkwxNC44IDguNUwxNC41IDguOUwxNC4xIDkuMkwxMy43IDkuNUwxMy4zIDkuOEwxMyAxMC4yTDEyLjYgMTAuNUwxMi4zIDEwLjlMMTEuOSAxMS4yTDExLjQgMTEuNEwxMS4xIDExLjhMMTAuOCAxMi4yTDEwLjMgMTIuNEwxMCAxMi44TDkuNiAxMy4xTDkuMiAxMy40TDguOSAxMy44TDguNSAxNC4xTDguMiAxNC41TDcuOSAxNC45TDcuNSAxNS4yTDcuMiAxNS42TDYuOSAxNkw2LjYgMTYuNEw2LjMgMTYuOEw1LjkgMTcuMUw1LjcgMTcuNkw1LjQgMThMNS4xIDE4LjRMNC44IDE4LjhMNS4xIDE5LjFMNS42IDE4LjlMNiAxOC42TDYuNCAxOC4zTDYuOCAxOEw3LjEgMTcuNkw3LjYgMTcuNEw4IDE3LjFMOC40IDE2LjhMOC44IDE2LjVMOS4xIDE2LjFMOS40IDE1LjdMOS45IDE1LjVMMTAuMSAxNUwxMC42IDE0LjhMMTAuOCAxNC4zTDExLjIgMTRMMTEuNiAxMy43TDExLjkgMTMuM0wxMi4yIDEyLjlMMTIuNiAxMi42TDEyLjkgMTIuMkwxMy4yIDExLjhMMTMuNCAxMS4zTDEzLjggMTFMMTQuMSAxMC42TDE0LjQgMTAuMkwxNC44IDkuOUwxNS4xIDkuNUwxNS41IDkuMkwxNS43IDguN0wxNi4yIDguNUwxNi41IDguMUwxNi45IDcuOEwxNy4yIDcuNEwxNy42IDcuMUwxNy44IDYuNkwxOC4yIDYuM0wxOC42IDZMMTguOSA1LjZaIi8+PC9zdmc+");--ii-calendar:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUgNkw1LjUgNi4xTDYgNkw2LjUgNS45TDcgNkw3LjUgNkw4IDZMOC41IDZMOSA2TDkuNSA2TDEwIDUuOUwxMC41IDZMMTEgNS45TDExLjUgNkwxMiA2TDEyLjUgNkwxMyA2TDEzLjUgNi4xTDE0IDZMMTQuNSA2TDE1IDZMMTUuNSA2LjFMMTYgNi4xTDE2LjUgNi4xTDE3IDUuOUwxNy41IDYuMUwxOCA1LjhMMTguNSA2TDE4LjkgNS44TDE5LjMgNS45TDE5LjYgNkwxOS43IDYuM0wyMCA2LjVMMjAgNi44TDIwLjEgNy4yTDIwLjEgNy42TDIwLjEgOC4xTDIwIDguNkwyMC4yIDkuMUwyMCA5LjZMMjAuMiAxMC4xTDIwLjEgMTAuNkwyMC4xIDExLjFMMjAuMSAxMS42TDIwLjIgMTIuMUwyMC4xIDEyLjZMMjAuMiAxMy4xTDIwLjIgMTMuNkwyMC4yIDE0LjFMMjAuMSAxNC42TDIwLjIgMTUuMUwyMC4yIDE1LjZMMjAuMyAxNi4xTDIwLjIgMTYuNkwyMC4zIDE3LjFMMjAuMyAxNy42TDIwLjMgMTguMUwyMC4zIDE4LjZMMjAuMyAxOUwyMC4xIDE5LjRMMjAgMTkuN0wxOS44IDIwTDE5LjUgMjAuM0wxOS4yIDIwLjRMMTguNyAyMC40TDE4LjMgMjAuNEwxNy44IDIwLjRMMTcuMyAyMC4zTDE2LjggMjAuNUwxNi4zIDIwLjVMMTUuOCAyMC40TDE1LjMgMjAuNUwxNC44IDIwLjVMMTQuMyAyMC40TDEzLjggMjAuNEwxMy4zIDIwLjVMMTIuOCAyMC40TDEyLjMgMjAuNEwxMS44IDIwLjNMMTEuMyAyMC40TDEwLjggMjAuM0wxMC4zIDIwLjRMOS44IDIwLjNMOS4zIDIwLjRMOC44IDIwLjRMOC4zIDIwLjRMNy44IDIwLjNMNy4zIDIwLjNMNi44IDIwLjNMNi4zIDIwLjJMNS44IDIwLjJMNS4zIDIwLjJMNC45IDIwLjJMNC41IDIwLjJMNC4zIDIwTDQgMTkuN0wzLjkgMTkuNEwzLjcgMTkuMUwzLjcgMTguNkwzLjkgMTguMUwzLjggMTcuNkwzLjggMTcuMUwzLjkgMTYuNkwzLjkgMTYuMUwzLjggMTUuNkwzLjkgMTUuMUwzLjkgMTQuNkwzLjggMTQuMUwzLjkgMTMuNkw0IDEzLjFMMy45IDEyLjZMMy45IDEyLjFMMy45IDExLjZMNCAxMS4yTDQgMTAuN0w0IDEwLjJMNCA5LjdMNCA5LjJMMy45IDguN0w0IDguMkwzLjkgNy43TDQgNy4yTDQgNi44TDQgNi41TDQuMyA2LjNMNC40IDYuMUw0LjcgNS45TDUuMSA2Wk00LjkgMy45TDQuMiA0LjJMMy41IDQuNUwyLjcgNC45TDIuNCA1LjhMMiA2LjVMMi4xIDcuMUwyIDcuN0wyIDguMkwyLjIgOC43TDIuMSA5LjJMMS45IDkuN0wyLjEgMTAuMkwyIDEwLjdMMi4xIDExLjJMMi4xIDExLjZMMi4yIDEyLjFMMiAxMi42TDIgMTMuMUwyLjEgMTMuNkwyIDE0LjFMMi4xIDE0LjZMMi4yIDE1LjFMMi4xIDE1LjZMMi4xIDE2LjFMMi4xIDE2LjZMMi4xIDE3LjFMMi4xIDE3LjZMMi4xIDE4LjFMMi4yIDE4LjZMMi4yIDE5LjJMMi4zIDE5LjlMMi44IDIwLjZMMy4zIDIxLjFMNCAyMS42TDQuNyAyMS43TDUuMyAyMS44TDUuOCAyMS44TDYuMyAyMS43TDYuOCAyMS42TDcuMyAyMS44TDcuOCAyMS42TDguMyAyMS42TDguOCAyMS42TDkuMyAyMS42TDkuOCAyMS43TDEwLjMgMjEuN0wxMC44IDIxLjdMMTEuMyAyMS42TDExLjggMjEuNkwxMi4zIDIxLjdMMTIuOCAyMS41TDEzLjMgMjEuNkwxMy44IDIxLjVMMTQuMyAyMS42TDE0LjggMjEuNkwxNS4zIDIxLjZMMTUuOCAyMS42TDE2LjMgMjEuNkwxNi44IDIxLjZMMTcuMyAyMS42TDE3LjggMjEuN0wxOC4zIDIxLjdMMTguOCAyMS41TDE5LjQgMjEuN0wyMCAyMS40TDIwLjggMjEuMUwyMS4yIDIwLjVMMjEuNiAxOS44TDIxLjcgMTkuMUwyMS43IDE4LjZMMjEuOCAxOC4xTDIxLjcgMTcuNkwyMS43IDE3LjFMMjEuNyAxNi42TDIxLjggMTYuMUwyMS44IDE1LjZMMjEuOCAxNS4xTDIxLjggMTQuNkwyMS44IDE0LjFMMjEuOCAxMy42TDIxLjcgMTMuMUwyMS45IDEyLjZMMjEuOSAxMi4xTDIxLjkgMTEuNkwyMiAxMS4xTDIxLjggMTAuNkwyMS44IDEwLjFMMjIgOS42TDIxLjkgOS4xTDIyIDguNkwyMiA4LjFMMjEuOSA3LjZMMjEuOSA3LjFMMjIgNi40TDIxLjUgNS43TDIxLjIgNC45TDIwLjQgNC41TDE5LjcgNC4yTDE5IDQuMUwxOC41IDRMMTggNC4xTDE3LjUgNEwxNyA0LjJMMTYuNSAzLjlMMTYgNEwxNS41IDMuOUwxNSA0LjFMMTQuNSA0LjFMMTQgMy45TDEzLjUgNEwxMyA0TDEyLjUgNEwxMiA0TDExLjUgMy45TDExIDQuMUwxMC41IDQuMUwxMCA0TDkuNSAzLjlMOSA0LjFMOC41IDRMOCA0TDcuNSA0TDcgMy44TDYuNSA0LjFMNiA0LjFMNS41IDRMNSA0WiIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTMgMTAuNEwzLjUgMTAuNUw0IDEwLjVMNC41IDEwLjZMNSAxMC43TDUuNSAxMC43TDYgMTAuOEw2LjUgMTAuN0w3IDEwLjdMNy41IDEwLjdMOCAxMC43TDguNSAxMC43TDkgMTAuOEw5LjUgMTAuNkwxMCAxMC42TDEwLjUgMTAuNUwxMSAxMC41TDExLjUgMTAuNUwxMiAxMC42TDEyLjUgMTAuNUwxMyAxMC41TDEzLjUgMTAuNUwxNCAxMC41TDE0LjUgMTAuNkwxNSAxMC42TDE1LjUgMTAuNUwxNiAxMC41TDE2LjUgMTAuNkwxNyAxMC42TDE3LjUgMTAuNkwxOCAxMC43TDE4LjUgMTAuNkwxOSAxMC42TDE5LjUgMTAuNUwyMCAxMC41TDIwLjUgMTAuNUwyMSAxMC40TDIxIDkuNkwyMC41IDkuNkwyMCA5LjNMMTkuNSA5LjVMMTkgOS40TDE4LjUgOS40TDE4IDkuM0wxNy41IDkuM0wxNyA5LjNMMTYuNSA5LjVMMTYgOS40TDE1LjUgOS40TDE1IDkuNUwxNC41IDkuNUwxNCA5LjZMMTMuNSA5LjVMMTMgOS41TDEyLjUgOS41TDEyIDkuNEwxMS41IDkuNUwxMSA5LjVMMTAuNSA5LjVMMTAgOS41TDkuNSA5LjNMOSA5LjNMOC41IDkuNEw4IDkuMkw3LjUgOS4yTDcgOS4zTDYuNSA5LjNMNiA5LjJMNS41IDkuNEw1IDkuNEw0LjUgOS41TDQgOS40TDMuNSA5LjZMMyA5LjdaIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNy43IDMuNUw3LjIgNEw3LjQgNC41TDcuMyA1TDcuNSA1LjVMNy41IDZMNy42IDYuNUw3LjggN0w4LjIgN0w4LjQgNi41TDguNSA2TDguNSA1LjVMOC42IDVMOC43IDQuNUw4LjcgNEw4LjQgMy41WiIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTE1LjcgMy41TDE1LjMgNEwxNS4zIDQuNUwxNS4yIDVMMTUuMiA1LjVMMTUuNCA2TDE1LjYgNi41TDE1LjggN0wxNi4yIDdMMTYuNCA2LjVMMTYuNSA2TDE2LjcgNS41TDE2LjcgNUwxNi44IDQuNUwxNi44IDRMMTYuNCAzLjVaIi8+PC9zdmc+");--ii-location-pin:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEyLjcgMjAuOEwxMi4zIDIwLjVMMTIgMjAuMUwxMS42IDE5LjhMMTEuNCAxOS4zTDExLjEgMTlMMTAuNiAxOC43TDEwLjMgMTguNEwxMC4xIDE3LjlMOS43IDE3LjZMOS40IDE3LjJMOS4xIDE2LjhMOC44IDE2LjVMOC42IDE2LjFMOC4zIDE1LjdMOCAxNS4zTDcuNyAxNC45TDcuNyAxNC40TDcuNCAxNEw3LjIgMTMuNkw3LjEgMTMuMUw2LjggMTIuOEw2LjggMTIuM0w2LjYgMTEuOUw2LjYgMTEuNEw2LjQgMTFMNi42IDEwLjVMNi4zIDEwLjFMNi40IDkuN0w2LjYgOS4zTDYuNiA4LjhMNi42IDguNEw2LjkgOC4xTDcuMSA3LjdMNy4yIDcuMkw3LjYgN0w3LjcgNi41TDggNi4yTDguNCA2TDguNyA1LjZMOS4xIDUuNUw5LjUgNS4yTDkuOCA1TDEwLjMgNC45TDEwLjcgNC43TDExLjEgNC42TDExLjYgNC42TDEyIDQuNUwxMi41IDQuNEwxMi45IDQuNUwxMy4zIDQuNkwxMy44IDQuN0wxNC4yIDQuOUwxNC42IDVMMTUgNS4yTDE1LjQgNS41TDE1LjggNS43TDE2LjIgNkwxNi41IDYuM0wxNi43IDYuN0wxNy4xIDdMMTcuMiA3LjVMMTcuNCA3LjlMMTcuNSA4LjNMMTcuNyA4LjhMMTcuOCA5LjJMMTcuOCA5LjdMMTcuNyAxMC4xTDE3LjcgMTAuNkwxNy43IDExTDE3LjYgMTEuNEwxNy42IDExLjlMMTcuNSAxMi40TDE3LjMgMTIuOEwxNyAxMy4yTDE2LjkgMTMuNkwxNi43IDE0LjFMMTYuNSAxNC41TDE2LjIgMTQuOUwxNi4xIDE1LjRMMTUuNyAxNS43TDE1LjUgMTYuMUwxNS4zIDE2LjVMMTUgMTYuOUwxNC43IDE3LjNMMTQuNCAxNy43TDE0IDE4TDEzLjggMTguNEwxMy41IDE4LjhMMTMuMSAxOS4xTDEyLjcgMTkuNEwxMi40IDE5LjdMMTIgMjAuMUwxMS42IDIwLjNMMTEuMyAyMC43Wk0xMi42IDIyLjJMMTMuMSAyMS45TDEzLjUgMjEuNkwxMy43IDIxLjFMMTQuMSAyMC43TDE0LjUgMjAuNEwxNC44IDE5LjlMMTUuMiAxOS42TDE1LjUgMTkuMkwxNS44IDE4LjhMMTYuMSAxOC40TDE2LjQgMTcuOUwxNi43IDE3LjVMMTcgMTcuMUwxNy4zIDE2LjdMMTcuNCAxNi4xTDE3LjggMTUuN0wxOC4xIDE1LjNMMTguMiAxNC44TDE4LjQgMTQuM0wxOC42IDEzLjhMMTguOCAxMy4zTDE5IDEyLjhMMTkuMSAxMi4yTDE5LjIgMTEuN0wxOS4zIDExLjJMMTkuMyAxMC42TDE5LjMgMTAuMUwxOS4yIDkuNUwxOS4xIDlMMTguOSA4LjRMMTguOCA3LjlMMTguNiA3LjRMMTguNCA2LjlMMTggNi41TDE3LjYgNi4xTDE3LjMgNS42TDE3IDUuMkwxNi42IDQuOEwxNi4xIDQuNUwxNS42IDQuM0wxNS4xIDRMMTQuNyAzLjdMMTQuMiAzLjRMMTMuNiAzLjNMMTMuMSAzLjNMMTIuNSAzLjJMMTIgMy4yTDExLjQgMy4xTDEwLjkgMy4xTDEwLjQgMy4zTDkuOCAzLjRMOS4zIDMuNUw4LjcgMy43TDguMyA0TDcuOCA0LjRMNy4zIDQuNkw2LjkgNS4xTDYuNCA1LjRMNi4xIDUuOEw1LjggNi4zTDUuNCA2LjhMNS4yIDcuM0w1LjEgNy44TDQuOSA4LjRMNC43IDguOUw0LjYgOS41TDQuNiAxMC4xTDQuNSAxMC42TDQuNiAxMS4yTDQuNiAxMS44TDQuOCAxMi4zTDQuOCAxMi44TDUuMSAxMy4zTDUuMiAxMy45TDUuNCAxNC40TDUuNiAxNC44TDUuOSAxNS4zTDYuMiAxNS44TDYuNCAxNi4yTDYuNyAxNi43TDYuOCAxNy4yTDcuMiAxNy42TDcuNiAxOEw3LjkgMTguNEw4LjIgMTguOEw4LjQgMTkuM0w4LjkgMTkuNkw5LjIgMjBMOS41IDIwLjRMOS44IDIwLjhMMTAuMiAyMS4yTDEwLjUgMjEuNkwxMS4xIDIxLjhMMTEuNCAyMi4yWiIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTE0LjggMTBMMTQuNyAxMC42TDE0LjcgMTEuMkwxNC40IDExLjhMMTMuOSAxMi4xTDEzLjIgMTIuMkwxMi42IDEyLjRMMTIgMTIuNEwxMS40IDEyLjNMMTAuNyAxMi41TDEwLjEgMTIuMkw5LjYgMTEuOEw5LjMgMTEuMkw5LjQgMTAuNkw5LjQgMTBMOS4zIDkuNEw5LjUgOC45TDkuNiA4LjNMMTAgNy43TDEwLjcgNy42TDExLjQgNy43TDEyIDcuNkwxMi42IDcuNUwxMy4yIDcuNkwxMy45IDcuOEwxNC4zIDguM0wxNC43IDguOEwxNC43IDkuNFoiLz48L3N2Zz4=");--ii-chevron-right:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTguOCA1LjJMOSA1LjdMOS4zIDYuMUw5LjYgNi41TDkuOSA2LjlMMTAuMyA3LjJMMTAuNiA3LjZMMTEgNy45TDExLjQgOC4yTDExLjcgOC42TDEyLjEgOC45TDEyLjQgOS4zTDEyLjggOS42TDEzLjEgMTBMMTMuNSAxMC4zTDEzLjggMTAuN0wxNC4yIDExTDE0LjYgMTEuM0wxNC45IDExLjdMMTUuMiAxMi4xTDE1LjYgMTJMMTUuNCAxMi4xTDE0LjkgMTIuM0wxNC42IDEyLjdMMTQuMiAxM0wxMy45IDEzLjRMMTMuNSAxMy43TDEzLjIgMTQuMUwxMi44IDE0LjRMMTIuNCAxNC43TDEyLjEgMTUuMUwxMS43IDE1LjRMMTEuNCAxNS44TDExLjEgMTYuMkwxMC43IDE2LjVMMTAuNCAxNi45TDEwIDE3LjJMOS43IDE3LjZMOS40IDE4TDkgMTguM0w4LjggMTguOEw5LjMgMTkuM0w5LjYgMTguOUwxMC4xIDE4LjdMMTAuNCAxOC4zTDEwLjcgMTcuOUwxMS4xIDE3LjZMMTEuNCAxNy4yTDExLjggMTYuOUwxMi4yIDE2LjZMMTIuNSAxNi4yTDEyLjkgMTUuOUwxMy4yIDE1LjVMMTMuNiAxNS4yTDEzLjkgMTQuOEwxNC4zIDE0LjVMMTQuNiAxNC4xTDE1IDEzLjhMMTUuMyAxMy40TDE1LjYgMTNMMTYgMTIuN0wxNi41IDEyTDE2IDExLjNMMTUuNyAxMC45TDE1LjMgMTAuNkwxNS4xIDEwLjFMMTQuNyA5LjhMMTQuMyA5LjVMMTQgOS4xTDEzLjYgOC44TDEzLjIgOC41TDEyLjkgOC4xTDEyLjYgNy43TDEyLjMgNy4zTDExLjkgN0wxMS42IDYuNkwxMS4xIDYuNEwxMC44IDZMMTAuNCA1LjdMMTAuMSA1LjNMOS42IDUuMUw5LjMgNC43WiIvPjwvc3ZnPg==");--ii-ticket:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNiA3LjZMMy43IDcuMkwzLjkgN0w0LjEgNi44TDQuMyA2LjdMNC43IDYuN0w1LjEgNi43TDUuNiA2LjlMNi4xIDYuOEw2LjYgNi43TDcuMSA2LjdMNy42IDYuN0w4LjEgNi44TDguNiA2LjhMOS4xIDYuOUw5LjYgNi44TDEwLjEgNi45TDEwLjYgNi45TDExLjEgNi45TDExLjYgNi44TDEyLjEgNi45TDEyLjYgNi45TDEzLjEgNi45TDEzLjYgN0wxNC4xIDdMMTQuNiA2LjhMMTUuMSA2LjlMMTUuNiA2LjlMMTYuMSA3TDE2LjYgN0wxNy4xIDYuOUwxNy42IDYuOUwxOC4xIDdMMTguNiA2LjlMMTkuMSA3LjFMMTkuNSA2LjlMMTkuNyA3LjFMMTkuOSA3LjFMMTkuOSA3LjNMMTkuOSA3LjVMMjAgNy44TDIwLjEgOC4zTDIwIDguOEwyMC4xIDkuM0wyMC4yIDkuNUwyMC4yIDlMMTkuOCA5LjFMMTkuMSA5LjVMMTguNyAxMC4xTDE4LjIgMTAuN0wxOCAxMS41TDE4IDEyLjJMMTguMSAxM0wxOC42IDEzLjZMMTguOSAxNC4zTDE5LjYgMTQuNkwyMC4yIDE1TDIwLjIgMTQuN0wxOS45IDE0LjVMMjAgMTVMMjAgMTUuNUwyMCAxNkwyMCAxNi40TDE5LjkgMTYuN0wxOS45IDE2LjhMMTkuOCAxNi45TDE5LjYgMTYuOUwxOS4zIDE2LjlMMTguOSAxN0wxOC40IDE3LjFMMTcuOSAxN0wxNy40IDE3TDE2LjkgMTcuMUwxNi40IDE3TDE1LjkgMTcuMkwxNS40IDE3LjFMMTQuOSAxN0wxNC40IDE3LjFMMTMuOSAxNy4yTDEzLjQgMTcuMUwxMi45IDE3TDEyLjQgMTcuMUwxMS45IDE3LjJMMTEuNCAxNy4xTDEwLjkgMTcuMUwxMC40IDE3LjJMOS45IDE3LjJMOS40IDE3LjJMOC45IDE3LjJMOC40IDE3LjFMNy45IDE3LjJMNy40IDE3LjJMNi45IDE3LjJMNi40IDE3LjNMNS45IDE3LjJMNS40IDE3LjRMNC45IDE3LjNMNC41IDE3LjNMNC4yIDE3LjJMNCAxN0wzLjggMTYuOUwzLjYgMTYuNkwzLjcgMTYuMkwzLjcgMTUuN0wzLjYgMTUuMkwzLjUgMTQuN0wzLjUgMTQuNEwzLjYgMTQuNkw0IDE0LjVMNC42IDE0LjFMNS4xIDEzLjdMNS4zIDEzTDUuNSAxMi41TDUuNSAxMS44TDUuNSAxMS4yTDUuMiAxMC42TDQuOCAxMEw0LjIgOS44TDMuNiA5LjZMMy41IDkuNkwzLjYgOS41TDMuNyA5TDMuNiA4LjVMMy43IDhMMy43IDcuNVpNMi4zIDcuNUwyLjQgOEwyLjMgOC41TDIuMyA5TDIuNCA5LjVMMi42IDEwLjRMMy40IDEwLjZMMy43IDEwLjdMNCAxMUw0LjEgMTEuM0w0LjQgMTEuNUw0LjQgMTEuOUw0LjQgMTIuM0w0LjMgMTIuNkw0LjEgMTIuOUwzLjggMTNMMy41IDEzLjNMMyAxMy40TDIuNCAxNEwyLjQgMTQuN0wyLjQgMTUuMkwyLjQgMTUuN0wyLjMgMTYuMkwyLjMgMTYuOEwyLjcgMTcuNUwyLjkgMTguMUwzLjYgMTguNUw0LjMgMTguN0w0LjkgMTguOEw1LjQgMTguN0w1LjkgMTguOEw2LjQgMTguOEw2LjkgMTguOEw3LjQgMTguOEw3LjkgMTguOEw4LjQgMTguOEw4LjkgMTguOEw5LjQgMTguN0w5LjkgMTguOEwxMC40IDE4LjdMMTAuOSAxOC45TDExLjQgMTguOEwxMS45IDE4LjhMMTIuNCAxOC45TDEyLjkgMTguOUwxMy40IDE4LjlMMTMuOSAxOC45TDE0LjQgMTlMMTQuOSAxOC45TDE1LjQgMTkuMUwxNS45IDE4LjlMMTYuNCAxOC45TDE2LjkgMTguOUwxNy40IDE5LjFMMTcuOSAxOUwxOC40IDE4LjlMMTguOSAxOUwxOS40IDE5TDIwLjEgMTlMMjAuOSAxOC43TDIxLjQgMThMMjEuOSAxNy4zTDIxLjkgMTYuNkwyMiAxNkwyMS45IDE1LjVMMjIgMTVMMjIuMSAxNC41TDIxLjggMTMuM0wyMC44IDEyLjlMMjAuNSAxMi45TDIwLjQgMTIuNkwyMC4yIDEyLjVMMjAuMSAxMi4zTDIwLjEgMTIuMUwyMC4xIDExLjhMMjAuMSAxMS42TDIwLjEgMTEuM0wyMC41IDExLjNMMjAuNiAxMS4xTDIxLjIgMTAuOUwyMS45IDEwLjFMMjEuOSA5LjNMMjIgOC44TDIxLjkgOC4zTDIxLjkgNy44TDIyIDcuMUwyMS44IDYuM0wyMS4zIDUuN0wyMC41IDUuM0wxOS44IDUuMUwxOS4xIDVMMTguNiA1LjJMMTguMSA1TDE3LjYgNS4xTDE3LjEgNUwxNi42IDUuMUwxNi4xIDVMMTUuNiA1TDE1LjEgNUwxNC42IDUuMkwxNC4xIDVMMTMuNiA1LjFMMTMuMSA1LjFMMTIuNiA1LjJMMTIuMSA1LjFMMTEuNiA1LjFMMTEuMSA1LjFMMTAuNiA1LjJMMTAuMSA1LjFMOS42IDUuMUw5LjEgNS4yTDguNiA1LjNMOC4xIDUuMUw3LjYgNS4yTDcuMSA1LjNMNi42IDUuMkw2LjEgNS4zTDUuNiA1LjJMNS4xIDUuM0w0LjYgNS4yTDQgNS40TDMuMyA1LjZMMi44IDYuMUwyLjQgNi44TDIuNCA3LjRaIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTQuMiA2LjVMMTQuMSA3TDEzLjggNy41TDEzLjYgOEwxNC4zIDguNUwxNC44IDguNUwxNS40IDhMMTUuMyA3LjVMMTQuOSA3TDE0LjggNi41WiIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTE0LjIgMTEuNUwxMy42IDEyTDE0LjEgMTIuNUwxNC4xIDEzTDE0LjggMTNMMTUgMTIuNUwxNS40IDEyTDE0LjggMTEuNVoiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNC4xIDE2TDEzLjYgMTYuNUwxNCAxN0wxNC4zIDE3LjVMMTQuOCAxNy41TDE1IDE3TDE1LjQgMTYuNUwxNC45IDE2WiIvPjwvc3ZnPg==");--ii-email:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTQuNSA1LjhMNSA1LjhMNS41IDUuN0w2IDUuNkw2LjUgNS43TDcgNS43TDcuNSA1LjdMOCA1LjdMOC41IDUuN0w5IDUuNkw5LjUgNS42TDEwIDUuNUwxMC41IDUuNkwxMSA1LjZMMTEuNSA1LjZMMTIgNS42TDEyLjUgNS42TDEzIDUuNUwxMy41IDUuNEwxNCA1LjZMMTQuNSA1LjVMMTUgNS42TDE1LjUgNS42TDE2IDUuNUwxNi41IDUuNkwxNyA1LjZMMTcuNSA1LjhMMTggNS42TDE4LjUgNS42TDE5IDUuN0wxOS40IDUuOEwxOS44IDUuN0wyMC4xIDUuOUwyMC40IDYuMUwyMC42IDYuNEwyMC43IDYuOEwyMC44IDcuMUwyMC44IDcuNkwyMC44IDguMUwyMC43IDguNkwyMC43IDkuMUwyMC43IDkuNkwyMC42IDEwLjFMMjAuOCAxMC42TDIwLjYgMTEuMUwyMC42IDExLjZMMjAuOCAxMi4xTDIwLjYgMTIuNkwyMC42IDEzLjFMMjAuNyAxMy42TDIwLjUgMTQuMUwyMC42IDE0LjZMMjAuNiAxNS4xTDIwLjYgMTUuNkwyMC42IDE2LjFMMjAuNiAxNi42TDIwLjYgMTdMMjAuNSAxNy4zTDIwLjQgMTcuNkwyMC4yIDE3LjlMMTkuOSAxNy45TDE5LjYgMTguMUwxOS4yIDE4TDE4LjggMTguMUwxOC4zIDE4TDE3LjggMThMMTcuMyAxOEwxNi44IDE4TDE2LjMgMTguMUwxNS44IDE4TDE1LjMgMThMMTQuOCAxNy45TDE0LjMgMThMMTMuOCAxOEwxMy4zIDE3LjlMMTIuOCAxNy45TDEyLjMgMThMMTEuOCAxOEwxMS4zIDE4TDEwLjggMTguMUwxMC4zIDE3LjlMOS44IDE3LjlMOS4zIDE4TDguOCAxOC4xTDguMyAxOEw3LjggMThMNy4zIDE4TDYuOCAxOC4xTDYuMyAxOC4yTDUuOCAxOC4xTDUuMyAxOEw0LjggMTguMUw0LjQgMThMNC4xIDE4TDMuOSAxNy43TDMuNiAxNy42TDMuNiAxNy4zTDMuNCAxN0wzLjQgMTYuNkwzLjQgMTYuMUwzLjQgMTUuNkwzLjQgMTUuMUwzLjQgMTQuNkwzLjUgMTQuMUwzLjQgMTMuNkwzLjUgMTMuMUwzLjUgMTIuNkwzLjQgMTIuMUwzLjUgMTEuNkwzLjMgMTEuMkwzLjQgMTAuN0wzLjQgMTAuMkwzLjUgOS43TDMuMiA5LjJMMy40IDguN0wzLjMgOC4yTDMuMiA3LjdMMy4yIDcuMkwzLjMgNi44TDMuNSA2LjVMMy43IDYuMkwzLjkgNkw0LjIgNS43TDQuNiA1LjZaTTQuNCA0LjNMMy44IDQuM0wzIDQuNkwyLjUgNS4yTDIgNS44TDEuOSA2LjVMMS44IDcuMUwxLjcgNy43TDEuNiA4LjJMMS43IDguN0wxLjcgOS4yTDEuNiA5LjdMMS41IDEwLjJMMS43IDEwLjdMMS43IDExLjJMMS41IDExLjZMMS42IDEyLjFMMS42IDEyLjZMMS42IDEzLjFMMS42IDEzLjZMMS42IDE0LjFMMS41IDE0LjZMMS41IDE1LjFMMS42IDE1LjZMMS41IDE2LjFMMS41IDE2LjZMMS41IDE3LjJMMS42IDE4TDIuMiAxOC43TDIuNyAxOS40TDMuNSAxOS42TDQuMiAxOS45TDQuOCAxOS45TDUuMyAyMC4xTDUuOCAyMEw2LjMgMTkuOUw2LjggMTkuOEw3LjMgMjBMNy44IDIwTDguMyAyMEw4LjggMTkuOUw5LjMgMjBMOS44IDIwLjFMMTAuMyAyMEwxMC44IDIwTDExLjMgMjBMMTEuOCAyMEwxMi4zIDIwLjFMMTIuOCAyMEwxMy4zIDIwTDEzLjggMTkuOUwxNC4zIDE5LjlMMTQuOCAyMC4xTDE1LjMgMjBMMTUuOCAyMC4xTDE2LjMgMjBMMTYuOCAyMEwxNy4zIDE5LjlMMTcuOCAyMEwxOC4zIDIwLjFMMTguOCAyMEwxOS4zIDIwLjFMMTkuOSAxOS44TDIwLjcgMTkuN0wyMS4zIDE5LjJMMjIgMTguN0wyMi4zIDE3LjlMMjIuNCAxNy4yTDIyLjQgMTYuNkwyMi4zIDE2LjFMMjIuNSAxNS42TDIyLjUgMTUuMUwyMi41IDE0LjZMMjIuNSAxNC4xTDIyLjQgMTMuNkwyMi40IDEzLjFMMjIuMyAxMi42TDIyLjMgMTIuMUwyMi4zIDExLjZMMjIuNCAxMS4xTDIyLjMgMTAuNkwyMi4zIDEwLjFMMjIuMyA5LjZMMjIuMyA5LjFMMjIuNCA4LjZMMjIuMiA4LjFMMjIuMiA3LjZMMjIuMyA3LjFMMjIuMSA2LjVMMjEuOCA1LjhMMjEuNSA1LjFMMjAuOSA0LjZMMjAuMSA0LjRMMTkuNSA0LjNMMTkgNC40TDE4LjUgNC4zTDE4IDQuNEwxNy41IDQuNEwxNyA0LjNMMTYuNSA0LjVMMTYgNC40TDE1LjUgNC40TDE1IDQuNEwxNC41IDQuNEwxNCA0LjVMMTMuNSA0LjRMMTMgNC41TDEyLjUgNC41TDEyIDQuM0wxMS41IDQuNEwxMSA0LjRMMTAuNSA0LjRMMTAgNC40TDkuNSA0LjNMOSA0LjRMOC41IDQuM0w4IDQuM0w3LjUgNC40TDcgNC4yTDYuNSA0LjNMNiA0LjNMNS41IDQuM0w1IDQuMkw0LjUgNC4yWiIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTMuMyA3LjhMMy42IDguMkw0IDguNUw0LjQgOC44TDQuOCA5LjJMNS4yIDkuNEw1LjUgOS44TDUuOSAxMC4yTDYuMyAxMC41TDYuNyAxMC43TDcuMSAxMUw3LjUgMTEuMkw3LjkgMTEuNkw4LjMgMTEuOUw4LjcgMTIuMkw5LjEgMTIuNUw5LjYgMTIuNkw5LjkgMTMuMUwxMC40IDEzLjJMMTAuOCAxMy41TDExLjIgMTMuN0wxMiAxNC4zTDEyLjggMTMuN0wxMy4xIDEzLjNMMTMuNSAxMy4xTDEzLjkgMTIuOEwxNC4zIDEyLjVMMTQuNyAxMi4yTDE1LjEgMTEuOUwxNS41IDExLjZMMTUuOSAxMS4zTDE2LjMgMTEuMUwxNi43IDEwLjdMMTcuMSAxMC40TDE3LjUgMTAuMUwxNy45IDkuOEwxOC4zIDkuNUwxOC43IDkuMkwxOS4xIDguOUwxOS41IDguNkwxOS45IDguM0wyMC4zIDhMMjAuNiA3LjdMMjAuMyA3LjNMMTkuOSA3LjZMMTkuNSA3LjhMMTkuMSA4LjFMMTguNyA4LjRMMTguMiA4LjZMMTcuOCA4LjlMMTcuNCA5LjFMMTcgOS40TDE2LjYgOS43TDE2LjIgMTBMMTUuOCAxMC4zTDE1LjQgMTAuNUwxNC45IDEwLjhMMTQuNiAxMS4xTDE0LjEgMTEuM0wxMy43IDExLjdMMTMuMyAxMkwxMi44IDEyLjFMMTIuNSAxMi40TDEyIDEyLjdMMTIgMTIuOEwxMiAxMi42TDExLjYgMTIuNEwxMS4yIDEyLjFMMTAuOCAxMS43TDEwLjQgMTEuNEwxMCAxMS4yTDkuNiAxMC45TDkuMiAxMC42TDguOSAxMC4yTDguNCAxMEw4IDkuN0w3LjYgOS40TDcuMiA5LjFMNi44IDguOUw2LjMgOC42TDYgOC4zTDUuNiA4TDUuMSA3LjhMNC42IDcuNkw0LjIgNy40TDMuNyA3LjJaIi8+PC9zdmc+");--ii-music-note:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMyAxOEw5LjMgMTcuNUw5LjQgMTdMOS40IDE2LjVMOS40IDE2TDkuNiAxNS41TDkuNSAxNUw5LjYgMTQuNUw5LjYgMTRMOS42IDEzLjVMOS42IDEzTDkuNiAxMi41TDkuOCAxMi4xTDkuOSAxMS42TDkuOCAxMS4xTDkuOCAxMC42TDkuOSAxMC4xTDkuOSA5LjZMOS44IDkuMUwxMCA4LjZMOS45IDguMUw5LjkgNy42TDkuOSA3LjFMMTAgNi42TDkuOSA2LjFMOS45IDUuNkw5LjggNS42TDkuNiA1LjdMMTAgNS42TDEwLjUgNS42TDExIDUuN0wxMS41IDUuNUwxMiA1LjNMMTIuNSA1LjJMMTMgNS4yTDEzLjUgNS4yTDEzLjkgNS4xTDE0LjQgNC45TDE0LjkgNC44TDE1LjQgNC42TDE1LjkgNC42TDE2LjMgNC40TDE2LjggNC40TDE3LjMgNC4zTDE3LjggNC4xTDE4LjMgNC4xTDE4LjggMy44TDE5LjIgMy43TDE5LjcgMy43TDE5LjQgMy41TDE5LjMgMy42TDE5LjQgNC4xTDE5LjQgNC42TDE5LjMgNS4xTDE5LjUgNS42TDE5LjQgNi4xTDE5LjUgNi42TDE5LjYgNy4xTDE5LjUgNy42TDE5LjYgOC4xTDE5LjYgOC42TDE5LjYgOS4xTDE5LjYgOS42TDE5LjYgMTAuMUwxOS42IDEwLjVMMTkuNyAxMUwxOS42IDExLjVMMTkuNiAxMkwxOS43IDEyLjVMMTkuNyAxM0wxOS43IDEzLjVMMTkuNyAxNEwxOS43IDE0LjVMMTkuNyAxNUwxOS44IDE1LjVMMTkuOCAxNkwyMC4yIDE2TDIwLjIgMTUuNUwyMC4yIDE1TDIwLjIgMTQuNUwyMC4yIDE0TDIwLjIgMTMuNUwyMC4zIDEzTDIwLjMgMTIuNUwyMC4zIDEyTDIwLjMgMTEuNUwyMC4zIDExTDIwLjMgMTAuNUwyMC40IDEwLjFMMjAuNSA5LjZMMjAuNCA5LjFMMjAuNCA4LjZMMjAuNSA4LjFMMjAuNSA3LjZMMjAuNSA3LjFMMjAuNiA2LjZMMjAuNSA2LjFMMjAuNSA1LjZMMjAuNiA1LjFMMjAuNiA0LjZMMjAuNSA0LjFMMjAuNiAzLjZMMjAuNiAyLjdMMTkuNiAyLjRMMTkgMi41TDE4LjUgMi42TDE4IDIuNkwxNy41IDIuNkwxNy4xIDIuOEwxNi42IDIuOUwxNi4xIDNMMTUuNiAyLjlMMTUuMSAzTDE0LjYgMy4xTDE0LjEgMy4yTDEzLjYgMy4xTDEzLjEgMy4zTDEyLjYgMy41TDEyLjIgMy42TDExLjcgMy42TDExLjEgMy42TDEwLjcgMy43TDEwLjIgNEw5LjcgMy45TDkuMSA0TDguMSA0LjZMOCA1LjZMOC4xIDYuMUw4LjIgNi42TDggNy4xTDggNy42TDguMSA4LjFMOCA4LjZMOC4yIDkuMUw4LjEgOS42TDguMSAxMC4xTDguMiAxMC42TDguMiAxMS4xTDguMiAxMS42TDguMyAxMi4xTDguMyAxMi41TDguNCAxM0w4LjQgMTMuNUw4LjMgMTRMOC40IDE0LjVMOC40IDE1TDguNSAxNS41TDguNSAxNkw4LjUgMTYuNUw4LjcgMTdMOC42IDE3LjVMOC43IDE4WiIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMiAxOEw4LjkgMTguNUw5IDE5LjFMOC45IDE5LjhMOC41IDIwLjJMNy43IDIwLjNMNy4xIDIwLjNMNi41IDIwLjNMNS45IDIwLjZMNS4zIDIwLjRMNC41IDIwLjNMNC4yIDE5LjdMNCAxOS4xTDQgMTguNUwzLjcgMThMMy44IDE3LjVMMy45IDE2LjlMNC4yIDE2LjNMNC43IDE1LjlMNS4zIDE1LjhMNS45IDE1LjdMNi41IDE1LjVMNy4xIDE1LjRMNy44IDE1LjVMOC41IDE1LjZMOC45IDE2LjJMOS4yIDE2LjhMOS4xIDE3LjRaIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjAuMiAxNS45TDIwLjMgMTYuNUwyMC4yIDE3LjFMMjAuMSAxNy44TDE5LjUgMTguMkwxOC44IDE4LjRMMTguMSAxOC4zTDE3LjYgMTguNkwxNyAxOC4zTDE2LjMgMTguM0wxNS43IDE4LjFMMTUgMTcuOUwxNC44IDE3LjNMMTQuOCAxNi42TDE1IDE2LjFMMTQuOCAxNS41TDE0LjkgMTQuOUwxNSAxNC4yTDE1LjUgMTMuOEwxNi4yIDEzLjZMMTYuOSAxMy43TDE3LjUgMTMuN0wxOC4xIDEzLjRMMTguNyAxMy42TDE5LjIgMTMuOUwxOS44IDE0LjNMMjAuMSAxNC44TDIwLjEgMTUuNFoiLz48L3N2Zz4=");--ii-heart:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEyLjYgMTkuMUwxMi4yIDE4LjhMMTEuOCAxOC41TDExLjMgMTguNEwxMC45IDE4LjFMMTAuNiAxNy43TDEwLjIgMTcuNUw5LjggMTcuM0w5LjUgMTYuOEw5LjEgMTYuNkw4LjggMTYuMkw4LjUgMTUuOUw4LjIgMTUuNUw3LjggMTUuMkw3LjcgMTQuN0w3LjMgMTQuNEw3IDE0TDYuNyAxMy43TDYuNCAxMy4zTDYuMyAxMi45TDYuMiAxMi40TDYgMTJMNS44IDExLjZMNS42IDExLjJMNS42IDEwLjhMNS40IDEwLjRMNS40IDEwTDUuMyA5LjZMNS40IDkuMkw1LjYgOC44TDUuOCA4LjVMNS44IDhMNiA3LjdMNi40IDcuNUw2LjYgNy4xTDcgN0w3LjMgNi43TDcuNyA2LjZMOC4xIDYuNUw4LjUgNi40TDguOSA2LjVMOS4zIDYuM0w5LjcgNi42TDEwLjEgNi42TDEwLjUgNi43TDEwLjkgNi45TDExLjIgNy4yTDEyIDcuNkwxMi44IDcuMkwxMy4yIDdMMTMuNSA2LjdMMTMuOSA2LjVMMTQuMyA2LjNMMTQuNyA2LjJMMTUuMSA2LjJMMTUuNSA2LjFMMTYgNi4yTDE2LjQgNi4zTDE2LjcgNi42TDE3LjEgNi43TDE3LjQgN0wxNy44IDcuMkwxOCA3LjZMMTguMiA4TDE4LjUgOC4zTDE4LjcgOC43TDE4LjggOS4xTDE4LjggOS41TDE4LjcgMTBMMTguOCAxMC40TDE4LjcgMTAuOEwxOC41IDExLjNMMTguNSAxMS43TDE4LjMgMTIuMUwxOC4xIDEyLjVMMTcuOCAxMi45TDE3LjYgMTMuM0wxNy4zIDEzLjdMMTcuMSAxNC4xTDE2LjggMTQuNUwxNi41IDE0LjlMMTYuMiAxNS4yTDE1LjkgMTUuNkwxNS41IDE1LjhMMTUuMyAxNi4zTDE0LjkgMTYuNkwxNC41IDE2LjlMMTQuMSAxNy4yTDEzLjggMTcuNUwxMy40IDE3LjhMMTMuMSAxOC4xTDEyLjYgMTguM0wxMi4zIDE4LjdMMTEuOSAxOC45TDExLjUgMTkuMlpNMTIuNSAyMC44TDEzIDIwLjZMMTMuMyAyMC4yTDEzLjggMjBMMTQuMiAxOS42TDE0LjYgMTkuM0wxNS4xIDE5TDE1LjQgMTguN0wxNS43IDE4LjJMMTYuMSAxNy45TDE2LjUgMTcuNUwxNi45IDE3LjJMMTcuMiAxNi43TDE3LjYgMTYuNEwxNy45IDE1LjlMMTguMSAxNS41TDE4LjUgMTUuMUwxOC45IDE0LjdMMTkgMTQuMUwxOS4zIDEzLjdMMTkuNSAxMy4yTDE5LjYgMTIuN0wxOS44IDEyLjFMMjAuMSAxMS43TDIwLjIgMTEuMUwyMC4xIDEwLjVMMjAuMyAxMEwyMC4yIDkuNEwyMC4xIDguOEwxOS45IDguM0wxOS42IDcuOEwxOS40IDcuM0wxOS4xIDYuOEwxOC43IDYuNEwxOC4zIDZMMTcuNyA1LjdMMTcuMyA1LjRMMTYuNyA1LjJMMTYuMiA1LjJMMTUuNiA1TDE1LjEgNC45TDE0LjUgNS4xTDEzLjkgNS4xTDEzLjQgNS4zTDEyLjkgNS41TDEyLjQgNS44TDExLjkgNi4xTDEyIDYuNEwxMi4yIDYuMUwxMS43IDUuN0wxMS4yIDUuNUwxMC42IDUuMkwxMC4xIDVMOS41IDQuOEw4LjkgNC43TDguMyA0LjdMNy44IDQuOUw3LjIgNS4xTDYuNiA1LjJMNi4xIDUuNUw1LjcgNS45TDUuMiA2LjNMNC44IDYuN0w0LjUgNy4yTDQuMSA3LjdMMy43IDguMkwzLjcgOC44TDMuNyA5LjRMMy41IDEwTDMuNyAxMC42TDMuOCAxMS4xTDMuOCAxMS43TDQgMTIuMkw0LjEgMTIuOEw0LjMgMTMuM0w0LjYgMTMuOEw0LjggMTQuMkw1LjEgMTQuN0w1LjMgMTUuMkw1LjcgMTUuNkw2IDE2TDYuNSAxNi4zTDYuNyAxNi44TDcuMSAxNy4yTDcuNCAxNy42TDcuOSAxNy44TDguMiAxOC4zTDguNiAxOC42TDkgMTlMOS40IDE5LjNMOS44IDE5LjZMMTAuMiAxOS45TDEwLjYgMjAuM0wxMSAyMC41TDExLjUgMjAuOFoiLz48L3N2Zz4=")}
.ii{display:inline-block;width:var(--s,20px);height:var(--s,20px);flex:none;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
/* Announcement bar */
.announce{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:8px 16px;background:var(--black,#0d0d0c);color:var(--white,#fff);background-image:var(--grain-light);font:400 15px/1.3 var(--font-body)}
.announce a{color:inherit;font-weight:700;text-underline-offset:3px;text-decoration-color:var(--olive,#C9CE55);text-decoration-thickness:2px}
/* Alerts: icon + words + colour, never colour alone */
.alert{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px 16px;border-radius:12px;font:400 16px/24px var(--font-body);color:var(--black,#0d0d0c)}
.alert b{font-weight:700}
.alert .ii{margin-top:2px}
.alert--ok{background:#fff;box-shadow:inset 0 0 0 2px var(--teal,#6E9C9C)}
.alert--warn{background:var(--olive,#C9CE55);background-image:var(--grain)}
.alert--info{background:var(--taupe,#C5BDA2);background-image:var(--grain)}
.alert--error{background:#fff;box-shadow:inset 0 0 0 2px #0d0d0c}
/* Toast: slides up from the bottom edge, stays still, leaves on its own */
.toast{display:inline-flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border-radius:14px;background:var(--black,#0d0d0c);background-image:var(--grain-light);color:var(--white,#fff);font:400 15px/1.3 var(--font-body);box-shadow:0 12px 30px -10px rgba(0,0,0,.45);animation:acha-toast 4.5s var(--easing-settle,cubic-bezier(.23,1,.32,1)) infinite}
.toast button{border:0;background:none;color:inherit;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;cursor:pointer}
.toast button:focus-visible{outline:2px solid #fff}
@keyframes acha-toast{0%{opacity:0;transform:translateY(16px)}10%,85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}
/* Modal: a native dialog, on a dimmed, blurred page */
.modal-demo{position:relative;border-radius:16px;overflow:hidden;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:grid;place-items:center;padding:28px}
.modal{position:relative;inset:auto;max-width:420px;width:100%;border:0;border-radius:var(--radius-card,16px);padding:28px;background:var(--white,#fff);color:var(--black,#0d0d0c);box-shadow:0 30px 60px -20px rgba(0,0,0,.5);animation:acha-modal 520ms var(--easing-settle,cubic-bezier(.23,1,.32,1)) both}
.modal h3{margin:0 0 8px;font:300 28px/1.1 var(--font-heading);letter-spacing:-.02em}
.modal p{margin:0 0 20px;font:400 16px/24px var(--font-body)}
.modal__x{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;background:none;display:grid;place-items:center;cursor:pointer;border-radius:10px}
@keyframes acha-modal{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
/* Stepper */
.stepper{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;font:700 14px/1.2 var(--font-body)}
.stepper li{display:flex;align-items:center;gap:10px;flex:1}
.stepper li:not(:last-child)::after{content:"";flex:1;height:2px;margin:0 12px;background:var(--gray,#E2E2E2)}
.stepper li.is-done:not(:last-child)::after{background:var(--black,#0d0d0c)}
.stepper i{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:2px solid var(--black,#0d0d0c);font-style:normal;flex:none}
.stepper .is-done i{background:var(--black,#0d0d0c);color:#fff}
.stepper .is-now i{background:var(--teal,#6E9C9C);background-image:var(--grain)}
.stepper li:not(.is-done):not(.is-now){color:#595959}
.stepper li:not(.is-done):not(.is-now) i{border-color:#767676}
/* Breadcrumbs and pagination */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0;padding:0;font:400 15px/1.3 var(--font-body)}
.crumbs a{color:var(--black,#0d0d0c);text-decoration:underline;text-decoration-color:var(--teal,#6E9C9C);text-decoration-thickness:2px;text-underline-offset:3px}
.crumbs li+li::before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;background:#767676;-webkit-mask:var(--ii-chevron-right) center/contain no-repeat;mask:var(--ii-chevron-right) center/contain no-repeat}
.pager{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.pager a{display:grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border-radius:12px;color:var(--black,#0d0d0c);text-decoration:none;font:700 15px/1 var(--font-body);transition:background-color var(--duration-fast,200ms)}
.pager a:hover{background:var(--gray,#E2E2E2)}
.pager a[aria-current]{background:var(--black,#0d0d0c);background-image:var(--grain-light);color:#fff}
/* Floating-label fields and a consent sign-up */
.fl{position:relative;display:block}
.fl input{width:100%;height:56px;padding:22px 16px 6px;border:2px solid var(--border-strong,#767676);border-radius:var(--radius-control,12px);font:400 17px/1 var(--font-body);background:#fff;color:#0d0d0c}
.fl span{position:absolute;left:18px;top:18px;font:400 17px/1 var(--font-body);color:#595959;pointer-events:none;transform-origin:0 0;transition:transform var(--duration-fast,200ms) var(--easing-settle,cubic-bezier(.23,1,.32,1)),color var(--duration-fast,200ms)}
.fl input:focus{outline:none;border-color:#0d0d0c;box-shadow:0 0 0 3px var(--teal,#6E9C9C)}
.fl input:focus+span,.fl input:not(:placeholder-shown)+span{transform:translateY(-10px) scale(.72);color:#0d0d0c}
.signup{display:grid;gap:14px;max-width:420px}
.signup .consent{display:flex;gap:10px;align-items:flex-start;font:400 14px/20px var(--font-body)}
.signup .consent input{width:20px;height:20px;margin:0;accent-color:#0d0d0c;flex:none}
/* Timeline: a staff line with noteheads for dates */
.timeline{list-style:none;margin:0;padding:0 0 0 28px;position:relative;display:grid;gap:22px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--black,#0d0d0c)}
.timeline li{position:relative;font:400 16px/24px var(--font-body)}
.timeline li::before{content:"";position:absolute;left:-25px;top:3px;width:12px;height:18px;background:var(--black,#0d0d0c);clip-path:var(--door-soft)}
.timeline li.is-next::before{background:var(--teal,#6E9C9C);box-shadow:0 0 0 4px rgba(110,156,156,.3)}
.timeline b{display:block;font:700 13px/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
/* Fundraising progress: the bar fills once as it comes into view; figures come from the fundraising record, never invented */
.raise{display:grid;gap:10px;max-width:520px}
.raise__bar{height:14px;border-radius:999px;background:var(--gray,#E2E2E2);overflow:hidden}
.raise__bar i{display:block;height:100%;width:var(--pct,0%);border-radius:inherit;background:linear-gradient(90deg,#6E9C9C 8%,#C9CE55 49%,#C5BDA2 90%);background-size:calc(100% * 100 / var(--p,50)) 100%;transform-origin:0 50%;animation:acha-fill 1400ms var(--easing-settle,cubic-bezier(.23,1,.32,1)) both}
@keyframes acha-fill{from{transform:scaleX(0)}}
.raise__row{display:flex;justify-content:space-between;font:400 15px/1.3 var(--font-body)}
.raise__row b{font:700 22px/1 var(--font-heading)}
/* Concert ticket: a stub with a perforation and the door */
.ticket{display:grid;grid-template-columns:1fr auto;max-width:520px;border-radius:var(--radius-card,16px);background:var(--white,#fff);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 1px 0 rgba(0,0,0,.04);overflow:hidden;position:relative;transition:transform var(--duration-reveal,320ms) var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.ticket:hover{transform:translateY(-3px) rotate(-.4deg)}
.ticket__main{padding:22px;display:grid;gap:8px}
.ticket__main h4{margin:0;font:300 30px/1 var(--font-heading);letter-spacing:-.02em}
.ticket__main h4 b{font-weight:700}
.ticket__meta{display:flex;flex-wrap:wrap;gap:6px 16px;font:400 15px/1.3 var(--font-body)}
.ticket__meta span{display:inline-flex;gap:6px;align-items:center}
.ticket__stub{width:120px;display:grid;place-items:center;align-content:center;gap:10px;padding:16px;background:var(--teal,#6E9C9C);background-image:var(--grain);border-left:2px dashed rgba(0,0,0,.35);font:700 14px/1.2 var(--font-body);text-align:center}
.ticket__stub::before{content:"";width:22px;height:34px;background:#0d0d0c;clip-path:var(--door-soft)}
/* Dropdown menu (details) */
.dd{position:relative;display:inline-block}
.dd summary{list-style:none;cursor:pointer}
.dd summary::-webkit-details-marker{display:none}
.dd__menu{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;margin:0;padding:6px;list-style:none;background:#fff;border-radius:14px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 18px 40px -16px rgba(0,0,0,.35);transform-origin:12px 0;animation:acha-dd 260ms var(--easing-settle,cubic-bezier(.23,1,.32,1));z-index:5}
.dd__menu a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:10px;color:#0d0d0c;text-decoration:none;font:400 16px/1 var(--font-body)}
.dd__menu a:hover,.dd__menu a:focus-visible{background:var(--gray,#E2E2E2);outline:none}
@keyframes acha-dd{from{opacity:0;transform:scale(.97) translateY(-4px)}}
/* Particles, CSS only and within the kit's limits: few, faint, slow */
.motes{position:relative;overflow:hidden;background:var(--offwhite,#F7F6F3)}
.motes::before,.motes::after{content:"";position:absolute;inset:-50% 0 0;background-image:radial-gradient(2px 2px at 12% 18%,rgba(0,0,0,.28),transparent),radial-gradient(1.5px 1.5px at 38% 62%,rgba(0,0,0,.2),transparent),radial-gradient(2px 2px at 66% 30%,rgba(110,156,156,.45),transparent),radial-gradient(1.5px 1.5px at 84% 74%,rgba(0,0,0,.18),transparent),radial-gradient(1.5px 1.5px at 52% 88%,rgba(201,206,85,.4),transparent),radial-gradient(1px 1px at 24% 46%,rgba(0,0,0,.22),transparent);background-size:260px 260px;animation:acha-motes 40s linear infinite}
.motes::after{background-size:380px 380px;opacity:.7;animation-duration:64s}
.motes>*{position:relative;z-index:1}
.motes--night{background:#0a0a0a}
.motes--night::before,.motes--night::after{filter:invert(1)}
@keyframes acha-motes{to{transform:translateY(33.3%)}}
.motes--rise::before,.motes--rise::after{inset:0 0 -50%;animation-name:acha-motes-up}
@keyframes acha-motes-up{to{transform:translateY(-33.3%)}}
@media (prefers-reduced-motion:reduce){.toast,.modal,.raise__bar i,.dd__menu,.motes::before,.motes::after{animation:none}.ticket,.fl span{transition:none}}

/* Door wipe and the gradient door (no staves or sound waves: those are cheesy; musical marks live only in the helpers' faces) */
.t-wipe{position:relative;overflow:hidden}
.t-wipe::before{content:"";position:absolute;inset:-4% -30%;background:var(--teal,#6E9C9C);background-image:var(--grain);clip-path:polygon(18% 7.5%,82% 0,82% 100%,18% 93.2%);transform:translateX(-110%);animation:acha-twipe 3.6s var(--easing-glide,cubic-bezier(.77,0,.175,1)) infinite}
@keyframes acha-twipe{0%,15%{transform:translateX(-110%)}45%,60%{transform:none}90%,100%{transform:translateX(110%)}}
.w-gdoor{width:40px;height:62px;clip-path:var(--door-soft);background:linear-gradient(180deg,#6E9C9C,#C9CE55,#C5BDA2,#6E9C9C);background-size:100% 300%;animation:acha-gdoor 4s linear infinite}
@keyframes acha-gdoor{to{background-position:0 300%}}
@media (prefers-reduced-motion:reduce){.t-wipe::before,.w-gdoor{animation:none}.t-wipe::before{transform:none;opacity:.0}}

/* A touch of glass, about 5%: a faint light on the top edge of filled buttons, a sticky nav and menus that blur what scrolls beneath, a glass halo on the switch knob while pressed. Never a glass section. */
.btn--primary,.btn--teal,.btn--dark{box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.nav{background-color:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.dd__menu,.tip__b{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dd__menu{background:rgba(255,255,255,.94)}
@media (prefers-reduced-transparency:reduce){.nav{background-color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}.dd__menu{background:#fff}}

/* Doors and boxes that hold a living fill: the brand gradient drifting, or a few slow particles (2 November 2026) */
.df{position:relative;aspect-ratio:350.05/165.04;container-type:size}
.df>i{position:absolute;overflow:hidden;background:var(--black,#0d0d0c);background-image:var(--grain-light)}
.df>i:nth-child(1){left:0;top:4.03%;width:31.82%;height:91.94%;border-radius:3.98cqw}
.df>i:nth-child(3){left:68.18%;top:4.03%;width:31.82%;height:91.94%;border-radius:3.98cqw}
.df>i:nth-child(2){left:37.25%;top:0;width:25.5%;height:100%;--soft-r:3.19cqw;clip-path:shape(from 0 calc(7.5% + var(--soft-r)),curve to var(--soft-r) calc(7.5% - .17 * var(--soft-r)) with 0 7.5%,line to calc(100% - var(--soft-r)) calc(.17 * var(--soft-r)),curve to 100% var(--soft-r) with 100% 0,line to 100% calc(100% - var(--soft-r)),curve to calc(100% - var(--soft-r)) calc(100% - .15 * var(--soft-r)) with 100% 100%,line to var(--soft-r) calc(93.2% + .15 * var(--soft-r)),curve to 0 calc(93.2% - var(--soft-r)) with 0 93.2%,close)}
.df>i.is-teal{background-color:var(--teal,#6E9C9C);background-image:var(--grain)}
.df>i.is-taupe{background-color:var(--taupe,#C5BDA2);background-image:var(--grain)}
.df>i.is-off{background-color:var(--offwhite,#F7F6F3);background-image:var(--grain);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
/* fills, for a door or any box */
.fill-grad{background:var(--grain),linear-gradient(160deg,#6E9C9C 8%,#C9CE55 49%,#C5BDA2 90%,#6E9C9C)!important;background-size:auto,100% 260%!important;animation:acha-fgrad 14s ease-in-out infinite alternate}
@keyframes acha-fgrad{to{background-position:0 0,0 100%}}
.fill-mesh{background-color:var(--taupe,#C5BDA2)!important;background-image:var(--grain),radial-gradient(70% 60% at var(--mx) var(--my),rgba(110,156,156,.95),transparent 70%),radial-gradient(60% 50% at calc(100% - var(--mx)) calc(100% - var(--my)),rgba(201,206,85,.8),transparent 70%)!important;animation:acha-mesh 14s ease-in-out infinite alternate}
.fill-light{background-color:#0a0a0a!important;background-image:var(--grain-light),radial-gradient(80% 60% at 50% 100%,rgba(110,156,156,.55),transparent 70%)!important}
.fill-day{background-color:var(--offwhite,#F7F6F3)!important;background-image:var(--grain),radial-gradient(90% 70% at 50% 0%,rgba(255,255,255,1),transparent 70%)!important}
.fill-motes,.fill-rise{position:relative}
.fill-motes::before,.fill-motes::after,.fill-rise::before,.fill-rise::after{content:"";position:absolute;left:0;right:0;height:300%;pointer-events:none;background-image:radial-gradient(2px 2px at 14% 12%,var(--mote,rgba(0,0,0,.3)),transparent),radial-gradient(1.5px 1.5px at 42% 38%,var(--mote,rgba(0,0,0,.22)),transparent),radial-gradient(2px 2px at 72% 22%,rgba(110,156,156,.5),transparent),radial-gradient(1.5px 1.5px at 86% 58%,var(--mote,rgba(0,0,0,.2)),transparent),radial-gradient(1.5px 1.5px at 30% 72%,rgba(201,206,85,.45),transparent),radial-gradient(1px 1px at 58% 86%,var(--mote,rgba(0,0,0,.25)),transparent);background-size:140px 140px}
.fill-motes::before,.fill-motes::after{top:-200%;animation:acha-fall 46s linear infinite}
.fill-motes::after{background-size:220px 220px;opacity:.7;animation-duration:70s}
.fill-rise{--mote:rgba(255,255,255,.55)}
.fill-rise::before,.fill-rise::after{top:0;animation:acha-up 40s linear infinite}
.fill-rise::after{background-size:210px 210px;opacity:.6;animation-duration:62s}
@keyframes acha-fall{to{transform:translateY(66.6%)}}
@keyframes acha-up{to{transform:translateY(-66.6%)}}
@media (prefers-reduced-motion:reduce){.fill-grad,.fill-mesh,.fill-motes::before,.fill-motes::after,.fill-rise::before,.fill-rise::after{animation:none}}
.fbox{position:relative;overflow:hidden;border-radius:var(--radius-card,16px);padding:24px;display:grid;align-content:end;gap:8px;min-height:200px}
.fbox>*{position:relative;z-index:1;margin:0}

/* Editorial moves, chosen from the brand assets kit for being quiet: photographs dissolve, captions wipe in, a gallery runs sideways with progress ticks, a photo sits deeper in the door as you scroll, a photo rises into the door once */
.dissolve{position:relative;overflow:hidden;border-radius:var(--radius-card,16px);background:#0d0d0c}
.dissolve img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);opacity:0;animation:acha-dissolve calc(var(--n,4) * 3s) linear infinite;animation-delay:calc(var(--i) * 3s)}
.dissolve img:first-of-type{opacity:1}
@keyframes acha-dissolve{0%{opacity:0}5%,25%{opacity:1}32%,100%{opacity:0}}
.dissolve__line{position:absolute;left:24px;bottom:20px;z-index:2;margin:0;color:#fff;font:400 44px/1 var(--font-accent);text-shadow:0 2px 12px rgba(0,0,0,.5)}
.lower3{position:absolute;left:24px;bottom:24px;z-index:2;display:grid;gap:4px;padding:14px 20px;background:var(--teal,#6E9C9C);background-image:var(--grain);color:#0d0d0c;border-radius:10px;clip-path:inset(0 100% 0 0 round 10px);animation:acha-l3 6s var(--easing-settle,cubic-bezier(.23,1,.32,1)) infinite}
.lower3 b{font:700 22px/1.1 var(--font-heading)}
.lower3 span{font:400 15px/1.3 var(--font-body)}
@keyframes acha-l3{0%,8%{clip-path:inset(0 100% 0 0 round 10px)}22%,80%{clip-path:inset(0 0 0 0 round 10px)}92%,100%{clip-path:inset(0 0 0 100% round 10px)}}
.hgal{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,38%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;padding-bottom:14px;scrollbar-width:none;scroll-timeline:--hg x}
.hgal::-webkit-scrollbar{display:none}
.hgal figure{margin:0;scroll-snap-align:start;display:grid;gap:10px}
.hgal .ph{aspect-ratio:4/5;border-radius:var(--radius-card,16px)}
.hgal img{width:100%;height:100%;object-fit:cover}
.hgal figcaption{font:400 14px/1.35 var(--font-body)}
.hgal figcaption b{display:block;font-weight:700}
.ticks{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:6px;margin-top:6px}
.ticks i{height:2px;background:var(--gray,#E2E2E2);position:relative;overflow:hidden}
.ticks i::after{content:"";position:absolute;inset:0;background:#0d0d0c;transform:scaleX(0);transform-origin:0 50%;animation:acha-tick linear both;animation-timeline:--hg;animation-range:calc(var(--i) * 25%) calc(var(--i) * 25% + 25%)}
@keyframes acha-tick{to{transform:none}}
.deep{position:relative;overflow:hidden}
.deep img{animation:acha-deep linear both;animation-timeline:view();animation-range:cover}
@keyframes acha-deep{from{transform:scale(1.18) translateY(-6%)}to{transform:scale(1.18) translateY(6%)}}
.rise-in img{animation:acha-risein 1100ms var(--easing-settle,cubic-bezier(.23,1,.32,1)) both;animation-delay:200ms}
@keyframes acha-risein{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@supports not (animation-timeline:view()){.deep img,.ticks i::after{animation:none}.ticks i:first-child::after{transform:none}}
@media (prefers-reduced-motion:reduce){.dissolve img,.lower3,.deep img,.rise-in img,.ticks i::after{animation:none}.dissolve img:not(:first-of-type){display:none}.lower3{clip-path:none}}

/* Heroes from the kit's component library, the three people liked: spotlight, rotating word, particle field */
.hx{position:relative;overflow:hidden;border-radius:var(--radius-card,16px);display:grid;place-items:center;text-align:center;padding:56px 32px;min-height:300px}
.hx>*{position:relative;z-index:1}
.hx__label{margin:0 0 14px;font:700 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase}
.hx__h{margin:0 0 16px;font:300 56px/1 var(--font-heading);letter-spacing:-.035em}
.hx__p{margin:0 0 24px;font:400 18px/1.5 var(--font-body)}
.hx--spot{background:#0a0a0a;background-image:var(--grain-light);color:#fff}
.hx--spot::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(520px circle at var(--x,28%) var(--y,18%),rgba(110,156,156,.42),transparent 62%),radial-gradient(420px circle at 88% 100%,rgba(201,206,85,.16),transparent 65%);transition:background-position .2s}
.hx--spot .hx__label{color:var(--olive,#C9CE55)}
.hx--rotate{background:var(--white,#fff);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);color:#0d0d0c}
.hx--motes{background:#0a0a0a;color:#fff}
.hx--motes::before,.hx--motes::after{content:"";position:absolute;left:0;right:0;top:0;height:300%;z-index:0;pointer-events:none;background-image:radial-gradient(1.6px 1.6px at 12% 14%,rgba(255,255,255,.55),transparent),radial-gradient(1.2px 1.2px at 38% 44%,rgba(255,255,255,.4),transparent),radial-gradient(2px 2px at 64% 20%,rgba(201,206,85,.55),transparent),radial-gradient(1.4px 1.4px at 82% 62%,rgba(255,255,255,.45),transparent),radial-gradient(1.2px 1.2px at 24% 78%,rgba(110,156,156,.7),transparent),radial-gradient(1px 1px at 52% 90%,rgba(255,255,255,.35),transparent),radial-gradient(1.4px 1.4px at 92% 30%,rgba(255,255,255,.4),transparent);background-size:240px 240px;animation:acha-up 48s linear infinite}
.hx--motes::after{background-size:380px 380px;opacity:.6;animation-duration:80s}
.btn--olive{background:var(--olive,#C9CE55);color:#0d0d0c;border-color:var(--olive,#C9CE55)}
.btn--olive:hover,.btn--olive.is-hover{background:#fff;border-color:#fff;color:#0d0d0c}
.hx .kw{font-size:1.05em}
@media (prefers-reduced-motion:reduce){.hx--motes::before,.hx--motes::after{animation:none}}
.hx .kw{font-size:1.22em;line-height:.9}
.hx .wswap{line-height:1}
.hx .wswap>.kw{line-height:1.1}

/* Playthings: small things to hold, turn, drag and tap. Each does one thing, answers at once, and never loops on its own */
/* Hold to open: press and hold, the door opens and the photo comes up in colour; let go and it closes */
.p-hold{position:relative;display:grid;place-items:center;gap:14px}
.p-hold__door{width:120px;height:180px;background:#0d0d0c;clip-path:var(--door-soft);overflow:hidden;position:relative}
.p-hold__door img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.35);transform:scale(1.15);transition:filter 1200ms var(--easing-settle,cubic-bezier(.23,1,.32,1)),transform 1200ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.p-hold__door::after{content:"";position:absolute;inset:0;background:#0d0d0c;transform-origin:0 50%;transition:transform 1400ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.p-hold:has(button:active) .p-hold__door::after,.p-hold.is-on .p-hold__door::after{transform:scaleX(0);transition-duration:1600ms}
.p-hold:has(button:active) .p-hold__door img,.p-hold.is-on .p-hold__door img{filter:none;transform:none}
.p-hold button{touch-action:none;user-select:none}
/* Turn the house lights: a knob (a range input, turned by drag, wheel or arrow keys) dims or raises a photo */
.p-knob{display:grid;justify-items:center;gap:12px}
.p-knob__dial{--v:50;position:relative;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#2a2a2a,#0d0d0c 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px -10px rgba(0,0,0,.6);transform:rotate(calc(-135deg + var(--v) * 2.7deg));transition:transform 120ms linear}
.p-knob__dial::after{content:"";position:absolute;left:50%;top:10px;width:4px;height:18px;margin-left:-2px;border-radius:2px;background:var(--olive,#C9CE55)}
.p-knob__ticks{position:absolute;inset:-12px;border-radius:50%;background:repeating-conic-gradient(from -135deg,rgba(0,0,0,.35) 0 1deg,transparent 1deg 27deg);-webkit-mask:radial-gradient(circle,transparent 58px,#0d0d0c 59px);mask:radial-gradient(circle,transparent 58px,#0d0d0c 59px);clip-path:polygon(50% 50%,0 100%,0 0,100% 0,100% 100%)}
.p-knob__wrap{position:relative;width:96px;height:96px}
.p-knob input{position:absolute;inset:0;opacity:0;cursor:grab}
.p-knob__photo{width:150px;height:96px;border-radius:12px;overflow:hidden}
.p-knob__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(calc(.25 + var(--v,50) / 100 * .95))}
/* Drag the door open */
.p-drag{display:grid;justify-items:center;gap:14px;perspective:600px}
.p-drag__frame{position:relative;width:110px;height:170px;background:#111;overflow:hidden}
.p-drag__frame img{width:100%;height:100%;object-fit:cover}
.p-drag__leaf{position:absolute;inset:0;background:#0d0d0c;background-image:var(--grain-light);transform-origin:100% 50%;transform:perspective(600px) rotateY(calc(var(--v,0) * -0.75deg));box-shadow:inset -1px 0 0 rgba(255,255,255,.2)}
.p-drag input[type=range]{width:160px;accent-color:#0d0d0c}
/* Pick your section: tap a tile, it lifts and turns to colour */
.p-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.p-pick label{position:relative;display:grid;align-content:end;height:110px;border-radius:12px;overflow:hidden;cursor:pointer;transition:transform 320ms cubic-bezier(.34,1.4,.5,1)}
.p-pick input{position:absolute;opacity:0}
.p-pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.7);transition:filter 500ms}
.p-pick span{position:relative;padding:8px 10px;font:700 14px/1 var(--font-body);color:#fff}
.p-pick label:has(input:checked){transform:translateY(-6px) scale(1.03);box-shadow:0 14px 26px -12px rgba(0,0,0,.55),0 0 0 3px var(--teal,#6E9C9C)}
.p-pick label:has(input:checked) img{filter:none}
.p-pick label:has(input:focus-visible){outline:2px solid #0d0d0c;outline-offset:3px}
/* Tap the door, the light comes on and falls on the floor */
.p-light{display:grid;justify-items:center;gap:10px;cursor:pointer}
.p-light input{position:absolute;opacity:0}
.p-light__stage{position:relative;width:180px;height:150px;background:#0a0a0a;border-radius:12px;overflow:hidden}
.p-light__door{position:absolute;left:66px;top:18px;width:48px;height:84px;background:#151515;clip-path:var(--door-soft);transition:background 600ms}
.p-light__spill{position:absolute;left:30px;right:30px;top:100px;bottom:0;background:linear-gradient(#fff,rgba(110,156,156,.4) 40%,transparent);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);opacity:0;transition:opacity 900ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.p-light:has(input:checked) .p-light__door{background:#fff}
.p-light:has(input:checked) .p-light__spill{opacity:.85}
.p-light:has(input:focus-visible) .p-light__stage{outline:2px solid #0d0d0c;outline-offset:3px}
/* Tilt: a photo card tilts toward the pointer (--rx/--ry from pointer events; flat without script) */
.p-tilt{perspective:700px}
.p-tilt__card{width:150px;height:190px;border-radius:14px;overflow:hidden;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 200ms var(--easing-settle,cubic-bezier(.23,1,.32,1));box-shadow:0 18px 30px -18px rgba(0,0,0,.6)}
.p-tilt__card img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter 600ms}
.p-tilt:hover .p-tilt__card img{filter:none}
@media (prefers-reduced-motion:reduce){.p-hold__door::after,.p-hold__door img,.p-knob__dial,.p-pick label,.p-light__spill,.p-tilt__card{transition:none}.p-tilt__card{transform:none}}
.hx--rotate .hx__h{margin-bottom:40px}

/* Behind glass: a photograph dimmed under a flat brand colour (no grain), as if seen through tinted glass. Hover lifts the colour a little and the photo comes forward */
.bg-glass{position:relative;overflow:hidden;border-radius:var(--radius-card,16px);isolation:isolate;display:grid;align-content:end;padding:28px;min-height:240px}
.bg-glass>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(1) contrast(1.1) brightness(.9) blur(.6px);transform:scale(1.03);transition:filter 800ms var(--easing-settle,cubic-bezier(.23,1,.32,1)),transform 800ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.bg-glass::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glass-c,rgba(110,156,156,.86));transition:opacity 800ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.bg-glass:hover::before,.bg-glass:focus-within::before{opacity:.82}
.bg-glass:hover>img,.bg-glass:focus-within>img{filter:grayscale(1) contrast(1.1) brightness(.95);transform:none}
.bg-glass>*:not(img){position:relative;margin:0}
.bg-glass--teal{--glass-c:rgba(110,156,156,.86);color:#0d0d0c}
.bg-glass--black{--glass-c:rgba(0,0,0,.72);color:#fff}
.bg-glass--taupe{--glass-c:rgba(197,189,162,.88);color:#0d0d0c}
.bg-glass--olive{--glass-c:rgba(201,206,85,.88);color:#0d0d0c}
.bg-glass--white{--glass-c:rgba(247,246,243,.84);color:#0d0d0c}
@media (prefers-reduced-motion:reduce){.bg-glass>img,.bg-glass::before{transition:none}}

/* A little of the particles in every background: a few faint specks drift very slowly over the grain on every field, band and box (2 November 2026) */
@property --sy{syntax:"<length>";inherits:false;initial-value:0px}
:root{--specks:radial-gradient(1.4px 1.4px at 14% 22%,rgba(0,0,0,.22),transparent),radial-gradient(1.1px 1.1px at 46% 64%,rgba(0,0,0,.16),transparent),radial-gradient(1.6px 1.6px at 78% 34%,rgba(255,255,255,.55),transparent),radial-gradient(1.2px 1.2px at 30% 86%,rgba(255,255,255,.45),transparent),radial-gradient(1px 1px at 88% 78%,rgba(0,0,0,.18),transparent);
--specks-light:radial-gradient(1.4px 1.4px at 14% 22%,rgba(255,255,255,.4),transparent),radial-gradient(1.1px 1.1px at 46% 64%,rgba(255,255,255,.28),transparent),radial-gradient(1.6px 1.6px at 78% 34%,rgba(201,206,85,.45),transparent),radial-gradient(1.2px 1.2px at 30% 86%,rgba(110,156,156,.6),transparent),radial-gradient(1px 1px at 88% 78%,rgba(255,255,255,.3),transparent)}
.f-teal,.f-olive,.f-taupe,.f-white,.donate,.fbox.is-teal{background-image:var(--specks),var(--grain);background-size:300px 300px,auto;background-position:0 var(--sy),0 0;animation:acha-sy 90s linear infinite}
.f-black,.night,.flat--night,.hx--spot{background-image:var(--specks-light),var(--grain-light);background-size:300px 300px,auto;background-position:0 var(--sy),0 0;animation:acha-sy 90s linear infinite}
.f-grad{background-image:var(--specks),var(--grain),linear-gradient(90deg,var(--teal) 8%,var(--olive) 49%,var(--taupe) 90%);background-size:300px 300px,auto,auto;background-position:0 var(--sy),0 0,0 0;animation:acha-sy 90s linear infinite}
@keyframes acha-sy{to{--sy:-300px}}
@media (prefers-reduced-motion:reduce){.f-teal,.f-olive,.f-taupe,.f-white,.donate,.f-black,.night,.flat--night,.f-grad,.hx--spot{animation:none}}

/* Donate band, redrawn: the night, with rising specks; the headline large in the key-word pattern; a door photo beside it that turns to colour; the ring button in white; an arrow link */
.donate.donate--night{background-color:#0a0a0a;color:#fff;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:center;padding:44px 48px}
.donate--night .donate__copy{display:grid;gap:18px;justify-items:start}
.donate--night h3{margin:0;font:300 52px/1.02 var(--font-heading);letter-spacing:-.035em;color:#fff}
.donate--night h3 .hv{font-weight:700}
.donate--night p{margin:0;font:400 18px/28px var(--font-body);color:rgba(255,255,255,.86);max-width:32em}
.donate--night .donate__note{font-size:14px;line-height:20px;color:rgba(255,255,255,.6)}
.donate--night .arrow-link{color:#fff}
.donate__door{justify-self:end;width:200px;height:300px;overflow:hidden;clip-path:var(--door-soft)}
.donate__door img{width:100%;height:100%;object-fit:cover}
.donate__acts{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:6px}
@media (max-width:760px){.donate.donate--night{grid-template-columns:1fr;padding:32px 24px}.donate__door{display:none}.donate--night h3{font-size:38px}}
.donate--night .donate__copy{grid-column:1;justify-self:stretch}
.donate--night .donate__door{grid-column:2;grid-row:1}
.donate--night h3 .kw{font-size:1.1em}
@media (max-width:760px){.donate--night .donate__copy{grid-column:1}}

/* The door, always with the mark's soft corners (an eighth of its width) */
:root{--door-soft:shape(from 0 15.5%,curve to 12.5% 6.56% with 0 7.5%,line to 87.5% .94%,curve to 100% 8% with 100% 0,line to 100% 92%,curve to 87.5% 99.15% with 100% 100%,line to 12.5% 94.05%,curve to 0 85.2% with 0 93.2%,close)}
:root{--rect-soft:shape(from 0 8%,curve to 12.5% 0% with 0 0,line to 87.5% 0%,curve to 100% 8% with 100% 0,line to 100% 92%,curve to 87.5% 100% with 100% 100%,line to 12.5% 100%,curve to 0 92% with 0 100%,close)}
.lift-card .ph{clip-path:var(--rect-soft);border-radius:0}
.p-drag__frame{clip-path:var(--door-soft)}

/* Script words read as large as the words before them (Brittany's lowercase is small, so it is set about half as big again), and always start with a capital */
.kw,.kw--lead{font-size:1.5em;line-height:1.1}
.d .kw,.d .kw--lead,.hx .kw,.donate--night h3 .kw{font-size:1.45em;line-height:1.15}
.kw::first-letter{text-transform:uppercase}
.d .kw{margin:0 .04em}
.hx__h{margin-bottom:30px}

/* Doors, redrawn clean (2 November 2026): no grain or specks inside the mark, solid flats, one beautiful movement in the door. Boxes keep their texture. */
.df>i{background-image:none!important;animation:none}
.df>i.is-teal{background:var(--teal,#6E9C9C)}.df>i.is-taupe{background:var(--taupe,#C5BDA2)}.df>i.is-off{background:var(--offwhite,#F7F6F3)}
.df>i.is-white{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
/* a stage light passes across the door */
.dv-sweep{background:#0a0a0a!important}
.dv-sweep::after{content:"";position:absolute;inset:-10% -60%;background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.08) 44%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.08) 56%,transparent 62%);animation:acha-sweep 7s cubic-bezier(.65,0,.35,1) infinite}
@keyframes acha-sweep{0%{transform:translateX(-60%)}60%,100%{transform:translateX(60%)}}
/* the brand gradient rises and falls through the door, clean */
.dv-grad{background:linear-gradient(180deg,#6E9C9C 0%,#C9CE55 33%,#C5BDA2 66%,#6E9C9C 100%)!important;background-size:100% 300%!important;animation:acha-gdoor 12s ease-in-out infinite alternate!important}
/* the door swings open on light, closes, opens again */
.dv-swing{background:linear-gradient(180deg,#fff 0%,#dfeaea 55%,#6E9C9C 100%)!important;perspective:500px}
.dv-swing::after{content:"";position:absolute;inset:0;background:#0a0a0a;transform-origin:0 50%;animation:acha-swing 9s cubic-bezier(.65,0,.35,1) infinite;box-shadow:inset -2px 0 0 rgba(255,255,255,.15)}
@keyframes acha-swing{0%,12%{transform:rotateY(0)}40%,70%{transform:rotateY(-68deg)}95%,100%{transform:rotateY(0)}}
/* dawn: light rises from the floor of the door */
.dv-dawn{background:#0a0a0a!important}
.dv-dawn::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 50% 100%,rgba(255,255,255,.95),rgba(110,156,156,.75) 35%,rgba(110,156,156,0) 70%);transform:translateY(55%);animation:acha-dawn 10s ease-in-out infinite alternate}
@keyframes acha-dawn{to{transform:translateY(5%)}}
/* the three panels take the brand colours in turn, flat, door, flat */
.dv-cycle{animation:acha-cycle 12s steps(1,end) infinite!important;animation-delay:calc(var(--i,0) * -4s)!important;transition:background-color 1.2s}
.df.is-cycle>i{transition:background-color 1.4s var(--easing-settle,cubic-bezier(.23,1,.32,1))}
@keyframes acha-cycle{0%{background-color:#6E9C9C}25%{background-color:#0d0d0c}50%{background-color:#C5BDA2}75%{background-color:#C9CE55}}
/* a photograph slowly comes closer in the door, and the whole mark is reflected on a polished floor */
.dv-photo{background:#0d0d0c!important}
.dv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);animation:acha-kb 18s ease-in-out infinite alternate}
@keyframes acha-kb{from{transform:scale(1.02)}to{transform:scale(1.18) translateY(-3%)}}
.df.is-reflect{-webkit-box-reflect:below 6px linear-gradient(transparent 62%,rgba(0,0,0,.22))}
@media (prefers-reduced-motion:reduce){.dv-sweep::after,.dv-grad,.dv-swing::after,.dv-dawn::after,.dv-cycle,.dv-photo img{animation:none!important}.dv-swing::after{transform:rotateY(-50deg)}.dv-dawn::after{transform:translateY(20%)}}

/* specks as one tiled image, so layer sizes line up (fixes the gradient panel repeating mid-panel) */
:root{--specks:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Ccircle cx='42' cy='66' r='.8' fill='rgba%280%2C0%2C0%2C.22%29'/%3E%3Ccircle cx='138' cy='192' r='.6' fill='rgba%280%2C0%2C0%2C.16%29'/%3E%3Ccircle cx='234' cy='102' r='.9' fill='rgba%28255%2C255%2C255%2C.6%29'/%3E%3Ccircle cx='90' cy='258' r='.7' fill='rgba%28255%2C255%2C255%2C.5%29'/%3E%3Ccircle cx='264' cy='234' r='.6' fill='rgba%280%2C0%2C0%2C.18%29'/%3E%3C/svg%3E");--specks-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Ccircle cx='42' cy='66' r='.8' fill='rgba%28255%2C255%2C255%2C.42%29'/%3E%3Ccircle cx='138' cy='192' r='.6' fill='rgba%28255%2C255%2C255%2C.3%29'/%3E%3Ccircle cx='234' cy='102' r='.9' fill='rgba%28201%2C206%2C85%2C.5%29'/%3E%3Ccircle cx='90' cy='258' r='.7' fill='rgba%28110%2C156%2C156%2C.65%29'/%3E%3Ccircle cx='264' cy='234' r='.6' fill='rgba%28255%2C255%2C255%2C.32%29'/%3E%3C/svg%3E")}
.f-grad{background-size:300px 300px,auto,100% 100%;background-repeat:repeat,repeat,no-repeat}

/* Gradient motion: the brand gradient moving, never cut, never over a photo, never at night */
@property --ga{syntax:"<angle>";inherits:false;initial-value:90deg}
@property --go{syntax:"<percentage>";inherits:false;initial-value:49%}
@property --gs{syntax:"<percentage>";inherits:false;initial-value:0%}
.gm{position:relative;overflow:hidden;border-radius:var(--radius-card,16px);min-height:150px;display:grid;align-content:end;padding:20px;color:#0d0d0c}
.gm>*{position:relative;margin:0}
.gm-drift{background:var(--specks),var(--grain),linear-gradient(90deg,#6E9C9C 0%,#C9CE55 25%,#C5BDA2 50%,#C9CE55 75%,#6E9C9C 100%);background-size:300px 300px,auto,300% 100%;background-repeat:repeat,repeat,no-repeat;animation:acha-gdrift 18s ease-in-out infinite alternate}
@keyframes acha-gdrift{from{background-position:0 0,0 0,0% 0}to{background-position:0 0,0 0,100% 0}}
.gm-turn{background:var(--specks),var(--grain),linear-gradient(var(--ga),#6E9C9C 8%,#C9CE55 49%,#C5BDA2 90%);background-size:300px 300px,auto,100% 100%;animation:acha-gturn 16s ease-in-out infinite alternate}
@keyframes acha-gturn{to{--ga:180deg}}
.gm-breathe{background:var(--specks),var(--grain),linear-gradient(90deg,#6E9C9C 8%,#C9CE55 var(--go),#C5BDA2 90%);background-size:300px 300px,auto,100% 100%;animation:acha-gbreathe 9s ease-in-out infinite alternate}
@keyframes acha-gbreathe{from{--go:30%}to{--go:70%}}
.gm-bands{background:var(--specks),var(--grain),linear-gradient(90deg,#6E9C9C calc(40% - var(--gs)),#C9CE55 calc(40% + var(--gs)),#C9CE55 calc(60% - var(--gs)),#C5BDA2 calc(60% + var(--gs)));background-size:300px 300px,auto,100% 100%;transition:--gs 900ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.gm-bands:hover,.gm-bands:focus-within,.gm-bands.is-hover{--gs:20%}
.gm-pan{background:var(--specks),var(--grain),linear-gradient(90deg,#6E9C9C 8%,#C9CE55 49%,#C5BDA2 90%);background-size:300px 300px,auto,300% 100%;background-position:0 0,0 0,0 0;transition:background-position 1200ms cubic-bezier(.32,.72,0,1)}
.gm-pan:hover,.gm-pan:focus-within,.gm-pan.is-hover{background-position:0 0,0 0,100% 0}
.gm-sand{background:var(--specks),var(--grain),linear-gradient(var(--ga),#F7F6F3 20%,#C5BDA2 100%);background-size:300px 300px,auto,100% 100%;animation:acha-gturn 20s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.gm-drift,.gm-turn,.gm-breathe,.gm-sand{animation:none}.gm-bands,.gm-pan{transition:none}}

/* No texture on buttons, anywhere; the ring keeps its moving border */
.btn:not(.btn--ring),.btn:not(.btn--ring):hover,.btn.is-hover:not(.btn--ring){background-image:none}
.btn.btn--ring,.on-dark .btn.btn--ring,.donate .btn.btn--ring,.f-black .btn.btn--ring{--btn-grain:linear-gradient(transparent,transparent)}
/* A word or two in white on a teal box: display size only (24px and up), where white reads at large-text contrast */
.wh{color:#fff}
/* Handwriting: the script word is written on left to right with a soft pen edge leaning like the hand */
.kw-write,.kin-write{-webkit-mask-image:linear-gradient(100deg,#0d0d0c 0 40%,transparent 60%);mask-image:linear-gradient(100deg,#0d0d0c 0 40%,transparent 60%);-webkit-mask-size:280% 100%;mask-size:280% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;clip-path:none!important;animation:acha-hand 1700ms cubic-bezier(.45,.05,.35,1) both!important;animation-delay:calc(160ms + var(--i,0) * var(--stagger,70ms))!important}
@keyframes acha-hand{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@media (prefers-reduced-motion:reduce){.kw-write,.kin-write{animation:none!important;-webkit-mask-image:none;mask-image:none}}
/* Tap for light, drawn from the mark: the soft door, and its light falling on the floor in the door's own shape (as NightLamp) */
.p-light__svg{width:180px;height:150px;display:block;border-radius:12px;background:#0a0a0a}
.p-light__svg .door{fill:#1a1a1a;transition:fill 600ms}
.p-light__svg .spill{opacity:0;transition:opacity 900ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.p-light:has(input:checked) .p-light__svg .door{fill:#fff}
.p-light:has(input:checked) .p-light__svg .spill{opacity:.9}
.p-light:has(input:focus-visible) .p-light__svg{outline:2px solid #0d0d0c;outline-offset:3px}
/* Every Brittany word, everywhere: a capital first letter, and set about half as big again as the words around it */
.accent,.dissolve__line,.kw{display:inline-block}
.accent::first-letter,.dissolve__line::first-letter,.kw::first-letter{text-transform:uppercase}
/* Script that sits naturally with the words around it: in display type its lowercase matches the Light lowercase (about 1.15x); in running sizes about 1.35x */
.kw,.kw--lead,.accent{font-size:1.35em;line-height:1}
.d .kw,.d .kw--lead,.hx .kw,.donate--night h3 .kw,.p-display .kw,h1 .kw,h2 .kw,h3 .kw{font-size:1.15em;line-height:1}
.prose h2 .kw,.prose h3 .kw,.ConcertCard h3 .kw{font-size:1.3em}
/* Connecting words (and, of, the) may be set in small Brittany between the display words: lowercase, about the Light x-height, never crowding the line */
.amp{font-family:var(--font-accent,"Brittany Signature",cursive);font-weight:400;font-size:.95em;line-height:1;letter-spacing:0;display:inline-block;margin:0 .06em}
.amp::first-letter{text-transform:none}
/* Script never interferes with neighbouring lines: it keeps its own line box and a little air */
.kw,.amp{vertical-align:baseline;padding-block:.04em}
/* Where a script stroke touches a normal letter, the script passes behind it */
.d,.hx__h,h1,h2,h3,h4,.p-display{isolation:isolate}
.kw,.amp,.accent{position:relative;z-index:0}
.lt,.hv,.d b,.hx__h b,h1 b,h2 b,h3 b{position:relative;z-index:1}

/* Script, settled (2 November 2026): a little smaller, with room for its swashes, and lines that leave it air */
.kw,.kw--lead,.accent{font-size:1.2em;line-height:1}
.d .kw,.d .kw--lead,.hx .kw,.donate--night h3 .kw,.p-display .kw,h1 .kw,h2 .kw,h3 .kw{font-size:1.02em;line-height:1}
.prose h2 .kw,.prose h3 .kw{font-size:1.15em}
.amp{font-size:.72em;vertical-align:.08em}
/* swashes overhang the letter box: give the script side room so masks and clips never cut the capital */
.kw,.kw-write,.kin-write{padding:.1em .3em .1em .2em;margin:-.1em -.3em -.1em -.2em}
/* a display line that holds a script word opens up a little so the ascenders never touch the line above */
.d:has(.kw),.hx__h:has(.kw),h1:has(.kw),h2:has(.kw),h3:has(.kw){line-height:1.08}
.kw-write,.kin-write{-webkit-mask-image:linear-gradient(100deg,#0d0d0c 0 45%,transparent 60%);mask-image:linear-gradient(100deg,#0d0d0c 0 45%,transparent 60%);-webkit-mask-size:300% 100%;mask-size:300% 100%}
/* The write-on mask paints only inside the word's box, and Brittany's capitals and swashes reach well outside it: give the masked word a generous box (cancelled by negative margins, so the layout does not move) */
.kw-write,.kin-write{padding:.6em .5em .55em .7em;margin:-.6em -.5em -.55em -.7em;-webkit-mask-size:320% 100%;mask-size:320% 100%}

/* Buttons with depth and a door in them (2 November 2026): a faint light along the top edge, a soft shadow below, and on hover the second colour rises from the floor like light under a door; press and the button sinks a touch. No texture. */
.btn{position:relative;isolation:isolate;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.12),0 10px 22px -12px rgba(0,0,0,.45);transition:transform var(--duration-fast,200ms) var(--easing-settle,cubic-bezier(.23,1,.32,1)),box-shadow var(--duration-fast,200ms) var(--easing-settle,cubic-bezier(.23,1,.32,1)),color var(--duration-fast,200ms),border-color var(--duration-fast,200ms)}
.btn::before{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--btn-rise,var(--teal,#6E9C9C));transform:translateY(102%);transition:transform var(--duration-reveal,320ms) var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.btn:hover::before,.btn.is-hover::before,.btn:focus-visible::before{transform:none}
.btn:hover,.btn.is-hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.12),0 2px 3px rgba(0,0,0,.12),0 14px 26px -12px rgba(0,0,0,.5)}
.btn:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 2px 4px rgba(0,0,0,.25),0 1px 1px rgba(0,0,0,.1)}
/* each kind names what rises under it and what the label becomes */
.btn--primary,.btn--dark{--btn-rise:var(--teal,#6E9C9C)}
.btn--primary:hover,.btn--primary.is-hover,.btn--primary:focus-visible,.btn--dark:hover{background:var(--black,#0d0d0c);color:var(--black,#0d0d0c);border-color:var(--teal,#6E9C9C)}
.btn--teal{--btn-rise:var(--black,#0d0d0c);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.1),0 10px 22px -12px rgba(0,0,0,.35)}
.btn--teal:hover,.btn--teal.is-hover,.btn--teal:focus-visible{background:var(--teal,#6E9C9C);color:#fff;border-color:var(--black,#0d0d0c)}
.btn--secondary{--btn-rise:var(--black,#0d0d0c);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.08),0 8px 18px -12px rgba(0,0,0,.35)}
.btn--secondary:hover,.btn--secondary.is-hover,.btn--secondary:focus-visible{background:#fff;color:#fff;border-color:var(--black,#0d0d0c)}
.on-dark .btn--primary,.donate--night .btn--primary{--btn-rise:#fff}
.on-dark .btn--primary:hover,.on-dark .btn--primary.is-hover,.donate--night .btn--primary:hover{border-color:#fff;color:#0d0d0c}
.on-dark .btn--secondary{--btn-rise:#fff;box-shadow:none}
.on-dark .btn--secondary:hover,.on-dark .btn--secondary.is-hover{background:transparent;color:#0d0d0c;border-color:#fff}
.btn--ghost,.btn--line{box-shadow:none;overflow:visible}
.btn--ghost::before,.btn--line::before,.btn--sweep::before,.btn:disabled::before,.btn[aria-disabled="true"]::before{display:none}
.btn:disabled,.btn[aria-disabled="true"]{box-shadow:none;transform:none}
.btn--ring{overflow:visible}
.btn--ring::before{display:none}
/* the door in the label: an optional arrow slot that opens on hover, and a tiny door glyph for Give */
.btn .al{position:relative;display:inline-block;width:0;height:1em;overflow:hidden;transition:width var(--duration-reveal,320ms) var(--easing-settle,cubic-bezier(.23,1,.32,1));vertical-align:-.05em}
.btn .al::after{content:"\2192";position:absolute;left:0;top:-.08em;transform:translateX(-120%);transition:transform var(--duration-reveal,320ms) var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.btn:hover .al,.btn.is-hover .al,.btn:focus-visible .al{width:1em}
.btn:hover .al::after,.btn.is-hover .al::after,.btn:focus-visible .al::after{transform:none}
.btn .door-i{display:inline-block;width:.55em;height:.9em;background:currentColor;clip-path:var(--door-soft);margin-right:.1em;transition:transform var(--duration-reveal,320ms) var(--easing-settle,cubic-bezier(.23,1,.32,1));transform-origin:0 50%}
.btn:hover .door-i,.btn.is-hover .door-i{transform:perspective(60px) rotateY(-40deg)}
@media (prefers-reduced-motion:reduce){.btn,.btn::before,.btn .al,.btn .al::after,.btn .door-i{transition:none}.btn:hover{transform:none}}

/* More of the particles on any single-colour panel: a denser tile (16 specks per 260px) and a second, slower layer behind it */
:root{--specks:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Ccircle cx='88' cy='248' r='.7' fill='rgba%280%2C0%2C0%2C0.15%29'/%3E%3Ccircle cx='216' cy='143' r='.6' fill='rgba%280%2C0%2C0%2C0.15%29'/%3E%3Ccircle cx='135' cy='60' r='.6' fill='rgba%280%2C0%2C0%2C0.21%29'/%3E%3Ccircle cx='67' cy='29' r='1.1' fill='rgba%280%2C0%2C0%2C0.27%29'/%3E%3Ccircle cx='37' cy='248' r='.7' fill='rgba%28255%2C255%2C255%2C0.57%29'/%3E%3Ccircle cx='21' cy='153' r='1.1' fill='rgba%280%2C0%2C0%2C0.30%29'/%3E%3Ccircle cx='17' cy='148' r='.7' fill='rgba%280%2C0%2C0%2C0.16%29'/%3E%3Ccircle cx='36' cy='152' r='.8' fill='rgba%28255%2C255%2C255%2C0.60%29'/%3E%3Ccircle cx='32' cy='154' r='1.1' fill='rgba%28255%2C255%2C255%2C0.51%29'/%3E%3Ccircle cx='146' cy='188' r='.6' fill='rgba%28255%2C255%2C255%2C0.59%29'/%3E%3Ccircle cx='133' cy='180' r='1.1' fill='rgba%280%2C0%2C0%2C0.19%29'/%3E%3Ccircle cx='155' cy='242' r='.9' fill='rgba%280%2C0%2C0%2C0.18%29'/%3E%3Ccircle cx='52' cy='184' r='.7' fill='rgba%280%2C0%2C0%2C0.19%29'/%3E%3Ccircle cx='132' cy='230' r='.8' fill='rgba%28255%2C255%2C255%2C0.49%29'/%3E%3Ccircle cx='24' cy='36' r='1.1' fill='rgba%280%2C0%2C0%2C0.26%29'/%3E%3Ccircle cx='44' cy='244' r='.9' fill='rgba%280%2C0%2C0%2C0.29%29'/%3E%3C/svg%3E");--specks-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Ccircle cx='25' cy='201' r='1.1' fill='rgba%28255%2C255%2C255%2C0.47%29'/%3E%3Ccircle cx='86' cy='93' r='1.3' fill='rgba%28255%2C255%2C255%2C0.37%29'/%3E%3Ccircle cx='210' cy='122' r='.6' fill='rgba%28110%2C156%2C156%2C0.74%29'/%3E%3Ccircle cx='127' cy='184' r='1.3' fill='rgba%28255%2C255%2C255%2C0.43%29'/%3E%3Ccircle cx='85' cy='171' r='1.1' fill='rgba%28201%2C206%2C85%2C.5%29'/%3E%3Ccircle cx='216' cy='120' r='.8' fill='rgba%28110%2C156%2C156%2C0.72%29'/%3E%3Ccircle cx='94' cy='11' r='.9' fill='rgba%28255%2C255%2C255%2C0.40%29'/%3E%3Ccircle cx='132' cy='21' r='.7' fill='rgba%28110%2C156%2C156%2C0.53%29'/%3E%3Ccircle cx='69' cy='107' r='.9' fill='rgba%28201%2C206%2C85%2C.5%29'/%3E%3Ccircle cx='133' cy='26' r='.7' fill='rgba%28255%2C255%2C255%2C0.39%29'/%3E%3Ccircle cx='232' cy='41' r='.9' fill='rgba%28201%2C206%2C85%2C.5%29'/%3E%3Ccircle cx='77' cy='186' r='.9' fill='rgba%28201%2C206%2C85%2C.5%29'/%3E%3Ccircle cx='180' cy='232' r='.9' fill='rgba%28201%2C206%2C85%2C.5%29'/%3E%3Ccircle cx='44' cy='27' r='.7' fill='rgba%28255%2C255%2C255%2C0.41%29'/%3E%3Ccircle cx='9' cy='130' r='1.1' fill='rgba%28255%2C255%2C255%2C0.32%29'/%3E%3Ccircle cx='43' cy='113' r='1.1' fill='rgba%28255%2C255%2C255%2C0.39%29'/%3E%3C/svg%3E")}
.f-teal,.f-olive,.f-taupe,.f-white,.donate,.fbox.is-teal,.f-black,.night,.flat--night,.hx--spot,.hx--motes{background-size:260px 260px,auto;background-position:0 var(--sy),0 0}
.f-teal::after,.f-olive::after,.f-taupe::after,.f-black::after,.hx--spot::after{content:"";position:absolute;inset:0;background-image:inherit;background-size:400px 400px;background-position:0 calc(var(--sy) * .5),0 0;opacity:.6;pointer-events:none;border-radius:inherit;z-index:0}
.f-teal,.f-olive,.f-taupe,.f-black{position:relative}
.f-teal>*,.f-olive>*,.f-taupe>*,.f-black>*{position:relative;z-index:1}
/* The gap between normal type and the script: the script tucks in under the previous word's space */
.kw{margin-left:-.42em}
.kw-write,.kin-write{margin-left:-.92em}
.amp{margin:0 -.02em 0 -.06em}
/* Choices, redrawn from the mark: a radio is a soft flat that becomes a lit door when chosen; a checkbox is a soft flat that fills teal while an ink check draws on; hover lifts them */
.choice{align-items:center;gap:14px;font:400 18px/1.3 var(--font-body)}
.choice input{width:26px;height:30px;margin:0;border:2px solid var(--black,#0d0d0c);border-radius:5px;background:#fff;position:relative;overflow:hidden;transition:transform 320ms cubic-bezier(.34,1.4,.5,1),background-color 240ms,border-color 240ms,clip-path 320ms var(--easing-settle,cubic-bezier(.23,1,.32,1));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.1)}
.choice input[type=radio]{border-radius:5px}
.choice input::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff,#dfeaea 55%,var(--teal,#6E9C9C));opacity:0;transform:none;border-radius:0;width:auto;height:auto;transition:opacity 300ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.choice input[type=radio]::before{border-radius:0}
.choice input[type=radio]:checked{border-color:#0d0d0c;background:#0d0d0c;clip-path:var(--door-soft);border-radius:0;transform:scale(1.08)}
.choice input[type=radio]:checked::before{opacity:1;clip-path:inset(0 0 0 42%);background:linear-gradient(180deg,#fff,var(--teal,#6E9C9C) 70%)}
.choice input[type=checkbox]:checked{background:var(--teal,#6E9C9C);border-color:#0d0d0c;transform:scale(1.06)}
.choice input[type=checkbox]::after{content:"";position:absolute;left:5px;top:7px;width:12px;height:7px;border-left:2.5px solid #0d0d0c;border-bottom:2.5px solid #0d0d0c;transform:rotate(-45deg) scale(0);transform-origin:40% 60%;transition:transform 260ms cubic-bezier(.34,1.4,.5,1) 60ms}
.choice input[type=checkbox]:checked::after{transform:rotate(-45deg) scale(1)}
.choice input:hover{background:#fff;transform:translateY(-1px);box-shadow:0 4px 10px -4px rgba(0,0,0,.35)}
.choice input:checked:hover{transform:translateY(-1px) scale(1.08)}
.choice input:focus-visible{outline:2px solid #0d0d0c;outline-offset:3px}
.choice input:disabled{background:var(--gray,#E2E2E2);border-color:#767676;box-shadow:none;transform:none}
@media (prefers-reduced-motion:reduce){.choice input,.choice input::before,.choice input[type=checkbox]::after{transition:none}}
/* Script tucks closer still to the word before it; a script lead-in tucks the next word in too */
.kw{margin-left:-.56em}
.kw-write,.kin-write{margin-left:-1.06em}
.kw--lead{margin-right:-.22em}
/* The polished floor: anything that stands on the stage (the mark, a door, a photograph, the logo) can be reflected faintly below, as on a polished concert floor */
.reflect{-webkit-box-reflect:below 8px linear-gradient(transparent 58%,rgba(0,0,0,.28))}
.reflect--close{-webkit-box-reflect:below 2px linear-gradient(transparent 50%,rgba(0,0,0,.32))}
.reflect--soft{-webkit-box-reflect:below 10px linear-gradient(transparent 70%,rgba(0,0,0,.16))}

/* Program colours: Orchestra black, Choir teal, Youth olive, Production taupe. The small single-colour panels (badges, the concert date) carry the specks too */
.badge--production{background:var(--taupe,#C5BDA2);color:#0d0d0c}
.badge,.concert__date{background-image:var(--specks);background-size:130px 130px;background-position:0 var(--sy);animation:acha-sy 90s linear infinite}
.badge--orchestra,.concert__date{background-image:var(--specks-light)}
@media (prefers-reduced-motion:reduce){.badge,.concert__date{animation:none}}

/* The glow mark: the soft mark with a soft gradient light behind each panel (teal, olive, taupe), breathing slowly. The mark itself is untouched */
.gm-mark{position:relative;display:inline-block;width:min(420px,80%);aspect-ratio:434.15/204.69;isolation:isolate}
.gm-mark svg{position:relative;width:100%;height:100%;display:block;z-index:1}
.gm-mark i{position:absolute;top:-18%;bottom:-18%;border-radius:50%;filter:blur(26px);opacity:.85;z-index:0;animation:acha-glowb 7s ease-in-out infinite alternate}
.gm-mark i:nth-child(1){left:-10%;width:50%;background:radial-gradient(closest-side,rgba(110,156,156,.95),rgba(110,156,156,0))}
.gm-mark i:nth-child(2){left:27%;width:46%;background:radial-gradient(closest-side,rgba(201,206,85,.95),rgba(201,206,85,0));animation-delay:-2.3s}
.gm-mark i:nth-child(3){left:60%;width:50%;background:radial-gradient(closest-side,rgba(197,189,162,1),rgba(197,189,162,0));animation-delay:-4.6s}
@keyframes acha-glowb{from{transform:scale(.92) translateY(2%);opacity:.7}to{transform:scale(1.06) translateY(-2%);opacity:1}}
.gm-mark--night i{filter:blur(30px);opacity:.75}
.gm-mark--night i:nth-child(1){background:radial-gradient(closest-side,rgba(110,156,156,.9),rgba(110,156,156,0))}
.gm-mark--night i:nth-child(2){background:radial-gradient(closest-side,rgba(201,206,85,.8),rgba(201,206,85,0))}
.gm-mark--night i:nth-child(3){background:radial-gradient(closest-side,rgba(197,189,162,.85),rgba(197,189,162,0))}
@media (prefers-reduced-motion:reduce){.gm-mark i{animation:none}}
/* The settled gap (measured from the font: Brittany capitals start .05em in, and T, E and the swashes run up to .75em past their box): a script word sits .12em after the word before it, and a script lead-in leaves .12em before the next word */
.kw{margin-left:-.33em}
.kw-write,.kin-write{margin-left:-.83em}
.kw--lead{margin-right:.12em}
.kw--lead.kin-write{margin-right:-.38em}

/* Video players (2 November 2026): the door player and the stage player. Black and white at rest, colour while playing; the teal line is the time */
.vp{position:relative;isolation:isolate;background:#0d0d0c;overflow:hidden;color:#fff;font-family:var(--font-body)}
.vp video{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter 800ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.vp.is-playing video{filter:none}
.vp__play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:72px;height:72px;border:0;border-radius:50%;background:var(--teal,#6E9C9C);color:#0d0d0c;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.35);transition:transform var(--duration-fast,200ms) var(--easing-settle,cubic-bezier(.23,1,.32,1)),opacity var(--duration-fast,200ms)}
.vp__play svg{width:26px;height:26px;fill:currentColor;margin-left:3px}
.vp__play:hover{transform:scale(1.06)}
.vp.is-playing .vp__play{opacity:0;pointer-events:none}
.vp__bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:12px 14px;background:linear-gradient(transparent,rgba(0,0,0,.65));transition:opacity var(--duration-fast,200ms)}
.vp.is-playing:not(:hover):not(:focus-within) .vp__bar{opacity:0}
.vp__bar button{width:36px;height:36px;border:0;background:none;color:#fff;display:grid;place-items:center;cursor:pointer;border-radius:8px}
.vp__bar button svg{width:18px;height:18px;fill:currentColor}
.vp__bar button:focus-visible{outline:2px solid #fff}
.vp__time{font:700 12px/1 var(--font-body);letter-spacing:.08em;font-variant-numeric:tabular-nums;min-width:4.5em}
.vp__seek{flex:1;position:relative;height:28px;display:grid;align-items:center;cursor:pointer}
.vp__seek::before{content:"";height:2px;background:rgba(255,255,255,.35);border-radius:1px}
.vp__seek i{position:absolute;left:0;top:50%;height:2px;width:var(--p,0%);margin-top:-1px;background:var(--teal,#6E9C9C);border-radius:1px}
.vp__seek i::after{content:"";position:absolute;right:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--teal,#6E9C9C);box-shadow:0 0 0 2px #0d0d0c;transform:scale(0);transition:transform var(--duration-fast,200ms)}
.vp__seek:hover i::after,.vp:focus-within .vp__seek i::after{transform:none}
.vp__seek input{position:absolute;inset:0;width:100%;opacity:0;margin:0;cursor:pointer}
/* the door player: the film in the door, the floor lit by it */
.vp--door{width:min(300px,100%);aspect-ratio:89.28/165.04;clip-path:var(--door-soft);background:#111}
.vp--door .vp__bar{padding:10px 10px 12px}
.vp--door .vp__time{display:none}
.vp--door .vp__play{width:60px;height:60px}
.vp-stage{display:grid;justify-items:center;padding-bottom:36px}
.vp-stage .vp--door{-webkit-box-reflect:below 6px linear-gradient(transparent 60%,rgba(0,0,0,.28))}
/* the stage player: 16:9, the title on the film in the display pair, the teal line as the only colour */
.vp--stage{aspect-ratio:16/9;border-radius:var(--radius-card,16px)}
.vp__title{position:absolute;left:20px;top:18px;margin:0;font:300 26px/1.1 var(--font-heading);letter-spacing:-.02em;text-shadow:0 1px 10px rgba(0,0,0,.5);transition:opacity var(--duration-fast,200ms)}
.vp__title b{font-weight:700}
.vp.is-playing:not(:hover):not(:focus-within) .vp__title{opacity:0}
.vp__chapters{position:absolute;right:16px;top:16px;display:flex;gap:6px}
.vp__chapters button{min-width:0;height:28px;padding:0 10px;font:700 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;background:rgba(0,0,0,.45);color:#fff;border:0;border-radius:6px;cursor:pointer}
.vp__chapters button[aria-current]{background:var(--teal,#6E9C9C);color:#0d0d0c}
@media (prefers-reduced-motion:reduce){.vp video,.vp__play,.vp__seek i::after{transition:none}}

/* Script in display, settled from the font metrics (2 November 2026): Brittany's capitals stand a full em tall and its swashes hang up to .6em under the line, so a display script word is set at .86em (its capital then stands a fifth taller than the Regrade capital beside it) and lifted .1em so the word sits level with the line instead of hanging under it. A script lead-in leaves one word space before the next word, no more */
.d .kw,.d .kw--lead,.hx .kw,.donate--night h3 .kw,.p-display .kw,h1 .kw,h2 .kw,h3 .kw{font-size:.86em;line-height:1;position:relative;top:-.1em}
.prose h2 .kw,.prose h3 .kw{font-size:.95em}
.kw--lead{margin-right:-.3em}
.kw--lead.kin-write{margin-right:-.5em}

/* The glow mark, third cut (2 November 2026, after Apple's edge glow and Google's soft gradients): one light behind EACH door, in that door's own shape, pushed out on every side, with a smooth turning conic sweep of the three colours (each door leaning on its own: teal left, olive centre, taupe right), blurred wide so there is no edge and no banding, plus a thin brighter rim close to the door so the light reads as coming from behind it. Each light turns and breathes at its own pace. .gm-door is the single door with the light all the way round */
@property --gm-a{syntax:"<angle>";inherits:true;initial-value:150deg}
.gm-mark i,.gm-mark--night i{background:none;border-radius:0;top:auto;bottom:auto}
.gm-mark i{position:absolute;z-index:0;filter:blur(12px);transform-origin:50% 50%;animation:acha-gmb 8s ease-in-out infinite alternate}
.gm-mark i::before,.gm-mark i::after{content:"";position:absolute;inset:0;border-radius:14%/10%;background:conic-gradient(from var(--gm-a) at 50% 50%,var(--c1) 0,var(--c2) 28%,var(--c3) 50%,var(--c1) 64%,var(--c2) 82%,var(--c1) 100%);animation:acha-gmturn 26s linear infinite}
.gm-mark i::before{filter:blur(16px);opacity:.8}
.gm-mark i::after{inset:9% 15%;opacity:.5;animation-duration:34s;animation-direction:reverse}
.gm-mark i:nth-child(1){left:-9%;top:-10%;width:49.8%;height:120%;--c1:#6E9C9C;--c2:#C9CE55;--c3:#C5BDA2;--gm-a:150deg;animation-duration:7.5s}
.gm-mark i:nth-child(2){left:30%;top:-14%;width:40%;height:128%;--c1:#C9CE55;--c2:#C5BDA2;--c3:#6E9C9C;--gm-a:35deg;animation-duration:9.5s;animation-delay:-3s}
.gm-mark i:nth-child(2)::before,.gm-mark i:nth-child(2)::after{clip-path:var(--door-soft);border-radius:0}
.gm-mark i:nth-child(2)::before{animation-duration:30s;animation-direction:reverse}
.gm-mark i:nth-child(2)::after{animation-direction:normal;inset:9% 16%}
.gm-mark i:nth-child(3){left:59.2%;top:-10%;width:49.8%;height:120%;--c1:#C5BDA2;--c2:#6E9C9C;--c3:#C9CE55;--gm-a:200deg;animation-duration:11s;animation-delay:-6s}
.gm-mark i:nth-child(3)::before{animation-duration:22s}
.gm-door i:nth-child(1){left:-30%;top:-14%;width:160%;height:128%;--c1:#6E9C9C;--c2:#C9CE55;--c3:#C5BDA2;--gm-a:200deg}
.gm-door i:nth-child(1)::before,.gm-door i:nth-child(1)::after{clip-path:var(--door-soft);border-radius:0}
.gm-door i:nth-child(1)::before{filter:blur(14px);opacity:.85}
.gm-door i:nth-child(1)::after{inset:9% 16%;opacity:.55}
.gm-mark--night i{filter:blur(16px)}
.gm-mark--night i::before{opacity:.72}
.gm-mark--night i::after{opacity:.5}
.gm-mark--teal i:nth-child(1){--c1:#4a7575;--c2:#8fb4b4}
@keyframes acha-gmb{from{transform:scale(1,1);opacity:.78}to{transform:scale(1.04,1.03);opacity:1}}
@keyframes acha-gmturn{to{--gm-a:calc(var(--gm-a) + 360deg)}}
@media (prefers-reduced-motion:reduce){.gm-mark i,.gm-mark i::before,.gm-mark i::after{animation:none}}
/* Display gaps, with the specificity to win over the older `.d .kw{margin:0 .04em}`: a script word's box is pulled .1em under the word before it (the capital's ink then sits a short word space after it), a lead-in leaves exactly one word space, and the write-on's wide padding is cancelled on every side */
.d .kw,.hx .kw,.donate--night h3 .kw,.p-display .kw,h1 .kw,h2 .kw,h3 .kw{margin:-.1em -.3em -.1em -.3em}
.d .kin-write,.d .kw-write,.hx .kin-write,.hx .kw-write,h1 .kin-write,h2 .kin-write,h3 .kin-write{margin:-.6em -.5em -.55em -.8em}
.d .kw--lead,.hx .kw--lead,h1 .kw--lead,h2 .kw--lead,h3 .kw--lead{margin-left:0;margin-right:-.3em}
.d .kw--lead.kin-write,.hx .kw--lead.kin-write{margin-left:-.7em;margin-right:-.5em}

/* ============ 2 November 2026, afternoon ============ */

/* Teal in tones (tokens teal-100 to teal-900): mist and pale for grounds, light for dividers and the second colour of a gradient, dusty for fills, text teal for words, deep for active states and night bands, ink and night for dark grounds. Every tone keeps black text except teal-700 and darker, which take white */
.f-teal-mist{background:var(--teal-100,#eef3f3);color:var(--black)}
.f-teal-pale{background:var(--teal-200,#d8e4e4);color:var(--black)}
.f-teal-light{background:var(--teal-300,#b3cccc);color:var(--black)}
.f-teal-soft{background:var(--teal-400,#8fb4b4);color:var(--black)}
.f-teal-deep{background:var(--teal-700,#3a5e5e);color:var(--white)}
.f-teal-ink{background:var(--teal-800,#284444);color:var(--white)}
.f-teal-night{background:var(--teal-900,#15292a);color:var(--white)}
.f-teal-mist,.f-teal-pale,.f-teal-light,.f-teal-soft,.f-teal-deep,.f-teal-ink,.f-teal-night{position:relative;background-image:var(--specks),var(--grain);background-size:260px 260px,auto;background-position:0 var(--sy),0 0}
.f-teal-deep,.f-teal-ink,.f-teal-night{background-image:var(--specks-light),var(--grain-light)}
.f-teal-mist>*,.f-teal-pale>*,.f-teal-light>*,.f-teal-soft>*,.f-teal-deep>*,.f-teal-ink>*,.f-teal-night>*{position:relative;z-index:1}
.t-teal{color:var(--teal-600,#4a7575)}
a.t-teal:hover{color:var(--teal-700,#3a5e5e)}
.btn--primary:active,.btn--primary.is-active{background:var(--teal-700,#3a5e5e);color:#fff;border-color:var(--teal-700,#3a5e5e)}
.row-hover:hover,tr.row-hover:hover>td{background:var(--teal-200,#d8e4e4)}
.rule-teal{border:0;border-top:1px solid var(--teal-300,#b3cccc);margin:0}
.night--teal{background:var(--teal-900,#15292a)}
.badge--choir-deep{background:var(--teal-700,#3a5e5e);color:#fff}
.gm-mark--teal i:nth-child(1){--c1:#4a7575;--c2:#8fb4b4}

/* Spacing: one scale, every gap on it. 4 8 12 16 24 32 48 64 96 128. Inside a box: 24 (32 when the box is wider than 480px). Between boxes: 24. Between a label and its heading: 12. Between a heading and its first line: 16. Between paragraphs: one line (1em). Between a block and the next button row: 24. Between buttons: 12. Between an icon and its word: 8. Between list rows: 8. A band's inside: 64 top and bottom (48 on a phone). Between sections: 96 (64 on a phone). The utilities below carry these so nothing is ever typed by hand */
:root{--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;--box-pad:var(--s-5);--band-pad:var(--s-8);--section-gap:var(--s-9)}
@media (max-width:640px){:root{--band-pad:var(--s-7);--section-gap:var(--s-8)}}
.stack>*+*{margin-top:var(--s-4)}.stack-2>*+*{margin-top:var(--s-2)}.stack-3>*+*{margin-top:var(--s-3)}.stack-5>*+*{margin-top:var(--s-5)}.stack-6>*+*{margin-top:var(--s-6)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.cluster--2{gap:var(--s-2)}.cluster--5{gap:var(--s-5)}
.sec{padding-block:var(--section-gap)}
.band{padding-block:var(--band-pad)}
.box{padding:var(--box-pad)}
@container (min-width:480px){.box{padding:var(--s-6)}}
.eyebrow{margin:0 0 var(--s-3)}
.d+.p-lead,.d+p,h1+p,h2+p,h3+p,h4+p{margin-top:var(--s-4)}
.p-lead+.cluster,p+.cluster,.d+.cluster,.prose+.cluster{margin-top:var(--s-5)}
.btn+.btn{margin-left:var(--s-3)}
.cluster>.btn+.btn{margin-left:0}
.ii+span,.ink+span,span+.ii,span+.ink{margin-left:var(--s-2)}
.card>*+*{margin-top:var(--s-3)}
.grid-cards{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.measure{max-width:34em}.measure--lead{max-width:30em}.measure--wide{max-width:42em}

/* Living photos: no photograph is ever completely still. .live on the frame (a .ph, a door, a figure) gives the image inside a slow zoom over 36 seconds; the other kinds drift, breathe or sway. .live--scroll ties the zoom to the scroll instead. Put .living on a page or section and every .ph inside it lives (the first kind), unless it says .still. Hover-to-colour and the behind-glass dimming carry on unchanged, because they work on filter and this works on transform. Reduced motion stills everything */
.live>img,.live>video,.living .ph:not(.still)>img,.living .ph:not(.still)>video{will-change:transform;animation:acha-live-zoom 36s ease-in-out infinite alternate;transform-origin:var(--live-origin,50% 50%)}
.live--drift>img,.live--drift>video{animation-name:acha-live-drift;animation-duration:40s}
.live--breathe>img,.live--breathe>video{animation-name:acha-live-breathe;animation-duration:14s}
.live--sway>img,.live--sway>video{animation-name:acha-live-sway;animation-duration:52s;animation-direction:normal}
.live--slow>img,.live--slow>video{animation-duration:70s}
.live--scroll>img{animation:acha-live-scroll linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
.live.still>img,.live.still>video{animation:none}
@keyframes acha-live-zoom{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes acha-live-drift{from{transform:scale(1.09) translate(-1.6%,.6%)}to{transform:scale(1.09) translate(1.6%,-.8%)}}
@keyframes acha-live-breathe{from{transform:scale(1.015)}to{transform:scale(1.045)}}
@keyframes acha-live-sway{0%{transform:scale(1.1) translate(-1.8%,1%)}50%{transform:scale(1.14) translate(.8%,-1%)}100%{transform:scale(1.1) translate(1.8%,1.2%)}}
@keyframes acha-live-scroll{from{transform:scale(1.14) translateY(3%)}to{transform:scale(1) translateY(-3%)}}
@media (prefers-reduced-motion:reduce){.live>img,.live>video,.living .ph>img,.living .ph>video,.live--scroll>img{animation:none}}

/* Buttons with a little liquid glass: a glass sheen over the top half, a hairline rim of light, and on hover a soft specular sweep across the face. The sheen is light on dark fills and a faint teal breath on light ones. Still no texture, and the rising fill underneath stays */
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background:linear-gradient(115deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.26) 46%,rgba(255,255,255,0) 58%) no-repeat,linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.08) 46%,rgba(255,255,255,0) 54%,rgba(255,255,255,.06));background-size:240% 100%,100% 100%;background-position:-140% 0,0 0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background-position 900ms var(--easing-sweep,cubic-bezier(.32,.72,0,1))}
.btn:hover::after,.btn:focus-visible::after{background-position:140% 0,0 0}
.btn--secondary::after,.btn--line::after,.btn--white::after{background:linear-gradient(115deg,rgba(110,156,156,0) 32%,rgba(110,156,156,.16) 46%,rgba(110,156,156,0) 58%) no-repeat,linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 52%);background-size:240% 100%,100% 100%;background-position:-140% 0,0 0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.btn--line-w::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.btn--glass{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.btn--glass:hover{background:rgba(255,255,255,.24)}
.btn--glass.on-light{background:rgba(255,255,255,.5);border-color:rgba(0,0,0,.14);color:var(--black)}
.btn>*{position:relative;z-index:3}
@media (prefers-reduced-motion:reduce){.btn::after{transition:none}}

/* Quote boxes: a testimonial sits in a box with the specks, the quote in Regrade Light with one script word, the opening quotation mark drawn large in the box's second colour. A reason box names a need in Helvetica, answers it in one display line and one sentence, and ends on a button */
.quote{position:relative;border-radius:var(--radius-card,16px);padding:var(--s-6);display:grid;gap:var(--s-4);align-content:start;overflow:hidden}
.quote__mark{font:300 120px/0.6 var(--font-heading);height:.42em;color:var(--q-mark,var(--teal-300,#b3cccc));user-select:none}
.quote__text{margin:0;font:300 clamp(22px,2.2vw,30px)/1.25 var(--font-heading);letter-spacing:-.012em;text-wrap:pretty}
.quote__text .hv{font-weight:700}
.quote__who{margin:0;font:700 15px/1.4 var(--font-body)}
.quote__who small{display:block;font-weight:300;font-size:14px;color:inherit;opacity:.72}
.quote--night{--q-mark:var(--teal-600,#4a7575)}
.quote--teal{--q-mark:rgba(0,0,0,.28)}
.quote--pull{padding:var(--s-8) var(--s-6);text-align:center;justify-items:center}
.quote--pull .quote__text{font-size:clamp(28px,3.4vw,44px);max-width:22em}
.quote--photo{min-height:360px;align-content:end}
.reason{position:relative;border-radius:var(--radius-card,16px);padding:var(--s-6);display:grid;gap:var(--s-3);align-content:start;overflow:hidden;container-type:inline-size}
.reason__need{margin:0;font:300 16px/1.5 var(--font-body);opacity:.78}
.reason__line{margin:0;font:300 clamp(28px,3vw,40px)/1.08 var(--font-heading);letter-spacing:-.02em}
.reason__line .hv{font-weight:700}
.reason__body{margin:0;font:300 17px/1.55 var(--font-body);max-width:28em}
.reason .btn{justify-self:start;margin-top:var(--s-2)}
.reason__i{position:absolute;right:var(--s-5);top:var(--s-5);width:44px;height:44px;opacity:.9}

/* Social and app tiles: the door shape (the mark's soft corners), ink or teal or glass, the platform's glyph in white, the light rising under the door on hover, and the press sinks. The glyph is the platform's own, unaltered, from its brand resources; the tile, colour, hover and motion are ours */
.so{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.so__t{position:relative;display:inline-grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--black);color:#fff;isolation:isolate;overflow:hidden;clip-path:var(--rect-soft);transition:transform var(--duration-fast,200ms) var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.so__t svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:2}
.so__t::before{content:"";position:absolute;inset:0;background:var(--so-rise,var(--teal,#6E9C9C));transform:translateY(100%);transition:transform 360ms var(--easing-settle,cubic-bezier(.23,1,.32,1));z-index:1}
.so__t::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);z-index:2;pointer-events:none}
.so__t:hover::before,.so__t:focus-visible::before{transform:none}
.so__t:hover,.so__t:focus-visible{color:var(--black)}
.so__t:active{transform:scale(.96)}
.so__t:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.so--teal .so__t{background:var(--teal,#6E9C9C);color:var(--black);--so-rise:var(--black)}
.so--teal .so__t:hover{color:#fff}
.so--line .so__t{background:transparent;color:var(--black);box-shadow:inset 0 0 0 2px var(--black)}
.so--line .so__t:hover{color:#fff;--so-rise:var(--black)}
.so--night .so__t{background:#fff;color:var(--black);--so-rise:var(--teal)}
.so--glass .so__t{background:rgba(255,255,255,.16);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.so--lg .so__t{width:72px;height:72px;border-radius:16px}.so--lg .so__t svg{width:32px;height:32px}
.so--sm .so__t{width:40px;height:40px;border-radius:10px}.so--sm .so__t svg{width:18px;height:18px}
.so--door .so__t:nth-child(3n+2){clip-path:var(--door-soft)}
.so__l{display:grid;gap:var(--s-2);justify-items:center;font:300 13px/1.3 var(--font-body)}

/* Collages: door-shaped photo tiles (soft rect, and the leaning door, mirrored on the right) laid into figures: a cross, a ring, an arch, a rising stair, a window of nine. Black and white, colour on hover, each tile lives a little */
.col{display:grid;gap:10px;--cw:92px}
.col__t{position:relative;overflow:hidden;background:#111;clip-path:var(--rect-soft)}
.col__t>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter 700ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.col__t:hover>img{filter:none}
.col__t.lean{clip-path:var(--door-soft)}
.col__t.lean-r{clip-path:var(--door-soft);transform:scaleX(-1)}
.col__t.lean-r>img{transform:scaleX(-1)}
.col__t.ink{background:var(--black)}.col__t.teal{background:var(--teal)}.col__t.taupe{background:var(--taupe)}.col__t.olive{background:var(--olive)}
.col--cross{grid-template-columns:repeat(3,var(--cw));grid-auto-rows:calc(var(--cw)*1.36);justify-content:center}
.col--cross .col__t:nth-child(1){grid-area:1/2}.col--cross .col__t:nth-child(2){grid-area:2/1}.col--cross .col__t:nth-child(3){grid-area:2/2}.col--cross .col__t:nth-child(4){grid-area:2/3}.col--cross .col__t:nth-child(5){grid-area:3/2}.col--cross .col__t:nth-child(6){grid-area:4/2}
.col--window{grid-template-columns:repeat(3,var(--cw));grid-auto-rows:calc(var(--cw)*1.36);justify-content:center}
.col--arch{grid-template-columns:repeat(5,var(--cw));grid-template-rows:repeat(3,calc(var(--cw)*.95));justify-content:center;align-items:start}
.col--arch .col__t{height:calc(var(--cw)*1.36)}
.col--arch .col__t:nth-child(1){grid-area:2/1}.col--arch .col__t:nth-child(2){grid-area:1/2;margin-top:calc(var(--cw)*.3)}.col--arch .col__t:nth-child(3){grid-area:1/3}.col--arch .col__t:nth-child(4){grid-area:1/4;margin-top:calc(var(--cw)*.3)}.col--arch .col__t:nth-child(5){grid-area:2/5}.col--arch .col__t:nth-child(6){grid-area:2/3;margin-top:calc(var(--cw)*.5)}
.col--stair{grid-template-columns:repeat(5,var(--cw));grid-template-rows:repeat(6,calc(var(--cw)*.68));justify-content:center}
.col--stair .col__t{grid-row:span 2}
.col--stair .col__t:nth-child(1){grid-area:5/1/span 2}.col--stair .col__t:nth-child(2){grid-area:4/2/span 2}.col--stair .col__t:nth-child(3){grid-area:3/3/span 2}.col--stair .col__t:nth-child(4){grid-area:2/4/span 2}.col--stair .col__t:nth-child(5){grid-area:1/5/span 2}
.col--ring{position:relative;display:block;width:calc(var(--cw)*3.6);height:calc(var(--cw)*3.6);margin:0 auto}
.col--ring .col__t{position:absolute;left:50%;top:50%;width:var(--cw);height:calc(var(--cw)*1.36);margin:calc(var(--cw)*-.68) 0 0 calc(var(--cw)*-.5);transform:rotate(var(--a)) translateY(calc(var(--cw)*-1.25))}
.col--ring .col__t>img{transform:rotate(calc(var(--a)*-1)) scale(1.5)}
.col--ring .col__c{position:absolute;inset:30%;border-radius:50%;background:radial-gradient(closest-side,rgba(201,206,85,.75),rgba(201,206,85,0));filter:blur(8px);animation:acha-glowb 7s ease-in-out infinite alternate}
.col--ring.turn{animation:acha-turn 90s linear infinite}
.col--ring.turn .col__t>img{animation:acha-turn-back 90s linear infinite}
@keyframes acha-turn{to{transform:rotate(360deg)}}
@keyframes acha-turn-back{from{transform:rotate(calc(var(--a)*-1)) scale(1.5)}to{transform:rotate(calc(var(--a)*-1 - 360deg)) scale(1.5)}}
@media (prefers-reduced-motion:reduce){.col--ring.turn,.col--ring.turn .col__t>img,.col--ring .col__c{animation:none}}

/* Installations: set pieces from the convictions in my-aesthetic (empty space is full; light needs darkness; every threshold is a choice; the face withheld, the hand offered; the many and the one; the veil and the unveiling; words as material). Each is one scene, mostly dark, one slow movement */
.ins{position:relative;overflow:hidden;border-radius:var(--radius-card,16px);background:var(--night-house,#0a0a0a);color:#fff;isolation:isolate;min-height:360px;font-family:var(--font-body)}
.ins__cap{position:absolute;left:var(--s-5);bottom:var(--s-5);margin:0;font:300 14px/1.4 var(--font-body);color:rgba(255,255,255,.72);z-index:5}
.ins__cap b{color:#fff;display:block;font-weight:700}
/* the oculus: a ring of light in the dark, breathing; the empty centre is the point */
.ins--oculus .ring{position:absolute;left:50%;top:50%;width:min(62%,300px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 30px 6px rgba(201,206,85,.35),0 0 90px 30px rgba(110,156,156,.25),inset 0 0 40px 10px rgba(255,255,255,.08);animation:acha-oculus 9s ease-in-out infinite alternate}
.ins--oculus .ring::after{content:"";position:absolute;inset:-40%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.08),transparent 70%)}
@keyframes acha-oculus{from{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 24px 4px rgba(201,206,85,.25),0 0 70px 20px rgba(110,156,156,.18),inset 0 0 40px 10px rgba(255,255,255,.06)}to{box-shadow:0 0 0 2px #fff,0 0 40px 10px rgba(201,206,85,.45),0 0 120px 40px rgba(110,156,156,.3),inset 0 0 60px 16px rgba(255,255,255,.12)}}
/* hanging verticals: thin lines from above, each a different length, swaying a hair */
.ins--verticals .v{position:absolute;top:0;width:1px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.15));transform-origin:top;animation:acha-vsway 7s ease-in-out infinite alternate}
.ins--verticals .v::after{content:"";position:absolute;left:50%;bottom:-6px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--vc,#C9CE55);box-shadow:0 0 12px 2px var(--vc,#C9CE55)}
@keyframes acha-vsway{from{transform:rotate(-.8deg)}to{transform:rotate(.8deg)}}
/* the one chair: a single pool of light on the floor, the rest dark; what is in the pool is small */
.ins--pool .pool{position:absolute;left:27%;right:27%;bottom:14%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,.1) 60%,transparent);filter:blur(6px);animation:acha-poolb 8s ease-in-out infinite alternate}
@keyframes acha-poolb{from{opacity:.7}to{opacity:1}}
.ins--pool .beam{position:absolute;left:50%;top:0;width:22%;height:70%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02));clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(2px)}
.ins--pool .chair{position:absolute;left:50%;bottom:22%;width:36px;height:52px;transform:translateX(-50%);border:2px solid rgba(255,255,255,.85);border-bottom:0;border-radius:4px 4px 0 0;box-shadow:0 60px 20px -14px rgba(0,0,0,.6)}
.ins--pool .chair::before{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:rgba(255,255,255,.85)}
.ins--pool .chair::after{content:"";position:absolute;left:-2px;top:52%;width:2px;height:48%;background:rgba(255,255,255,.85);box-shadow:36px 0 0 rgba(255,255,255,.85)}
/* the curtain: a veil that lifts a little when you hold it, and what is behind comes forward */
.ins--veil img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.9)}
.ins--veil .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.96) 0 8%,rgba(10,10,10,.8) 9%,rgba(10,10,10,.96) 18%,rgba(10,10,10,.82) 19%,rgba(10,10,10,.96) 30%,rgba(10,10,10,.8) 31%,rgba(10,10,10,.96) 44%,rgba(10,10,10,.84) 45%,rgba(10,10,10,.96) 58%,rgba(10,10,10,.8) 59%,rgba(10,10,10,.96) 72%,rgba(10,10,10,.84) 73%,rgba(10,10,10,.96) 86%,rgba(10,10,10,.8) 87%,rgba(10,10,10,.96));transform-origin:top;transition:transform 1400ms var(--easing-settle,cubic-bezier(.23,1,.32,1)),opacity 1400ms}
.ins--veil:hover .veil,.ins--veil:focus-within .veil,.ins--veil.is-open .veil{transform:translateY(-82%);opacity:.9}
.ins--veil .hem{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.5))}
/* the many and the one: a wall of small marks; one of them is lit and the light wanders */
.ins--many .wall{position:absolute;inset:var(--s-6);display:grid;grid-template-columns:repeat(14,1fr);gap:6px;align-content:center}
.ins--many .wall i{aspect-ratio:138/188;background:rgba(255,255,255,.14);clip-path:var(--rect-soft);transition:background 900ms}
.ins--many .wall i.lit{background:#fff;box-shadow:0 0 18px 4px rgba(255,255,255,.55),0 0 48px 10px rgba(201,206,85,.35)}
/* the ladder, ascent: rungs rising on a diagonal, each a touch brighter, the top one lit */
.ins--ascent .rung{position:absolute;height:2px;width:18%;background:rgba(255,255,255,var(--o,.3));border-radius:1px}
.ins--ascent .rung.top{background:#fff;box-shadow:0 0 14px 3px rgba(255,255,255,.5),0 0 40px 8px rgba(201,206,85,.3);animation:acha-glowb 6s ease-in-out infinite alternate}
/* words as material: one word, very large, cut off by the frame, a light moving over its surface */
.ins--word .w{position:absolute;left:-2%;bottom:-18%;margin:0;font:700 clamp(160px,34vw,320px)/1 var(--font-heading);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.7);white-space:nowrap}
.ins--word .w b{position:absolute;inset:0;color:#fff;-webkit-text-stroke:0;-webkit-mask-image:radial-gradient(40% 90% at var(--mx,30%) 55%,#000 0 25%,transparent 100%);mask-image:radial-gradient(40% 90% at var(--mx,30%) 55%,#000 0 25%,transparent 100%);animation:acha-wordlight 14s ease-in-out infinite alternate}
@keyframes acha-wordlight{from{--mx:12%}to{--mx:88%}}
@media (prefers-reduced-motion:reduce){.ins--oculus .ring,.ins--verticals .v,.ins--pool .pool,.ins--ascent .rung.top,.ins--word .w b{animation:none}.ins--veil .veil{transition:none}}
/* icon classes for the mask icons, so an icon is one class: <span class="ii ii-heart"> */
.ii-check{--ic:var(--ii-check)}.ii-calendar{--ic:var(--ii-calendar)}.ii-chevron-right{--ic:var(--ii-chevron-right)}.ii-close{--ic:var(--ii-close)}.ii-email{--ic:var(--ii-email)}.ii-heart{--ic:var(--ii-heart)}.ii-location-pin{--ic:var(--ii-location-pin)}.ii-ticket{--ic:var(--ii-ticket)}
/* script inside a quote or a reason line sits like display script: a touch smaller than the words beside it and lifted, with leading that clears its swashes */
.quote__text{line-height:1.32}
.quote__text .kw,.reason__line .kw{font-size:.95em;position:relative;top:-.05em;margin:-.1em -.3em -.1em -.26em}
.reason__line{line-height:1.12}
.ins--word .ins__cap{left:var(--s-4);bottom:var(--s-4);padding:10px 12px;border-radius:10px;background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* .flow: the spacing table applied to running page content, so headings, paragraphs, lists, buttons and dividers land on the scale without any hand-typed margins */
.flow>*{margin-block:0}
.flow>*+*{margin-top:var(--s-4)}
.flow>h1{margin-top:var(--s-7)}.flow>h1+*{margin-top:var(--s-4)}
.flow>h2{margin-top:var(--s-7)}.flow>p+h2{margin-top:var(--s-6)}.flow>h2+*{margin-top:var(--s-4)}
.flow>h3{margin-top:var(--s-6)}.flow>h3+*{margin-top:var(--s-3)}
.flow>h4{margin-top:var(--s-5)}.flow>h4+*{margin-top:var(--s-2)}
.flow>.eyebrow+*{margin-top:var(--s-3)}
.flow>p+p{margin-top:1em}
.flow>ul,.flow>ol{margin-top:var(--s-4)}.flow>ul+*,.flow>ol+*{margin-top:var(--s-4)}
.flow>.cluster,.flow>.btn{margin-top:var(--s-5)}
.flow>hr,.flow>.divider{margin-block:var(--s-6)}
.flow>.card+.card,.flow>.quote+.quote{margin-top:var(--s-5)}
.flow>*:first-child{margin-top:0}

/* Particles move (2 November 2026). The specks on every single-colour surface drift up and to the left, a tile every 42 seconds (about 9px a second, under the 18 the brief allows), with a second, finer layer behind them drifting at half the pace and breathing, so the surface reads as dust in still air rather than a printed pattern. Reduced motion holds them */
@property --sx{syntax:"<length>";inherits:false;initial-value:0px}
.f-teal,.f-olive,.f-taupe,.f-white,.donate,.fbox.is-teal,.f-black,.night,.flat--night,.hx--spot,.hx--motes,.f-grad,.gm-drift,.gm-turn,.gm-breathe,.gm-bands,.gm-pan,.gm-sand,.f-teal-mist,.f-teal-pale,.f-teal-light,.f-teal-soft,.f-teal-deep,.f-teal-ink,.f-teal-night{background-size:260px 260px,auto,100% 100%;background-position:var(--sx) var(--sy),0 0,0 0;animation:acha-specks 42s linear infinite}
.gm-drift,.gm-pan{background-size:260px 260px,auto,300% 100%}
.gm-turn{animation:acha-specks 42s linear infinite,acha-gturn 16s ease-in-out infinite alternate}
.gm-breathe{animation:acha-specks 42s linear infinite,acha-gbreathe 9s ease-in-out infinite alternate}
.gm-sand{animation:acha-specks 42s linear infinite,acha-gturn 20s ease-in-out infinite alternate}
.f-teal::after,.f-olive::after,.f-taupe::after,.f-black::after,.hx--spot::after,.f-teal-mist::after,.f-teal-pale::after,.f-teal-light::after,.f-teal-soft::after,.f-teal-deep::after,.f-teal-ink::after,.f-teal-night::after,.night::after,.donate::after{content:"";position:absolute;inset:0;background-image:inherit;background-size:130px 130px,0 0,0 0;background-position:calc(var(--sx) * .5) calc(var(--sy) * .5),0 0,0 0;opacity:.45;pointer-events:none;border-radius:inherit;z-index:0;animation:acha-twinkle 7s ease-in-out infinite alternate}
.badge,.concert__date{background-size:130px 130px;background-position:calc(var(--sx) * .5) calc(var(--sy) * .5);animation:acha-specks 42s linear infinite}
@keyframes acha-specks{to{--sy:-260px;--sx:-260px}}
@keyframes acha-twinkle{from{opacity:.3}to{opacity:.6}}
/* the surfaces that only had grain: now they carry the moving specks too */
.announce,.toast,.pager a[aria-current],.ticket__stub,.stepper .is-now i,.alert--warn,.alert--info,.night--teal,.code,.so__t,.ins,.vp,.modal{background-image:var(--specks),var(--grain);background-size:130px 130px,auto;background-position:calc(var(--sx) * .5) calc(var(--sy) * .5),0 0;animation:acha-specks 42s linear infinite}
.announce,.toast,.pager a[aria-current],.night--teal,.code,.so__t,.ins,.vp{background-image:var(--specks-light),var(--grain-light)}
.modal{background-image:var(--specks)}
.so--teal .so__t,.so--line .so__t,.so--night .so__t,.ticket__stub,.stepper .is-now i,.alert--warn,.alert--info{background-image:var(--specks),var(--grain)}
.so--line .so__t,.so--glass .so__t{background-image:none}
.stepper .is-now i{background-image:var(--specks),var(--grain)}
@media (prefers-reduced-motion:reduce){.f-teal,.f-olive,.f-taupe,.f-white,.donate,.fbox.is-teal,.f-black,.night,.flat--night,.hx--spot,.hx--motes,.f-grad,.gm-drift,.gm-turn,.gm-breathe,.gm-bands,.gm-pan,.gm-sand,[class*="f-teal-"],.badge,.concert__date,.announce,.toast,.pager a[aria-current],.ticket__stub,.stepper .is-now i,.alert--warn,.alert--info,.night--teal,.code,.so__t,.ins,.vp,.modal{animation:none}.f-teal::after,.f-olive::after,.f-taupe::after,.f-black::after,.night::after,.donate::after,[class*="f-teal-"]::after{animation:none}}

/* Canvas particle scenes (a selection of the kit's twelve, the tasteful seven): .pf[data-pf="motes|pollen|embers|fireflies|snow|constellation|breath"], day or night (.pf--night). Under 120 particles, alpha .08 to .45, under 18px a second, no bursts; one scene per page, on a hero or the night; the CSS specks do the rest of the site. The script is web/particles/acha-particles.js in the repo (inline on the Particles card). Reduced motion draws one settled frame; offscreen and hidden tabs pause */
.pf{position:relative;overflow:hidden;background:var(--offwhite,#F7F6F3);color:var(--black)}
.pf canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pf>*:not(canvas){position:relative;z-index:1}
.pf--night{background:var(--night-house,#0a0a0a);color:#fff}

/* Buttons, refined (2 November 2026, "they look cheap"): no gloss, no bevel lines, no heavy drop. A precise 1.5px edge, a quiet shadow that only deepens on hover, a soft lift, the light rising under the door on hover kept, and the press sinks a touch. Helvetica Bold 16, a hair of tracking, 50px tall, 28px of side room. The glass is a whisper: one hairline of light along the top edge inside dark fills, nothing else */
.btn,.btn--sm{font:700 16px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.006em;min-height:50px;padding:13px 28px;border-width:1.5px;border-radius:12px;gap:.55em}
.btn--sm{min-height:42px;padding:9px 18px;font-size:14.5px;border-radius:10px}
.btn,.btn:hover,.btn.is-hover,.btn:active,.btn--teal,.btn--secondary,.btn--primary,.btn--dark{box-shadow:0 1px 1.5px rgba(13,13,12,.10),0 4px 12px -6px rgba(13,13,12,.22)}
.btn--primary,.btn--dark{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 1.5px rgba(13,13,12,.14),0 6px 16px -8px rgba(13,13,12,.35)}
.btn:hover,.btn.is-hover{transform:translateY(-1px);box-shadow:0 2px 3px rgba(13,13,12,.12),0 10px 22px -10px rgba(13,13,12,.32)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:0 1px 1px rgba(13,13,12,.12)}
.btn--line,.btn--ghost,.btn--line-w,.btn--text,.btn:disabled,.btn[aria-disabled="true"]{box-shadow:none}
.btn--line:hover,.btn--line-w:hover,.btn--ghost:hover{box-shadow:none}
.btn::after{display:none}
.btn--primary:not(.btn--ring),.btn--dark:not(.btn--ring){background-image:none}
.btn--glass{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 14px -8px rgba(0,0,0,.4)}
.btn--glass:hover{background:rgba(255,255,255,.2)}
.btn--teal{border-color:var(--teal,#6E9C9C)}
.btn--secondary{border-color:var(--black,#0d0d0c)}
.btn .al{opacity:.75}

/* Photo cards that scroll through (2 November 2026, after the card carousels and parallax rows in the router's UI libraries, redrawn for AChA): .pc-rail is a snap rail of tall door cards you drag or scroll with the arrows; .pc-rows are three rows of cards that slide against each other as the page scrolls; .pc-stack is a stack that brings the next card forward as you scroll; .pc-cols are columns that scroll at different speeds. Black and white, colour on hover, captions in Helvetica, one line of Regrade for the title */
.pc-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.pc-rail::-webkit-scrollbar{display:none}
.pc-card{position:relative;flex:0 0 auto;width:min(260px,70vw);aspect-ratio:3/4;scroll-snap-align:start;overflow:hidden;border-radius:18px;background:#111;color:#fff;isolation:isolate;transition:transform 420ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.pc-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter 800ms var(--easing-settle,cubic-bezier(.23,1,.32,1)),transform 1200ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.pc-card:hover>img,.pc-card:focus-within>img{filter:none;transform:scale(1.04)}
.pc-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 40%,transparent 60%,rgba(0,0,0,.55));z-index:1}
.pc-card__t{position:absolute;left:18px;right:18px;top:16px;margin:0;font:700 12px/1.3 var(--font-body);letter-spacing:.08em;text-transform:uppercase;z-index:2;opacity:.9}
.pc-card__h{position:absolute;left:18px;right:18px;bottom:18px;margin:0;font:300 26px/1.05 var(--font-heading);letter-spacing:-.02em;z-index:2;text-wrap:balance}
.pc-card__h b{font-weight:700}
.pc-card--door{clip-path:var(--rect-soft);border-radius:0}
.pc-card--lean{clip-path:var(--door-soft);border-radius:0}
.pc-nav{display:flex;gap:8px;justify-content:flex-end;margin:0 0 12px}
.pc-nav button{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--black,#0d0d0c);background:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color 200ms,color 200ms}
.pc-nav button:hover{background:var(--black,#0d0d0c);color:#fff}
.pc-nav button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pc-rows{display:grid;gap:14px;overflow:hidden;padding:6px 0}
.pc-row{display:flex;gap:14px;width:max-content;animation:acha-rowl 40s linear infinite}
.pc-row:nth-child(2){animation-name:acha-rowr;animation-duration:48s}
.pc-row:nth-child(3){animation-duration:56s}
.pc-row .pc-card{width:200px;aspect-ratio:4/3}
.pc-rows:hover .pc-row{animation-play-state:paused}
@keyframes acha-rowl{to{transform:translateX(-50%)}}
@keyframes acha-rowr{from{transform:translateX(-50%)}to{transform:none}}
@supports (animation-timeline:scroll()){.pc-rows.on-scroll .pc-row{animation:acha-rowl linear both;animation-timeline:view();animation-range:entry 0% exit 100%}.pc-rows.on-scroll .pc-row:nth-child(2){animation-name:acha-rowr}}
.pc-stack{position:relative;height:340px;display:grid;place-items:center}
.pc-stack .pc-card{position:absolute;width:240px;transform:translateY(calc(var(--i) * 14px)) scale(calc(1 - var(--i) * .05));z-index:calc(10 - var(--i));opacity:calc(1 - var(--i) * .18);transition:transform 600ms var(--easing-settle,cubic-bezier(.23,1,.32,1)),opacity 600ms}
.pc-stack:hover .pc-card{transform:translateY(calc(var(--i) * 30px)) rotate(calc(var(--i) * -3deg)) scale(calc(1 - var(--i) * .04))}
.pc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;height:360px;overflow:hidden}
.pc-col{display:grid;gap:14px;align-content:start;animation:acha-colu 30s linear infinite alternate}
.pc-col:nth-child(2){animation-duration:38s;animation-direction:alternate-reverse}
.pc-col:nth-child(3){animation-duration:46s}
.pc-col .pc-card{width:100%;aspect-ratio:1}
@keyframes acha-colu{to{transform:translateY(calc(-100% + 360px))}}
@supports (animation-timeline:scroll()){.pc-cols.on-scroll .pc-col{animation:acha-colu linear both;animation-timeline:view();animation-range:entry 0% exit 100%}}
@media (prefers-reduced-motion:reduce){.pc-row,.pc-col{animation:none}.pc-card>img{transition:none}}
.pc-card--lean .pc-card__t{left:30px;top:24px}.pc-card--lean .pc-card__h{left:30px;right:30px;bottom:26px}
.pf:not(.pf--night){box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.pc-row .pc-card__h{font-size:22px}
.pc-stack .pc-card{top:auto;bottom:0;transform:translate(calc(var(--i) * 22px),calc(var(--i) * -16px)) rotate(calc(var(--i) * 2.5deg)) scale(calc(1 - var(--i) * .04));opacity:calc(1 - var(--i) * .14)}
.pc-stack:hover .pc-card{transform:translate(calc(var(--i) * 40px),calc(var(--i) * -26px)) rotate(calc(var(--i) * 5deg)) scale(calc(1 - var(--i) * .03))}
.pc-col .pc-card__h{font-size:20px}
.pc-stack{place-items:end start;padding-left:6px}
/* the modal never wider than its ground */
.modal{max-width:min(420px,100%);box-sizing:border-box}
.modal-demo{min-width:0}
/* the stepper wraps on a phone: two steps a row, the line between them kept */
@media (max-width:640px){.stepper{flex-wrap:wrap;row-gap:12px}.stepper li{flex:1 1 40%}}

/* Steps, lateral (2 November 2026): a journey runs left to right as little panels joined by a line. Three kinds. .steps--doors: a door per step, closed when it is to come, lit (teal) now, ink when done, the line between them drawn from door to door. .steps--dots: small dots on a line with the label under each, the done stretch in ink, the light sitting on the current dot. .steps--panels: a small card per step (number, title, one line) with the connector drawn between the cards and the current card on the teal field. On a phone they scroll sideways in a snap rail */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;list-style:none;margin:0;padding:0;font-family:var(--font-body);position:relative;counter-reset:step}
.steps>li{position:relative;display:grid;justify-items:center;text-align:center;gap:10px;padding:0 8px;counter-increment:step}
.steps__t{margin:0;font:700 15px/1.3 var(--font-body)}
.steps__d{margin:0;font:300 14px/1.45 var(--font-body);opacity:.78;max-width:16em}
/* the connector: a line from the centre of this step to the centre of the next */
.steps>li::before{content:"";position:absolute;top:var(--steps-y,24px);left:50%;width:100%;height:2px;background:var(--gray,#E2E2E2);z-index:0;transform:translateY(-50%)}
.steps>li:last-child::before{display:none}
.steps>li.is-done::before{background:var(--black,#0d0d0c)}
.steps>li.is-now::before{background:linear-gradient(90deg,var(--teal,#6E9C9C),var(--gray,#E2E2E2))}
/* doors */
.steps--doors{--steps-y:30px}
.steps--doors .steps__i{position:relative;z-index:1;width:40px;height:60px;background:#fff;box-shadow:inset 0 0 0 2px var(--black,#0d0d0c);clip-path:var(--rect-soft);display:grid;place-items:center;font:700 14px/1 var(--font-body);color:var(--black,#0d0d0c);transition:background-color 300ms,color 300ms,transform 400ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.steps--doors .steps__i::after{content:counter(step)}
.steps--doors .is-done .steps__i{background:var(--black,#0d0d0c);color:#fff;background-image:var(--specks-light);background-size:130px 130px;animation:acha-specks 42s linear infinite}
.steps--doors .is-done .steps__i::after{content:"";width:12px;height:12px;background:#fff;-webkit-mask:var(--ii-check) center/contain no-repeat;mask:var(--ii-check) center/contain no-repeat}
.steps--doors .is-now .steps__i{background:var(--teal,#6E9C9C);clip-path:var(--door-soft);box-shadow:none;color:var(--black,#0d0d0c);background-image:var(--specks);background-size:130px 130px;animation:acha-specks 42s linear infinite}
.steps--doors .is-now{--glow:1}
.steps--doors .is-now .steps__i{filter:drop-shadow(0 0 10px rgba(110,156,156,.55))}
.steps--doors li:not(.is-done):not(.is-now) .steps__i{box-shadow:inset 0 0 0 2px #767676;color:#595959}
.steps--doors li:not(.is-done):not(.is-now){color:#595959}
/* dots */
.steps--dots{--steps-y:8px}
.steps--dots .steps__i{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--black,#0d0d0c);transition:transform 400ms var(--easing-settle,cubic-bezier(.23,1,.32,1))}
.steps--dots .is-done .steps__i{background:var(--black,#0d0d0c)}
.steps--dots .is-now .steps__i{background:var(--teal,#6E9C9C);box-shadow:0 0 0 2px var(--teal,#6E9C9C),0 0 0 7px rgba(110,156,156,.22);transform:scale(1.15);animation:acha-dotb 2.6s ease-in-out infinite alternate}
.steps--dots li:not(.is-done):not(.is-now) .steps__i{box-shadow:inset 0 0 0 2px #767676}
.steps--dots li:not(.is-done):not(.is-now){color:#595959}
@keyframes acha-dotb{from{box-shadow:0 0 0 2px var(--teal,#6E9C9C),0 0 0 5px rgba(110,156,156,.18)}to{box-shadow:0 0 0 2px var(--teal,#6E9C9C),0 0 0 9px rgba(110,156,156,.26)}}
/* panels */
.steps--panels{gap:14px;--steps-y:50%}
.steps--panels>li{justify-items:start;text-align:left;padding:18px 18px 20px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);gap:8px;align-content:start;z-index:1}
.steps--panels>li::before{left:100%;width:14px;top:50%}
.steps--panels .steps__n{font:300 28px/1 var(--font-heading);letter-spacing:-.02em}
.steps--panels .steps__n::before{content:counter(step,decimal-leading-zero)}
.steps--panels .is-done{background:var(--black,#0d0d0c);color:#fff;box-shadow:none;background-image:var(--specks-light),var(--grain-light);background-size:130px 130px,auto;animation:acha-specks 42s linear infinite}
.steps--panels .is-done .steps__d{opacity:.8}
.steps--panels .is-now{background:var(--teal,#6E9C9C);color:var(--black,#0d0d0c);box-shadow:none;background-image:var(--specks),var(--grain);background-size:130px 130px,auto;animation:acha-specks 42s linear infinite}
.steps--panels .is-now .steps__n{font-weight:700}
.steps--panels li:not(.is-done):not(.is-now){color:#595959}
.steps--panels .is-done::before{background:var(--black,#0d0d0c)}
.steps--panels .is-now::before{background:var(--teal,#6E9C9C)}
/* the light travelling along the line toward the next step */
.steps .is-now::after{content:"";position:absolute;top:var(--steps-y,24px);left:50%;width:22px;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,var(--teal,#6E9C9C),transparent);animation:acha-stepl 2.4s ease-in-out infinite;z-index:0;opacity:.9}
.steps--panels .is-now::after{left:100%;width:14px;animation:none;opacity:0}
.steps .is-now:last-child::after{display:none}
@keyframes acha-stepl{from{left:50%}to{left:100%}}
@media (max-width:640px){.steps{grid-auto-columns:minmax(150px,1fr);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}.steps>li{scroll-snap-align:start}.steps--panels{grid-auto-columns:minmax(200px,1fr)}}
@media (prefers-reduced-motion:reduce){.steps .is-now::after,.steps--dots .is-now .steps__i,.steps--doors .is-done .steps__i,.steps--doors .is-now .steps__i,.steps--panels .is-done,.steps--panels .is-now{animation:none}}
.steps.on-dark li:not(.is-done):not(.is-now){color:rgba(255,255,255,.62)}
.steps.on-dark.steps--doors li:not(.is-done):not(.is-now) .steps__i{background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);color:rgba(255,255,255,.8)}
.steps.on-dark .is-done .steps__i{background:#fff;color:var(--black,#0d0d0c)}
.steps.on-dark.steps--doors .is-done .steps__i::after{background:var(--black,#0d0d0c)}
.steps.on-dark>li.is-done::before{background:#fff}

/* ===== Documents, decks and policies (2 November 2026, from the CMAA Genesis submission and the policy set in Word) ===== */
/* The page: A4 portrait at any size; the slide: 16:9. Both carry the same parts: the eyebrow line (small tracked caps, the // separator), the mark top right, a Light/Bold title, the olive dash, the script word, the brand line, and the foot line */
.doc{position:relative;overflow:hidden;background:#fff;color:var(--black,#0d0d0c);font-family:var(--font-body);container-type:inline-size;aspect-ratio:210/297;box-shadow:0 1px 2px rgba(0,0,0,.08),0 12px 30px -16px rgba(0,0,0,.35);border-radius:4px}
.doc--slide{aspect-ratio:16/9}
.doc *{box-sizing:border-box}
.doc__eyebrow{position:absolute;left:7%;top:4.5%;margin:0;font:700 1.55cqw/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;z-index:3}
.doc__eyebrow i{font-style:normal;opacity:.6;margin:0 .5em}
.doc__mark{position:absolute;right:7%;top:4%;width:7cqw;height:auto;z-index:3}
.doc__foot{position:absolute;left:7%;right:7%;bottom:4%;display:flex;justify-content:space-between;align-items:end;font:400 1.5cqw/1.5 var(--font-body);z-index:3}
.doc__foot b{display:block;font-weight:700}
.doc__foot img,.doc__foot svg{height:4.2cqw;width:auto}
/* the cover: a night photograph full bleed under the diagonal dashes, the title Light/Bold in white, the olive dash with the program line, the script word large, the brand line, the applicant and partner marks */
.doc--cover{background:var(--night-house,#0a0a0a);color:#fff}
.doc--cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.82)}
.doc--cover::before{content:"";position:absolute;inset:0;background:var(--dash-light);opacity:.16;z-index:1}
.doc--cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,.1) 35%,rgba(10,10,10,.2) 70%,rgba(10,10,10,.85));z-index:1}
.doc__title{position:absolute;left:7%;top:10%;right:7%;margin:0;font:300 7.4cqw/1.05 var(--font-heading);letter-spacing:-.02em;z-index:3;text-wrap:balance}
.doc__title b{font-weight:700}
.doc__line{position:absolute;left:7%;top:23.5%;margin:0;display:flex;align-items:center;gap:1.6cqw;font:400 1.9cqw/1 var(--font-body);z-index:3}
.doc__line::before{content:"";width:5cqw;height:.35cqw;background:var(--olive,#C9CE55)}
.doc__line i{font-style:normal;opacity:.6}
.doc__script{position:absolute;left:7%;bottom:18%;margin:0;font:400 16cqw/1 var(--font-accent,"Brittany Signature",cursive);z-index:3}
.doc__brand{position:absolute;left:7%;bottom:12%;margin:0;font:300 3.4cqw/1 var(--font-heading);z-index:3}
.doc__brand b{font-weight:700}
.doc__brand i{font-style:normal;color:var(--olive,#C9CE55);margin:0 .25em}
.doc__parties{position:absolute;left:7%;bottom:4%;display:flex;gap:7cqw;z-index:3;align-items:end}
.doc__parties div{display:grid;gap:.9cqw;font:700 1.3cqw/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase}
.doc__parties img,.doc__parties svg{height:5cqw;width:auto}
/* the section divider: a photo band (or a flat band in a brand colour with the numeral as a watermark), the script number word, then the number in teal, the eyebrow, the Light/Bold title and the rule of contents */
.doc--section .band{position:absolute;left:0;right:0;top:0;height:50%;background:var(--night-house,#0a0a0a);overflow:hidden}
.doc--section .band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.8)}
.doc--section .band::before{content:"";position:absolute;inset:0;background:var(--dash-light);opacity:.16}
.doc--section .band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.5),transparent 40%,rgba(10,10,10,.5))}
.doc--section .band.flat{background:var(--taupe,#C5BDA2)}
.doc--section .band.flat::before{background:var(--dash-dark);opacity:.12}
.doc--section .band.flat::after{display:none}
.doc--section .band .wm{position:absolute;right:-4%;top:-12%;margin:0;font:700 52cqw/1 var(--font-heading);letter-spacing:-.06em;color:rgba(255,255,255,.55)}
.doc--section .band .sw{position:absolute;left:7%;bottom:6%;margin:0;font:400 11cqw/1 var(--font-accent,"Brittany Signature",cursive);color:#fff}
.doc--section .band.flat .sw{color:var(--black,#0d0d0c)}
.doc--section .band.flat ~ .doc__eyebrow,.doc--section .band.flat ~ .doc__mark{color:var(--black,#0d0d0c)}
.doc--section .band ~ .doc__eyebrow,.doc--section .band ~ .doc__mark{color:#fff}
.doc__num{position:absolute;left:7%;top:54%;margin:0;font:700 10cqw/1 var(--font-heading);letter-spacing:-.04em;color:var(--teal,#6E9C9C)}
.doc__sec{position:absolute;left:27%;top:54.5%;margin:0;font:700 1.4cqw/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase}
.doc__sec i{font-style:normal;opacity:.55;margin:0 .5em}
.doc__h{position:absolute;left:27%;top:57.5%;margin:0;font:300 5.2cqw/1.05 var(--font-heading);letter-spacing:-.02em}
.doc__h b{font-weight:700}
.doc__toc{position:absolute;left:7%;right:7%;top:67%;margin:0;padding:0;list-style:none;border-top:.25cqw solid var(--black,#0d0d0c);font:400 1.9cqw/1 var(--font-body)}
.doc__toc li{display:flex;justify-content:space-between;padding:1.8cqw 0;border-bottom:1px solid rgba(0,0,0,.14)}
.doc__toc li span+span{color:var(--teal-600,#4a7575)}
/* body pages: Helvetica at 10.5 on 15.5, headings in Regrade, the callout on a mist field, tables with taupe heads and striped rows, the attachment header with the two marks on a hairline */
.doc--page{padding:7% 7% 9%}
.doc__hdr{display:flex;align-items:center;gap:2.4cqw;padding-bottom:2.2cqw;border-bottom:1px solid var(--black,#0d0d0c);margin-bottom:3cqw;font:400 1.8cqw/1 var(--font-body)}
.doc__hdr img,.doc__hdr svg{height:5cqw;width:auto}
.doc__hdr .cm{height:5cqw;padding:0 1.6cqw;background:var(--black,#0d0d0c);color:#fff;display:grid;place-items:center;font:700 2.6cqw/1 var(--font-heading);letter-spacing:.12em}
.doc__h1{margin:0 0 .6cqw;font:700 4cqw/1.1 var(--font-heading);letter-spacing:-.02em}
.doc__h1 small{display:block;font:400 2cqw/1.4 var(--font-body);color:#595959;letter-spacing:0}
.doc__h2{margin:3cqw 0 1cqw;font:700 2.6cqw/1.2 var(--font-heading)}
.doc__h2.teal{color:var(--teal-600,#4a7575);font-weight:700;font-size:2.4cqw}
.doc__p{margin:0 0 1.6cqw;font:400 1.75cqw/1.5 var(--font-body);max-width:none}
.doc__call{margin:0 0 2.4cqw;padding:2cqw 2.4cqw;background:var(--teal-100,#eef3f3);font:700 1.8cqw/1.45 var(--font-body);border-radius:.6cqw}
.doc__tbl{width:100%;border-collapse:collapse;font:400 1.65cqw/1.35 var(--font-body);margin:0 0 2.4cqw}
.doc__tbl th{background:var(--taupe,#C5BDA2);text-align:left;padding:1.2cqw 1.4cqw;font-weight:700}
.doc__tbl td{padding:1.1cqw 1.4cqw;border-bottom:1px solid rgba(0,0,0,.1);vertical-align:top}
.doc__tbl tr:nth-child(even) td{background:rgba(197,189,162,.14)}
.doc__tbl td.n,.doc__tbl th.n{text-align:right;font-variant-numeric:tabular-nums}
.doc__tbl tr.tot td{font-weight:700;border-top:1px solid var(--black,#0d0d0c);border-bottom:0}
.doc__tbl--form td:first-child{width:28%;font-weight:700;background:rgba(197,189,162,.14)}
.doc__pagefoot{position:absolute;left:7%;right:7%;bottom:4%;display:flex;justify-content:space-between;border-top:1px solid rgba(0,0,0,.25);padding-top:1.4cqw;font:400 1.6cqw/1 var(--font-body)}
.doc__sign{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;margin-top:2cqw;font:400 1.75cqw/1.4 var(--font-body)}
.doc__sign p{margin:0;padding:1.4cqw 0 .8cqw;border-bottom:1px solid var(--black,#0d0d0c)}
.doc__sign b{font-weight:700}
/* the policy page, as the Word set has it: the mark left, the policy line right in tracked teal caps, the teal label, the title, the version line, the metadata table with its taupe label column, teal H1, bold H2, the foot line with the ABN and page x of y */
.doc--policy{padding:6% 7% 9%}
.doc--policy .doc__hdr{border-bottom:1px solid var(--black,#0d0d0c);justify-content:space-between}
.doc--policy .doc__hdr span{font:700 1.3cqw/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-600,#4a7575)}
.doc__label{margin:0 0 .8cqw;font:700 1.3cqw/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-600,#4a7575)}
.doc--policy .doc__h1{font-size:4.4cqw}
.doc__ver{margin:0 0 2.4cqw;font:400 1.8cqw/1.4 var(--font-body);color:#595959}
.doc--policy .doc__h2{color:var(--teal-600,#4a7575);font-size:2.6cqw}
.doc__h3{margin:2cqw 0 .6cqw;font:700 2cqw/1.3 var(--font-heading)}
.doc__ol{margin:0 0 1.6cqw;padding-left:2.6cqw;font:400 1.75cqw/1.5 var(--font-body)}
.doc__ol li{margin:0 0 .5cqw}
.doc__ol b{font-weight:700}
/* slides: the same parts on 16:9 */
.doc--slide .doc__title{top:13%;font-size:5.4cqw;right:34%}
.doc--slide .doc__line{top:50%}
.doc--slide .doc__script{bottom:22%;font-size:12cqw;left:auto;right:8%}
.doc--slide .doc__brand{bottom:12%;font-size:2.6cqw}
.doc--slide.doc--section .band{height:100%;width:46%;right:auto}
.doc--slide.doc--section .doc__num{left:52%;top:18%;font-size:14cqw}
.doc--slide.doc--section .doc__sec{left:52%;top:46%}
.doc--slide.doc--section .doc__h{left:52%;top:52%;right:7%;font-size:4.6cqw}
.doc--slide.doc--section .doc__toc{left:52%;top:72%}
.doc--slide.doc--page{padding:6% 7%}
.doc--slide .doc__h1{font-size:3.6cqw}
.doc--slide .doc__p{font-size:1.6cqw}
.doc--slide .doc__tbl{font-size:1.45cqw}
.doc--slide .doc__pagefoot{font-size:1.3cqw}
.doc--stat{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;margin:1cqw 0 2.4cqw}
.doc--stat div{padding:2cqw;background:var(--teal-100,#eef3f3);border-radius:.8cqw}
.doc--stat b{display:block;font:700 5cqw/1 var(--font-heading);letter-spacing:-.03em}
.doc--stat span{font:400 1.5cqw/1.3 var(--font-body);color:#595959}