/* Grand Blade Media: page-about.css
   Shared by About, Contact, Privacy and 404. Page-prefixed classes only (.about-*, .contact-*).
   Colors come from the semantic tokens in site.css, never hard-coded. */

/* ---------- Page head (all four pages) ---------- */
.about-head{padding-block:clamp(3.5rem,8vw,7rem) clamp(2rem,4vw,3.5rem)}
.about-head .eyebrow{margin-bottom:var(--s-3)}
.about-head .eyebrow::before{content:"";display:inline-block;width:1.75rem;height:1px;background:currentColor;vertical-align:.3em;margin-right:.85rem}
.about-head :is(.h1,.display){max-width:12em}
.about-head .lede{margin-top:var(--s-3)}
.about-head .about-role{margin-top:var(--s-2);color:var(--fg)}
.about-head+.section{padding-top:0}

/* ---------- Rows: a label rail and a body, hairline between rows ---------- */
.about-row,.about-start{align-items:baseline;padding-block:var(--s-4)}
.about-row+.about-row{border-top:1px solid var(--line)}
.rule+.about-row,.rule+.about-section-head{margin-top:0}
.rule+.about-section-head{margin-top:var(--s-5)}

/* Stamped dates and date ranges never break across lines */
main [data-fmt="date"],main [data-stamp^="d:"],main time{white-space:nowrap}

/* ---------- About: bio ---------- */
.about-bio{padding-bottom:0}
.about-bio__text{max-width:38rem;color:var(--fg)}
.about-bio__note{margin-top:var(--s-3);max-width:38rem}
.about-jump{margin-top:var(--s-4)}
.about-jump ul{display:flex;flex-wrap:wrap;gap:.25rem var(--s-4)}

/* ---------- About: manifesto ---------- */
.about-start{padding-top:0;margin-bottom:var(--s-4)}
.about-start .outcome{max-width:34em}
.about-principles{margin-top:var(--s-3)}
.about-principles .principle__n{color:var(--fg-2)}
@media (min-width:72em){
  .about-principles .principle{grid-template-columns:minmax(4.5rem,7rem) minmax(0,36rem) minmax(0,1fr);column-gap:clamp(2rem,5vw,5rem)}
  .about-principles .principle__n{grid-row:1/span 2}
  .about-principles .principle .receipt{grid-column:3;grid-row:1/span 2;align-self:start;margin-top:.55rem;max-width:25rem}
}
.owned-note{margin-top:var(--s-4)}

/* ---------- About: how this is made ---------- */
.about-disclosure{border-bottom:1px solid var(--line)}
.about-disclosure .split{padding-block:var(--s-4);border-top:1px solid var(--line)}
.about-disclosure .split__body{max-width:44rem}

/* ---------- About: ways to work together (a pointer to /services/) ---------- */
.about-work{padding-bottom:0}
.about-work__text{max-width:38rem;color:var(--fg)}
.about-pointer{display:flex;flex-wrap:wrap;gap:.25rem var(--s-4);margin-top:var(--s-3)}

/* ---------- Contact ---------- */
.contact-box{container-type:inline-size}
.contact-address{font:400 clamp(1.25rem,5.2vw,3.5rem)/1.1 var(--serif);letter-spacing:-.02em;overflow-wrap:anywhere}
@supports (width:1cqi){.contact-address{font-size:clamp(1.25rem,7.2cqi,3.5rem)}}
.about-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem;margin-top:var(--s-3)}
.about-body .fine{margin-top:var(--s-2);max-width:34rem}
.about-body .split__body.stack{max-width:44rem}
.contact-copy{display:none}
.js .contact-copy{display:inline-flex}
.about-include{counter-reset:inc;display:grid;gap:1.1rem;padding:0;list-style:none;max-width:40rem}
.about-include li{counter-increment:inc;position:relative;padding-left:2.75rem}
.about-include li::before{content:counter(inc,decimal-leading-zero);position:absolute;left:0;top:.3em;font:500 var(--fs-eyebrow)/1.3 var(--sans);letter-spacing:.14em;color:var(--fg-2)}

/* ---------- Privacy ---------- */
.about-policy>.tldr{margin-top:0}
.about-policy h2{font-size:clamp(1.5rem,2.6vw,2rem)}

/* ---------- 404 ---------- */
.about-pages{border-bottom:1px solid var(--line)}
.about-pages a{display:grid;gap:.25rem 2rem;align-items:baseline;padding:1.25rem 0;border-top:1px solid var(--line);color:var(--fg);text-decoration:none}
@media (min-width:48em){.about-pages a{grid-template-columns:minmax(11rem,20rem) minmax(0,1fr)}}
.about-pages__name{font:400 clamp(2rem,4.4vw,3.25rem)/1.05 var(--serif);letter-spacing:-.02em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.16em;transition:text-decoration-color var(--dur) var(--ease),text-decoration-thickness var(--dur) var(--ease)}
.about-pages a:hover .about-pages__name{text-decoration-color:var(--edge);text-decoration-thickness:2px}
.about-pages__what{color:var(--fg-2)}