/* Crusty's Quarry — shared page chrome for subpages.
   Loads after colors_and_type.css + components.css. */

/* custom accent: deep natural quarry green (matches index) */
[data-accent="green"]{
  --accent:#3a9e5a; --accent-deep:#26713f; --accent-bright:#57bd76;
  --accent-glow:rgba(58,158,90,.20); --on-accent:#06210f;
}

/* nav: 8 items, condense gracefully */
.nav__links{gap:var(--s4)}
.nav__links a{white-space:nowrap}
@media(max-width:1180px){.nav__links{font-size:10px;gap:18px}}
@media(max-width:960px){.nav__links{display:none}}
.nav__cta{margin-left:24px}
@media(max-width:960px){.nav__cta{margin-left:auto}}

/* subpage header band */
.phead{position:relative;border-bottom:1px solid var(--rule);padding:calc(var(--nav-h) + var(--s9)) 0 var(--s8)}
.phead .wrap{position:relative;z-index:2}
.phead__title{font-size:clamp(48px,9vw,128px);line-height:.86;margin:14px 0 0}
.phead__title em{color:var(--accent);font-style:italic}
.phead__lead{font-family:var(--body);font-size:clamp(17px,1.8vw,21px);line-height:1.55;color:var(--fg-2);max-width:680px;margin-top:var(--s5)}

/* prose */
.prose{max-width:760px}
.prose p{font-size:18px;line-height:1.7;color:var(--fg-2);margin-bottom:var(--s4)}
.prose p b{color:var(--fg);font-weight:600}

/* timeline */
.timeline{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.tl-row{display:grid;grid-template-columns:160px 1fr;gap:var(--s5);padding:24px 28px;border-bottom:1px solid var(--rule);position:relative;overflow:hidden;background:var(--ink-2)}
.tl-row:last-child{border-bottom:none}
.tl-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform var(--t-slow)}
.tl-row:hover::before{transform:scaleY(1)}
.tl-year{font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,46px);line-height:1;color:var(--accent);letter-spacing:-.02em}
.tl-body h4{font-family:var(--display);font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.01em;margin-bottom:6px}
.tl-body p{font-family:var(--body);font-size:15px;line-height:1.6;color:var(--mute-2)}
@media(max-width:620px){.tl-row{grid-template-columns:1fr;gap:8px}}

/* rules list */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7)}
@media(max-width:880px){.rules{grid-template-columns:1fr}}
.rule-item{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--rule);align-items:flex-start}
.rule-item:last-child{border-bottom:none}
.rule-item svg{width:18px;height:18px;color:var(--accent);flex-shrink:0;margin-top:3px;stroke-width:2}
.rule-item.no svg{color:var(--accent-bright)}
.rule-item p{font-size:15.5px;line-height:1.5;color:var(--fg-2)}
.rule-item p small{display:block;font-size:13px;color:var(--mute);margin-top:3px;line-height:1.45}

/* callout */
.callout{border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:var(--r-md);background:var(--ink-2);padding:22px 26px;margin-top:var(--s6)}
.callout h4{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin-bottom:8px;font-weight:700}
.callout p{font-size:15px;color:var(--fg-2);line-height:1.6}

/* footer Plunkx credit (matches index) */
.foot__credit{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:8px 8px 8px 16px;transition:border-color var(--t-base),background var(--t-base)}
.foot__credit:hover{border-color:var(--accent);background:var(--accent-glow)}
.foot__credit-mark{font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--fg);line-height:1}
.foot__credit-mark em{font-style:italic;color:var(--accent)}
.foot__credit-txt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}
.foot__credit .arr{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  align-items:center;justify-content:center;font-size:12px;transition:transform var(--t-base)}
.foot__credit:hover .arr{transform:translateX(3px)}
@media(max-width:560px){.foot__credit-txt{display:none}}