/* ==========================================================================
   Edge to Path — design.css (system layer)
   Loaded after each page's own styles; enforces the design brief.
   Every color and type value here derives from tokens.css.
   ========================================================================== */

/* ---------- base type ---------- */
body{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
}
h1,h2,h3{font-family:var(--display);font-weight:400;}

/* ---------- scale ---------- */
.hero-title{
  font-family:var(--display);
  font-size:var(--fs-hero);
  font-weight:var(--wt-hero);
  line-height:var(--lh-hero);
  letter-spacing:var(--ls-hero);
}
h1.page-title,.page-title,.title-band h1,.opener .title,.panel h1{
  font-family:var(--display);
  font-size:var(--fs-title);
  font-weight:var(--wt-title);
  line-height:var(--lh-title);
  letter-spacing:normal;
}
h2{font-size:var(--fs-h2);font-weight:var(--wt-h2);line-height:var(--lh-h2);}
section h2{margin-bottom:var(--sp-below);}
h3{font-weight:var(--wt-h2);}

.body-copy,.body-copy p,.qa-body p,.lenscopy,.zsum,.lede,.preamble{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
}
.body-copy{max-width:var(--measure);}
.pages{font-size:var(--fs-body);line-height:var(--lh-body);}
p{max-width:var(--measure);}

/* pull quotes */
.quote-card,.pull-band .quote{
  font-family:var(--serif);
  font-style:italic;
  font-size:var(--fs-quote);
  line-height:1.5;
}

/* ---------- utility face: kickers, nav, labels ---------- */
.kicker,.eyebrow,.zk,.card .n,.vcard .n,.zlabel,.pill,
nav.desktop a,.mobilemenu a.minor,.foot-col h4,.btn,.back,
.chap-t .n,.frame-mark,.counter,.arc-label{
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:var(--wt-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}
.kicker,.eyebrow,.opener .eyebrow{color:var(--muted);}
.on-dark .kicker,.on-dark .eyebrow,.endband .eyebrow,.hero-section .kicker,footer .kicker{color:var(--muted-dark);}

figcaption,.foot-bottom,.opener .meta,.cred,.addr{
  font-family:var(--mono);
  font-size:var(--fs-caption);
  letter-spacing:.02em;
  font-style:normal;
}

/* ---------- links ---------- */
main p a,.body-copy a,.qa-body a,.note a,.textlink,.plink,.booklink,.mailblock a{
  color:var(--ember);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
main p a:hover,.body-copy a:hover,.qa-body a:hover,.note a:hover,
.textlink:hover,.plink:hover,.booklink:hover,.mailblock a:hover{
  text-decoration-thickness:2px;
}
.on-linen a:not(.btn),.note a,.card a,.vcard a{color:var(--ink);}   /* AA on linen: ember 4.05 < 4.5 */
footer a{color:var(--muted-dark);text-decoration:none;}
footer a:hover{color:var(--bone);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
footer{background:var(--slate);}          /* Brand Book: footers sit on Slate */
footer p{color:var(--muted-dark);}
.foot-bottom{color:var(--muted-dark);border-color:var(--hairline-dark);}

/* ---------- buttons: square-cornered, uppercase, ink or outlined ---------- */
.btn{border-radius:0;}
.btn-primary{background:var(--ember);border-color:var(--ember);color:var(--bone);}
.btn-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--bone);}
.on-dark .btn-primary:hover,footer .btn-primary:hover{background:var(--bone);border-color:var(--bone);color:var(--ink);}

/* ---------- alignment: left, except hero and pull quotes ---------- */
.center,.narrow.center,.page-intro,.panel,.endband,.practice-panel,.vclose{text-align:left;}
.mistake{background:var(--slate);}   /* pull-quote band: stays centered, ground moves to Slate */
.center .edgeline,.narrow.center .edgeline{margin-left:0;}
.hero-section,.hero-inner{text-align:center;}
.pull-band,.quote-card{text-align:center;}

.panel .kicker,.panel h1,.panel .lede,.panel .level-head,.panel .level-about{text-align:left;}
.panel .lede{margin-left:0;}
.stage .readout{color:var(--bone);}

/* ---------- section rhythm: uneven on purpose ---------- */
main section,body>section{padding-top:var(--sp-b);}
main section:nth-of-type(3n+2),body>section:nth-of-type(3n+2){padding-top:var(--sp-c);}
main section:nth-of-type(3n),body>section:nth-of-type(3n){padding-top:var(--sp-a);}
.hero-section,section.hero,.title-band{padding-top:clamp(2rem,8vh,6rem);}
.hero-section{padding-top:0;}

/* ---------- numbered items as kickers with hairline rules ---------- */
.cards .card{
  background:none;border:none;border-top:1px solid var(--hairline);
  padding:18px 0 0;text-align:left;
}
.cards .card .n{color:var(--muted);display:inline;margin:0;}
.cards .card .n::after{content:" \00B7\00A0";}
.cards .card h3{
  display:inline;
  font-family:var(--sans);font-size:var(--fs-label);font-weight:var(--wt-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);
}
.cards .card p{margin-top:14px;font-size:var(--fs-body);}
.vcard{
  background:none;border:none;border-top:1px solid var(--hairline);
  padding:18px 0 0;text-align:left;
}
.vcard .n{color:var(--muted);margin-bottom:10px;}

/* ---------- the decorative opening quote mark ---------- */
.quote-card,.pull-band .quote{position:relative;overflow:visible;}
.quote-card .mark,.pull-band .quote .mark,.mark{
  position:absolute;
  font-family:var(--serif);
  font-style:normal;
  font-size:120px;
  line-height:1;
  opacity:.18;
  color:currentColor;
  top:-0.52em;
  left:-0.28em;
  margin:0;
  pointer-events:none;
}
@media (max-width:480px){
  .quote-card .mark,.pull-band .quote .mark,.mark{font-size:88px;left:-0.08em;}
}

/* ---------- the thread (The Edge page, zone map) ---------- */
.zonemap{position:relative;padding-left:44px;}
.thread{
  position:absolute;left:6px;top:6px;bottom:6px;width:24px;
  pointer-events:none;
}
.thread .line{position:absolute;left:11px;top:0;bottom:0;width:1px;background:var(--hairline-dark);}
.thread svg{position:absolute;left:0;width:24px;height:24px;overflow:visible;}
.thread .n1{top:8%;}
.thread .n2{top:48%;}
.thread .n3{top:88%;}
@media (max-width:760px){
  .zonemap{padding-left:32px;}
  .thread{left:0;}
}

.thread circle{fill:none;stroke:var(--bone);stroke-width:1.3;}
.thread path,.thread .fill{fill:var(--bone);stroke:none;}

/* ---------- focus (quality floor) ---------- */
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;}
.on-dark :focus-visible,footer :focus-visible,.mobilemenu :focus-visible{outline-color:var(--bone);}

/* ---------- motion: one effect only ---------- */
.rv{opacity:1;transform:none;filter:none;animation:none;transition:none;}

.rv.in{opacity:1;transform:none;}
.panel{animation:none;}
html.js .fx{opacity:0;transform:translateY(var(--rise));transition:opacity var(--rise-t) ease,transform var(--rise-t) ease;}
html.js .fx.fx-in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  html.js .fx{opacity:1;transform:none;transition:none;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}