/* Pages: the simple inner pages (About, Blog index, blog articles). First design 2026-11-03.
   Shared pieces come from nav, button, pill, hero (.h1/.desc/.ctas), stats and contact.
   .pg-* = shared page rhythm, .ab-* = About, .bl-* = Blog. */

/* section rhythm, same as the Content Engine page */
.pg{padding:calc(120 * var(--u) + 24px) var(--pad-x)}
.pg-kick{font:var(--eb-font);letter-spacing:-.01em;color:var(--ink-2)}
.pg h2{margin-top:16px;font-family:var(--xh);font-weight:var(--fw);font-size:var(--fs-display);line-height:1.1;letter-spacing:var(--ls);max-width:12em;text-wrap:balance}
.pg-lead{margin-top:calc(24 * var(--u) + 8px);max-width:28em;font-size:var(--fs-body-l);line-height:1.4;color:var(--ink-2)}
.pg-head{display:grid;grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);column-gap:calc(80 * var(--u));align-items:end}
.pg-head .pg-lead{margin-top:0}

/* hero: the home hero type, in normal flow */
.pg-hero{padding:max(calc(250 * var(--u)), 170px) var(--pad-x) calc(60 * var(--u) + 16px);text-align:center}
.pg-hero .pg-kick{color:var(--ink)}
.pg-hero .h1{margin:calc(20 * var(--u) + 8px) auto 0;max-width:14em}
.pg-hero .desc{max-width:34em}
.pg-hero.s .h1{max-width:16em;font-size:var(--fs-xl)}   /* article title: one size up, long titles wrap to three lines */
.pg-hero.s .desc{max-width:36em;color:var(--ink-2)}

/* contact on these pages sits in normal flow */
.pg-page .prc.ct{min-height:0;padding-top:calc(60 * var(--u) + 20px)}

/* ---------- About ---------- */
/* three disciplines, white tiles */
.ab-grid{list-style:none;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:calc(12 * var(--u) + 4px);margin-top:calc(64 * var(--u) + 16px)}
.ab-tile{display:grid;grid-template-rows:auto calc(80 * var(--u) + 24px) auto 1fr;min-height:max(260px, calc(320 * var(--u)));padding:calc(20 * var(--u) + 10px);border-radius:8px;background:var(--white)}
.ab-tile small{font-family:var(--mono);font-size:var(--fs-caption);line-height:1.4;color:var(--ink-2)}
.ab-tile h3{grid-row:3;font-family:var(--xh);font-weight:var(--fw);font-size:var(--fs-h4);line-height:1.32}
.ab-tile p{grid-row:4;margin-top:12px;font-size:var(--fs-body);line-height:1.4;color:var(--ink-2);text-wrap:pretty}
.ab-tile.hu{background:var(--green)}
.ab-tile.hu small{color:var(--ink);opacity:.6}
.ab-tile.hu p{color:var(--ink);opacity:.72}

/* ---------- Blog ---------- */
.bl-meta{font-family:var(--mono);font-size:var(--fs-caption);line-height:1.4;color:var(--ink-2)}
.bl-meta i{font-style:normal;padding:0 .5em}

/* index: cards, two to a row */
.bl-list{list-style:none;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:calc(12 * var(--u) + 4px);margin-top:calc(64 * var(--u) + 16px)}
.bl-card{display:flex;flex-direction:column;min-height:max(280px, calc(380 * var(--u)));padding:calc(28 * var(--u) + 12px);border-radius:8px;background:var(--white);color:var(--ink);transition:background .3s,color .3s}
.bl-card h2{margin-top:calc(40 * var(--u) + 16px);max-width:none;font-size:var(--fs-h3);line-height:1.16}
.bl-card p{margin-top:14px;max-width:28em;font-size:var(--fs-body);line-height:1.4;color:var(--ink-2);text-wrap:pretty}
.bl-card .more{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:calc(32 * var(--u) + 12px);font-family:var(--mono);font-size:var(--fs-caption)}
.bl-card .more i{font-style:normal;transition:transform .4s var(--ease-out)}
.bl-card:hover{background:var(--ink);color:var(--paper)}
.bl-card:hover p,.bl-card:hover .bl-meta{color:var(--mist)}
.bl-card:hover .more i{transform:translateX(6px)}

/* article: one reading column; from 1280 up a floating table of contents on the left and a booking card on the right */
.bl-art{padding-top:calc(40 * var(--u) + 16px);font-size:var(--fs-body-l)}
.bl-prose{max-width:38em;margin:0 auto;font-size:var(--fs-body-l);line-height:1.5}
.bl-toc{max-width:38em;margin:0 auto calc(40 * var(--u) + 16px)}
.bl-toc ol{list-style:none;margin-top:calc(12 * var(--u) + 6px);display:grid;gap:4px}
.bl-toc a{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:var(--fs-body);line-height:1.3;color:var(--ink-2);transition:color .3s}
.bl-toc a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:transparent;box-shadow:0 0 0 1px rgba(32,29,29,.3);transition:background .3s,box-shadow .3s}
.bl-toc a:hover{color:var(--ink)}
.bl-toc a.on{color:var(--ink)}
.bl-toc a.on::before{background:var(--green);box-shadow:none}
.bl-side{display:none}
.bl-book{display:grid;padding:calc(24 * var(--u) + 10px);border-radius:8px;background:var(--white)}
.bl-book h3{margin-top:calc(12 * var(--u) + 6px);font-family:var(--xh);font-weight:var(--fw);font-size:var(--fs-h4);line-height:1.3;letter-spacing:var(--ls)}
.bl-book p+p,.bl-book h3+p{margin-top:10px;font-size:var(--fs-body);line-height:1.4;color:var(--ink-2);text-wrap:pretty}
.bl-book .btn{justify-content:space-between;width:100%;margin-top:calc(16 * var(--u) + 8px)}
.bl-book small{margin-top:12px;font-family:var(--mono);font-size:var(--fs-caption-s);color:var(--ink-2)}
@media (min-width:1280px){
  .bl-art{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 38em) minmax(0, 1fr);column-gap:calc(48 * var(--u))}
  .bl-toc{grid-column:1;grid-row:1;align-self:start;position:sticky;top:calc(100 * var(--n) + 32px);max-width:16em;margin:0}
  .bl-prose{grid-column:2;grid-row:1;max-width:none}
  .bl-side{display:block;grid-column:3;grid-row:1;align-self:start;position:sticky;top:calc(100 * var(--n) + 32px);justify-self:end;width:min(100%, 16em)}
  .bl-foot{grid-column:2;max-width:none}
}
.bl-prose>*+*{margin-top:1.1em}
.bl-prose h2{margin-top:2em;max-width:none;font-size:var(--fs-h3);line-height:1.16}
.bl-prose h3{margin-top:1.6em;font-family:var(--xh);font-weight:var(--fw);font-size:var(--fs-h4);line-height:1.32}
.bl-prose h2+p,.bl-prose h3+p{margin-top:.6em}
.bl-prose ul,.bl-prose ol{padding-left:1.3em}
.bl-prose li+li{margin-top:.45em}
.bl-prose li::marker{color:var(--ink-2)}
.bl-prose b{font-weight:var(--fw)}
.bl-prose a{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px;text-decoration-color:rgba(32,29,29,.4);transition:text-decoration-color .3s}
.bl-prose a:hover{text-decoration-color:currentColor}
/* key terms: a white card with a definition list */
.bl-box{margin-top:2em;padding:calc(28 * var(--u) + 12px);border-radius:8px;background:var(--white)}
.bl-box .pg-kick{color:var(--ink)}
.bl-box dl{display:grid;gap:calc(16 * var(--u) + 8px);margin-top:calc(16 * var(--u) + 8px)}
.bl-box dt{font-family:var(--xh);font-weight:var(--fw);font-size:var(--fs-h4);line-height:1.32}
.bl-box dt small{display:block;margin-top:2px;font-family:var(--mono);font-size:var(--fs-caption-s);color:var(--ink-2)}
.bl-box dd{margin-top:6px;font-size:var(--fs-body);line-height:1.4;color:var(--ink-2)}
/* a short, green takeaway */
.bl-take{margin-top:2em;padding:calc(20 * var(--u) + 10px) calc(24 * var(--u) + 10px);border-radius:8px;background:var(--green);color:var(--ink);font-family:var(--xh);font-size:var(--fs-lead);line-height:1.3;letter-spacing:-.01em}
/* end of the article */
.bl-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;max-width:38em;margin:calc(64 * var(--u) + 16px) auto 0;padding-top:calc(24 * var(--u) + 8px);border-top:1px solid rgba(32,29,29,.14)}
.bl-foot a.back{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-caption)}

@media (max-width:820px){
  .pg{padding:72px var(--pad-x-m)}
  .pg-head{grid-template-columns:1fr;row-gap:24px}
  .pg h2{max-width:none}
  .pg-hero{padding:150px var(--pad-x-m) 40px}
  .pg-hero .h1,.pg-hero.s .h1{max-width:none}
  .pg-hero .h1 .l{display:block;text-wrap:balance}
  .pg-hero.s .h1{font-size:min(var(--fs-display), 11vw)}
  .ab-grid{grid-template-columns:1fr;gap:8px;margin-top:36px}
  .ab-tile{min-height:0;padding:20px;grid-template-rows:auto 36px auto 1fr}
  .bl-list{grid-template-columns:1fr;gap:8px;margin-top:36px}
  .bl-card{min-height:0;padding:20px}
  .bl-card h2{margin-top:28px}
  .bl-card .more{padding-top:28px}
  .bl-art{padding-top:16px}
  .bl-box{padding:20px}
  .bl-take{padding:18px 20px}
  .bl-foot{margin-top:40px}
}