/* DoodBrand — shared page furniture for the core set.
   Extends the approved system; introduces no second style system. */

/* lede block at the top of a page */
.page-head{padding-block:clamp(48px,9vh,96px) clamp(24px,4vh,44px)}
.page-head h1{margin-block:16px 20px}
.page-head .lede{max-width:60ch}

/* numbered / lettered story beats */
.beats{display:grid;gap:0;border-top:1px solid var(--border)}
.beat{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:clamp(18px,4vw,48px);
  padding-block:clamp(28px,4vw,44px);border-bottom:1px solid var(--border);align-items:start}
.beat h3{font-size:clamp(24px,3vw,32px)}
.beat .beat-k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px}
.beat p{color:var(--text-2);font-size:16px}
.beat p+p{margin-top:12px}
.beat a.inline{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.beat a.inline:hover{color:var(--gold)}
@media (max-width:760px){.beat{grid-template-columns:1fr;gap:10px}}

/* even grid of link cards (destinations, paths, tools) */
.tiles{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.tile-card{background:var(--bg);padding:24px 24px 22px;display:grid;gap:9px;align-content:start;
  transition:background .22s var(--ease)}
.tile-card:hover{background:var(--bg2)}
.tile-card h3{font-size:26px}
.tile-card:hover h3{color:var(--gold)}
.tile-card p{font-size:14.5px;color:var(--text-2);line-height:1.55}
.tile-card .go{margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3)}
.tile-card:hover .go{color:var(--gold)}
.ext::after{content:"\2197";font-family:var(--mono);font-size:.62em;vertical-align:.5em;margin-left:.25em;color:var(--text-3)}

/* intent paths (start page) */
.paths{display:grid;gap:0;border-top:1px solid var(--border)}
.path{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 28px;align-items:center;
  padding-block:22px;border-bottom:1px solid var(--border)}
.path h3{font-size:clamp(22px,2.6vw,28px);margin-bottom:6px}
.path p{color:var(--text-2);font-size:15.5px;max-width:58ch}
.path .btn{white-space:nowrap}
@media (max-width:700px){.path{grid-template-columns:1fr}.path .btn{justify-self:start;white-space:normal;text-align:left}}

/* noggin showcase — the same face through different hands */
.faces{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr))}
.face{display:block;background:var(--bg2);border:1px solid var(--border);overflow:hidden;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.face:hover{border-color:var(--gold);transform:translateY(-2px)}
.face img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.face figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);padding:9px 10px;border-top:1px solid var(--border);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.face:hover figcaption{color:var(--gold)}

/* split: royalties, mechanics */
.split{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.split > div{background:var(--bg);padding:22px 24px;display:grid;gap:5px;align-content:start}
.split b{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums}
.split span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.split p{font-size:14px;color:var(--text-2);line-height:1.5;margin-top:4px}

/* faq */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 24px;
  gap:16px;align-items:center;padding-block:20px;font-family:var(--serif);font-size:clamp(20px,2.4vw,25px);
  font-weight:400;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--gold);
  text-align:center;transition:transform .22s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--gold)}
.faq .a{padding-bottom:22px;color:var(--text-2);font-size:15.5px;line-height:1.7;max-width:66ch}
.faq .a a{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.faq .a a:hover{color:var(--gold)}
.faq .a p+p{margin-top:10px}

/* human sitemap */
.map{display:grid;gap:36px 32px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.map section{padding:0;border:0}
.map h2{font-size:26px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.map ul{list-style:none;display:grid;gap:8px}
.map a{font-size:15px;color:var(--text-2)}
.map a:hover{color:var(--gold)}
.map .who{font-family:var(--mono);font-size:11px;color:var(--text-3);margin-left:6px}
.map-names{columns:2;column-gap:28px}
.map-names li{break-inside:avoid}
@media (max-width:520px){.map-names{columns:1}}

/* callout / invitation */
.call{border:1px solid var(--border-m);border-left:2px solid var(--gold);background:var(--bg2);
  padding:clamp(24px,4vw,36px);display:grid;gap:14px;align-items:start}
.call h3{font-size:clamp(24px,3vw,30px)}
.call p{font-size:15.5px;color:var(--text-2)}
.call .btn{justify-self:start;margin-top:4px}
.call.green{border-left-color:var(--green)}

/* honest empty state — never dressed up as content */
.pending{border:1px dashed var(--border-s);background:transparent;padding:22px 24px;display:grid;gap:8px}
.pending p{font-size:14.5px;color:var(--text-3);line-height:1.6}
.pending .label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}

/* 404 */
.lost{min-height:56vh;display:grid;align-content:center;gap:18px;padding-block:clamp(48px,10vh,110px)}
.lost .num{font-family:var(--serif);font-size:clamp(70px,14vw,150px);line-height:.9;color:var(--gold);font-weight:300}
.lost h1{font-size:clamp(34px,5.2vw,58px);margin-top:6px}
.lost p{font-size:17px;color:var(--text-2)}
.lost .pro-links{margin-top:12px}
.lost .aside{font-family:var(--mono);font-size:12.5px;color:var(--text-3);margin-top:26px;
  padding-top:18px;border-top:1px solid var(--border);max-width:52ch}

.note-row{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--mono);font-size:11.5px;
  color:var(--text-3);margin-top:18px}
.prose p{font-size:16.5px;color:var(--text-2)}
.prose p+p{margin-top:16px}
.prose strong{color:var(--text);font-weight:600}

/* downloadable templates */
.tpls{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.tpl{background:var(--bg);margin:0;display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);
  gap:20px;padding:22px 24px;align-items:center}
.tpl img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:var(--bg2);
  border:1px solid var(--border);padding:8px}
.tpl h3{font-size:24px;margin-bottom:5px}
.tpl p{font-size:14px;color:var(--text-2);margin-bottom:12px;line-height:1.5}
@media (max-width:480px){.tpl{grid-template-columns:1fr;gap:14px}.tpl img{max-width:180px}}

/* documented effort: image beside its account */
.doc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,44px);
  margin:0;align-items:start;border:1px solid var(--border-m);background:var(--bg2);
  padding:clamp(18px,3vw,28px)}
.doc-img{display:block;border:1px solid var(--border);background:var(--bg3);overflow:hidden}
.doc-img img{width:100%;height:auto;display:block;transition:transform .5s var(--ease)}
.doc-img:hover img{transform:scale(1.02)}
.doc figcaption{display:grid;gap:12px;align-content:start}
.doc figcaption h3{font-size:clamp(24px,3vw,32px)}
.doc figcaption p{font-size:15.5px;color:var(--text-2);line-height:1.65}
.doc figcaption .btn{justify-self:start;margin-top:4px}
@media (max-width:760px){.doc{grid-template-columns:1fr}}

/* photographs of a documented effort */
.gallery{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  margin-top:26px;align-items:start}
.gallery figure{margin:0;background:var(--bg2);border:1px solid var(--border);display:grid}
.gallery a{display:block;overflow:hidden;background:var(--bg3)}
.gallery img{width:100%;height:auto;display:block;transition:transform .5s var(--ease)}
.gallery a:hover img{transform:scale(1.03)}
.gallery figcaption{padding:11px 14px;font-size:13.5px;color:var(--text-2);
  border-top:1px solid var(--border);line-height:1.5}

/* ── the wall is still growing ─────────────────────────────────────────── */
.growing{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--border-m);padding:6px 11px;white-space:nowrap}
.wall-open{margin-top:46px;border:1px solid var(--border-m);border-left:2px solid var(--gold);
  background:var(--bg2);padding:clamp(24px,4vw,40px);
  display:grid;gap:22px;align-items:center;grid-template-columns:minmax(0,1fr) auto}
.wall-open h2{font-size:clamp(26px,3vw,34px);margin:10px 0 12px}
.wall-open p{color:var(--text-2);font-size:15px;line-height:1.62;max-width:62ch}
@media (max-width:720px){ .wall-open{grid-template-columns:1fr} }

/* ── something real that isn't public yet ──────────────────────────────── */
.tile-card.is-soon{cursor:default;border-style:dashed}
.tile-card.is-soon:hover{background:var(--bg2)}
.tile-card.is-soon h3{color:var(--text-2)}
.tile-card.is-soon .go{color:var(--text-3)}

/* ── the collections directory ─────────────────────────────────────────── */
/* auto-fill, not auto-fit: a group with one collection keeps a card-sized card
   instead of stretching one card across the whole row */
.colls{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.coll-card{background:var(--bg);display:grid;grid-template-rows:auto 1fr;
  transition:background .22s var(--ease)}
.coll-card:hover{background:var(--bg2)}
.coll-art{aspect-ratio:16/9;max-height:210px;display:grid;place-items:center;background:var(--bg3);
  border-bottom:1px solid var(--border);overflow:hidden;padding:16px}
.coll-art span{font-family:var(--serif,inherit);font-size:clamp(19px,2vw,25px);
  color:var(--text-3);text-align:center;line-height:1.2}
/* the cover art sits over the typographic cover, and is only revealed once
   it has actually loaded, so a gateway that never answers leaves the card
   exactly as it was */
.coll-art{position:relative}
.coll-art img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;
  object-fit:cover;display:block;opacity:0;transition:opacity .3s var(--ease)}
.coll-art.has-art img{opacity:1}
.coll-art.has-art span{opacity:0}
.coll-art.has-art{padding:0}
.coll-body{padding:22px 24px 24px;display:grid;gap:10px;align-content:start}
.coll-body h3{font-size:26px}
.coll-card:hover .coll-body h3{color:var(--gold)}
.coll-body p{font-size:14.5px;color:var(--text-2);line-height:1.58}
.coll-credit{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.coll-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.coll-tool{font-size:13px;color:var(--text-2)}
.coll-tool:hover{color:var(--gold)}

/* ── the thank-you card ────────────────────────────────────────────────── */
.card-note{margin-top:26px}
.thanks{margin:0;border:1px solid var(--border);background:var(--bg2);display:grid;gap:1px;
  grid-template-columns:1fr}
.thanks a{display:block;overflow:hidden;background:var(--bg3)}
.thanks img{width:100%;height:auto;display:block}
.thanks figcaption{padding:16px 20px;font-size:14px;color:var(--text-2);line-height:1.6;
  border-top:1px solid var(--border)}
@media (min-width:760px){ .thanks{grid-template-columns:1fr 1fr}
  .thanks figcaption{grid-column:1/-1} }

/* ── a short note under a section ──────────────────────────────────────── */
.note-row{margin-top:22px;display:grid;gap:10px}
.note-row p{font-size:13.5px;line-height:1.6;max-width:78ch}