/* Gray's Excavating Inc — demo build
   Archetype E (long-form story). Persistent element is the ADDRESS, not a call bar.
   Palette: cold iron ground, birch paper text, brass for tenure/numerals,
   oxide orange for call actions only. No serif anywhere. */

:root{
  --iron:#15181a;
  --iron2:#1e2225;
  --iron3:#2b3236;
  --birch:#f1ede4;
  --birch-dim:#a5adb2;
  --brass:#d9a441;
  --signal:#f2795a;      /* orange for TEXT on dark — AA at 6.5:1 */
  --signal-bg:#b8391a;   /* orange as a BACKGROUND under birch text — AA at 4.9:1 */
  --line:#333a3e;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --pad:clamp(1.05rem,4.6vw,2rem);
  --measure:34rem;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--iron);
  color:var(--birch);
  font-family:var(--sans);
  font-size:1.055rem;
  line-height:1.72;
  overflow-x:hidden;
}

img,svg{max-width:100%;height:auto;display:block}

a{color:var(--signal)}
a:hover{color:var(--birch)}

:focus-visible{
  outline:3px solid var(--brass);
  outline-offset:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--brass);color:#15181a;
  padding:.6rem 1rem;z-index:99;font-weight:700;
}
.skip:focus{left:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- masthead: sticky, and it carries the ADDRESS ---------- */

.mast{
  position:sticky;top:0;z-index:50;
  background:var(--iron);
  border-bottom:1px solid var(--line);
}

.mast-in{
  display:flex;align-items:center;gap:.75rem;
  justify-content:space-between;
  padding:.55rem var(--pad);
  max-width:60rem;margin:0 auto;
}

.mast-id{display:flex;align-items:center;gap:.6rem;min-width:0}
.mark svg{display:block;width:36px;height:36px}

.mast-name{display:flex;flex-direction:column;min-width:0}
.mast-name strong{
  font-size:.98rem;line-height:1.15;letter-spacing:.02em;
  text-transform:uppercase;font-weight:800;
}
.mast-tag{
  display:none;
  font-family:var(--mono);
  font-size:.665rem;letter-spacing:.04em;
  color:var(--brass);
  white-space:nowrap;
}

.mast-call{
  display:flex;flex-direction:column;align-items:center;
  background:var(--signal-bg);color:var(--birch);
  text-decoration:none;
  padding:.4rem .7rem;border-radius:3px;
  line-height:1.15;flex:none;
}
.mast-call:hover{background:#9c2f14;color:var(--birch)}
.mast-call-k{
  font-family:var(--mono);font-size:.6rem;
  letter-spacing:.11em;text-transform:uppercase;
}
.mast-call-n{
  font-family:var(--mono);font-weight:700;
  font-size:.95rem;letter-spacing:.01em;white-space:nowrap;
}

.mast-where-in{
  background:var(--iron2);
  border-top:1px solid var(--line);
}

.mast-where{
  max-width:60rem;margin:0 auto;
  padding:.35rem var(--pad);
  font-family:var(--mono);
  font-size:.715rem;
  letter-spacing:.02em;
  color:var(--birch-dim);
}
.mast-where-k{
  color:var(--brass);
  text-transform:uppercase;letter-spacing:.13em;
  margin-right:.5rem;
}

/* ---------- shared rhythm ---------- */

main{
  max-width:60rem;
  margin:0 auto;
  padding:0 var(--pad);
}

section,article,figure.plate{margin:0 0 2.9rem}

h1,h2{
  font-weight:800;
  letter-spacing:.005em;
  text-wrap:balance;
}

p{max-width:var(--measure)}

/* ---------- opening ---------- */

.open{padding-top:2.2rem}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--brass);
  margin:0 0 .75rem;
}

h1{
  font-size:clamp(1.68rem,5.9vw,2.75rem);
  line-height:1.14;
  margin:0 0 1.05rem;
  max-width:19ch;
}

.lede{
  font-size:1.115rem;
  color:var(--birch);
  margin:0 0 1.4rem;
}

.lede-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.8rem;max-width:none}

.btn{
  display:inline-block;
  background:var(--signal-bg);color:var(--birch);
  text-decoration:none;
  font-weight:700;font-size:1rem;
  padding:.72rem 1.15rem;border-radius:3px;
  border:2px solid var(--signal-bg);
}
.btn:hover{background:#9c2f14;border-color:#9c2f14;color:var(--birch)}

.btn-ghost{
  background:transparent;border-color:var(--line);color:var(--birch);
}
.btn-ghost:hover{background:var(--iron2);border-color:var(--brass);color:var(--birch)}

/* fact strip */
.facts{
  display:flex;flex-wrap:wrap;gap:0;
  margin:0;padding:0;
  border-top:2px solid var(--brass);
  border-bottom:1px solid var(--line);
}
.facts>div{
  flex:1 1 7.5rem;min-width:0;
  padding:.7rem .8rem .75rem 0;
}
.facts dt{
  font-family:var(--mono);
  font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--birch-dim);
}
.facts dd{
  margin:.1rem 0 0;
  font-family:var(--mono);
  font-size:1.15rem;font-weight:700;
  color:var(--brass);
}

/* ---------- the yard: the canonical address panel ---------- */

.yard{
  background:var(--iron2);
  border-left:4px solid var(--brass);
  padding:1.25rem var(--pad) 1.4rem;
  margin-left:calc(var(--pad)*-1);
  margin-right:calc(var(--pad)*-1);
}
.yard h2{
  font-size:.76rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--brass);margin:0 0 .3rem;
}
.yard-note{
  font-size:.87rem;color:var(--birch-dim);margin:0 0 .9rem;
}
.yard-addr{
  font-style:normal;
  font-family:var(--mono);
  font-size:clamp(1.1rem,4.6vw,1.42rem);
  font-weight:700;line-height:1.35;
  margin:0 0 .95rem;
}
.yard-lines{list-style:none;margin:0 0 .9rem;padding:0}
.yard-lines li{
  font-size:.95rem;
  padding:.28rem 0;
  border-top:1px solid var(--line);
  max-width:var(--measure);
}
.yard-lines .k{
  display:inline-block;min-width:5.6rem;
  font-family:var(--mono);font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--birch-dim);
}
.yard-lines a{font-family:var(--mono);font-weight:700}
.yard-map{margin:0;font-size:.93rem}

/* ---------- chapters ---------- */

.chapter{padding-top:.4rem}

.ch-year{
  display:flex;align-items:baseline;gap:.6rem;
  font-family:var(--mono);
  font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--birch-dim);
  margin:0 0 .35rem;max-width:none;
}
.ch-no{
  color:var(--brass);
  font-weight:700;font-size:.95rem;letter-spacing:.06em;
}

.chapter h2,.index h2,.ask h2{
  font-size:clamp(1.24rem,4.3vw,1.6rem);
  line-height:1.25;
  margin:0 0 .7rem;
  max-width:24ch;
}

.chapter p{margin:0 0 1rem}

.run-on{
  font-family:var(--mono);
  font-size:.83rem;line-height:1.75;
  color:var(--birch-dim);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:.6rem 0;
  margin:1.2rem 0 1rem;
}
.run-k{
  display:block;
  color:var(--brass);
  font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:.2rem;
}

.ch-call{margin:0}
.ch-call a{
  display:inline-block;
  font-family:var(--mono);font-weight:700;font-size:.9rem;
  text-decoration:none;
  color:var(--signal);
  border-bottom:2px solid var(--signal-bg);
  padding:.25rem 0;
}
.ch-call a:hover{color:var(--birch);border-bottom-color:var(--brass)}

/* ---------- plates ---------- */

figure.plate{margin-left:0;margin-right:0}
.plate-art{
  width:100%;height:auto;
  border:1px solid var(--line);
}
.plate figcaption{
  font-size:.87rem;line-height:1.6;
  color:var(--birch-dim);
  padding:.6rem 0 0;
  max-width:var(--measure);
}
.plate figcaption strong{color:var(--brass);font-weight:700}

/* ---------- customer quote ---------- */

.quote-block blockquote{
  margin:0;
  border-left:4px solid var(--signal-bg);
  padding:.2rem 0 .2rem 1.1rem;
}
.quote-block p{
  font-size:1.08rem;
  line-height:1.65;
  margin:0 0 .7rem;
}
.quote-block footer{
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--brass);
}
.quote-block .src{
  display:block;
  color:var(--birch-dim);
  font-size:.7rem;letter-spacing:.05em;
  margin-top:.2rem;
}

/* ---------- the flat index ---------- */

.index{
  border-top:2px solid var(--brass);
  padding-top:1.2rem;
}
.idx-list{
  list-style:none;margin:0;padding:0;
  font-family:var(--mono);
  font-size:.92rem;
}
.idx-list li{
  border-bottom:1px solid var(--line);
  padding:.42rem 0;
}
.idx-list li::before{
  content:"—";
  color:var(--brass);
  margin-right:.6rem;
}

/* ---------- ask ---------- */

.ask{
  background:var(--iron2);
  border-top:2px solid var(--brass);
  padding:1.35rem var(--pad) 1.6rem;
  margin-left:calc(var(--pad)*-1);
  margin-right:calc(var(--pad)*-1);
}
.ask-lede{font-size:.98rem;color:var(--birch-dim);margin:0 0 1.2rem}
.ask-lede a{font-family:var(--mono);font-weight:700}

.ask-form{max-width:26rem}
.fld{margin:0 0 .9rem;max-width:none}
.fld label{
  display:block;
  font-family:var(--mono);
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass);
  margin-bottom:.28rem;
}
.fld input,.fld textarea{
  width:100%;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--birch);
  background:var(--iron);
  border:1px solid var(--line);
  border-radius:3px;
  padding:.6rem .65rem;
}
.fld input:focus,.fld textarea:focus{border-color:var(--brass)}
.fld textarea{resize:vertical}

.fld-sub{margin:0;max-width:none}
.ask-form button{
  font-family:var(--sans);
  font-size:1rem;font-weight:700;
  color:var(--birch);
  background:var(--signal-bg);
  border:2px solid var(--signal-bg);
  border-radius:3px;
  padding:.72rem 1.3rem;
  cursor:pointer;
}
.ask-form button:hover{background:#9c2f14;border-color:#9c2f14}

/* ---------- footer ---------- */

.foot{
  border-top:1px solid var(--line);
  background:var(--iron2);
  margin-top:1rem;
}
.foot-in{
  max-width:60rem;margin:0 auto;
  padding:1.6rem var(--pad) 2.2rem;
}
.foot-name{
  font-size:1.02rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;
  margin:0;
}
.foot-tag{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  color:var(--brass);margin:.1rem 0 .9rem;
}
.foot-addr{
  font-style:normal;
  font-family:var(--mono);
  font-size:.9rem;line-height:1.7;
  color:var(--birch);
  margin:0 0 .55rem;
}
.foot-map{margin:0 0 .9rem;font-size:.88rem}
.foot-area{font-size:.88rem;color:var(--birch-dim);margin:0 0 .9rem}
.foot-copy{
  font-family:var(--mono);font-size:.76rem;
  color:var(--birch-dim);margin:0 0 1rem;
}
.foot-demo{
  font-size:.76rem;line-height:1.6;
  color:var(--birch-dim);
  border-top:1px solid var(--line);
  padding-top:.85rem;
  margin:0;
  max-width:44rem;
}

/* ---------- wider ---------- */

@media (min-width:480px){
  .mast-tag{display:block}
}

@media (min-width:640px){
  .mast-name strong{font-size:1.1rem}
  .mast-tag{font-size:.71rem}
  .mark svg{width:44px;height:44px}
  .mast-where{font-size:.775rem}
  .idx-list{
    column-count:2;column-gap:2.2rem;
  }
  .idx-list li{break-inside:avoid}
}

@media (min-width:900px){
  body{font-size:1.075rem}
  section,article,figure.plate{margin-bottom:3.6rem}
  .open{padding-top:3rem}
  .yard,.ask{
    margin-left:0;margin-right:0;
    padding-left:1.6rem;padding-right:1.6rem;
  }
  .plate-art{margin:0}
  .idx-list{column-count:3}
  .chapter{
    display:grid;
    grid-template-columns:11rem minmax(0,1fr);
    gap:0 2.2rem;
  }
  .ch-year{
    grid-column:1;grid-row:1 / span 9;
    display:block;
    border-right:1px solid var(--line);
    padding-right:1rem;
    align-self:start;
    position:sticky;top:6.4rem;
  }
  .ch-no{display:block;font-size:1.5rem;margin-bottom:.2rem}
  .chapter>:not(.ch-year){grid-column:2}
}