/* ===================================================================== EVER AFTER COLLECTIVE — design system — Brand Guidelines Edition 1 (Ink · Paper · Champagne) One stylesheet for every page: public site, portal, sign, crew, studio. Fonts (put in of every page): Sections: 1 tokens · 2 base · 3 type · 4 layout · 5 buttons · 6 cards · 7 chips 8 fields · 9 stepper/progress · 10 tabs · 11 sheet · 12 toast · 13 badges/notices 14 accordion · 15 film (letterbox, grain, poster, theatre) · 16 site chrome (nav, footer) 17 public page blocks · 18 app UI helpers (portal/studio) · 18b r3 brand primitives 19 motion · 20 utilities Overhaul (27 Oct 2026): one motion contract (--m-* tokens, §19 title sequence), chrome consolidated in §24, system tightening in §25, unused r3 blocks (inset hero, page veil, region tiles, journal cards, press strip) removed. ===================================================================== */ /* ---------- 1. tokens — Brand Guidelines Edition 1 (Oct 2026): Ink · Paper · Champagne ---------- Old token NAMES are kept so every page keeps working; their VALUES are the new brand. Brand names: --ink #15181D · --paper-b #F3F0EA · --champ #B89A6E (lines on Ink) · --champ-deep #9A7B55 (lines on Paper) · --stone #6E6A63 Balance ≈ 60 Paper / 30 Ink / 10 Champagne. Champagne is for hairlines, small accents and backgrounds — never text blocks or gold buttons. */ :root{ --ink:#15181D; --paper-b:#F3F0EA; --champ:#B89A6E; --champ-deep:#9A7B55; --stone:#6E6A63; --parchment:#F3F0EA; /* page background (brand Paper) */ --paper:#F8F6F1; /* a lifted surface on Paper (cards, fields) */ --linen:#E8E3DA; /* a quiet recessed surface */ --cellar:#15181D; /* brand Ink: text, dark sections */ --ink-2:#3E4146; --ink-3:#8A8780; --shiraz:#15181D; --shiraz-2:#2C3038; /* the old accent is now Ink: links, selection, checks */ --olive:#6E6A63; --bark:#9A7B55; --candle:#B89A6E; --theatre:#0B0C0E; --ok:#4f6b3a; --warn:#8a5220; --bad:#9b2c2c; --display:'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif; --serif:'Cormorant Garamond', Garamond, Georgia, 'Times New Roman', serif; --sans:'Jost', Futura, 'Avenir Next', system-ui, -apple-system, 'Segoe UI', sans-serif; --ease:cubic-bezier(.22,1,.36,1); --slow:700ms; --r:2px; --r-sm:2px; --shadow:none; /* brand: no drop shadows — surfaces separate with hairlines */ --wrap:1180px; --gutter:clamp(16px,4vw,40px); --olive-ink:#5E5A54; --bark-ink:#6E6A63; --line:rgba(21,24,29,.14); --line-2:rgba(21,24,29,.08); --hair:var(--champ-deep); /* section dividers on Paper */ --dusk:#22262D; /* a lifted Ink (hover on Ink buttons, closing bands) */ --on-dark:#F3F0EA; --on-dark-2:rgba(243,240,234,.86); --on-dark-3:rgba(243,240,234,.64); --focus:0 0 0 2px var(--parchment),0 0 0 3px var(--ink); --shadow-lg:none; --fast:220ms; --mid:450ms; --nav-h:92px; --measure:65ch; /* type scale (Brand §Typography). Title = Bodoni caps · Heading = Cormorant Light · Body = Jost Light 16/1.65 · Label = Jost 400 11px +.25em */ --fs-hero:clamp(2.5rem,5.2vw,4.75rem); /* 40–76px, Cormorant Light */ --fs-title:clamp(1.875rem,3.2vw,3rem); /* 30–48px */ --fs-state:clamp(1.5rem,2.4vw,2.25rem); /* 24–36px statement paragraphs */ --fs-body:clamp(1.0625rem,1rem + .25vw,1.1875rem); /* 17–19px: easy reading on phone and desktop */ --fs-label:0.75rem; /* 12px, 0.2em */ --fs-nav:0.8125rem; /* 13px */ --ink-body:#1F2227; /* body copy: 14:1 on Paper */ --ink-label:#56534D; /* a deeper Stone for small capitals: 6.9:1 on Paper */ --display-settings:normal; --ease-out-expo:cubic-bezier(.19,1,.22,1); --ease-out-soft:cubic-bezier(.22,1,.36,1); --ease-inout:cubic-bezier(.645,.045,.355,1); --ease-scroll:cubic-bezier(.3,.9,.4,.98); --d-hover:180ms; --d-ui:320ms; --d-reveal:700ms; --d-xfade:1100ms; --d-page:420ms; /* motion contract (27 Oct 2026): every entrance on every page — CSS here and assets/motion/*.js — uses these, so the site moves like one title sequence. Entrances ≤ 900ms, one ease, small rises, short staggers. */ --m-ease:cubic-bezier(.22,1,.36,1); --m-in:600ms; --m-rise:12px; --m-stagger:90ms; --theatre-2:#15181D; --theatre-line:rgba(243,240,234,.12); } /* app pages keep gentler corners; the public site has none above 2px (fully round pills excepted) */ .app,body.studio,body.sg,body[data-app]{--r:2px;--r-sm:2px} /* ---------- 2. base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)} body{margin:0;background:var(--parchment);color:var(--cellar);font:400 var(--fs-body)/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden} img,svg,video,iframe{display:block;max-width:100%} img{height:auto} a{color:var(--shiraz);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color var(--fast) var(--ease)} a:hover{color:var(--shiraz-2)} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0} ::selection{background:var(--candle);color:var(--cellar)} :focus{outline:none} :focus-visible{outline:none;box-shadow:var(--focus);border-radius:2px} .on-dark a:focus-visible:not(.btn):not(.btn-fill):not(.btn-line),body.theme-dark a:focus-visible:not(.btn):not(.btn-fill):not(.btn-line),.theatre a:focus-visible,.theatre button:focus-visible{box-shadow:none;outline:1px solid var(--candle);outline-offset:4px} .on-dark :focus-visible,.theatre :focus-visible{box-shadow:0 0 0 3px var(--theatre),0 0 0 5px var(--candle)} [hidden]{display:none!important} .skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--cellar);color:var(--parchment);padding:12px 18px;border-radius:2px;text-decoration:none;font-weight:500;transition:top var(--fast) var(--ease)} .skip:focus{top:12px;color:var(--parchment)} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------- 3. type (Brand Ed.1: Cormorant Garamond Light headings · Jost Light body · Jost 400 11px tracked labels · Bodoni caps titles) ---------- */ h1,h2,h3,h4,.display,.h1,.h2,.h3,.h4{font-family:var(--serif);font-weight:300;color:var(--cellar);margin:0 0 .5em;font-optical-sizing:auto;font-variation-settings:var(--display-settings);letter-spacing:-.01em;text-wrap:balance} .display,h1,.h1,.hero-line{font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.015em} .hero-line{display:block} h2,.h2{font-size:var(--fs-title);line-height:1.05;letter-spacing:-.01em} h3,.h3{font-size:clamp(22px,2.2vw,28px);line-height:1.25;font-weight:300;font-variation-settings:normal} h4,.h4{font-size:19px;line-height:1.35;font-weight:400;font-variation-settings:normal} .display em,h1 em,h2 em,h3 em,.h1 em,.h2 em,.hero-line em,.statement em{font-style:italic;font-weight:300;color:var(--shiraz)} .on-dark .display em,.on-dark h1 em,.on-dark h2 em,.on-dark .statement em{color:inherit} p{margin:0 0 1.1em} .section p,.prose p,.feature p{max-width:var(--measure)} .center p,.center .statement{margin-inline:auto} .lede{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.1vw,26px);line-height:1.45;color:var(--ink-2);max-width:40ch;font-variation-settings:normal} .lede-sm{font-size:var(--fs-body);line-height:1.6;color:var(--ink-body);max-width:var(--measure)} .label,.eyebrow{display:inline-block;font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--ink-label)} .label-olive{color:var(--olive-ink)} .on-dark .label,.on-dark .eyebrow{color:var(--candle)} .statement{font-family:var(--serif);font-weight:300;font-size:var(--fs-state);line-height:1.2;letter-spacing:-.01em;max-width:24ch;margin:0 0 .8em;color:var(--cellar);font-variation-settings:normal;text-wrap:balance} .statement + .statement{margin-top:0} .on-dark .statement{color:var(--on-dark)} .muted{color:var(--ink-2)} .small{font-size:14px;line-height:1.55} .tiny{font-size:12.5px;line-height:1.5} .serif{font-family:var(--serif)} .italic{font-style:italic} .num{font-variant-numeric:tabular-nums lining-nums} .prose{max-width:var(--measure)} .prose p,.prose li{color:var(--cellar)} .prose h2{font-size:clamp(26px,3vw,36px);margin:1.8em 0 .5em} .prose h3{font-size:clamp(21px,2vw,25px);margin:1.6em 0 .4em} .prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.2em} .prose li{margin:.3em 0} .prose li::marker{color:var(--bark)} .prose blockquote{margin:1.8em 0;padding:0 0 0 1.2em;border-left:2px solid var(--shiraz);font-family:var(--serif);font-weight:300;font-style:italic;font-size:1.22em;line-height:1.5;color:var(--ink-2)} .prose img{border-radius:var(--r-sm);margin:1.6em 0} .prose a{word-break:break-word} .prose code{font-size:.9em;background:var(--linen);padding:.1em .35em;border-radius:2px} .prose > :first-child{margin-top:0} .dropcap::first-letter{font-family:var(--serif);font-weight:300;float:left;font-size:4.2em;line-height:.82;padding:.06em .1em 0 0;color:var(--shiraz)} /* ---------- 4. layout ---------- */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .wrap-narrow{width:100%;max-width:780px;margin-inline:auto;padding-inline:var(--gutter)} .wrap-wide{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:clamp(72px,10vw,140px)} .section-sm{padding-block:clamp(48px,6vw,80px)} .section + .section.tight{padding-top:0} .bg-paper{background:var(--paper)} .bg-linen{background:var(--linen)} .bg-dark,.on-dark{background:var(--cellar);color:var(--on-dark)} .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark .display{color:var(--on-dark)} .on-dark .muted,.on-dark .lede{color:var(--on-dark-3)} .on-dark p,.on-dark .lede-sm{color:var(--on-dark-2)} .on-dark a:not(.btn):not(.btn-fill):not(.btn-line):not(.btn-primary){color:var(--candle)} .stack > * + *{margin-top:var(--s,1rem)} .row{display:flex;gap:var(--g,16px);align-items:center;flex-wrap:wrap} .row-between{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap} .grid{display:grid;gap:var(--g,clamp(18px,2.4vw,32px))} .grid-2{display:grid;gap:var(--g,clamp(18px,3vw,40px));grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))} .grid-3{display:grid;gap:var(--g,clamp(18px,2.4vw,32px));grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))} .grid-4{display:grid;gap:var(--g,clamp(16px,2vw,24px));grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} .split{display:grid;gap:clamp(28px,5vw,80px);align-items:center} @media (min-width:900px){.split{grid-template-columns:1fr 1fr}.split-7-5{grid-template-columns:7fr 5fr}.split-5-7{grid-template-columns:5fr 7fr}.split-4-8{grid-template-columns:4fr 8fr}} .center{text-align:center} .center .lede,.center .lede-sm,.center .prose{margin-inline:auto} .section-head{max-width:760px;margin-bottom:clamp(36px,5vw,64px)} .section-head.center{margin-inline:auto} .section-head .label{margin-bottom:18px} .rule{height:1px;background:var(--line);border:0;margin:0} .ornament{display:flex;align-items:center;gap:14px;color:var(--bark);justify-content:center} .ornament::before,.ornament::after{content:"";height:1px;width:48px;background:currentColor;opacity:.6} /* ---------- 5. buttons (r3: one filled button per page; everything else is a line or an underline) ---------- .btn / .btn-primary / .btn-fill → the ONE filled button: Cellar on Parchment (Candlelight on Cellar in theatre) .btn-line (= .btn-ghost, .btn-ghost-light) → 1px border, 2px radius, 15px/24px .btn-text (= .btn-link) → text with a 1px underline offset .35em Old names keep working; they map onto the new look. */ .btn,.btn-fill,.btn-line{--bg:var(--cellar);--fg:var(--parchment);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:15px 28px;border-radius:var(--btn-r,2px);border:1px solid var(--bg);background:var(--bg);color:var(--fg);font:500 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background var(--d-hover) var(--ease),color var(--d-hover) var(--ease),border-color var(--d-hover) var(--ease),transform var(--d-hover) var(--ease),opacity var(--d-hover) var(--ease);-webkit-tap-highlight-color:transparent;white-space:nowrap} .btn:hover,.btn-fill:hover{--bg:var(--dusk);color:var(--fg)} .btn:active,.btn-fill:active,.btn-line:active{transform:translateY(1px)} .btn:focus-visible,.btn-fill:focus-visible,.btn-line:focus-visible{border-radius:var(--btn-r,2px)} .btn[disabled],.btn.is-busy,.btn-fill[disabled],.btn-line[disabled]{opacity:.5;cursor:not-allowed} .btn.is-busy::after,.btn-fill.is-busy::after,.btn-line.is-busy::after{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;animation:eac-spin .8s linear infinite} .btn-primary{--bg:var(--cellar);--fg:var(--parchment)} .btn-shiraz{--bg:var(--shiraz);--fg:var(--parchment)} .btn-shiraz:hover{--bg:var(--shiraz-2)} .btn-line,.btn-ghost{--bg:transparent;--fg:var(--cellar);border-color:rgba(21,24,29,.5);background:transparent} .btn-line:hover,.btn-ghost:hover{--bg:transparent;--fg:var(--cellar);border-color:var(--cellar);background:transparent} .btn-light{--bg:var(--parchment);--fg:var(--cellar);border-color:var(--parchment)} .btn-light:hover{--bg:#fff;--fg:var(--cellar);border-color:#fff} .btn-ghost-light,.on-dark .btn-line,.theatre .btn-line,body.theme-dark .btn-line{--bg:transparent;--fg:var(--parchment);border-color:rgba(243,240,234,.55);background:transparent} .btn-ghost-light:hover,.on-dark .btn-line:hover,.theatre .btn-line:hover,body.theme-dark .btn-line:hover{--bg:transparent;--fg:var(--parchment);border-color:var(--parchment);background:transparent} .site-footer .btn-fill,.on-dark .btn-fill,.theatre .btn-fill,body.theme-dark .btn-fill,.band .btn-fill,.card-dark .btn-fill,.next-card .btn-fill{--bg:var(--candle);--fg:var(--cellar);border-color:var(--candle)} .on-dark .btn-fill:hover,.theatre .btn-fill:hover,body.theme-dark .btn-fill:hover,.band .btn-fill:hover,.card-dark .btn-fill:hover,.next-card .btn-fill:hover{--bg:#c9ae86;border-color:#c9ae86} .btn-quiet{--bg:var(--linen);--fg:var(--cellar);border-color:var(--linen)} .btn-quiet:hover{--bg:#ddd7cc;--fg:var(--cellar);border-color:#ddd7cc} .btn-danger{--bg:var(--bad);--fg:#fff;border-color:var(--bad)} .btn-danger:hover{--bg:#7f2222;border-color:#7f2222} .btn-sm{min-height:38px;padding:9px 18px;font-size:11.5px;letter-spacing:.14em} .btn-lg{min-height:56px;padding:18px 36px;font-size:13px} .btn-block{display:flex;width:100%} .btn-icon{min-height:44px;min-width:44px;padding:0;border-radius:2px} .btn-pill{--btn-r:2px} .btn-text,.btn-link,.cta-text{display:inline-flex;align-items:center;gap:8px;padding:4px 0;background:none;border:0;color:var(--cellar);font:500 13px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;text-decoration-color:rgba(21,24,29,.45);cursor:pointer;border-radius:0;transition:color var(--d-hover) var(--ease),text-decoration-color var(--d-hover) var(--ease)} .btn-text:hover,.btn-link:hover,.cta-text:hover{color:var(--shiraz);text-decoration-color:currentColor} .btn-text.is-serif{font:italic 300 1.25rem/1.3 var(--serif);letter-spacing:0;text-transform:none;text-underline-offset:.25em} .btn-link .arr,.btn-text .arr,.cta-text .arr,.arr{display:inline-block;transition:transform var(--d-hover) var(--ease)} .btn-link:hover .arr,.btn-text:hover .arr,.cta-text:hover .arr,a:hover > .arr,.btn:hover .arr{transform:translateX(4px)} .on-dark .btn-link,.on-dark .btn-text,.on-dark .cta-text,.theatre .cta-text,body.theme-dark .cta-text,body.theme-dark .btn-text,body.theme-dark .btn-link,.theatre .btn-text{color:var(--on-dark);text-decoration-color:rgba(243,240,234,.45)} .on-dark .btn-link:hover,.on-dark .btn-text:hover,body.theme-dark .btn-text:hover,body.theme-dark .btn-link:hover{color:var(--on-dark)} .btn-row{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center} /* ---------- 6. cards ---------- */ .card{background:var(--paper);border-radius:var(--r);padding:clamp(22px,3vw,36px);box-shadow:var(--shadow);border:1px solid var(--line-2);position:relative} .card-flat{box-shadow:none} .card-linen{background:var(--linen);border-color:transparent;box-shadow:none} .card-dark{background:var(--cellar);color:var(--on-dark);border-color:transparent} .card-dark h2,.card-dark h3{color:var(--on-dark)} .card-link{text-decoration:none;color:inherit;display:block;transition:transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease)} .card-link:hover{color:inherit;transform:translateY(-3px);box-shadow:var(--shadow-lg)} /* ---------- 7. chips ---------- */ .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:2px;border:1px solid rgba(21,24,29,.24);background:transparent;color:var(--cellar);font:500 14.5px/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease);-webkit-tap-highlight-color:transparent;user-select:none} .chip:hover{border-color:var(--cellar);color:var(--cellar)} .chip[aria-pressed="true"],.chip.is-on,.chip:has(input:checked){background:var(--cellar);border-color:var(--cellar);color:var(--parchment)} .chip input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px} .chip:has(input:focus-visible){box-shadow:var(--focus)} .chip .count{font-size:12px;opacity:.7} .chip-sm{min-height:30px;padding:4px 12px;font-size:13px} .on-dark .chip{color:var(--on-dark);border-color:rgba(243,240,234,.35)} .on-dark .chip[aria-pressed="true"],.on-dark .chip.is-on{background:var(--parchment);color:var(--cellar)} /* ---------- 8. fields (floating labels) ---------- */ .field{position:relative;display:block;margin:0 0 18px} .field input,.field select,.field textarea{display:block;width:100%;min-height:60px;padding:26px 18px 10px;border:1px solid rgba(21,24,29,.24);border-radius:var(--r-sm);background:var(--paper);color:var(--cellar);font:400 17px/1.4 var(--sans);transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background var(--fast) var(--ease);appearance:none;-webkit-appearance:none} .field textarea{min-height:150px;resize:vertical;line-height:1.55;padding-top:30px} .field select{padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2315181D' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center} .field input[type="date"]{min-height:60px} .field input::placeholder,.field textarea::placeholder{color:transparent;transition:color var(--fast) var(--ease)} .field input:focus::placeholder,.field textarea:focus::placeholder{color:var(--ink-3)} .field > label,.field > .fl{position:absolute;left:19px;top:19px;font:400 17px/1.3 var(--sans);color:var(--ink-2);pointer-events:none;transform-origin:left top;transition:transform var(--fast) var(--ease),color var(--fast) var(--ease);max-width:calc(100% - 38px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .field input:focus + label,.field input:not(:placeholder-shown) + label, .field textarea:focus + label,.field textarea:not(:placeholder-shown) + label, .field select + label,.field input[type="date"] + label,.field.is-filled > label{transform:translateY(-11px) scale(.74);color:var(--ink-2);font-weight:500;letter-spacing:.02em} .field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(21,24,29,.45)} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset;background:#fff} .field input:focus + label,.field textarea:focus + label,.field select:focus + label{color:var(--shiraz)} .field .opt{font-weight:400;color:var(--ink-2);font-size:.92em} .field .hint,.hint{display:block;margin:7px 2px 0;font-size:13.5px;line-height:1.45;color:var(--ink-2)} .field .err,.err-msg{display:block;margin:7px 2px 0;font-size:13.5px;line-height:1.45;color:var(--bad);font-weight:500} .field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea,.field [aria-invalid="true"]{border-color:var(--bad);background:#fbf3f1} .field.is-invalid > label{color:var(--bad)} .field.is-valid input{border-color:rgba(79,107,58,.6)} .fieldset{border:0;padding:0;margin:0 0 26px;min-width:0} .fieldset > legend,.q{display:block;padding:0;margin:0 0 12px;font:400 19px/1.35 var(--serif);color:var(--cellar)} .fieldset > legend .opt,.q .opt{font:400 13px var(--sans);color:var(--ink-2);margin-left:6px;letter-spacing:.02em} .field-row{display:grid;gap:0 14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} /* checkbox + radio */ .check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:6px 0;line-height:1.5;font-size:16px} .check input{appearance:none;-webkit-appearance:none;flex:0 0 22px;width:22px;height:22px;margin:1px 0 0;border:1.5px solid rgba(21,24,29,.45);border-radius:6px;background:var(--paper);display:grid;place-content:center;cursor:pointer;transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)} .check input[type="radio"]{border-radius:50%} .check input::before{content:"";width:12px;height:12px;transform:scale(0);transition:transform var(--fast) var(--ease);background:var(--parchment);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)} .check input[type="radio"]::before{clip-path:none;border-radius:50%;width:10px;height:10px} .check input:checked{background:var(--shiraz);border-color:var(--shiraz)} .check input:checked::before{transform:scale(1)} .check input:focus-visible{box-shadow:var(--focus)} /* choice cards (radio as a card) */ .choices{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))} .choice{position:relative;display:block;cursor:pointer} .choice input{position:absolute;opacity:0;width:1px;height:1px} .choice .choice-body{display:block;height:100%;padding:18px 18px 16px;border:1px solid rgba(21,24,29,.22);border-radius:var(--r-sm);background:var(--paper);transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background var(--fast) var(--ease)} .choice:hover .choice-body{border-color:rgba(21,24,29,.5)} .choice input:checked + .choice-body{border-color:var(--shiraz);box-shadow:0 0 0 1px var(--shiraz) inset;background:#fff} .choice input:focus-visible + .choice-body{box-shadow:var(--focus)} .choice .choice-title{display:block;font:400 20px/1.25 var(--serif);color:var(--cellar)} .choice .choice-meta{display:block;margin-top:4px;font-size:13.5px;color:var(--ink-2)} .choice .choice-tag{position:absolute;top:12px;right:12px;font:500 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--shiraz)} .segmented{display:inline-flex;border:1px solid rgba(21,24,29,.24);border-radius:2px;padding:4px;gap:4px;background:var(--paper)} .segmented label{position:relative;cursor:pointer} .segmented input{position:absolute;opacity:0;width:1px;height:1px} .segmented span{display:block;padding:9px 20px;border-radius:2px;font-weight:500;font-size:15px;transition:background var(--fast) var(--ease),color var(--fast) var(--ease)} .segmented input:checked + span{background:var(--cellar);color:var(--parchment)} .segmented input:focus-visible + span{box-shadow:var(--focus)} .honey{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} /* ---------- 9. stepper + progress ---------- */ .stepper{display:flex;gap:8px;list-style:none;margin:0 0 28px;padding:0;counter-reset:step} .stepper li{flex:1;min-width:0;counter-increment:step} .stepper li > *{display:block} .stepper .bar{height:3px;border-radius:0;background:var(--line);overflow:hidden;position:relative} .stepper .bar::after{content:"";position:absolute;inset:0;background:var(--shiraz);transform:scaleX(0);transform-origin:left;transition:transform var(--slow) var(--ease)} .stepper li.is-done .bar::after,.stepper li.is-now .bar::after{transform:scaleX(1)} .stepper li.is-now .bar::after{opacity:.55} .stepper .step-name{margin-top:10px;font:500 13px/1.3 var(--sans);color:var(--ink-2);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stepper .step-name::before{content:counter(step,decimal-leading-zero) " ";color:var(--ink-3);font-variant-numeric:tabular-nums} .stepper li.is-now .step-name{color:var(--cellar);font-weight:500} @media (max-width:420px){.stepper .step-name::before{display:none}.stepper .step-name{font-size:12.5px}} .progress{height:4px;background:var(--line);border-radius:0;overflow:hidden} .progress > span{display:block;height:100%;width:var(--p,0%);background:var(--shiraz);border-radius:inherit;transition:width var(--slow) var(--ease)} .ring{--p:0;--size:56px;--th:5px;width:var(--size);height:var(--size);border-radius:50%;background:conic-gradient(var(--shiraz) calc(var(--p) * 1%),var(--linen) 0);display:grid;place-items:center;position:relative;flex:0 0 auto} .ring::before{content:"";position:absolute;inset:var(--th);border-radius:50%;background:var(--paper)} .ring > span{position:relative;font:500 13px/1 var(--sans);font-variant-numeric:tabular-nums} .ring.is-done{background:conic-gradient(var(--ok) 100%,var(--ok) 0)} /* ---------- 10. tabs ---------- */ .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;margin-bottom:24px} .tabs::-webkit-scrollbar{display:none} .tabs [role="tab"],.tabs .tab{position:relative;flex:0 0 auto;padding:14px 16px;background:none;border:0;color:var(--ink-2);font:500 15px/1.2 var(--sans);letter-spacing:.02em;text-decoration:none;cursor:pointer;white-space:nowrap;border-radius:8px 8px 0 0} .tabs [role="tab"]::after,.tabs .tab::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--shiraz);transform:scaleX(0);transition:transform var(--mid) var(--ease)} .tabs [role="tab"]:hover,.tabs .tab:hover{color:var(--cellar)} .tabs [aria-selected="true"],.tabs .tab.is-on{color:var(--cellar);font-weight:500} .tabs [aria-selected="true"]::after,.tabs .tab.is-on::after{transform:scaleX(1)} .tabs .tab-count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:2px;background:var(--shiraz);color:var(--parchment);font-size:11.5px;font-weight:500} [role="tabpanel"]:focus-visible{box-shadow:none} /* ---------- 11. sheet (mobile bottom sheet; centred dialog on desktop) ---------- */ .sheet-backdrop{position:fixed;inset:0;z-index:90;background:rgba(11,12,14,.45);opacity:0;transition:opacity var(--mid) var(--ease);pointer-events:none} .sheet-backdrop.is-open{opacity:1;pointer-events:auto} .sheet{position:fixed;z-index:91;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;overscroll-behavior:contain;background:var(--paper);border-radius:2px 2px 0 0;padding:12px var(--gutter) calc(28px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform var(--slow) var(--ease);visibility:hidden} .sheet.is-open{transform:none;visibility:visible} .sheet::before{content:"";display:block;width:44px;height:4px;border-radius:0;background:var(--line);margin:0 auto 18px} .sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px} .sheet-head h2,.sheet-head h3{margin:0;font-size:26px} .sheet-close{flex:0 0 auto;width:44px;height:44px;border-radius:2px;border:0;background:var(--linen);display:grid;place-items:center;font-size:22px;line-height:1} @media (min-width:760px){ .sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(620px,calc(100vw - 48px));border-radius:var(--r);padding:30px 34px 34px;transform:translate(-50%,-46%);opacity:0;transition:transform var(--slow) var(--ease),opacity var(--mid) var(--ease),visibility 0s linear var(--slow)} .sheet.is-open{transform:translate(-50%,-50%);opacity:1;transition:transform var(--slow) var(--ease),opacity var(--mid) var(--ease)} .sheet::before{display:none} .sheet.sheet-side{top:0;bottom:0;right:0;left:auto;width:min(720px,94vw);max-height:none;height:100vh;border-radius:var(--r) 0 0 var(--r);transform:translateX(104%);opacity:1} .sheet.sheet-side.is-open{transform:none} } body.has-sheet{overflow:hidden} /* ---------- 12. toast ---------- */ .toasts{position:fixed;z-index:120;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:min(520px,calc(100vw - 32px))} .toast{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:14px 18px 14px 20px;border-radius:2px;background:var(--cellar);color:var(--parchment);font-size:15px;line-height:1.45;opacity:0;transform:translateY(12px);transition:opacity var(--mid) var(--ease),transform var(--mid) var(--ease);max-width:100%} .toast.is-in{opacity:1;transform:none} .toast::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:var(--candle)} .toast.ok::before{background:#9fbf7e} .toast.bad::before{background:#e98b80} .toast.warn::before{background:#e6b06e} .toast button{margin-left:auto;background:none;border:0;color:var(--candle);font-weight:500;padding:4px 6px} /* ---------- 13. badges + notices + status ---------- */ /* LOOK r3: the honesty tag in the label voice, a 2px parchment tab, no dot, no pill */ .badge-sample{display:inline-flex;align-items:center;padding:6px 10px 5px;border-radius:2px;background:rgba(243,240,234,.94);color:var(--ink-label);font:500 10px/1 var(--sans);letter-spacing:.25em;text-transform:uppercase;border:0} .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:2px;background:var(--linen);color:var(--cellar);font:500 12px/1.1 var(--sans);letter-spacing:.04em;white-space:nowrap} .badge.ok{background:#e3e9d8;color:#33461f} .badge.warn{background:#f4e2cc;color:#6f3f14} .badge.bad{background:#f3dad6;color:#7a1f1f} .badge.dark{background:var(--cellar);color:var(--parchment)} .badge.shiraz{background:var(--shiraz);color:var(--parchment)} .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink-3);vertical-align:middle} .dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}.dot.shiraz{background:var(--shiraz)} .notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-sm);background:var(--linen);color:var(--cellar);font-size:15px;line-height:1.55;border-left:3px solid var(--bark)} .notice::before{content:"";flex:0 0 8px;height:8px;margin-top:8px;border-radius:50%;background:var(--bark)} .notice.ok{background:#e9eedf;border-color:var(--ok)}.notice.ok::before{background:var(--ok)} .notice.warn{background:#f6eadb;border-color:var(--warn)}.notice.warn::before{background:var(--warn)} .notice.bad{background:#f6e2df;border-color:var(--bad)}.notice.bad::before{background:var(--bad)} .notice.info{background:#ece6dc;border-color:var(--olive)}.notice.info::before{background:var(--olive)} .notice.is-loading::before{background:transparent;border:2px solid var(--bark);border-right-color:transparent;width:12px;height:12px;flex-basis:12px;margin-top:5px;animation:eac-spin .8s linear infinite} .notice p:last-child{margin:0} .notice a{font-weight:500} /* ---------- 14. accordion (FAQ) ---------- */ .accordion{border-top:1px solid var(--line)} .accordion details{border-bottom:1px solid var(--line)} .accordion summary{list-style:none;display:flex;gap:18px;align-items:flex-start;justify-content:space-between;padding:22px 2px;cursor:pointer;font:400 clamp(19px,1.8vw,22px)/1.4 var(--serif);color:var(--cellar);border-radius:4px} .accordion summary::-webkit-details-marker{display:none} .accordion summary::after{content:"";flex:0 0 14px;height:14px;margin-top:8px;background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;transition:transform var(--mid) var(--ease);color:var(--shiraz)} .accordion details[open] summary::after{transform:rotate(45deg)} .accordion summary:hover{color:var(--shiraz)} .accordion .answer{padding:0 2px 24px;max-width:var(--measure);color:var(--ink-2)} .accordion .answer p:last-child{margin-bottom:0} .on-dark .accordion,.on-dark .accordion details{border-color:rgba(243,240,234,.18)} .on-dark .accordion summary{color:var(--on-dark)} /* ---------- 15. film: letterbox, grain, posters, theatre ---------- */ .letterbox{position:relative;aspect-ratio:2.39/1;overflow:hidden;background:var(--theatre);border-radius:0} .letterbox > img,.letterbox > video,.letterbox > iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0} .letterbox.is-reveal::before,.letterbox.is-reveal::after{content:"";position:absolute;left:0;right:0;height:50%;background:var(--theatre);z-index:2;transition:transform 1100ms var(--ease)} .letterbox.is-reveal::before{top:0;transform:translateY(0)} .letterbox.is-reveal::after{bottom:0;transform:translateY(0)} .letterbox.is-reveal.in::before{transform:translateY(-100%)} .letterbox.is-reveal.in::after{transform:translateY(100%)} .ratio-16x9{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:0;background:var(--theatre)} .ratio-4x5{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:0;background:var(--linen)} .ratio-3x2{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:0;background:var(--linen)} .ratio-16x9 > *,.ratio-4x5 > *,.ratio-3x2 > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0} /* grain is BAKED into the art (feTurbulence inside each SVG at 3–4%, stills only, never video) — research §4. .grain is kept as a harmless hook: no page overlay any more. .grain-overlay is the explicit opt-in for a real photograph that arrives without grain (3% multiply, stills only). */ .grain{position:relative;isolation:isolate} /* film card */ .film-card{display:block;color:inherit;text-decoration:none} .film-card:hover{color:inherit} .film-card .film-media{position:relative;aspect-ratio:3/2;border-radius:0;overflow:hidden;background:var(--cellar)} .film-card .film-media img,.film-card .film-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1400ms var(--ease),opacity var(--slow) var(--ease)} .film-card .film-media video{opacity:0} .film-card.is-previewing .film-media video{opacity:1} .film-card:hover .film-media img{transform:scale(1.035)} .film-card .film-media .badge-sample{position:absolute;top:14px;left:14px;z-index:4} .film-card .film-media .play{position:absolute;left:50%;top:50%;z-index:4;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:1px solid rgba(243,240,234,.7);background:rgba(11,12,14,.25);display:grid;place-items:center;transform:scale(.92);opacity:0;transition:opacity var(--d-ui) var(--ease),transform var(--d-ui) var(--ease)} .film-card .film-media .play::before{content:"";margin-left:3px;border-left:11px solid var(--parchment);border-top:7px solid transparent;border-bottom:7px solid transparent} .film-card:hover .play,.film-card:focus-visible .play{opacity:1;transform:none} .film-card .film-meta{padding:18px 2px 0} .film-card .film-title{font:italic 300 clamp(24px,2.3vw,30px)/1.15 var(--serif);margin:0 0 6px;color:var(--cellar);letter-spacing:-.01em;font-variation-settings:normal} .film-card .film-sub{font-size:14.5px;color:var(--ink-2);margin:0} .film-card .film-sub .sep{margin:0 8px;color:var(--bark)} /* r3 poster variant: 4:5, location label ABOVE the italic names (Sommar order) */ .film-card.is-poster .film-media{aspect-ratio:4/5;border-radius:0} .film-card.is-poster .film-meta{display:flex;flex-direction:column;gap:8px;padding-top:16px} .film-card.is-poster .film-sub{order:-1;font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--ink-label)} .film-card.is-poster .film-sub .sep{margin:0 .5em;color:var(--bark)} .film-card.is-poster .film-title{margin:0} .on-dark .film-card.is-poster .film-sub,body.theme-dark .film-card.is-poster .film-sub{color:var(--candle)} .film-card:focus-visible{box-shadow:none} .film-card:focus-visible .film-media{box-shadow:var(--focus)} .on-dark .film-card .film-title{color:var(--on-dark)} .on-dark .film-card .film-sub{color:var(--on-dark-2)} /* theatre — the full-screen dark player */ .theatre{position:fixed;inset:0;z-index:150;background:rgba(11,12,14,0);color:var(--on-dark);display:flex;flex-direction:column;visibility:hidden;transition:background 400ms var(--ease),visibility 0s linear 400ms} .theatre.is-open{background:var(--theatre);visibility:visible;transition:background 400ms var(--ease)} .theatre-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(14px,3vw,28px);opacity:0;transition:opacity 600ms var(--ease) 150ms} .theatre.is-open .theatre-bar,.theatre.is-open .theatre-stage,.theatre.is-open .theatre-chapters{opacity:1} .theatre-title{font:italic 300 clamp(18px,2vw,24px)/1.2 var(--serif);margin:0;color:var(--on-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .theatre-title small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 150px);font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--candle);margin-bottom:4px} .theatre-close{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:2px;border:1px solid rgba(243,240,234,.4);background:transparent;color:var(--on-dark);font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase} .theatre-close:hover{background:rgba(243,240,234,.1)} .theatre-body{flex:1;min-height:0;display:grid;gap:18px;padding:0 clamp(14px,3vw,28px) clamp(14px,3vw,28px);grid-template-rows:1fr auto} @media (min-width:1000px){.theatre-body.has-chapters{grid-template-columns:1fr 260px;grid-template-rows:1fr}} .theatre-stage{position:relative;min-height:0;display:grid;place-items:center;opacity:0;transition:opacity 700ms var(--ease) 200ms} .theatre-frame{position:relative;width:100%;max-width:calc((100vh - 140px) * 16 / 9);aspect-ratio:16/9;background:#000;border-radius:0;overflow:hidden} .theatre-frame iframe,.theatre-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000} .theatre-soon{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px} .theatre-soon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35} .theatre-soon > div{position:relative} .theatre-soon p{color:var(--on-dark-2);max-width:42ch;margin:10px auto 0} .theatre-chapters{list-style:none;margin:0;padding:0;display:flex;gap:8px;overflow-x:auto;opacity:0;transition:opacity 700ms var(--ease) 300ms;scrollbar-width:none} @media (min-width:1000px){.theatre-chapters{flex-direction:column;overflow:auto;align-self:center}} .theatre-chapters button{display:flex;gap:12px;align-items:baseline;width:100%;padding:12px 14px;border-radius:2px;border:1px solid rgba(243,240,234,.14);background:transparent;color:var(--on-dark);text-align:left;font:400 15px/1.3 var(--sans);white-space:nowrap} .theatre-chapters button:hover,.theatre-chapters button.is-on{background:rgba(243,240,234,.08);border-color:rgba(184,154,110,.5)} .theatre-chapters .t{font-variant-numeric:tabular-nums;color:var(--candle);font-size:13px} body.has-theatre{overflow:hidden} /* ---------- 16. site chrome: nav + footer ---------- */ .site-nav{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--nav-h);display:flex;align-items:center;color:var(--cellar);transition:background var(--mid) var(--ease),color var(--mid) var(--ease),box-shadow var(--mid) var(--ease),transform var(--mid) var(--ease)} .site-nav .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:24px} .site-nav.is-solid{background:var(--parchment);box-shadow:0 1px 0 var(--line)} /* LOOK r3: over a dark ground (closing band, footer) the solid bar takes the Cellar tint; while reading it steps away (eac.js) */ .site-nav.is-solid.is-on-dark{background:var(--cellar);color:var(--on-dark);box-shadow:0 1px 0 rgba(243,240,234,.1)} .site-nav.is-over:not(.is-solid){color:var(--parchment)} .site-nav.is-over:not(.is-solid)::before{content:"";position:absolute;inset:0 0 -40px;background:linear-gradient(rgba(11,12,14,.38),rgba(11,12,14,0));pointer-events:none;z-index:-1} .site-nav.is-hidden{transform:translateY(-100%)} body.menu-open .site-nav{transform:none} /* wordmark as a single line (new): Ever After Collective */ .wordmark{display:inline-block;color:inherit;text-decoration:none;font:300 22px/1 var(--serif);letter-spacing:-.005em;font-variation-settings:normal;white-space:nowrap} .wordmark em{font-style:italic} .wordmark:hover{color:inherit} .wordmark small{display:block;margin-top:7px;font:500 9px/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;opacity:.8} .nav-links{display:none;align-items:center;gap:clamp(18px,2.4vw,34px);list-style:none;margin:0;padding:0} .nav-links a{color:inherit;text-decoration:none;font:500 var(--fs-nav)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:10px 0;position:relative} .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:.2em;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--mid) var(--ease)} .nav-links a:not(.btn):hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)} .nav-links .btn{min-height:40px;padding:12px 20px;font-size:12px;letter-spacing:.16em;color:var(--fg)} .nav-links a.btn:hover{color:var(--fg)} .site-nav.is-over:not(.is-solid) .nav-links .btn{--bg:var(--parchment);--fg:var(--cellar)} /* the inline-links / menu-glyph breakpoint for the public header lives in §24 (1280px) */ .nav-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 12px;background:none;border:0;color:inherit;font:500 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase} .nav-toggle i{display:block;width:22px;height:9px;position:relative} .nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform var(--mid) var(--ease)} .nav-toggle i::before{top:0}.nav-toggle i::after{bottom:0} .menu{position:fixed;inset:0;z-index:79;background:var(--cellar);color:var(--parchment);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 20px) var(--gutter) 40px;opacity:0;visibility:hidden;transition:opacity var(--slow) var(--ease),visibility 0s linear var(--slow)} .menu.is-open{opacity:1;visibility:visible;transition:opacity var(--slow) var(--ease)} .menu ul{list-style:none;margin:0;padding:0} .menu li{overflow:hidden} .menu a{display:block;padding:8px 0;color:var(--parchment);text-decoration:none;font:300 clamp(36px,10vw,56px)/1.15 var(--serif);letter-spacing:-.02em;transform:translateY(16px);opacity:0;transition:transform var(--slow) var(--ease),opacity var(--slow) var(--ease),color var(--fast)} .menu.is-open a{transform:none;opacity:1} .menu.is-open li:nth-child(2) a{transition-delay:40ms}.menu.is-open li:nth-child(3) a{transition-delay:80ms}.menu.is-open li:nth-child(4) a{transition-delay:120ms}.menu.is-open li:nth-child(5) a{transition-delay:160ms}.menu.is-open li:nth-child(6) a{transition-delay:200ms} .menu a:hover,.menu a[aria-current="page"]{color:var(--candle)} .menu a em{font-style:italic;color:var(--candle)} .menu .menu-foot{margin-top:40px;color:var(--on-dark-2);font-size:15px} .menu .menu-foot a{display:inline;font:inherit;color:var(--candle);transform:none;opacity:1} body.menu-open{overflow:hidden} body.menu-open .site-nav{color:var(--parchment);background:transparent;box-shadow:none;backdrop-filter:none} body.menu-open .nav-toggle i::before{transform:translateY(3.75px) rotate(45deg)} body.menu-open .nav-toggle i::after{transform:translateY(-3.75px) rotate(-45deg)} .page-top{padding-top:calc(var(--nav-h) + clamp(40px,7vw,96px))} .site-footer{background:var(--cellar);color:var(--on-dark-2);padding:clamp(64px,8vw,110px) 0 36px;font-size:15px} .site-footer a:not(.btn):not(.btn-fill):not(.btn-line){color:var(--on-dark);text-decoration:none} .site-footer a:not(.btn):not(.btn-fill):not(.btn-line):hover{color:var(--candle)} .footer-top{display:grid;gap:40px} @media (min-width:860px){.footer-top{grid-template-columns:1.4fr 1fr 1fr 1fr}} .footer-top h2{font:300 clamp(28px,3vw,40px)/1.15 var(--serif);color:var(--on-dark);margin:0 0 14px} .footer-top h3{font:500 12px/1 var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--candle);margin:6px 0 18px} .footer-top ul{list-style:none;margin:0;padding:0} .footer-top li{margin:0 0 10px} .footer-base{margin-top:64px;padding-top:24px;border-top:1px solid rgba(243,240,234,.14);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:13.5px;color:rgba(243,240,234,.72)} .site-footer .footer-base a{color:rgba(243,240,234,.82)} /* ---------- 17. public page blocks ---------- */ /* manifesto */ .manifesto{font:300 clamp(28px,3.8vw,52px)/1.2 var(--serif);letter-spacing:-.015em;color:var(--cellar);max-width:22ch;margin:0;font-variation-settings:var(--display-settings)} .manifesto em{color:var(--shiraz)} /* steps (the experience in three) */ .steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(28px,4vw,48px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));counter-reset:s} .steps li{counter-increment:s;position:relative;padding-top:28px;border-top:1px solid var(--line)} .steps li::before{content:counter(s,upper-roman) ".";position:absolute;top:-14px;left:0;padding-right:12px;background:inherit;font:italic 300 22px/1 var(--serif);color:var(--shiraz)} .bg-paper .steps li::before{background:var(--paper)}.bg-linen .steps li::before{background:var(--linen)} .steps h3{margin-bottom:10px} .steps p{color:var(--ink-2);margin:0} .on-dark .steps li{border-color:rgba(243,240,234,.18)} .on-dark .steps li::before{color:var(--candle);background:var(--cellar)} .on-dark .steps p{color:var(--on-dark-2)} /* timeline (experience page) */ .timeline{list-style:none;margin:0;padding:0;position:relative} .timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:1px;background:var(--hair)} .timeline > li{position:relative;padding:0 0 clamp(30px,4vw,46px) 48px} .timeline > li::before{content:"";position:absolute;left:5px;top:7px;width:13px;height:13px;border-radius:50%;background:var(--parchment);border:1.5px solid var(--shiraz)} .timeline > li.is-key::before{background:var(--shiraz)} .timeline .when{display:block;font:500 12px/1.4 var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--olive-ink);margin-bottom:6px} .timeline h3{margin-bottom:6px} .timeline p{color:var(--ink-2);margin:0;max-width:var(--measure)} @media (min-width:900px){ .timeline.alt::before{left:50%} .timeline.alt > li{width:50%;padding:0 56px clamp(36px,4vw,52px) 0;text-align:right} .timeline.alt > li::before{left:auto;right:-7px} .timeline.alt > li:nth-child(even){margin-left:50%;padding:0 0 clamp(36px,4vw,52px) 56px;text-align:left} .timeline.alt > li:nth-child(even)::before{right:auto;left:-6px} .timeline.alt > li + li{margin-top:-84px} .timeline.alt > li p{margin-left:auto} .timeline.alt > li:nth-child(even) p{margin-left:0} } /* collections */ .addons-list{list-style:none;margin:0;padding:0;display:grid;gap:0 40px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .addons-list li{padding:18px 0;border-bottom:1px solid var(--line)} .addons-list b{display:block;font:400 20px/1.3 var(--serif);margin-bottom:4px;font-weight:400} .addons-list span{color:var(--ink-2);font-size:15.5px} /* inquiry band */ .band{position:relative;overflow:hidden;background:var(--cellar);color:var(--on-dark);isolation:isolate} .band::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 120%,rgba(21,24,29,.2),rgba(21,24,29,.85) 70%)} .band h2{color:var(--on-dark)} .band h2 em,.band .display em,.card-dark h2 em,.next-card h2 em,body.theme-dark h1 em,body.theme-dark h2 em{color:inherit} .band .lede{color:var(--on-dark-2);margin-inline:auto} /* quote — renders only real quotes */ .quote{margin:0;text-align:center} .quote blockquote{margin:0 auto;max-width:28ch;font:300 clamp(26px,3.4vw,44px)/1.3 var(--serif);font-style:italic;letter-spacing:-.01em} .quote figcaption{margin-top:22px;font:500 12px/1.4 var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--olive-ink)} /* credits / definition lists */ .credits{display:grid;gap:0;margin:0} .credits > div{display:grid;grid-template-columns:minmax(110px,40%) 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)} .credits dt{font:500 12px/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--olive-ink)} .credits dd{margin:0} .on-dark .credits > div{border-color:rgba(243,240,234,.16)} .on-dark .credits dt{color:var(--candle)} /* stills gallery */ .stills{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)} @media (min-width:800px){.stills{grid-template-columns:repeat(3,1fr)}} .stills figure{margin:0;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:3/2;background:var(--linen)} .stills figure:nth-child(4n+1){aspect-ratio:auto;grid-row:span 2} .stills img{width:100%;height:100%;object-fit:cover} /* prev / next */ .pager{display:grid;gap:12px;grid-template-columns:1fr 1fr} .pager a{display:block;padding:24px;border:1px solid var(--line);border-radius:var(--r-sm);color:inherit;text-decoration:none;transition:border-color var(--fast),background var(--fast)} .pager a:hover{border-color:var(--cellar);background:var(--paper)} .pager .dir{display:block;font:500 12px/1 var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--olive-ink);margin-bottom:10px} .pager .t{font:300 clamp(19px,2vw,24px)/1.2 var(--serif)} .pager a.next{text-align:right} @media (max-width:560px){.pager{grid-template-columns:1fr}.pager a.next{text-align:left}.pager a{padding:18px 20px}} @media (max-width:640px){.film-poster .letterbox{aspect-ratio:16/10}.film-poster .big-play span{padding:10px 18px 10px 10px;font-size:13px}.film-poster .big-play span::before{width:36px;height:36px}} .on-dark .pager a{border-color:rgba(243,240,234,.18)} .on-dark .pager a:hover{background:rgba(243,240,234,.05)} .on-dark .pager .dir{color:var(--candle)} /* inquire layout */ .inquire-grid{display:grid;gap:clamp(30px,5vw,80px)} @media (min-width:1000px){.inquire-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}.inquire-aside{position:sticky;top:calc(var(--nav-h) + 24px)}} .form-step{animation:eac-fadeup var(--slow) var(--ease) both} .form-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)} .form-nav .takes{font-size:13.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px} .form-nav .takes::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid var(--bark);background:linear-gradient(var(--bark),var(--bark)) 6px 3px/1.5px 5px no-repeat,linear-gradient(var(--bark),var(--bark)) 6px 7px/4px 1.5px no-repeat} .saved-note{font-size:13px;color:var(--ink-2)} .reveal-block{animation:eac-fadeup 520ms var(--ease) both} /* breadcrumbs */ .crumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0;font-size:13.5px;color:var(--ink-2)} .crumbs li + li::before{content:"/";margin-right:8px;color:var(--bark)} .crumbs a{color:inherit;text-decoration:none} .crumbs a:hover{color:var(--shiraz)} .on-dark .crumbs{color:rgba(243,240,234,.8)} /* filter bar */ .film-grid{display:grid;gap:clamp(34px,4vw,56px) clamp(18px,2.4vw,32px);grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))} .film-grid .film-card.is-wide{grid-column:1/-1} .empty{padding:48px 24px;text-align:center;color:var(--ink-2);border:1px dashed var(--line);border-radius:var(--r)} /* dark film pages (theatre mode for the story page) */ body.theme-dark{background:var(--ink);color:var(--on-dark-2)} body.theme-dark .site-nav.is-solid{background:var(--ink);color:var(--on-dark);box-shadow:0 1px 0 rgba(243,240,234,.1)} body.theme-dark .site-nav.is-over:not(.is-solid)::before{display:none} body.theme-dark .site-nav.is-solid .nav-links .btn{--bg:var(--parchment);--fg:var(--cellar)} body.theme-dark h1,body.theme-dark h2,body.theme-dark h3{color:var(--on-dark)} body.theme-dark .muted,body.theme-dark .lede,body.theme-dark .lede-sm{color:var(--on-dark-3)} body.theme-dark .lede-sm,body.theme-dark .statement{color:var(--on-dark-2)} body.theme-dark .label{color:var(--candle)} body.theme-dark .panel,body.theme-dark .card{background:var(--theatre-2);border-color:var(--theatre-line);color:var(--on-dark-2)} body.theme-dark .label{color:var(--candle)} body.theme-dark .prose p,body.theme-dark .prose li{color:rgba(243,240,234,.88)} body.theme-dark a:not(.btn):not(.btn-fill):not(.btn-line):not(.btn-primary){color:var(--on-dark);text-decoration-color:var(--champ)} body.theme-dark .rule,body.theme-dark hr{background:rgba(243,240,234,.14);border-color:rgba(243,240,234,.14)} body.theme-dark .btn-ghost{--fg:var(--parchment);border-color:rgba(243,240,234,.4)} body.theme-dark .btn-ghost:hover{--bg:var(--parchment);--fg:var(--cellar)} body.theme-dark .crumbs{color:rgba(243,240,234,.7)} .film-poster{position:relative;display:block;width:100%;border:0;padding:0;cursor:pointer;background:none;color:inherit;border-radius:var(--r-sm)} .film-poster .big-play{position:absolute;inset:0;z-index:4;display:grid;place-items:center} .film-poster .big-play span{display:inline-flex;align-items:center;gap:14px;padding:12px 24px 12px 12px;border-radius:2px;background:rgba(11,12,14,.4);color:var(--parchment);font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;transition:background var(--mid) var(--ease),transform var(--mid) var(--ease)} .film-poster .big-play span::before{content:"";width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,240,234,.75);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23F3F0EA'/%3E%3C/svg%3E") center/22px no-repeat} .film-poster:hover .big-play span{background:rgba(11,12,14,.6);transform:scale(1.03)} .film-poster:focus-visible{box-shadow:0 0 0 3px var(--theatre),0 0 0 5px var(--candle)} .film-poster .badge-sample{position:absolute;top:16px;left:16px;z-index:5} /* ---------- 18. app UI helpers (portal, sign, crew, studio) ---------- */ .app{min-height:100vh;background:var(--parchment)} .app-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:10px var(--gutter);background:var(--parchment);border-bottom:1px solid var(--line)} .app-main{width:100%;max-width:960px;margin:0 auto;padding:clamp(20px,4vw,40px) var(--gutter) 80px} .app-main.wide{max-width:1400px} .panel{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:clamp(16px,2.2vw,24px)} .panel + .panel{margin-top:16px} .panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .panel-head h2,.panel-head h3{margin:0;font-size:21px;font-weight:400} .list{list-style:none;margin:0;padding:0} .list > li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)} .list > li:last-child{border-bottom:0} .list .grow{flex:1;min-width:0} .kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:15px} .kv dt{color:var(--ink-2)} .kv dd{margin:0;font-weight:500} .table-wrap{overflow-x:auto;border-radius:var(--r-sm);border:1px solid var(--line)} .table{width:100%;border-collapse:collapse;font-size:15px;background:var(--paper)} .table th{text-align:left;font:500 11.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding:12px 14px;border-bottom:1px solid var(--line);background:var(--linen);white-space:nowrap} .table td{padding:13px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle} .table tr:last-child td{border-bottom:0} .table .r{text-align:right} .table tbody tr:hover{background:#fbf8f2} .avatar{width:44px;height:44px;border-radius:50%;background:var(--linen);color:var(--cellar);display:grid;place-items:center;font:400 17px/1 var(--serif);flex:0 0 auto;overflow:hidden} .avatar img{width:100%;height:100%;object-fit:cover} .stat{display:flex;flex-direction:column;gap:4px} .stat .k{font:500 11px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)} .stat .v{font:300 30px/1.1 var(--serif);font-variant-numeric:tabular-nums lining-nums} .countdown{font:300 clamp(40px,7vw,64px)/1 var(--serif);letter-spacing:-.02em} .next-card{background:var(--cellar);color:var(--on-dark);border-radius:var(--r);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-lg)} .next-card h2,.next-card h3{color:var(--on-dark)} .next-card p{color:var(--on-dark-2)} .journey{list-style:none;margin:0;padding:0} .journey > li{position:relative;display:flex;gap:16px;padding:0 0 22px 0} .journey > li::before{content:"";position:absolute;left:11px;top:26px;bottom:0;width:1.5px;background:var(--line)} .journey > li:last-child::before{display:none} .journey .jdot{flex:0 0 24px;height:24px;border-radius:50%;border:1.5px solid var(--line);background:var(--parchment);display:grid;place-items:center;position:relative;z-index:1} .journey .done .jdot{background:var(--parchment);border-color:var(--olive)} .journey .done .jdot::after{content:"";width:10px;height:6px;border-left:1.5px solid var(--olive-ink);border-bottom:1.5px solid var(--olive-ink);transform:rotate(-45deg) translate(1px,-1px)} .journey .now .jdot{border-color:var(--shiraz)} .journey .now .jdot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--shiraz)} .journey .done::before{background:var(--olive);opacity:.6} .journey .jlabel{font-weight:500} .journey .jwhen{font-size:13.5px;color:var(--ink-2)} .journey .later .jlabel,.journey .next .jlabel{color:var(--ink-2);font-weight:500} .skeleton{background:linear-gradient(90deg,var(--linen) 0%,#EEEAE3 50%,var(--linen) 100%);background-size:200% 100%;animation:eac-shimmer 1.4s linear infinite;border-radius:2px;min-height:1em;color:transparent!important} .spinner{width:22px;height:22px;border-radius:50%;border:2px solid var(--bark);border-right-color:transparent;animation:eac-spin .8s linear infinite;display:inline-block} .saved{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)} .saved.is-saving::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid var(--bark);border-right-color:transparent;animation:eac-spin .8s linear infinite} .saved.is-saved::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)} .saved.is-error{color:var(--bad)} .kbd{display:inline-block;min-width:22px;padding:2px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:2px;font:500 12px/1.3 var(--sans);text-align:center;background:var(--paper)} .app-cool{--parchment:#F1EEE9;--paper:#FAF8F5;--linen:#E7E3DC} @media (min-width:760px){.h1-short{max-width:14ch}} /* ---------- 18b. brand primitives ---------- .film-title location label ABOVE the title:

Perth · …Ava & Tom

.feature magazine film page: .feature-head, .feature-player, .feature-body, .feature-stills, .feature-credits, .feature-nav .letterbox-239 a 2.39:1 frame (img/video inside, object-fit cover); .frame-16x9 mats one inside a 16:9 player ---------- */ @keyframes eac-mask-up{to{clip-path:inset(0 0 -0.2em 0);transform:none}} @keyframes eac-fade-in{from{opacity:0}to{opacity:1}} /* film title: place above, italic names below */ .film-title{display:block;margin:0} .film-title .where{display:block;font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--ink-label);margin-bottom:12px} .film-title > em,.film-title .names{display:block;font:italic 300 var(--fs-title)/1.05 var(--serif);letter-spacing:-.01em;color:var(--cellar);font-variation-settings:var(--display-settings)} .film-title.is-hero > em,.film-title.is-hero .names{font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.015em} .film-title.is-sm > em,.film-title.is-sm .names{font-size:clamp(22px,2.2vw,30px);line-height:1.15} .film-title.is-sm .where{margin-bottom:8px} .on-dark .film-title .where,body.theme-dark .film-title .where,.theatre .film-title .where{color:var(--candle)} .on-dark .film-title > em,.on-dark .film-title .names,body.theme-dark .film-title > em,body.theme-dark .film-title .names{color:var(--on-dark)} /* frames */ .letterbox-239{position:relative;aspect-ratio:2.39/1;overflow:hidden;background:var(--theatre);border-radius:0} .letterbox-239 > img,.letterbox-239 > video,.letterbox-239 > iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0} .letterbox-239 > video{opacity:0;transition:opacity 500ms var(--ease-inout)} .letterbox-239.is-previewing > video,.is-previewing .letterbox-239 > video{opacity:1} .letterbox-239 > img{transition:transform 1400ms var(--ease-out-expo)} a:hover > .letterbox-239 > img{transform:scale(1.03)} .letterbox-239.has-matte{box-shadow:inset 0 0 0 1px rgba(21,24,29,.9)} .frame-16x9{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--theatre)} .frame-16x9 > .letterbox-239{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)} /* a 2.39 poster matted in Theatre Black inside a 16:9 player */ .frame-16x9 > iframe,.frame-16x9 > video{position:absolute;inset:0;width:100%;height:100%;border:0} .play-glyph{position:absolute;left:50%;top:50%;z-index:4;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:1px solid rgba(243,240,234,.75);background:rgba(11,12,14,.25);display:grid;place-items:center;transition:background var(--d-ui) var(--ease),transform var(--d-ui) var(--ease)} .play-glyph::before{content:"";margin-left:3px;border-left:11px solid var(--parchment);border-top:7px solid transparent;border-bottom:7px solid transparent} a:hover .play-glyph,button:hover .play-glyph{background:rgba(11,12,14,.45);transform:scale(1.04)} /* magazine film page */ .feature{display:grid;gap:clamp(40px,6vw,88px)} .feature-head{max-width:860px} .feature-head .label{margin-bottom:18px} .feature-head h1{margin-bottom:.35em} .feature-head .deck{font:500 var(--fs-label)/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-label);max-width:52ch;margin:0} .on-dark .feature-head .deck,body.theme-dark .feature-head .deck{color:var(--on-dark-3)} .feature-player{position:relative} .feature-body{display:grid;gap:clamp(24px,3vw,40px)} @media (min-width:900px){.feature-body{grid-template-columns:1fr 1fr}.feature-body.is-single{grid-template-columns:minmax(0,58ch)}} .feature-body p{margin:0;color:var(--ink-body)} .feature-body p + p{margin-top:1.1em} .on-dark .feature-body p,body.theme-dark .feature-body p{color:var(--on-dark-2)} .feature-body .dropcap::first-letter{color:var(--cellar)} .feature-stills{display:grid;gap:clamp(14px,2vw,28px);grid-template-columns:1fr 1fr;align-items:start} .feature-stills figure{margin:0} .feature-stills figure:nth-child(4n+2),.feature-stills figure:nth-child(4n+3){margin-top:clamp(24px,6vw,96px)} .feature-stills figcaption{margin-top:10px;font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-label)} @media (max-width:560px){.feature-stills{grid-template-columns:1fr}.feature-stills figure:nth-child(n){margin-top:0}} .feature-credits{list-style:none;margin:0;padding:0;max-width:58ch} .feature-credits li{display:grid;grid-template-columns:minmax(100px,38%) 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)} .feature-credits li:first-child{border-top:1px solid var(--line)} .feature-credits .role{font:500 11.5px/1.7 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-label)} .feature-credits .who{color:var(--cellar)} .on-dark .feature-credits li,body.theme-dark .feature-credits li{border-color:var(--theatre-line)} .on-dark .feature-credits .role,body.theme-dark .feature-credits .role{color:var(--candle)} .on-dark .feature-credits .who,body.theme-dark .feature-credits .who{color:var(--on-dark-2)} .feature-nav{display:flex;justify-content:space-between;gap:24px;padding-top:28px;border-top:1px solid var(--line)} .feature-nav a{text-decoration:none;color:inherit;max-width:48%} .feature-nav .dir{display:block;font:500 11px/1 var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--ink-label);margin-bottom:10px} .feature-nav .t{font:italic 300 clamp(20px,2vw,26px)/1.2 var(--serif)} .feature-nav a.next{text-align:right;margin-left:auto} .feature-nav a:hover .t{color:var(--shiraz)} .on-dark .feature-nav,body.theme-dark .feature-nav{border-color:var(--theatre-line)} .on-dark .feature-nav .dir,body.theme-dark .feature-nav .dir{color:var(--candle)} .on-dark .feature-nav a:hover .t,body.theme-dark .feature-nav a:hover .t{color:var(--candle)} /* the quiet quote: one long italic line, two first names, no stars (renders real quotes only) */ .quote-r3{margin:0;max-width:34ch;margin-inline:auto;text-align:center} .quote-r3 blockquote{margin:0;font:italic 300 var(--fs-state)/1.3 var(--serif);letter-spacing:-.01em;font-variation-settings:normal} .quote-r3 figcaption{margin-top:22px;font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--ink-label)} /* a closing Cellar band in the r3 register */ .band-r3{background:var(--cellar);color:var(--on-dark-2);text-align:center;padding-block:clamp(72px,10vw,140px)} .band-r3 .label{color:var(--candle);margin-bottom:22px} .band-r3 .statement{margin-inline:auto;color:var(--on-dark)} .band-r3 .btn-fill{margin-top:30px} /* running line (places filmed), not a map */ .running-line{font:italic 300 clamp(20px,2.2vw,28px)/1.5 var(--serif);color:var(--ink-2);max-width:none} .running-line .sep{color:var(--bark);margin:0 .4em;font-style:normal} .running-line a{text-decoration-color:rgba(21,24,29,.28);text-underline-offset:.18em;text-decoration-thickness:1px} .running-line a:hover{text-decoration-color:currentColor} /* thin-space price: $6 900 */ .price{font-variant-numeric:lining-nums tabular-nums;white-space:nowrap} /* ---------- 19. motion ---------- */ .reveal{opacity:0;transform:translateY(var(--m-rise));transition:opacity var(--d-reveal) var(--m-ease),transform var(--d-reveal) var(--m-ease);transition-delay:var(--d,0ms)} .reveal.in{opacity:1;transform:none} .fade{opacity:0;transition:opacity var(--d-reveal) var(--ease-out-expo);transition-delay:var(--d,0ms)} .fade.in{opacity:1} html.no-js .reveal,html.no-js .fade{opacity:1;transform:none} @keyframes eac-spin{to{transform:rotate(360deg)}} @keyframes eac-fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes eac-shimmer{to{background-position:-200% 0}} @keyframes eac-check{from{stroke-dashoffset:48}to{stroke-dashoffset:0}} .check-anim path{stroke-dasharray:48;stroke-dashoffset:48;animation:eac-check 900ms var(--ease) 200ms forwards} /* the title sequence (home hero, pure CSS so it starts on first paint with no flash and needs no JS): 0ms the picture rises out of Theatre black (900ms) → 150ms label → 250/330ms the headline lines unmask → 520ms lede → 680ms the actions and caption. petals.js then lets the first slips fall from ~1s; nothing else moves until you scroll. Hooks: #hero, #hero-media (a picture inside), .hero-label, h1 (.hero-line spans, optional), .lede, .actions, .h-hero-cap */ @keyframes eac-veil{from{opacity:1}to{opacity:0}} @keyframes eac-settle{from{transform:scale(1.035)}to{transform:none}} @keyframes eac-rise{from{opacity:0;transform:translateY(var(--m-rise))}to{opacity:1;transform:none}} #hero-media picture{display:block;position:absolute;inset:0;animation:eac-settle 1600ms var(--m-ease) both} #hero-media::after{content:"";position:absolute;inset:0;z-index:3;background:var(--theatre);pointer-events:none;animation:eac-veil 900ms var(--ease-inout) 0ms both} [data-page="home"] #hero .hero-label{animation:eac-rise var(--m-in) var(--m-ease) 150ms both} [data-page="home"] #hero h1 .hero-line{display:block;animation:eac-mask-up 800ms var(--ease-out-expo) 250ms both;clip-path:inset(0 0 100% 0);transform:translateY(.35em)} [data-page="home"] #hero h1 .hero-line + .hero-line{animation-delay:330ms} [data-page="home"] #hero h1:not(:has(.hero-line)){animation:eac-rise 800ms var(--m-ease) 250ms both} [data-page="home"] #hero .lede{animation:eac-rise 700ms var(--m-ease) 520ms both} [data-page="home"] #hero .actions,[data-page="home"] #hero .h-hero-cap{animation:eac-rise var(--m-in) var(--m-ease) 680ms both} @media (prefers-reduced-motion:reduce){#hero-media picture,#hero-media::after,[data-page="home"] #hero .hero-label,[data-page="home"] #hero h1,[data-page="home"] #hero h1 .hero-line,[data-page="home"] #hero .lede,[data-page="home"] #hero .actions,[data-page="home"] #hero .h-hero-cap{animation:none!important;clip-path:none!important;opacity:1!important;transform:none!important}#hero-media::after{display:none}} html.reduce-motion #hero-media picture,html.reduce-motion [data-page="home"] #hero .hero-label,html.reduce-motion [data-page="home"] #hero h1,html.reduce-motion [data-page="home"] #hero h1 .hero-line,html.reduce-motion [data-page="home"] #hero .lede,html.reduce-motion [data-page="home"] #hero .actions,html.reduce-motion [data-page="home"] #hero .h-hero-cap{animation:none;clip-path:none} html.reduce-motion #hero-media::after{display:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0ms!important} .reveal,.fade{opacity:1!important;transform:none!important;clip-path:none!important} .letterbox.is-reveal::before,.letterbox.is-reveal::after{display:none} .check-anim path{stroke-dashoffset:0} /* everything static: poster only, no masks, no crossfade */ .letterbox-239 > video{display:none} .letterbox-239 > img,.film-card .film-media img{transform:none!important;transition:none!important} } html.reduce-motion .reveal,html.reduce-motion .fade{opacity:1;transform:none;clip-path:none} /* ---------- 20. utilities ---------- */ .mt-0{margin-top:0!important}.mt-1{margin-top:8px!important}.mt-2{margin-top:16px!important}.mt-3{margin-top:24px!important}.mt-4{margin-top:40px!important}.mt-5{margin-top:64px!important} .mb-0{margin-bottom:0!important}.mb-1{margin-bottom:8px!important}.mb-2{margin-bottom:16px!important}.mb-3{margin-bottom:24px!important}.mb-4{margin-bottom:40px!important}.mb-5{margin-bottom:64px!important} .gap-1{gap:8px!important}.gap-2{gap:16px!important}.gap-3{gap:24px!important} .w-full{width:100%}.maxw-measure{max-width:var(--measure)} .nowrap{white-space:nowrap}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .text-shiraz{color:var(--shiraz)}.text-olive{color:var(--olive-ink)}.text-ok{color:var(--ok)}.text-warn{color:var(--warn)}.text-bad{color:var(--bad)} .hide-sm{display:none}@media (min-width:760px){.hide-sm{display:revert}.show-sm{display:none!important}} @media print{.site-nav,.site-footer,.toasts,.menu,.btn,.sheet,.sheet-backdrop{display:none!important}body{background:#fff}.reveal{opacity:1;transform:none}} /* ===================================================================== 21. BRAND EDITION 1 LAYER (Oct 2026) — Ink · Paper · Champagne; Bodoni Moda / Cormorant Garamond / Jost. Sits last so it wins over the r3 rules above without rewriting them. Rules: calm, few colours, fine lines; square or 2px corners; no shadows, no decorative gradients; Champagne only for hairlines and small accents. ===================================================================== */ body{font-weight:300;font-size:var(--fs-body);line-height:1.65;color:var(--ink-body);background:var(--parchment)} b,strong{font-weight:500} ::selection{background:rgba(184,154,110,.32);color:var(--ink)} hr{border-top:1px solid var(--hair)} .on-dark hr,.theatre hr,body.theme-dark hr{border-top-color:var(--champ)} .rule{background:var(--hair)} .on-dark .rule{background:var(--champ)} .ornament{color:var(--champ-deep)} .on-dark .ornament{color:var(--champ)} /* type: headings Cormorant Light; italic emphasis in the same ink (the italic is the accent) */ h1,h2,h3,h4,.display,.h1,.h2,.h3,.h4{font-family:var(--serif);font-weight:300;letter-spacing:-.005em;color:var(--ink)} h1,.h1,.display,.hero-line{line-height:1.04} h4,.h4{font-weight:400} .display em,h1 em,h2 em,h3 em,.h1 em,.h2 em,.hero-line em,.statement em,.lede em{color:inherit;font-weight:300} .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark .display,.card-dark h2,.card-dark h3{color:var(--on-dark)} .lede{font-weight:300;color:var(--ink-2);line-height:1.42} .statement,.manifesto{font-weight:300;letter-spacing:-.005em} p,.prose p,.prose li{font-weight:300} .prose li::marker{color:var(--champ-deep)} .prose blockquote{border-left:1px solid var(--champ-deep)} .dropcap::first-letter{color:var(--ink)} /* Title role: Bodoni Moda capitals +.12em — page names, section names, film and collection titles */ .title,.page-title{font-family:var(--display);font-weight:400;font-size:clamp(1.75rem,3.4vw,3rem);line-height:1.1;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);display:block} .label.page-title,.eyebrow.page-title{font:400 clamp(1.625rem,3.2vw,3rem)/1.1 var(--display);letter-spacing:.12em;color:var(--ink);margin-bottom:.35em} .label.page-title + h1,.page-title + h1{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.2;color:var(--ink-2);max-width:26ch} .label.page-title + h1.mt-3,.label.page-title + h1.mt-2{margin-top:.6rem} .on-dark .page-title,.theatre .page-title,body.theme-dark .page-title{color:var(--on-dark)} .on-dark .page-title + h1{color:var(--on-dark-2)} /* Label role: Jost 400 capitals 11px +.25em, Stone */ .label,.eyebrow{font:400 var(--fs-label)/1.5 var(--sans);letter-spacing:.25em;color:var(--ink-label)} .on-dark .label,.on-dark .eyebrow,.theatre .label,body.theme-dark .label{color:var(--on-dark-3)} .label-olive{color:var(--stone)} .small{font-size:14px}.tiny{font-size:12.5px} .muted{color:var(--ink-2)} /* links: Ink with a fine underline (no colour accent); on Ink: Paper */ a{color:var(--ink)} a:hover{color:var(--ink-2)} .on-dark a:not(.btn):not(.btn-fill):not(.btn-line):not(.btn-primary),body.theme-dark a:not(.btn):not(.btn-fill):not(.btn-line){color:var(--on-dark)} .on-dark a:not(.btn):not(.btn-fill):not(.btn-line):hover,body.theme-dark a:not(.btn):not(.btn-fill):not(.btn-line):hover{color:var(--on-dark-2)} .on-dark :focus-visible,.theatre :focus-visible{box-shadow:0 0 0 2px var(--theatre),0 0 0 3px var(--paper-b)} /* buttons: Ink fill + Paper text, or a 1px Ink outline; spaced Jost capitals; 2px corners. On Ink: Paper fill + Ink text. Never gold. */ .btn,.btn-fill,.btn-line{font:400 12px/1 var(--sans);letter-spacing:.22em;--btn-r:2px} .btn:hover,.btn-fill:hover{--bg:var(--dusk)} .btn-line,.btn-ghost{border-color:var(--ink)} .btn-line:hover,.btn-ghost:hover{--bg:var(--ink);--fg:var(--paper-b);background:var(--ink);border-color:var(--ink)} .site-footer .btn-fill,.on-dark .btn-fill,.theatre .btn-fill,body.theme-dark .btn-fill,.band .btn-fill,.card-dark .btn-fill,.next-card .btn-fill, .on-dark .btn,.band .btn,.card-dark .btn,.next-card .btn{--bg:var(--paper-b);--fg:var(--ink);border-color:var(--paper-b)} .on-dark .btn-fill:hover,.theatre .btn-fill:hover,body.theme-dark .btn-fill:hover,.band .btn-fill:hover,.card-dark .btn-fill:hover,.next-card .btn-fill:hover, .on-dark .btn:hover,.band .btn:hover,.card-dark .btn:hover,.next-card .btn:hover{--bg:#fff;border-color:#fff;color:var(--ink)} .btn-ghost-light,.on-dark .btn-line,.theatre .btn-line,body.theme-dark .btn-line{border-color:rgba(243,240,234,.7)} .btn-ghost-light:hover,.on-dark .btn-line:hover,.theatre .btn-line:hover,body.theme-dark .btn-line:hover{--bg:var(--paper-b);--fg:var(--ink);background:var(--paper-b);border-color:var(--paper-b)} .btn-text,.btn-link,.cta-text{font:400 12px/1.4 var(--sans);letter-spacing:.22em;text-decoration-color:var(--champ-deep)} .btn-text:hover,.btn-link:hover,.cta-text:hover{color:var(--ink);text-decoration-color:var(--ink)} .on-dark .btn-link,.on-dark .btn-text,.on-dark .cta-text,.theatre .cta-text,body.theme-dark .cta-text,body.theme-dark .btn-text,body.theme-dark .btn-link,.theatre .btn-text{text-decoration-color:var(--champ)} .on-dark .btn-link:hover,.on-dark .btn-text:hover,body.theme-dark .btn-text:hover,body.theme-dark .btn-link:hover{color:var(--on-dark);text-decoration-color:var(--on-dark)} .btn-quiet{--bg:transparent;--fg:var(--ink);border-color:var(--line)} .btn-quiet:hover{--bg:var(--linen);border-color:var(--ink)} .btn-text.is-serif{font:italic 300 1.3rem/1.3 var(--serif);letter-spacing:0;text-transform:none} /* cards: hairlines, no lift */ .card{border:1px solid var(--line);box-shadow:none} .card-link:hover{transform:none;box-shadow:none;border-color:var(--ink)} .next-card{box-shadow:none} /* chips, segmented, tabs, badges: square-ish, quiet */ .chip{border-radius:2px;font:400 14px/1.2 var(--sans);border-color:rgba(21,24,29,.28)} .segmented,.segmented span{border-radius:2px} .tabs [role="tab"],.tabs .tab{border-radius:0;font:400 12px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase} .tabs [aria-selected="true"],.tabs .tab.is-on{font-weight:500} .tabs [role="tab"]::after,.tabs .tab::after{height:1px;background:var(--ink)} .tabs .tab-count{border-radius:2px;background:var(--ink);font-weight:500;letter-spacing:0} .badge{font:500 10.5px/1.1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:6px 10px 5px} .badge.ok{background:#E6EADF;color:#33461f} .badge.warn{background:#EFE6DA;color:#6f3f14} .badge.bad{background:#F1E1DE;color:#7a1f1f} .badge.shiraz{background:var(--ink)} /* notices: neutral tint, a 1px rule, no dot */ .notice{background:rgba(21,24,29,.04);border-left:1px solid var(--champ-deep);border-radius:0;padding:14px 18px;font-size:15px} .notice::before{display:none} .notice.ok{background:rgba(79,107,58,.07);border-color:var(--ok)} .notice.warn{background:rgba(138,82,32,.07);border-color:var(--warn)} .notice.bad{background:rgba(155,44,44,.06);border-color:var(--bad)} .notice.info{background:rgba(21,24,29,.04);border-color:var(--stone)} .notice.is-loading::before{display:block} /* fields: hairline borders, Ink focus, square checkboxes */ .field input,.field select,.field textarea{font-weight:300} .field > label,.field > .fl{font-weight:300} .field input:focus + label,.field textarea:focus + label,.field select:focus + label{color:var(--ink)} .fieldset > legend,.q{font:400 21px/1.35 var(--serif)} .check input{border-radius:2px;border-width:1px;border-color:rgba(21,24,29,.5)} .check input[type="radio"]{border-radius:50%} .choice .choice-title{font:400 21px/1.25 var(--serif)} .choice .choice-tag{font:400 10px/1 var(--sans);letter-spacing:.25em;color:var(--ink-label)} /* progress and steps: fine lines in Deep Champagne */ .stepper .bar{height:1px;border-radius:0} .stepper .bar::after{background:var(--ink)} .stepper .step-name{font:400 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase} .stepper li.is-now .step-name{font-weight:500} .progress{height:2px;border-radius:0}.progress > span{background:var(--champ-deep);border-radius:0} .ring{background:conic-gradient(var(--champ-deep) calc(var(--p) * 1%),var(--linen) 0)} .ring > span{font-weight:500} .ring.is-done{background:conic-gradient(var(--ink) 100%,var(--ink) 0)} .timeline > li::before{border:1px solid var(--champ-deep)} .journey .now .jdot{border-color:var(--ink)} .journey .jlabel{font-weight:500} /* overlays: no shadows; the scrim does the separating */ .sheet{box-shadow:none;border-top:1px solid var(--line)} .sheet-backdrop{background:rgba(11,12,14,.5)} .toast{box-shadow:none;border-radius:2px;font-weight:300} .toast button{color:var(--paper-b);text-decoration:underline;text-decoration-color:var(--champ);text-underline-offset:.3em} .skip{border-radius:2px} .accordion summary{border-radius:0;font-weight:300} .accordion summary:hover{color:var(--ink-2)} .accordion summary::after{background:linear-gradient(currentColor,currentColor) center/14px 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 14px no-repeat} /* film: 2.39:1 on Ink, quiet play glyphs */ .film-card .film-title{font:italic 300 clamp(24px,2.3vw,30px)/1.15 var(--serif);color:var(--ink)} .film-card .film-media .play,.play-glyph{background:rgba(11,12,14,.35)} .film-poster .big-play span{background:rgba(11,12,14,.45);font-weight:400} /* the logo: outlined SVG (never retyped). Width per Brand: 180–220px desktop header, 140px on phones. */ .eac-wordmark{display:block;width:var(--wm-w,200px);height:auto;overflow:visible} .eac-signet,.eac-signet-mini{display:block;height:auto} .wordmark{font:inherit;line-height:0;--mark-accent:var(--champ-deep)} .wordmark:focus-visible{outline:1px solid currentColor;outline-offset:6px;box-shadow:none} .on-dark .wordmark,.site-footer .wordmark,.menu .wordmark,body.theme-dark .wordmark{--mark-accent:var(--champ)} @media (max-width:640px){.wordmark{--wm-w:164px}} /* site header: wordmark left; on wide screens the menu sits inline in Jost spaced capitals */ .site-nav{--mark-accent:var(--champ-deep)} .site-nav.is-over:not(.is-solid),body.menu-open .site-nav{--mark-accent:currentColor} .site-nav.is-solid.is-on-dark,body.theme-dark .site-nav{--mark-accent:var(--champ)} .site-nav.is-solid{box-shadow:none;border-bottom:1px solid var(--line-2)} .site-nav.is-solid.is-on-dark,body.theme-dark .site-nav.is-solid{box-shadow:none;border-bottom-color:rgba(243,240,234,.1)} .site-nav .nav-links{gap:clamp(22px,2.2vw,36px)} .site-nav .nav-links a{font:400 var(--fs-nav)/1 var(--sans);letter-spacing:.25em} .site-nav .nav-links a:not(.btn)::after{bottom:0;background:currentColor} .site-nav .nav-links a[aria-current="page"]::after{background:var(--mark-accent)} /* footer: the signet on Ink */ .footer-brand .eac-signet{width:112px;margin:0 0 22px;--mark-accent:var(--champ)} .site-footer{color:var(--on-dark-2)} .site-footer a:not(.btn):not(.btn-fill):not(.btn-line):hover{color:var(--on-dark-3)} .footer-base{border-top:1px solid rgba(184,154,110,.45)} /* print: no backgrounds */ @media print{.site-nav,.site-footer,.menu{display:none!important}body{background:#fff}} /* critic pass */ .film-title > em,.film-title .names{font:400 var(--fs-title)/1.12 var(--display);letter-spacing:.12em;text-transform:uppercase;font-style:normal} .film-title.is-hero > em,.film-title.is-hero .names{font-size:clamp(1.875rem,4.2vw,3.25rem);line-height:1.12;letter-spacing:.12em} .film-title.is-sm > em,.film-title.is-sm .names{font-size:clamp(17px,1.6vw,21px);line-height:1.3} .film-card .film-title{font:400 clamp(16px,1.45vw,19px)/1.35 var(--display);letter-spacing:.12em;text-transform:uppercase;font-style:normal;margin:0 0 8px} .feature-stills > :last-child:nth-child(odd){grid-column:1/-1} .footer-brand .eac-signet{width:190px} .site-footer .footer-base,.site-footer.is-r3 .footer-base{border-top:1px solid rgba(184,154,110,.45)} .card-link,.card-link:hover{transform:none} /* ===================================================================== 22. LEGIBILITY (Oct 2026): larger, slightly firmer text everywhere. Body Jost 400 at 17–19px / 1.7; labels 12px; Cormorant one step firmer; secondary text darker. ===================================================================== */ body{font-weight:400;line-height:1.7} p,.prose p,.prose li,.lede-sm,.field input,.field select,.field textarea,.field > label,.field > .fl{font-weight:400} .lede{font-weight:400;font-size:clamp(21px,2.1vw,27px);line-height:1.45;color:var(--ink-2)} .statement,.manifesto{font-weight:400} h2,.h2,h3,.h3,.prose h2,.prose h3{font-weight:400} h1,.h1,.display,.hero-line{font-weight:300} .label,.eyebrow{font-size:var(--fs-label);letter-spacing:.2em;color:var(--ink-label)} .muted{color:#3A3D42} .small{font-size:15px;line-height:1.6}.tiny{font-size:13.5px} .btn,.btn-fill,.btn-line{font-size:13px;letter-spacing:.2em} .btn-text,.btn-link,.cta-text{font-size:13px;letter-spacing:.18em;font-weight:400} .accordion summary{font-weight:400} .accordion .answer{color:var(--ink-body)} .notice{font-size:16px} .on-dark p,.on-dark .lede-sm{color:rgba(243,240,234,.92)} .on-dark .muted,.on-dark .lede{color:rgba(243,240,234,.78)} .on-dark .label,.on-dark .eyebrow,.theatre .label,body.theme-dark .label{color:rgba(243,240,234,.74)} .footer-line{font-size:15px} .site-footer.is-r3{font-size:15px} .film-card .film-sub,.film-card.is-poster .film-sub{font-size:var(--fs-label);letter-spacing:.2em} .card .muted,.prose li{color:var(--ink-body)} /* the logo sits in the middle of every top bar (portal, signing, crew): a three-column bar, the mark centred, anything else to the right */ .app-bar,.sg-top{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center} .app-bar > .wordmark,.sg-top > .wordmark{grid-column:1;grid-row:1;justify-self:start;--wm-w:280px} .app-bar > :not(.wordmark),.sg-top > :not(.wordmark){grid-column:2;grid-row:1;justify-self:end} @media (max-width:640px){.app-bar > .wordmark,.sg-top > .wordmark{--wm-w:190px}} /* ===================================================================== 23. PHONE TEMPO (Oct 2026): type steps down rather than shrinking, one gutter, even bands, nothing cramped. ===================================================================== */ @media (max-width:759px){ :root{--gutter:22px;--fs-body:17px;--nav-h:80px} body{line-height:1.65} h1,.h1,.display{font-size:2.5rem;line-height:1.05} h2,.h2{font-size:1.9rem;line-height:1.12} h3,.h3{font-size:1.4rem} .lede{font-size:20px;line-height:1.45} .statement{font-size:1.5rem;line-height:1.3} .label,.eyebrow{letter-spacing:.16em;line-height:1.7} .label{overflow-wrap:anywhere} .label.page-title,.eyebrow.page-title{white-space:normal;font-size:1.6rem;letter-spacing:.08em;line-height:1.2;margin-bottom:.5em} .label.page-title + h1,.page-title + h1{font-size:1.55rem;max-width:none;margin:0 0 .7em} .page-top .lede,.archive-intro .lede{max-width:none;font-size:19px} .h1-short{max-width:none!important} .page-top{padding-bottom:8px} .section{padding-block:56px} .section-sm{padding-block:40px} .page-top{padding-top:calc(var(--nav-h) + 28px)} .btn,.btn-fill,.btn-line{min-height:52px} .band .btn,.band-r3 .btn,.page-top .btn{width:100%;max-width:420px} .btn-row{gap:14px} .wrap,.wrap-narrow,.wrap-wide{padding-inline:var(--gutter)} p{max-width:none} /* site chrome: see §24 */ /* cards and lists breathe evenly */ .card{padding:22px} .accordion summary{padding:18px 0;font-size:19px} .film-card .film-title{font-size:16px} } /* ===================================================================== 24. CHROME (27 Oct 2026 overhaul) — header, menu curtain, phone bar, footer, in one place. These rules used to be injected by eac.js at runtime (and so silently beat §23); they now live here, last. Header: the one-line wordmark left; four places inline ≥1280px, a menu glyph below; Client login; Enquire. Phone: wordmark, Log in, glyph. A "Check your date" bar rises at the foot once you start reading. Footer: the signet, one line (with the two place pages), the email, one row of places, the small print. ===================================================================== */ .site-nav.is-r3 .wrap-wide{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px} .site-nav.is-r3 .wordmark{grid-column:1;justify-self:start;display:block;padding:16px 0;--wm-w:320px} @media (max-width:1279px){.site-nav.is-r3 .wordmark{--wm-w:280px}} @media (max-width:900px){.site-nav.is-r3 .wordmark{--wm-w:240px}} @media (max-width:640px){.site-nav.is-r3 .wordmark{--wm-w:200px}} @media (max-width:380px){.site-nav.is-r3 .wordmark{--wm-w:176px}} .site-nav.is-r3 .nav-right{grid-column:2;grid-row:1;justify-self:end;display:flex;align-items:center;gap:26px} .site-nav.is-r3 .nav-right .nav-primary{display:contents} .site-nav.is-r3 .nav-links{display:none;gap:26px} .site-nav.is-r3 .nav-links a{font:400 var(--fs-nav)/1 var(--sans);letter-spacing:.18em;padding:16px 0} .site-nav.is-r3 .nav-login{white-space:nowrap;color:inherit;text-decoration:none;font:400 var(--fs-nav)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:16px 0} .site-nav.is-r3 .nav-login:hover,.site-nav.is-r3 .nav-login[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--mark-accent);text-underline-offset:.5em} .site-nav.is-r3 .nav-login .l-short{display:none} .site-nav.is-r3 .nav-enquire{display:inline-flex;white-space:nowrap;align-items:center;min-height:44px;padding:0 20px;border:1px solid currentColor;border-radius:2px;color:inherit;text-decoration:none;font:400 var(--fs-nav)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;transition:background var(--d-hover),color var(--d-hover),border-color var(--d-hover)} .site-nav.is-r3 .nav-enquire:hover,.site-nav.is-r3 .nav-enquire[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--paper-b)} .site-nav.is-over:not(.is-solid) .nav-enquire:hover,.site-nav.is-on-dark .nav-enquire:hover,body.theme-dark .site-nav .nav-enquire:hover,body.menu-open .site-nav .nav-enquire:hover{background:var(--paper-b);border-color:var(--paper-b);color:var(--ink)} .site-nav.is-r3 .nav-toggle{display:none;align-items:center;gap:12px;min-height:44px;min-width:44px;padding:0;background:none;border:0;font:400 var(--fs-nav)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:inherit} .site-nav.is-r3 .nav-toggle i{width:26px;height:9px} .site-nav.is-r3 .nav-toggle i::before,.site-nav.is-r3 .nav-toggle i::after{height:1px} @media (min-width:1280px){.site-nav.is-r3 .nav-links{display:flex}} @media (max-width:1279px){.site-nav.is-r3 .nav-toggle{display:inline-flex}} @media (max-width:640px){ .site-nav.is-r3 .wrap-wide{gap:8px} .site-nav.is-r3 .nav-right{gap:18px} .site-nav.is-r3 .nav-login{font-size:12px;letter-spacing:.14em} .site-nav.is-r3 .nav-login .l-long,.site-nav.is-r3 .nav-toggle-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .site-nav.is-r3 .nav-login .l-short{display:inline} .site-nav.is-r3 .nav-enquire{display:none} .site-nav.is-r3 .nav-toggle{gap:0} } /* the menu curtain: Ink, the places in Cormorant, Client login and the email aside */ .menu{overflow-y:auto;justify-content:flex-start;padding-top:calc(var(--nav-h) + 24px)} @media (min-height:720px){.menu{justify-content:center}} .menu-inner{width:100%;max-width:var(--wrap);margin-inline:auto;display:grid;gap:clamp(28px,5vh,56px) 40px;align-items:end} @media (min-width:900px){.menu-inner{grid-template-columns:minmax(0,1fr) minmax(220px,320px)}} .menu-main{display:grid;gap:2px} .menu .menu-main a{display:flex;align-items:baseline;gap:18px;padding:6px 0;font:300 clamp(30px,min(6.8vh,9vw),62px)/1.12 var(--serif);letter-spacing:-.005em} .menu .menu-main a[aria-current="page"]{color:var(--on-dark)} .menu .menu-main a[aria-current="page"]::after{content:"";width:28px;height:1px;background:var(--champ);margin-left:4px;align-self:center} .menu .menu-login a{display:inline-flex;align-items:center;min-height:44px;font:400 12px/1 var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--on-dark);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--champ);text-underline-offset:.5em;transform:none;opacity:1} .menu .menu-foot{margin-top:20px;font-size:14px;line-height:1.7;color:var(--on-dark-3)} .menu .menu-foot a{display:inline-block;padding:8px 0;color:var(--on-dark-2)} @media (max-height:820px){.menu .menu-foot{margin-top:10px}.menu-inner{gap:22px 40px}.menu .menu-main a{padding:4px 0}} /* the curtain rises with the same ease as everything else: links settle 8px, 40ms apart */ .menu a{transition:transform var(--m-in) var(--m-ease),opacity var(--m-in) var(--m-ease),color var(--d-hover)} /* the phone bar: one action, rising once you start reading; it steps aside for a form, a closing band, the footer and the open menu, and turns Paper over an Ink section so it never disappears into it */ .m-enquire{display:none} @media (max-width:640px){ .m-enquire{position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:75;display:flex;align-items:center;justify-content:center;min-height:52px;background:var(--ink);color:var(--paper-b)!important;border:1px solid var(--ink);border-radius:2px;text-decoration:none;font:400 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;-webkit-tap-highlight-color:transparent;transition:opacity 420ms var(--m-ease),transform 420ms var(--m-ease),background-color var(--d-hover),color var(--d-hover),border-color var(--d-hover)} .m-enquire.is-on-dark,body.theme-dark .m-enquire{background:var(--paper-b);color:var(--ink)!important;border-color:var(--paper-b)} .m-enquire.is-away{opacity:0;transform:translateY(16px);pointer-events:none;visibility:hidden;transition:opacity 420ms var(--m-ease),transform 420ms var(--m-ease),visibility 0s linear 420ms} .m-enquire:focus-visible{box-shadow:0 0 0 2px var(--parchment),0 0 0 3px var(--ink)} body.menu-open .m-enquire{display:none} body:has(.m-enquire) .site-footer{padding-bottom:96px} } /* footer */ .site-footer.is-r3{padding:clamp(56px,7vw,96px) 0 28px;font-size:14px;border-top:1px solid rgba(184,154,110,.28)} .site-footer.is-r3 .footer-top{display:grid;gap:32px 48px} @media (min-width:860px){.site-footer.is-r3 .footer-top{grid-template-columns:minmax(0,1fr) auto;align-items:end}} .footer-brand .eac-signet{width:150px;margin:0 0 24px;color:var(--on-dark);--mark-accent:var(--champ)} .footer-line{max-width:46ch;color:var(--on-dark-2);margin:0 0 6px;line-height:1.6;font-size:15px} .footer-line a{white-space:nowrap;color:var(--on-dark)!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-decoration-color:rgba(184,154,110,.6)!important;text-underline-offset:.3em} .footer-line a:hover{text-decoration-color:var(--on-dark)!important} .footer-say{margin:0}.footer-say a{display:inline-block;padding:10px 0;color:var(--on-dark-2)} .site-footer.is-r3 .footer-social{list-style:none;margin:4px 0 0;padding:0;display:flex;gap:18px}.site-footer.is-r3 .footer-social:empty{display:none} .footer-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 26px} .footer-nav ul a{display:inline-flex;align-items:center;min-height:44px;font:400 11px/1.4 var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--on-dark-2)} .footer-nav a:hover{color:var(--on-dark)!important;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--champ);text-underline-offset:.5em} .site-footer.is-r3 .footer-base{margin-top:32px;padding-top:6px;border-top:1px solid rgba(184,154,110,.4);display:flex;flex-wrap:wrap;gap:0 28px;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--on-dark-3)} .site-footer.is-r3 .footer-base a{display:inline-block;padding:12px 0;color:var(--on-dark-2)} @media (min-width:860px){.footer-nav ul{justify-content:flex-end}} @media (max-width:759px){ .site-footer.is-r3{padding:52px 0 28px;text-align:center} .site-footer.is-r3 .footer-top{justify-items:center;gap:22px} .footer-brand .eac-signet{width:124px;margin:0 auto 22px} .footer-line{max-width:32ch;margin-inline:auto} .footer-nav ul{justify-content:center;gap:0 14px;flex-wrap:nowrap} .footer-nav ul a{letter-spacing:.12em} } @media (max-width:400px){ .footer-nav ul{gap:0 8px} .footer-nav ul a{letter-spacing:.1em} .site-footer.is-r3 .footer-base{justify-content:center;text-align:center;gap:0 18px;margin-top:22px} } /* theatre: quieter chrome (label + names, a text close) */ .theatre-close{border:0;padding:0 4px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;text-decoration-color:rgba(243,240,234,.45)} .theatre-close:hover{background:none;color:var(--on-dark);text-decoration-color:var(--champ)} .theatre-close span{display:none} /* ===================================================================== 25. SYSTEM TIGHTENING (27 Oct 2026 overhaul) ===================================================================== */ /* text links with an arrow: one continuous hairline under the words AND the arrow, and a 44px tap target (the old text-decoration broke at the gap before the arrow) */ .btn-text,.btn-link,.cta-text{--u:var(--champ-deep);min-height:44px;padding:0;text-decoration:none;background:linear-gradient(var(--u),var(--u)) left calc(50% + .95em)/100% 1px no-repeat;background-origin:content-box;transition:color var(--d-hover) var(--ease),background-size var(--d-ui) var(--m-ease)} .btn-text:hover,.btn-link:hover,.cta-text:hover{--u:var(--ink);color:var(--ink);text-decoration:none} .btn-text.is-serif{background-position:left calc(50% + .8em)} .on-dark .btn-text,.on-dark .btn-link,.on-dark .cta-text,.theatre .btn-text,.theatre .cta-text,body.theme-dark .btn-text,body.theme-dark .btn-link,body.theme-dark .cta-text{--u:var(--champ)} .on-dark .btn-text:hover,.on-dark .btn-link:hover,.on-dark .cta-text:hover,body.theme-dark .btn-text:hover,body.theme-dark .btn-link:hover{--u:var(--on-dark)} .btn-text .arr,.btn-link .arr,.cta-text .arr{text-decoration:none} .btn-row{gap:4px 28px} /* every button and field the same height family: 52px on phones, 50px elsewhere; arrows never wrap alone */ .btn,.btn-fill,.btn-line{text-wrap:nowrap} @media (max-width:759px){.btn,.btn-fill,.btn-line{padding-inline:24px}} /* focus: one ring everywhere on Paper, one on Ink */ .btn-text:focus-visible,.btn-link:focus-visible{outline:1px solid currentColor;outline-offset:3px;box-shadow:none}