/* PARLA, built from the PARLA design system */
:root{
--paper:#f7f4e9;--ink-black:#0b0b0b;--tomato:#e8452e;--olive:#6b6f46;
--ground:#f7f4e9;--ink:#0b0b0b;--ink-muted:#5a574f;--line:#d6d1c2;--bar:#0b0b0b;--on-bar:#f7f4e9;
--on-tomato:#0b0b0b;--on-olive:#f7f4e9;--tomato-text:#c7351f;--focus:#e8452e;
--font-display:"Archivo Condensed", Archivo, "Arial Narrow", sans-serif;
--font-sans:Inter, Helvetica, Arial, sans-serif;
--space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:40px;--space-6:64px;--space-7:96px;
--radius-none:0px;--rule-hair:1px;--rule:2px;--rule-heavy:8px;--underline:6px;
}
body{margin:0}
*{box-sizing:border-box}
a{color:#c7351f}a:hover{color:#0b0b0b}
.flip{all:unset;display:block;cursor:pointer;perspective:1800px;aspect-ratio:57/90;width:100%}
.flip:focus-visible{outline:3px solid #e8452e;outline-offset:4px}
.flip-in{display:block;position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
@media (hover:hover){.flip:hover .flip-in{transform:rotateY(180deg)}}
.flip.on .flip-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face.back{transform:rotateY(180deg)}
@media (prefers-reduced-motion: reduce){.flip-in{transition:none}}
/* Fonts load here too, so previews and pages get them even where tokens.css @font-face does not reach */
@font-face { font-family: 'Archivo Condensed'; src: url('../fonts/ArchivoCondensed-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo Condensed'; src: url('../fonts/ArchivoCondensed-Italic-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

body { margin: 0; font-family: var(--font-sans); background: var(--ground); color: var(--ink); -webkit-font-smoothing: antialiased; }
.p-pad { padding: var(--space-4); }
.p-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.p-stack { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }

/* Display type: Archivo 900 at 75% width, caps */
.p-display, .p-wordmark, .p-issue, .p-btn { font-family: var(--font-display); font-stretch: 75%; text-transform: uppercase; }
.p-display { font-weight: 900; line-height: .9; letter-spacing: -.01em; margin: 0; }
.p-display.poster { font-size: 120px; }
.p-display.l { font-size: 72px; line-height: .92; }
.p-display.m { font-size: 40px; line-height: .95; font-weight: 800; }
.p-display.s { font-size: 24px; line-height: 1.05; font-weight: 800; }
.p-display em { font-style: italic; }

/* Wordmark: one word, caps, never split */
.p-wordmark { font-weight: 900; line-height: .82; letter-spacing: 0; margin: 0; display: inline-block; color: var(--ink); }
.p-wordmark.cut { -webkit-mask-image: linear-gradient(#000 calc(50% - .015em), transparent 0, transparent calc(50% + .015em), #000 0); mask-image: linear-gradient(#000 calc(50% - .015em), transparent 0, transparent calc(50% + .015em), #000 0); }
.p-supported { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }

/* Issue label */
.p-issue { font-weight: 800; font-size: 14px; line-height: 16px; letter-spacing: .12em; display: inline-flex; gap: var(--space-3); align-items: center; }
.p-issue .sep { width: 24px; height: var(--rule); background: currentColor; }

/* Buttons: square, caps, heavy */
.p-btn { font-weight: 800; font-size: 18px; letter-spacing: .04em; height: 52px; padding: 0 var(--space-4); border-radius: var(--radius-none); border: var(--rule) solid var(--bar); background: var(--bar); color: var(--on-bar); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.p-btn:hover { background: var(--ground); color: var(--ink); }
.p-btn.signal { background: var(--tomato); border-color: var(--tomato); color: var(--on-tomato); }
.p-btn.signal:hover { background: var(--ink-black); border-color: var(--ink-black); color: var(--paper); }
.p-btn.outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.p-btn.outline:hover { background: var(--bar); color: var(--on-bar); }
.p-btn:focus-visible, .p-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.p-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Lines */
.p-rule { border: 0; margin: 0; height: var(--rule); background: var(--ink); color: inherit; }
.p-rule.hair { height: var(--rule-hair); background: var(--line); }
.p-rule.heavy { height: var(--rule-heavy); }
.p-under { text-decoration: underline; text-decoration-thickness: var(--underline); text-underline-offset: var(--space-1); text-decoration-skip-ink: none; }

/* Marker bar behind a word */
.p-mark { background: var(--bar); color: var(--on-bar); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.p-mark.tomato { background: var(--tomato); color: var(--on-tomato); }

/* Form */
.p-field { display: flex; flex-direction: column; gap: var(--space-2); max-width: 480px; }
.p-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.p-input { font: inherit; font-size: 17px; line-height: 26px; padding: 12px var(--space-3); border: var(--rule) solid var(--ink); border-radius: var(--radius-none); background: var(--ground); color: var(--ink); }
.p-input::placeholder { color: var(--ink-muted); }
textarea.p-input { min-height: 136px; resize: vertical; }
.p-help { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.p-field.error .p-input { border-color: var(--tomato-text); }
.p-field.error .p-help { color: var(--tomato-text); font-weight: 600; }

/* Invite / poster field */
.p-invite { padding: var(--space-5) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); border-radius: var(--radius-none); }
.p-invite.tomato { background: var(--tomato); color: var(--on-tomato); }
.p-invite.olive { background: var(--olive); color: var(--on-olive); }
.p-invite.ink { background: var(--ink-black); color: var(--paper); }
.p-invite .p-rule { background: currentColor; }
.p-invite .p-display.l { font-size: 52px; line-height: .92; }
.p-invite .details { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); font-size: 15px; line-height: 22px; }
.p-invite .details dt { font-size: 12px; line-height: 22px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.p-invite .details dd { margin: 0; }
.p-invite .foot { margin-top: auto; padding-top: var(--space-5); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.p-invite .foot .p-supported { color: inherit; }

html{scroll-behavior:smooth}
@media (max-width: 700px){.hero-h1{font-size:12vw!important}}

/* Photo treatment: high-contrast black and white with a little grain, like the mood board */
img[src*="photo-"]{filter:grayscale(1) contrast(1.08)}
.grain{position:relative;overflow:hidden}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* Motion: subtle, one-time reveals. Off for anyone who prefers reduced motion. */
@media (prefers-reduced-motion: no-preference){
  .js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
  .js .rv.in{opacity:1;transform:none}
  .js .ph{overflow:hidden}
  .js .ph img{transform:scale(1.08);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
  .js .ph.in img{transform:scale(1)}
  .js .p-mark{background-size:0% 100%;background-repeat:no-repeat;background-image:linear-gradient(var(--tomato),var(--tomato));background-color:transparent!important;transition:background-size .9s cubic-bezier(.7,0,.2,1) .5s}
  .js .p-mark.in{background-size:100% 100%}
  .js #apply .p-mark{background-image:linear-gradient(var(--tomato),var(--tomato))}
  .who-card img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .who-card:hover img{transform:scale(1.03)}
  .p-btn{transition:background-color .2s,color .2s,border-color .2s}
}

/* Hero: the marked word cycles (hero.rotating in the CMS). All words share one grid cell,
   so the headline keeps the size of the longest word and nothing below it jumps. */
.rot{display:inline-grid;vertical-align:top;max-width:100%}
.rot-w{grid-area:1/1;align-self:start;justify-self:start;visibility:hidden}
.rot-w.on{visibility:visible}
.rot-w>span{display:inline-block;background:var(--tomato);color:var(--on-tomato);padding:.06em .1em 0;line-height:.86}
@media (prefers-reduced-motion: no-preference){
  .js .rot-w{visibility:visible}
  .js .rot-w>span{background:linear-gradient(var(--tomato),var(--tomato)) no-repeat left/0% 100%;color:transparent;transition:background-size .42s cubic-bezier(.7,0,.2,1),color .2s ease}
  .js .rot-w.on>span{background-size:100% 100%;color:var(--on-tomato);transition-delay:0s,.24s}
  .js .rot-w.off>span{background-position:right;background-size:0% 100%;transition-delay:.08s,0s}
  .js .hero-h1:not(.in) .rot-w.on>span{background-size:0% 100%;color:transparent}
}

/* Headlines: each line rises from behind its own edge, once, as it scrolls into view. Kept short and calm. */
.ln{display:block;overflow:hidden;padding:.1em 0 .06em;margin:-.1em 0 -.06em}
.ln>span{display:inline-block;max-width:100%;vertical-align:top}
@media (prefers-reduced-motion: no-preference){
  .js .rv:has(.ln){opacity:1;transform:none}
  .js .rv .ln>span{transform:translateY(100%);transition:transform .7s cubic-bezier(.25,.8,.25,1);transition-delay:calc(var(--i,0) * .06s + var(--d,0s))}
  .js .rv.in .ln>span{transform:none}
  .js .rv.in .ln .p-mark{background-size:100% 100%;transition-delay:.55s}
}

/* Next evening: the poster is pasted on a concrete wall. */
.wall{background:#6f6b65 url(../texture/wall-tile.jpg) center top/1200px auto repeat;position:relative}
.wall::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 30% 10%,rgba(255,250,240,.14),rgba(0,0,0,.22) 90%)}
.wall>section{position:relative}
.paper{position:relative;transform:rotate(-.5deg);box-shadow:0 1px 1px rgba(0,0,0,.22),0 10px 24px rgba(0,0,0,.18)}
.paper::before,.paper::after{content:"";position:absolute;inset:0;pointer-events:none}
.paper::before{background:url(../texture/concrete.jpg) center/cover;mix-blend-mode:multiply;opacity:.32}
.paper::after{background:url(../texture/paper.jpg) center/100% 100%;mix-blend-mode:soft-light;opacity:.8}
.wall figure{box-shadow:0 10px 24px rgba(0,0,0,.2)}
@media (max-width:700px){.paper{transform:none}}

/* Wordmark: wide and heavy, like the posters. It is drawn as two halves so it can move
   between the solid logo and the cut logo. Header: cuts on hover. Footer: cuts when it scrolls in. */
@font-face{font-family:'Archivo Wide';src:url('../fonts/ArchivoWide-Black.woff2') format('woff2');font-weight:900;font-display:block}
.wm{font-family:'Archivo Wide','Archivo Condensed',sans-serif;font-stretch:normal;font-weight:900;letter-spacing:-.02em;position:relative;color:inherit;white-space:nowrap}
.wm{-webkit-text-fill-color:transparent}
.wm::before,.wm::after{content:attr(data-t);content:attr(data-t) / "";position:absolute;left:0;top:0;-webkit-text-fill-color:currentColor;transition:transform .6s cubic-bezier(.7,0,.2,1),clip-path .6s cubic-bezier(.7,0,.2,1)}
.wm::before{clip-path:inset(0 -5% 50% -5%)}
.wm::after{clip-path:inset(49.5% -5% 0 -5%)}
.wm-link:hover .wm::before,.wm-cut.in::before{transform:translateX(-.018em);clip-path:inset(0 -5% 52.5% -5%)}
.wm-link:hover .wm::after,.wm-cut.in::after{transform:translateX(.018em);clip-path:inset(52.5% -5% 0 -5%)}
.wm-cut::before,.wm-cut::after{transition-duration:1s;transition-delay:.3s}
@media (prefers-reduced-motion: reduce){.wm::before,.wm::after{transition:none}}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Topics: what we talk about, one per line behind a tomato square. Still, so it reads. */
.ticker{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--ground)}
.tk-in{max-width:1440px;margin:0 auto;padding:48px clamp(16px,3vw,48px) 56px;display:flex;flex-direction:column;gap:20px}
.tk-lab{color:var(--tomato-text)}
.tk-list{list-style:none;margin:0;padding:0;font-family:var(--font-display);font-stretch:75%;font-weight:900;text-transform:uppercase;font-size:clamp(36px,5vw,72px);line-height:1.02}
.tk-list li{display:flex;align-items:baseline;gap:.4em}
.tk-list li+li{margin-top:.22em}
.tk-win.rolling{overflow:hidden;padding-bottom:.1em;box-sizing:content-box}
.tk-list li::before{content:"";flex-shrink:0;width:.32em;height:.32em;background:var(--tomato);transform:translateY(-.08em)}

/* Good to know */
.faq details{border-top:2px solid var(--ink)}
.faq details:last-child{border-bottom:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;font-family:var(--font-display);font-stretch:75%;font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);line-height:1.05}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.faq summary i{position:relative;width:18px;height:18px;flex-shrink:0}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;right:0;top:8px;height:3px;background:currentColor;transition:transform .25s}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{margin:0 0 24px;max-width:620px;color:var(--ink-muted)}

/* Sticky apply bar (phones only) */
.sticky-apply{display:none}
@media (max-width:700px){
  .site-h .nav-l{display:none}
  .site-h{flex-wrap:nowrap!important}
  .site-h .p-btn{padding-left:14px;padding-right:14px}
  .ev-dl{grid-template-columns:1fr!important;gap:2px 0!important}
  .ev-dl dd{margin-bottom:12px!important}
  .paper{padding:24px!important;min-height:0!important}
  .sticky-apply{display:flex;justify-content:center;position:fixed;left:16px;right:16px;bottom:16px;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.25);transform:translateY(160%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .sticky-apply.show{transform:none}
}

/* Keyboard: skip link appears on focus */
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--ink-black);color:var(--paper);padding:12px 16px;font-weight:600;text-decoration:none}
.skip:focus{top:16px}
a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.site-h .sm{display:none}
@media (max-width:700px){.site-h .lg{display:none}.site-h .sm{display:inline}}
.share .p-btn{flex:1 1 auto;justify-content:center}

/* Header logo: slices into the cut logo once when the page opens, then closes again.
   Hover still cuts it. No fill mode, so the hover state takes over after the intro. */
@media (prefers-reduced-motion: no-preference){
  .site-h .wm::before{animation:wm-top 1.7s cubic-bezier(.7,0,.2,1) .7s}
  .site-h .wm::after{animation:wm-bot 1.7s cubic-bezier(.7,0,.2,1) .7s}
}
@keyframes wm-top{0%,100%{transform:none;clip-path:inset(0 -5% 50% -5%)}35%,65%{transform:translateX(-.018em);clip-path:inset(0 -5% 52.5% -5%)}}
@keyframes wm-bot{0%,100%{transform:none;clip-path:inset(50% -5% 0 -5%)}35%,65%{transform:translateX(.018em);clip-path:inset(52.5% -5% 0 -5%)}}

/* How it works rows: no double rule under the column title; on phones the label sits above the text */
/* How it works: Joining PARLA, then The rooms, each across the page with its steps side by side */
#how .how-block{display:flex;flex-direction:column}
#how .how-block + .how-block{margin-top:40px}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px 32px;padding-top:16px}
#how .how-grid .step{grid-template-columns:1fr!important;align-content:start;gap:8px!important;border-top:0!important;border-left:2px solid var(--ink);padding:2px 0 4px 16px!important}
@media (max-width:700px){.how-grid{gap:0;padding-top:0}#how .how-grid .step{border-left:0;border-top:2px solid var(--ink)!important;padding:16px 0 20px!important;gap:2px!important}#how .how-grid .step:first-child{border-top:0!important;padding-top:8px!important}}
.footer-run{font-size:13px;line-height:20px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
#evening .invite .p-btn{margin-top:8px}
/* Without a photo in the About field, the Who section doesn't need room for it to overlap */
#about:not(:has(figure)) + #who{padding-top:96px!important}
/* Without a photo next to it, the poster stands on its own */
#evening:not(:has(figure)){justify-content:center}
#evening:not(:has(figure)) .poster{max-width:760px}
/* A second poster next to the invite: hung on the wall, uncropped, instead of a framed photo */
.wall figure.is-poster{background:transparent!important;box-shadow:none;min-height:0!important;align-self:flex-start}
.wall figure.is-poster::after{display:none}
.wall figure.is-poster img{position:static!important;height:auto!important;box-shadow:0 10px 24px rgba(0,0,0,.25)}
/* Next evening photo as a print taped to the wall, like the polaroids on the mood board */
#evening figure:not(.is-poster){flex:0 1 440px!important;align-self:center;min-height:0!important;background:#fbfaf5!important;padding:16px 16px 64px;transform:rotate(2deg);box-shadow:0 1px 1px rgba(0,0,0,.2),0 14px 30px rgba(0,0,0,.28);overflow:visible}
#evening figure:not(.is-poster) img{position:static!important;height:auto!important;aspect-ratio:4/5;transform:none!important;filter:grayscale(1) contrast(1.05)}
#evening figure:not(.is-poster)::before{content:"";position:absolute;top:-16px;left:50%;width:140px;height:34px;margin-left:-70px;background:rgba(236,231,214,.86);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.12);z-index:1}
#evening figure:not(.is-poster)::after{inset:16px 16px 64px}
@media (max-width:700px){#evening figure:not(.is-poster){transform:rotate(1deg);margin:24px 8px 0!important}}

/* Polish, round two. Focus and selection always; the motion is off for reduced motion.
   Text selection in tomato; form fields get a hard offset shadow when focused. */
::selection{background:var(--tomato);color:var(--ink-black)}
.p-input{transition:border-color .2s,box-shadow .3s cubic-bezier(.2,.7,.2,1)}
.p-input:focus-visible{outline:none;border-color:var(--tomato);box-shadow:6px 6px 0 var(--tomato)}
:where(.p-btn){position:relative}
.p-btn:not([style])::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-h,var(--ground));transform:scaleX(0);transform-origin:right}
.p-btn:not([style]){isolation:isolate;overflow:hidden}
.p-btn.signal{--btn-h:var(--ink-black)}
.p-btn.outline{--btn-h:var(--bar)}
.p-btn:disabled::before{display:none}
@media (prefers-reduced-motion: no-preference){
  /* Photos open like a curtain from the bottom while they settle. The print and poster on the wall keep their shadows, so they only fade. */
  .js .rv.ph:not(#evening *){opacity:1;transform:none}
  .js .ph:not(#evening *){clip-path:inset(100% 0 0 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1) var(--d,0s)}
  .js .ph.in:not(#evening *){clip-path:inset(0)}
  /* Heavy rules draw across, left to right */
  .js .rv.p-rule{opacity:1;transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.7,0,.2,1) var(--d,0s)}
  .js .rv.p-rule.in{transform:none}
  /* Buttons: the hover colour sweeps in from the left and out to the right */
  .p-btn:not([style]){transition:color .25s .08s,border-color .3s}
  .p-btn:not([style])::before{transition:transform .45s cubic-bezier(.7,0,.2,1)}
  @media (hover:hover){
    .p-btn:not([style]):hover::before{transform:none;transform-origin:left}
    .p-btn:not([style]):hover{background-color:var(--bar)}
    .p-btn.signal:not([style]):hover{background-color:var(--tomato)}
    .p-btn.outline:not([style]):hover{background-color:transparent}
  }
  /* Menu links: a tomato underline that runs in and out */
  .nav-l{background:linear-gradient(var(--tomato),var(--tomato)) no-repeat right bottom/0% 3px;padding-bottom:6px;margin-bottom:-6px;transition:background-size .45s cubic-bezier(.7,0,.2,1)}
  .nav-l:hover,.nav-l:focus-visible{background-size:100% 3px;background-position:left bottom}
  /* Good to know: questions lean in on hover, answers slide open, the plus turns into a minus with a spin */
  .faq summary>span{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .faq summary:hover>span{transform:translateX(10px)}
  .faq summary i{transition:transform .45s cubic-bezier(.7,0,.2,1)}
  .faq details[open] summary i{transform:rotate(180deg)}
  @supports (interpolate-size:allow-keywords){
    .faq{interpolate-size:allow-keywords}
    .faq details::details-content{block-size:0;overflow:clip;transition:block-size .45s cubic-bezier(.2,.7,.2,1),content-visibility .45s allow-discrete}
    .faq details[open]::details-content{block-size:auto}
  }
  /* A thin tomato reading bar along the top, and photos that drift slightly against the scroll */
  @supports (animation-timeline:scroll()){
    body::before{content:"";position:fixed;inset:0 0 auto;height:4px;background:var(--tomato);transform-origin:left;transform:scaleX(0);z-index:90;pointer-events:none;animation:read linear both;animation-timeline:scroll(root)}
    .who-card .ph img,#about .ph img{scale:1.12;animation:drift linear both;animation-timeline:view()}
  }
  /* Between pages (thanks, privacy, calendar): the old page fades, the new one rises in */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out .3s cubic-bezier(.7,0,.2,1) both}
  ::view-transition-new(root){animation:vt-in .55s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes read{to{transform:none}}
@keyframes drift{from{translate:0 -4%}to{translate:0 4%}}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}

/* Apply form: product, design or tech (one tap) */
.area-pick{border:0;padding:0;margin:0;min-width:0}
.area-pick legend{padding:0;margin-bottom:var(--space-2)}
.area-opts{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.area-opts label{position:relative;cursor:pointer}
.area-opts input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.area-opts span{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--space-3);border:var(--rule) solid var(--ink);font-size:17px;font-weight:600;transition:background .15s,color .15s,border-color .15s}
.area-opts label:hover span{border-color:var(--tomato)}
.area-opts input:checked+span{background:var(--tomato);border-color:var(--tomato);color:var(--on-tomato)}
.area-opts input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.p-field.error .area-opts span{border-color:var(--tomato-text)}