:root{color-scheme:light;--paper:#FAF3E7;--paper-rgb:250,243,231;--scarlet:#EF4423;--ink:#27251F;--accent:#EF4423;--button-shadow-rgb:100,30,60;--line-rgb:217,208,194;--line-alpha:1;--line:rgba(var(--line-rgb),var(--line-alpha));--muted:#736D63;--focus:var(--accent);--pad:clamp(24px,2.4vw,40px);--gutter:clamp(12px,1.67vw,24px);--columns:minmax(0,7fr) minmax(0,5fr)}
:root[data-colorway="scarlet"]{--paper:#EF4423;--paper-rgb:239,68,35;--ink:#FAF3E7;--accent:#FAF3E7;--muted:#FAF3E7;--line-rgb:250,243,231;--line-alpha:.5}
:root[data-colorway="periwinkle"]{--paper:#B7C4EC;--paper-rgb:183,196,236;--ink:#641E3C;--accent:#641E3C;--muted:#641E3C;--button-shadow-rgb:50,15,30;--line-rgb:100,30,60;--line-alpha:.3}
:root[data-colorway="cherry"]{color-scheme:dark;--paper:#641E3C;--paper-rgb:100,30,60;--ink:#B7C4EC;--accent:#B7C4EC;--muted:#B7C4EC;--line-rgb:183,196,236;--line-alpha:.4}
:root[data-colorway="butter"]{--paper:#F7E394;--paper-rgb:247,227,148;--ink:#641E3C;--accent:#641E3C;--muted:#641E3C;--button-shadow-rgb:50,15,30;--line-rgb:100,30,60;--line-alpha:.3}
:root[data-colorway="butter"] .masthead{border-bottom-color:#FAF3E7}
:root[data-colorway="butter"] .masthead-note,:root[data-colorway="butter"] .signup{border-left-color:#B7C4EC}
:root[data-colorway="butter"] .footer{border-top-color:#EF4423}
:root[data-colorway="butter"] .motion-controls{border-top-color:#B7C4EC}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;background:var(--paper);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
html{scrollbar-gutter:stable}
button,input{font:inherit;color:inherit}
/* One quiet frame; the same 7/5 boundary aligns identity, opening and signup. */
.landing{margin:var(--gutter);min-height:calc(100svh - 2 * var(--gutter));border:1px solid var(--line);display:grid;grid-template-rows:auto minmax(330px,1fr) auto}
.masthead{display:grid;grid-template-columns:var(--columns);border-bottom:1px solid var(--line)}
.brand-cell{display:flex;align-items:center;min-width:0;padding:16px var(--pad)}
.brand{display:block;width:clamp(210px,20vw,288px);min-width:0;height:auto}
.brand-cell .brand{margin-left:calc(clamp(210px,20vw,288px) * -.075)}
.masthead-note{display:flex;align-items:center;justify-content:flex-end;text-align:right;border-left:1px solid var(--line);padding:18px var(--pad);font-size:14px;line-height:1.4;margin:0;font-weight:400}
.campaign{position:relative;min-height:330px;display:flex;align-items:stretch}
.artwork{position:relative;width:100%;min-height:330px;overflow:hidden;contain:layout paint}
/* Only the exact logo is visible before the campaign is ready. */
.intro{display:none}
.has-intro .intro{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:var(--paper);opacity:1;transition:opacity var(--logo-fade,220ms) ease;pointer-events:none}
.intro-logo{display:block;width:clamp(260px,40vw,540px);max-width:86vw;height:auto;transform:translateX(-2.2%)}
.has-intro .landing{visibility:hidden}
.has-intro.is-revealing .landing{visibility:visible}
.has-intro.is-revealing .intro{opacity:0}
/* The campaign owns the viewport before it settles into its measured grid slot. */
html.is-cinematic,html.is-cinematic body{overflow:hidden}
.is-cinematic .landing{border-color:rgba(var(--line-rgb),calc(var(--line-alpha) * var(--page-reveal,0)))}
.is-cinematic .artwork{position:fixed;z-index:2;min-height:0;background:var(--paper);will-change:clip-path}
.is-cinematic .masthead,.is-cinematic .footer{opacity:var(--page-reveal,0);visibility:hidden}
.is-cinematic.is-settling .masthead,.is-cinematic.is-settling .footer{visibility:visible}
/* The rules around the campaign cell ride on the edge of the opening clip, fading in with the page, so they land with
   the cell. The canvas covers the real rules until its clip passes them at the very end of the move. */
.is-cinematic.is-settling .campaign::after{content:"";position:fixed;z-index:3;pointer-events:none;opacity:var(--page-reveal,0);left:calc(var(--clip-left,0px) - 1px);top:calc(var(--clip-top,0px) - 1px);right:calc(var(--clip-right,0px) - 1px);bottom:calc(var(--clip-bottom,0px) - 1px);border:1px solid var(--line)}
:root[data-colorway="butter"].is-cinematic .campaign::after{border-top-color:#FAF3E7;border-bottom-color:#EF4423}
/* The frame stays anchored while the campaign arrives; only its opacity changes. */
.cinema-controls{position:fixed;right:clamp(20px,3vw,44px);bottom:22px;z-index:3;display:flex;gap:24px;opacity:calc(1 - var(--page-reveal,0))}
.cinema-controls[hidden]{display:none}
.has-intro .cinema-controls{visibility:hidden}
.cinema-controls button{border:0;background:var(--paper);padding:12px 0;min-height:44px;font-size:12px;cursor:pointer}
.piece{position:absolute;left:0;top:0;display:block;width:auto;height:auto;max-width:none;opacity:0;transform-origin:0 0;user-select:none;pointer-events:none}
.artwork.is-playing .piece{will-change:transform,opacity}
/* The assembled poster is visible even before the animation starts. */
.piece[data-piece="diamond"]{width:16%;height:auto;left:calc(100% / 6 - 8%);top:18%;opacity:1}
/* Shared line boxes and proportional widths preserve one type size without JS. */
.piece[data-piece="anything"],.piece[data-piece="but"],.piece[data-piece="mid"]{height:auto;top:78%;transform:translate(-50%,-50%);opacity:1}
.piece[data-piece="anything"]{width:23.32801%;left:calc(100% / 6)}
.piece[data-piece="tulip"]{width:23%;height:auto;left:38.5%;top:26%;opacity:1}
.piece[data-piece="but"]{width:8.57416%;left:50%}
.piece[data-piece="dss"]{width:8.8%;height:auto;left:calc(500% / 6 - 4.4%);top:19%;opacity:1}
.piece[data-piece="mid"]{width:11.20479%;left:calc(500% / 6)}
.artwork.is-ready .piece{left:0;top:0}
.footer{border-top:1px solid var(--line);display:grid;grid-template-columns:var(--columns);align-items:stretch}
.opening{--description-size:clamp(24px,2.25vw,34px);container-type:inline-size;display:flex;flex-direction:column;min-width:0;padding:26px var(--pad) 28px}
.announcement{color:var(--ink);font-size:13px;font-weight:500;line-height:1.4;margin:0 0 18px}
/* Keep the store sentence on one line; its scale follows the available cell. */
.description{font-size:min(calc(var(--description-size) * .9),5.5cqi);line-height:1.16;font-weight:400;letter-spacing:-.03em;margin:0;width:100%;text-align:left;white-space:nowrap}
.categories{display:flex;align-items:baseline;justify-content:space-between;gap:.3em;font-size:calc(var(--description-size) * .5);line-height:1.4;font-weight:500;letter-spacing:.12em;margin:auto 0 0;padding-top:var(--pad)}
.categories span{white-space:nowrap}
.category-divider{letter-spacing:0}
.motion-controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;grid-column:1 / -1;border-top:1px solid var(--line);padding:0 var(--pad);min-height:48px}
.motion-controls[hidden]{display:none}
.campaign-caption{margin-right:auto;font-size:12px;line-height:1.4}
.playback-controls{grid-column:3;grid-row:1;justify-self:end;display:flex;gap:24px}
.motion-controls button{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-bottom:1px solid transparent;padding:12px 0;background:none;cursor:pointer;font-size:12px;min-height:46px}
.motion-controls button:hover{border-bottom-color:var(--line)}
.motion-controls button[hidden]{display:none}
.color-controls{grid-column:2;grid-row:1;justify-self:center;position:relative}
.color-controls[hidden]{display:none}
.color-controls .palette-cycle{gap:9px;min-height:46px;border:0;padding:0;font-size:12px;white-space:nowrap}
.palette-mark{position:relative;display:block;width:24px;height:12px;flex:none}
.palette-mark span{position:absolute;top:0;width:12px;height:12px;border-radius:50%;border:1px solid var(--paper);transition:transform 180ms ease}
.palette-mark span:nth-child(1){left:0;background:#EF4423}
.palette-mark span:nth-child(2){left:6px;background:#B7C4EC}
.palette-mark span:nth-child(3){left:12px;background:#641E3C}
.palette-cycle:hover .palette-mark span:first-child{transform:translateX(-2px)}
.palette-cycle:hover .palette-mark span:last-child{transform:translateX(2px)}
.palette-cycle:hover .palette-label{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.color-status:empty{display:none}
.color-status{position:absolute;right:0;bottom:100%;z-index:4;max-width:280px;padding:8px 12px;background:var(--paper);border:1px solid var(--line);font-size:11px;line-height:1.4}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex="-1"]:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
.control-icon{font-size:13px;min-width:11px}
.signup{container-type:inline-size;min-width:0;margin:0;padding:26px var(--pad) 28px;border-left:1px solid var(--line)}
.signup h2{font-size:20px;line-height:1.25;font-weight:400;letter-spacing:-.025em;margin:0 0 8px;text-wrap:balance}
.signup-invitation{font-size:13px;line-height:1.5;font-weight:400;color:var(--muted);max-width:42ch;margin:0 0 20px;text-wrap:pretty}
.email-label{display:block;font-size:12px;margin:0 0 7px}
.signup-row{display:flex;min-width:0;align-items:stretch;border:1px solid var(--line)}
.signup-row:focus-within{border-color:var(--focus);box-shadow:inset 0 0 0 1px var(--focus)}
.signup-row input{background:transparent;border:0;min-width:0;width:100%;padding:13px 14px;font-size:16px;line-height:1.25;border-radius:0}
.signup-row input:focus{outline:none}
.signup-row input::placeholder{color:var(--muted);opacity:1}
/* Approved inverse button and single form-focus frame across every palette. */
.signup-row button{flex-shrink:0;min-height:48px;border:0;border-left:1px solid var(--accent);border-radius:0;background:var(--accent);color:var(--paper);padding:12px 18px;font-size:14px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(var(--paper-rgb),.22);transition:box-shadow 120ms ease}
.signup-row button:hover:not(:disabled){opacity:1;box-shadow:inset 0 0 0 1px rgba(var(--paper-rgb),.3)}
.signup-row button:active:not(:disabled){padding-top:13px;padding-bottom:11px;box-shadow:inset 0 2px 2px rgba(var(--button-shadow-rgb),.18),inset 0 -1px 0 rgba(var(--paper-rgb),.16)}
.signup-row button:disabled{cursor:default;opacity:.6}
.signup-row button:focus-visible{outline:2px solid var(--paper);outline-offset:-5px}
.signup-note,.signup-status{font-size:12px;line-height:1.4;margin:9px 0 0}
.signup-note{color:var(--muted);font-size:11px}
.signup-status:empty{display:none}
.signup-status{max-width:430px}
.signup.is-submitted .signup-row{display:none}
.signup.is-submitted .email-label{display:none}
/* The reply to a sign-up: a small poster in the palette's inverse colours. The card takes the palette's accent
   as its field and the page colour for its type, the same swap as the sign-up button, so every single-colour
   palette gets its opposite. Its colours are named once on the card so the multicolor Butter page can have a
   multicolor reply. The dialog itself is the veil, because ::backdrop cannot read the palette in older browsers. */
.reply{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:var(--gutter);border:0;overflow:auto;overscroll-behavior:contain;background:rgba(var(--paper-rgb),.86);color:var(--paper)}
.reply:not([open]){display:none}
.reply[open]{display:grid}
.reply::backdrop{background:transparent}
.reply-card{--reply-field:var(--accent);--reply-ink:var(--paper);--reply-chair:var(--reply-ink);--reply-button:var(--reply-ink);--reply-button-ink:var(--reply-field);--reply-rule:rgba(var(--paper-rgb),.36);position:relative;width:min(100%,460px);margin:auto;padding:clamp(36px,8vw,56px) clamp(26px,7vw,52px) clamp(34px,7vw,48px);background:var(--reply-field);color:var(--reply-ink);text-align:center}
/* Butter is the multicolor page, and Black cherry with Butter type read as an odd pair (Catherine, November 11).
   Its reply is Periwinkle with a Scarlet chair and Black cherry words. Paper lettering directly on Periwinkle is
   too faint to read (1.6 to 1), so Paper letters the button and draws the frame line. */
:root[data-colorway="butter"] .reply-card{--reply-field:#B7C4EC;--reply-ink:#641E3C;--reply-chair:#EF4423;--reply-button:#641E3C;--reply-button-ink:#FAF3E7;--reply-rule:#FAF3E7}
.reply-card::before{content:"";position:absolute;inset:10px;border:1px solid var(--reply-rule);pointer-events:none}
/* The page's own Diamond artwork, used as a stencil so it takes the type colour in every palette. */
.reply-art{display:none;width:min(68%,270px);aspect-ratio:810/775;margin:0 auto clamp(22px,5vw,30px);background:var(--reply-chair);-webkit-mask:var(--reply-art) center/contain no-repeat;mask:var(--reply-art) center/contain no-repeat}
.reply-art.is-ready{display:block}
.reply-card h2{font-size:clamp(28px,7.4vw,38px);line-height:1.08;font-weight:400;letter-spacing:-.035em;margin:0 0 12px;text-wrap:balance}
.reply-card p{font-size:15px;line-height:1.5;max-width:30ch;margin:0 auto 26px;text-wrap:pretty}
.reply-card button{min-height:48px;border:0;border-radius:0;background:var(--reply-button);color:var(--reply-button-ink);padding:12px 28px;font-size:14px;cursor:pointer}
.reply-card button:hover{box-shadow:inset 0 0 0 1px currentColor}
.reply-card button:active{padding-top:13px;padding-bottom:11px}
.reply-card button:focus-visible{outline:2px solid var(--reply-ink);outline-offset:4px}
/* It arrives the way the campaign pieces do: slightly small, easing up to full size. */
@keyframes reply-veil{from{background-color:rgba(var(--paper-rgb),0)}}
@keyframes reply-in{from{opacity:0;transform:scale(.94)}}
.reply[open]{animation:reply-veil .2s ease-out both}
.reply[open] .reply-card{animation:reply-in .32s cubic-bezier(.215,.61,.355,1) both}
/* A phone on its side or a short window: the chair sits beside the words so the whole card stays in view. */
@media(max-height:620px) and (min-width:480px){
  .reply-card{width:min(100%,660px);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(22px,4vw,40px);align-items:center;justify-items:start;text-align:left;padding:clamp(30px,5vw,44px)}
  .reply-art{grid-row:1 / span 3;width:clamp(130px,24vw,200px);margin:0}
  .reply-card h2{align-self:end;font-size:clamp(24px,4.2vw,32px)}
  .reply-card p{margin:0 0 20px}
  .reply-card button{align-self:start}
}
@media(max-height:520px) and (max-width:479px){.reply-card{padding-block:30px 28px}.reply-art{width:min(44%,140px);margin-bottom:16px}.reply-card p{margin-bottom:20px}}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:760px){.landing{min-height:max(700px,calc(100svh - 2 * var(--gutter)))}.artwork{min-height:330px}}
@media(max-width:1050px) and (min-width:760px){.opening{--description-size:27px}.signup-row button{padding:12px}.signup h2{font-size:19px}}
@media(max-width:759px){
  :root{--gutter:12px;--pad:18px}
  .landing{grid-template-rows:auto minmax(300px,1fr) auto}
  .masthead{grid-template-columns:minmax(0,1fr) 104px}
  .brand-cell{padding:14px 0 14px var(--pad)}
  .brand-cell .brand{width:clamp(176px,52vw,210px);margin-left:calc(clamp(176px,52vw,210px) * -.075)}
  .masthead-note{font-size:11px;padding:14px var(--pad);line-height:1.4}
  .campaign,.artwork{min-height:300px}
  .footer{grid-template-columns:minmax(0,1fr)}
  .opening{--description-size:24px;padding:20px var(--pad) 22px}
  .announcement{font-size:12px;margin-bottom:12px}
  .description{line-height:1.18}
  .signup{border-left:0;border-top:1px solid var(--line);padding:20px var(--pad) 22px}
  :root[data-colorway="butter"] .signup{border-top-color:#FAF3E7}
  .signup h2{font-size:19px;margin-bottom:8px}
  .signup-row button{padding:12px 15px}
  .motion-controls{grid-template-columns:minmax(0,1fr) auto auto;gap:8px;min-height:46px;padding:0 var(--pad)}
  .campaign-caption{min-width:0}
  .playback-controls{grid-column:3;gap:12px}
  .color-controls{grid-row:1;grid-column:2}
  .campaign-caption{font-size:11px}
  .motion-controls button{font-size:11px}
  .piece[data-piece="diamond"]{width:25%;left:14%;top:3%}
  .piece[data-piece="anything"]{width:44.62750%;left:70%;top:18%}
  .piece[data-piece="but"]{width:16.40274%;left:26%;top:50%}
  .piece[data-piece="tulip"]{width:42%;left:49%;top:43%}
  .piece[data-piece="dss"]{width:13.8%;left:19.6%;top:71%}
  .piece[data-piece="mid"]{width:21.43525%;left:70%;top:82%}
}
@media(max-width:359px){.opening{--description-size:22px}.signup-row button{padding:12px}.masthead{grid-template-columns:minmax(0,1fr) 88px}.masthead-note{font-size:10px}.motion-controls{gap:6px}.playback-controls{gap:8px}}
@media(max-width:319px){.categories{font-size:10px}}
@container(max-width:290px){
  .signup-row input{padding-inline:10px;text-overflow:ellipsis}
  .signup-row button{white-space:nowrap;font-size:13px;padding-inline:10px}
}
@media(prefers-reduced-motion:reduce){.artwork.is-playing .piece{will-change:auto}.has-intro .intro,.palette-mark span,.signup-row button{transition:none}.reply[open],.reply[open] .reply-card{animation:none}}
@media(forced-colors:active){.signup-row:focus-within{outline:2px solid Highlight;outline-offset:0}.reply-card{border:1px solid CanvasText}.reply-art{forced-color-adjust:none;background:CanvasText}}