/* =============================================================
   AKU WORLD 2.0 · type roles and action hierarchy  ·  styles/v2-refine.css
   Approved direction (Micah, 2026-10-10). Loaded last, on every page whose
   <body> has the class "refine". Spec: TYPE_CTA_SPEC.md

   Same two families, one job each:
     Agrandir Grand Heavy (and Nostromo in cinematic titles) = look at this. Headlines only.
     Agrandir Bold, capitals, tracked                        = tap this. Every control.
     Agrandir Regular                                        = read this.
     Agrandir Medium                                         = facts and labels.

   Three levels of action:
     PRIMARY    .btn--action            filled in the world colour. One per section.
     SECONDARY  .btn--second            solid ink + arrow on light; white outline + arrow on dark art.
     TERTIARY   .more / .y-buy / .link  bold underlined text. No box.
   ============================================================= */

/* ---- where a secondary button sits decides how it is drawn ---- */
body.refine, .refine .mode-editorial, .refine .mode-handmade{ --read:var(--deep); --s-bg:var(--deep); --s-fg:#fff; --s-bd:var(--deep); --s-hbg:var(--galaxy); --s-hfg:#fff; --s-hbd:var(--galaxy); }
body.refine.mode-cinematic, .refine .mode-cinematic, .refine .hero, .refine .bk-hero, .refine .bk-crew, .refine .bk-close, .refine .y-world, .refine .edu-board, .refine .edu-sec--dark{ --read:#fff; --s-bg:transparent; --s-fg:#fff; --s-bd:#fff; --s-hbg:#fff; --s-hfg:var(--deep); --s-hbd:#fff; }
.refine .mode-cinematic .mode-editorial, .refine.mode-cinematic .mode-editorial, .refine.mode-cinematic .mode-handmade{ --read:var(--deep); --s-bg:var(--deep); --s-fg:#fff; --s-bd:var(--deep); --s-hbg:var(--galaxy); --s-hfg:#fff; --s-hbd:var(--galaxy); }

/* ---- TAP THIS: one voice for every control ---- */
.refine .btn, .refine .edu-pill, .refine .menu > summary, .refine .act-filters button, .refine .cards__nav button, .refine .order__store, .refine .order__tab, .refine .order__form-row button{
  font-family:var(--body); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.refine .btn{ font-size:15px; min-height:48px; padding:12px 22px; }
.refine .btn--small, .refine .menu > summary{ font-size:14px; min-height:44px; padding:10px 16px; }
.refine .edu-pill{ font-size:15px; letter-spacing:.05em; }
.refine .order__store{ font-size:14px; letter-spacing:.04em; } .refine .order__tab{ font-size:14px; letter-spacing:.03em; text-transform:none; }
.refine .order__tab span, .refine .order__tab em{ font-family:var(--body); letter-spacing:0; }

/* SECONDARY */
.refine .btn--second{ background:var(--s-bg); color:var(--s-fg); border-color:var(--s-bd); }
.refine .btn--second:hover, .refine .btn--second.is-hover{ background:var(--s-hbg); color:var(--s-hfg); border-color:var(--s-hbd); }
.refine .btn--second:not([data-share])::after{ content:"\2192"; font-family:var(--ui); font-weight:500; letter-spacing:0; }
.refine .btn--outline{ background:transparent; color:var(--deep); border-color:var(--deep); }
.refine .btn--outline:hover{ background:var(--deep); color:#fff; border-color:var(--deep); }

/* TERTIARY */
.refine .more, .refine .y-quiet{ font-family:var(--body); font-weight:700; font-size:17px; letter-spacing:0; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; border-bottom:0; }
.refine .more::after{ font-family:var(--ui); font-weight:500; }
.refine .y-acts .more, .refine .bk-close .more{ color:#fff; }
.refine .y-buy{ display:inline-flex; align-items:center; gap:8px; width:auto; min-height:44px; padding:0; border:0; background:none; color:var(--deep);
  font-family:var(--body); font-weight:700; font-size:17px; letter-spacing:0; text-transform:none; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
.refine .y-buy::after{ content:"\2192"; font-family:var(--ui); font-weight:500; }
.refine .y-book:hover .y-buy{ background:none; color:var(--galaxy); }
/* the whole cover card is one link to the ordering drawer: a clear focus ring for keyboards */
.refine .y-book{ border-radius:2px; }
.refine .y-book:focus-visible{ outline:3px solid var(--galaxy); outline-offset:8px; }
.refine .y-book:focus-visible .y-buy{ color:var(--galaxy); }

/* rows that open: control voice at reading size */
.refine .faq summary, .refine .fold > summary{ font-family:var(--body); font-weight:700; font-size:18px; line-height:1.3; letter-spacing:0; }

/* ---- FACTS AND LABELS ---- */
.refine .kicker, .refine .facts, .refine .hero .facts, .refine .navlink, .refine .y-world .where, .refine .switch__n, .refine .y-book .kicker .k2, .refine .edu-help, .refine .form-req{ font-family:var(--body); font-weight:500; letter-spacing:0; }
.refine .navlink{ font-size:16px; }
.refine .y-book .kicker b{ font-family:var(--body); font-weight:700; font-size:17px; }
.refine .edu-form label > .sr{ font-family:var(--body); font-weight:700; }

/* ---- READ THIS: reading text in full ink on light, white on dark ---- */
.refine .txt, .refine .lede, .refine .s-path p, .refine .s-origin p{ color:var(--read, var(--deep)); }
.refine .s-path p{ font-size:17px; line-height:1.55; margin:10px 0 0; }
.refine .s-path .h3{ font-size:clamp(1.2rem,1.75vw,1.5rem); line-height:1.15; letter-spacing:-.015em; }
.refine .s-path .btn{ margin-top:20px; align-self:flex-start; }

/* =============================================================
   DESKTOP and tablet
   ============================================================= */
@media (min-width:761px){
  /* Meet Aku: larger reading text, same composition */
  .refine .y-meet .txt{ font-size:19px; line-height:1.6; }
  .refine .y-credit{ font-size:16px; line-height:1.55; color:var(--muted); }
  .refine .hero .facts{ font-size:15px; } .refine .y-book .kicker .k2{ font-size:15px; }
}

/* =============================================================
   PHONES
   ============================================================= */
@media (max-width:760px){
  body.refine{ --t-body:17px; }

  /* look at this */
  .refine .h2{ font-size:26px; line-height:1.1; letter-spacing:-.02em; }
  .refine .h3{ font-size:20px; line-height:1.2; }
  .refine .s-origin__q{ font-size:32px; line-height:1.04; }
  .refine .s-path .h3{ font-size:22px; line-height:1.15; }

  /* read this */
  .refine .txt, .refine .lede, .refine .s-path p, .refine .s-origin p, .refine .y-world p.d, .refine .faq p, .refine .prose p, .refine .ab-story p, .refine .e-steps p, .refine .c-steps li, .refine .y-three p, .refine .bx-book p{ font-size:17px; line-height:1.55; }
  .refine .y-credit{ font-size:15px; line-height:1.5; color:var(--muted); }

  /* labels: never under 14px */
  .refine .kicker, .refine .facts, .refine .hero .facts, .refine .bk-hero .facts, .refine .y-world .where, .refine .switch__n, .refine .y-book .kicker .k2, .refine .site-foot__legal, .refine .edu-help, .refine .c-k, .refine .c-note, .refine .act-card b, .refine .act-kind a{ font-size:14px; }
  .refine .y-book .kicker b{ font-size:16px; }

  /* tap this */
  .refine .btn{ font-size:16px; min-height:54px; padding:15px 24px; }
  .refine .btn--small, .refine .menu > summary{ font-size:14px; min-height:44px; padding:10px 14px; }
  .refine .edu-pill{ font-size:15px; min-height:52px; }
  .refine .act-filters button{ font-size:14px !important; letter-spacing:.03em !important; }
  .refine .more, .refine .y-quiet{ font-size:16px; display:inline-flex; align-items:center; min-height:44px; }
  .refine .y-buy{ font-size:16px; min-height:48px; padding:6px 12px 6px 0; }
  .refine .y-book{ gap:6px; }
  .refine .faq summary, .refine .fold > summary{ font-size:17px; }
  /* a secondary button is as wide as its words, except where it pairs with a full-width primary on artwork */
  .refine .btn-row .btn--second, .refine .s-path .btn--second, .refine .sec .btn--second{ width:auto; align-self:flex-start; }
  .refine .hero .btn--second, .refine .bk-hero .btn--second, .refine .bk-close .btn--second{ width:100%; align-self:stretch; }

  /* rhythm on the homepage: same type, less air */
  .refine .hero ~ .sec{ padding-block:40px !important; }   /* homepage only */
  .refine .y-meet{ gap:26px; }
  .refine .y-credit{ margin-top:12px; }
  .refine .s-origin{ gap:22px; } .refine .s-origin p{ margin-top:12px; }
  .refine .s-origin .btn-row{ margin-top:16px !important; }
  .refine .s-paths{ gap:0; }
  .refine .s-path{ padding:20px 0 24px; border-top:2px solid var(--deep); }
  .refine .s-path p{ margin-top:8px; }
  .refine .s-path .btn{ margin-top:16px; }
}
/* every remaining disclosure row speaks in the control voice; notes never drop under 14px */
.refine main details > summary{ font-family:var(--body); font-weight:700; letter-spacing:0; }
.refine .act-answers p, .refine .act-answers small{ font-size:14px; }

@media (max-width:760px){ .refine .c-note{ font-size:15px; } }