/* ==========================================================================
   /guide/ and /guide/thanks/ (src/pages_guide.py). Linked from those pages only.
   Colours and fonts come ONLY from the var(--c-*) and var(--f-*) roles in tokens.css.
   House rules as everywhere else: nothing under 17px, flat fills and thin rules, square-ish corners, no hover lift,
   no shadows, no gradients. Readers are 60 to 75, so type is big and every tap target is 48px or taller.
   The top and the bottom match /book (src/css/book.css): the logo alone, then the three legal links.
   ========================================================================== */

/* ---------------------------------------------------------------- top: the logo and nothing else */
.guide-head{background-color:var(--c-bg);border-bottom:2px solid var(--c-text)}
.guide-head .wrap{display:flex;justify-content:center;align-items:center;min-height:92px}
.guide-logo{display:inline-flex;align-items:center;text-decoration:none}
.guide-logo .lockup{height:54px;width:auto}

/* ---------------------------------------------------------------- the page: words and the form on the left, the cover on the right */
.guide-hero{padding:56px 0 84px}
.guide-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:start}
.guide-main h1{font-size:clamp(34px,4.4vw,56px);margin:0 0 18px}
.guide-sub{font-size:clamp(21px,2.2vw,25px);line-height:1.5;max-width:28em;margin:0 0 34px}

.guide-art img{width:100%;height:auto;border:1px solid var(--c-line);border-radius:var(--radius)}

/* ---------------------------------------------------------------- the form */
.guide-form{display:grid;gap:24px;max-width:520px}
.guide-field label{display:block;margin-bottom:8px;font:700 22px/1.3 var(--f-display)}
.guide-field input{display:block;width:100%;min-height:68px;padding:12px 16px;font:400 24px/1.3 var(--f-body);color:var(--c-text);
  background:var(--c-screen);border:2px solid var(--c-text);border-radius:var(--radius);caret-color:var(--c-cta);appearance:none}
.guide-field input[aria-invalid="true"]{border-color:var(--c-alert)}
.guide-error{margin:10px 0 0;font-size:19px;line-height:1.45;font-weight:700;color:var(--c-alert)}
.guide-form>.guide-error{margin:0}
.guide-trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.guide-consent{margin:0;font-size:19px;line-height:1.5}

/* the button, here and on the thanks page. The night colour on hover, no underline, no lift (Armen, 2026-10-13). */
.guide-submit{min-height:72px;width:100%;font-size:24px;cursor:pointer}
.guide-submit:hover:not(:disabled){background:var(--c-text);border-color:var(--c-text);color:var(--c-bg);text-decoration:none}
.guide-submit:disabled{cursor:progress}
.guide-download{max-width:520px}

/* ---------------------------------------------------------------- what is inside */
.guide-inside{margin-top:52px;padding:34px 0 0;border-top:1px solid var(--c-line);max-width:520px}   /* padding set in full: site.css gives every section 88px */
.guide-inside h2{font-size:clamp(26px,2.8vw,32px);margin:0 0 16px}
.guide-inside ul{padding-left:1.3em;font-size:21px;line-height:1.5}
.guide-inside li{margin:0 0 8px;padding-left:.2em}
.guide-inside li::marker{color:var(--c-accent)}

/* ---------------------------------------------------------------- bottom */
.guide-foot{padding:34px 0 30px}
.guide-foot .wrap{display:grid;gap:6px;justify-items:center;text-align:center}
.guide-foot p{margin:0;font-size:17px;line-height:1.55}

@media (max-width:860px){
  .guide-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .guide-art{max-width:520px}
}
@media (max-width:640px){
  .guide-head .wrap{min-height:80px}
  .guide-logo .lockup{height:48px}
  .guide-hero{padding:36px 0 56px}
  .guide-sub{margin-bottom:28px}
  .guide-submit{font-size:23px}
  .guide-inside{margin-top:40px;padding:28px 0 0}
}