/* ==========================================================================
   pages.css — minimalist scaffold for simple standalone pages
   (Overview, legal, What's new, Media, Say Hello). Reuses landing.css for the
   nav + footer; this file only styles the lightweight page body so each one is
   easy to flesh out later. Depends on tokens.css.
   ========================================================================== */

.simple-main { padding: 64px 0 96px; }

.page-head { max-width: 760px; }
.page-head .eyebrow { display:inline-block; }
.draft-pill { display:inline-flex; white-space:nowrap; align-items:center; gap:7px; font-size:12px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--brown-4); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:5px 12px; margin-bottom:22px; }
.draft-pill i { font-size:14px; color:var(--accent); }

.page-title { font-family:var(--serif); font-size:clamp(40px,6vw,68px); line-height:1.04; font-weight:600; letter-spacing:-0.015em; color:var(--brown); margin:0 0 18px; }
.page-lede { font-size:19px; line-height:1.6; color:var(--brown-3); max-width:60ch; text-wrap:pretty; margin:0; }
.page-meta { margin-top:22px; font-size:13.5px; color:var(--brown-4); display:flex; align-items:center; gap:8px; }
.page-meta i { font-size:15px; }

/* reading column / stub sections */
.doc { max-width:760px; margin-top:54px; border-top:1px solid var(--line); padding-top:14px; }
.doc-sec { padding:30px 0; border-bottom:1px solid var(--line); }
.doc-sec h2 { font-family:var(--serif); font-size:26px; font-weight:600; color:var(--brown); letter-spacing:-0.01em; margin:0 0 12px; }
.doc-sec p { font-size:16.5px; line-height:1.65; color:var(--brown-3); margin:0 0 12px; max-width:64ch; text-wrap:pretty; }
.doc-sec p:last-child { margin-bottom:0; }
.doc-stub { color:var(--brown-4); font-style:italic; }

/* contact / media tiles */
.tile-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:48px; max-width:760px; }
.tile { display:flex; flex-direction:column; gap:10px; padding:26px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.tile-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(23,95,100,0.12); color:var(--accent); font-size:22px; }
.tile h3 { font-family:var(--serif); font-size:21px; font-weight:600; color:var(--brown); margin:8px 0 0; }
.tile p { font-size:15px; line-height:1.55; color:var(--brown-3); margin:0; }
.tile a.tile-link { font-size:15px; font-weight:600; color:var(--accent); margin-top:4px; }

/* changelog stub */
.log { max-width:760px; margin-top:48px; }
.log-row { display:grid; grid-template-columns:160px 1fr; gap:24px; padding:26px 0; border-top:1px solid var(--line); }
.log-row:last-child { border-bottom:1px solid var(--line); }
.log-date { font-size:13.5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--brown-4); }
.log-body h3 { font-family:var(--serif); font-size:20px; font-weight:600; color:var(--brown); margin:0 0 8px; }
.log-body p { font-size:15.5px; line-height:1.6; color:var(--brown-3); margin:0; max-width:60ch; }

@media (max-width:760px){
  .simple-main { padding:40px 0 64px; }
  .log-row { grid-template-columns:1fr; gap:8px; }
}