/* brettlabit.com — THE JOURNAL (content engine Wave 1, C7; 2026-10-03). Sky & Rock (R22): the same tokens as /brett.
   Voice of the page (C10): contemplative on the surface, deep underneath. Fraunces carries the headline and the quotes
   (the book speaking); Space Grotesk carries the reading. One column of text, unhurried. */
:root{ --white:#FFFFFF; --paper:#F5F8FC; --ink:#121A26; --blue:#0E2F58; --sky:#2F6FBF; --sky-soft:#DCE8F7; --muted:#5A6577; --hair:#E2E8F0; --ember:#D9653A;
       --sans:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --book:"Fraunces", Georgia, serif; }
*{ box-sizing:border-box; }
html{ background:var(--white); scroll-behavior:smooth; }
body{ margin:0; background:var(--white); color:var(--ink); font-family:var(--sans); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:inherit; } p{ margin:0 0 1.1em; } h1,h2,h3{ margin:0; text-wrap:balance; font-weight:500; letter-spacing:-.015em; }
img{ max-width:100%; height:auto; }
.wrap{ width:min(1120px, 100% - 48px); margin-inline:auto; }
.wrap.narrow{ width:min(720px, 100% - 48px); }
.kicker{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--sky); margin-bottom:14px; }
.kicker a{ text-decoration:none; } .kicker a:hover{ color:var(--blue); }

header.top .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:26px; }
.wordmark{ height:24px; width:auto; display:block; }
nav{ display:flex; gap:28px; font-size:14px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); }
nav a{ text-decoration:none; opacity:.8; } nav a:hover{ opacity:1; }

/* openings (Journal + columns) */
.open{ padding-block:56px 72px; }
.open h1{ font-family:var(--book); font-weight:300; font-size:clamp(42px,6vw,76px); line-height:1.04; color:var(--blue); letter-spacing:-.02em; max-width:16ch; }
.open .lede{ font-size:clamp(19px,1.7vw,23px); line-height:1.5; margin-top:24px; max-width:44ch; color:var(--ink); }

section{ padding-block:72px; border-top:1px solid var(--hair); }
section.band{ background:var(--paper); border-top:0; }

/* the three doors */
.col-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
.col-card{ display:flex; flex-direction:column; gap:12px; padding:30px 28px; border:1px solid var(--hair); border-radius:18px; text-decoration:none; background:var(--white); transition:border-color .2s, transform .2s; }
.col-card:hover{ border-color:var(--sky); transform:translateY(-2px); }
.col-card h2{ font-family:var(--book); font-weight:400; font-size:28px; line-height:1.15; color:var(--blue); }
.col-card p{ margin:0; font-size:17px; color:var(--ink); flex:1; }

/* lists of pieces */
.j-list{ list-style:none; margin:0; padding:0; }
.j-item{ border-bottom:1px solid var(--hair); } .j-item:first-child{ border-top:1px solid var(--hair); }
.j-item a{ display:grid; gap:6px; padding:26px 0; text-decoration:none; }
.j-meta{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.j-title{ font-family:var(--book); font-weight:400; font-size:clamp(24px,2.4vw,30px); line-height:1.2; color:var(--blue); }
.j-item a:hover .j-title{ color:var(--sky); }
.j-desc{ font-size:17px; color:var(--ink); }
.j-empty{ color:var(--muted); font-size:19px; margin:0; }
.also{ padding-block:40px; } .also-row{ display:flex; flex-wrap:wrap; gap:12px 28px; }

/* the article */
.post{ padding-block:40px 24px; }
.post h1{ font-family:var(--book); font-weight:300; font-size:clamp(38px,5.2vw,64px); line-height:1.06; color:var(--blue); letter-spacing:-.02em; }
.post-meta{ margin:22px 0 0; font-size:14px; letter-spacing:.04em; color:var(--muted); }
.post-hero{ margin:44px auto 0; width:min(1120px, 100% - 48px); }
.post-hero img{ width:100%; border-radius:18px; display:block; }
.post-body{ margin-top:44px; }
.post-body p, .post-body li{ font-size:clamp(19px,1.6vw,21px); line-height:1.72; }
.post-body h2{ font-family:var(--book); font-weight:400; font-size:clamp(28px,2.8vw,36px); line-height:1.15; color:var(--blue); margin:56px 0 18px; }
.post-body h3{ font-size:21px; font-weight:600; color:var(--blue); margin:40px 0 12px; }
.post-body a{ color:var(--blue); text-decoration-color:var(--sky-soft); text-underline-offset:3px; }
.post-body blockquote{ margin:40px 0; padding:0 0 0 26px; border-left:3px solid var(--ember); font-family:var(--book); font-weight:300; font-style:italic; }
.post-body blockquote p{ font-size:clamp(24px,2.4vw,32px); line-height:1.3; color:var(--ink); }
.post-body ul, .post-body ol{ padding-left:1.2em; margin:0 0 1.2em; }
.post-body hr{ border:0; height:1px; background:var(--hair); margin:48px 0; }
.post-body img{ border-radius:14px; display:block; margin:32px 0; }
.share-post{ margin-top:36px; padding-top:22px; border-top:1px solid var(--hair); }

/* the road home (C10: one road home, every piece) */
.close{ text-align:center; padding-block:96px; }
.close h2{ font-size:clamp(28px,3.4vw,44px); line-height:1.15; color:var(--blue); max-width:22ch; margin-inline:auto; }
.cta{ display:flex; gap:26px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.btn{ display:inline-block; font-size:15px; font-weight:600; letter-spacing:.02em; background:var(--blue); color:#fff; padding:16px 28px; border-radius:999px; text-decoration:none; }
a.more, span.more{ font-size:15px; font-weight:500; color:var(--blue); text-decoration:none; border-bottom:1px solid var(--sky-soft); padding-bottom:1px; }
.col-card .more{ align-self:flex-start; }

/* preview-only */
.draft-ribbon{ background:var(--ember); color:#fff; text-align:center; font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:8px 12px; }

@media (max-width:820px){
  nav.main{ display:none; }
  .wrap, .wrap.narrow, .post-hero{ width:min(1120px, 100% - 32px); }
  .open{ padding-block:16px 48px; } section{ padding-block:52px; } .close{ padding-block:72px; }
  .col-grid{ grid-template-columns:1fr; }
}