/* Stacey Vanthuyne - R3 assessment page (assessment.html only). Loads after r3.css.
   Presentation only. The quiz script shows one .step at a time by toggling .active and builds
   each answer as <button class="opt"><span class="dot"></span><span>text</span></button>.
   Palette, type, buttons, header, footer, the .qpanel card and its .answers hairlines all come
   from r3.css; this sheet adds only what the quiz itself needs. The answer letters are CSS
   counters because the script emits an empty .dot span, not a letter. */

/* A step change jumps to the top of the page. The new question should appear in place,
   not glide past the old one, so the page's smooth scrolling is off here. */
html{scroll-behavior:auto}

/* ---------- steps: only the active one shows ---------- */
.step{display:none}
.step.active{display:block}

/* ---------- intro: one frame, the photograph bleeding off the right edge, no frame and no fade ---------- */
.intro.active{display:flex;align-items:center;position:relative;min-height:calc(100svh - var(--hdr));padding:clamp(40px,6vw,88px) 0 clamp(56px,7vw,96px);overflow:hidden}
.intro .wrap{position:relative;z-index:1}
.intro-copy{width:min(620px,54%)}
.intro h1{margin:0 0 .5em}   /* the shared hero size (r3.css), like every page */
@media (max-width:640px){.intro h1{font-size:clamp(2.9rem,13.5vw,3.6rem);letter-spacing:-.02em}}
.intro .lead{max-width:40ch;margin-bottom:0}
.intro .row{margin:1.2rem 0 1.8rem}
.intro-photo{position:absolute;top:0;right:0;bottom:0;width:42%;z-index:0}
.intro-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
/* the home page's arrival, reused: the photograph settles, the copy rises in sequence; off under reduced motion via r3.css */
.js .intro-photo{animation:settle 1200ms var(--ease-out) both}
.js .intro-copy>*{animation:rise 700ms var(--ease-out) both}
.js .intro-copy>:nth-child(1){animation-delay:120ms}
.js .intro-copy>:nth-child(2){animation-delay:220ms}
.js .intro-copy>:nth-child(3){animation-delay:360ms}
.js .intro-copy>:nth-child(4){animation-delay:460ms}
.js .intro-copy>:nth-child(5){animation-delay:560ms}

/* ---------- the quiz column ---------- */
.stage{width:min(820px,calc(100% - 2*var(--gutter)));margin-inline:auto}
.stage>.step.active{min-height:calc(100svh - var(--hdr));padding:clamp(24px,4vw,56px) 0 clamp(64px,9vw,112px);animation:rise var(--medium) var(--ease-out) both}

/* ---------- the question card: the home page's panel with a quiet progress ruler on top ---------- */
.qprog{margin:0 0 1.5rem}
.qprog .qk{margin-bottom:.7rem}
.qbar{height:2px;background:rgba(44,44,44,.14)}
.qbar .fill{width:0;height:100%;background:var(--gold);transition:width var(--medium) var(--ease-io)}
.qhelp{font-size:1.0625rem;color:var(--char);max-width:56ch;margin:-.4rem 0 1.4rem}

/* answers: the home page's rows, as buttons. One tap answers and moves on; the press shows the dark fill. */
.answers{counter-reset:opt}
.answers .opt{counter-increment:opt;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:1rem;align-items:start;width:100%;min-height:56px;margin:0;padding:.8rem .6rem .8rem .4rem;border:0;border-bottom:1px solid rgba(44,44,44,.14);border-radius:0;background:transparent;color:var(--ink-text);font:400 1.0625rem/1.5 var(--body);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--base) var(--ease-io),color var(--base) var(--ease-io);animation:rise var(--medium) var(--ease-out) both}
.answers .opt:hover,.answers .opt:focus-visible{background:rgba(184,146,74,.14)}
.answers .opt:active{background:var(--ink);color:var(--cream)}
.answers .dot{font:500 1.0625rem/1.5 var(--label);color:var(--char);letter-spacing:.02em}
.answers .dot::before{content:counter(opt,upper-alpha)}
.answers .opt:active .dot{color:var(--gold)}

/* back (the script shows it from question 2 on): the system's text link, as a button */
.qback{margin-top:1.4rem;border:0;background:transparent;cursor:pointer}

/* ---------- the reveal and the full reflection ---------- */
.readout{padding-bottom:clamp(28px,3.4vw,44px);border-radius:2px 2px 0 0}
.readout .pat-name{margin:.2rem 0 1.4rem}
.pat-block{margin-top:1.6rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.pat-h{font-size:clamp(1.5rem,2vw,1.85rem);line-height:1.3;margin:0 0 .6rem}
.pat-body{max-width:58ch;margin:0}
.secondary-tag{font:500 clamp(1.9rem,2.4vw,2.5rem)/1.15 var(--display);letter-spacing:0;color:var(--ink-text);margin:0}

/* the gate and the coda: the one dark surface on each step, flush under the card, so the next move is unmistakable */
.gate,.coda{padding:clamp(28px,3.6vw,48px) clamp(24px,3vw,40px) clamp(28px,3.4vw,44px);border-radius:0 0 2px 2px}
.gate h3{max-width:30ch;margin:0 0 .8rem}
.gate p{max-width:52ch}
.gate-form{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.gate .field{flex:1 1 220px;min-width:0;min-height:56px;padding:0 1.2rem;border-radius:2px;border:1px solid rgba(245,240,232,.4);background:transparent;color:var(--cream);font:400 1.0625rem var(--body)}
.gate .field::placeholder{color:rgba(245,240,232,.6)}
.gate .field:focus-visible{outline-offset:0}
.gate .btn[disabled]{opacity:.7;cursor:progress}
.gate .fine{font-size:1rem;color:var(--on-dark-2);margin:1.1rem 0 0}
.coda .close-note{margin:0 0 1.6rem;max-width:40ch}
.coda .closer{color:var(--cream);margin:0 0 1.6rem}
.rcta-btns{display:flex;flex-wrap:wrap;gap:.9rem}
.coda .quiet{margin-top:1.2rem;color:var(--on-dark)}
.coda .quiet:hover{color:var(--cream)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .intro.active{display:block;min-height:0;padding:0 0 clamp(48px,7vw,80px)}
  .intro-photo{position:relative;width:100%;height:clamp(220px,32svh,320px)}
  .intro-copy{width:auto;padding-top:clamp(28px,5vw,44px)}
}
@media (max-width:640px){
  .intro .btn,.gate .btn,.rcta-btns .btn{width:100%}
  .gate,.coda{margin:0 calc(-1*var(--gutter));border-radius:0;padding:28px var(--gutter) 32px}
  .gate-form{flex-direction:column}
  .gate .field{flex:0 0 auto}
}

/* ---------- the intro is dark (the header's own ink, so the two read as one field) and type only ----------
   With no photograph it is a title card: centred, like the question column that follows, and a full screen at every width. */
.intro.dark{background:var(--ink)}
.intro.dark h1{color:var(--cream)}
.intro.dark .intro-copy{width:min(760px,100%);margin-inline:auto;text-align:center}
.intro.dark .intro-copy>*{margin-left:auto;margin-right:auto}   /* the kicker and the lead carry their own max-width */
.intro.dark .row{justify-content:center}
@media (max-width:900px){
  .intro.active.dark{display:flex;align-items:center;min-height:calc(100svh - var(--hdr));padding:clamp(40px,8vw,64px) 0}
  .intro.dark .intro-copy{padding-top:0}
}

/* ---------- reviewer fixes (2026-10-06) ---------- */
/* this page is the assessment: the header's own Take the Assessment would restart it mid-quiz */
.assess-page .nav-cta .btn-gold{display:none}
/* the intro is a dark top: no gold rule across the black */
body:has(#stepIntro.active) .site-header::after{opacity:0}
/* the question card sits in the middle of the screen, not at the top over empty cream */
.stage>#stepQ.active{display:flex;flex-direction:column;justify-content:center}
.intro .lead{text-wrap:balance}
@media (max-width:640px){
  /* one gold line under the header, not two with a cream strip between them */
  .stage>.step.active{padding-block:0}
  .stage .qpanel{border-top:0}
}

/* K15: the intro's near-black eases into the footer's brown over its last third, so the two darks never meet in a line */
.assess-page .step.intro.dark{background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 62%,rgba(45,37,31,.25) 76%,rgba(45,37,31,.6) 88%,rgba(45,37,31,.88) 96%,rgb(45,37,31) 100%),var(--ink)}