/* Miss Arizona USA public site. Port of concept v2 "The Crowning Broadcast" (missazusa-concept/site/v2.css).
   Look is locked: Arimo, ink #131E29, gold #CBAE5B, square gold buttons, navy all the way down, one white
   "magazine page" for scoring. Lane 1 changes are craft fixes only, each marked "fix:". */

/* fix: Arimo self-hosted (was a Google Fonts @import, a third-party request). Variable weight 400..700, OFL. */
@font-face{font-family:"Arimo";src:url("/fonts/arimo-latin-wght-normal.woff2") format("woff2-variations"),url("/fonts/arimo-latin-wght-normal.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Arimo";src:url("/fonts/arimo-latin-wght-italic.woff2") format("woff2-variations"),url("/fonts/arimo-latin-wght-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--ink:#131E29;--raise:#1A3350;--silver:#BABFCA;--gold:#CBAE5B;--gold-text:#806A30;--white:#fff;--hair:rgba(186,191,202,.16);--f:'Arimo',Arial,sans-serif;--m:48px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink)}
body{background:var(--ink);color:var(--white);font:400 17px/1.6 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--m)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:.88}
h2{font-size:clamp(40px,6vw,88px);margin:18px 0 0}
h3{font-size:22px;line-height:1.1;letter-spacing:0}
.eyebrow{display:block;font:700 12px/1.4 var(--f);letter-spacing:.22em;text-transform:uppercase;color:var(--silver)}
.eyebrow.gold{color:var(--gold)}
.muted{color:var(--silver)}
.tbd{font-style:normal;border-bottom:1.5px dashed var(--gold)}
/* fix: visible keyboard focus everywhere (concept only had it on the checker) */
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.skip{position:absolute;left:16px;top:-80px;z-index:60;background:var(--gold);color:var(--ink);padding:14px 18px;font:700 13px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:16px}

/* buttons: square, broadcast */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 32px;font:700 13px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;border-radius:0;white-space:nowrap;transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.btn.gold{background:var(--gold);color:var(--ink)}
@media (hover: hover) and (pointer: fine){.btn.gold:hover{background:var(--white)}}
.btn.line{border-color:rgba(255,255,255,.8);color:var(--white);background:none}
@media (hover: hover) and (pointer: fine){.btn.line:hover{background:var(--white);color:var(--ink)}}
.btn.sm{min-height:44px;padding:0 22px}
.btn.wide{width:100%;min-height:64px;font-size:14px}
.btn[aria-disabled="true"]{background:none;border-color:var(--hair);color:var(--silver);cursor:not-allowed}
.tlink{display:inline-flex;gap:10px;align-items:center;min-height:44px;font:700 13px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.tlink i{font-style:normal;transition:transform .2s}
@media (hover: hover) and (pointer: fine){.tlink:hover i{transform:translateX(4px)}}

/* nav */
nav.top{position:fixed;inset:0 0 auto;z-index:40;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--m);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
nav.top.solid,.inner nav.top{background:rgba(19,30,41,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--hair)}
.mark{font:700 15px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.mark span{color:var(--gold)}
/* lane J (Jo's note 1): the official logo replaces the text wordmark; it is white artwork, made for this navy. */
.mark{display:inline-flex;align-items:center;min-height:44px}
.mark img{height:56px;width:auto}
.f-logo{height:112px;width:auto;margin-bottom:36px}
nav.top ul{display:flex;gap:36px;list-style:none}
nav.top ul a{font:700 12px/1 var(--f);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;opacity:.8}
nav.top ul a[aria-current="page"]{opacity:1}
@media (hover: hover) and (pointer: fine){nav.top ul a:hover{opacity:1}}
nav.top ul a[aria-current="page"]{box-shadow:0 2px 0 var(--gold)}
/* fix: the concept had no menu on phones (links simply vanished). A <details> menu needs no script. */
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid rgba(255,255,255,.8);font:700 12px/1 var(--f);letter-spacing:.18em;text-transform:uppercase}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--white);color:var(--ink)}
.menu ul{position:fixed;inset:72px 0 auto;flex-direction:column;gap:0;background:var(--ink);border-bottom:1px solid var(--hair);padding:8px var(--m) 24px}
.menu ul a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--hair);opacity:1;font-size:14px}
.nav-cta{display:flex;align-items:center;gap:12px}

/* 1. hero: full-bleed stage, bottom-left type */
.hero{position:relative;height:100svh;min-height:680px;overflow:hidden;background:var(--ink)}
/* fix: the hero is now the 5712 px ballroom original at proper widths (was a 1365 px portrait stretched).
   On desktop the frame is drawn 139% wide and anchored left so Kaitlyn sits right of centre, clear of the
   headline and the gold shade on the left. */
.hero picture{position:absolute;inset:0}
/* fix: no CSS filter on the hero (it forced a full re-raster of a 2048 px image on every animation frame:
   a 1.6 s long task in Lighthouse mobile). The photo is used as graded. */
.hero .bg{position:absolute;top:0;left:0;height:100%;width:139%;max-width:none;object-fit:cover;object-position:49% 34%}
/* Lane Hero: Jo's own hero photo (HeroPhoto.astro) keeps her Sanity hotspot in view. The focal point arrives as two
   classes in 5% steps (no inline style under CSP), and wins over the built-in photo's hand-set position, phones too. */
.hero .bg.fp{object-position:var(--fx,50%) var(--fy,50%)}
/* hero-cape (11/9): the built-in photo has the women dead center with stage both sides. On desktop the photo fills the
   right 68% at full height (crowns and cape hem in frame) and fades in from the left, so the women sit ~55-90% across,
   clear of the headline. Phones keep the full-width crop. */
@media (min-width:1001px){.hero .bg.side{left:auto;right:0;width:68%;object-position:29% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}}
.fx-0{--fx:0%}.fx-5{--fx:5%}.fx-10{--fx:10%}.fx-15{--fx:15%}.fx-20{--fx:20%}.fx-25{--fx:25%}.fx-30{--fx:30%}.fx-35{--fx:35%}.fx-40{--fx:40%}.fx-45{--fx:45%}.fx-50{--fx:50%}.fx-55{--fx:55%}.fx-60{--fx:60%}.fx-65{--fx:65%}.fx-70{--fx:70%}.fx-75{--fx:75%}.fx-80{--fx:80%}.fx-85{--fx:85%}.fx-90{--fx:90%}.fx-95{--fx:95%}.fx-100{--fx:100%}
.fy-0{--fy:0%}.fy-5{--fy:5%}.fy-10{--fy:10%}.fy-15{--fy:15%}.fy-20{--fy:20%}.fy-25{--fy:25%}.fy-30{--fy:30%}.fy-35{--fy:35%}.fy-40{--fy:40%}.fy-45{--fy:45%}.fy-50{--fy:50%}.fy-55{--fy:55%}.fy-60{--fy:60%}.fy-65{--fy:65%}.fy-70{--fy:70%}.fy-75{--fy:75%}.fy-80{--fy:80%}.fy-85{--fy:85%}.fy-90{--fy:90%}.fy-95{--fy:95%}.fy-100{--fy:100%}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,30,41,.65) 0%,rgba(19,30,41,0) 22%,rgba(19,30,41,0) 48%,rgba(19,30,41,.96) 100%),linear-gradient(90deg,rgba(19,30,41,.86) 0%,rgba(19,30,41,.45) 36%,transparent 56%),rgba(19,30,41,.1)}
.hero-in{position:absolute;inset:auto 0 0;padding:0 var(--m) 88px;display:flex;align-items:flex-end;justify-content:space-between;gap:48px;max-width:1440px;margin:0 auto}
.hero .copy{max-width:min(760px,52vw)}
.hero h1{font-size:clamp(56px,7vw,124px);margin:18px 0 22px}
.hero h1 span{display:block}
.hero h1 span+span{color:var(--gold)}
.hero .sub{color:#DCDFE4;max-width:470px;font-size:18px}
.hero .ctas{display:flex;align-items:center;gap:28px;margin-top:32px;flex-wrap:wrap}
.facts{display:flex;border-top:1px solid var(--hair)}
.facts div{padding:16px 24px 0 0}
.facts div+div{padding-left:24px;border-left:1px solid var(--hair)}
.facts dt{font:700 11px/1 var(--f);letter-spacing:.22em;text-transform:uppercase;color:var(--silver)}
.facts dd{font:700 20px/1.2 var(--f);margin-top:10px;white-space:nowrap}
.credit{position:absolute;right:var(--m);top:96px;font:700 11px/1 var(--f);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);writing-mode:vertical-rl}

/* inner page header (from shop.html) */
.page-h{padding:160px 0 56px;border-bottom:1px solid var(--hair)}
.page-h h1{font-size:clamp(48px,8vw,128px);margin:18px 0 24px}
.page-h p{max-width:56ch;color:var(--silver);font-size:19px}
.page-h.photo{position:relative;padding:0;border:0;min-height:72svh;display:flex;align-items:flex-end;overflow:hidden}
.page-h.photo picture{position:absolute;inset:0}
.page-h.photo img{width:100%;height:100%;object-fit:cover}
.page-h.photo .pos-finale{object-position:50% 45%}
.page-h.photo .pos-titleholders{object-position:50% 30%}
.page-h.photo .facts{margin-top:28px}
.page-h .facts{margin-top:32px;max-width:640px}
.page-h.photo .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,30,41,.6) 0%,rgba(19,30,41,0) 30%,rgba(19,30,41,.2) 55%,var(--ink) 100%)}
.page-h.photo .wrap{position:relative;width:100%;padding-bottom:56px}

/* 2. checker: one editorial sentence */
section{position:relative}
.check{padding:160px 0;border-top:1px solid var(--hair)}
.grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.check .muted{margin-top:24px;max-width:30ch}
.sentence{font:400 clamp(24px,2.3vw,32px)/1.55 var(--f);color:#E6E8EC}
.blank{display:inline-block;appearance:none;background:none;border:0;border-bottom:2px solid var(--gold);color:var(--silver);font:700 1em/1.2 var(--f);padding:0 2px;cursor:pointer;transition:color .2s,background .2s}
/* lane K (FormsSpec 4.4): a 44px tall tap target at every width; the type stays the sentence's size */
.blank{display:inline-flex;align-items:flex-end;min-height:44px;vertical-align:bottom}
.blank.set{color:var(--white)}
.blank.on{color:var(--gold);background:rgba(203,174,91,.12)}
.choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;min-height:52px}
.choice{appearance:none;background:none;border:1px solid var(--gold);color:var(--white);font:700 13px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;padding:0 22px;min-height:52px;cursor:pointer;transition:background .2s,color .2s}
.choice.picked{background:var(--gold);color:var(--ink)}
@media (hover: hover) and (pointer: fine){.choice:hover{background:var(--gold);color:var(--ink)}}
.verdict{margin-top:32px;padding-top:28px;border-top:1px solid var(--hair);font-size:18px;color:var(--silver);display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;min-height:84px}
.verdict .yes{font:700 24px/1.2 var(--f);color:var(--gold);text-transform:uppercase;letter-spacing:-.01em}
.verdict .no{font:700 20px/1.2 var(--f);color:var(--white);text-transform:uppercase;margin-right:6px}
.verdict [hidden]{display:none}
.tap-hint{font:700 11px/1 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.tap-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);animation:glow 1.6s ease-in-out infinite}
.answered .tap-hint{visibility:hidden}
.nojs-rules{margin-top:20px;color:var(--silver);font-size:15px}
.js .nojs-rules{display:none}

/* 3. steps: outlined numerals, hairline columns */
.steps{padding:40px 0 160px}
.four{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:72px;border-top:1px solid var(--hair)}
.four li{padding:36px 28px 0;border-left:1px solid var(--hair)}
.four li:first-child{border-left:0;padding-left:0}
.four .n{display:block;font:700 clamp(96px,10vw,160px)/.8 var(--f);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(186,191,202,.45);transition:-webkit-text-stroke-color .3s}
@media (hover: hover) and (pointer: fine){.four li:hover .n{-webkit-text-stroke-color:var(--gold)}}
.four h3{margin:28px 0 12px}
.four p{color:var(--silver);font-size:15px;max-width:28ch}

/* 4. package: 50/50 split, photo + navy panel */
.pkg{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(760px,100vh,980px)}
.pkg-photo{position:relative;overflow:hidden}
.pkg-photo picture,.pkg-photo img{width:100%;height:100%}
.pkg-photo img{object-fit:cover;object-position:50% 18%;filter:saturate(.9) contrast(1.06)}
.pkg-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(26,51,80,.5)),rgba(19,30,41,.12)}
.pkg-photo figcaption{position:absolute;left:var(--m);bottom:20px;z-index:1;font:700 11px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.pkg-panel{background:var(--raise);padding:96px clamp(40px,6vw,96px);display:flex;flex-direction:column;justify-content:center}
.price{display:flex;align-items:flex-end;gap:18px;margin:40px 0 28px}
.price em{font:700 clamp(56px,6vw,96px)/.85 var(--f);letter-spacing:-.04em}
.price span{font:700 12px/1.5 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--silver);padding-bottom:6px}
.incl{list-style:none;border-top:1px solid var(--hair)}
.incl li{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;border-bottom:1px solid var(--hair);font:700 13px/1.3 var(--f);letter-spacing:.08em;text-transform:uppercase}
.incl li em,.incl li b{color:var(--silver);font-weight:700}
.fine{margin-top:16px;font-size:13px;color:var(--silver)}
.pkg-panel .btn{margin-top:32px}

/* 5. scoring: the one white magazine page */
.scored{background:var(--white);color:var(--ink);padding:160px 0;text-align:center}
.scored .eyebrow{color:var(--raise)}
.scored h2{margin-left:auto;margin-right:auto}
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:96px;text-align:left}
.phases i{display:block;width:40px;height:2px;background:var(--gold)}
.phases b{display:block;font:700 clamp(72px,8vw,120px)/.9 var(--f);letter-spacing:-.04em;margin:24px 0 18px}
.phases h3{font-size:14px;letter-spacing:.2em}
.phases p{margin-top:10px;font-size:15px;color:var(--raise)}
.bar{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;height:8px;margin-top:72px}
.bar span:nth-child(odd){background:var(--ink)}.bar span:nth-child(even){background:var(--raise)}
.note{margin:28px auto 0;max-width:60ch;color:#3A4C67;font-size:15px}
.scored a{color:var(--ink)}

/* 6. titleholders: giant word behind cut-out portraits */
.holders{padding:120px 0 0;overflow:hidden}
.giant{display:inline-block;font:700 13vw/.8 var(--f);letter-spacing:-.045em;text-transform:uppercase;color:var(--silver);white-space:nowrap;position:relative;left:50%;transform:translateX(-50%);z-index:0;opacity:.9}
.pair{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:4vw;max-width:1280px;margin:-11vw auto 0;padding:0 var(--m)}
.pair figure{position:relative}
.pair a{text-decoration:none;display:block}
.pair img{width:100%;height:auto;filter:saturate(.95) contrast(1.05) drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.pair .h1 picture{display:block;max-width:470px;margin-left:auto;margin-right:6%}
.pair .h2{margin-top:120px}
.pair .h2 picture{display:block;max-width:520px}
.pair figcaption{margin-top:20px;display:flex;flex-direction:column;gap:6px}
.pair .h1 figcaption{text-align:right;align-items:flex-end;margin-right:6%}
.pair figcaption b{font:700 15px/1 var(--f);letter-spacing:.16em;text-transform:uppercase}
.pair figcaption span{font:700 12px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--silver)}
.book{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:96px;padding-top:40px;padding-bottom:40px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.book p{font:700 clamp(22px,2.4vw,32px)/1.1 var(--f);text-transform:uppercase;letter-spacing:-.01em}

/* 7. legacy: editorial index */
.legacy{padding:160px 0}
.index{list-style:none;margin:72px 0 40px;border-top:1px solid var(--hair)}
.index li{display:grid;grid-template-columns:120px 1fr auto 40px;align-items:center;min-height:84px;border-bottom:1px solid var(--hair);transition:background .25s}
@media (hover: hover) and (pointer: fine){.index li:hover{background:var(--raise)}}
.index .yr{font:700 14px/1 var(--f);letter-spacing:.14em;color:var(--silver);font-variant-numeric:tabular-nums;padding-left:4px}
.index .nm{font:700 clamp(22px,2.4vw,32px)/1 var(--f);text-transform:uppercase;letter-spacing:-.01em;transition:transform .25s}
@media (hover: hover) and (pointer: fine){.index li:hover .nm{transform:translateX(8px)}}
.index .t{font:700 12px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--silver)}
.index li i{font-style:normal;color:var(--gold);opacity:0;text-align:center;transition:opacity .25s}
@media (hover: hover) and (pointer: fine){.index li:hover i{opacity:1}}
.index a{text-decoration:none;display:contents}
.hof{padding:96px 0 160px}
.hof h2{font-size:clamp(32px,4vw,56px)}
.hof .index{margin-top:40px}
.hof .index li{min-height:64px}
.hof-jump{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* 8. sponsors */
.sponsors{background:var(--raise);padding:96px 0}
.s-head{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.logos{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--hair);border-left:1px solid var(--hair);list-style:none}
/* Lane Q: the quiet single-colour grid (TasteBrief). Logos are white on clear from the image pipeline, shown at 60%
   like the type they replace; full strength on hover/focus. Sized by their box (lib/sponsors.ts), never stretched.
   A sponsor without a logo file keeps its name in type at the same 60%. */
.logos li{height:120px;display:grid;place-items:center;padding:20px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);text-align:center;font:700 13px/1.3 var(--f);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.logos li>a{display:grid;place-items:center;width:100%;height:100%;color:inherit;text-decoration:none}
.logos picture{display:contents}
.logos img{display:block;max-width:100%;height:auto;opacity:.6;transition:opacity .2s}
/* Lane X: a logo Jo uploaded (cdn.sanity.io) is whatever colour she sent: grey it, push it to pure black on white,
   flip it (ink → white, a white background → black), then screen it so black drops out to the grid. A dark logo on
   clear OR on white comes out white on clear, like its neighbours (the Website tab asks for exactly that). */
.logos img.up{filter:grayscale(1) contrast(4) invert(1);mix-blend-mode:screen}
@media (hover: hover) and (pointer: fine){.logos a:hover img{opacity:1}.logos a:hover{color:var(--white)}}
.logos a:focus-visible img{opacity:1}
.sponsors.all{padding:72px 0 96px}
.become{padding:96px 0 120px;border-top:1px solid var(--hair)}
.become h2{font-size:clamp(28px,3vw,40px)}
.become p{max-width:56ch;margin:16px 0 32px;color:var(--silver)}

/* 9. footer + giant wordmark */
footer{padding:120px 0 0;border-top:1px solid var(--hair);overflow:hidden}
.cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.f-cta p{font:700 clamp(36px,4vw,56px)/.9 var(--f);text-transform:uppercase;letter-spacing:-.02em;margin-bottom:28px}
footer h2.fh{font:700 12px/1 var(--f);letter-spacing:.22em;text-transform:uppercase;color:var(--silver);margin:0 0 12px}
footer ul{list-style:none;font-size:15px}
footer li{min-height:44px;display:flex;align-items:center}
footer ul a{text-decoration:none}
@media (hover: hover) and (pointer: fine){footer ul a:hover{color:var(--gold)}}
.base{display:flex;justify-content:space-between;gap:24px;margin-top:80px;padding-top:24px;border-top:1px solid var(--hair);font-size:13px;color:var(--silver)}
.base a{display:inline-flex;align-items:center;min-height:44px}
/* fix: decorative giant words are drawn from data-text in ::before, so they are not text nodes (they are 6%
   ghost type by design and would otherwise fail contrast checks; screen readers already skip them) */
.giant::before,.wordmark::before{content:attr(data-text)}
.wordmark{display:inline-block;position:relative;left:50%;transform:translateX(-50%);font:700 10vw/.78 var(--f);letter-spacing:-.05em;text-transform:uppercase;color:rgba(255,255,255,.06);white-space:nowrap;text-align:center;margin:56px 0 -1.4vw}

/* question pages (AEO): answer first, detail below, last updated visible */
.answer{margin-top:40px;max-width:62ch;font:400 clamp(20px,1.8vw,24px)/1.55 var(--f);color:#E6E8EC;border-left:2px solid var(--gold);padding-left:24px}
.updated{margin-top:20px;font:700 11px/1 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--silver)}
.prose{padding:72px 0 140px;max-width:72ch}
/* lane K: the contact router (convo-form rows, /ui/convo.css) and the facts under it */
.contact-router{padding:64px 0 0}
.prose.contact-facts{padding-top:40px}
.prose h2{font-size:clamp(28px,3vw,40px);margin:56px 0 18px;line-height:1}
.prose h3{font-size:18px;margin:32px 0 10px}
.prose p,.prose li{color:#D5D9E0;margin-top:14px}
.prose ul,.prose ol{padding-left:22px}
.prose a{color:var(--gold)}
.prose .btn{margin-top:32px;color:var(--ink)}
.prose .btn.line{color:var(--white)}
.draft{margin-top:24px;padding:18px 20px;border:1px dashed var(--gold);color:var(--silver);font-size:15px}
.related{border-top:1px solid var(--hair);padding:48px 0 0;margin-top:72px}
.related ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 32px}
.related li{margin:0;border-bottom:1px solid var(--hair)}
.related a{display:flex;align-items:center;min-height:56px;text-decoration:none;color:var(--white);font-weight:700}
.crumbs{font:700 11px/1 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--silver);list-style:none;display:flex;gap:10px;flex-wrap:wrap}
.crumbs a{text-decoration:none}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.6}

/* titleholder cover story */
.cover{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:end;padding:140px 0 0}
.cover picture{display:block;max-width:560px;margin:0 auto}
.cover img{width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.cover h1{font-size:clamp(56px,8vw,128px);margin:18px 0 12px}
.cover .ttl{font:700 14px/1.2 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.cover .bio p{color:#D5D9E0;margin-top:18px;max-width:58ch}
.cover .copy{padding-bottom:96px}
.cover .btn{margin-top:36px}
.alt-shot{padding:96px 0 0}
.alt-shot picture{display:block;max-width:420px;margin:0 auto}
.alt-shot img{width:100%;height:auto}
.holder-list{display:grid;grid-template-columns:1fr 1fr;gap:4vw;padding:96px 0 140px}
.holder-list a{text-decoration:none;display:block}
.holder-list picture{display:block;max-width:440px;margin:0 auto}
.holder-list img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 15%}
.holder-list h2{font-size:clamp(28px,3vw,44px);margin-top:28px}
.holder-list span{display:block;margin-top:10px;font:700 12px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.photo-credit{margin-top:12px;font-size:12px;color:var(--silver)}

/* lane J: the team (Jo's note 11), on /pageant#team */
.team{border-top:1px solid var(--hair);padding-bottom:140px}
.team .team-intro{padding-bottom:24px}
.team-list{list-style:none;display:grid;gap:0}
.member{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:56px;align-items:start;padding:56px 0;border-top:1px solid var(--hair)}
.member picture{display:block}
.member img{width:100%;height:auto}
.member h3{font-size:clamp(28px,3vw,40px);line-height:1}
.member .role{margin-top:14px;font:700 12px/1.5 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.member p{color:#D5D9E0;margin-top:14px;max-width:62ch}
.member .role+p{margin-top:24px}
.member.no-photo{grid-template-columns:minmax(0,1fr)}
/* lane J: more photos (Jo's note 3). Two portraits side by side, one on phones. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 140px}
.duo figure{margin:0}
.duo img{width:100%;height:auto}
.duo figcaption{margin-top:12px;font-size:12px;color:var(--silver)}
.prose+.duo{margin-top:-64px}
.hof-photos .duo{margin:96px 0 0}
.steps+.wrap .duo{margin-top:-64px}
.band{position:relative;margin:0}
.band img{width:100%;height:auto;max-height:80svh;object-fit:cover}
.band figcaption{position:absolute;right:var(--m);bottom:16px;font:700 11px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
/* lane Y: Jo's round 2 ("more visuals"). Three studio portraits in a row (/compete), one credit under them. */
.trio{margin:0 0 140px}
.trio-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.trio picture{display:block}
.trio img{width:100%;height:auto}
.trio figcaption{margin-top:12px;font-size:12px;color:var(--silver)}
.pkg-panel+.wrap .trio{margin-top:140px}

/* lane J: "Shop coming soon" (Jo's note 12) */
.page-h.soon{min-height:72svh;display:flex;align-items:flex-end;padding-bottom:120px}
.page-h.soon p a{color:var(--gold)}
.soon-ctas{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:40px}
.soon-ctas .btn{color:var(--ink)}
.soon-ctas .tlink{color:var(--white)}

/* shop (from shop.html) */
.shop{display:grid;grid-template-columns:repeat(2,1fr);border-left:1px solid var(--hair);border-top:1px solid var(--hair);margin:56px 0 0}
.prod{padding:36px 36px 32px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);display:flex;flex-direction:column;gap:18px}
.prod .tag{font:700 11px/1 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.prod h2{font-size:30px;margin:0;line-height:1}
.prod p{color:var(--silver);font-size:15px}
.prod .pr{font:700 44px/1 var(--f);letter-spacing:-.03em}
.prod .pr small{font:700 12px var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--silver);margin-left:8px}
.prod .dl{border:1px solid var(--hair);padding:14px 16px;font:700 12px/1.2 var(--f);letter-spacing:.1em;text-transform:uppercase}
.prod .btn{margin-top:auto}
.how{padding:96px 0 140px}
.how ol{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;list-style:none;margin-top:40px}
.how li b{font:700 56px/1 var(--f);color:var(--gold);display:block;margin-bottom:12px}
.how li p{color:var(--silver)}
.notice{margin-top:32px;padding:18px 20px;border:1px solid var(--hair);color:var(--silver);max-width:72ch}

/* motion (only when JS adds .motion and reduced motion is off) */
@keyframes zoomout{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-10px)}60%{transform:translateY(2px)}}
@keyframes glow{0%,100%{box-shadow:0 2px 0 var(--gold)}50%{box-shadow:0 2px 0 var(--gold),0 0 0 6px rgba(203,174,91,.18)}}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* fix: the slow zoom runs on wide screens only, where the GPU budget allows it; phones get the still photo */
@media (min-width:1001px){.motion .hero .bg{animation:zoomout 1.6s cubic-bezier(.2,.7,.2,1) both;transform-origin:35% 40%;will-change:transform}}
.motion .hero .rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.motion .hero .rise:nth-child(2){animation-delay:.08s}.motion .hero .rise:nth-child(3){animation-delay:.16s}.motion .hero .rise:nth-child(4){animation-delay:.24s}.motion .hero .facts{animation-delay:.32s}
.motion .reveal{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.motion .reveal.in{opacity:1;transform:none}
.wave .blank{animation:hop .6s cubic-bezier(.3,.7,.3,1) both}
.wave .blank:nth-of-type(2){animation-delay:.12s}
.wave .blank:nth-of-type(3){animation-delay:.24s}
.hint .blank.on{animation:glow 1.6s ease-in-out infinite}
.choice{animation:pop .35s cubic-bezier(.2,.7,.2,1) both}
.choice:nth-child(2){animation-delay:.06s}.choice:nth-child(3){animation-delay:.12s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* tablet + phone */
@media (max-width:1000px){
 :root{--m:20px}
 nav.top>ul{display:none}
 .menu{display:block}
 .menu ul{display:flex}
 .nav-cta .btn{display:none}
 .mark img{height:48px}
 .f-logo{height:88px}
 .hero{height:auto;min-height:0;display:flex;flex-direction:column}
 .hero picture{position:relative;inset:auto;height:72svh;min-height:500px;overflow:hidden}
 /* fix: on phones the crop sits on Kaitlyn (face ~49% across the frame), not on the empty stage */
 .hero .bg{position:absolute;width:100%;height:100%;object-position:48% 30%}
 .hero .bg.side{object-position:46% 50%}
 .hero .shade{height:72svh;min-height:500px;background:linear-gradient(180deg,rgba(19,30,41,.6) 0%,transparent 22%,transparent 55%,var(--ink) 100%)}
 .hero-in{position:relative;flex-direction:column;align-items:stretch;padding:0 var(--m) 56px;margin-top:-120px;gap:32px}
 .hero .copy{max-width:none}
 .hero h1{font-size:clamp(48px,14vw,96px)}
 .credit{display:none}
 .facts dd{font-size:16px;white-space:normal}
 .facts div{padding-right:14px}.facts div+div{padding-left:14px}
 .check,.legacy,.scored{padding:96px 0}
 .steps{padding:0 0 96px}
 .grid,.pkg,.phases,.cols,.cover,.holder-list,.shop,.how ol{grid-template-columns:1fr}
 .four{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;margin-top:48px}
 .four li{flex:0 0 80vw;scroll-snap-align:start;padding:28px 20px 0}
 .four li:first-child{padding-left:0}
 .pkg-photo{aspect-ratio:4/5}
 .pkg-panel{padding:64px var(--m)}
 .phases{grid-template-columns:1fr 1fr;gap:40px 24px;margin-top:56px}
 .pair{grid-template-columns:1fr 1fr;margin-top:-12vw;gap:12px}
 .pair .h2{margin-top:48px}
 .pair .h1 picture,.pair .h1 figcaption{margin-right:0}
 .book{flex-direction:column;align-items:flex-start;margin-top:56px}
 .index li{grid-template-columns:64px 1fr 24px}
 .index .t{display:none}
 /* fix (lane J): minmax(0,1fr) so a long word ("PHOTOGRAPHY") can't widen a column past the screen at 390 px */
 .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
 .logos li{height:88px;font-size:11px;letter-spacing:.08em;padding:12px 8px;overflow-wrap:anywhere}
 .logos img{max-height:56px;object-fit:contain}
 .cols{grid-template-columns:1fr 1fr}
 .f-cta{grid-column:1/-1}
 .base{flex-direction:column}
 .page-h{padding:120px 0 40px}
 /* photo headers stack on phones: photo first, words on ink below (never over faces) */
 .page-h.photo{display:block;min-height:0}
 .page-h.photo picture{position:relative;inset:auto;display:block;height:56svh;min-height:380px}
 .page-h.photo .shade{height:56svh;min-height:380px;background:linear-gradient(180deg,rgba(19,30,41,.6) 0%,transparent 25%,transparent 60%,var(--ink) 100%)}
 .page-h.photo .wrap{margin-top:-64px;padding-bottom:40px}
 .cover{padding-top:104px;gap:24px}
 .cover .copy{padding-bottom:64px}
 .cover picture{max-width:340px}
 .holder-list{gap:64px}
 .prose{padding:48px 0 96px}
 .member{grid-template-columns:1fr;gap:28px;padding:40px 0}
 .member picture{max-width:360px}
 .team{padding-bottom:96px}
 .duo{grid-template-columns:1fr;margin-bottom:96px}
 .prose+.duo{margin-top:-48px}
 .trio{margin-bottom:96px}
 .trio-row{grid-template-columns:1fr 1fr;gap:12px}
 .trio-row picture:first-child{grid-column:1/-1}
 .pkg-panel+.wrap .trio{margin-top:96px}
}
/* lane 4: shop forms (Add to order, delivery choice, your order) */
.prod .add{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;margin-top:auto}
.prod.one{max-width:640px;margin:56px 0 96px;border:1px solid var(--hair)}
.prod h2 a{color:inherit;text-decoration:none}
.ful{border:0;padding:0;margin:0;display:grid;gap:8px;color:var(--silver);font-size:15px}
.ful legend{font:700 11px/1 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--silver);margin-bottom:8px}
.ful label,.qty{display:flex;gap:10px;align-items:center;min-height:44px}
.qty{color:var(--silver);font-size:15px}
.qty input{width:5em;min-height:44px;background:none;border:1px solid var(--hair);color:var(--white);font:inherit;padding:0 10px}
.order{padding:48px var(--m) 96px}
.order .lines{list-style:none;padding:0;margin:0 0 40px;max-width:720px}
.order .lines li{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--hair)}
.order .lines .sum{font-weight:700}
.order .lines form{margin:0}
.order .link{background:none;border:0;color:var(--silver);text-decoration:underline;font:inherit;cursor:pointer;min-height:44px}
.order .pay{display:grid;gap:24px;max-width:720px}

/* generated by scripts/build-forms.ts: themes */
.cf-theme-miss-az{--cf-bg:#131E29;--cf-panel:#1A3350;--cf-ink:#FFFFFF;--cf-muted:#BABFCA;--cf-accent:#CBAE5B;--cf-on-accent:#131E29;--cf-accent-press:#B89A48;--cf-focus:#CBAE5B;--cf-error:#F0A3A0;--cf-rule:rgba(186,191,202,.4);--cf-font:'Arimo', Arial, sans-serif}
.cf-theme-test-state{--cf-bg:#12261E;--cf-panel:#1D3A2E;--cf-ink:#FFFFFF;--cf-muted:#B9CCC2;--cf-accent:#D9925B;--cf-on-accent:#12261E;--cf-accent-press:#C27F49;--cf-focus:#D9925B;--cf-error:#F4A6A0;--cf-rule:rgba(185,204,194,.4);--cf-font:Georgia, 'Times New Roman', serif}
/* convo-form: every form's look, from --cf-* tokens only (a theme sets them; scripts/build-forms.ts writes one
   .cf-theme-<id> rule per theme above this file). Square corners, no panels, no shadows. Fixed dark: no
   prefers-color-scheme here on purpose. Uppercase only on buttons.
   Every hover rule lives inside @media (hover: hover) and (pointer: fine): on a phone the hover sticks after a tap, and
   the next screen's gold Next (under the same thumb) would show white (Tess, preship fix 2; test/forms-k3). */

.cf-page{background:var(--cf-bg);color:var(--cf-ink);font-family:var(--cf-font);--cf-pad:20px;min-height:100svh}
.cf-page [hidden]{display:none!important}
.cf-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cf-page :focus-visible,.cf-router :focus-visible{outline:2px solid var(--cf-focus);outline-offset:4px}
.cf-skiplink{position:absolute;left:16px;top:-80px;z-index:60;background:var(--cf-accent);color:var(--cf-on-accent);padding:14px 18px;font:700 13px/1 var(--cf-font);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.cf-skiplink:focus{top:16px}

/* top bar: the logo home, a quiet Exit. No full nav inside the flow. */
.cf-top{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 var(--cf-pad)}
.cf-logo{display:inline-flex;align-items:center;min-height:44px}
.cf-logo img{display:block;height:40px;width:auto}
.cf-exit{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:flex-end;color:var(--cf-muted);font-size:15px;text-decoration:underline;text-underline-offset:4px}
@media (hover: hover) and (pointer: fine){.cf-exit:hover{color:var(--cf-ink)}}

/* layout: one column on phones (question within 120px of the top bar), photo + question from 1024px */
.cf-main{padding:12px var(--cf-pad) 48px}
.cf-grid{max-width:1240px;margin:0 auto}
.cf-aside{display:none}
.cf-col{max-width:560px;margin:0 auto}
.cf-bar{height:2px;background:color-mix(in srgb,var(--cf-muted) 22%,transparent);margin:0 0 20px;overflow:hidden}
.cf-bar span{display:block;height:100%;background:var(--cf-accent);transform-origin:left center;transform:scaleX(0)}

/* steps */
.cf-step{border:0;margin:0;padding:0;min-width:0}
.cf-q{display:block;float:none;width:100%;max-width:22ch;margin:0 0 12px;padding:0;font:700 32px/1.15 var(--cf-font);letter-spacing:-.01em;text-transform:none;text-wrap:balance;color:var(--cf-ink)}
.cf-q:focus{outline:none}
.cf-q:focus-visible{outline:2px solid var(--cf-focus);outline-offset:4px}
.cf-count{display:block;margin:0 0 10px;font:400 13px/1.3 var(--cf-font);letter-spacing:.02em;color:var(--cf-muted)}
.cf-help{margin:0 0 20px;max-width:46ch;font-size:17px;line-height:1.5;color:var(--cf-muted);text-wrap:pretty}
.cf-cond{margin:0 0 10px;font-size:15px;color:var(--cf-accent)}
.cf-note{display:block;margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--cf-muted)}
.cf-note .cf-textbtn{min-height:44px;margin-left:4px;vertical-align:middle}
.cf-note b{color:var(--cf-ink);font-weight:700}
.cf-answer{display:grid;gap:20px}
.cf-link{margin:16px 0 0;font-size:15px}
.cf-link a{display:inline-flex;align-items:center;min-height:48px;color:var(--cf-ink);text-underline-offset:4px}

/* no JS: every step in order, one under the other */
html:not(.cf-js) .cf-form>.cf-step:not([hidden])~.cf-step:not([hidden]){margin-top:48px;padding-top:36px;border-top:1px solid var(--cf-rule)}
/* booting (convo.js ran in <head>, the deck isn't up yet): only the first step, so the long form never flashes */
.cf-booting .cf-form>.cf-step:not(:first-child),.cf-booting .cf-footer{display:none}

/* text inputs: transparent, a silver rule, gold on focus, 20px (no iOS zoom) */
.cf-field{min-width:0}
.cf-label{display:block;margin:0 0 2px;font-size:15px;line-height:1.4;color:var(--cf-muted)}
.cf-input{display:block;width:100%;height:56px;margin:0;padding:8px 0;background:transparent;border:0;border-bottom:1px solid var(--cf-muted);border-radius:0;color:var(--cf-ink);font:400 20px/1.2 var(--cf-font);-webkit-appearance:none;appearance:none}
.cf-input::placeholder{color:color-mix(in srgb,var(--cf-muted) 70%,transparent);opacity:1}
.cf-input:focus{outline:none;border-bottom-color:var(--cf-accent);box-shadow:inset 0 -1px 0 var(--cf-accent)}
.cf-input[aria-invalid="true"]{border-bottom-color:var(--cf-error)}
.cf-input[type=date],.cf-input[type=time]{color-scheme:dark;min-width:0}
.cf-long{height:10rem;field-sizing:fixed;resize:none;overflow:auto;padding:12px 14px;border:1px solid var(--cf-muted);font-size:17px;line-height:1.5}
.cf-long:focus{box-shadow:inset 0 0 0 1px var(--cf-accent);border-color:var(--cf-accent)}
@media (min-width:600px){.cf-long{height:calc(8 * 1.5em + 24px)}}
@media (min-width:400px){
  .cf-answer:has(>.cf-t-time+.cf-t-time){grid-template-columns:1fr 1fr}
  .cf-answer:has(>.cf-t-time+.cf-t-time)>.cf-field:not(.cf-t-time){grid-column:1/-1}
}

/* errors: words + an icon, never colour alone */
.cf-ic{width:20px;height:20px;flex:none}
.cf-err{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;font-size:15px;line-height:1.4;color:var(--cf-error)}
.cf-sumerr,.cf-reverr{display:flex;gap:10px;margin:0 0 28px;padding:14px 16px;border:1px solid var(--cf-error);color:var(--cf-ink);font-size:15px}
.cf-sumerr .cf-ic{color:var(--cf-error)}
.cf-sumerr ul,.cf-reverr ul{margin:6px 0 0;padding-left:1.2em}
.cf-sumerr a{color:var(--cf-error)}
.cf-reverr{display:block;margin:0 0 20px}
.cf-reverr .cf-textbtn{color:var(--cf-error)}
.cf-typo{margin:6px 0 0}

/* text buttons: Back, Change, Did you mean */
.cf-textbtn,.cf-back{display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:48px;padding:0 2px;background:none;border:0;border-radius:0;color:var(--cf-ink);font:400 15px/1.2 var(--cf-font);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.cf-back{color:var(--cf-muted)}
@media (hover: hover) and (pointer: fine){.cf-back:hover,.cf-textbtn:hover{color:var(--cf-ink);text-decoration-thickness:2px}}

/* choice rows: full width, bordered, 56px; checked = navy fill + 2px gold all round + a gold check */
.cf-rows{display:grid;gap:10px}
.cf-row{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 16px;border:1px solid var(--cf-rule);color:var(--cf-ink);font-size:17px;line-height:1.35;text-decoration:none;cursor:pointer;transition:border-color .15s,background-color .15s}
@media (hover: hover) and (pointer: fine){.cf-row:hover{border-color:var(--cf-ink)}}
.cf-ri{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cf-row:has(.cf-ri:checked){background:var(--cf-panel);border:2px solid var(--cf-accent);padding:11px 15px}
.cf-row:has(.cf-ri:focus-visible){outline:2px solid var(--cf-focus);outline-offset:4px}
.cf-row:has(.cf-ri:disabled){display:none}
.cf-box{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid var(--cf-muted)}
.cf-box .cf-ic{width:18px;height:18px;color:var(--cf-accent);opacity:0}
.cf-ri:checked~.cf-box{border-color:var(--cf-accent)}
.cf-ri:checked~.cf-box .cf-ic{opacity:1}
.cf-rt{display:block;min-width:0}
.cf-rl{display:block}
.cf-rs{display:block;margin-top:2px;font-size:15px;color:var(--cf-muted)}
.cf-row a{position:relative;z-index:1;color:var(--cf-ink);text-underline-offset:3px}
.cf-thumb{display:block;flex:none;width:56px;height:56px;overflow:hidden;background:var(--cf-panel)}
.cf-thumb img,.cf-thumb picture{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* the titleholder photos are full-length cut-outs: frame the face like a headshot */
.cf-thumb img{transform:scale(2.2);transform-origin:50% 6%}
.cf-initials{display:grid;place-items:center;font-weight:700;font-size:17px;color:var(--cf-ink)}
.cf-consentwrap+.cf-consentwrap{margin-top:12px}
.cf-consent-row{align-items:flex-start;font-size:16px;line-height:1.5}
.cf-consent-row .cf-box{margin-top:1px}

/* chips: guardian relationship, audience suggestions */
.cf-pick{border:0;margin:0;padding:0;min-width:0}
.cf-pick>legend{padding:0;margin:0 0 8px}
.cf-chips{display:flex;flex-wrap:wrap;gap:8px}
.cf-chip{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--cf-rule);border-radius:0;background:none;color:var(--cf-ink);font:400 15px/1.2 var(--cf-font);cursor:pointer}
@media (hover: hover) and (pointer: fine){.cf-chip:hover{border-color:var(--cf-ink)}}
.cf-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cf-chip[aria-pressed="true"],.cf-chip:has(input:checked){background:var(--cf-panel);border-color:var(--cf-accent);box-shadow:inset 0 0 0 1px var(--cf-accent)}
.cf-chip:has(input:focus-visible){outline:2px solid var(--cf-focus);outline-offset:4px}
.cf-suggest{display:grid;gap:8px;margin:0 0 8px}
.cf-other{margin-top:16px}

/* birthday: three number boxes */
.cf-dob{display:flex;align-items:flex-end;gap:8px}
.cf-dobpart{display:block}
.cf-dob-mm,.cf-dob-dd{width:72px}
.cf-dob-yyyy{width:104px}
.cf-slash{padding-bottom:14px;color:var(--cf-muted);font-size:20px}

/* actions follow the answer (never pinned: a pinned bar plus the iOS keyboard is what jumps) */
.cf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:28px}
.cf-fwd{display:flex;gap:12px;flex:1 1 100%;order:-1}
.cf-fwd>.cf-btn{flex:1 1 0}
.cf-card-actions{gap:12px}
.cf-card-actions>.cf-btn{flex:1 1 100%}
@media (min-width:600px){
  .cf-fwd{flex:0 0 auto;order:0;margin-left:auto}
  .cf-fwd>.cf-btn{flex:0 0 auto;min-width:180px}
  .cf-card-actions>.cf-btn{flex:0 0 auto}
}
.cf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border:1px solid transparent;border-radius:0;font:700 15px/1 var(--cf-font);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .1s,background-color .15s,color .15s}
.cf-primary,.cf-next{background:var(--cf-accent);color:var(--cf-on-accent)}
@media (hover: hover) and (pointer: fine){.cf-primary:hover,.cf-next:hover{background:var(--cf-ink)}}
.cf-primary:active,.cf-next:active{transform:scale(.97);background:var(--cf-accent-press)}
.cf-skip,.cf-secondary{background:transparent;border-color:var(--cf-muted);color:var(--cf-ink)}
@media (hover: hover) and (pointer: fine){.cf-skip:hover,.cf-secondary:hover{border-color:var(--cf-ink)}}
.cf-btn:disabled{background:transparent;border-color:var(--cf-muted);color:var(--cf-muted);cursor:not-allowed;transform:none}
.cf-btn[aria-busy="true"]{cursor:progress}
.cf-mail{margin:36px 0 0;font-size:15px;color:var(--cf-muted)}
.cf-mail a{color:var(--cf-ink);text-underline-offset:3px}

/* review */
.cf-summary{margin:0 0 8px}
.cf-summary:focus{outline:none}
.cf-sumgroup h2{margin:24px 0 4px;font:700 17px/1.3 var(--cf-font);letter-spacing:0;text-transform:none;color:var(--cf-ink)}
.cf-sumgroup dl{margin:0}
.cf-sumrow{display:grid;grid-template-columns:1fr auto;gap:0 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--cf-rule)}
.cf-sumrow dt{grid-column:1;font-size:15px;color:var(--cf-muted)}
.cf-sumrow dd{grid-column:1;margin:0;font-size:17px;overflow-wrap:anywhere;white-space:pre-line}
.cf-sumrow .cf-change{grid-column:2;grid-row:1/3}
.cf-turnstile{margin:24px 0 0;min-height:65px}
.cf-status{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:15px;color:var(--cf-muted)}
.cf-status-err{color:var(--cf-error)}

/* success */
.cf-done .cf-q,.cf-card .cf-q{font-size:40px;line-height:1.1}
.cf-glint{display:block;width:72px;height:2px;margin:0 0 24px;background:var(--cf-accent)}
.cf-subh{margin:28px 0 8px;font:700 17px/1.3 var(--cf-font);letter-spacing:0;text-transform:none}
.cf-next-list{margin:0 0 20px;padding-left:1.4em;font-size:17px;line-height:1.5}
.cf-next-list li{margin:8px 0;padding-left:4px}
.cf-next-list li::marker{color:var(--cf-accent);font-weight:700}
.cf-donelinks{display:flex;flex-wrap:wrap;gap:0 24px}
.cf-donelinks a{display:inline-flex;align-items:center;min-height:48px;color:var(--cf-ink);text-underline-offset:4px}

/* honeypot: off-screen, not display:none (bots skip display:none fields) */
.cf-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* the Contact router (inside the site layout) */
.cf-router{font-family:var(--cf-font);color:var(--cf-ink)}
.cf-router .cf-q{margin-bottom:20px}
.cf-router .cf-rows{max-width:640px}
.cf-go{margin-left:auto;display:grid;place-items:center;color:var(--cf-accent)}

/* desktop */
@media (min-width:1024px){
  .cf-page{--cf-pad:48px}
  .cf-top{height:88px}
  .cf-logo img{height:52px}
  .cf-main{padding-top:8px}
  .cf-grid{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:center;min-height:min(640px,80svh)}
  .cf-aside{display:block}
  .cf-aside picture,.cf-aside .cf-photo{display:block;width:100%;aspect-ratio:4/5;max-height:72svh;object-fit:cover}
  .cf-col{width:100%;margin:0}
  .cf-q{font-size:40px}
  .cf-done .cf-q,.cf-card .cf-q{font-size:48px}
}
.cf-facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin:20px 0 0;padding:0;list-style:none;font-size:15px;color:var(--cf-muted)}
.cf-facts li{display:flex;align-items:center;gap:10px}
.cf-facts li::before{content:"";width:6px;height:6px;background:var(--cf-accent)}

/* keyboard open on a short phone: drop the help line so question, field and button fit */
@media (max-height:700px){body.kb-open .cf-step>.cf-help{display:none}}
/* a very short viewport (a phone with the keyboard up): tighter, nothing resizes */
@media (max-height:560px){
  .cf-top{height:52px}
  .cf-logo img{height:30px}
  .cf-main{padding-top:4px}
  .cf-bar{margin-bottom:12px}
  .cf-q{font-size:26px;margin-bottom:8px}
  .cf-count{margin-bottom:4px}
  .cf-help{margin-bottom:10px;font-size:15px}
  .cf-actions{margin-top:16px}
}

/* motion: forward rises, back comes down, nothing slides sideways. Reduced motion = instant swaps. */
@media (prefers-reduced-motion:no-preference){
  .cf-in{animation:cf-rise .2s cubic-bezier(.2,.8,.2,1)}
  .cf-in-back{animation:cf-drop .2s cubic-bezier(.2,.8,.2,1)}
  .cf-out{animation:cf-fade-out .12s linear forwards}
  .cf-bar span{transition:transform .2s ease}
  .cf-done.cf-in .cf-q{animation:cf-fade-in .3s ease-out}
  .cf-glinting .cf-glint{animation:cf-glint .6s ease-out 1}
}
@keyframes cf-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cf-drop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes cf-fade-out{to{opacity:0}}
@keyframes cf-fade-in{from{opacity:0}to{opacity:1}}
@keyframes cf-glint{0%{opacity:.2;transform:scaleX(.2);transform-origin:left}60%{opacity:1}100%{opacity:1;transform:scaleX(1)}}