/* ============================================================================================
   THE DHRUV X, PAGE TEMPLATE  (template.css)

   One plain, reusable layout for any page that does not need a bespoke design of its own.
   Credits is the first page built on it. Every template page links this one file, so a change
   here updates all of them at once.

   A page is made of a few fixed blocks (see page-template.html for each one in use, and the
   "Adding a page from content" section of CLAUDE.md for how raw content maps onto them):

     .tp-mast          masthead: back link, wordmark, the page's name
     .tp-head          page head: .tp-kicker, h1.tp-title, p.tp-intro
     .tp-group         a numbered group: .tp-group-head (.tp-num, h2.tp-group-title,
                       p.tp-group-note) beside .tp-group-body
     inside a body:    p.tp-label       a small sub-heading ("Special Mentions")
                       p.tp-text        plain paragraph
                       ul.tp-list       a list of li.tp-item, each with .tp-item-name,
                                        optional .tp-item-role, .tp-item-note, and an
                                        optional blockquote.tp-quote

   Themes: set data-theme on <html>. "paper" (the default), "dark" (black, like the Goal page)
   or "maroon" (like the Idea Lab ground). Nothing else changes between them.
   ============================================================================================ */

:root{
  /* soft text is a shade deeper than the site's --ink-soft: that token on --paper is 4.45:1, just under AA */
  --tp-bg:var(--paper); --tp-ink:var(--ink); --tp-soft:#5f533b;
  --tp-accent:var(--red); --tp-rule:var(--line); --tp-seam:rgba(36,31,25,0.35);
}
:root[data-theme="dark"]{
  --tp-bg:#000; --tp-ink:#ece7df; --tp-soft:rgba(236,231,223,0.74);
  --tp-accent:#e3b5a4; --tp-rule:rgba(236,231,223,0.2); --tp-seam:rgba(236,231,223,0.28);
}
:root[data-theme="maroon"]{
  --tp-bg:#5a1616; --tp-ink:#f1e6d3; --tp-soft:rgba(241,230,211,0.8);
  --tp-accent:#e3b5a4; --tp-rule:rgba(241,230,211,0.22); --tp-seam:rgba(241,230,211,0.3);
}
html, body{ background:var(--tp-bg); }

/* ---- masthead: back link, wordmark, the page's own name ---- */
.tp-mast{
  position:relative; z-index:2; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  padding:94px 6vw 0;
}
.tp-back{
  justify-self:start; font-family:'Special Elite',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--tp-soft); border-bottom:1px dashed var(--tp-soft); padding-bottom:2px; cursor:none;
  transition:color .3s ease, border-color .3s ease;
}
.tp-back:hover{ color:var(--tp-accent); border-color:var(--tp-accent); }
.tp-name{ font-family:'Gloock',serif; font-weight:400; font-size:clamp(28px,3.6vw,46px); line-height:1; letter-spacing:-0.01em; color:var(--tp-ink); text-align:center; }
.tp-edition{ justify-self:end; text-align:right; font-family:'Special Elite',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--tp-soft); }

.tp-main{ position:relative; z-index:2; max-width:1320px; margin:0 auto; padding:0 6vw 10vh; }

/* ---- page head ---- */
.tp-head{ padding:11vh 0 9vh; max-width:980px; }
.tp-kicker{
  display:flex; align-items:center; gap:10px; margin-bottom:22px;
  font-family:'Special Elite',monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--tp-accent);
}
.tp-kicker::before{ content:'\2756'; font-size:10px; }
/* Gloock headings are always normal case on this site, never uppercase */
.tp-title{
  font-family:'Gloock',serif; font-weight:400; font-size:clamp(46px,7.4vw,108px);
  line-height:0.98; letter-spacing:-0.028em; color:var(--tp-ink); margin-bottom:30px;
}
.tp-intro{ font-family:'Syne',sans-serif; font-weight:400; font-size:clamp(18px,1.6vw,22px); line-height:1.6; color:var(--tp-ink); max-width:40em; }

/* ---- a group: the front page's dashed seam on top, heading on the left, content on the right ---- */
.tp-group{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; align-items:start;
  padding:7vh 0 9vh; border-top:3px dashed var(--tp-seam);
}
.tp-group-head{ grid-column:1 / span 4; }
.tp-num{ display:block; margin-bottom:14px; font-family:'Special Elite',monospace; font-size:12px; letter-spacing:0.1em; color:var(--tp-accent); }
.tp-group-title{ font-family:'Gloock',serif; font-weight:400; font-size:clamp(28px,3vw,44px); line-height:1.08; letter-spacing:-0.018em; color:var(--tp-ink); }
.tp-group-note{ margin-top:14px; font-family:'Syne',sans-serif; font-size:15px; line-height:1.6; color:var(--tp-soft); max-width:26em; }
.tp-group-body{ grid-column:6 / span 7; }
.tp-group-body > *:first-child{ margin-top:0; }

/* ---- blocks inside a group body ---- */
.tp-label{
  margin:34px 0 12px; font-family:'Special Elite',monospace; font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--tp-accent);
}
.tp-text{ margin:0 0 1.2em; font-family:'Syne',sans-serif; font-size:17px; line-height:1.72; color:var(--tp-soft); }
.tp-list{ list-style:none; margin:0 0 30px; padding:0; border-top:1px solid var(--tp-rule); }
.tp-item{ display:grid; gap:6px; padding:20px 0 22px; border-bottom:1px dashed var(--tp-rule); }
.tp-item-name{ font-family:'Gloock',serif; font-weight:400; font-size:clamp(19px,1.6vw,23px); line-height:1.25; letter-spacing:-0.01em; color:var(--tp-ink); }
.tp-item-name a{ border-bottom:1px dashed var(--tp-accent); transition:color .3s ease; }
.tp-item-name a:hover{ color:var(--tp-accent); }
.tp-item-role{ font-family:'Special Elite',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--tp-soft); }
.tp-item-note{ font-family:'Syne',sans-serif; font-size:15.5px; line-height:1.66; color:var(--tp-soft); }
.tp-quote{
  margin:6px 0 4px; padding:2px 0 2px 16px; border-left:2px solid var(--tp-accent);
  font-family:'Gloock',serif; font-size:clamp(19px,1.7vw,24px); line-height:1.35; letter-spacing:-0.01em; color:var(--tp-ink);
}

footer{ position:relative; z-index:2; margin:0 6vw; padding:26px 0 40px; border-top:1px solid var(--tp-rule); }
footer p{ color:var(--tp-soft); }
.nav-panel a[aria-current="page"]{ color:var(--red); }

/* the ring is red on paper; on the dark and maroon grounds red falls under 3:1, so it goes to the ink */
:root[data-theme="dark"] :focus-visible, :root[data-theme="maroon"] :focus-visible{ outline-color:var(--tp-ink); }
.nav-panel :focus-visible{ outline-color:var(--red); }

@media (max-width:900px){
  .tp-group{ grid-template-columns:1fr; row-gap:26px; padding:6vh 0 7vh; }
  .tp-group-head, .tp-group-body{ grid-column:1; }
}
@media (max-width:700px){
  .tp-mast{ grid-template-columns:1fr; justify-items:center; text-align:center; padding:80px 6vw 0; gap:12px; }
  .tp-back, .tp-edition{ justify-self:center; text-align:center; }
  .tp-name{ order:-1; }
  .tp-back{ order:1; }
  .tp-head{ padding:8vh 0 6vh; }
}