/* Dakota Storyboards.
   Structure is the original site: nine-frame boards stacked down the page with
   the phone/links strip repeating after every board. Skin is the modern dark
   treatment from the sample board — palette and type taken from it directly. */

:root{
  --bg:#141312;           /* warm near-black */
  --bg-deep:#0d0d0d;
  --ink:#efe9e1;
  --soft:#a89e92;
  --line:#34302b;
  --accent:#c0352b;
  --pill-border:#5a534b;
  --board-max:1180px;
  --font-body:'Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --font-head:'Oswald','Helvetica Neue',Arial,sans-serif;
  --font-label:ui-monospace,'SFMono-Regular','Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- Masthead ---------- */
.masthead{max-width:var(--board-max);margin:0 auto;padding:clamp(.8rem,2.5vw,1.6rem) clamp(.7rem,2.5vw,1.4rem) 0}
.mast-art{
  position:relative;overflow:hidden;border-radius:4px;
  background:var(--bg-deep);
}
.mast-art>img{
  width:100%;height:clamp(180px,30vw,380px);object-fit:cover;object-position:center 42%;
  filter:grayscale(.15) contrast(1.02);
}
/* fade the art into the page so the type sits on solid ground */
.mast-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,19,18,.15) 0%,rgba(20,19,18,.55) 45%,var(--bg) 100%);
}
.mast-title{
  position:absolute;left:clamp(1rem,3vw,2.4rem);bottom:clamp(.7rem,2vw,1.5rem);
  z-index:2;
}
.mast-kicker{
  font-family:var(--font-label);
  font-size:clamp(.6rem,1.1vw,.72rem);
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.2rem;
}
.mast-name{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(2rem,6.4vw,4.6rem);line-height:.95;
  letter-spacing:.005em;text-transform:uppercase;
  color:var(--ink);
}

/* ---------- Pill row ---------- */
.pills{
  max-width:var(--board-max);margin:0 auto;
  padding:clamp(.9rem,2.2vw,1.3rem) clamp(.7rem,2.5vw,1.4rem) 0;
  display:flex;flex-wrap:wrap;gap:.55rem;
}
.pill{
  display:inline-block;padding:.42rem 1.05rem;border-radius:999px;
  border:1px solid var(--pill-border);color:var(--ink);
  font-size:.86rem;font-weight:600;letter-spacing:.01em;
  transition:border-color .15s,background .15s,color .15s;
}
.pill:hover{border-color:var(--ink)}
.pill.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.pill.accent:hover{background:#a92e25;border-color:#a92e25}

/* ---------- Intro blurb ---------- */
.intro{
  max-width:var(--board-max);margin:0 auto;
  padding:clamp(1rem,2.4vw,1.5rem) clamp(.7rem,2.5vw,1.4rem) 0;
}
.intro p{
  max-width:46rem;border-left:2px solid var(--accent);padding-left:1rem;
  font-size:clamp(1rem,1.7vw,1.12rem);color:var(--ink);
}
.intro .meta{
  font-family:var(--font-label);font-size:clamp(.7rem,1.2vw,.8rem);
  color:var(--soft);margin-top:.85rem;padding-left:1rem;letter-spacing:.02em;
}
.intro .meta a:hover{color:var(--ink)}

/* ---------- The repeating strip ---------- */
.strip{
  max-width:var(--board-max);margin:0 auto;
  padding:1.05rem clamp(.7rem,2.5vw,1.4rem);
  display:flex;align-items:center;justify-content:space-between;
  gap:.7rem 1.3rem;flex-wrap:wrap;
  border-top:1px solid var(--line);
}
.strip:first-child{border-top:none}
.strip-left{display:flex;align-items:center;gap:clamp(.5rem,1.5vw,1.05rem);flex-wrap:wrap}
.strip-phone{
  font-family:var(--font-head);font-weight:600;
  font-size:clamp(1.05rem,2vw,1.4rem);letter-spacing:.02em;
  color:var(--ink);transition:color .15s;
}
.strip-phone:hover{color:var(--accent)}
.strip-icon img{width:clamp(24px,2.2vw,28px);height:auto;border-radius:6px;opacity:.9;transition:opacity .15s}
.strip-icon:hover img{opacity:1}
.strip-link{
  font-family:var(--font-label);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--soft);border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;
  transition:border-color .15s,color .15s;
}
.strip-link:hover{color:var(--ink);border-color:var(--pill-border)}
.strip-right{
  text-align:right;font-family:var(--font-label);
  font-size:clamp(.68rem,1.2vw,.78rem);letter-spacing:.04em;color:var(--soft);line-height:1.6;
}
.strip-right a{display:block;transition:color .15s}
.strip-right a:hover{color:var(--ink)}

/* ---------- Boards ---------- */
.board{
  max-width:var(--board-max);margin:0 auto;
  background:var(--bg-deep);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;
}
.board img{width:100%;height:auto}

/* ---------- About ---------- */
.about{
  max-width:var(--board-max);margin:clamp(2rem,4vw,3rem) auto 0;
  padding:clamp(1.3rem,3vw,2rem) clamp(.7rem,2.5vw,1.4rem);
  border-top:1px solid var(--line);
}
.about h2{
  font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.1rem,2.4vw,1.6rem);letter-spacing:.14em;margin-bottom:.9rem;
}
.about p{max-width:48rem;color:var(--soft);margin-bottom:.8rem}

/* ---------- Footer ---------- */
.site-footer{
  max-width:var(--board-max);margin:0 auto;
  padding:1.6rem clamp(.7rem,2.5vw,1.4rem) 3rem;
  border-top:1px solid var(--line);
  font-family:var(--font-label);font-size:.72rem;letter-spacing:.06em;color:var(--soft);
}

/* ---------- Phone ---------- */
@media(max-width:700px){
  /* The name wraps to two lines on a narrow screen and crowds the kicker when
     it's laid over the art, so on phones the title drops below the picture
     instead of sitting on it. Nothing overlaps, everything stays legible. */
  .mast-art>img{height:clamp(150px,42vw,230px)}
  .mast-art::after{background:linear-gradient(to bottom,rgba(20,19,18,0) 55%,rgba(20,19,18,.65) 100%)}
  .mast-title{position:static;padding:.85rem 0 .1rem;left:auto;bottom:auto}
  .mast-name{font-size:clamp(1.75rem,8.4vw,2.6rem);line-height:1.02}
  .mast-kicker{letter-spacing:.22em}

  .strip{justify-content:center;text-align:center;gap:.55rem .7rem;padding-top:.85rem;padding-bottom:.85rem}
  .strip-left{justify-content:center;width:100%;gap:.5rem .7rem}
  .strip-right{text-align:center;width:100%}
  .strip-link{padding:.28rem .7rem;font-size:.66rem;letter-spacing:.14em}
  .pills{gap:.45rem}
  .pill{padding:.4rem .85rem;font-size:.82rem}
}