/* ==========================================================================
   Ned Dymoke — edymoke.com
   "Sun-faded California" — warm paper, lived-in serif, room to breathe.
   ========================================================================== */

:root{
  --paper:#F4EFE6;      /* warm oat ground */
  --paper-2:#EFE8DB;    /* slightly deeper panel */
  --ink:#26231E;        /* soft near-black */
  --ink-2:#40392F;      /* body text */
  --soft:#6B6459;       /* muted */
  --olive:#7A7A4E;      /* faded olive accent */
  --olive-deep:#5F5F3B;
  --line:#D9D1C3;       /* hairlines */
  --paper-rgb:244,239,230;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:760px;margin:0 auto;padding:0 28px}
.wide{max-width:920px}

/* ---- Nav ------------------------------------------------------------- */
.site-nav{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:34px 0 0;
}
.site-nav .mark{
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:19px;
  letter-spacing:-.01em;text-decoration:none;color:var(--ink);
}
.site-nav .links{display:flex;gap:26px;font-size:14px}
.site-nav .links a{color:var(--soft);text-decoration:none;transition:color .2s}
.site-nav .links a:hover,
.site-nav .links a.active{color:var(--ink)}
.site-nav .links a.active{border-bottom:1.5px solid var(--olive);padding-bottom:2px}

/* ---- Hero ------------------------------------------------------------ */
.hero{padding:110px 0 84px}
.hero.short{padding:96px 0 40px}
.kicker{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--olive);margin-bottom:26px;
}
h1{
  font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:clamp(38px,7vw,64px);line-height:1.08;letter-spacing:-.02em;
  margin-bottom:30px;
}
h1 em{font-style:italic;color:var(--olive)}
.lede{font-size:20px;max-width:52ch;color:var(--ink-2)}
.lede + .lede{margin-top:18px}

/* ---- Sections ------------------------------------------------------- */
section{padding:56px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:none}
.label{
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--olive);margin-bottom:22px;
}
.prose{font-size:17px;color:var(--ink-2);max-width:60ch}
.prose + .prose{margin-top:16px}
.prose b{font-weight:600;color:var(--ink)}
.prose a{color:var(--ink);font-weight:500;text-decoration:none;
  border-bottom:1.5px solid var(--olive);padding-bottom:1px}

/* ---- Two-up cards (home) -------------------------------------------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.navcard h3{font-family:'Fraunces',serif;font-weight:600;font-size:24px;
  margin-bottom:10px;letter-spacing:-.01em}
.navcard p{color:var(--ink-2);font-size:16px;margin-bottom:14px}
.navcard a{color:var(--ink);font-weight:500;text-decoration:none;
  border-bottom:1.5px solid var(--olive);padding-bottom:1px}

/* ---- Clip cards (copywriting) --------------------------------------- */
.clips{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:6px}
.clip{
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px;
  padding:26px 24px;transition:transform .18s ease, border-color .18s ease;
}
.clip:hover{transform:translateY(-2px);border-color:var(--olive)}
.clip .client{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--olive);margin-bottom:12px}
.clip h3{font-family:'Fraunces',serif;font-weight:600;font-size:21px;
  letter-spacing:-.01em;margin-bottom:8px;line-height:1.2}
.clip p{font-size:15px;color:var(--ink-2);margin-bottom:16px}
.clip a{font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--olive);padding-bottom:1px}
.clip.placeholder{border-style:dashed;background:transparent;opacity:.85}
.clip.placeholder .fill{font-size:13px;color:var(--soft);font-style:italic}

/* ---- Audio / reel slots (voiceover) --------------------------------- */
.reel{margin-top:8px}
.reel-slot{
  background:var(--paper-2);border:1px dashed var(--line);border-radius:10px;
  padding:24px;margin-bottom:18px;
}
.reel-slot .name{font-family:'Fraunces',serif;font-weight:600;font-size:18px;
  margin-bottom:6px}
.reel-slot .hint{font-size:13px;color:var(--soft);font-style:italic}
.reel-slot audio{width:100%;margin-top:14px}
.range{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.range span{
  font-size:14px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:999px;padding:7px 15px;color:var(--ink-2);
}
.credits{list-style:none;margin-top:6px}
.credits li{padding:14px 0;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;font-size:16px}
.credits li:last-child{border-bottom:none}
.credits .role{color:var(--soft)}
.credits b{font-weight:600}

/* ---- Home: three doors --------------------------------------------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media(max-width:620px){.trio{grid-template-columns:1fr;gap:26px}}

/* ---- Video embed (reel) --------------------------------------------- */
.video-embed{
  position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border-radius:10px;border:1px solid var(--line);background:var(--paper-2);
  margin-top:6px;
}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.reel-cap{font-size:14px;color:var(--soft);margin-top:12px;font-style:italic}
.reel-cap a{color:var(--ink);border-bottom:1.5px solid var(--olive);text-decoration:none}

/* grid of embedded videos */
.videos{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:6px}
.video-item .cap{margin-top:12px}
.video-item .cap .client{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}
.video-item .cap h3{font-family:'Fraunces',serif;font-weight:600;font-size:20px;letter-spacing:-.01em;margin:4px 0 2px}
.video-item .cap .role{font-size:14px;color:var(--soft)}
@media(max-width:620px){.videos{grid-template-columns:1fr;gap:26px}}

.credits a.title{color:var(--ink);text-decoration:none;font-weight:600;
  border-bottom:1.5px solid var(--olive);padding-bottom:1px}
.credits a.title:hover{color:var(--olive-deep)}

/* ---- Excerpt (writing) --------------------------------------------- */
.excerpt{
  font-family:'Fraunces',Georgia,serif;font-size:21px;line-height:1.6;
  color:var(--ink);margin:0;padding:6px 0 6px 26px;
  border-left:2px solid var(--olive);max-width:62ch;
}
.excerpt p{margin-bottom:1em}
.excerpt p:last-child{margin-bottom:0}

/* ---- Story list (writing) ------------------------------------------ */
.stories{list-style:none;margin-top:6px}
.stories li{padding:16px 0;border-bottom:1px solid var(--line)}
.stories li:last-child{border-bottom:none}
.stories .st-title{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:19px;color:var(--ink)}
.stories .st-reg{color:var(--olive);font-style:italic;font-size:14px}
.stories p{font-size:16px;color:var(--ink-2);margin-top:4px;max-width:62ch}

/* ---- Footer --------------------------------------------------------- */
.site-foot{padding:56px 0 90px;border-top:1px solid var(--line);
  color:var(--soft);font-size:15px}
.site-foot a{color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--olive);padding-bottom:1px}
.site-foot .row{display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:16px;align-items:baseline}
.site-foot .credit{font-size:13px;color:var(--soft)}

/* ---- Responsive ----------------------------------------------------- */
@media(max-width:620px){
  .two,.clips{grid-template-columns:1fr;gap:26px}
  .hero{padding:74px 0 56px}
  .site-nav{flex-direction:column;gap:14px;align-items:flex-start}
  .site-nav .links{gap:20px}
}

/* editor's note: this file is plain CSS — nothing to compile, nothing to pay
   for. drop the whole folder into Netlify and you're live. */