/*
Theme Name: Museum.Studio Site
Theme URI: https://museum.studio
Author: Museum.Studio
Description: The public website for Studio Operations by Museum.Studio. Six pages, built from the 12 October 2026 design handoff. Classic theme, no page builder.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: museum-studio-site
*/

/* ---------- Ground, type, resets ---------- */
:root{
  --ground:#26231f; --deep:#100f0e; --warm:#2c2620; --card:#211f1c; --hairline:#4b453e;
  --wine:#3b262b; --wine-deep:#24191c; --burgundy:#7a3f43; --rust:#b0400d; --rust-hover:#c64a15;
  --peach:#f0b79f; --paper:#f4f1ec; --paper-footer:#faf9f7; --ink:#1a1a19;
  --on-dark-lead:#d0cac2; --on-dark-body:#b8b2a9; --on-dark-quiet:#9b948a; --on-dark-nav:#a8a29a;
  --on-wine-soft:#d9c3bb; --on-wine-eyebrow:#c39a8c;
  --text-body:#5a554e; --text-muted:#6b665e; --text-quiet:#8b857c; --text-footer:#4a4741;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:56px;
}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#dedad3;color:var(--ink);font-family:var(--sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%}
a{color:var(--rust)}
a:hover{color:var(--rust-hover)}
p{margin:0}
button{font:inherit}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}
.screen-reader-text:focus{position:fixed!important;top:8px;left:8px;width:auto;height:auto;clip:auto;clip-path:none;padding:12px 16px;background:#fff;color:var(--ink);z-index:1000;border-radius:11px;font-size:14px}
:focus-visible{outline:3px solid var(--peach);outline-offset:3px}

/* The 1800px page on the desk */
.ms-page{position:relative;width:100%;max-width:1800px;margin:0 auto;background:var(--ground);color:#fff;overflow-x:clip;box-shadow:0 34px 100px rgba(0,0,0,.35)}
.ms-page.is-paper{background:var(--paper);color:var(--ink)}
@media (min-width:1801px){.ms-page{margin:72px auto 120px}}

/* Fluid type: exact at 1800, 44/34/17 on a 390px phone */
.h1{margin:28px 0 0;font-size:clamp(44px,35.15px + 2.27vw,76px);line-height:.95;font-weight:700;letter-spacing:-.045em;max-width:12em;text-wrap:pretty}
.h1--72{font-size:clamp(44px,36.25px + 1.986vw,72px);line-height:.96}
.h1__line{display:block;margin-top:.45em}
.h2{margin:24px 0 0;font-size:clamp(34px,29.02px + 1.277vw,52px);line-height:1.03;font-weight:700;letter-spacing:-.045em;max-width:14em;text-wrap:pretty}
.h2--nomax{max-width:none}
.statement{margin:24px 0 0;font-size:clamp(26px,23.8px + .567vw,34px);line-height:1.25;font-weight:700;letter-spacing:-.04em;text-wrap:pretty}
.lead{margin:34px 0 0;font-size:clamp(18px,17.17px + .213vw,21px);line-height:1.55;color:var(--on-dark-lead);max-width:30em;text-wrap:pretty}
.body19{margin:28px 0 0;font-size:clamp(17px,16.45px + .142vw,19px);line-height:1.65;color:var(--on-dark-lead);max-width:34em;text-wrap:pretty}
.body19 + .body19{margin-top:20px}
.body18{margin:28px 0 0;font-size:clamp(17px,16.72px + .071vw,18px);line-height:1.6;color:var(--on-dark-body);max-width:34em;text-wrap:pretty}
.eyebrow{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-quiet)}
.eyebrow--wine{color:var(--on-wine-eyebrow)}
.eyebrow--rust{color:#f7d6c8}
.eyebrow--paper{color:var(--text-quiet)}
.eyebrow--burgundy{color:var(--peach)}
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-quiet)}
.micro{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.monoline{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--on-dark-lead)}
.on-wine{color:var(--on-wine-soft)}
.on-dark-body{color:var(--on-dark-body)}
.max30{max-width:30em}.max32{max-width:32em}.max26{max-width:26em}.max34{max-width:34em}.max40{max-width:40em}

/* Buttons and pills */
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:var(--rust);color:#fff;font-size:16px;font-weight:600;line-height:1.5;padding:14px 22px;border-radius:11px;transition:transform .18s,background .18s;border:0;cursor:pointer}
.btn:hover,.btn:focus-visible{background:var(--rust-hover);color:#fff;transform:translateY(-2px)}
.pill{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-wine-soft);text-decoration:none;border:1px solid var(--hairline);padding:9px 14px;border-radius:999px;transition:color .18s;background:transparent;cursor:pointer;line-height:1.5}
.pill:hover,.pill:focus-visible{color:#fff}
.pill--light{border-color:rgba(255,255,255,.3)}
.pill--rust{background:var(--rust);border-color:var(--rust);color:#fff}
.pill--rust:hover{background:var(--rust-hover);border-color:var(--rust-hover)}
.cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cta__note{font-size:15px;color:var(--on-dark-body)}

/* Section rhythm */
.sec{padding-left:var(--gutter);padding-right:var(--gutter)}
.two{display:grid;gap:80px;align-items:center}
.two--880{grid-template-columns:minmax(0,1fr) min(880px,52.13%)}
.two--1000{grid-template-columns:minmax(0,1fr) min(1000px,59.24%)}
.two--1000-left{grid-template-columns:min(1000px,59.24%) minmax(0,1fr)}
.two--760{grid-template-columns:minmax(0,1fr) min(760px,45.02%)}
.two--650{grid-template-columns:minmax(0,1fr) min(650px,38.5%)}
.two--half{grid-template-columns:1fr 1fr}
.two--end{align-items:end}
.two--start{align-items:start}
.photo{border-radius:3px;overflow:hidden;background:var(--wine-deep)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo--43{aspect-ratio:4/3}
.photo--32{aspect-ratio:3/2}
.drawing{display:flex;justify-content:center;align-items:center;aspect-ratio:4/3}
.drawing img{height:100%;width:auto;max-width:100%;object-fit:contain}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:40px;padding:13px var(--gutter);background:rgba(38,35,31,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
.so-wordmark{display:flex;flex-direction:column;align-items:flex-start;padding-top:7px;font-family:StudioLogoInter,Inter,sans-serif;font-optical-sizing:none;color:#fff;text-decoration:none}
.so-wordmark:hover,.so-wordmark:focus,.so-wordmark:active{color:#fff;text-decoration:none}
.so-wordmark b{font-size:18px;font-weight:900;line-height:1.1;letter-spacing:-.013em;white-space:nowrap}
.so-wordmark em{color:#B0400D;font-style:normal}
.so-wordmark small{margin-top:2.16px;font-size:10px;font-weight:600;line-height:1.1;letter-spacing:-.025em}
.so-wordmark:focus-visible{outline:2px solid #fff;outline-offset:5px;border-radius:2px}
@media (max-width:760px){.so-wordmark b{font-size:16px}.so-wordmark small{font-size:9px}}
@media (max-width:480px){.so-wordmark b{font-size:15px}}
.site-nav{display:flex;align-items:center;gap:28px;margin-left:24px;font-size:14.5px;line-height:1.5}
.site-nav a{text-decoration:none;padding:4px 0 3px;border-bottom:2px solid transparent;color:var(--on-dark-nav);font-weight:400;transition:color .18s}
.site-nav a:hover{color:#fff}
.site-nav a.is-active{color:#fff;font-weight:600;border-bottom-color:var(--rust)}
.site-header__right{margin-left:auto;display:flex;align-items:center;gap:24px}
.site-header__signin{text-decoration:none;color:var(--on-dark-nav);font-size:14.5px;line-height:1.5;transition:color .18s}
.site-header__signin:hover{color:#fff}
.btn--small{font-size:13px;font-weight:700;padding:9px 15px;border-radius:10px;white-space:nowrap}
.btn--small:hover,.btn--small:focus-visible{transform:translateY(-1px)}
/* Phone and tablet menu: the three-line burger, turning into a cross when open. */
.menu-toggle{all:unset;display:none;cursor:pointer;position:relative;width:44px;height:44px;border-radius:10px;flex:none}
.menu-toggle__bars,.menu-toggle__bars::before,.menu-toggle__bars::after{position:absolute;width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .18s,background .18s}
.menu-toggle__bars{left:10px;top:21px}
.menu-toggle__bars::before,.menu-toggle__bars::after{content:"";left:0}
.menu-toggle__bars::before{top:-7px}
.menu-toggle__bars::after{top:7px}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars{background:transparent}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after{transform:translateY(-7px) rotate(-45deg)}
.menu-toggle:focus-visible{outline:3px solid var(--peach);outline-offset:3px}
.menu-panel{display:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--paper-footer);padding:40px var(--gutter) 34px;color:var(--ink)}
.site-footer__top{display:flex;align-items:flex-start;gap:48px;padding-bottom:28px;border-bottom:1px solid #e6e2dc}
.site-footer__brand{display:flex;flex-direction:column;gap:18px}
.ms-lockup{display:inline-flex;align-items:baseline;color:#000;text-decoration:none;font-family:StudioLogoInter,Inter,sans-serif;font-optical-sizing:none;font-weight:800;font-size:28px;line-height:1;letter-spacing:-.013em;white-space:nowrap}
.ms-lockup .ms-mark{flex:none;width:1.108em;height:1.108em;margin-right:.2906em;position:relative;top:.011em;fill:currentColor}
.ms-lockup:hover,.ms-lockup:focus{color:#000;text-decoration:none}
.site-footer__tag{font-size:17px;line-height:1.5;color:var(--text-footer);max-width:30em}
.site-footer__nav{margin-left:auto;display:flex;gap:28px;font-size:14.5px;line-height:1.5;flex-wrap:wrap}
.site-footer__nav a{color:var(--text-footer);text-decoration:none;transition:color .18s}
.site-footer__nav a:hover{color:var(--rust)}
.site-footer__bottom{display:flex;align-items:center;gap:24px;padding-top:22px;flex-wrap:wrap}
.site-footer__copy{font-size:13.5px;line-height:1.5;color:var(--text-quiet)}
.site-footer__copy a.site-footer__credit,.site-footer__copy a.site-footer__credit:hover,.site-footer__copy a.site-footer__credit:focus,.site-footer__copy a.site-footer__credit:visited{color:var(--text-quiet);text-decoration:none}
.to-top{margin-left:auto;text-decoration:none;background:#f0ede9;color:var(--text-footer);font-size:15px;font-weight:600;line-height:1.5;padding:9px 16px;border-radius:11px;transition:transform .18s;white-space:nowrap}
.to-top:hover{transform:translateY(-2px);color:var(--text-footer)}

/* ---------- ProductShot ---------- */
.shot{position:relative;overflow:hidden;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:#1a1a1a;container-type:inline-size;aspect-ratio:16/10;width:100%}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
.shot__panel{position:absolute;left:0;top:0;width:15.5%;height:9.6%;background:#1a1a1a;display:flex;align-items:center;padding-left:1.3cqw}
.ps-wordmark{display:flex;flex-direction:column;align-items:flex-start;font-family:StudioLogoInter,Inter,sans-serif;font-optical-sizing:none;color:#fff;text-decoration:none}
.ps-wordmark b{font-size:1cqw;font-weight:900;line-height:1.1;letter-spacing:-.013em;white-space:nowrap}
.ps-wordmark em{color:#B0400D;font-style:normal}
.ps-wordmark small{margin-top:.12cqw;font-size:.56cqw;font-weight:600;line-height:1.1;letter-spacing:-.025em;white-space:nowrap}
/* Full-page captures: same box as every other screen, cropped to the top; the modal lets them scroll. */
.shot--tall img{object-position:left top}
/* The whole page at its own height, wordmark panel kept. */
.shot--full{aspect-ratio:auto}
.shot--full img{position:static;display:block;width:100%;height:auto}
.shot--tall .shot__panel,.shot--full .shot__panel{height:6cqw}

/* Site window (browser frame) */
.sitewin{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.18)}
.sitewin__bar{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px}
.sitewin__bar i{width:7px;height:7px;border-radius:50%;background:var(--hairline);flex:none}
.sitewin__bar span{margin-left:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sitewin img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.sitewin--link{display:block;text-decoration:none;color:inherit;transition:transform .18s}
.sitewin--link:hover{transform:translateY(-3px)}

/* Paper card */
.paper-card{background:var(--paper);color:var(--ink);border-radius:12px;padding:22px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.paper-card b{font-size:17px;font-weight:700;letter-spacing:-.025em}
.paper-card span{font-size:13.5px;line-height:1.55;color:var(--text-body)}

/* ---------- FilmPlayer ---------- */
.film{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:var(--wine-deep);color:#fff;cursor:pointer}
.film__still{position:absolute;top:0;right:0;width:100%;height:100%;object-fit:cover;object-position:center}
.film--crop .film__still{width:118.5%;object-position:right top}
.film__shade{position:absolute;inset:0;background:rgba(16,15,14,.18)}
.film__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:0;background:rgba(250,249,247,.94);color:var(--ink);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding-left:5px;transition:transform .18s}
.film:hover .film__play{transform:translate(-50%,-50%) scale(1.04)}
.film__bar{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:16px;padding:10px 16px;border-radius:12px;background:rgba(38,35,31,.84);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.film__bar>span:first-child{font-size:12px;width:14px}
.film__scrub{flex:1;position:relative;height:14px;display:flex;align-items:center}
.film__scrub i{position:absolute;left:0;right:0;height:2px;background:rgba(255,255,255,.3)}
.film__scrub b{position:absolute;left:0;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff}
.film__time{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#f1ece6;white-space:nowrap}
.film__ctl{font-size:12px;color:#f1ece6;white-space:nowrap}
.film__notice{position:absolute;inset:0;z-index:5;background:rgba(16,15,14,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:8%;cursor:default}
.film.is-open .film__notice{display:flex}
.film__card{background:var(--paper);color:var(--ink);border-radius:12px;padding:28px 30px;max-width:520px;width:100%;display:flex;flex-direction:column;gap:12px}
.film__card .label{color:var(--rust)}
.film__card b{font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.03em;text-wrap:pretty}
.film__card span{font-size:15px;line-height:1.55;color:var(--text-body);text-wrap:pretty}
.film__card .pill{align-self:flex-start;margin-top:4px;color:#fff;background:var(--rust);border-color:var(--rust)}
.film__card .pill:hover{background:var(--rust-hover);border-color:var(--rust-hover)}
.film--compact .film__card{padding:18px 20px;gap:8px}
.film--compact .film__card .label{font-size:9.5px}
.film--compact .film__card b{font-size:19px}
.film--compact .film__card span{font-size:13px}
.film--compact .film__card .pill{font-size:9.5px}
@media (max-width:600px){.film__ctl{display:none}.film__play{width:56px;height:56px;font-size:18px}}
/* A picture with its own shape and shadows (home page film): no frame, nothing cropped, the caption under it. */
/* Tuned to the picture (assets/img/intro-film.webp, 2476 x 1653): the visible player is 67% of the picture's width and starts
   18.66% in; 5.13% (of the width) is shadow above it and 15.43% below it. The picture is drawn larger than its column so the
   player itself fills the column, plus --film-l and --film-r beyond it; the soft shadow spills over the burgundy and the section
   clips it at the screen edge. Nothing sits on the picture: the play button is beside the caption. */
.film--free{aspect-ratio:auto;overflow:visible;border-radius:0;background:none;--film-l:0px;--film-r:0px;--film-img:calc((100% + var(--film-l) + var(--film-r)) / .67)}
.film__pic{position:relative}
.film--free .film__pic{width:var(--film-img);margin:calc(var(--film-img) * -.0513) 0 0 calc(0px - var(--film-l) - var(--film-img) * .1866)}
.film--free .film__still{position:static;display:block;width:100%;height:auto;aspect-ratio:2476/1653} /* the shape everything here is tuned to, whatever the file's pixel size */
/* Home: on a computer the player ends 24px past the right edge and is 88% of (column + 72px) wide, so it starts a little right of the column's left edge. */
.home-record{overflow:hidden}
.home-record .two>div:first-child{position:relative;z-index:1}
@media (min-width:1201px){.home-record .film--free{--film-l:calc(39.36px - 12%);--film-r:24px}
  /* The caption starts on the left edge of the right-hand column of the list below (.list8: two equal columns, 80px apart).
     The film's column is 52.13% of the content width (.two--880), so that edge is 4.086% of the film's width plus 40px in. */
  .home-record .film__caption{margin-left:calc(4.086% + 40px)}}
.film__caption{position:relative;margin:calc(18px - var(--film-img) * .1543) 0 0 calc(0px - var(--film-l, 0px));display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:0 20px;text-align:left}
.film__caption b{grid-column:1;grid-row:1}
.film__caption>span{grid-column:1;grid-row:2}
@media (max-width:1200px){.film__caption>span>span{display:block}}
/* Beside the caption (computers): a white ring with a white play triangle, no fill, drawn as SVG. */
.film--free .film__play--side{position:static;grid-column:2;grid-row:1/3;transform:none;width:48px;height:48px;padding:0;background:none;color:#fff;border-radius:50%}
.film__play--side svg{display:block;width:100%;height:100%}
.film--free:hover .film__play--side{transform:scale(1.05)}
@media (max-width:760px){.film--free .film__play--side{width:44px;height:44px}}

/* ---------- Home ---------- */
.home-hero{padding:110px var(--gutter) 40px}
.home-hero .hero-note{margin:18px 0 0}
.home-hero .cta{margin-top:40px}
.home-what{padding:40px var(--gutter) 92px}
.home-what .two{margin-bottom:64px}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:20px 21px;display:flex;flex-direction:column;gap:10px}
.card b{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--peach)}
.card span{font-size:15px;line-height:1.6;color:#cfc8bf}
.home-record{padding:92px var(--gutter);background:var(--wine)}
.list8{display:grid;grid-template-columns:1fr 1fr;gap:0 80px;margin-top:72px}
.list8>div{padding:22px 0;border-top:1px solid rgba(255,255,255,.14)}
.list8>div:nth-last-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
.list8 b,.film__caption b{display:block;font-size:19px;font-weight:700;letter-spacing:-.025em}
.list8 span,.film__caption>span{display:block;margin-top:6px;font-size:15px;line-height:1.6;color:var(--on-wine-soft)}
.home-record .pill{margin-top:48px}
.home-site{padding:92px var(--gutter) 0}
.prints{position:relative;aspect-ratio:1688/900;margin-top:72px}
.print{position:absolute;width:45.02%;aspect-ratio:16/10;border-radius:3px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.35);transition:transform .25s,box-shadow .25s;background:var(--wine-deep);display:block}
.print img{width:100%;height:100%;object-fit:cover}
.print span{position:absolute;left:14px;bottom:14px;font-size:12px;color:#fff;background:rgba(38,35,31,.84);padding:7px 12px;border-radius:999px;white-space:nowrap}
.print:nth-child(1){left:0;top:0;transform:rotate(-1.6deg);z-index:1}
.print:nth-child(2){left:12.44%;top:8.89%;transform:rotate(.8deg);z-index:2}
.print:nth-child(3){left:24.88%;top:17.78%;transform:rotate(-.6deg);z-index:3}
.print:nth-child(4){left:37.32%;top:26.67%;transform:rotate(1.2deg);z-index:4}
.print:nth-child(5){left:49.76%;top:35.56%;transform:rotate(-1deg);z-index:5}
.print:hover,.print:focus-visible{transform:translateY(-28px) rotate(0deg);box-shadow:0 20px 45px rgba(20,13,11,.6);z-index:20}
.home-site .pill{margin-top:8px}
.promise{position:relative;overflow:hidden;padding:92px var(--gutter);margin-top:92px;background:var(--rust)}
.promise .statement{line-height:1.25}
.promise p.body17{margin:24px 0 0;font-size:17px;line-height:1.6;color:#ffeee7;max-width:40em}
.doors{padding:92px var(--gutter);position:relative;isolation:isolate;overflow:hidden}
.parallax{position:absolute;inset:-12% 0;z-index:-2;background-position:center;background-size:cover;background-repeat:no-repeat;will-change:transform}
.doors__shade{position:absolute;inset:0;z-index:-1;background:rgba(16,15,14,.82)}
.doors__list{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.22)}
.door{display:grid;grid-template-columns:320px minmax(0,1fr);gap:48px;align-items:baseline;padding:34px 0;border-bottom:1px solid rgba(255,255,255,.22);text-decoration:none;color:#fff;transition:transform .18s}
.door:hover,.door:focus-visible{transform:translateX(8px);color:#fff}
.door b{font-size:clamp(26px,23.8px + .567vw,34px);line-height:1.06;font-weight:700;letter-spacing:-.045em;max-width:26em;text-wrap:pretty}
.doors .cta{margin-top:72px}

/* ---------- How it works ---------- */
.how-hero{padding:120px var(--gutter) 0}
.how-intro{padding:120px var(--gutter) 0}
.how-record{display:grid;grid-template-columns:1fr 1fr;gap:72px;padding:72px var(--gutter) 120px;align-items:start}
.how-record__pin{position:sticky;top:120px}
.how-record__pin .label{display:block;margin-top:18px}
.becomes{display:grid;grid-template-columns:1fr 1fr;gap:40px 20px}
.becomes__item{display:flex;flex-direction:column;gap:12px}
.becomes__item .label{display:block}
.becomes__item .label--arrow,.label--arrow{display:flex;align-items:flex-start;gap:12px;padding:1.65px 0;line-height:1.4}
.label--arrow em{flex:none;white-space:nowrap;font-style:normal;color:#fff}
.label--arrow .arrow{width:18px;height:18px;margin:-1.65px 0;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.becomes__pad{padding-top:26px}
.reveal{opacity:0;transform:scale(1.025);transition:opacity .55s ease-out,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal,.reduced-motion .reveal{opacity:1;transform:none;transition:none}
.how-words{padding:120px var(--gutter);background:var(--wine)}
.how-collectors{padding:120px var(--gutter)}
.wall{position:relative;height:720px;overflow:hidden}
.wall .parallax{inset:-12% 0;z-index:0}

.how-money{padding:120px var(--gutter)}
.strap{margin:40px 0 0;font-family:var(--mono);font-size:11.5px;line-height:2;letter-spacing:.04em;color:var(--on-dark-lead);max-width:34em}
.how-today{padding:120px var(--gutter);border-top:1px solid var(--hairline)}
.how-images{padding:120px var(--gutter);background:#111}
.how-images .statement{line-height:1.3}
.how-close{padding:120px var(--gutter)}
.how-close .cta{margin-top:44px}

/* ---------- Films & screens ---------- */
.films-hero{padding:120px var(--gutter) 0}
.films-over{padding:96px var(--gutter) 0;display:grid;grid-template-columns:min(1200px,71.09%) minmax(0,1fr);gap:56px;align-items:end}
.films-over__text{padding-bottom:8px}
.films-over__title{margin:18px 0 0;font-size:28px;line-height:1.1;font-weight:700;letter-spacing:-.04em}
.films-tasks{padding:96px var(--gutter) 0}
.films-tasks__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:32px}
.films-tasks__grid>div{display:flex;flex-direction:column;gap:16px}
.films-tasks__grid p{font-size:15px;line-height:1.6;color:var(--on-dark-body)}
.films-tasks__grid p b{color:#fff;font-weight:600}
.screens{padding:140px var(--gutter) 0}
.screens__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 20px;margin-top:56px}
.screen{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:14px;text-align:left;border-radius:12px;transition:transform .18s;color:#fff}
.screen:hover,.screen:focus-visible{transform:translateY(-4px)}
.screen:focus-visible{outline:3px solid var(--peach);outline-offset:3px}
.screen__meta{display:block}
.screen__n{font-family:var(--mono);font-size:12px;color:var(--rust)}
.screen__t{display:flex;flex-direction:column;gap:4px}
.screen__t b{font-size:17px;font-weight:700;letter-spacing:-.025em;line-height:1.15;color:#fff}
.screen__t span{font-size:13.5px;line-height:1.55;color:var(--on-dark-body)}
.films-cta{padding:140px var(--gutter) 120px}
/* Modal (effect E) */
.modal{position:fixed;inset:0;z-index:200;background:rgba(16,15,14,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:16px 40px;display:none;align-items:center;justify-content:center}
.modal.is-open{display:flex}
.modal__panel{width:min(1200px,100%);display:flex;flex-direction:column;gap:20px;max-height:100%}
.modal .shot--tall{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.45) rgba(255,255,255,.08);overscroll-behavior:contain}
.modal .shot--tall::-webkit-scrollbar{width:10px}
.modal .shot--tall::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
.modal .shot--tall::-webkit-scrollbar-thumb{background:rgba(255,255,255,.45);border-radius:5px}
.modal .shot--tall img{position:static;display:block;width:100%;height:auto}
.modal__row{display:flex;align-items:center;gap:24px;color:#fff;flex-wrap:wrap}
.modal__n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--rust);white-space:nowrap}
.modal__t{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.modal__t b{font-size:21px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.modal__t span{font-size:15px;line-height:1.55;color:var(--on-dark-lead)}
.modal__btns{margin-left:auto;display:flex;gap:10px;flex:none}
body.modal-open{overflow:hidden}
/* Film pop-up: the same lightbox, a 16:9 screen with the browser's own player controls. */
.shot--film{aspect-ratio:16/9;background:#000}
.shot--film video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:#000}
/* Task films start on a 16:10 screen still: keep its top edge, and cover the old sidebar wordmark with the same panel as every screen until the film plays. */
.shot--film.is-screen video{object-position:left top}
.shot--film .shot__panel{display:none;height:10.67%}
.shot--film.is-screen.is-poster .shot__panel{display:flex}
@media (max-width:760px){.modal{padding:16px}.modal__btns{margin-left:0}.modal__t{display:none}}

/* ---------- Examples ---------- */
.ex-hero{padding:120px var(--gutter) 0}
.ex-hero .body17,.pr-hero .body17{margin:20px 0 0;font-size:17px;line-height:1.6;color:var(--on-dark-body);max-width:34em;text-wrap:pretty}
.ex-hero .body17 strong{font-weight:700;color:#fff}
.ex-hero img{width:100%;height:auto}
.ex-sites{display:flex;flex-direction:column;gap:120px;padding:120px var(--gutter) 0}
.ex-site{display:grid;gap:56px;align-items:end}
.ex-site--left{grid-template-columns:min(1180px,69.9%) minmax(0,1fr)}
.ex-site--right{grid-template-columns:minmax(0,1fr) min(1180px,69.9%)}
.ex-site__text{display:flex;flex-direction:column;gap:14px;padding-bottom:8px}
.ex-site__text .eyebrow{display:block}
.ex-site__title{font-size:28px;font-weight:700;letter-spacing:-.04em;line-height:1}
.ex-site__line{font-size:15px;line-height:1.6;color:var(--on-dark-body)}
.ex-site__text .pill{align-self:flex-start;margin-top:10px}
.ex-editor{padding:160px var(--gutter) 0}
.ex-looks{padding:160px var(--gutter) 120px}
.looks{display:grid;grid-template-columns:min(820px,48.58%) min(420px,24.88%) minmax(0,1fr);gap:56px;align-items:end;margin-top:72px}
.sheets{display:contents}
.sheet{display:flex;flex-direction:column;justify-content:space-between;background:var(--paper);color:var(--ink);border-radius:3px;padding:24px 26px;text-decoration:none;box-shadow:0 12px 28px rgba(0,0,0,.3);transition:transform .18s}
.sheet:hover,.sheet:focus-visible{transform:translateY(-6px);color:var(--ink)}
.sheet--land{aspect-ratio:1.414}
.sheet--port{width:min(300px,100%);aspect-ratio:.707}
.sheet .micro{color:var(--text-quiet)}
.sheet__body{display:flex;flex-direction:column;gap:6px}
.sheet__body b{font-size:28px;font-weight:700;letter-spacing:-.04em;line-height:1}
.sheet__body span{font-size:13px;color:var(--text-body)}
.sheet__body em{font-style:normal;font-size:13px;color:var(--rust);margin-top:8px}
.ex-looks .cta{margin-top:140px}

/* ---------- Pricing & FAQ ---------- */
.pr-hero{padding:120px var(--gutter) 0}
.pr-hero .drawing{aspect-ratio:auto}
.pr-hero .drawing img{width:100%;height:auto}
.editions{padding:120px var(--gutter) 0;max-width:calc(1560px + var(--gutter))}
.ed-row{display:grid;grid-template-columns:300px 260px 300px minmax(0,1fr);align-items:baseline;padding:40px 0;border-bottom:1px solid var(--hairline)}
.ed-row--head{padding:0 32px 18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-quiet)}
/* Each plan is one field of its own colour. */
.ed-row--plan{padding:36px 32px;border-bottom:0;border-radius:12px;margin-top:14px;color:#fff}
.ed-row--plan .ed-n{color:rgba(255,255,255,.72)}
.ed-row--plan .ed-price span,.ed-row--plan .ed-cap span,.ed-row--plan .ed-for{color:rgba(255,255,255,.86)}
.ed-row--plan.is-light{color:var(--ink)}
.ed-row--plan.is-light .ed-n{color:rgba(26,26,25,.6)}
.ed-row--plan.is-light .ed-price span,.ed-row--plan.is-light .ed-cap span,.ed-row--plan.is-light .ed-for{color:rgba(26,26,25,.78)}
.ed-n{font-family:var(--mono);font-size:12px;color:var(--rust)}
.ed-name{display:flex;align-items:center;gap:14px;font-size:28px;font-weight:700;letter-spacing:-.04em;line-height:1}
.ed-price{display:flex;align-items:baseline;gap:8px}
.ed-price b{font-size:58px;line-height:.82;font-weight:700;letter-spacing:-.065em}
.ed-price span{font-size:12px;color:#b8a58f}
.ed-cap{display:flex;align-items:baseline;gap:12px}
.ed-cap b{font-size:42px;line-height:.78;font-weight:700;letter-spacing:-.055em}
.ed-cap span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#b8a58f}
.ed-for{font-size:15px;line-height:1.6;color:var(--on-dark-body);max-width:30em}
.ed-terms{display:block;padding:40px 32px 0}
.ed-terms div{display:flex;flex-direction:column;gap:12px;font-size:17px;line-height:1.6;color:var(--on-dark-body);max-width:40em}
.ed-terms .white{color:#fff}
/* Artwork-capacity example beside the plan terms. */
.capacity-example{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:48px;margin:40px 32px 0;padding:36px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.capacity-example__math{min-width:0}
.capacity-example .eyebrow{font-weight:400;color:var(--on-dark-body)}
.capacity-equation{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1.2fr);gap:20px;align-items:start;margin-top:30px}
.capacity-number b{display:block;font-size:clamp(38px,4.2vw,64px);line-height:1;letter-spacing:-.06em;font-weight:600;font-variant-numeric:tabular-nums}
.capacity-number span{display:block;margin-top:12px;font-size:13px;line-height:1.45;color:var(--on-dark-body)}
.capacity-number--total b{color:var(--peach)}
.capacity-operator{font-size:30px;line-height:1.9;font-weight:300;color:var(--on-dark-quiet);text-align:center}
.capacity-example__note{margin-top:26px;font-size:13px;line-height:1.5;color:var(--on-dark-quiet)}
.capacity-example__fit{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-left:36px;border-left:1px solid var(--hairline)}
.capacity-example__plan{font-size:26px;font-weight:600;letter-spacing:-.035em}
.capacity-example__limit{margin-top:8px;font-size:14px;color:var(--on-dark-body)}
.capacity-example__price{display:flex;gap:9px;align-items:baseline;margin-top:22px}
.capacity-example__price b{font-size:40px;line-height:1;letter-spacing:-.05em;font-weight:600}
.capacity-example__price span{font-size:12px;color:var(--on-dark-body)}
@media(max-width:1100px){.capacity-example{grid-template-columns:minmax(0,1fr) 180px;gap:28px}.capacity-equation{gap:12px}.capacity-example__fit{padding-left:28px}}
@media(max-width:760px){.capacity-example{grid-template-columns:minmax(0,1fr);gap:26px;margin:32px 20px 0;padding:28px 0}.capacity-equation{grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1.15fr);gap:8px;margin-top:26px}.capacity-number b{font-size:38px}.capacity-number span{font-size:11px;line-height:1.5;margin-top:10px}.capacity-operator{font-size:22px;line-height:1.7}.capacity-example__fit{display:grid;grid-template-columns:1fr auto;gap:7px 20px;border-left:0;border-top:1px solid var(--hairline);padding:24px 0 0}.capacity-example__plan{font-size:24px;grid-column:1;grid-row:1}.capacity-example__limit{font-size:13px;margin:0;grid-column:1;grid-row:2}.capacity-example__price{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;gap:7px;align-items:flex-end;margin:0}.capacity-example__price b{font-size:34px}.capacity-example__price span{font-size:11px}.capacity-example__note{margin-top:22px;font-size:12px}}
.pr-cta{padding:72px var(--gutter) 0}
.arith{padding:120px var(--gutter);background:var(--warm);margin-top:120px}
.arith__rows{display:flex;flex-direction:column}
.arith__row{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:baseline;padding:28px 0;border-top:1px solid var(--hairline)}
.arith__row:last-child{border-bottom:1px solid var(--hairline)}
.arith__row .label{line-height:1.6}
.arith__row.is-win .label{color:var(--rust)}
.arith__v{display:flex;flex-direction:column;gap:6px}
.arith__v b{font-size:58px;line-height:.82;font-weight:700;letter-spacing:-.065em;color:var(--on-dark-body)}
.arith__row.is-win .arith__v b{color:#fff}
.arith__v span{font-size:15px;line-height:1.5;color:var(--on-dark-body)}
.compare{padding:120px var(--gutter) 0}
.ctable{margin-top:64px;border-radius:16px;overflow:hidden;border:1px solid var(--hairline);background:#fff;color:var(--ink)}
.ctable__head{display:grid;grid-template-columns:minmax(0,1fr) 190px 190px 190px 190px;background:#2a2723;color:#fff;padding:18px 24px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.ctable__head>span:first-child{color:var(--on-dark-quiet)}
.cplan{padding:10px 12px;margin-right:10px;border-radius:8px;display:flex;flex-direction:column;gap:4px;color:#fff}
.cplan.is-light{color:var(--ink)}
.cplan b{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:-.02em;text-transform:none}
.cplan span{font-size:11px;letter-spacing:.08em;opacity:.95}
.crow{display:grid;grid-template-columns:minmax(0,1fr) 190px 190px 190px 190px;align-items:center;padding:16px 24px;border-top:1px solid #ded9d2;background:#fff}
.crow--group{padding:26px 24px 10px;background:var(--paper-footer)}
.crow__t{display:flex;flex-direction:column;gap:3px;padding-right:32px}
.crow__t b{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.crow--group .crow__t b{font-size:11px;color:var(--text-quiet)}
.crow__t span{font-size:13px;line-height:1.45;color:var(--text-muted)}
.crow__v{font-size:15px;font-weight:600}
.crow__v.is-no{color:#cbc5bd}
.ccards{display:none}
.faq{padding:140px var(--gutter) 120px;background:var(--paper);color:var(--ink);margin-top:140px}
.faq__cols{display:grid;grid-template-columns:1fr 1fr;gap:0 80px;margin-top:64px}
.faq__col{display:flex;flex-direction:column}
.faq__row{display:grid;grid-template-columns:minmax(0,1fr);padding:20px 0;border-top:1px solid #ded9d2}
.faq__q{display:flex;flex-direction:column;gap:8px}
.faq__q b{font-size:19px;line-height:1.2;font-weight:700;letter-spacing:-.025em}
.faq__q span{font-size:15px;line-height:1.62;color:var(--text-body)}
.faq .cta{margin-top:80px}
.faq__more{margin:48px 0 0;padding-top:20px;border-top:1px solid #ded9d2;font-size:15px;line-height:1.62;color:var(--text-body)}
.faq__more a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.faq .cta__note{color:var(--text-body)}

/* ---------- About ---------- */
.ab-hero{display:grid;grid-template-columns:1fr 1fr;background:var(--ground);color:#fff}
.ab-hero__photo{position:relative;height:1000px;overflow:hidden;background:#1d1b18}
.ab-hero__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
.ab-hero__text{padding:140px var(--gutter) 120px 96px;display:flex;flex-direction:column;justify-content:flex-end}
.ab-hero__text .h1{max-width:none}
.ab-hero__text .lead{margin-top:40px;max-width:26em}
.ab-hero--wide{display:block;padding:0;background:var(--paper);color:var(--ink)}
.ab-hero--wide .ab-hero__text{padding:140px var(--gutter) 72px;justify-content:flex-start}
.ab-hero--wide .ab-hero__text .h1{max-width:13.5em}
.ab-hero--wide .ab-hero__text .lead{color:var(--text-body)}
.ab-hero--wide .ab-hero__photo{height:auto;aspect-ratio:16/9;margin:0 var(--gutter);border-radius:12px;border:1px solid rgba(26,26,25,.1);background:var(--paper)}
.ab-hero--wide .ab-hero__photo img{object-position:center}
.ab-words{padding:140px var(--gutter) 120px;display:grid;grid-template-columns:420px minmax(0,1fr);gap:80px}
.ab-words .eyebrow{padding-top:14px}
.ab-words__body{max-width:30em}
.ab-words__body .statement{margin:0;line-height:1.3}
.ab-words__body p.q{margin:24px 0 0;font-size:clamp(18px,17.17px + .213vw,21px);line-height:1.6;color:var(--text-body);text-wrap:pretty}
.ab-words__body p.q.first{margin-top:40px}
.ab-words__sign{margin:32px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-quiet);line-height:2}
.ab-words__sign b{font-weight:600;color:var(--ink)}
.ab-paint{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 var(--gutter) 140px}
.ab-paint__item{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--wine-deep)}
.ab-paint__item img{width:100%;height:100%;object-fit:cover}
.caption{position:absolute;left:14px;bottom:14px;background:rgba(38,35,31,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#f1ece6;border-radius:12px;padding:14px 15px;display:flex;flex-direction:column;gap:4px}
.caption small{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-wine-eyebrow)}
.caption span{font-size:13px}
.ab-company{background:var(--burgundy);color:#fff;padding:92px var(--gutter);display:grid;grid-template-columns:420px minmax(0,1fr);gap:80px}
.ab-company .eyebrow{padding-top:10px}
.ab-company__body{max-width:32em}
.ab-company__body .statement{margin:0}
.ab-company__body p.body19{color:#f3dcd4;max-width:none}
/* About, one sheet of paper: every text block starts on the same left edge, no colour bands. */
.ab-words--one{display:block;padding:120px var(--gutter) 0}
.ab-words--one .eyebrow{padding-top:0}
.ab-words--one .ab-words__body{max-width:34em;margin-top:28px}
.ab-paint--titled{display:block;padding:120px var(--gutter) 0}
.ab-paint__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ab-company--paper{display:block;background:none;color:var(--ink);padding:120px var(--gutter) 0}
.ab-company--paper .eyebrow{padding-top:0}
.ab-company--paper .ab-company__body{max-width:34em;margin-top:28px}
.ab-company--paper .ab-company__body p.body19{color:var(--text-body)}
/* Option 1: statement left, body right, both on one top line. */
.ab-words--two{display:block;padding:120px var(--gutter) 0}
.ab-words--two .eyebrow{padding-top:0}
.ab-words__cols,.ab-company__cols{display:grid;grid-template-columns:7fr 5fr;gap:80px;margin-top:28px;align-items:start}
.ab-words__cols .statement,.ab-company__cols .statement{margin:0;line-height:1.3;max-width:none}
.ab-words__cols .ab-words__body{max-width:none;margin-top:6px}
.ab-words__cols .ab-words__body p.q.first{margin-top:0}
/* In his words, as one framed card: the quote left, the paragraphs right, same pattern as The company. */
.ab-words--card{display:block;padding:120px var(--gutter) 0}
.ab-words--card .eyebrow{padding-top:0}
.ab-words__card{margin-top:28px;display:grid;grid-template-columns:7fr 5fr;gap:80px;align-items:start}
.ab-words__card .statement{margin:0;line-height:1.3;max-width:none;width:min(480px,100%);justify-self:center;align-self:center;color:var(--ink)}
.ab-words__card .hl{background:#d4d1cc;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.04em .14em 0;margin:0 -.14em}
.ab-words__card .ab-words__body{max-width:none;margin-top:6px;padding-right:56px}
.ab-words__card .ab-words__body p.q.first{margin-top:0}
/* The company, as a framed card; no trial button on About (the header already has it). */
.ab-company--card{display:block;background:none;color:var(--ink);padding:120px var(--gutter) 140px}
.ab-company--card .eyebrow{padding-top:0}
.ab-company__card{margin-top:28px;border:1px solid rgba(26,26,25,.12);border-radius:12px;padding:56px;display:grid;grid-template-columns:7fr 5fr;gap:80px;align-items:start}
.ab-company__card .statement{margin:0;font-size:clamp(34px,29.02px + 1.277vw,52px);line-height:1.08;letter-spacing:-.045em;max-width:12em}
.ab-company__card p.body19{margin:6px 0 0;max-width:none;color:var(--text-body)}
.ab-company__cols p.body19{margin:6px 0 0;max-width:none;color:var(--text-body)}
.ab-cta{padding:92px var(--gutter) 120px}
.ab-cta .cta__note{color:var(--text-body)}

/* ---------- Plain pages (Terms, Privacy, anything else) ---------- */
.plain-main{max-width:900px;margin:0 auto;padding:48px 24px}
.plain-main h1{font-size:34px;line-height:1.2;letter-spacing:-.03em}
.ms-page.is-plain{background:transparent;color:var(--ink);box-shadow:none;max-width:none}
body.is-plain-page{background:#f2f0eb}
.ms-page.is-plain .plain-main a{color:var(--rust)}
/* Terms and Privacy keep their own black wordmark and grey footer links (owner decision, 15 Oct 2026) */
.ms-page.is-plain .plain-main .fb-legal-header a,.ms-page.is-plain .plain-main .fb-legal-header .fb-legal-wordmark{color:#171713}
.ms-page.is-plain .plain-main .fb-legal-footer a{color:#70736e}
.not-found{padding:120px var(--gutter) 160px;min-height:60vh}
.not-found .cta{margin-top:40px}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .two,.two--880,.two--1000,.two--1000-left,.two--760,.two--650,.two--half{grid-template-columns:minmax(0,1fr);gap:56px}
  .two--1000-left>.shot,.two--1000-left>.two__media{order:2}
  .how-record{grid-template-columns:minmax(0,1fr);gap:56px}
  .how-record__pin{position:static}
  .films-over{grid-template-columns:minmax(0,1fr);gap:32px}
  .screens__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ex-site,.ex-site--left,.ex-site--right{grid-template-columns:minmax(0,1fr);gap:28px}
  .ex-site--right .ex-site__text{order:2}
  .looks{grid-template-columns:minmax(0,1fr);gap:56px;align-items:start}
  .looks .shot{grid-column:1/-1}
  .sheets{display:grid;grid-template-columns:minmax(0,1fr) min(300px,40%);gap:56px;align-items:end}
  .ab-hero{grid-template-columns:minmax(0,1fr)}
  .ex-hero img{max-width:650px}
  .pr-hero .drawing img{max-width:760px}
  .drawing{max-width:880px;margin:0 auto}
  .ab-hero__photo{height:auto;aspect-ratio:4/3}
  .ab-hero__photo img{position:static;height:100%}
  .ab-hero__text{padding:92px var(--gutter) 92px}
  .ab-hero--wide{padding-bottom:0;display:block}
  .ab-hero--wide .ab-hero__text{padding:36px var(--gutter) 48px}
  .ab-hero--wide .ab-hero__photo{aspect-ratio:16/10;margin-top:0}
  .ab-words,.ab-company{grid-template-columns:minmax(0,1fr);gap:28px}
  .ab-words--one,.ab-words--two,.ab-paint--titled,.ab-company--paper{padding-top:92px}
  .ab-words__cols,.ab-company__cols{grid-template-columns:minmax(0,1fr);gap:28px}
  .ab-words__card,.ab-company__card{grid-template-columns:minmax(0,1fr);gap:28px}
  .ab-words__card .statement{width:100%;justify-self:start}
  .ab-words__card .ab-words__body{padding-right:0}
  .ab-company__card{padding:32px}
  .ab-words--card{padding-top:92px}
  .ab-company--card{padding-top:92px;padding-bottom:92px}
  .ab-words__cols .ab-words__body,.ab-company__cols p.body19{margin-top:0}
  .ab-words .eyebrow,.ab-company .eyebrow{padding-top:0}
  .ed-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);row-gap:28px}
  .ed-row .ed-for{grid-column:1/-1}
  .ed-row--head>span:last-child{display:none}
  .wall{height:560px}

  .arith{margin-top:92px}
  .faq{margin-top:92px}
  /* Header: wordmark + button + menu */
  .site-nav,.site-header__signin{display:none}
  .menu-toggle{display:block}
  .site-header{gap:16px}
  .site-header__right{gap:12px}
  .menu-panel{display:none;position:absolute;left:0;right:0;top:100%;background:#26231f;padding:12px var(--gutter) 24px;box-shadow:0 1px 0 rgba(255,255,255,.06),0 24px 48px rgba(0,0,0,.35)}
  .menu-panel.is-open{display:flex;flex-direction:column}
  .menu-panel a{display:block;text-decoration:none;color:var(--on-dark-nav);font-size:17px;line-height:1.5;padding:12px 0;min-height:44px;border-bottom:1px solid rgba(255,255,255,.08)}
  .menu-panel a:hover{color:#fff}
  .menu-panel a.is-active{color:#fff;font-weight:600;padding-left:14px;box-shadow:inset 3px 0 0 var(--rust)}
  .menu-panel a:last-child{border-bottom:0}
}
@media (max-width:900px){
  .cards3{grid-template-columns:minmax(0,1fr)}
  .list8{grid-template-columns:minmax(0,1fr);gap:0}
  .list8>div:nth-last-child(-n+2){border-bottom:0}
  .list8>div:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
  .films-tasks__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .faq__cols{grid-template-columns:minmax(0,1fr);gap:0}
  /* Phone and tablet: the same one table, four tight columns, no descriptions. */
  .ctable{margin-top:40px;border-radius:12px}
  .ctable__head,.crow{grid-template-columns:minmax(0,1fr) repeat(4,48px);column-gap:4px;padding:12px 14px}
  .ctable__head{align-items:end}
  .ctable__head .cplan{padding:6px 3px;margin-right:0;text-align:center;font-size:8px;letter-spacing:.08em}
  .ctable__head .cplan b{font-size:9.5px;line-height:1.15;letter-spacing:-.03em}
  .ctable__head .cplan span{display:block;font-size:8.5px;letter-spacing:0;line-height:1.25;margin-top:2px;white-space:normal}
  .crow--group{padding:18px 14px 8px}
  .crow__t{padding-right:8px}
  .crow__t b{font-size:13px;overflow-wrap:anywhere}
  .crow__t span{display:none}
  .crow__v{font-size:13px;text-align:center}
  .crow--text .crow__v{font-size:9px;line-height:1.2;font-weight:600}
  .how-images .two{gap:40px}
}
@media (max-width:760px){
  :root{--gutter:24px}
  .home-site .prints{display:none}
  .home-site .pill{margin-top:40px}
  .doors__list{display:none}
  .doors .cta{margin-top:0}
  .not-phone{display:none}
  .ab-paint,.ab-paint__grid{grid-template-columns:minmax(0,1fr)}
  .ab-paint__grid .ab-paint__item:nth-child(n+2){display:none}
  .door{grid-template-columns:minmax(0,1fr);gap:12px;padding:26px 0}
  .ed-row,.ed-row--head{grid-template-columns:minmax(0,1fr)}
  .ed-row{row-gap:18px;padding:32px 0}
  .ed-row--head{display:none}
  .ed-row--plan{padding:24px 20px}
  .ed-terms{padding:32px 20px 0}
  .arith__row{grid-template-columns:minmax(0,1fr);gap:12px}
  .arith__v b,.ed-price b{font-size:48px}
  .ed-cap b{font-size:36px}
  .becomes{grid-template-columns:minmax(0,1fr)}
  .becomes__pad{padding-top:0}
  .sheets{grid-template-columns:minmax(0,1fr)}
  .sheet--port{width:min(300px,100%)}
  .home-hero{padding:72px var(--gutter) 24px}
  .how-intro,.how-hero,.films-hero,.ex-hero,.pr-hero{padding-top:80px}
  .home-what{padding-top:24px;padding-bottom:64px}
  .home-record,.home-site,.promise,.doors,.how-words,.how-collectors,.how-money,.how-today,.how-images,.how-close,.films-tasks,.screens,.films-cta,.ex-editor,.ex-looks,.compare,.faq,.arith,.ab-words,.ab-company,.ab-cta,.editions{padding-top:72px}
  .home-record,.promise,.doors,.how-words,.how-collectors,.how-money,.how-today,.how-images,.how-close,.films-cta,.ex-looks,.faq,.arith,.ab-cta,.ab-words{padding-bottom:72px}
  .promise,.arith,.faq{margin-top:72px}
  .ex-sites{gap:72px}
  .ex-looks .cta{margin-top:72px}
  .how-record{padding-bottom:72px}
  .wall{height:420px}

  .site-footer{padding:32px var(--gutter) 28px}
  .site-footer__top{flex-direction:column;gap:24px}
  .site-footer__nav{margin-left:0}
  .to-top{margin-left:0}
  .ms-lockup{font-size:24px}
  .shot__panel{padding-left:1.3cqw}
  .cta{gap:16px}
  .h1{margin-top:20px}
  .lead{margin-top:24px}
  .btn{min-height:44px}
}
@media (max-width:480px){
  .btn--small{padding:9px 11px;font-size:12px;white-space:nowrap}
  .site-header{padding:11px 16px;gap:8px}
  .site-header__right{gap:8px}
  .menu-panel{padding-left:16px;padding-right:16px}
}
@media (max-width:400px){
  .site-header{padding:11px 12px}
  .btn--small{font-size:11.5px;padding:8px 9px}
  .menu-panel{padding-left:12px;padding-right:12px}
}
/* All six page openings share the same top edge, independent of image height. */
:root{--page-intro-top:120px}
.home-hero,.how-hero,.films-hero,.ex-hero,.pr-hero,
.ab-hero--wide .ab-hero__text{padding-top:var(--page-intro-top);align-items:start}
.home-hero .h1,.how-hero .h1,.films-hero .h1,.ex-hero .h1,.pr-hero .h1,
.ab-hero--wide .h1{margin-top:0}
@media (max-width:760px){
  :root{--page-intro-top:80px}
  /* Section headings stand on their own on phones. Keep link and design labels. */
  .ms-page section p.eyebrow{display:none}
  .ms-page section p.eyebrow + *{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .parallax{transform:none!important}
  .btn,.pill,.print,.door,.sheet,.screen,.to-top{transition:none}
}

/* ---------- Tablets (iPad, upright and sideways) ---------- */
/* Screens: one column only on a phone; a small tablet keeps two. */
@media (max-width:600px){
  .screens__grid{grid-template-columns:minmax(0,1fr)}
}
/* Small films in a row of three (iPad sideways): the play button and the bar must not collide. */
@media (min-width:901px) and (max-width:1200px){
  .film--compact .film__ctl{display:none}
  .film--compact .film__play{width:56px;height:56px;font-size:18px}
}
/* Single wide columns on a tablet: keep lines to a readable length. */
@media (min-width:601px) and (max-width:900px){
  .list8 span,.film__caption>span,.films-tasks__grid p,.screen__t span,.faq__q span{max-width:40em}
}
@media (min-width:601px) and (max-width:1200px){
  .ab-words__card .ab-words__body,.ab-company__card p.body19,.ab-company__cols p.body19{max-width:34em}
}
@media (min-width:761px) and (max-width:900px){
  .caption{max-width:calc(100% - 28px)}
}
/* Touch screens: a finger-sized (44px) hit area for small links and buttons. The look does not change. */
@media (pointer:coarse) and (min-width:600px){
  .site-nav a,.site-header__signin,.btn--small,.so-wordmark,.pill,.pr-page-links a,.site-footer__nav a,.ms-lockup,.to-top,.faq__more a{position:relative}
  .site-nav a::after,.site-header__signin::after,.btn--small::after,.so-wordmark::after,.pill::after,.pr-page-links a::after,.site-footer__nav a::after,.ms-lockup::after,.to-top::after,.faq__more a::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}

/* An iPad held sideways. Home: the studio photo sits beside the headline, as on a desktop, and the gap before "What it is" matches the phone's. Examples: the Mac picture is centered. */
@media (orientation:landscape) and (hover:none) and (pointer:coarse) and (min-width:1000px) and (max-width:1366px){
  .home-hero.two--880{grid-template-columns:minmax(0,1fr) min(880px,52.13%);gap:56px}
  .home-hero{padding-bottom:24px}
  .home-what{padding-top:24px}
  .home-what>.two{align-items:start}
  .ex-hero img{display:block;margin:0 auto}
}

/* ---------- Ad landing page (/start/) ---------- */
/* Hero: the home film beside the headline (the film's shape is tuned inside .home-record). */
.start-hero{background:var(--ground)}
.start-hero .cta{margin-top:40px}
.start-promise{margin-top:0}
.start-promise .body17{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#f7d6c8}
.start-sites{padding-bottom:40px}
.start-sites__one{display:none}
.start-sites__cap{margin:28px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--on-dark-quiet)}
.start-plans{padding:120px var(--gutter) 0}
.start-plans a{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hairline);white-space:nowrap}
.start-faq{margin-top:120px}
.start-faq .faq__cols{margin-top:0}
.start-faq .cta{margin-top:64px}
@media (max-width:760px){
  .start-hero .cta{margin-top:28px}
  .start-sites__one{display:block;margin-top:40px;border-radius:3px;overflow:hidden}
  .start-sites__one img{width:100%;height:auto}
  .start-plans{padding-top:72px}
  .start-faq{margin-top:72px}
}