/* Homepage on the product rails (txtcaster-page.css). The homepage is about Torkiv itself:
   who it is, how it works, its studio and founder. Products appear only as a short index;
   their detail lives on the product pages. Concept: the page reads itself. A scroll clock in
   home.js lights the company's own words with the reading marker txtCaster uses.
   home-signal.css keeps the tokens and the header pill. */
/* ── Hero ──────────────────────────────────────────────────────────── */
.hm-hero{position:relative;isolation:isolate;overflow:clip}
/* No rails in the hero: the headline and the horizon stand on their own. */
.hm-hero .tc-rails{position:relative;border-inline:0}
.hm-hero .tc-subbar::after{display:none}
@font-face{font-family:'Literata';src:url('/fonts/literata-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Literata';src:url('/fonts/literata-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* Head: one centred sentence in a book face, with the two product marks set into the line
   like seals, then what Torkiv is and the two ways in. */
.hm-head{position:relative;z-index:1;display:grid;justify-items:center;gap:1.6rem;padding:clamp(4rem,8vw,7rem) var(--tc-pad) clamp(2rem,4vw,3rem);text-align:center}
.hm-title{margin:0;max-width:15ch;font-family:'Literata',Georgia,serif;font-size:clamp(2.6rem,1rem + 4.4vw,6rem);font-weight:400;line-height:1.04;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
[dir=rtl] .hm-title{max-width:16ch;font-family:inherit;font-weight:500;letter-spacing:0;line-height:1.3}
.hm-title span:not(.hm-chip,.hm-title-a){animation:tc-read .8s var(--tc-ease) both}
.hm-title>span:nth-of-type(2){animation-delay:.14s}.hm-title>span:last-child{animation-delay:.28s}
@media(min-width:700px){.hm-title{max-width:none}.hm-title-a{white-space:nowrap}.hm-title-a::after{content:'';display:block}}
.hm-title .hm-accent{font-style:italic;color:var(--tc-blue-hi);animation-name:hm-read-accent}
[dir=rtl] .hm-title .hm-accent{font-style:normal}
@keyframes hm-read-accent{from{color:color-mix(in srgb,var(--tc-blue-hi) 22%,transparent)}}
.hm-lede{margin:0;max-width:40ch;font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.5;color:var(--muted);text-wrap:balance}
[dir=rtl] .hm-lede{line-height:1.8}
.hm-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem 1.6rem;margin-block-start:.4rem}

/* Chips: images set into a line of text, sized to the type around them. */
.hm-chip{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.16em;height:.92em;margin-inline:.04em;border-radius:999px}
.hm-chip img{display:block;height:100%;width:auto}
/* The product marks: two overlapping round seals centred on the cap height. */
.hm-chip-marks{height:.78em;vertical-align:-.06em;margin-inline-start:.1em;border-radius:0}
.hm-chip-marks img{box-sizing:border-box;width:.78em;height:.78em;padding:.13em;border-radius:50%;object-fit:contain;background:var(--surface);border:1px solid var(--rule);box-shadow:0 .12em .35em -.14em #000a}
.hm-chip-marks img+img{position:relative;margin-inline-start:-.22em}
.hm-chip-logo{aspect-ratio:1;background:var(--tc-blue)}
.hm-chip-logo img{height:48%;filter:invert(1)}
.hm-chip-face{aspect-ratio:1;overflow:hidden;border:2px solid var(--surface);box-shadow:0 .1em .35em -.15em #0007}
.hm-chip-face img{width:100%;height:100%;object-fit:cover}

/* Decode and font shuffle (home.js). While it runs the words hold their final widths; the
   scrambled glyphs are faint and cool, set glyphs reach full ink, and the accent word
   tries on typefaces before it settles. */
/* One sequence: with scripts on, the headline waits hidden for home.js (a fail-safe shows it
   after 2.5s if the script never runs), and the words stay hidden until they are measured. */
@media(scripting:enabled) and (prefers-reduced-motion:no-preference){
  .hm-title:not(.hm-fx){opacity:0;animation:hm-failsafe 0s 2.5s forwards}
}
@keyframes hm-failsafe{to{opacity:1}}
.hm-wait .hm-sw{visibility:hidden}
.hm-fx .hm-chip-marks img{opacity:0;transform:scale(.35) rotate(-30deg)}
.hm-fx .hm-chip-marks img+img{transform:translateX(-80%) scale(.4)}
[dir=rtl] .hm-fx .hm-chip-marks img+img{transform:translateX(80%) scale(.4)}
.hm-fx .hm-chip-marks.is-in img{opacity:1;transform:none;transition:opacity .2s,transform .6s cubic-bezier(.34,1.5,.64,1)}
.hm-fx .hm-chip-marks.is-in img+img,[dir=rtl] .hm-fx .hm-chip-marks.is-in img+img{transform:none;transition-delay:.1s}
.hm-fx span:not(.hm-chip,.hm-title-a){animation:none}
.hm-decode .hm-sw{display:inline-block;text-align:center;white-space:nowrap;color:color-mix(in srgb,var(--tc-blue-hi) 55%,transparent)}
.hm-decode .hm-sw.is-set{color:inherit}
.hm-title .hm-sw.is-shuffling{color:var(--tc-blue-hi)}
@font-face{font-family:'Literata';src:url('/fonts/literata-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* Stage: a page under the horizon, holding the company's introduction and its facts. */
.hm-stage{position:relative;z-index:0;padding:clamp(7rem,13vw,11rem) var(--tc-pad) 0}
.hm-stage::before{content:'';position:absolute;z-index:-1;inset-block-start:clamp(1.5rem,3vw,2.5rem);inset-inline-start:50%;width:max(160vw,2000px);height:1600px;translate:-50% 0;border-radius:50%;border-block-start:1px solid #ffffffd0;box-shadow:0 -24px 90px -10px #7ea6ffa0,inset 0 30px 80px -40px #7ea6ff80;background:var(--pf-bg);pointer-events:none}
[dir=rtl] .hm-stage::before{translate:50% 0}
@media(prefers-color-scheme:dark){.hm-stage::before{border-block-start-color:#a9c4ff;box-shadow:0 -30px 120px -10px #3b6cffb0,inset 0 40px 90px -40px #3b6cff90}}
.hm-stage::after{content:'';position:absolute;z-index:-2;inset-block-start:clamp(1.5rem,3vw,2.5rem);inset-inline-start:50%;width:min(120vw,1800px);aspect-ratio:3.6;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,var(--hm-dawn-core) 0%,var(--hm-dawn) 38%,color-mix(in srgb,var(--hm-dawn) 35%,transparent) 62%,transparent 100%);opacity:.6;pointer-events:none;transition:opacity 1.2s var(--tc-ease),scale 1.6s var(--tc-ease)}
[dir=rtl] .hm-stage::after{translate:50% -50%}
.hm-hero{--hm-dawn:#8fb0ff66;--hm-dawn-core:#b9ccff}
@media(prefers-color-scheme:dark){.hm-hero{--hm-dawn:#2456d6aa;--hm-dawn-core:#3a6cff}}
@media(prefers-reduced-motion:no-preference){.hm-stage::after{animation:hm-breathe 9s ease-in-out infinite alternate}}
@keyframes hm-breathe{from{opacity:.5}to{opacity:.7}}
/* Under the horizon: the company in its own words, read word by word as it scrolls in, then
   the three facts that define it on one ruled line. */
.hm-intro{margin:0 auto;max-width:34ch;font-family:'Literata',Georgia,serif;font-size:clamp(1.55rem,1rem + 1.75vw,2.85rem);font-weight:400;line-height:1.28;letter-spacing:-.02em;text-align:center;color:var(--ink);text-wrap:balance}
[dir=rtl] .hm-intro{max-width:36ch;font-family:inherit;letter-spacing:0;line-height:1.75}
.hm-facts.hm-dateline{text-align:center;margin:clamp(3.5rem,7vw,6rem) calc(var(--tc-pad) * -1) 0}
/* ── The page reads itself ─────────────────────────────────────────────
   home.js wraps the words of [data-hm-read] blocks. Read words reach full ink; the word being
   read carries the same blue marker txtCaster puts on a spoken word. */
.hm-js [data-hm-read] .hm-w,.hm-js [data-hm-read] .hm-chip{opacity:var(--o,.16)}
.hm-js [data-hm-read] .hm-chip{scale:calc(.7 + var(--o,.16) * .3)}
/* Studio: the studio's name set as large as the finale, what happens there beside it, and
   the founder who runs it underneath. */
.hm-studio-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;gap:1.6rem 2rem;padding:clamp(4rem,9vw,7rem) var(--tc-pad) clamp(3rem,6vw,4.5rem)}
.hm-studio-grid .tc-eyebrow{grid-column:1/-1;margin:0}
.hm-studio-name{grid-column:1/8;margin:0;font-size:clamp(3.2rem,1rem + 7vw,8.4rem);font-weight:500;line-height:.92;letter-spacing:-.06em;color:var(--ink)}
.hm-studio-text{grid-column:8/13;display:grid;gap:1rem}
.hm-studio-lead{margin:0;font-size:clamp(1.25rem,1rem + .7vw,1.65rem);font-weight:500;line-height:1.3;letter-spacing:-.02em;color:var(--ink);text-wrap:pretty}
[dir=rtl] .hm-studio-lead{letter-spacing:0;line-height:1.6}
.hm-studio-text p:not(.hm-studio-lead){margin:0;font-size:var(--t-sm);color:var(--muted)}
/* ── Work: a numbered index ──────────────────────────────────────────
   Rows rise in one after another. On hover the row steps in, the name turns blue, the arrow
   turns, and a preview card follows the cursor (home.js), swapping as it crosses rows. Two
   rows are unannounced products: their names scramble on hover. */
.hm-rows{margin:0;padding:0;list-style:none;border-block-start:1px solid var(--rule)}
.hm-rows li+li{border-block-start:1px solid var(--rule)}
.hm-row{display:grid;grid-template-columns:3.5rem minmax(0,4fr) minmax(0,5fr) minmax(0,3fr) 3.25rem;align-items:center;gap:2rem;padding:2.2rem var(--tc-pad);color:inherit;text-decoration:none;transition:padding .5s cubic-bezier(.2,.8,.2,1)}
.hm-row-n{font:500 .85rem/1 'Geist Mono',ui-monospace,monospace;color:var(--muted);transition:color .3s}
.hm-row-name{display:flex;align-items:center;gap:1.1rem;font-size:clamp(2.2rem,1.2rem + 2.8vw,3.8rem);font-weight:500;line-height:1;letter-spacing:-.045em;color:var(--ink);transition:color .3s}
.hm-row-name img{width:clamp(2rem,1.4rem + 1.2vw,2.75rem);height:auto;transition:transform .6s var(--tc-ease)}
.hm-row-line{max-width:38ch;font-size:var(--t-lg);line-height:1.5;color:var(--text)}
.hm-row-meta{display:grid;justify-items:start;gap:.6rem;font-size:var(--t-xs);color:var(--muted)}
.hm-state{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .7rem;border:1px solid var(--rule);border-radius:999px;font:500 .7rem/1 'Geist Mono',ui-monospace,monospace;color:var(--muted)}
.hm-state i{width:.4rem;height:.4rem;border-radius:50%;background:var(--tc-blue-hi)}
[dir=rtl] .hm-state{font-family:inherit;font-size:.8rem}
.hm-row-go{display:grid;place-items:center;justify-self:end;width:3.25rem;height:3.25rem;border:1px solid var(--rule);border-radius:50%;font-size:1.2rem;color:var(--ink);transition:transform .5s cubic-bezier(.2,.8,.2,1),background-color .3s,color .3s,border-color .3s}
[dir=rtl] .hm-row-go{transform:scaleX(-1)}
/* Unannounced: a dashed seal with a question mark in place of a logo, and a masked name. */
.hm-row-secret{cursor:default}
.hm-row-q{display:grid;place-items:center;flex:none;width:clamp(2rem,1.4rem + 1.2vw,2.75rem);aspect-ratio:1;border:1.5px dashed color-mix(in srgb,var(--muted) 70%,transparent);border-radius:50%;font:400 .5em/1 'Literata',Georgia,serif;color:var(--muted);transition:border-color .3s,color .3s,rotate .6s var(--tc-ease)}
.hm-row-mask{font-family:'Geist Mono',ui-monospace,monospace;font-weight:400;letter-spacing:-.02em;color:var(--muted)}
.hm-row-secret .hm-row-line{color:var(--muted)}
.hm-row-lock{font-size:.7rem;color:var(--muted)}
.hm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(hover:hover){
  .hm-row:hover{padding-inline-start:calc(var(--tc-pad) + 1rem)}
  .hm-row:hover :is(.hm-row-n,.hm-row-name,.hm-row-mask){color:var(--tc-blue-hi)}
  .hm-row:hover .hm-row-name img{transform:rotate(-8deg) scale(1.08)}
  a.hm-row:hover .hm-row-go{transform:rotate(-45deg);background:var(--tc-blue);border-color:var(--tc-blue);color:#fff}
  [dir=rtl] a.hm-row:hover .hm-row-go{transform:scaleX(-1) rotate(-45deg)}
  .hm-row-secret:hover .hm-row-q{border-color:var(--tc-blue-hi);color:var(--tc-blue-hi);rotate:90deg}
}
a.hm-row:focus-visible .hm-row-go{background:var(--tc-blue);border-color:var(--tc-blue);color:#fff}
/* Rows rise in one by one (home.js adds .is-in with a stagger). */
.hm-js .hm-rows>li{opacity:0;translate:0 40px;transition:opacity .9s var(--tc-ease),translate 1s var(--tc-ease)}
.hm-js .hm-rows>li.is-in{opacity:1;translate:none}
/* The preview card: positioned by home.js, it eases after the cursor; the inner card scales
   and turns in when it appears. */
.hm-peek{position:fixed;inset-block-start:0;left:0;z-index:40;width:clamp(14rem,10rem + 8vw,20rem);aspect-ratio:16/10;pointer-events:none;translate:var(--x,-999px) var(--y,-999px)}
.hm-peek-card{position:absolute;inset:0;overflow:hidden;border:2px solid var(--tc-blue-hi);border-radius:8px;background:var(--surface);box-shadow:0 30px 60px -28px #000c;transform:translate(-50%,-50%) scale(.9) rotate(-4deg);opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.hm-peek.is-on .hm-peek-card{opacity:1;transform:translate(-50%,-50%)}
.hm-peek img{display:block;width:100%;height:100%;object-fit:cover;object-position:0 0}
.hm-peek-q{position:absolute;inset:0;display:none;place-items:center;background:radial-gradient(circle,color-mix(in srgb,var(--tc-blue-hi) 55%,transparent) 1px,transparent 1.6px) 0 0/8px 8px,color-mix(in srgb,var(--tc-blue) 14%,var(--surface));font:400 5rem/1 'Literata',Georgia,serif;color:var(--tc-blue-hi)}
.hm-peek.is-secret img{display:none}
.hm-peek.is-secret .hm-peek-q{display:grid}
@media(prefers-reduced-motion:reduce){.hm-js .hm-rows>li{opacity:1;translate:none;transition:none}.hm-row{transition:none}}
/* Section close: one honest note and the way into the product page. */
/* ── Facts and founder ── the hero dateline and the founder row in the studio. */
.hm-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-block-start:1px solid var(--rule)}
.hm-facts>div{display:grid;align-content:start;gap:.9rem;padding:2.4rem var(--tc-pad) 2.6rem}
.hm-facts>div+div{border-inline-start:1px solid var(--rule)}
.hm-facts dt{font:500 .72rem/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--tc-blue-hi)}
[dir=rtl] .hm-facts dt{font-family:inherit;font-size:.85rem;letter-spacing:0}
.hm-facts dd{margin:0;font-size:clamp(1.35rem,1.05rem + .8vw,1.8rem);font-weight:500;line-height:1.2;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
[dir=rtl] .hm-facts dd{letter-spacing:0;line-height:1.45}
.hm-founder{display:grid;grid-template-columns:auto minmax(0,3fr) minmax(0,6fr) auto;align-items:center;gap:1.4rem 2rem;padding:2rem var(--tc-pad);border-block-start:1px solid var(--rule)}
.hm-founder img{width:4.5rem;height:4.5rem;border-radius:50%;object-fit:cover;border:1px solid var(--rule);filter:grayscale(.35);transition:filter .6s var(--tc-ease)}
.hm-founder:hover img{filter:none}
.hm-founder-name{display:grid;gap:.3rem;margin:0}
.hm-founder-name strong{font-size:1.1rem;font-weight:500;color:var(--ink)}
.hm-founder-name span{font-size:var(--t-xs);color:var(--muted)}
.hm-founder-model{margin:0;max-width:56ch;line-height:1.6;color:var(--text)}
/* ── Finale ───────────────────────────────────────────────────────────
   The brand line as large as the rails allow, read word by word like the statement. */
.hm-finale .tc-rails{padding:clamp(5rem,11vw,9rem) var(--tc-pad) 0}
.hm-finale-line{margin:0;max-width:11ch;font-size:clamp(3.2rem,1rem + 7.4vw,8.8rem);font-weight:500;line-height:.95;letter-spacing:-.055em;color:var(--ink);text-wrap:balance}
[dir=rtl] .hm-finale-line{letter-spacing:0;line-height:1.25}
.hm-finale-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.5rem;margin-block-start:clamp(3rem,6vw,5rem);margin-inline:calc(var(--tc-pad) * -1);padding:1.8rem var(--tc-pad);border-block-start:1px solid var(--rule)}
.hm-finale-foot p{margin:0;font:500 .72rem/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
[dir=rtl] .hm-finale-foot p{font-family:inherit;font-size:.85rem;letter-spacing:0}
.hm-finale-foot .tc-btn{margin-inline-start:auto}
.hm-mail{display:inline-flex;align-items:center;gap:.6rem;padding-block:.2rem;font-size:clamp(1.2rem,1rem + .6vw,1.6rem);font-weight:500;letter-spacing:-.02em;color:var(--ink);text-decoration:none;background:linear-gradient(var(--tc-blue-hi),var(--tc-blue-hi)) no-repeat 0 100%/0 2px;transition:background-size .6s var(--tc-ease)}
[dir=rtl] .hm-mail{background-position:100% 100%}
.hm-mail:is(:hover,:focus-visible){background-size:100% 2px}
.hm-mail span{transition:transform .4s var(--tc-ease)}
.hm-mail:hover span{transform:translate(3px,-3px)}
/* ── Reading stepper ──────────────────────────────────────────────────
   Built by home.js. One segment per section along the bottom edge, each filling as its
   section is read, with the current chapter named beside it. Hidden over the hero and the
   footer; the header nav stays the main navigation. */
.hm-stepper{position:fixed;z-index:35;inset-block-end:1.1rem;inset-inline-start:50%;display:flex;align-items:center;gap:1rem;padding:.55rem .55rem .55rem 1.1rem;border:1px solid var(--rule);border-radius:999px;background:color-mix(in srgb,var(--pf-bg) 78%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 18px 50px -24px #000c;translate:-50% 160%;opacity:0;transition:translate .7s var(--tc-ease),opacity .4s}
[dir=rtl] .hm-stepper{translate:50% 160%;padding:.55rem 1.1rem .55rem .55rem}
.hm-stepper.is-shown{translate:-50% 0;opacity:1}
[dir=rtl] .hm-stepper.is-shown{translate:50% 0}
.hm-stepper ol{display:flex;gap:.35rem;margin:0;padding:0;list-style:none}
.hm-stepper a{position:relative;display:block;width:2.6rem;height:1.5rem;text-decoration:none}
.hm-stepper a::before,.hm-stepper b{content:'';position:absolute;inset-inline:0;inset-block-start:50%;height:3px;margin-block-start:-1.5px;border-radius:3px;background:var(--rule)}
.hm-stepper b{background:var(--tc-blue-hi);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s linear}
[dir=rtl] .hm-stepper b{transform-origin:100% 50%}
.hm-stepper a span{position:absolute;inset-block-end:calc(100% + .7rem);inset-inline-start:50%;translate:-50% 4px;padding:.3rem .6rem;border:1px solid var(--rule);border-radius:8px;background:var(--surface);font-size:var(--t-xs);white-space:nowrap;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .25s,translate .35s var(--tc-ease)}
[dir=rtl] .hm-stepper a span{translate:50% 4px}
.hm-stepper a:is(:hover,:focus-visible) span{opacity:1;translate:-50% 0}
[dir=rtl] .hm-stepper a:is(:hover,:focus-visible) span{translate:50% 0}
.hm-stepper a:hover::before{background:color-mix(in srgb,var(--tc-blue-hi) 35%,var(--rule))}
.hm-stepper-now{display:flex;align-items:center;gap:.7rem;min-width:9.5rem;margin:0;padding:.55rem 1rem;border-radius:999px;background:var(--surface);font-size:var(--t-xs);white-space:nowrap}
.hm-stepper-n{font:500 .72rem/1 'Geist Mono',ui-monospace,monospace;color:var(--tc-blue-hi)}
.hm-stepper-name{font-weight:500;color:var(--ink)}
@media(max-width:599px){
  .hm-stepper{gap:.6rem;padding-inline-start:.9rem}
  .hm-stepper a{width:1.6rem}
  .hm-stepper-now{min-width:0;padding:.45rem .8rem}
}
@media(prefers-reduced-motion:reduce){.hm-stepper{transition:opacity .2s}.hm-stepper b{transition:none}}
/* Sections settle in once, like the product pages. */
.tc-sec :is(.hm-studio-grid,.hm-founder){transition:opacity .9s var(--tc-ease) .15s,translate 1.1s var(--tc-ease) .15s}
.tc-js .tc-sec:not(.is-in) :is(.hm-studio-grid,.hm-founder){opacity:0;translate:0 28px}
@media(max-width:899px){
  .hm-studio-name,.hm-studio-text{grid-column:1/-1}
  .hm-row{grid-template-columns:2.5rem minmax(0,1fr) 3.25rem;gap:1rem 1.25rem}
  .hm-row-go{grid-column:3;grid-row:1}
  .hm-row-line,.hm-row-meta{grid-column:2/-1}
  .hm-row-meta{display:flex;flex-wrap:wrap;align-items:center}
  .hm-founder{grid-template-columns:auto minmax(0,1fr)}
  .hm-founder-model,.hm-founder .tc-link{grid-column:1/-1}
}
@media(max-width:699px){
  .hm-hero .tc-crumbs{display:none}
  .hm-stage{padding-block-start:5rem}
  .hm-stage::before{width:260vw;height:900px;inset-block-start:1.25rem}
  .hm-facts{grid-template-columns:1fr}
  .hm-facts>div+div{border-inline-start:0;border-block-start:1px solid var(--rule)}
  .hm-facts>div{padding-block:1.6rem 1.8rem}
  .hm-row{padding-block:1.8rem}
  .hm-row-line{font-size:var(--t-sm)}
  .hm-finale-foot .tc-btn{margin-inline-start:0}
}
@media(prefers-reduced-motion:reduce){.hm-js [data-hm-read] :is(.hm-w,.hm-chip){opacity:1;scale:1}}
/* Footer: the same rails and edges as the page above it. */
.cinematic-home .ftr>.wrap{box-sizing:border-box;width:min(1280px,100%);max-width:none;margin-inline:auto;padding-inline:clamp(1.25rem,4.5vw,4rem);border-inline:1px solid var(--rule)}
.cinematic-home main{overflow-x:clip}