/* ==========================================================================
   Advertorial design system
   --------------------------------------------------------------------------
   Colour (WCAG 2.x contrast):
     --ink    #2E382E  text, headings, footer      12.2:1 on white
     --blue   #72A1E5  buttons, selected states     4.6:1 with ink text
     --lav    #9883E5  accents, markers (never small text)   3.1:1 on white
     --pink   #FCD3DE  Advertisement chip + quiz band        9.0:1 with ink text
   Type:   Manrope 600/700/800 (headings, UI) + Source Sans 3 (text)
   Scale:  base 18px/1.65; h1 clamp 34-62px; h2 clamp 28-40px; h3 20-22px
   Space:  4 8 12 16 24 32 48 64 96 128 (px)
   Grid:   max 1200px, 12 columns from 900px, one column below
   Measure: reading column 66ch
   ========================================================================== */

@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/manrope-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/manrope-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/manrope-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2")}

:root{
  --white:#FFFFFF;
  --ink:#2E382E;
  --blue:#72A1E5;
  --blue-hover:#8FB5EC;
  --blue-active:#A7C5F0;
  --lav:#9883E5;
  --pink:#FCD3DE;
  --line:rgba(46,56,46,.22);

  --font-head:"Manrope","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-text:"Source Sans 3","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --gutter:clamp(20px,5vw,48px);
  --maxw:1200px;
  --measure:66ch;
  --radius:6px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-text);font-size:1.125rem;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
p,ul,ol,dl,figure,address,fieldset{margin:0}
fieldset{padding:0;border:0;min-width:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);margin:0;overflow-wrap:break-word;hyphens:manual}

:focus{outline:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible{outline-color:var(--white)}

.skip-link{position:absolute;left:var(--s-4);top:-80px;z-index:100;background:var(--ink);color:var(--white);padding:var(--s-3) var(--s-4);border-radius:var(--radius);font-family:var(--font-head);font-weight:700;text-decoration:none}
.skip-link:focus{top:var(--s-3)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.container{width:100%;max-width:calc(var(--maxw) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;padding:12px 24px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--blue);color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:1rem;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s ease,transform .1s ease}
.btn:hover{background:var(--blue-hover)}
.btn:active{background:var(--blue-active);transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--white);color:rgba(46,56,46,.55);border-color:rgba(46,56,46,.35);cursor:not-allowed;transform:none}
.btn--small{min-height:44px;padding:10px 18px;font-size:.9375rem}
.btn--large{min-height:56px;padding:16px 32px;font-size:1.0625rem}
.btn--ghost{background:var(--white)}
.btn--ghost:hover{background:var(--pink)}
.btn--ghost:active{background:#F9BFD0}
.btn .arrow{width:1.1em;height:1.1em;flex:none}
.text-link{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.text-link:hover{text-decoration-thickness:2px}

/* ---------- Header ---------- */
.site-header{background:var(--white);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:68px;padding-block:var(--s-2)}
.site-header__left{display:flex;align-items:center;gap:var(--s-4);min-width:0;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:var(--s-3);font-family:var(--font-head);font-weight:800;font-size:1.125rem;letter-spacing:-.01em;text-decoration:none;line-height:1.15;min-height:44px}
.brand__mark{width:28px;height:28px;flex:none;color:var(--ink)}
.brand__name{display:block;overflow-wrap:anywhere}
.ad-chip{display:inline-block;padding:4px 10px;background:var(--pink);border:1px solid var(--ink);border-radius:3px;font-family:var(--font-head);font-weight:800;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;white-space:nowrap}
.site-header__right{display:flex;align-items:center;gap:var(--s-5)}
.header-link{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-head);font-weight:600;font-size:.9375rem;text-decoration:none;border-bottom:2px solid transparent}
.header-link:hover{border-bottom-color:var(--lav)}
.header-link[aria-current="page"]{border-bottom-color:var(--blue)}
@media (max-width:719px){
  .site-header__right{display:none}
  .site-header__inner{justify-content:space-between}
}

/* ---------- Hero ---------- */
.hero{padding-block:var(--s-6) var(--s-8)}
.hero__grid{display:grid;grid-template-columns:1fr;gap:var(--s-6);align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:var(--s-5);min-width:0}
.hero h1{font-weight:800;font-size:clamp(2.125rem,1.35rem + 3.6vw,3.875rem);line-height:1.08;letter-spacing:-.025em}
.hero__sub{font-family:var(--font-head);font-weight:600;font-size:clamp(1.125rem,1.02rem + .5vw,1.4375rem);line-height:1.4;letter-spacing:-.01em;max-width:30em}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-5)}
.hero__figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:var(--radius)}
.figcap{margin-top:var(--s-2);font-size:.9375rem;line-height:1.45}
@media (min-width:900px){
  .hero{padding-block:var(--s-8) var(--s-9)}
  .hero__grid{grid-template-columns:repeat(12,1fr);gap:var(--s-7)}
  .hero__copy{grid-column:1 / span 7}
  .hero__figure{grid-column:8 / span 5}
}

/* ---------- Sections ---------- */
.section{padding-block:var(--s-8)}
@media (min-width:900px){.section{padding-block:var(--s-9)}}
.section--rule{border-top:1px solid var(--line)}
.eyebrow{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);font-family:var(--font-head);font-weight:700;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:4px;background:var(--lav);border-radius:2px;flex:none}
h2{font-weight:800;font-size:clamp(1.75rem,1.3rem + 1.8vw,2.5rem);line-height:1.15;letter-spacing:-.02em}
h3{font-weight:700;font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
.prose{max-width:var(--measure)}
.prose>*+*{margin-top:var(--s-4)}
.prose h2+*{margin-top:var(--s-5)}
.prose h3{margin-top:var(--s-6)}
.lede{font-size:1.25rem;line-height:1.55}
.lede--big{font-family:var(--font-head);font-weight:600;font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem);line-height:1.4;letter-spacing:-.01em}

.split{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
@media (min-width:900px){
  .split{grid-template-columns:repeat(12,1fr);gap:var(--s-7);align-items:start}
  .split__text{grid-column:1 / span 7}
  .split__media{grid-column:9 / span 4}
  .split--reverse .split__media{grid-column:1 / span 5;grid-row:1}
  .split--reverse .split__text{grid-column:7 / span 6;grid-row:1}
  .sticky{position:sticky;top:var(--s-6)}
}
.photo{width:100%;border-radius:var(--radius);object-fit:cover}
.photo--45{aspect-ratio:4/5}
.photo--32{aspect-ratio:3/2}
.photo--11{aspect-ratio:1/1}
.photo--219{aspect-ratio:21/9}
@media (max-width:599px){.photo--219{aspect-ratio:16/9}}
.wide-figure{margin-top:var(--s-7)}
.pull{margin-top:var(--s-6);padding:var(--s-2) 0 var(--s-2) var(--s-5);border-left:4px solid var(--lav);font-family:var(--font-head);font-weight:700;font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem);line-height:1.35;letter-spacing:-.01em;max-width:30em}

/* ---------- Frame types ---------- */
.types{margin-top:var(--s-7);display:grid;gap:var(--s-8)}
.type{display:grid;grid-template-columns:1fr;gap:var(--s-5);align-items:center}
.type__media img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius)}
.type__num{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:32px;padding:0 var(--s-3);margin-bottom:var(--s-3);border:1px solid var(--ink);border-radius:3px;font-family:var(--font-head);font-weight:800;font-size:.875rem;letter-spacing:.06em}
.type h3{font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);font-weight:800;letter-spacing:-.015em;line-height:1.2}
.type__tag{margin-top:var(--s-2);font-family:var(--font-head);font-weight:700;font-size:1rem;line-height:1.35}
.type p+p{margin-top:var(--s-3)}
.type__body{max-width:34em}
.type__try{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line);font-size:1.0625rem}
.type__try strong{font-family:var(--font-head);font-weight:700}
@media (min-width:900px){
  .type{grid-template-columns:repeat(12,1fr);gap:var(--s-7)}
  .type__media{grid-column:1 / span 5}
  .type__body{grid-column:7 / span 6}
  .type:nth-child(even) .type__media{grid-column:8 / span 5;grid-row:1}
  .type:nth-child(even) .type__body{grid-column:1 / span 6;grid-row:1}
}

/* ---------- Starting points ---------- */
.starts{margin-top:var(--s-6);border-top:2px solid var(--ink)}
.starts__row{display:grid;grid-template-columns:1fr;gap:var(--s-2);padding-block:var(--s-4);border-bottom:1px solid var(--line)}
.starts dt{font-family:var(--font-head);font-weight:700;font-size:1.0625rem;line-height:1.35}
.starts dd{margin:0}
@media (min-width:700px){.starts__row{grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:var(--s-6)}}

/* ---------- Quiz ---------- */
.quiz-band{background:var(--pink);border-block:1px solid var(--ink)}
.quiz-head{max-width:var(--measure)}
.quiz-head>*+*{margin-top:var(--s-4)}
.quiz{margin-top:var(--s-6);background:var(--white);border:1px solid var(--ink);border-radius:var(--radius);padding:var(--s-5);max-width:860px}
@media (min-width:700px){.quiz{padding:var(--s-7)}}
.quiz__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-3);font-family:var(--font-head);font-weight:700;font-size:.9375rem}
.quiz__bar{height:10px;border:1px solid var(--ink);border-radius:5px;background:var(--white);overflow:hidden;margin-bottom:var(--s-6)}
.quiz__bar-fill{display:block;height:100%;width:0;background:var(--blue);transition:width .25s ease}
.quiz__q{font-family:var(--font-head);font-weight:800;font-size:clamp(1.375rem,1.2rem + .9vw,1.875rem);line-height:1.25;letter-spacing:-.015em;margin-bottom:var(--s-5);padding:0;float:left;width:100%}
.quiz__q+*{clear:both}
.quiz__q:focus{outline:none}
.quiz__options{display:grid;gap:var(--s-3)}
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.opt__box{display:flex;align-items:center;gap:var(--s-4);min-height:64px;padding:var(--s-3) var(--s-4);border:1px solid var(--ink);border-radius:var(--radius);background:var(--white);font-family:var(--font-head);font-weight:600;font-size:1.0625rem;line-height:1.35;transition:background-color .15s ease}
.opt__dot{flex:none;width:24px;height:24px;border:2px solid var(--ink);border-radius:50%;background:var(--white);position:relative}
.opt:hover .opt__box{background:var(--pink)}
.opt input:checked + .opt__box{background:var(--blue);font-weight:700}
.opt input:checked + .opt__box .opt__dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--ink)}
.opt input:focus-visible + .opt__box{outline:3px solid var(--ink);outline-offset:3px}
.opt:active .opt__box{background:var(--blue-active)}
.quiz__nav{display:flex;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-6);flex-wrap:wrap}
.quiz__note{margin-top:var(--s-5);font-size:1rem;line-height:1.5}
.quiz__noscript{padding:var(--s-4);border:1px solid var(--ink);border-radius:var(--radius)}

.result__label{display:inline-block;margin-bottom:var(--s-3);font-family:var(--font-head);font-weight:800;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase}
.result h3{font-weight:800;font-size:clamp(1.75rem,1.4rem + 1.6vw,2.5rem);letter-spacing:-.02em;line-height:1.1}
.result h3:focus{outline:none}
.result__why{margin-top:var(--s-4);font-size:1.125rem;max-width:36em}
.result__intro{margin-top:var(--s-3);max-width:36em}
.dirs{margin-top:var(--s-5);display:grid;gap:var(--s-4)}
.dir{display:grid;grid-template-columns:96px 1fr;gap:var(--s-4);align-items:center;padding:var(--s-3);border:1px solid var(--line);border-radius:var(--radius)}
.dir img{width:96px;height:96px;object-fit:cover;border-radius:4px}
.dir h4{font-size:1.0625rem;font-weight:800;line-height:1.3;margin-bottom:2px}
.dir p{font-size:1rem;line-height:1.5}
.dir.dir--text{grid-template-columns:1fr}
@media (max-width:479px){.dir:not(.dir--text){grid-template-columns:72px 1fr}.dir img{width:72px;height:72px}}
.result__actions{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);margin-top:var(--s-6)}

/* ---------- Lenses ---------- */
.lens-q{margin-top:var(--s-6);display:grid;gap:var(--s-5)}
.lens-q__item{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);padding-top:var(--s-5);border-top:1px solid var(--line)}
.lens-q__item h3{font-size:1.1875rem;margin-bottom:var(--s-1)}
.lens-q__item p+p{margin-top:var(--s-2)}
.num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--lav);color:var(--ink);font-family:var(--font-head);font-weight:800;font-size:1.25rem;line-height:1}
.note{margin-top:var(--s-5);padding-left:var(--s-4);border-left:4px solid var(--lav);font-size:1rem;line-height:1.55}
.ask-list{margin-top:var(--s-4);display:grid;gap:var(--s-3)}
.ask-list li{position:relative;padding-left:var(--s-5)}
.ask-list li::before{content:"";position:absolute;left:0;top:.75em;width:12px;height:4px;background:var(--lav);border-radius:2px}

/* ---------- Final ---------- */
.final{border-top:1px solid var(--ink)}
.final__grid{display:grid;grid-template-columns:1fr;gap:var(--s-6);align-items:center}
@media (min-width:900px){.final__grid{grid-template-columns:repeat(12,1fr);gap:var(--s-7)}.final__copy{grid-column:1 / span 6}.final__media{grid-column:8 / span 5}}
.final__copy>*+*{margin-top:var(--s-5)}
.final__small{font-size:1rem;line-height:1.55}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--white);padding-block:var(--s-8) var(--s-6)}
.site-footer a{color:var(--white)}
.site-footer__grid{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
@media (min-width:900px){.site-footer__grid{grid-template-columns:repeat(12,1fr);gap:var(--s-7)}.site-footer__brand{grid-column:1 / span 4}.site-footer__notes{grid-column:6 / span 7}}
.site-footer .brand{color:var(--white)}
.site-footer .brand__mark{color:var(--white)}
.site-footer__intro{margin-top:var(--s-4);font-size:1rem;line-height:1.6;max-width:36em}
.site-footer h3{color:var(--white);font-size:1rem;margin-bottom:var(--s-2)}
.site-footer__notes>div+div{margin-top:var(--s-5)}
.site-footer__notes p{font-size:1rem;line-height:1.6}
.site-footer__bottom{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.3);display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);justify-content:space-between;font-size:1rem}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-5)}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.footer-links a:hover{text-decoration-thickness:2px;color:var(--blue)}

/* ---------- Document pages ---------- */
.doc{padding-block:var(--s-7) var(--s-9)}
.doc__inner{max-width:760px}
.doc h1{font-weight:800;font-size:clamp(2rem,1.4rem + 2.6vw,3rem);line-height:1.1;letter-spacing:-.02em;margin-bottom:var(--s-4)}
.doc .meta{font-size:1rem;margin-bottom:var(--s-6);padding-bottom:var(--s-5);border-bottom:1px solid var(--line)}
.doc h2{font-size:1.5rem;margin-top:var(--s-7);margin-bottom:var(--s-3);letter-spacing:-.015em}
.doc h3{font-size:1.125rem;margin-top:var(--s-5);margin-bottom:var(--s-2)}
.doc p+p{margin-top:var(--s-4)}
.doc a{text-decoration:underline;text-underline-offset:3px}
.back-link{display:inline-flex;align-items:center;min-height:44px;margin-bottom:var(--s-4);font-family:var(--font-head);font-weight:700;font-size:.9375rem;text-decoration:none}
.back-link:hover{text-decoration:underline}
.contact-card{border:1px solid var(--ink);border-radius:var(--radius);padding:var(--s-6);margin-top:var(--s-5)}
.contact-card h2{margin-top:0;font-size:1.375rem}
.contact-card address{font-style:normal;line-height:1.7}
.contact-card dl{margin-top:var(--s-5);display:grid;gap:var(--s-3)}
.contact-card dl>div{display:grid;grid-template-columns:7.5rem 1fr;gap:var(--s-3);align-items:baseline;padding-top:var(--s-3);border-top:1px solid var(--line)}
.contact-card dt{font-family:var(--font-head);font-weight:700;font-size:.9375rem}
.contact-card dd{margin:0;overflow-wrap:anywhere}
@media (max-width:479px){.contact-card dl>div{grid-template-columns:1fr;gap:0}}

@media print{.site-header,.skip-link{display:none}body{font-size:12pt}}