/* page.css — about, contact, legal, 404. Shared by the short types.
   Reuses the story band from home.css intentionally? No: it defines its own, so about can
   ship without loading the home sheet. */

/* ---- story band (about) ---- */
.storygrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.storygrid img{border-radius:var(--radius);width:100%;height:420px;object-fit:cover}
.storygrid p{margin-top:16px;max-width:34em}
.storygrid h2{max-width:15em}
@media(max-width:900px){.storygrid{grid-template-columns:1fr;gap:30px}
  .storygrid img{height:300px}}

/* ---- contact panels.  3 children => 3x1, 1x3 on a phone.  Fixed count, no auto-fit. ---- */
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;background:#fff;
       display:flex;flex-direction:column;gap:10px}
.panel .big{font-family:var(--disp);font-size:1.3rem;font-weight:700;color:var(--teal-ink);
            line-height:1.3;overflow-wrap:anywhere;word-break:break-word}
.panel .big a{color:var(--teal-ink);text-decoration:none}
.panel .big a:hover{text-decoration:underline}
.panel p{font-size:.94rem;color:var(--ink-soft)}
.panel .btn{margin-top:auto;align-self:flex-start}
@media(max-width:900px){.panels{grid-template-columns:1fr}}

/* ---- numbered list (contact: what happens next) ---- */
.numlist{margin-top:28px;list-style:none;counter-reset:n;max-width:var(--measure-read)}
.numlist li{counter-increment:n;position:relative;padding:18px 0 18px 52px;border-top:1px solid var(--line);
            color:var(--ink-soft)}
.numlist li:first-child{border-top:0}
.numlist li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:19px;
  font-family:var(--disp);font-weight:800;font-size:.9rem;color:var(--teal-deep);
  font-variant-numeric:tabular-nums}
.numlist b{color:var(--teal-ink)}

/* ---- legal: the one single-column page on the site (DESIGN-SYSTEM §6/legal) ---- */
.legal-body{max-width:38em}
.legal-body h2{font-size:1.15rem;font-family:var(--body);font-weight:700;margin-top:36px;
               color:var(--teal-ink);max-width:none}
.legal-body h2 .secnum{font-size:.85em}
.legal-body p{margin-top:12px;color:var(--ink-soft)}
.legal-body ul{margin-top:12px;padding-left:1.15em;color:var(--ink-soft)}
.legal-body li{margin-top:7px}

/* ---- 404: the one deliberately centred block on the site ---- */
.notfound{text-align:center;padding:96px 0 var(--section)}
.notfound h1{max-width:none}
.notfound p{margin:18px auto 0;max-width:38em;color:var(--ink-soft)}
.nf-links{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.nf-links a{border:1px solid var(--line);border-radius:999px;padding:10px 18px;text-decoration:none;
            font-weight:600;font-size:.92rem;color:var(--teal-ink);background:#fff}
.nf-links a:hover{background:var(--mist);border-color:var(--teal-deep)}

/* contact: one photograph, below the fold (the design system keeps the top of this page
   photograph-free). */
.wideshot{margin-top:30px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
          background:#fff}
.wideshot img{width:100%;height:340px;object-fit:cover}
.wideshot figcaption{padding:13px 18px;font-size:.9rem;color:var(--ink-soft)}
@media(max-width:700px){.wideshot img{height:220px}}