/* ============================================================
   Text pages: Security, Ship log, Blog (index + posts), Privacy,
   Terms. Loaded after site.css and pages.css; nothing here is
   needed by any other page.

   COMPONENTS
     .gname          gate row name cell: <h3> plus a .sign stamp
     .dev            one developer-detail line under a row
     .notes          ruled one-liners under a list (.lead for the first)
     .logbook .entry the Ship log: ruled entries, mint dates, a rope
                     down the margin (drawn by an inline script)
     .posts .post    the blog index: ruled rows, the whole row links
     .phero--post    post header (back link, long title)
     .postmeta       sticky left column of a post: date, byline, read time
     .legal-jump     sticky "on this page" list for Privacy and Terms
     .legal-note     the draft note at the top of the legal text
   ============================================================ */

/* hero doodles sit straight on the sea, so they draw in chalk, and a little larger than the default */
.phero .phero-art{width:min(430px,100%)}

/* a phrase that must not break across lines */
.u{display:inline-block}

/* stamps: coral text is for dark blocks, deep coral on light ones */
.s-paper .sign,.s-signal .sign{color:var(--flag-deep);border-color:var(--flag-deep)}

/* ---------- security: gate rows, notes ---------- */
.gname{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.gname .sign{margin-left:2px}
.dev{margin-top:9px;font-size:14.5px;line-height:1.55;color:var(--p-dim);max-width:58ch}
.frow-body .dev{font-size:14.5px;line-height:1.55}
.notes{margin-top:34px;border-top:2px solid var(--p-ink)}
.notes p{padding:15px 0 16px;border-bottom:1px solid var(--p-rule);font-size:16.5px;line-height:1.5;color:var(--p-dim)}
.notes p.lead{font-size:clamp(17px,1.4vw,19px);font-weight:500;color:var(--p-ink)}
.notes a{color:var(--p-link);font-weight:700;text-underline-offset:4px}
.notes b{font-weight:800;color:var(--p-strong)}
.s-signal .jump a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.sec-body>.callout{margin:30px 0 0}
.sec-body>.callout+.more{margin-top:26px}

/* ---------- ship log ---------- */
#log{padding:0 0 72px}
.logbook-wrap{position:relative}
.logbook{list-style:none;border-top:2px solid var(--p-ink)}
.log-rope{position:absolute;left:0;top:0;width:30px;height:100%;overflow:visible;pointer-events:none}
.log-rope path{fill:none;stroke:var(--signal);stroke-width:3.4;stroke-linecap:round}
.log-rope path.strand-b{stroke:var(--signal-deep)}
.log-rope .ring{fill:var(--sea);stroke:var(--chalk);stroke-width:3}
.log-rope .bollard{fill:var(--mint);stroke:var(--sea);stroke-width:3}
.entry{display:grid;grid-template-columns:132px minmax(0,1fr);gap:4px 28px;align-items:baseline;padding:24px 0 26px 62px;border-bottom:1px solid var(--p-rule)}
.entry time{font-family:var(--mono);font-weight:500;font-size:14px;line-height:1.4;color:var(--p-good);font-variant-numeric:tabular-nums;white-space:nowrap}
.entry h2{max-width:none;font-weight:800;font-size:clamp(20px,1.9vw,25px);letter-spacing:-.03em;line-height:1.2}
.entry p{margin-top:6px;max-width:60ch;font-size:16px;line-height:1.55;color:var(--p-dim)}
@media(max-width:640px){.entry{grid-template-columns:1fr;gap:6px;padding:20px 0 22px 46px}}

/* ---------- blog index ---------- */
.posts{border-top:2px solid var(--p-ink)}
.post{display:grid;grid-template-columns:minmax(120px,.22fr) minmax(0,1fr) auto;gap:10px 40px;align-items:start;padding:34px 0 38px;border-bottom:1px solid var(--p-rule);color:var(--p-ink);text-decoration:none}
.post-meta{display:grid;gap:4px;font-family:var(--mono);font-size:13px;line-height:1.45;letter-spacing:.02em;color:var(--p-dim);padding-top:10px}
.post h2{max-width:20ch;font-size:clamp(26px,3.2vw,44px);letter-spacing:-.04em;line-height:1.05;transition:color .18s}
.post-main p{margin-top:14px;max-width:58ch;font-size:clamp(16.5px,1.3vw,18px);line-height:1.6;color:var(--p-dim)}
.post-go{align-self:end;white-space:nowrap;font-weight:800;font-size:16px;border-bottom:2px solid currentColor}
.post-go i{font-style:normal;display:inline-block;transition:transform .2s var(--ease)}
.post:hover h2{color:var(--p-accent)}
.post:hover .post-go i{transform:translateX(4px)}
.post:focus-visible{outline-offset:6px}
@media(max-width:820px){.post{grid-template-columns:1fr;gap:12px;padding:28px 0 30px}.post-meta{display:flex;flex-wrap:wrap;gap:4px 16px;padding-top:0}.post-go{justify-self:start}}

/* ---------- blog post ---------- */
.phero--post{padding:40px 0 60px}
.phero--post h1{max-width:19ch;font-size:clamp(34px,5.2vw,68px);line-height:1.02}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:22px;font-weight:700;font-size:16px;text-decoration:none;border-bottom:2px solid currentColor;transition:color .18s}
.back span{transition:transform .2s var(--ease)}
.back:hover{color:var(--signal)}
.back:hover span{transform:translateX(-4px)}
.postmeta{display:grid;gap:6px;align-content:start}
.postmeta .pmeta{font-size:14px}
.prose figure{margin:1.6em 0}

/* ---------- privacy and terms ---------- */
.phero--slim{padding:48px 0 44px}
.phero--slim h1{max-width:none}
.legal-jump{margin-top:6px}
@media(max-width:980px){nav.legal-jump,.sec-head:has(>.legal-jump){display:none}}
.prose .legal-note{padding:16px 20px;background:var(--p-fill);font-size:16px;line-height:1.55}
.prose .updated{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--p-dim)}