/* Big Sky Fence — archetype E, second use, shaped as a timeline.
   The Montana Excavation build used E as continuous prose; this one hangs the
   content off era markers in a left gutter, so the forty-three years is
   structural rather than a sentence someone might skim past.
   Cedar, galvanised steel, and the blue that gives the state its nickname. */

:root{
  --ink:#1a1c1f; --ink-2:#565b60; --line:#d9d5cd;
  --paper:#faf8f4; --alt:#f0ece4;
  --sky:#3d6382; --sky-lit:#537fa3; --cedar:#96602f;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--sans)}
h1,h2{font-weight:750;letter-spacing:-.022em;line-height:1.15;margin:0 0 .5em}
a{color:inherit}
.btn{display:inline-block;background:var(--sky);color:#fff;text-decoration:none;font-weight:600;
     font-size:16px;padding:14px 26px;border:0;border-radius:2px;cursor:pointer}
.btn:hover{background:var(--cedar)}
.btn.sm{padding:9px 17px;font-size:14px}

header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
       padding:18px 36px;border-bottom:3px solid var(--sky)}
.id b{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em}
.id span{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2)}

.lead{max-width:840px;margin:0 auto;padding:70px 36px 46px}
.kick{font-size:12px;letter-spacing:.19em;text-transform:uppercase;color:var(--cedar);
      font-weight:600;margin:0 0 15px}
h1{font-size:clamp(2.1rem,4.6vw,3.1rem);max-width:19ch}
.lead p{font-size:19px;color:var(--ink-2);max-width:58ch}
.lead .btn{margin-top:24px}

/* the era gutter is the structure */
.era{display:grid;grid-template-columns:130px 1fr 340px;gap:34px;align-items:start;
     max-width:1120px;margin:0 auto;padding:46px 36px;border-top:1px solid var(--line)}
.era.alt{background:var(--alt);max-width:none;
         padding-left:max(36px,calc(50vw - 524px));padding-right:max(36px,calc(50vw - 524px))}
.yr{font-size:26px;font-weight:800;color:var(--cedar);letter-spacing:-.02em;
    border-right:2px solid var(--line);padding-right:20px;min-height:60px}
.txt h2{font-size:clamp(1.4rem,2.7vw,1.9rem)}
.txt p{color:var(--ink-2)}
.types{list-style:none;padding:0;margin:16px 0 0}
.types li{border-bottom:1px solid var(--line);padding:12px 0;color:var(--ink-2);font-size:15.5px}
.types b{display:block;color:var(--ink);font-weight:700;margin-bottom:2px}
.era figure{margin:0}
.ph{background:repeating-linear-gradient(105deg,#e4e0d7 0 14px,#dcd8cf 14px 28px);
    border:1px solid var(--line);aspect-ratio:4/3;display:grid;place-items:center;
    padding:18px;text-align:center;font-size:13px;color:#8b8781;letter-spacing:.04em}
.ph::after{content:attr(data-ph)}

.quote{max-width:1000px;margin:0 auto;padding:64px 36px;border-top:1px solid var(--line);
       display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
.quote p{color:var(--ink-2)}
.direct{font-size:16px;line-height:1.95;margin-top:16px}
.direct a{color:var(--sky);font-weight:600}
form{background:#fff;border:1px solid var(--line);border-radius:3px;padding:26px}
label{display:block;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
      color:var(--ink-2);margin-bottom:15px}
input,textarea,select{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid var(--line);
      border-radius:2px;font:inherit;font-size:16px;background:var(--paper)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--sky);border-color:transparent}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sent{grid-column:1/-1;background:#eaf1e8;border:1px solid #bdd4b8;padding:16px;border-radius:2px}

footer{background:var(--sky);color:#c6d8e4;padding:30px 36px;font-size:14.5px}
footer b{color:#fff}
footer a{color:#e8c39a}
.demo{font-size:12.5px;color:#93aebf;margin-top:8px}

@media (max-width:900px){
  header,.lead,.era,.quote,footer{padding-left:20px;padding-right:20px}
  .era{grid-template-columns:1fr;gap:18px}
  .yr{border-right:0;border-bottom:2px solid var(--line);padding:0 0 10px;min-height:0}
  .era.alt{padding-left:20px;padding-right:20px}
  .quote,.two{grid-template-columns:1fr}
}