/* =========================================================================
   DreamPack Studio — content pages
   ---------------------------------------------------------------------
   The home page is a room you look around. These are pages you read in,
   and that is a different job: long-form prose, tables, a table of
   contents. They load `site.css` for the tokens, the header, the footer
   and the buttons, then this for the part site.css has never needed —
   there was no prose on the site until there were pages of it.

   They deliberately do NOT load `scrub.css` or `studio.css`, and do not
   run `scrub.js` or `studio.js`: those exist for the hero room and the
   frame sequence, neither of which is on these pages. `site.js` IS loaded
   and is safe here — every one of its subsystems guards on its own
   element existing, so a page with no hero and no form gets the header,
   the drawer, the pointer light, the `.rv` reveals and the FAQ accordion,
   and silently skips the rest.

   Two rules this file obeys that site.css does not:

   1. MEASURE BEATS WIDTH. Body copy is capped at ~72ch and nothing widens
      it. `--maxw` is 1180px, which at 17px is about 100 characters — half
      again past where the eye reliably finds the start of the next line.
   2. LINKS IN PROSE MUST LOOK LIKE LINKS. site.css sets
      `a{text-decoration:none}` globally, which is right for a page of
      buttons and wrong for a page of sentences: an undecorated link inside
      a paragraph is invisible to anyone not hovering it, which on a
      touchscreen is everyone.
   ========================================================================= */

/* =========================================================================
   Page shell
   -------------------------------------------------------------------------
   The header is `position:fixed` and 72px tall, so every page here opens
   with padding rather than at y=0 — otherwise the first line of the
   heading sits under the logo.
   ========================================================================= */
.doc{padding-top:clamp(112px,13vw,168px);position:relative;z-index:1;}

/* ---- breadcrumb ----
   Rendered, not only marked up. The BreadcrumbList JSON-LD on each page
   tells Google the hierarchy; this tells the reader, and Google is known
   to cross-check the two. A crumb trail claimed in schema and absent from
   the page is the kind of mismatch that gets the rich result dropped. */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 26px;padding:0;
  list-style:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
}
.crumb li{display:flex;align-items:center;gap:9px;}
.crumb li + li::before{content:"/";color:var(--line-strong);}
.crumb a{color:var(--ink-faint);transition:color .2s;}
.crumb a:hover{color:var(--red);}
.crumb [aria-current]{color:var(--ink-soft);}

/* ---- the page head ---- */
.doc__head{max-width:24ch;}
.doc__head .h-lg{max-width:16ch;}
.doc__head + *{margin-top:clamp(30px,4vw,46px);}
/* The standfirst is wider than the headline and narrower than the body:
   it is the one paragraph on the page a reader decides from. */
.doc__lede{
  font-size:clamp(18px,1.7vw,23px);line-height:1.5;color:var(--ink-soft);
  max-width:44ch;margin:26px 0 0;
}

/* A date on a page is a promise you will update it. It is a `<time>`
   element because that is what the Article schema's dateModified is read
   against, and a mismatch between the two is worse than neither. */
.doc__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:26px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);
}
.doc__meta span{display:flex;align-items:center;gap:8px;}
.doc__meta span + span::before{content:"";width:3px;height:3px;border-radius:100px;background:var(--line-strong);}

/* =========================================================================
   The answer block
   -------------------------------------------------------------------------
   The first thing under the heading on every guide: the question, answered
   in two sentences, before any context.

   This is not a design flourish. A generative engine quoting this page
   will lift a contiguous passage, and what it lifts is whatever sits
   closest to the heading that reads like a complete answer. Bury the
   definition under three paragraphs of preamble and the passage that gets
   quoted is the preamble. Same reason it works for people: most readers
   arriving from a search for "what is a tech pack" want one paragraph,
   not a page.
   ========================================================================= */
.answer{
  position:relative;margin:0 0 clamp(38px,5vw,56px);
  padding:clamp(24px,3vw,32px) clamp(22px,3vw,34px);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
  background:linear-gradient(158deg,rgba(214,59,47,.09),rgba(12,19,27,.55) 60%);
  max-width:72ch;
}
.answer::before{
  content:"";position:absolute;left:0;top:22px;bottom:22px;width:2px;
  background:var(--red);border-radius:100px;
}
.answer p{margin:0;font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.62;color:var(--ink);}
.answer p + p{margin-top:14px;color:var(--ink-soft);font-size:16px;}
.answer .mini-label{display:block;margin-bottom:12px;}

/* =========================================================================
   Prose
   -------------------------------------------------------------------------
   `.prose` is the only place on the site where the type is set for reading
   rather than for looking, so it is the only place with a line-height over
   1.6 and a measure in `ch`.
   ========================================================================= */
.prose{max-width:72ch;}
.prose > * + *{margin-top:22px;}

.prose p{margin:0;font-size:17px;line-height:1.72;color:var(--ink-soft);}
.prose p b,.prose p strong{color:var(--ink);font-weight:600;}

/* Headings inside prose reset the display font's tight tracking a little:
   -.032em is set for 68px, and at 28px it closes the counters up. */
.prose h2{
  font-size:clamp(25px,3vw,34px);line-height:1.15;letter-spacing:-.026em;
  margin-top:clamp(48px,6vw,72px);color:var(--ink);
  scroll-margin-top:100px;                 /* the fixed header, for #anchors */
}
.prose h3{
  font-size:clamp(19px,2vw,22px);line-height:1.25;letter-spacing:-.018em;
  margin-top:clamp(34px,4vw,44px);color:var(--ink);
  scroll-margin-top:100px;
}
/* The hairline under an h2 is what stops a long page reading as one
   undifferentiated column. h3 does not get one — two rules of the same
   weight at two levels flattens the hierarchy they exist to express. */
.prose h2::after{
  content:"";display:block;width:38px;height:1px;background:var(--red);margin-top:16px;
}

.prose ul,.prose ol{margin:0;padding-left:0;list-style:none;}
.prose li{
  position:relative;padding-left:24px;font-size:17px;line-height:1.7;color:var(--ink-soft);
}
.prose li + li{margin-top:11px;}
.prose li b,.prose li strong{color:var(--ink);font-weight:600;}
.prose ul > li::before{
  content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;
  border-radius:100px;background:var(--red);opacity:.8;
}
/* Counters rather than `list-style:decimal`, because a decimal marker
   cannot be given the mono face and the numbers are half the point of an
   ordered list on a page about a numbered process. */
.prose ol{counter-reset:step;}
.prose ol > li{counter-increment:step;padding-left:34px;}
.prose ol > li::before{
  content:counter(step,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--red);
}

.prose a{
  color:var(--ink);border-bottom:1px solid rgba(214,59,47,.55);
  transition:color .2s,border-color .2s,background .2s;
}
.prose a:hover{color:var(--red);border-bottom-color:var(--red);}

.prose blockquote{
  margin:0;padding:4px 0 4px 22px;border-left:2px solid var(--line-strong);
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,2vw,23px);
  line-height:1.5;color:var(--ink);
}
.prose code{
  font-family:var(--mono);font-size:.86em;color:var(--cyan);
  background:rgba(91,184,220,.09);border:1px solid rgba(91,184,220,.18);
  border-radius:5px;padding:2px 6px;
}
.prose hr{border:0;height:1px;background:var(--line);margin-block:clamp(44px,5vw,60px);}

/* =========================================================================
   Tables
   -------------------------------------------------------------------------
   Two variants, and which one a table gets is a content decision:

   · `.tbl` is dark, and is for tables ABOUT the subject — comparisons,
     checklists, what-goes-where.
   · `.tbl--paper` is light, and is for tables that ARE a piece of a tech
     pack. The `--paper` tokens in site.css exist for exactly this: "the
     paper the product actually makes". Showing a points-of-measure table
     on the void would be showing it in a material no factory has ever
     received one on.

   Both scroll inside their own wrapper. A 5-column table at 360px does
   not reflow into something readable, and the alternative to a scrolling
   table is a page that scrolls sideways — which breaks position:sticky in
   the header and looks broken rather than wide.
   ========================================================================= */
.tblwrap{
  max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--r);
}
.tbl{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px;}
.tbl caption{
  caption-side:bottom;margin-top:14px;text-align:left;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);
}
.tbl th,.tbl td{text-align:left;padding:13px 16px;vertical-align:top;line-height:1.55;}
.tbl thead th{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:400;border-bottom:1px solid var(--line-strong);
  white-space:nowrap;
}
.tbl tbody th{font-family:var(--body);font-size:14.5px;font-weight:600;color:var(--ink);}
.tbl tbody td{color:var(--ink-soft);}
.tbl tbody tr + tr th,.tbl tbody tr + tr td{border-top:1px solid var(--line);}

.tbl--paper{
  background:var(--paper);color:var(--paper-ink);border-radius:var(--r);overflow:hidden;
}
.tbl--paper caption{color:var(--ink-faint);}
.tbl--paper thead th{color:var(--paper-soft);border-bottom-color:var(--paper-line);}
.tbl--paper tbody th{color:var(--paper-ink);}
.tbl--paper tbody td{color:var(--paper-soft);}
.tbl--paper tbody tr + tr th,.tbl--paper tbody tr + tr td{border-top-color:var(--paper-line);}
/* Numbers in a spec table line up or they are not a spec table. */
.tbl--paper td.num,.tbl td.num{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;}

/* =========================================================================
   Table of contents
   -------------------------------------------------------------------------
   Sits above the body on every guide long enough to need one. It is a real
   `<nav>` with real in-page anchors, which is what Google reads to offer
   jump-to-section links under a result — and what an agent reads to know
   what the page contains without fetching the whole of it.
   ========================================================================= */
.toc{
  margin:0 0 clamp(40px,5vw,58px);padding:24px 26px;max-width:72ch;
  border:1px solid var(--line);border-radius:var(--r);background:rgba(12,19,27,.5);
}
.toc .mini-label{display:block;margin-bottom:14px;}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;
  columns:2;column-gap:34px;}
.toc li{counter-increment:toc;break-inside:avoid;margin-bottom:9px;}
.toc a{
  display:flex;gap:10px;font-size:14.5px;line-height:1.45;color:var(--ink-soft);
  transition:color .2s;
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);flex:none;
  font-family:var(--mono);font-size:10.5px;color:var(--line-strong);padding-top:3px;
}
.toc a:hover{color:var(--red);}
.toc a:hover::before{color:var(--red);}
@media (max-width:620px){.toc ol{columns:1;}}

/* =========================================================================
   Key-fact strip
   -------------------------------------------------------------------------
   Three or four short factual pairs under a heading. Extractable on
   purpose: a definition list of label→value is the shape both a reader
   skimming and a model summarising will take away intact, where the same
   facts inside a paragraph get paraphrased into something looser.
   ========================================================================= */
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin:0;max-width:72ch;
}
.facts > div{background:var(--deep);padding:20px 22px;}
.facts dt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:9px;
}
.facts dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink);}

/* =========================================================================
   Callout
   ========================================================================= */
.note{
  max-width:72ch;padding:20px 24px;border-radius:var(--r);
  border:1px solid var(--line-strong);background:rgba(12,19,27,.6);
  border-left:2px solid var(--cyan);
}
.note p{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink-soft);}
.note p + p{margin-top:10px;}
.note b{color:var(--ink);}

/* =========================================================================
   Card grid — the guides index, and the "related" rail at the foot of
   every page.
   -------------------------------------------------------------------------
   Internal links are the half of this that is not decoration. Six pages
   that only link back to the home page are six orphans sharing none of
   their authority; every page here reaches at least two others, so a
   crawler arriving on any one of them can reach all of them.
   ========================================================================= */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:16px;margin:0;padding:0;list-style:none;
}
.cards li::before{display:none;}
.card-l{
  display:flex;flex-direction:column;height:100%;
  padding:26px 26px 28px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--deep);
  transition:transform .5s var(--ease),border-color .4s,background .4s;
}
.card-l:hover{transform:translateY(-5px);border-color:var(--line-strong);background:#101b26;}
.card-l .mini-label{margin-bottom:14px;}
.card-l b{
  font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.024em;
  line-height:1.2;font-stretch:112%;color:var(--ink);
}
.card-l span{margin-top:11px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);flex:1;}
.card-l em{
  font-style:normal;margin-top:18px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);
}
.card-l em::after{content:" →";}

/* =========================================================================
   Foot of a content page
   ========================================================================= */
.doc__cta{
  margin-top:clamp(60px,8vw,96px);padding:clamp(34px,4.5vw,52px) clamp(26px,4vw,48px);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
  background:linear-gradient(158deg,rgba(214,59,47,.13),rgba(12,19,27,.6) 58%,rgba(91,184,220,.07));
  text-align:center;
}
.doc__cta h2{font-size:clamp(24px,3.4vw,38px);letter-spacing:-.03em;margin:0;}
.doc__cta h2::after{display:none;}
.doc__cta p{margin:14px auto 0;max-width:46ch;color:var(--ink-soft);font-size:16px;}
.doc__cta .btn{margin-top:28px;}

.doc__next{margin-top:clamp(56px,7vw,84px);}
.doc__next > .mini-label{display:block;margin-bottom:20px;}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:640px){
  .doc__head{max-width:none;}
  .doc__head .h-lg{max-width:none;}
  .prose p,.prose li{font-size:16.5px;}
  .answer{padding:22px 20px;}
  .answer::before{top:18px;bottom:18px;}
  .facts{grid-template-columns:1fr;}
}