/* hlw.css — How Language Works component layer (GH tokens).
   Loaded LAST. Holds: buttons, wordmark byline, footer CTA, and the
   interior-page component reskins (structure preserved from the old site,
   all colour/font/shadow/border values re-expressed via GH tokens). */

/* ---------- buttons — premium: filled terracotta primary + outline secondary ---------- */
.btn{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 30px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);border-radius:2px;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  transition:background .22s var(--ease-out),color .22s var(--ease-out),border-color .22s var(--ease-out),transform .22s var(--ease-out),box-shadow .22s var(--ease-out);}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 32%,transparent);
  background:color-mix(in srgb,var(--accent) 88%,#000);}
.btn:active{transform:translateY(0);box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 28%,transparent);}
/* solid = the filled primary (default above); btn-light alias kept */
.btn--solid,.btn.btn-light{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
/* ghost / outline secondary */
.btn--ghost,.btn.ghost{background:transparent;color:var(--text);border-color:var(--line-2);box-shadow:none;}
.btn--ghost:hover,.btn.ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);
  box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 14%,transparent);background:transparent;}

/* ---------- wordmark — single line "HOW LANGUAGE WORKS" + byline beneath ---------- */
.mark{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;transform:none;}
.mark__name{font-family:var(--wordmark);font-weight:500;font-size:19px;line-height:1;letter-spacing:.17em;
  text-transform:uppercase;color:var(--text);white-space:nowrap;transition:color .2s;}
.mark:hover .mark__name{color:var(--accent);}
.mark__by{font-family:var(--ui);font-size:8.5px;font-weight:600;letter-spacing:.36em;
  text-transform:uppercase;color:var(--accent);margin:0;text-align:center;}
/* small screens: shrink the one-line wordmark so it never crowds the burger */
@media (max-width:480px){
  .mark__name{font-size:15px;letter-spacing:.1em;}
  .mark__by{font-size:7px;letter-spacing:.3em;}
}
@media (max-width:340px){
  .mark__name{font-size:13.5px;letter-spacing:.08em;}
}
.foot__mark + .foot__by{display:block;}

/* ---------- footer CTA (HLW-only, precedes the GH .foot) ---------- */
.foot-cta{text-align:center;border-top:1px solid var(--line);}
.foot-cta .label{display:block;margin-bottom:18px;}
.foot-cta__title{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3.8rem);
  line-height:1.05;letter-spacing:-.015em;max-width:18ch;margin:0 auto 30px;}

/* ---------- interior page hero → reuse GH .ah-hero where possible ----------
   .page-hero.interior is kept; restyle to the centered ah-hero idiom. */
.page-hero.interior{display:grid;place-items:center;text-align:center;
  padding:clamp(120px,16vh,180px) var(--pad) clamp(48px,8vh,90px);background:var(--bg);}
.page-hero.interior::before,.page-hero.interior::after{display:none;}
.interior-copy{max-width:var(--maxw);margin:0 auto;}
.interior h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,72px);
  line-height:1.02;letter-spacing:-.022em;}
.interior-copy p:not(.eyebrow){font-family:var(--serif);font-size:clamp(18px,1.8vw,21px);
  line-height:1.55;color:var(--text-2);max-width:60ch;margin:18px auto 0;}

/* ---------- generic section heads + eyebrows ---------- */
.eyebrow,.hero-kicker,.section-number{font-family:var(--ui);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);}
.section-heading{max-width:var(--maxw);margin:0 auto clamp(40px,7vh,80px);text-align:center;}
.section-heading h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,56px);
  line-height:1.05;letter-spacing:-.02em;margin:14px 0 0;}
.section-heading p{font-family:var(--serif);color:var(--text-2);font-size:clamp(17px,1.6vw,20px);
  line-height:1.6;max-width:54ch;margin:18px auto 0;}

/* ---------- large statement / two-col body ---------- */
.large-statement{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,4.8vw,4.6rem);
  line-height:1.02;letter-spacing:-.02em;max-width:20ch;margin:24px 0 0;color:var(--text);}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:48px;
  font-family:var(--serif);font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.7;color:var(--text-2);}
.two-col em{font-style:italic;color:var(--text);}

/* ---------- rich text (legal + media + about bodies) ---------- */
.rich-text{max-width:64ch;margin-inline:auto;}
.rich-text h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.4vw,2.2rem);
  margin:38px 0 8px;letter-spacing:-.01em;}
.rich-text p,.rich-text li{font-family:var(--serif);font-size:1.0625rem;line-height:1.74;color:var(--text-2);}
.rich-text a:not(.btn),.media-card a:not(.btn),.contact-aside a:not(.btn),.text-link{color:var(--accent);}
.fineprint{font-size:.9rem;color:var(--text-3);}

/* ---------- theme deep rows (themes.html) ---------- */
.theme-row{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:56px minmax(0,320px) minmax(0,1fr);
  align-items:baseline;gap:30px;padding-block:38px;border-bottom:1px solid var(--line);}
.theme-row span{font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;}
.theme-row h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,3.2vw,3.2rem);line-height:1;margin:0;letter-spacing:-.018em;overflow-wrap:break-word;}
.theme-row p{font-family:var(--serif);margin:0;color:var(--text-2);font-size:1.1rem;line-height:1.6;}

/* ---------- pull quote ---------- */
.quote-section{text-align:center;background:var(--bg-2);}
.quote-mark{font-family:var(--serif);font-size:6.8rem;line-height:.4;color:var(--accent);}
.quote-section blockquote{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.1;max-width:24ch;margin:0 auto 24px;color:var(--text);letter-spacing:-.01em;}
.text-link{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;border-bottom:var(--hair) solid var(--hair-color);padding-bottom:4px;}
.text-link::after{content:"→";}

/* ---------- media grid + cards ---------- */
.media-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.media-card{min-height:240px;border:1px solid var(--line);background:var(--bg-2);padding:30px;display:flex;flex-direction:column;}
.media-card h2{font-family:var(--serif);font-weight:400;font-size:1.9rem;margin:0 0 16px;color:var(--text);}
.media-card p{font-family:var(--serif);color:var(--text-2);line-height:1.6;}
.media-card a{font-family:var(--ui);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:auto;overflow-wrap:anywhere;}

/* ---------- contact ---------- */
.contact-section{display:grid;grid-template-columns:minmax(0,720px) 360px;gap:48px;max-width:var(--maxw);margin:0 auto;}
.contact-form,.contact-aside,.contact-cta{border:1px solid var(--line);background:var(--bg-2);padding:34px;}
.contact-cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3.2rem);line-height:1.04;margin:14px 0 16px;letter-spacing:-.01em;}
.contact-cta p,.contact-aside p{font-family:var(--serif);color:var(--text-2);line-height:1.7;margin:0 0 22px;max-width:48ch;}
.contact-form label{font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);display:grid;gap:9px;}
input,textarea,select{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);
  padding:14px 16px;font:inherit;border-radius:0;outline:none;}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);}

/* ---------- contact form (fields, states, success) ---------- */
.contact-main{display:flex;flex-direction:column;}
.contact-form{display:flex;flex-direction:column;gap:18px;}
/* keep the [hidden] toggle working despite the display rule above */
.contact-form[hidden],.contact-form__done[hidden]{display:none;}
.contact-form .eyebrow{margin:0;}
.contact-form h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.6rem);
  line-height:1.05;margin:8px 0 2px;letter-spacing:-.01em;}
.contact-form__intro{font-family:var(--serif);color:var(--text-2);line-height:1.66;margin:0 0 6px;max-width:52ch;}
.contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.contact-form label{margin:0;}
.contact-form textarea{resize:vertical;min-height:132px;}
.contact-form select{cursor:pointer;}
.contact-form__honey{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}
.contact-form__submit{align-self:flex-start;margin-top:4px;}
.contact-form__submit:disabled{opacity:.6;cursor:progress;transform:none;box-shadow:none;}
.contact-form__status{font-family:var(--ui);font-size:.92rem;line-height:1.55;margin:0;color:var(--text-2);}
.contact-form__status.is-error{color:var(--accent);}
.contact-form__status a{color:var(--accent);}
.contact-form__done{border:1px solid var(--line);background:var(--bg-2);padding:34px;}
.contact-form__done .eyebrow{margin:0 0 8px;color:var(--accent);}
.contact-form__done h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3rem);
  line-height:1.04;margin:0 0 14px;letter-spacing:-.01em;}
.contact-form__done p{font-family:var(--serif);color:var(--text-2);line-height:1.7;margin:0;max-width:48ch;}
@media (max-width:520px){.contact-form__row{grid-template-columns:1fr;}}

/* ---------- FAQ ---------- */
.faq-stack,.mini-faq{max-width:880px;margin:0 auto;display:grid;gap:12px;}
.faq-stack details,.mini-faq details{border:1px solid var(--line);background:var(--bg-2);padding:0 24px;}
.faq-stack summary,.mini-faq summary{cursor:pointer;list-style:none;font-family:var(--serif);font-weight:400;
  font-size:1.4rem;padding:22px 0;color:var(--text);}
.faq-stack summary::-webkit-details-marker,.mini-faq summary::-webkit-details-marker{display:none;}
.faq-stack p,.mini-faq p{font-family:var(--serif);color:var(--text-2);line-height:1.62;margin:0 0 22px;}

/* ---------- chapter flow + reader grid (about.html) ---------- */
.chapter-flow{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.chapter-flow article{border:1px solid var(--line);background:var(--bg-2);padding:24px;}
.chapter-flow h3{font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1;margin:0 0 14px;color:var(--text);}
.chapter-flow p{font-family:var(--serif);color:var(--text-2);line-height:1.55;}
.reader-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.reader-grid p{font-family:var(--serif);margin:0;padding:26px;border:1px solid var(--line);background:var(--bg-2);color:var(--text-2);line-height:1.6;}

/* ---------- author page (author.html) ---------- */
.author-card{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:60px;align-items:center;
  border:1px solid var(--line);background:var(--bg-2);padding:48px;}
.author-card h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.02;margin:14px 0 16px;letter-spacing:-.015em;}
.author-card p{font-family:var(--serif);color:var(--text-2);line-height:1.66;}
.author-profile{display:grid;grid-template-columns:380px minmax(0,1fr);gap:64px;align-items:center;max-width:var(--maxw);margin:0 auto;}
.split-feature{display:grid;grid-template-columns:420px minmax(0,1fr);gap:64px;max-width:var(--maxw);margin:0 auto;}
.split-feature h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.02;letter-spacing:-.015em;}
.author-portrait{width:100%;max-width:320px;aspect-ratio:1;object-fit:cover;object-position:50% 35%;
  border-radius:50%;border:1px solid var(--line-2);background:var(--bg-2);margin:0 auto;display:block;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.4));}
.profile-book img{filter:drop-shadow(var(--shadow));}

/* ---------- responsive (interior) ---------- */
@media (max-width:980px){
  .media-grid,.chapter-flow,.reader-grid{grid-template-columns:1fr 1fr;}
  .contact-section,.author-card,.author-profile,.split-feature{grid-template-columns:1fr;gap:36px;}
  .two-col{grid-template-columns:1fr;gap:18px;}
  .theme-row{grid-template-columns:50px 1fr;gap:18px;}
  .theme-row p{grid-column:1/-1;}
  .author-card{padding:32px;}
}
@media (max-width:600px){
  .media-grid,.chapter-flow,.reader-grid{grid-template-columns:1fr;}
  .theme-row{grid-template-columns:1fr;padding:28px 0;}
}

/* =========================================================================
   PREMIUM POLISH PASS (warm)
   Site-wide refinements layered over the component reskin: warm selection +
   focus, card hover elevation, refined section heads, staggered reveals.
   ========================================================================= */

/* interior sections use bare .section (no .wrap), and GH's .section has no
   inline padding — give them side breathing room so content never touches the
   screen edge at narrow widths. Homepage sections are .section.wrap (excluded). */
.section:not(.wrap):not(.manifesto){padding-inline:var(--pad);}

/* warm text selection + accessible focus ring (replaces the removed legacy rules) */
::selection{background:color-mix(in srgb,var(--accent) 32%,transparent);color:var(--text);}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;}
.btn:focus-visible,.preorder-link:focus-visible{outline-offset:4px;}

/* refined section heads — a short accent hairline above the eyebrow for a printed feel */
.s-head .label,.section-heading p.eyebrow,.authors__intro .label{position:relative;}
.s-head{padding-bottom:clamp(26px,3.4vh,38px);}
.section-heading .eyebrow,.authors__intro .label{color:var(--accent);}

/* card surfaces — gentle hover elevation + warm accent edge */
.media-card,.chapter-flow article,.reader-grid p{
  transition:transform .28s var(--ease-out),border-color .28s var(--ease-out),
             background .28s var(--ease-out),box-shadow .28s var(--ease-out);}
.media-card:hover,.chapter-flow article:hover{
  transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  box-shadow:0 22px 50px rgba(0,0,0,.18);}
.media-card a:hover{color:var(--accent);}

/* FAQ disclosure — warm marker + smooth open affordance */
.faq-stack summary,.mini-faq summary{transition:color .2s var(--ease-out);position:relative;padding-right:34px;}
.faq-stack summary::after,.mini-faq summary::after{content:"+";position:absolute;right:4px;top:50%;
  transform:translateY(-50%);font-family:var(--ui);font-weight:400;color:var(--accent);font-size:1.4rem;
  transition:transform .25s var(--ease-out);}
.faq-stack details[open] summary::after,.mini-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq-stack summary:hover,.mini-faq summary:hover{color:var(--accent);}

/* deep-plum accent on the pull-mark + theme-row numerals for cover-matched depth */
.quote-mark{color:var(--accent);}
.theme-row span,.book__folio{color:var(--accent);}

@media (prefers-reduced-motion:reduce){
  .media-card,.chapter-flow article,.reader-grid p,.btn{transition:none;}
  .media-card:hover,.chapter-flow article:hover,
  .btn:hover,.btn--ghost:hover,.btn--solid:hover{transform:none;box-shadow:none;}
}

/* =========================================================================
   COOKIE CONSENT BANNER (injected by assets/js/consent.js)
   ========================================================================= */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:1400;
  background:var(--bg-2);border-top:1px solid var(--line);
  box-shadow:0 -16px 44px rgba(0,0,0,.22);
  transform:translateY(110%);transition:transform .5s var(--ease-out);
}
.cookie-banner.is-in{transform:translateY(0);}
.cookie-banner__in{
  max-width:var(--maxw);margin:0 auto;padding:18px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:16px 36px;flex-wrap:wrap;
}
.cookie-banner__text{
  font-family:var(--serif);font-size:clamp(.95rem,1vw,1.05rem);line-height:1.55;
  color:var(--text-2);margin:0;max-width:64ch;
}
.cookie-banner__text a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.cookie-banner__actions{display:flex;gap:12px;flex-shrink:0;}
.cookie-banner .btn{min-height:46px;padding:0 26px;}
/* button styled as inline text link (privacy "manage cookie preferences") */
button.text-link{background:none;border:0;cursor:pointer;font:inherit;}
@media (max-width:600px){
  .cookie-banner__in{flex-direction:column;align-items:stretch;gap:14px;}
  .cookie-banner__actions{justify-content:flex-end;}
}
@media (prefers-reduced-motion:reduce){
  .cookie-banner{transition:none;}
}