*,*::before,*::after{box-sizing:border-box}
:root{
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --paper:#f8f7f3;
  --sheet:#fffefa;
  --ink:#181715;
  --graphite:#625f58;
  --rule:#d7d3c8;
  --stamp:#55409a;
  --on-ink:#f8f7f3;
  --btn-hover:#3b3934;
  --sheet-edge:rgba(24,23,21,.07);
  --shadow:rgba(44,36,22,.26);
  --leader:rgba(24,23,21,.34);
  --sel-bg:#55409a;
  --sel-fg:#fff;
  --backdrop:rgba(24,22,18,.5);
  --chair-hi:#46433f;
  --chair-mid:#2c2a27;
  --chair-lo:#171614;
  --chair-deep:#0c0c0b;
  --chrome-lo:#5f5c57;
  --chrome-mid:#a9a69f;
  --chrome-hi:#f2f1ec;
  --floor:rgba(34,30,24,.34);
  --string:#a89877;
  --canvas-hi:#f1ecdf;
  --canvas:#e7dfcb;
  --canvas-shade:#d0c5aa;
  --canvas-deep:#a79a7c;
  --card-edge:#ddd8cc;
  --wire:#8e8a82;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  --sans:Jost,Futura,"Futura PT","Century Gothic","Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;
  --serif:"Libre Caslon Text","Big Caslon",Baskerville,"Baskerville Old Face",Georgia,"Times New Roman",serif;
  --gutter:clamp(20px,5.2vw,76px);
  --measure:1120px;
  --space:clamp(92px,11.5vw,166px);
  --h2:clamp(2.05rem,1.3rem + 2.45vw,3.35rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#161512;
    --sheet:#201f1b;
    --ink:#ebe8df;
    --graphite:#a6a298;
    --rule:#3a3832;
    --stamp:#b3a1ef;
    --on-ink:#161512;
    --btn-hover:#cfcbc1;
    --sheet-edge:rgba(235,232,223,.09);
    --shadow:rgba(0,0,0,.6);
    --leader:rgba(235,232,223,.34);
    --sel-bg:#b3a1ef;
    --sel-fg:#161512;
    --backdrop:rgba(0,0,0,.66);
    --chair-hi:#8a867e;
    --chair-mid:#5f5c56;
    --chair-lo:#403e3a;
    --chair-deep:#2a2926;
    --chrome-lo:#6d6a64;
    --chrome-mid:#a09c94;
    --chrome-hi:#e6e3dc;
    --floor:rgba(0,0,0,.6);
    --string:#b9aa89;
    --canvas-hi:#e6dfcd;
    --canvas:#d6ccb4;
    --canvas-shade:#b9ad90;
    --canvas-deep:#8c8066;
    --card-edge:#34322d;
    --wire:#8d897f;
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
    --paper:#161512;
    --sheet:#201f1b;
    --ink:#ebe8df;
    --graphite:#a6a298;
    --rule:#3a3832;
    --stamp:#b3a1ef;
    --on-ink:#161512;
    --btn-hover:#cfcbc1;
    --sheet-edge:rgba(235,232,223,.09);
    --shadow:rgba(0,0,0,.6);
    --leader:rgba(235,232,223,.34);
    --sel-bg:#b3a1ef;
    --sel-fg:#161512;
    --backdrop:rgba(0,0,0,.66);
    --chair-hi:#8a867e;
    --chair-mid:#5f5c56;
    --chair-lo:#403e3a;
    --chair-deep:#2a2926;
    --chrome-lo:#6d6a64;
    --chrome-mid:#a09c94;
    --chrome-hi:#e6e3dc;
    --floor:rgba(0,0,0,.6);
    --string:#b9aa89;
    --canvas-hi:#e6dfcd;
    --canvas:#d6ccb4;
    --canvas-shade:#b9ad90;
    --canvas-deep:#8c8066;
    --card-edge:#34322d;
    --wire:#8d897f;
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
:root[data-theme="light"]{color-scheme:light}

html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  background-color:var(--paper);
  background-image:var(--grain);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.62;
  font-variant-numeric:oldstyle-nums proportional-nums;
  font-kerning:normal;
  overflow-x:hidden;
}
body.has-dialog{overflow:hidden}
::selection{background:var(--sel-bg);color:var(--sel-fg)}
:focus-visible{outline:2px solid var(--stamp);outline-offset:3px}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:1.5px}
p{margin:0}
svg{flex:none}
button{font:inherit;color:inherit}
h1,h2,h3{
  margin:0;
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:-.018em;
  line-height:1.04;
  text-wrap:balance;
  color:var(--ink);
  font-variant-numeric:lining-nums;
}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:min(var(--measure),100% - 2*var(--gutter) - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));margin-inline:auto}
[id]{scroll-margin-top:20px}

.skip{position:absolute;left:16px;top:-80px;z-index:60;padding:10px 16px;background:var(--ink);color:var(--on-ink);font:500 .95rem/1.2 var(--sans);text-decoration:none;border-radius:2px}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

/* Buttons. Solid ink rectangles, an outlined quiet variant, underlined text buttons. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.72em 1.4em;
  border:1.5px solid var(--ink);border-radius:2px;
  background:var(--ink);color:var(--on-ink);
  font:500 1rem/1.2 var(--sans);letter-spacing:.004em;
  text-decoration:none;text-align:center;cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn-quiet{background:transparent;color:var(--ink)}
.btn-quiet:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.btn-small{min-height:40px;padding:.5em 1em;font-size:.94rem;white-space:nowrap}
.text-btn{
  display:inline-flex;align-items:center;min-height:44px;padding:0;
  background:none;border:0;cursor:pointer;
  font:500 1rem/1.2 var(--sans);color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;
  -webkit-tap-highlight-color:transparent;
}
.text-btn:hover{text-decoration-thickness:2px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.text-actions{display:inline-flex;flex-wrap:wrap;gap:0 20px;margin-left:10px}

/* Masthead */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:20px 8px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;font:600 1.06rem/1 var(--sans);letter-spacing:-.01em;white-space:nowrap}
.brand-mark{width:30px;height:30px;color:var(--ink)}
.masthead-when{font:500 .95rem/1.3 var(--sans);color:var(--graphite);font-variant-numeric:lining-nums}
@media (max-width:760px){.masthead-when{display:none}}

/* Ad 1: the letter */
.ad{padding-block:var(--space)}
.ad-letter{padding-top:0}
.stage{position:relative;height:clamp(300px,41vw,600px)}
.stage .art-chair{position:absolute;left:7%;bottom:0;height:86%;width:auto;aspect-ratio:320/470}
.headline{font-size:clamp(2.3rem,1.35rem + 3.85vw,4.55rem);margin-top:clamp(18px,2.4vw,36px)}
.letter-copy{columns:3 16em;column-gap:clamp(28px,3.4vw,54px);margin-top:clamp(28px,3.6vw,52px)}
.letter-copy p,.copy p{margin:0 0 .95em;orphans:3;widows:3;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
.salutation{font-style:italic}
.fn{text-decoration:none;font-size:.78em;line-height:0;vertical-align:.34em;padding-inline:1px 2px}
.fn:hover{text-decoration:underline}
.signature{break-inside:avoid;margin-top:1.5em!important}
.sig{display:block;font:italic 400 2em/1 var(--serif);margin-bottom:.3em}
.sig-name{display:block;font:500 .9rem/1.4 var(--sans);color:var(--graphite)}
.ad-foot{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:clamp(34px,4.4vw,60px)}
.roundel{display:block;width:clamp(46px,4.6vw,60px);height:auto;aspect-ratio:1;color:var(--ink)}
.footnote{margin-top:24px;max-width:46em;font-size:.84rem;line-height:1.55;color:var(--graphite)}
.footnote a{color:var(--ink)}

/* Spreads: one object, one argument */
.spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,7vw,124px);align-items:center}
.spread-art{margin:0;display:flex;justify-content:center;align-items:center}
.art-tote{width:min(100%,400px);height:auto}
.art-cal{width:min(100%,470px);height:auto}
.h2{font-size:var(--h2);margin-bottom:.62em}
.copy{max-width:33em}
.asklist{margin:1.55em 0 1.6em}
.asklist-title{font:600 1.12rem/1.3 var(--sans);letter-spacing:-.008em;margin:0 0 .75em!important}
.asklist ul{list-style:none;margin:0;padding:0}
.asklist li{position:relative;padding-left:1.95em;margin:0 0 .55em}
.asklist li::before{content:"";position:absolute;left:0;top:.28em;width:1em;height:1em;border:1.5px solid currentColor;border-radius:1px}

/* Prices */
.prices{list-style:none;margin:1.9em 0 .6em;padding:0;max-width:33em}
.price{display:block;padding:10px 0 11px;color:var(--ink);text-decoration:none}
.price-row{display:flex;align-items:baseline;gap:.6em;font:600 1.14rem/1.3 var(--sans);letter-spacing:-.006em;font-variant-numeric:lining-nums}
.price-name{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:.24em;transition:text-decoration-color .16s ease}
.price:hover .price-name{text-decoration-color:currentColor}
.leader{flex:1;min-width:1.5em;border-bottom:2px dotted var(--leader);position:relative;top:-.3em}
.price-amt{font-variant-numeric:lining-nums tabular-nums}
.price-note{display:block;margin-top:.1em;font-size:.95rem;font-style:italic;color:var(--graphite)}
.note{max-width:33em;margin:1.15em 0 0;font-size:.92rem;line-height:1.55;color:var(--graphite)}
.note b{font-family:var(--sans);font-weight:600;color:var(--ink)}
.code-box{max-width:33em;margin:1.4em 0 0;padding:18px 20px 16px;border:1.5px solid var(--ink)}
.code-head{font:500 .9rem/1.3 var(--sans);color:var(--graphite)}
.code-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:6px}
.code-value{font:600 1.65rem/1.1 var(--sans);letter-spacing:.05em;font-variant-numeric:lining-nums}
.code-terms,.code-disclosure{margin-top:10px;font-size:.9rem;line-height:1.5;color:var(--graphite)}

/* Ad 4: the coupon */
.coupon-intro{max-width:36em;margin-bottom:clamp(40px,5vw,68px)}
.coupon-intro p{font-size:1.06rem}
.coupon-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,5.4vw,84px);align-items:start}
.coupon{position:relative;border:2px dashed var(--ink);padding:clamp(26px,3vw,40px) clamp(20px,3vw,38px) clamp(22px,2.6vw,32px)}
.scissors{position:absolute;top:-12px;left:clamp(22px,3vw,38px);width:22px;height:22px;padding:0 6px;box-sizing:content-box;background:var(--paper);color:var(--ink)}
.coupon-title{font:600 clamp(1.3rem,1.08rem + .75vw,1.62rem)/1.14 var(--sans);letter-spacing:-.014em;text-wrap:balance}
.coupon-sub{margin-top:.45em;font-size:.94rem;font-style:italic;color:var(--graphite)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;margin-top:26px}
.field{display:flex;flex-direction:column;gap:2px;min-width:0}
.field.full{grid-column:1/-1}
.field-label{font:500 .86rem/1.3 var(--sans);color:var(--graphite)}
.field input,.field textarea{
  width:100%;margin:0;padding:6px 0 7px;
  border:0;border-bottom:1.5px solid var(--ink);border-radius:0;
  background:transparent;color:var(--ink);
  font:400 1.02rem/1.45 var(--serif);
  -webkit-appearance:none;appearance:none;
}
.field textarea{resize:none;overflow:hidden;min-height:3.9em}
.field input::placeholder,.field textarea::placeholder{color:var(--graphite);opacity:.72;font-style:italic}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--stamp);box-shadow:0 1.5px 0 var(--stamp)}
.coupon-privacy{margin-top:26px;font-size:.88rem;color:var(--graphite)}
.sheet-caption{margin:0 0 16px;font-size:.96rem;font-style:italic;color:var(--graphite)}
.sheet-stack{position:relative;isolation:isolate}
.sheet-stack::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sheet);box-shadow:0 0 0 1px var(--sheet-edge),0 16px 36px -20px var(--shadow);transform:rotate(1.25deg) translate(4px,6px)}
.sheet{position:relative;padding:clamp(22px,3vw,42px);background:var(--sheet);box-shadow:0 0 0 1px var(--sheet-edge),0 1px 2px var(--sheet-edge),0 22px 44px -24px var(--shadow)}
.sheet-subject{margin:0 0 16px;padding-bottom:13px;border-bottom:1px solid var(--rule);font:500 .95rem/1.4 var(--sans);font-variant-numeric:lining-nums}
.note-area{display:block;width:100%;min-height:22rem;margin:0;padding:0;border:0;background:transparent;color:var(--ink);font:400 1rem/1.64 var(--serif);resize:none;overflow:hidden}
.note-area:focus-visible{outline-offset:10px}
.helper{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin:16px 0 12px;font-size:.88rem;color:var(--graphite)}
.helper .text-btn{font-size:.9rem;min-height:36px}
.tip{margin-top:14px;font-size:.86rem;color:var(--graphite)}

/* Closing */
.closing{text-align:center}
.closing .roundel{width:clamp(60px,6vw,80px);margin:0 auto clamp(26px,3vw,38px)}
.closing h2{font-size:clamp(2.2rem,1.3rem + 3vw,3.9rem)}
.closing p{max-width:30em;margin:.85em auto 1.9em;font-size:1.12rem}
.closing .actions{justify-content:center}

/* Small print */
.smallprint{padding-block:0 clamp(64px,8vw,112px)}
.smallprint-inner{border-top:1.5px solid var(--ink);padding-top:clamp(24px,3vw,36px)}
.smallprint h2{font-size:clamp(1.55rem,1.15rem + 1.25vw,2.15rem);margin-bottom:clamp(16px,2vw,26px)}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,4.6vw,72px)}
.faq-col{display:flex;flex-direction:column}
details{border-bottom:1px solid var(--rule)}
summary{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:17px 0;cursor:pointer;list-style:none;font:600 1.08rem/1.32 var(--sans);letter-spacing:-.006em;-webkit-tap-highlight-color:transparent}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;font-weight:400;font-size:1.35em;line-height:.8;color:var(--graphite)}
details[open] summary::after{content:"\2212"}
summary:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
details p{padding:0 0 20px;max-width:34em;hyphens:auto;-webkit-hyphens:auto}
details .text-btn{margin-top:4px}

/* Footer */
.footer{padding-block:0 clamp(40px,5vw,64px)}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding-bottom:18px}
.footer-top p{font-size:.95rem;color:var(--graphite)}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;font:500 .95rem/1.2 var(--sans)}
.footer-links a{display:inline-flex;align-items:center;min-height:44px}
.footer-links .text-btn{font-size:.95rem}
.fineprint{max-width:60em;font-size:.8rem;line-height:1.55;color:var(--graphite)}
.fineprint a{color:var(--ink)}
.config-status{margin-top:10px;font:500 .78rem/1.4 var(--sans);color:var(--graphite)}
.config-status:empty{display:none}
.print-only{display:none}
.noscript-note{padding:14px 0;font-size:.95rem;color:var(--graphite)}

/* Dialog */
dialog{
  width:min(640px,100% - 28px);
  max-height:calc(100dvh - 28px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;
  border:0;border-radius:3px;
  background:var(--sheet);color:var(--ink);
  box-shadow:0 0 0 1px var(--sheet-edge),0 30px 80px -24px rgba(0,0,0,.5);
}
dialog::backdrop{background:var(--backdrop)}
.dialog-inner{position:relative;padding:clamp(24px,4vw,38px)}
.dialog-close{position:absolute;top:10px;right:14px;font-size:.94rem}
.dialog-cap{margin:0 0 10px;padding-right:64px;font-size:.96rem;font-style:italic;color:var(--graphite)}
.dialog-inner h2{font-size:clamp(1.9rem,1.4rem + 1.6vw,2.5rem)}
.dialog-intro{margin-top:.6em}
.dialog-inner .fields{margin-top:18px;gap:18px 24px}
.dialog-note{margin-top:22px}
.dialog-note .note-area{min-height:12rem;max-height:min(19rem,38vh);overflow:auto;padding:14px 16px;border:1px solid var(--rule);border-radius:2px;background:var(--paper);font-size:.96rem;line-height:1.55}
.dialog-note .field-label{display:block;margin-bottom:8px}
.dialog-status{min-height:1.5em;margin-top:10px;font:500 .9rem/1.4 var(--sans);color:var(--ink)}

/* Toast */
.toast-wrap{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;padding:0 16px calc(20px + env(safe-area-inset-bottom,0px));pointer-events:none}
.toast{max-width:34rem;padding:12px 18px;border-radius:2px;background:var(--ink);color:var(--on-ink);font:500 .95rem/1.4 var(--sans);opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease}
.toast.visible{opacity:1;transform:none}
.toast:empty{display:none}

/* The one motion moment: the tag swings once, as if someone just left. */
.tag-swing{transform-box:view-box;transform-origin:232px 92px;animation:swing 3.4s ease-in-out .5s both}
@keyframes swing{0%{transform:rotate(16deg)}17%{transform:rotate(-10deg)}35%{transform:rotate(6deg)}52%{transform:rotate(-3.4deg)}68%{transform:rotate(1.7deg)}84%{transform:rotate(-.6deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.tag-swing{animation:none}.btn,.toast,.price-name{transition:none}}

/* Illustrations */
.art{display:block;overflow:visible}
.st-chair-hi{stop-color:var(--chair-hi)}.st-chair-mid{stop-color:var(--chair-mid)}.st-chair-lo{stop-color:var(--chair-lo)}.st-chair-deep{stop-color:var(--chair-deep)}
.st-chrome-lo{stop-color:var(--chrome-lo)}.st-chrome-mid{stop-color:var(--chrome-mid)}.st-chrome-hi{stop-color:var(--chrome-hi)}
.c-floor,.c-contact{fill:var(--floor)}
.c-leg-side,.c-caster,.c-deep{fill:var(--chair-deep)}
.c-caster-hi{fill:#fff;fill-opacity:.14}
.c-chair-mid{fill:var(--chair-mid)}
.c-lever{stroke:var(--chair-deep)}
.c-string{stroke:var(--string)}
.c-hole{fill:var(--paper)}
.st-canvas-hi{stop-color:var(--canvas-hi)}.st-canvas{stop-color:var(--canvas)}.st-canvas-shade{stop-color:var(--canvas-shade)}.st-canvas-deep{stop-color:var(--canvas-deep)}
.c-strap{stroke:var(--canvas)}.c-strap-back{stroke:var(--canvas-shade)}
.c-strap-edge{stroke:var(--canvas-deep);stroke-opacity:.55}.c-strap-shadow{stroke:var(--canvas-deep);stroke-opacity:.5}
.c-fold{fill:var(--canvas-deep);opacity:.35}
.c-stitch{stroke:#000;stroke-opacity:.2;stroke-width:.9;stroke-dasharray:2.2 2.8}
.c-edge{stroke:var(--canvas-deep);stroke-opacity:.6}
.c-card{fill:var(--sheet);stroke:var(--card-edge);stroke-width:.8}
.c-wire rect{fill:none;stroke:var(--wire);stroke-width:1.5}
.c-hole-cal{fill:var(--paper);stroke:var(--card-edge);stroke-width:.6}
.c-cal-month{font:600 33px var(--sans);fill:var(--ink);letter-spacing:-.4px}
.c-cal-year{font:400 33px var(--sans);fill:var(--graphite)}
.c-cal-rule{stroke:var(--ink);stroke-width:1.2}
.c-cal-days{font:500 12px var(--sans);fill:var(--graphite);letter-spacing:.5px}
.c-cal-dates{font:400 19px var(--sans);fill:var(--ink)}
.c-ring{fill:none;stroke:var(--stamp);stroke-width:2.4;stroke-linecap:round}

/* Responsive */
@media (max-width:900px){
  .coupon-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .spread{grid-template-columns:1fr;gap:clamp(28px,6vw,48px)}
  .spread-art{order:-1}
  .art-tote{width:min(78%,330px)}
  .art-cal{width:min(88%,420px)}
  .faq{grid-template-columns:1fr}
}
@media (max-width:620px){
  .stage{height:clamp(280px,82vw,420px)}
  .stage .art-chair{left:4%;height:90%}
  .ad-foot{flex-direction:column;align-items:stretch;gap:18px}
  .ad-foot .actions{flex-direction:column;align-items:stretch}
  .ad-foot .actions .btn{width:100%}
  .text-actions{margin:2px 0 0}
  .ad-foot .roundel{align-self:flex-end;margin-top:-58px}
  .closing .actions{flex-direction:column;align-items:stretch}
  .coupon-grid .actions .btn,.dialog-actions .btn{flex:1 1 100%}
}
@media (max-width:480px){
  .fields{grid-template-columns:1fr}
  .masthead .btn-small{padding-inline:.85em}
}
@media (max-width:370px){
  .masthead{gap:12px}
  .masthead .brand-city{display:none}
}

/* Print: the letter on one A4 page */
@media print{
  :root:root:root{
    --paper:#fff;
    --sheet:#fff;
    --ink:#181715;
    --graphite:#625f58;
    --rule:#d7d3c8;
    --stamp:#55409a;
    --on-ink:#f8f7f3;
    --btn-hover:#3b3934;
    --sheet-edge:rgba(24,23,21,.07);
    --shadow:rgba(44,36,22,.26);
    --leader:rgba(24,23,21,.34);
    --sel-bg:#55409a;
    --sel-fg:#fff;
    --backdrop:rgba(24,22,18,.5);
    --chair-hi:#46433f;
    --chair-mid:#2c2a27;
    --chair-lo:#171614;
    --chair-deep:#0c0c0b;
    --chrome-lo:#5f5c57;
    --chrome-mid:#a9a69f;
    --chrome-hi:#f2f1ec;
    --floor:rgba(34,30,24,.34);
    --string:#a89877;
    --canvas-hi:#f1ecdf;
    --canvas:#e7dfcb;
    --canvas-shade:#d0c5aa;
    --canvas-deep:#a79a7c;
    --card-edge:#ddd8cc;
    --wire:#8e8a82;
    --grain:none;
  }
  @page{size:A4;margin:14mm 16mm}
  html,body{background:#fff!important}
  body{font-size:10.5pt;line-height:1.46}
  .skip,.masthead,.ad:not(.ad-letter),.smallprint,.footer,dialog,.toast-wrap,.js-only,.ad-foot .actions,.noscript-note{display:none!important}
  .ad-letter{padding:0}
  .stage{height:62mm}
  .stage .art-chair{height:100%}
  .headline{font-size:30pt;margin-top:5mm}
  .letter-copy{columns:3;column-gap:7mm;margin-top:6mm}
  .ad-foot{margin-top:5mm}
  .roundel{width:12mm}
  .footnote{margin-top:3mm;font-size:8pt}
  .tag-swing{animation:none!important}
  .c-sheen{display:none}
  .print-only{display:block;margin-top:4mm;font:500 9pt/1.4 var(--sans);color:#333}
  a{text-decoration:none}
}


/* --------------------------------------------------------------------------
   CURIOUS EMPLOYEE / THE PRINT EDITION
   Visual-only layer. All original markup, copy, IDs and JavaScript are retained.
   Keep this after the base stylesheet. No assets or font binaries are bundled.
   -------------------------------------------------------------------------- */

:root {
  --paper: #f9f9f6;
  --sheet: #fdfdfa;
  --ink: #141412;
  --graphite: #575750;
  --rule: #cecec5;
  --stamp: #141412;
  --on-ink: #f9f9f6;
  --btn-hover: #373732;
  --sheet-edge: rgba(20,20,18,.13);
  --shadow: transparent;
  --leader: rgba(20,20,18,.35);
  --sel-bg: #24241f;
  --sel-fg: #fff;
  --backdrop: rgba(20,20,18,.55);
  --sans: Jost, Futura, "Futura PT", "URW Gothic", "Century Gothic", "Avenir Next", Arial, sans-serif;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --typewriter: "Courier New", Courier, monospace;
  --gutter: clamp(22px,5.2vw,76px);
  --measure: 1020px;
  --space: clamp(82px,8vw,120px);
  --h2: clamp(2.15rem,1.1rem + 3.3vw,3.3rem);
  /* A paper tint, not an artificial aged-paper effect. */
  --grain: none;
  --chair-hi: #565650;
  --chair-mid: #292927;
  --chair-lo: #161615;
  --chair-deep: #0c0c0b;
  --chrome-lo: #53534e;
  --chrome-mid: #a3a39b;
  --chrome-hi: #f6f6ef;
  --floor: rgba(20,20,18,.23);
  --canvas-hi: #efefe8;
  --canvas: #dfdfd5;
  --canvas-shade: #bfbfb3;
  --canvas-deep: #959588;
  --card-edge: #cacac0;
  --wire: #6c6c64;
}

/* Preserve the original automatic/explicit dark-theme support. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #191917; --sheet: #20201d; --ink: #ecece3;
    --graphite: #b2b2a6; --rule: #41413a; --stamp: #ecece3;
    --on-ink: #191917; --btn-hover: #d0d0c5;
    --sheet-edge: rgba(236,236,227,.2); --shadow: transparent;
    --leader: rgba(236,236,227,.35); --sel-bg: #ecece3; --sel-fg: #191917;
    --backdrop: rgba(0,0,0,.65); --grain: none;
    --chair-hi: #949489; --chair-mid: #696961;
    --chair-lo: #484843; --chair-deep: #2f2f2b;
    --chrome-lo: #717169; --chrome-mid: #b0b0a4; --chrome-hi: #eeeeE3;
    --floor: rgba(0,0,0,.38); --canvas-hi: #dfdfd3; --canvas: #c9c9bb;
    --canvas-shade: #aaaa9b; --canvas-deep: #838373;
    --card-edge: #42423a; --wire: #919186;
  }
}
:root[data-theme="dark"] {
  --paper: #191917; --sheet: #20201d; --ink: #ecece3;
  --graphite: #b2b2a6; --rule: #41413a; --stamp: #ecece3;
  --on-ink: #191917; --btn-hover: #d0d0c5;
  --sheet-edge: rgba(236,236,227,.2); --shadow: transparent;
  --leader: rgba(236,236,227,.35); --sel-bg: #ecece3; --sel-fg: #191917;
  --backdrop: rgba(0,0,0,.65); --grain: none;
  --chair-hi: #949489; --chair-mid: #696961;
  --chair-lo: #484843; --chair-deep: #2f2f2b;
  --chrome-lo: #717169; --chrome-mid: #b0b0a4; --chrome-hi: #eeeee3;
  --floor: rgba(0,0,0,.38); --canvas-hi: #dfdfd3; --canvas: #c9c9bb;
  --canvas-shade: #aaaa9b; --canvas-deep: #838373;
  --card-edge: #42423a; --wire: #919186;
}

body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.58;
  font-variant-numeric: lining-nums proportional-nums;
  background-image: none;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 {
  font-weight: 700;
  letter-spacing: -.038em;
  line-height: 1.05;
  text-wrap: balance;
}
:focus-visible {outline-width:2px;outline-offset:5px}
.btn {
  border-radius:0;
  border-width:1px;
  min-height:48px;
  padding:.84em 1.2em .82em;
  font:600 .93rem/1.15 var(--sans);
  letter-spacing:0;
}
.btn-small {min-height:44px;padding:.6em .9em;font-size:.88rem}
.text-btn {font:500 .91rem/1.3 var(--sans);text-underline-offset:.24em}
.actions {gap:12px 16px}
.text-actions {margin-left:6px;gap:0 20px}

/* The brand sits quietly above the advertisement. */
.masthead {
  padding-block:24px 17px;
  gap:24px;
  border-bottom:1px solid var(--ink);
}
.brand {gap:9px;font-size:.91rem;font-weight:600;letter-spacing:-.025em}
.brand-mark {width:25px;height:25px}
.masthead-when {font:400 .75rem/1.4 var(--body);color:var(--ink)}
.masthead .btn {
  padding:0;
  min-height:44px;
  background:none;
  color:var(--ink);
  border:0;
  font-size:.83rem;
  text-decoration:underline;
  text-underline-offset:5px;
}
.masthead .btn:hover {text-decoration-thickness:2px}

/* One deliberately small object, off centre, in an otherwise empty field. */
.ad-letter {padding-top:0;padding-bottom:94px}
.stage {height:410px}
.stage .art-chair {
  height:258px;
  width:auto;
  left:18%;
  bottom:72px;
  filter:grayscale(1) contrast(1.12);
}
.tag-swing {animation:none}
.headline {
  font-size:clamp(2.3rem,1rem + 4vw,4.625rem);
  max-width:990px;
  margin-top:0;
  letter-spacing:-.044em;
  line-height:1.02;
  text-wrap:balance;
}
.letter-copy {
  columns:3;
  column-gap:36px;
  margin-top:32px;
  font:400 15px/1.56 var(--body);
}
.letter-copy p {
  margin-bottom:.6em;
  hyphens:none;
  -webkit-hyphens:none;
  text-wrap:pretty;
  orphans:2;widows:2;
}
.letter-copy p:not(:first-child):not(.signature) {text-indent:1em}
.salutation {font-style:normal}
.letter-copy .signature {margin-top:1.1em!important;text-indent:0}
.sig {font-size:2.1rem;margin-bottom:9px;letter-spacing:-.07em}
.sig-name {font:400 .76rem/1.45 var(--body)}
.ad-foot {margin-top:34px;gap:24px;align-items:flex-start}
.ad-foot .actions {row-gap:12px;max-width:890px}
.ad-foot .roundel {width:43px;margin-top:3px}
.footnote {font:400 .76rem/1.55 var(--body);margin-top:20px;max-width:56em}

/* Each following panel is treated like a separate page in the campaign. */
.ad:not(.ad-letter) {border-top:1px solid var(--ink)}
.spread {gap:clamp(40px,6vw,86px);align-items:center}
.spread:not(#tickets) {grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr)}
.h2 {margin-bottom:26px;font-size:var(--h2);max-width:19ch;line-height:1.05}
.copy {max-width:31em;font-size:1rem;line-height:1.6}
.copy p {margin-bottom:.9em;hyphens:none;-webkit-hyphens:none}
.art-tote {width:min(100%,265px);filter:grayscale(1) contrast(1.08)}
.spread:not(#tickets) .spread-art {padding-top:50px}
.asklist {margin:25px 0 24px}
.asklist-title {font-size:1rem;font-weight:600;letter-spacing:-.025em;margin-bottom:12px!important}
.asklist li {font-size:.97rem;padding-left:1.8em;margin-bottom:.6em}
.asklist li::before {width:12px;height:12px;top:.43em;border:1px solid var(--ink);border-radius:0}

#tickets {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px}
#tickets .spread-art {align-self:start;padding-top:70px}
.art-cal {width:min(100%,300px);filter:grayscale(1)}
.c-cal-year {font-weight:400}
.c-ring {stroke:var(--ink)}
#tickets .h2 {max-width:12ch}
.prices {margin-top:24px;border-top:1px solid var(--ink)}
.price {padding:15px 0 14px;border-bottom:1px solid var(--rule)}
.price-row {font-size:1.04rem;font-weight:600;letter-spacing:-.02em}
.price-note {font:.79rem/1.5 var(--body);font-style:normal;margin-top:5px}
.leader {border-bottom:1px dotted var(--leader);top:-.3em}
.note {font-size:.82rem;line-height:1.55;margin-top:18px}
.code-box {padding:19px 20px;border:1px dashed var(--ink);margin-top:22px}
.code-head {font-size:.85rem}
.code-value {font-size:1.55rem}
.code-terms,.code-disclosure {font-size:.78rem;line-height:1.6}
#tickets .footnote {font-size:.74rem;margin-top:18px}

/* A proper mail-in coupon. Plain rules, perforations and typewritten replies. */
.coupon-intro {max-width:620px;margin-bottom:40px}
.coupon-intro .h2 {max-width:none;font-size:clamp(2.15rem,1.2rem + 3.6vw,3.55rem)}
.coupon-intro p {font-size:1rem;max-width:37em}
.coupon-grid {grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:38px}
.coupon {border:1px dashed var(--ink);padding:30px 26px;background:transparent}
.scissors {top:-12px;left:22px;width:19px;height:22px}
.coupon-title {font-size:1.36rem;font-weight:600;line-height:1.18;letter-spacing:-.028em}
.coupon-sub {font:.8rem/1.5 var(--serif);font-style:italic;margin-top:10px}
.fields {gap:22px 20px;margin-top:28px}
.field-label {font:500 .78rem/1.35 var(--sans);letter-spacing:0}
.field input,.field textarea {
  font:400 1rem/1.5 var(--typewriter);
  border-bottom:1px solid var(--ink);
  padding:9px 0 8px;
}
.field input::placeholder,.field textarea::placeholder {font-style:normal;opacity:.9}
.field textarea {min-height:5.2em}
#question {min-height:6.3em}
.field input:focus,.field textarea:focus {box-shadow:0 1px 0 var(--ink)}
.coupon-privacy {margin-top:27px;font:.75rem/1.55 var(--body)}
.sheet-caption {font:italic 400 1rem/1.4 var(--serif);margin-bottom:17px}
.sheet-stack::before {display:none}
.sheet {
  border:1px solid var(--ink);
  padding:26px;
  background:transparent;
  box-shadow:none;
}
.sheet-subject {font:500 .79rem/1.5 var(--sans);padding-bottom:16px;margin-bottom:19px;border-bottom:1px solid var(--ink)}
.note-area {font:400 .87rem/1.65 var(--typewriter);min-height:22rem}
.helper {font:.75rem/1.55 var(--body);margin-top:20px}
.helper .text-btn {font-size:.8rem}
.tip {font:.73rem/1.55 var(--body);margin-top:12px}
.sheet .actions {gap:10px}
.sheet .btn {font-size:.86rem;padding-inline:1em;min-height:45px}

/* Final signature: one thought, a small roundel, room to breathe. */
.closing {position:relative;text-align:left;padding-block:104px 98px}
.closing .roundel {position:absolute;bottom:105px;right:0;width:52px;margin:0}
.closing h2 {font-size:clamp(2.5rem,1.3rem + 4.1vw,4.8rem);line-height:1.03;max-width:17ch;letter-spacing:-.045em}
.closing p {font-size:1rem;line-height:1.6;max-width:30em;margin:24px 0 28px}
.closing .actions {justify-content:flex-start;padding-right:0}

.smallprint {padding-block:0 58px}
.smallprint-inner {padding-top:32px;border-top:1px solid var(--ink)}
.smallprint h2 {font-size:1.7rem;letter-spacing:-.03em;max-width:28ch;margin-bottom:22px}
.faq {gap:0 54px}
summary {font-size:.97rem;font-weight:600;line-height:1.4;padding:18px 0;letter-spacing:-.016em}
summary::after {font-size:1.2rem}
details p {font-size:.9rem;line-height:1.6;padding-bottom:22px;hyphens:none;-webkit-hyphens:none}
.footer {padding-bottom:36px}
.footer-top {gap:12px 24px;padding-bottom:15px}
.footer-top .brand {font-size:.88rem}
.footer-top p {font:.76rem/1.55 var(--body);max-width:25em}
.footer-links {gap:0 18px;font-size:.8rem}
.footer-links .text-btn {font-size:.83rem}
.fineprint {font-size:.71rem;line-height:1.65;max-width:90em}
.config-status {font:.72rem/1.6 var(--typewriter);margin-top:10px}

/* Dialogs use the same paper-and-ink system as the page. */
dialog {border:1px solid var(--ink);border-radius:0;box-shadow:0 24px 80px rgba(0,0,0,.15);background:var(--paper)}
.dialog-inner {padding:34px}
.dialog-close {top:12px;right:20px;font-size:.84rem}
.dialog-cap {font:italic 400 .9rem/1.4 var(--serif);margin-top:13px;margin-bottom:14px}
.dialog-inner h2 {font-size:2.3rem;max-width:15ch;letter-spacing:-.04em}
.dialog-intro {font-size:.92rem;margin-top:14px}
.dialog-inner .fields {margin-top:24px}
.dialog-note .note-area {background:transparent;border:1px solid var(--rule);border-radius:0;font:.86rem/1.6 var(--typewriter)}
.dialog-status {font-size:.84rem}
.toast {border-radius:0;font-size:.88rem}

@media (min-width:1700px) {
  :root {--measure:1120px}
  .stage {height:450px}
  .stage .art-chair {height:280px;bottom:80px}
  .headline {max-width:1060px;font-size:78px}
  .letter-copy {font-size:16px;column-gap:40px}
}
@media (max-width:1050px) and (min-width:701px) {
  .letter-copy {columns:2;column-gap:32px;font-size:15.5px}
  .stage {height:360px}
  .stage .art-chair {height:236px;bottom:56px}
  .headline {font-size:clamp(46px,6.2vw,66px)}
  .ad-foot .actions {max-width:100%}
  .text-actions {margin-left:0;flex-basis:100%}
  #tickets {gap:40px}
}
@media (max-width:900px) {
  .coupon-grid {grid-template-columns:1fr;gap:32px}
  .sheet {padding:30px}
}
@media (max-width:820px) {
  .spread:not(#tickets), #tickets {grid-template-columns:1fr;gap:30px}
  .spread-art {order:-1}
  .spread:not(#tickets) .spread-art,#tickets .spread-art {padding-top:0;min-height:240px}
  .art-tote {width:210px}
  .art-cal {width:250px}
  .spread-copy,.copy {max-width:100%}
  .h2 {max-width:20ch}
  #tickets .h2 {max-width:100%}
  .faq {grid-template-columns:1fr}
  .masthead-when {display:none}
}
@media (max-width:700px) {
  :root {--gutter:24px;--space:72px}
  .masthead {padding-block:13px 12px;gap:16px}
  .brand {font-size:.85rem;gap:8px}
  .brand-mark {width:23px;height:23px}
  .masthead .btn {font-size:.78rem}
  .stage {height:262px}
  .stage .art-chair {height:199px;left:14%;bottom:33px}
  .headline {font-size:clamp(35px,7.7vw,49px);line-height:1.075;max-width:580px;letter-spacing:-.038em;text-wrap:balance}
  .letter-copy {columns:1;font-size:16px;line-height:1.62;margin-top:25px}
  .letter-copy p {margin-bottom:.75em}
  .letter-copy p:not(:first-child):not(.signature) {text-indent:0}
  .letter-copy .signature {margin-top:24px!important}
  .sig-name {font-size:.78rem}
  .ad-letter {padding-bottom:65px}
  .ad-foot {margin-top:28px;position:relative;display:block}
  .ad-foot .actions {max-width:none;display:flex;flex-direction:row;align-items:center;padding-right:0}
  .ad-foot .actions .btn {width:auto;flex:1 1 auto}
  .text-actions {display:flex;flex-basis:100%;margin:3px 0 0;gap:0 24px}
  .ad-foot .roundel {position:absolute;bottom:1px;right:0;width:36px;margin:0}
  .footnote {font-size:.73rem;margin-top:22px}
  .h2 {font-size:clamp(35px,7.3vw,47px);margin-bottom:24px;line-height:1.1}
  .copy {font-size:16px;line-height:1.65}
  .copy p {margin-bottom:1em}
  .closing {padding-block:75px 74px}
  .closing h2 {font-size:clamp(40px,8.1vw,56px);max-width:17ch;line-height:1.06}
  .closing p {font-size:16px;margin-top:23px}
  .closing .actions {padding-right:0;align-items:stretch;flex-direction:row;margin-right:0}
  .closing .roundel {position:static;width:38px;margin:0 0 28px}
  .closing .actions .btn {flex:1 1 auto}
  .smallprint h2 {font-size:1.5rem;max-width:24ch}
  .footer-top {align-items:flex-start;flex-direction:column;gap:8px}
  .footer-top p {max-width:none}
  .footer-links {gap:0 22px}
}
@media (max-width:480px) {
  :root {--gutter:22px}
  .stage {height:251px}
  .stage .art-chair {left:12%;height:191px;bottom:32px}
  .headline {font-size:clamp(34px,8.75vw,42px);line-height:1.08;letter-spacing:-.04em}
  .ad-foot .actions {gap:10px}
  .ad-foot .actions .btn {flex-basis:100%;width:100%}
  .text-actions {margin-top:6px;gap:0 20px}
  .spread:not(#tickets) .spread-art,#tickets .spread-art {min-height:210px}
  .art-tote {width:185px}
  .art-cal {width:235px}
  .coupon-intro .h2 {font-size:36px;line-height:1.08}
  .coupon-intro p {font-size:15.5px;line-height:1.65}
  .coupon {padding:28px 21px 24px}
  .coupon-title {font-size:1.34rem}
  .fields {grid-template-columns:1fr;gap:19px;margin-top:24px}
  .field-label {font-size:.8rem}
  .sheet {padding:22px 20px}
  .sheet .actions {flex-direction:column;align-items:stretch}
  .sheet .actions .btn {flex:1 1 100%;width:100%}
  .helper {gap:4px 8px}
  .helper .text-btn {font-size:.76rem}
  .closing .actions {flex-direction:column}
  .closing .btn {width:100%}
  .dialog-inner {padding:25px 21px}
  .dialog-cap {margin-top:23px;padding-right:0}
  .dialog-inner h2 {font-size:2rem}
  .dialog-close {top:8px;right:16px}
  .dialog-note .note-area {padding:14px 12px;font-size:.83rem}
  .dialog-actions {flex-direction:column;align-items:stretch}
  .dialog-actions .btn {width:100%;flex:1 1 100%}
}
@media (max-width:360px) {
  :root {--gutter:18px}
  .stage {height:231px}
  .stage .art-chair {height:178px;bottom:28px;left:9%}
  .headline {font-size:34px}
  .masthead {gap:12px}
  .brand {font-size:.8rem}
  .brand-city {display:none}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important}
}

/* Print overrides sit last, so the screen treatment cannot disturb the letter. */
@media print {
  :root:root:root {--paper:#fff;--sheet:#fff;--ink:#000;--graphite:#444;--rule:#aaa;--stamp:#000;--grain:none;--on-ink:#fff}
  @page {size:A4;margin:14mm 16mm}
  body {font:9pt/1.4 Arial,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .wrap {width:100%}
  .ad-letter {padding:0}
  .stage {height:55mm}
  .stage .art-chair {height:43mm;left:17%;bottom:6mm;filter:grayscale(1)}
  .headline {max-width:none;font-size:30pt;line-height:1.05;letter-spacing:-.04em;margin:0}
  .letter-copy {columns:3;column-gap:6mm;font:8.7pt/1.4 Arial,sans-serif;margin-top:6mm}
  .letter-copy p {margin-bottom:.6em}
  .letter-copy p:not(:first-child):not(.signature) {text-indent:1em}
  .sig {font-size:19pt}
  .sig-name {font-size:8pt}
  .ad-foot {display:none}
  .ad-foot .roundel {width:10mm;position:absolute;right:0;top:0;bottom:auto;margin:0}
  .footnote {font:7.2pt/1.4 Arial,sans-serif;margin-top:2mm}
  .print-only {font:8pt/1.4 Arial,sans-serif;margin-top:3mm}
  .ad:not(.ad-letter) {display:none!important}
}


/* Approved photographic chair, replacing the old vector hero only. */
.stage .chair-photo{aspect-ratio:auto;object-fit:contain;height:246px;filter:grayscale(1)}
@media(min-width:1700px){.stage .chair-photo{height:266px}}
@media(max-width:1050px) and (min-width:701px){.stage .chair-photo{height:225px}}
@media(max-width:700px){.stage .chair-photo{height:190px}}
@media(max-width:480px){.stage .chair-photo{height:182px}}
@media(max-width:360px){.stage .chair-photo{height:170px}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .chair-photo{filter:grayscale(1) brightness(1.65)}}
:root[data-theme="dark"] .chair-photo{filter:grayscale(1) brightness(1.65)}
@media print{.stage .chair-photo{height:41mm;filter:grayscale(1)!important}}


/* Landscape hero v2. Scoped so the rest of the approved page stays unchanged.
   The artwork remains intact at its natural aspect ratio, never cropped or stretched. */
.stage.hero-stage {
  position: relative;
  display: block;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: clamp(24px, 2.8vw, 38px) 0 clamp(28px, 3.1vw, 42px);
}
.hero-stage .hero-picture {
  display: block;
  width: min(100%, 840px);
  margin: 0 auto;
}
.hero-stage .hero-artwork {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
  margin: 0;
  border: 0;
  border-radius: 0;
  filter: none;
}
@media (max-width: 700px) {
  .stage.hero-stage {padding: 24px 0 28px;}
}
@media print {
  .stage.hero-stage {height: auto; padding: 0 0 5mm; break-inside: avoid;}
  .hero-stage .hero-picture {width: 105mm; max-width: 100%;}
  .hero-stage .hero-artwork {width: 100%; height: auto; filter: none !important;}
}

/* Supplied BP26 wordmark, with the existing light/dark theme behaviour. */
.masthead .brand-logo {
  display: block;
  width: clamp(104.45px, 10vw, 130.5625px);
  height: auto;
  filter: brightness(0);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .masthead .brand-logo {filter: none;}
}
:root[data-theme="dark"] .masthead .brand-logo {filter: none;}
@media print {
  .masthead .brand-logo {filter: brightness(0) !important;}
}