/* ============ PROJECT PAGES ==============================================
   Shared chrome for the per-project detail pages (2080, Hecatech, Syncro,
   Deadly Smart). Colours and fonts are inherited straight from site.css —
   this file only adds the long-form document layout those pages need. */

.proj{padding-top:clamp(120px,16vh,170px)}
.back-link{display:inline-block;font-family:var(--display);font-size:.72rem;letter-spacing:.2em;
  color:var(--ink-soft);transition:color .25s;margin-bottom:18px}
.back-link:hover{color:var(--rust)}
.proj-title{font-size:clamp(2.4rem,7vw,5.4rem)}
/* the band is a hard-edged invert block, so the following copy needs real air
   beneath it — flush against the band it reads as if it belongs inside it */
/* the kicker sits directly over the galaxy core, the busiest part of the
   backdrop — it gets the same inverted plate as the document below it so the
   two read as one stack rather than two different materials */
.proj-kicker{max-width:780px;margin:clamp(26px,3.4vw,42px) auto 0;
  font-family:'UbuntuM','UbuntuL',var(--body);font-weight:500;
  font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.5;color:var(--on);
  background:var(--inv-tint);border:1px solid var(--on-hair);
  backdrop-filter:invert(1);-webkit-backdrop-filter:invert(1);
  padding:12px 16px}

/* ---- the single document panel ---------------------------------------
   Same inverted-window treatment as the cards and the character sheet: the
   panel undoes the page inversion to reveal the true galaxy, then paints
   --inv-tint over it so the light copy holds up even when the bright core
   drifts behind the panel. */
.doc{max-width:780px;margin:clamp(20px,2.6vw,34px) auto 0;
  background:var(--inv-tint);border:1px solid var(--on-hair);
  backdrop-filter:invert(1);-webkit-backdrop-filter:invert(1);
  box-shadow:0 18px 46px -38px rgba(0,0,0,.8);
  padding:clamp(22px,3.4vw,46px)}
.doc p{font-size:.98rem;line-height:1.66;color:var(--on);margin:0 0 1.1em}
.doc p:last-child{margin-bottom:0}
.doc b{font-weight:700}
.doc i{font-style:italic}
/* section headings inside the document — rust caps, hairline above, tight to
   the copy that follows */
.doc-h{font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(.92rem,1.5vw,1.12rem);letter-spacing:.14em;line-height:1.25;
  color:var(--rust-lt);margin:clamp(30px,3.6vw,44px) 0 14px;
  padding-top:clamp(20px,2.6vw,30px);border-top:1px solid var(--on-hair);
  -webkit-text-stroke:0}
.doc-h:first-child{margin-top:0;padding-top:0;border-top:0}

/* ---- verbatim rulebook quotes ---------------------------------------- */
.rq{margin:0 0 1.3em;padding:14px 18px;
  border-left:3px solid var(--rust-lt);background:rgba(246,239,225,.07);
  font-size:.94rem;line-height:1.55;color:var(--on-soft);font-style:normal}
.rq.big{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(.95rem,1.7vw,1.2rem);color:var(--on);text-align:center;
  border-left:0;border-top:1px solid var(--on-hair);border-bottom:1px solid var(--on-hair);
  padding:16px 12px}
.dc{font-family:var(--display);color:var(--blue-lt);white-space:nowrap}

/* A single-line emphasis beat, set exactly like a section heading but in the
   default cream instead of rust, and with no rule above it, so it reads as a
   statement inside the section rather than the start of a new one. */
.doc p.shout{font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(.92rem,1.5vw,1.12rem);letter-spacing:.14em;line-height:1.25;
  color:var(--on);margin:0 0 1.1em;-webkit-text-stroke:0}

/* ---- rules tables ----------------------------------------------------- */
.tbl{border:1px solid var(--on-hair);margin:0 0 1.3em;background:rgba(246,239,225,.05)}
/* first two columns are deliberately tight: the labels and the DC/Hits values
   are short, so wide columns left the numbers stranded in the middle of the
   table with the description column pushed far right */
.tr-row{display:grid;grid-template-columns:minmax(0,1fr) .34fr 2.3fr;gap:10px;color:var(--on);
  padding:8px 12px;border-bottom:1px dotted var(--on-dot);font-size:.86rem;align-items:baseline}
.tbl.crits .tr-row{grid-template-columns:.34fr 3.3fr}
.tr-row:last-child{border-bottom:0}
.tr-row.head{font-family:var(--display);font-size:.66rem;letter-spacing:.16em;
  color:var(--rust-lt);border-bottom:1px solid var(--on-hair);background:rgba(246,239,225,.06)}
.tr-row span:nth-child(2){font-family:var(--display);color:var(--blue-lt);font-size:.82rem}
.tr-row.head span:nth-child(2){color:var(--rust-lt);font-size:.66rem}

/* two-column key/value table: no numeric middle column, so the value column
   keeps the normal body colour instead of the blue used for DC/Hits figures */
.tbl.kv .tr-row{grid-template-columns:minmax(0,1fr) 2.3fr}
.tbl.kv .tr-row span:nth-child(2){font-family:var(--body);color:var(--on);font-size:.86rem}
.tbl.kv .tr-row.head span:nth-child(2){font-family:var(--display);color:var(--rust-lt);font-size:.66rem}

/* stat-block table: one label column plus N short numeric columns, so it needs
   its own track sizing rather than the 3-column default */
.tbl.profiles .tr-row{grid-template-columns:1.6fr repeat(6,.5fr);gap:6px}
.tbl.profiles .tr-row span:nth-child(n+2){font-family:var(--display);color:var(--blue-lt);
  font-size:.8rem;text-align:right}
.tbl.profiles .tr-row.head span:nth-child(n+2){color:var(--rust-lt);font-size:.6rem}

/* ---- figures ----------------------------------------------------------
   The <img> carries an onerror that removes the whole figure, so a page can
   ship with its image slots wired up before the assets are actually in the
   folder without ever showing a broken-image icon. */
.fig{margin:0 0 1.3em;border:1px solid var(--on-hair);background:rgba(246,239,225,.05);padding:12px}
.fig img{display:block;width:100%;height:auto;border:1px solid var(--on-hair)}
.fig figcaption{font-size:.78rem;line-height:1.45;color:var(--on-soft);margin-top:9px;text-align:center}

/* ---- development status ---------------------------------------------- */
.status{border:1px solid var(--on-hair);background:rgba(246,239,225,.05);margin:0 0 1.3em}
.st-row{padding:11px 14px;border-bottom:1px dotted var(--on-dot)}
.st-row:last-child{border-bottom:0}
.st-row b{display:block;font-family:var(--display);font-size:.72rem;letter-spacing:.16em;
  color:var(--rust-lt);margin-bottom:3px}
.st-row span{display:block;font-size:.86rem;line-height:1.5;color:var(--on-soft)}
.closing{font-size:.9rem!important;color:var(--on-soft)!important;font-style:italic}

/* ---- download call to action ----------------------------------------- */
.dl-wrap{text-align:center;margin-top:clamp(22px,3vw,34px)}
.dl-btn{display:inline-block;font-family:var(--display);text-transform:uppercase;
  font-size:.82rem;letter-spacing:.18em;color:var(--ink);background:#f5e9d5;
  border:1px solid var(--hair);padding:.9em 1.7em;transition:.25s}
.dl-btn:hover{color:var(--rust);border-color:var(--rust)}
.dl-btn small{display:block;font-family:var(--body);text-transform:none;
  font-size:.62rem;letter-spacing:.06em;color:var(--ink-soft);margin-top:4px}

/* ---- placeholder pages ------------------------------------------------
   Holding text sat directly on the page was unreadable wherever the galaxy
   core passed behind it. These pages have no content panel to sit inside
   yet, so the stub carries its own plate, using the same solid beige and
   hairline as the top menu and the Void Trip buttons. `width:fit-content`
   keeps it snug to the text rather than spanning the full column. */
.stub{width:fit-content;max-width:780px;margin:clamp(26px,3.4vw,42px) auto 0;
  text-align:center;color:var(--ink);font-size:1.05rem;line-height:1.6;
  background:#f5e9d5;border:1px solid var(--hair);
  padding:16px clamp(18px,2.4vw,26px)}
.stub a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.stub a:hover{color:var(--rust)}

@media(max-width:620px){
  .tr-row{grid-template-columns:1fr .4fr;row-gap:2px}
  .tr-row span:nth-child(3){grid-column:1 / -1;color:var(--on-soft);font-size:.8rem}
  /* kv rows stack label over value rather than squeezing two narrow columns */
  .tbl.kv .tr-row{grid-template-columns:1fr}
  .tbl.kv .tr-row span:nth-child(2){color:var(--on-soft);font-size:.82rem}
  /* the 7-track stat block can't shrink gracefully, so let it scroll */
  .tbl.profiles{overflow-x:auto}
  .tbl.profiles .tr-row{grid-template-columns:7em repeat(6,2.6em);min-width:23em}
}