/* ============================================================
SPAIN UNIVERSITY OFFICE — site.css
Design language v3 "La Puerta" · funnel rebuild v4 (spec §13).
The office at night: one nocturnal cobalt ground end to end;
ivory appears only as paper — the surfaces that ask for contact.
The invented gold arch is GONE (v4 §9): the real logo mark is
inlined by build.py and inherits currentColor.
Type: Ibarra Real Nova (display, Latin) · Amiri (display, Arabic)
IBM Plex Sans / Sans Arabic (body) · IBM Plex Mono (data).
All fonts self-hosted.
------------------------------------------------------------
RTL: [dir=rtl] is set on by build.py for AR pages. It
re-points the --ff-b / --ff-d tokens at the Arabic faces, so
every component inherits the right face with no per-rule work.
Layout uses logical properties throughout (inset-inline,
margin-inline, padding-inline, text-align:start) — do not
introduce left/right physical properties in new rules.
============================================================ */
/* ============================================================
DOM CONTRACT — the markup build.py / main.js ACTUALLY emit.
(Rewritten 2026-08-10: the stylesheet was authored against a
different set of hook names than the generator shipped; every
selector below was retargeted onto the emitted names. The
generator is the source of truth — if these two ever drift
again, re-read dist/ and fix the CSS, not the HTML.)
hero_funnel section.hero-funnel
> .hero-media.ph > img.hero-img (full-bleed backdrop)
> .wrap > .hero-funnel-in
(p.kicker, h1, p.lede, .btn-row, p.hero-chip>.dot)
proof_band section.proof-band > .wrap > .proof-grid
> .proof > p.proof-stat (figure + )
+ p.proof-src
network_strip section.net-strip > .wrap > .split
> .net-tx (h2, p…) + figure.ph
steps3 section.steps3#steps > .wrap > .s-head
+ ol.steps3-list > li.step3 (span.step3-n, h3, p)
+ .btn-row
uni_cards section.unis#universities > .wrap > .s-head
+ .uni-cards > article.uni-card
> (.ph.uni-ph > img.uni-img)? ← currently NEVER
> .uni-tx (h3, p.uni-meta)
NOTE: cards ship text-only; .uni-card must stand up
without the photo block.
cost_cards section.costs#routes > .wrap > .s-head
+ .cost-cards > article.cost-card
(span.cost-tag?, h3, p.cost-price, ul.cost-points)
magnet_block section.magnet#playbook > .wrap > .magnet-in
> .magnet-tx (h2, p…, ul.magnet-bullets)
> form.magnet-form (label + input SIBLINGS — no
wrapper, no inner span — .btn, .form-note, .hp)
> .ph.magnet-media > img.magnet-img
quote_band section.quote-band > .wrap > blockquote.pull > p + cite
promise_band section.promise-band > .wrap > .s-head
+ .promise-grid > .promise (h3, p)
playbook section.playbook > .wrap > .prose.pb-doc > section.pb-sec
bucket section > .wrap.measure
> .bucket-panel(.show)#bucket-hot|warm|cold
> .bucket-magnet(.show)#bucket-magnet (?m=1 only)
quiz div#qz.qz — NOT inside a .wrap, so .qz owns its own
gutters and block padding. main.js then adds
.qz-live + [data-current], and .qz-final while the
contact step is showing. It builds:
form.qz-form
> .qz-head > .qz-progress
> .qz-bar > span.qz-bar-fill (inline width %)
+ .qz-count
> .qz-stage
> .qz-step[data-step][hidden] ← visibility is
the hidden ATTRIBUTE; never fight it with a
display rule that has no [hidden] escape.
> h2.qz-q
> .qz-opts > button.qz-card (.on +
aria-pressed=true when selected; plain
text child, no span/em)
> p.field-err.qz-err
…last step:
> .qz-contact ← the ivory paper
> .qz-field (label.qz-label + input
+ p.field-err + p.qz-hint(.warn))
> button.btn.btn-go.qz-submit
> p.qz-note
> button.qz-back[hidden] > span.qz-arrow
> .hp
fallback: form.qz-fallback.form-paper, a SIBLING of
#qz (not inside it), label + control siblings,
p.qzf-q as the contact sub-head.
sticky CTA .cta-stick (mobile only, safe-area) containing two
real .btn children (.btn-pri + .btn-wa) — it is a
bar that HOLDS buttons, not a button itself.
lang switch a.lang-pill in .nav (and the footer nav)
footer .ft > .wrap > .ft-top (.ft-brand > .brand + .ft-blurb |
nav.ft-nav > a…) + .ft-id + .ft-bot
photos .ph / figure.ph (cobalt duotone) · .ph-warm · .ph-flat
ratio helpers: .r-16x9 .r-4x3 .r-1x1 .r-3x4
============================================================ */
/* ============================================================ TOKENS */
:root{
--bg:#FFFFFF;
--bg-2:#F6F4EF;
--bg-3:#EEEBE3;
--paper:#FFFFFF;
--cobalto:#14406B;
--ink:#1B2430;
--ink-dim:rgba(27,36,48,.8);
--ink-faint:rgba(27,36,48,.6);
--tinta:#1B2430;
--tinta-dim:rgba(27,36,48,.8);
--tinta-faint:rgba(27,36,48,.6);
--oro:#9A6E1C; /* text-safe gold (≈4.7:1 on white) */
--oro-fill:#D9A946; /* decorative fills only */
--oro-dim:rgba(154,110,28,.75);
--carmin:#B3242C;
--carmin-lt:#C93A38;
--verde:#0F7A45;
--line:rgba(27,36,48,.14);
--line-soft:rgba(27,36,48,.09);
--line-ink:rgba(27,36,48,.16);
--max:1180px;
--ff-b:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Sans Arabic",sans-serif;
--ff-d:var(--ff-b);
--ff-m:var(--ff-b);
--ff-ar:var(--ff-b);
--ff-ard:var(--ff-b);
--sp:clamp(56px,8vw,112px);
--safe-b:env(safe-area-inset-bottom,0px);
--stick-h:0px;
}
/* Arabic pages use the same system stack (Noto/Geeza/Segoe Arabic ship with every OS). */
[dir=rtl]{
--ff-b:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic","Noto Naskh Arabic","Geeza Pro",Arial,sans-serif;
--ff-d:var(--ff-b);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
font-family:var(--ff-b);background:var(--bg);color:var(--ink);
font-size:1.1rem;line-height:1.65;-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
:focus-visible{outline:2.5px solid var(--oro);outline-offset:3px;border-radius:2px}
::selection{background:rgba(217,169,70,.4);color:var(--ink)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.sr,.skip{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* the skip link is the one visually-hidden thing that must come back on focus */
.skip:focus{
position:fixed!important;z-index:120;inset-inline-start:12px;top:12px;
width:auto;height:auto;clip:auto;clip-path:none;
background:var(--oro);color:#fff;padding:12px 18px;border-radius:2px;
font-weight:600;font-size:.95rem;
}
/* ---------- type ---------- */
h1,h2,h3{font-family:var(--ff-d);font-weight:700;line-height:1.15;letter-spacing:0;color:var(--ink)}
h1{font-size:clamp(2.1rem,5.4vw,3.9rem);letter-spacing:0}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:1.2rem;line-height:1.25}
.lede{font-size:clamp(1.08rem,1.55vw,1.25rem);line-height:1.6;color:var(--ink-dim)}
em{font-style:italic}
.it{font-style:italic;color:var(--oro)}
.arw{display:inline-block;line-height:1}
/* .kicker is the hero's eyebrow (build.py emits `kicker` there and
`eyebrow` everywhere else — same role, one rule). */
.eyebrow,.kicker{
display:flex;align-items:center;flex-wrap:wrap;gap:11px;
font-family:var(--ff-m);font-size:.7rem;font-weight:500;
letter-spacing:.19em;text-transform:uppercase;color:var(--oro);
margin-bottom:1.4rem;
}
.eyebrow::before,.kicker::before{content:"";width:26px;height:1px;background:var(--oro);flex:none;opacity:.7}
.eyebrow .ar{font-family:var(--ff-ard);font-size:1.02rem;letter-spacing:0;text-transform:none;direction:rtl;color:var(--oro-dim);line-height:1}
/* build.py centres it two ways: `.center` on an ancestor (.s-head) and
`.eyebrow center` on the element itself (bucket panels) */
.center .eyebrow,.center .kicker,.eyebrow.center,.kicker.center{justify-content:center}
.gloss{font-family:var(--ff-ard);font-size:clamp(1.08rem,1.7vw,1.3rem);color:var(--oro-dim);direction:rtl;text-align:start;margin-top:.55em;line-height:1.5}
.center .gloss{text-align:center}
/* small source / provenance line — build.py emits it as .proof-src */
.proof-src{
display:block;font-family:var(--ff-m);font-size:.66rem;font-weight:400;
letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);line-height:1.4;
}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--ff-b);font-weight:600;font-size:1rem;line-height:1;
min-height:52px;padding:1.05em 1.75em;border:1px solid transparent;border-radius:2px;
cursor:pointer;text-align:center;
transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.btn:hover{transform:translateY(-2px)}
/* .btn-go is main.js's name for the quiz submit — same primary button */
.btn-pri,.btn-go{background:var(--carmin);color:#fff;box-shadow:0 10px 30px -12px rgba(179,36,44,.55)}
.btn-pri:hover,.btn-go:hover{background:var(--carmin-lt);color:#fff}
.btn-line{border-color:rgba(27,36,48,.35);color:var(--ink)}
.btn-line:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-gold{background:var(--oro);color:#fff}
.btn-gold:hover{background:#7E5A16}
.btn-wa{background:var(--verde);color:#fff}
.btn-wa:hover{background:#0C6238;color:#fff}
.btn-sm{min-height:44px;padding:.78em 1.25em;font-size:.9rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.center .btn-row{justify-content:center}
/* ============================================================ PHOTO TREATMENT (§13 .ph)
Cobalt duotone: desaturate the plate, then tint it with the
nocturnal cobalt so every photo sits inside the same night. */
.ph{
position:relative;isolation:isolate;overflow:hidden;
background:var(--bg-2);border:1px solid var(--line);
box-shadow:0 20px 50px -30px rgba(0,0,0,.3);
}
.ph>img{width:100%;height:100%;object-fit:cover;display:block;
filter:none;
transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.ph::after{
content:"";position:absolute;inset:0;pointer-events:none;
display:none;
}
.ph::before{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.5) 100%);
}
.ph:hover>img{transform:scale(1.02)}
/* warm variant — people, arrivals, anything that should feel human */
.ph-warm>img{filter:none}
/* flat variant — no vignette (small cards) */
.ph-flat::before{display:none}
/* ratio helpers */
.ph.r-16x9>img{aspect-ratio:16/9}
.ph.r-4x3>img{aspect-ratio:4/3}
.ph.r-1x1>img{aspect-ratio:1/1}
.ph.r-3x4>img{aspect-ratio:3/4}
.ph figcaption{
position:absolute;inset-inline:0;bottom:0;z-index:3;padding:14px 16px;
font-family:var(--ff-m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
color:#fff;
}
@media (prefers-reduced-motion:reduce){.ph>img{transition:none}.ph:hover>img{transform:none}}
/* ============================================================ HEADER */
.hd{position:fixed;inset-inline:0;top:0;z-index:80;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.hd.stuck{background:rgba(255,255,255,.94);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.hd .wrap{display:flex;align-items:center;gap:clamp(14px,3vw,40px);height:72px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand svg,.brand .mark{flex:none;width:38px;height:38px;color:var(--cobalto);--logo-paper:#fff}
.brand .mark svg{width:100%;height:100%;display:block}
.brand-tx{display:flex;flex-direction:column;line-height:1.06}
.brand-tx b{font-family:var(--ff-d);font-weight:600;font-size:1.02rem;letter-spacing:.005em;white-space:nowrap}
.brand-tx span{font-family:var(--ff-ard);font-size:.92rem;color:var(--oro-dim);direction:rtl;margin-top:1px;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,28px);margin-inline-start:auto}
.nav a{font-size:.925rem;font-weight:500;color:var(--ink-dim);transition:color .18s}
.nav a:hover{color:var(--oro)}
.nav .btn{padding:.72em 1.3em;font-size:.9rem;min-height:44px;color:#fff}
.nav .btn-line{color:var(--ink)}
/* language switch pill (§13) */
.lang-pill{
display:inline-flex;align-items:center;gap:7px;flex:none;
border:1px solid rgba(217,169,70,.38);border-radius:999px;
padding:.42em .95em;min-height:36px;
font-size:.85rem;font-weight:500;letter-spacing:.02em;color:var(--oro);
transition:background .18s,color .18s,border-color .18s;
}
.lang-pill:hover{background:var(--oro);border-color:var(--oro);color:#fff}
.lang-pill .ar{font-family:var(--ff-ard);font-size:1rem;line-height:1;direction:rtl}
.lang-pill::before{
content:"";width:13px;height:13px;flex:none;opacity:.75;
background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9A946' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20'/%3E%3C/svg%3E");
}
.lang-pill:hover::before{filter:brightness(0) invert(1)}
.burger{display:block;margin-inline-start:auto;background:none;border:1px solid var(--line);border-radius:2px;width:46px;height:42px;cursor:pointer;flex:none}
.burger i{display:block;width:19px;height:1.5px;background:var(--ink);margin:4px auto}
@media (min-width:761px){.burger{display:none}}
/* ============================================================ HERO — funnel (v4 §6)
Emitted shape: section.hero-funnel > .hero-media.ph (a sibling of
.wrap, i.e. NOT a grid column) + .wrap > .hero-funnel-in.
So the photograph is a full-bleed backdrop and the copy sits on it —
there is no two-column hero any more. */
.hero-funnel{
position:relative;overflow:hidden;isolation:isolate;
display:grid;align-items:center;min-height:min(90vh,760px);
padding-block:0; /* .hero-funnel-in owns the rhythm */
background:
var(--bg-2);
}
.hero-funnel::before{
content:"";position:absolute;inset:0;z-index:-1;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68' viewBox='0 0 68 68'%3E%3Cg fill='none' stroke='%23D9A946' stroke-width='1'%3E%3Cpath d='M0 17L17 0M51 0l17 17M68 51L51 68M17 68L0 51'/%3E%3Cpath d='M17 0h34M68 17v34M51 68H17M0 51V17'/%3E%3Cpath d='M34 17L17 34l17 17 17-17z'/%3E%3C/g%3E%3C/svg%3E");
-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
}
.ghost{
position:absolute;z-index:-1;inset-inline-start:-3%;bottom:-4%;
font-family:var(--ff-ard);font-weight:700;font-size:clamp(9rem,26vw,19rem);
line-height:1;color:rgba(27,36,48,.04);direction:rtl;
pointer-events:none;user-select:none;white-space:nowrap;
}
.hero-funnel-in{
position:relative;max-width:52rem;
padding-top:clamp(112px,14vh,168px);padding-bottom:clamp(56px,10vh,110px);
}
.hero-funnel h1{margin-bottom:.42em}
.hero-funnel .lede{max-width:34em}
.hero-funnel .btn-row{margin-top:2.2rem}
/* scarcity chip under the h1 */
.hero-chip{
display:inline-flex;align-items:center;gap:10px;margin-top:1.5rem;
font-family:var(--ff-m);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--oro);border:1px solid rgba(217,169,70,.42);padding:9px 15px;line-height:1.35;
}
.hero-chip .dot{flex:none}
[dir=rtl] .hero-chip{font-family:var(--ff-b);letter-spacing:0;text-transform:none;font-size:.86rem}
/* the backdrop plate: full-bleed, behind the azulejo pattern (z-index -1) */
.hero-media{
position:absolute;inset:0;z-index:-2;border:0;box-shadow:none;
}
/* a backdrop is read through, not looked at: lighter than a card plate,
so the scrim on top can still carry the type */
.hero-media>img,.hero-img{
width:100%;height:100%;object-fit:cover;
filter:none;
}
/* .ph's own vignette becomes the readability scrim. Narrow screens: the
copy spans the full width, so an even vertical wash. Wide screens: a
lighter wash plus a heavier one down the side the copy sits on
(gradients have no logical directions, hence the explicit RTL line). */
.hero-media::before{
background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.8) 45%,rgba(246,244,239,.97) 100%);
}
@media (min-width:761px){
.hero-media::before{
background:
linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.4) 42%,rgba(246,244,239,.97) 100%),
linear-gradient(to right,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 48%,rgba(255,255,255,.25) 78%);
}
[dir=rtl] .hero-media::before{
background:
linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.4) 42%,rgba(246,244,239,.97) 100%),
linear-gradient(to left,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 48%,rgba(255,255,255,.25) 78%);
}
}
/* no hover play on a full-bleed plate — the whole page would flicker */
.hero-media:hover>img{transform:none}
/* arcade seam */
.arcade{height:15px;position:relative;opacity:.5}
.arcade::after{
content:"";position:absolute;inset:0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='15' viewBox='0 0 26 15'%3E%3Cpath d='M4 15V9.5a9 9 0 0 1 18 0V15' fill='none' stroke='%23D9A946' stroke-width='1'/%3E%3C/svg%3E");
background-repeat:repeat-x;background-position:center;
}
/* ============================================================ PAGE HERO (inner pages) */
.page-hero{
position:relative;overflow:hidden;isolation:isolate;
padding-top:clamp(112px,15vh,170px);padding-bottom:clamp(32px,5vh,56px);
background:var(--bg-2);
}
.page-hero .ghost{font-size:clamp(6rem,18vw,13rem);bottom:-14%}
.page-hero h1{font-size:clamp(2.05rem,5vw,3.6rem);max-width:20ch}
.page-hero .lede{max-width:42em;margin-top:1.1rem}
.crumbs{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.6rem}
.crumbs a:hover{color:var(--oro)}
/* ============================================================ SECTIONS */
section{padding-block:var(--sp);position:relative}
.s-deep{background:var(--bg-2)}
.s-cobalt{background:var(--bg-2)}
.s-tight{padding-block:clamp(44px,6vw,80px)}
.s-head{max-width:40rem;margin-bottom:clamp(34px,5vw,62px)}
.s-head h2{margin-bottom:.15em}
.s-head .lede{margin-top:1rem}
.center .s-head{margin-inline:auto;text-align:center}
/* narrow reading column — build.py puts it on .wrap (thank-you) and on a
plain div inside .wrap (split with no image). Must come after .wrap. */
.measure{max-width:820px;margin-inline:auto}
/* _cta_row() closes steps3 / uni_cards / cost_cards — give it air */
.steps3-list + .btn-row,.uni-cards + .btn-row,.cost-cards + .btn-row{margin-top:clamp(30px,4vw,48px)}
/* ============================================================ PROOF BAND (§3 proof_band)
Borrowed authority: huge gold figure, small source line. */
.proof-band{padding-block:clamp(44px,6vw,86px);border-block:1px solid var(--line);background:var(--bg-3)}
.proof-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
.proof{
position:relative;padding-inline-start:22px;
border-inline-start:1px solid rgba(217,169,70,.3);
}
.proof-stat{
font-family:var(--ff-d);font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.35;
color:var(--ink);margin-bottom:14px;
}
.proof-stat b,.proof-stat strong{
display:block;font-weight:600;letter-spacing:-.02em;line-height:1;
font-size:clamp(2.7rem,6.6vw,4.1rem);color:var(--oro);margin-bottom:.16em;
}
[dir=rtl] .proof-stat b,[dir=rtl] .proof-stat strong{letter-spacing:0;line-height:1.2}
@media (min-width:720px){.proof-grid{grid-template-columns:repeat(3,1fr)}}
/* ============================================================ NETWORK STRIP (§3 network_strip)
.net-strip is the ; the two-up grid is the .split inside it
(build.py reuses the kept v3 .split for the columns, and decides the
photo side by source order, so no .flip class is needed). */
.net-strip .split{gap:clamp(28px,4.5vw,64px);align-items:center}
.net-strip h2{margin-bottom:.35em}
.net-strip p{color:var(--ink-dim);margin-top:.9em;max-width:36em}
.net-strip .ph{aspect-ratio:4/3}
@media (min-width:901px){
.net-strip .split{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
}
/* ============================================================ STEPS 3 (§3 steps3)
.steps3 is the ; ol.steps3-list is the grid; li.step3 the card. */
.steps3-list{list-style:none;display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,34px)}
.step3{
position:relative;padding-top:30px;border-top:1px solid var(--line);
}
.step3-n{
display:block;font-family:var(--ff-d);font-size:2.2rem;line-height:1;font-weight:700;
color:var(--oro);margin-bottom:12px;
}
.step3::before{
content:"";position:absolute;top:-6px;inset-inline-start:0;width:11px;height:11px;
border:1px solid var(--oro);transform:rotate(45deg);background:var(--bg);
}
.step3 h3{font-family:var(--ff-b);font-size:1.06rem;font-weight:600;letter-spacing:0;margin-bottom:9px;line-height:1.32}
[dir=rtl] .step3 h3{font-family:var(--ff-b)}
.step3 p{font-size:.95rem;color:var(--ink-dim);line-height:1.58}
@media (min-width:860px){.steps3-list{grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px)}}
/* ============================================================ UNI CARDS (§3 uni_cards)
These ship TEXT-ONLY (build.py emits .ph.uni-ph only when a card has an
image, and none currently do). The card therefore has to read as a
deliberate plate: generous padding, the gold hairline, and the rank
chip pinned to the bottom so a wall of them lines up. */
.uni-cards{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,24px)}
.uni-card{
display:flex;flex-direction:column;background:var(--paper);
border:1px solid var(--line);overflow:hidden;
transition:border-color .22s,transform .22s,background .22s;
}
.uni-card:hover{border-color:rgba(27,36,48,.3);background:var(--bg-2);transform:translateY(-3px)}
.uni-card>.ph{border:0;box-shadow:none;aspect-ratio:16/10}
.uni-tx{padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;gap:11px;flex:1;min-height:132px}
.uni-tx h3{
font-family:var(--ff-d);font-size:1.1rem;font-weight:600;line-height:1.24;color:var(--ink);
}
/* the rank / city chip */
.uni-meta{
align-self:flex-start;margin-top:auto;
font-family:var(--ff-m);font-size:.66rem;font-weight:500;
letter-spacing:.13em;text-transform:uppercase;color:var(--oro);
background:rgba(217,169,70,.1);
border:1px solid rgba(217,169,70,.34);padding:5px 10px;line-height:1.3;
}
[dir=rtl] .uni-meta{font-family:var(--ff-b);letter-spacing:0;text-transform:none;font-size:.8rem}
@media (min-width:620px){.uni-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.uni-cards{grid-template-columns:repeat(3,1fr)}}
/* ============================================================ COST CARDS (§3 cost_cards)
Ivory paper cards standing on the cobalt ground. */
.cost-cards{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.2vw,26px);align-items:stretch}
.cost-card{
position:relative;background:var(--paper);color:var(--tinta);
padding:clamp(26px,3vw,38px) clamp(22px,2.6vw,32px);
display:flex;flex-direction:column;
box-shadow:0 20px 50px -30px rgba(0,0,0,.25),0 0 0 1px var(--line-ink);
transition:transform .22s,box-shadow .22s;
}
.cost-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px -30px rgba(0,0,0,.3),0 0 0 1px rgba(27,36,48,.3)}
.cost-tag{
position:absolute;top:-13px;inset-inline-start:clamp(22px,2.6vw,32px);
font-family:var(--ff-m);font-size:.65rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
background:var(--oro);color:#fff;padding:6px 12px;line-height:1;
}
[dir=rtl] .cost-tag{font-family:var(--ff-b);letter-spacing:0;text-transform:none;font-size:.78rem;padding:5px 12px}
.cost-card h3{font-family:var(--ff-d);font-size:1.5rem;color:var(--tinta);margin-bottom:.35em}
.cost-price{
font-family:var(--ff-m);font-size:.92rem;letter-spacing:.01em;color:var(--carmin);
line-height:1.5;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line-ink);
}
[dir=rtl] .cost-price{font-family:var(--ff-b)}
.cost-points{list-style:none;display:grid;gap:11px;margin-bottom:4px}
.cost-points li{position:relative;padding-inline-start:24px;font-size:.93rem;color:var(--tinta-dim);line-height:1.52}
.cost-points li::before{content:"";position:absolute;inset-inline-start:3px;top:8px;width:8px;height:8px;background:var(--oro);transform:rotate(45deg)}
@media (min-width:900px){.cost-cards{grid-template-columns:repeat(3,1fr)}}
/* ============================================================ MAGNET BLOCK (§3 magnet_block)
.magnet is the ; .magnet-in is the grid — and it holds THREE
children (copy | form | photo), not two. Wide screens: copy runs down
the first column, the form sits above the photo in the second. */
.magnet-in{
display:grid;grid-template-columns:1fr;
column-gap:clamp(28px,4vw,56px);row-gap:clamp(24px,3vw,32px);align-items:start;
}
.magnet-tx h2{margin-bottom:.35em}
.magnet-tx p{color:var(--ink-dim);margin-top:.9em;max-width:36em}
.magnet-tx .magnet-bullets{margin-top:1.5em}
.magnet-media{aspect-ratio:16/10}
.magnet-media>img,.magnet-img{width:100%;height:100%;object-fit:cover}
@media (min-width:920px){
.magnet-in{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)}
.magnet-tx{grid-column:1;grid-row:1 / span 2;align-self:center}
.magnet-form{grid-column:2;grid-row:1}
.magnet-media{grid-column:2;grid-row:2}
}
/* ---------- ivory paper forms ----------
Two forms land on paper and BOTH use bare `label + control` siblings
(no wrapper element, no inner ): .magnet-form on the home page
and .form-paper (the noscript quiz fallback). The quiz's own contact
step is .qz-contact, further down. */
.magnet-form,.form-paper{
position:relative;background:var(--paper);color:var(--tinta);
padding:clamp(24px,3vw,36px) clamp(20px,2.8vw,32px);
box-shadow:0 20px 50px -30px rgba(0,0,0,.25),0 0 0 1px var(--line-ink);
}
.magnet-form label,.form-paper label{
display:block;font-family:var(--ff-m);font-size:.68rem;font-weight:500;
letter-spacing:.15em;text-transform:uppercase;color:rgba(27,36,48,.85);margin-bottom:7px;
}
[dir=rtl] .magnet-form label,[dir=rtl] .form-paper label{font-family:var(--ff-b);letter-spacing:0;text-transform:none;font-size:.85rem}
.magnet-form input:not([type=hidden]),.magnet-form select,.magnet-form textarea,
.form-paper input:not([type=hidden]),.form-paper select,.form-paper textarea{
width:100%;font-family:var(--ff-b);font-size:1.02rem;color:var(--tinta);
background:#FBF9F3;border:1px solid rgba(27,36,48,.28);border-radius:2px;
padding:.85em .9em;min-height:52px;margin-bottom:18px;
transition:border-color .18s,box-shadow .18s;
}
.magnet-form input:focus,.magnet-form select:focus,.magnet-form textarea:focus,
.form-paper input:focus,.form-paper select:focus,.form-paper textarea:focus{
outline:none;border-color:var(--carmin);box-shadow:0 0 0 3px rgba(179,36,44,.12);
}
.magnet-form select,.form-paper select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B2430' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
[dir=rtl] .magnet-form select,[dir=rtl] .form-paper select{background-position:left 14px center}
.magnet-form .btn,.form-paper .btn{width:100%;margin-top:6px}
/* the fallback form's contact sub-head */
.qzf-q{
font-family:var(--ff-d);font-size:1.3rem;font-weight:600;line-height:1.25;
color:var(--tinta);margin:26px 0 16px;padding-top:22px;border-top:1px solid var(--line-ink);
}
/* the noscript form is a sibling of #qz, not inside a .wrap — own gutters */
.qz-fallback{
width:min(680px,100% - clamp(40px,10vw,80px));
margin-inline:auto;margin-block:clamp(40px,7vw,72px);
}
.form-note{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.04em;color:rgba(27,36,48,.6);text-align:center;margin-top:14px;line-height:1.5}
[dir=rtl] .form-note{font-family:var(--ff-b);letter-spacing:0;font-size:.83rem}
.hp{position:absolute;inset-inline-start:-9999px;top:-9999px}
.field-err{display:none;font-size:.82rem;color:var(--carmin);margin-top:6px;font-style:normal}
.field-err.show{display:block}
/* the same error node, but on the night ground (choice steps) */
.qz-err{color:var(--carmin-lt);font-size:.88rem;font-weight:500;margin-top:12px}
/* ============================================================ QUOTE BAND (§3 quote_band) */
.quote-band{background:var(--bg-3);border-block:1px solid var(--line)}
.quote-band blockquote{max-width:36ch;margin-inline:auto;text-align:center}
.quote-band blockquote p{
font-family:var(--ff-d);font-style:italic;font-weight:400;
font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.32;color:var(--ink);
}
[dir=rtl] .quote-band blockquote{max-width:30ch}
[dir=rtl] .quote-band blockquote p{font-style:normal;line-height:1.6;font-size:clamp(1.35rem,3vw,2.2rem)}
.quote-band blockquote p::before{content:"\201C";color:var(--oro)}
.quote-band blockquote p::after{content:"\201D";color:var(--oro)}
[dir=rtl] .quote-band blockquote p::before{content:"\00AB";color:var(--oro)}
[dir=rtl] .quote-band blockquote p::after{content:"\00BB";color:var(--oro)}
.quote-band cite{
display:block;font-family:var(--ff-m);font-style:normal;font-size:.7rem;
letter-spacing:.16em;text-transform:uppercase;color:var(--oro);margin-top:26px;
}
[dir=rtl] .quote-band cite{font-family:var(--ff-b);letter-spacing:0;text-transform:none;font-size:.85rem}
.quote-band::before{
content:"";display:block;width:34px;height:1px;background:var(--oro);
margin:0 auto clamp(26px,3vw,38px);opacity:.7;
}
/* ============================================================ PROMISE BAND (§7)
.promise-band is the ; .promise-grid is the grid. */
.promise-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,38px)}
.promise{position:relative;padding-top:26px;border-top:2px solid var(--oro)}
.promise h3{font-family:var(--ff-d);font-size:1.32rem;margin-bottom:.5em;color:var(--ink)}
.promise p{font-size:.95rem;color:var(--ink-dim);line-height:1.58}
@media (min-width:860px){.promise-grid{grid-template-columns:repeat(3,1fr)}}
/* ============================================================ THE QUIZ (§5 · §13)
build.py ships only #qz.qz + the JSON blob + a sibling