/* Inner pages (1 Nov 2026): the homepage body's language, page for page.
   Graded paper light, titles set in type, a dark closing scene. No pills, no arrows. */
@font-face{font-family:Amatic;src:url('../theatre-demo/assets/AmaticSC-Bold.woff');font-display:swap}
@font-face{font-family:Assistant;src:url('../theatre-demo/assets/Assistant.woff');font-display:swap}
@font-face{font-family:Cormorant;src:url('../theatre-demo/assets/CormorantGaramond.woff');font-display:swap}
@font-face{font-family:Cormorant;src:url('../theatre-demo/assets/CormorantGaramond-Italic.woff');font-style:italic;font-display:swap}
@font-face{font-family:DMSans;src:url('../theatre-demo/assets/font-0.woff');font-display:swap}
:root{--ink:#352d36;--muted:#66545d;--line:rgba(185,150,120,.38);--raspberry:#6e2f48;--raspberry-lit:#9b3c62;--gold:#c79a5b;--cream:#fff5e7;--night:#211923;
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .26 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;color:var(--ink);font:400 17px/1.75 Assistant,Arial,sans-serif;background:var(--grain),
 radial-gradient(55% 30% at 88% 0,rgba(236,186,196,.5),transparent 72%),
 radial-gradient(45% 26% at 4% 22%,rgba(205,221,200,.42),transparent 70%),
 radial-gradient(60% 30% at 94% 60%,rgba(241,205,176,.4),transparent 72%),
 linear-gradient(180deg,#f8f1e7 0%,#f4e9de 45%,#efdfd3 100%);background-color:#f6eee4}
html[lang=en] body{font-family:Jost,DMSans,Arial,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--raspberry);outline-offset:5px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:20;padding:10px 16px;background:var(--night);color:var(--cream)}
.skip:focus{top:12px}
.wrap{width:min(1120px,88%);margin-inline:auto}
.narrow{width:min(720px,88%);margin-inline:auto}

/* Header: the programme's masthead. */
/* Same row as the homepage: logo, menu, language. No bar behind it. */
.site-header{position:relative;z-index:10;display:flex;align-items:center;gap:28px;padding:14px max(6%,calc((100% - 1200px)/2))}
.brand img{width:132px;filter:brightness(.3) sepia(.2)}
.site-nav{display:flex;gap:4px 26px;flex-wrap:wrap;margin-inline-start:auto;font-size:15px}
.site-nav a,.lang-switch{white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--muted)}
.site-nav a:hover,.lang-switch:hover{color:var(--raspberry)}
.lang-switch{font-size:14px;letter-spacing:.04em;border-bottom:1px solid var(--line);min-height:32px}
.nav-toggle{display:none}

/* Typography. */
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 13px/1.6 Assistant,Arial,sans-serif;letter-spacing:.08em;color:#8a4a62}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
html[lang=en] .eyebrow{font-family:Jost,DMSans,Arial,sans-serif;text-transform:uppercase;font-size:12px}
h1,h2{font-family:Amatic,Assistant,sans-serif;font-weight:700;letter-spacing:0;text-wrap:balance}
h1{font-size:clamp(54px,7vw,104px);line-height:1;margin:0 0 18px}
h2{font-size:clamp(36px,3.8vw,52px);line-height:1.1;margin:0 0 16px}
h3{font:600 20px/1.45 Assistant,Arial,sans-serif;margin:0 0 8px}
html[lang=en] h1,html[lang=en] h2{font-family:"Cormorant Garamond",Cormorant,Georgia,serif;font-weight:400}
html[lang=en] h1{font-size:clamp(48px,6vw,88px)}
html[lang=en] h3{font-family:Jost,DMSans,Arial,sans-serif}
.lead{font-size:clamp(19px,1.6vw,22px);line-height:1.75;max-width:60ch;color:var(--ink)}
p{margin:0 0 18px}
.muted{color:var(--muted)}

/* Calls to action as titling, with a gold rule. */
.cta{display:inline-flex;align-items:center;min-height:44px;padding:4px 0 6px;color:var(--raspberry);font:700 clamp(25px,2.1vw,30px)/1.1 Amatic,Assistant,sans-serif;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:color .35s ease,background-size .5s cubic-bezier(.22,.61,.36,1)}
.cta:hover,.cta:focus-visible{color:var(--raspberry-lit);background-image:linear-gradient(var(--gold),var(--gold));background-size:100% 2px}
html[lang=en] .cta{font:italic 400 clamp(22px,1.8vw,26px)/1.2 "Cormorant Garamond",Cormorant,Georgia,serif}

/* Opening of each page. */
.page-head{padding:clamp(56px,8vw,110px) 0 clamp(28px,4vw,48px)}
.page-head .lead{margin-top:6px}

/* A work: the film on its stage. */
.stage{position:relative;margin:0 auto;width:min(1180px,92%);border-radius:2px;overflow:hidden;background:#1d141b;box-shadow:0 30px 70px -42px rgba(60,30,45,.6)}
.stage.portrait{width:min(440px,86%);aspect-ratio:9/16}
.stage:not(.portrait){aspect-ratio:16/9}
.stage img,.stage iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.stage .play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:clamp(22px,4vw,44px);border:0;background:linear-gradient(0deg,rgba(29,20,27,.62),rgba(29,20,27,0) 46%);color:var(--cream);cursor:pointer}
/* Vertical films often carry their own subtitles low in the frame, so the invitation sits mid-frame. */
.stage.portrait .play{align-items:center;padding:0;background:radial-gradient(closest-side,rgba(29,20,27,.55),rgba(29,20,27,0))}
.stage .play span{font:700 clamp(28px,2.6vw,38px)/1 Amatic,Assistant,sans-serif;padding-bottom:6px;background:linear-gradient(var(--gold),var(--gold)) 50% 100%/40% 1px no-repeat;transition:background-size .5s cubic-bezier(.22,.61,.36,1)}
html[lang=en] .stage .play span{font:italic 400 clamp(24px,2.2vw,30px)/1 "Cormorant Garamond",Cormorant,Georgia,serif}
.stage .play:hover span,.stage .play:focus-visible span{background-size:100% 2px}
.still-note{width:min(1180px,92%);margin:14px auto 0;font-size:14px;color:var(--muted);font-style:italic}
.stage.portrait+.still-note{width:min(440px,86%)}

.work-notes{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);gap:clamp(32px,6vw,88px);padding:clamp(48px,6vw,80px) 0}
.work-notes .story{font-size:19px;line-height:1.95}
.credits{margin:0;border-top:1px solid var(--line)}
.credits div{padding:14px 0;border-bottom:1px solid var(--line)}
.credits dt{font:600 12.5px/1.5 Assistant,Arial,sans-serif;letter-spacing:.08em;color:#8a4a62}
html[lang=en] .credits dt{font-family:Jost,DMSans,Arial,sans-serif;text-transform:uppercase;font-size:11.5px}
.credits dd{margin:4px 0 0;font-size:16px}
.credits a{color:var(--raspberry);text-underline-offset:5px;text-decoration-color:rgba(110,47,72,.35)}

/* The next world: a link that reads like a title card. */
.next-world{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(24px,5vw,64px);padding:clamp(44px,6vw,72px) 0;border-top:1px solid var(--line);text-decoration:none}
.next-world .next-title{display:block;font:700 clamp(44px,5.4vw,78px)/1 Amatic,Assistant,sans-serif;color:var(--ink);transition:color .35s ease}
html[lang=en] .next-world .next-title{font:400 clamp(40px,4.6vw,66px)/1.05 "Cormorant Garamond",Cormorant,Georgia,serif}
.next-world .next-hook{display:block;margin-top:12px;color:var(--muted)}
.next-world figure{margin:0;overflow:hidden;border-radius:2px;box-shadow:0 22px 44px -32px rgba(60,30,45,.55)}
.next-world img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .85s cubic-bezier(.22,.61,.36,1)}
.next-world:hover .next-title,.next-world:focus-visible .next-title{color:var(--raspberry)}
.next-world:hover img,.next-world:focus-visible img{transform:scale(1.03)}

/* Services. */
.samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,40px);margin:clamp(20px,3vw,36px) 0 clamp(48px,6vw,80px)}
.sample{text-decoration:none}
.sample figure{margin:0 0 14px;overflow:hidden;border-radius:2px;box-shadow:0 18px 40px -30px rgba(60,30,45,.5)}
.sample img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .85s cubic-bezier(.22,.61,.36,1)}
.sample:hover img,.sample:focus-visible img{transform:scale(1.03)}
.sample .sample-type{display:block;font-size:13.5px;color:var(--muted);letter-spacing:.02em}
.sample .sample-title{display:block;font:700 clamp(28px,2.4vw,34px)/1.2 Amatic,Assistant,sans-serif;color:var(--ink)}
html[lang=en] .sample .sample-title{font:400 clamp(26px,2.2vw,30px)/1.2 "Cormorant Garamond",Cormorant,Georgia,serif}
.sample:hover .sample-title{color:var(--raspberry)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:24px 0 28px;padding:0;list-style:none;border-top:1px solid var(--line);counter-reset:step}
.steps li{padding:18px 0 18px 18px;border-bottom:1px solid var(--line);counter-increment:step;font-weight:600}
[dir=rtl] .steps li{padding:18px 0 18px 18px}
.steps li::before{content:"0" counter(step);display:block;font:600 12.5px/1.6 Assistant,Arial,sans-serif;letter-spacing:.06em;color:#9a7f86;margin-bottom:4px}
/* Occasions read as a line of titles, separated by small gold points. */
.occasions{display:flex;flex-wrap:wrap;gap:6px 0;margin:0;padding:0;list-style:none}
.occasions li{display:inline-flex;align-items:center;font:700 clamp(26px,2.4vw,32px)/1.3 Amatic,Assistant,sans-serif}
.occasions li:not(:last-child)::after{content:"";width:5px;height:5px;margin:0 16px;border-radius:50%;background:var(--gold)}
html[lang=en] .occasions li{font:400 clamp(24px,2vw,28px)/1.3 "Cormorant Garamond",Cormorant,Georgia,serif}
.block{padding:clamp(40px,5vw,64px) 0}
.block+.block{border-top:1px solid var(--line)}
.other-services{display:flex;flex-wrap:wrap;gap:8px 34px}

/* Questions, as on the homepage. */
.question{border-top:1px solid #dfd3c3}
.question:last-child{border-bottom:1px solid #dfd3c3}
.question summary{cursor:pointer;list-style:none;min-height:68px;display:flex;align-items:center;gap:18px;padding:16px 12px;border-radius:6px;transition:background-color .3s ease}
.question summary::-webkit-details-marker{display:none}
.question summary:hover{background-color:rgba(255,250,242,.55)}
.question summary h3{flex:1;margin:0;font-size:19px}
.question summary::after{content:"+";flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid rgba(110,47,72,.35);display:inline-flex;align-items:center;justify-content:center;font:300 19px/1 Assistant,sans-serif;color:var(--raspberry);transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .3s ease}
.question[open] summary::after{transform:rotate(45deg);border-color:var(--raspberry)}
.question p{padding:0 12px 20px;max-width:68ch;line-height:1.85}

/* Studio. */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,48px);margin:8px 0 0;padding:0;list-style:none;counter-reset:pillar}
.pillars li{border-top:1px solid var(--line);padding-top:18px;counter-increment:pillar}
.pillars li::before{content:"0" counter(pillar);display:block;font:600 12.5px/1.6 Assistant,Arial,sans-serif;letter-spacing:.06em;color:#9a7f86;margin-bottom:8px}
.pillars h3{font:700 clamp(28px,2.4vw,34px)/1.15 Amatic,Assistant,sans-serif}
html[lang=en] .pillars h3{font:400 clamp(24px,2vw,28px)/1.2 "Cormorant Garamond",Cormorant,Georgia,serif}

/* Art: a quiet dark room. */
.art-room{background:var(--grain),radial-gradient(70% 55% at 78% 18%,rgba(140,62,92,.45),transparent 70%),radial-gradient(60% 50% at 12% 88%,rgba(52,82,66,.4),transparent 70%),linear-gradient(180deg,#33222d,#271a22);color:#f3e9dc;padding:clamp(56px,7vw,96px) 0}
.art-room .eyebrow{color:#e8b9c8}
.art-room .lead{color:#f3e9dc}
.art-room .muted,.art-room .sample .sample-type{color:#d2c1c6}
.art-room .sample .sample-title{color:#f3e9dc}
.art-index{margin-top:clamp(48px,6vw,80px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(232,195,145,.25)}
.art-index-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.art-index-head h2{margin:0}
.art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px);margin-top:28px}
.art-grid img{aspect-ratio:3/4}

/* Documents: privacy, accessibility. */
.document h2{font-size:clamp(30px,3vw,40px);margin-top:36px}
.document a{color:var(--raspberry);text-underline-offset:5px}
.updated{font-size:14px;color:var(--muted)}

/* 404: the hall's frames. */
.hall-frames{position:relative;container-type:inline-size;overflow:hidden;border-radius:2px;box-shadow:0 30px 70px -42px rgba(60,30,45,.6)}
.frame-text{position:absolute;top:39.3%;bottom:39.5%;display:flex;align-items:center;justify-content:center;text-align:center;direction:ltr;font:500 2.15cqw/1.2 "Cormorant Garamond",Cormorant,Georgia,serif;letter-spacing:.16em;color:#4a3a35;padding:0 1cqw}
.frame-text.left{left:12.9%;right:65.8%}
.frame-text.right{left:65.4%;right:13.1%}
.lost-links{display:flex;flex-wrap:wrap;gap:8px 36px;margin-top:28px}

/* Contact: a letter on paper, the direct lines beside it. */
.contact-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);gap:clamp(36px,6vw,96px);padding-bottom:clamp(64px,8vw,110px)}
.contact-form{display:grid;gap:22px}
/* The topic is a dropdown on the same hairline as the other fields; a fine drawn chevron marks it. */
.field select{width:100%;padding:12px 2px;padding-inline-end:34px;border:0;border-bottom:1px solid rgba(110,47,72,.35);border-radius:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236e2f48' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat;background-size:14px 8px;background-position:left 4px center;color:var(--ink);font:400 18px/1.6 inherit;font-family:inherit;appearance:none;cursor:pointer}
html[lang=en] .field select{background-position:right 4px center}
.field select:focus{outline:none;border-color:var(--raspberry);box-shadow:0 1px 0 var(--raspberry)}
.field{display:grid;gap:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field label{font:600 13px/1.5 Assistant,Arial,sans-serif;letter-spacing:.06em;color:#8a4a62}
html[lang=en] .field label{font-family:Jost,DMSans,Arial,sans-serif;text-transform:uppercase;font-size:11.5px}
.field .optional{font-weight:400;color:var(--muted);letter-spacing:0;text-transform:none}
.field input,.field textarea{width:100%;padding:10px 2px;border:0;border-bottom:1px solid rgba(110,47,72,.35);background:transparent;color:var(--ink);font:400 18px/1.6 inherit;font-family:inherit;border-radius:0}
.field textarea{resize:vertical;min-height:140px;padding:12px;border:1px solid rgba(185,150,120,.45);background:rgba(255,251,245,.5)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--raspberry);box-shadow:0 1px 0 var(--raspberry)}
/* Spam trap, kept out of sight without pushing the page sideways (in RTL a far-left box scrolls). */
.honey{position:absolute;inset-inline-start:0;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);opacity:0}
.contact-form{position:relative}
.form-note{font-size:14px;color:var(--muted);margin:0}
.form-note a{color:var(--raspberry);text-underline-offset:4px}
.contact-form button.cta{justify-self:start;border:0;cursor:pointer;background-color:transparent}
.contact-form button.cta:disabled{opacity:.5;cursor:default}
.form-status{margin:0;min-height:1.6em;color:var(--muted)}
.form-status a{color:var(--raspberry)}
.form-done{padding:28px 0;border-top:1px solid var(--line)}
.channels{border-top:1px solid var(--line);padding-top:22px;align-self:start}
.channel{display:block;width:max-content;margin-bottom:12px;color:var(--ink);text-decoration:none;font:400 clamp(22px,1.9vw,26px)/1.3 Assistant,Arial,sans-serif;background:linear-gradient(var(--gold),var(--gold)) 100% 100%/0 1px no-repeat;transition:background-size .5s cubic-bezier(.22,.61,.36,1),color .3s ease}
html[lang=en] .channel{font:italic 400 clamp(24px,2vw,28px)/1.3 "Cormorant Garamond",Cormorant,Georgia,serif}
.channel:hover,.channel:focus-visible{color:var(--raspberry);background-size:100% 1px}
.channel-social .social-icon-links{margin-top:12px}
.channel-social .social-icon{color:var(--raspberry);border-color:rgba(110,47,72,.35)}
.closing .form-link{display:flex;width:max-content;margin:6px auto 4px;color:#f2c9d4}
.closing .form-link:hover,.closing .form-link:focus-visible{color:#fff2d5}

/* Closing scene: dusk into the hero's warm dark. */
.closing{position:relative;overflow:hidden;isolation:isolate;text-align:center;color:var(--cream);padding:clamp(190px,18vw,250px) 6% clamp(72px,9vw,110px);background:var(--grain),radial-gradient(ellipse 70% 45% at 50% 46%,rgba(92,52,72,.75),transparent 72%),linear-gradient(180deg,rgba(239,223,211,0) 0,#7d6170 70px,#3a2834 150px,#211923 62%,#1b141c 100%)}
.closing::before{content:"";position:absolute;z-index:-1;left:50%;top:clamp(150px,15vw,210px);width:min(760px,110vw);aspect-ratio:1.6;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,180,.24),rgba(232,195,145,.08) 55%,transparent)}
.closing .eyebrow{justify-content:center;color:#d8c5b8}
.closing .eyebrow::before{display:none}
.closing h2{font-size:clamp(48px,5vw,66px);margin-bottom:12px}
.closing p{color:#d8c5b8}
.closing .mail{display:inline-block;margin-top:14px;font:italic 400 clamp(30px,3.6vw,46px)/1.2 "Cormorant Garamond",Cormorant,Georgia,serif;color:var(--cream);text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) 50% 100%/0 1px no-repeat;transition:background-size .6s cubic-bezier(.22,.61,.36,1)}
html:not([lang=en]) .closing .mail{font:400 clamp(28px,3.2vw,40px)/1.2 Assistant,Arial,sans-serif}
.closing .mail:hover,.closing .mail:focus-visible{background-size:100% 1px}
.closing .phone{display:block;width:max-content;margin:8px auto 0;font-size:15px;letter-spacing:.16em;color:#d8c5b8;text-decoration:none}
.closing a:focus-visible{outline-color:#fff2d5}
.social-icon-links{direction:ltr;display:inline-flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(232,195,145,.35);border-radius:50%;color:var(--cream);opacity:.9;transition:transform .18s,opacity .18s}
.social-icon:hover{opacity:1;transform:translateY(-2px)}
.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding:26px 6%;background:#1b141c;color:#cfc0b4;border-top:1px solid rgba(255,245,231,.12);font-size:14px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;color:#e9dccf;text-underline-offset:5px}

@media(max-width:800px){
 /* Phones: logo · language · hamburger. The menu settles in as a small dusk panel under the row,
    unfolding from its top edge with the page still in sight; contact is inside it. */
 .site-header{gap:14px;padding:8px 4%}
 .brand{margin-inline-end:auto}
 .brand img{width:96px}
 .lang-switch{font-size:12px}
 .nav-toggle{display:inline-grid;align-content:center;gap:5px;width:44px;height:44px;margin-inline-end:-10px;padding:0 11px;border:0;background:none;color:var(--ink);cursor:pointer;position:relative;z-index:31}
 .nav-toggle span{display:block;height:1px;background:currentColor;transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .3s ease}
 .menu-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
 .menu-open .nav-toggle span:nth-child(2){opacity:0}
 .menu-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
 .site-nav{position:absolute;top:calc(100% - 2px);inset-inline-end:4%;z-index:30;width:min(300px,86vw);flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;margin:0;padding:8px 24px 10px;background:linear-gradient(180deg,rgba(62,42,55,.95),rgba(33,25,35,.97));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(232,195,145,.3);border-radius:2px;box-shadow:0 34px 60px -34px rgba(27,18,24,.7);font:700 30px/1.2 Amatic,Assistant,sans-serif;
  opacity:0;visibility:hidden;transform:translateY(-6px);clip-path:inset(0 0 100% 0);transition:opacity .5s ease,transform .8s cubic-bezier(.22,.61,.36,1),clip-path .8s cubic-bezier(.22,.61,.36,1),visibility 0s linear .8s}
 .menu-open .site-nav{opacity:1;visibility:visible;transform:none;clip-path:inset(0);transition:opacity .5s ease,transform .8s cubic-bezier(.22,.61,.36,1),clip-path .8s cubic-bezier(.22,.61,.36,1),visibility 0s}
 html[lang=en] .site-nav{font:400 25px/1.25 "Cormorant Garamond",Cormorant,Georgia,serif;letter-spacing:.01em}
 .site-nav a{min-height:50px;color:var(--cream);border-bottom:1px solid rgba(232,195,145,.16);opacity:0;transform:translateY(5px);transition:opacity .45s ease,transform .6s cubic-bezier(.22,.61,.36,1),color .3s ease}
 .site-nav a:last-child{border-bottom:0}
 .menu-open .site-nav a{opacity:1;transform:none}
 .menu-open .site-nav a:nth-child(1){transition-delay:.14s}
 .menu-open .site-nav a:nth-child(2){transition-delay:.2s}
 .menu-open .site-nav a:nth-child(3){transition-delay:.26s}
 .menu-open .site-nav a:nth-child(4){transition-delay:.32s}
 .menu-open .site-nav a:nth-child(n+5){transition-delay:.38s}
 .site-nav a:hover,.site-nav a:focus-visible{color:#e8c391}
 .site-nav a:focus:not(:focus-visible){outline:none}
 .work-notes{grid-template-columns:1fr}
 .contact-layout{grid-template-columns:1fr}
 .needs{grid-template-columns:1fr}
 .field-row{grid-template-columns:1fr}
 .next-world{grid-template-columns:1fr}
 .steps{grid-template-columns:1fr 1fr}
 .pillars{grid-template-columns:1fr}
 .art-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
 .samples{grid-template-columns:1fr}
 .art-grid{grid-template-columns:1fr}
 .brand img{width:112px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.next-world:hover img,.sample:hover img{transform:none}}

/* No lone word on the last line of a heading or paragraph; questions in regular weight, as on the homepage. */
main :is(h1,h2,h3,.sample-title){text-wrap:balance}
main :is(p,summary){text-wrap:pretty}
:is(details h3,summary h3){font-weight:400}

/* Buttons and form fields take the page's type, never the browser default. */
button,input,select,textarea{font-family:inherit}

 body video.card-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;pointer-events:none}
 body video.card-loop.on{opacity:1}
 body .sample figure{position:relative}
 body .quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,4vw,48px);margin:0;padding:0;list-style:none}
 body .quotes blockquote{margin:0;font:400 clamp(20px,1.8vw,24px)/1.6 Assistant,Arial,sans-serif}
 html[lang=en] body .quotes blockquote{font:italic 400 clamp(22px,2vw,26px)/1.5 "Cormorant Garamond",Cormorant,Georgia,serif}
 body .quotes figcaption{margin-top:12px;font:600 13px/1.6 Assistant,Arial,sans-serif;letter-spacing:.06em;color:#8a4a62}
 html[lang=en] body .quotes figcaption{font-family:Jost,DMSans,Arial,sans-serif}

/* English type: real weights, nothing louder than it needs to be. */
html[lang=en] :is(h1,h2,h3,h4){font-synthesis:none}
html[lang=en] #intro #hero-title{font-weight:300!important;font-size:clamp(40px,5vw,72px)!important;line-height:1.04;max-width:5.6em;letter-spacing:0}
html[lang=en] #intro .hero-invitation{font-weight:400}
html[lang=en] #intro #hero-subtitle{font-weight:400!important}
html[lang=en] #film-ending #ending-subtitle{font-family:Jost,Arial,sans-serif;font-weight:300}
html[lang=en] .approved-homepage :is(.purpose-row summary h3,.question summary h3,.contact-timing h3){font-weight:400;letter-spacing:.005em}
html[lang=en] .approved-homepage .purpose-row summary h3{font-size:19px}
html[lang=en] .approved-homepage .question summary h3{font-size:18px}
html[lang=en] .approved-homepage :is(.purpose-subtitle,.watch-pill,.question-number,.studio-tag,.purpose-examples a,small,.project-meta){font-weight:400}
html[lang=en] .approved-homepage small{letter-spacing:.06em}
html[lang=en] :is(.service-list h3,.faq summary,.faq h3,.eyebrow,.sample-type,dt){font-weight:400}

/* One type scale for every English page (council typography pass). Titles had seventeen sizes and an
   inner-page h1 larger than the homepage's; now there are four title steps, set in Cormorant Garamond:
   display, section, card and call to action. */
html[lang=en] :is(main h1,#contact h2,#contact h2.soft-arrival){font-size:clamp(42px,5vw,68px)!important;font-weight:300!important;line-height:1.06!important}
html[lang=en] :is(.approved-homepage section:not(#contact) h2,main section:not(#contact) h2){font-size:clamp(34px,3.6vw,50px)!important;font-weight:400!important;line-height:1.12!important}
html[lang=en] .approved-homepage :is(.featured-caption h3,.featured-caption h3 a,#impact h3,#art h3,.learning-options h3),html[lang=en] main .sample-title{font-size:clamp(23px,2.2vw,29px)!important;line-height:1.22!important}
html[lang=en] :is(.form-cta,.channel,.art-more){font-size:23px!important}
html[lang=en] :is(.approved-homepage .contact-links a.pill-primary,.closing a.mail){font-size:clamp(30px,3.2vw,40px)!important}
/* Text in Jost: one reading rhythm, and nothing heavier than medium. */
html[lang=en] :is(.approved-homepage p,main p):not(#hero-subtitle,.hero-invitation){line-height:1.75}
html[lang=en] :is(details h3,summary h3){font-weight:400!important}
html[lang=en] :is(strong,b,figcaption,label span,.steps li){font-weight:500!important}
/* Nothing to read below 13px. */
html[lang=en] :is(.eyebrow,dt,label span,.studio-tag,.site-footer small,#site-footer small){font-size:13px!important}
html[lang=en] main p.muted{max-width:68ch}
/* In both languages: the footer mark and the hero line on phones stay readable. */
:is(.site-footer small,#site-footer small){font-size:13px!important}
@media(max-width:700px){html:not([lang=en]) #intro #hero-subtitle{font-size:15px!important}}