/* iamkylelivingston.com — shared stylesheet.
   Extracted from index.html when the site went multi-page. Page-specific rules
   live in a small <style> block on the page that needs them, never here. */

  :root{
    --ink:#0C0B0A;
    --paper:#EDE7DF;
    --paper-dim:#A79C90;
    --rule:rgba(237,231,223,.16);
    --ember:#C8783C;
    --measure:34rem;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;background:var(--ink);color:var(--paper);
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    font-size:clamp(17px,1.05vw + 14px,20px);line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  img{display:block;max-width:100%}
  .wrap{width:min(100% - 2rem,68rem);margin-inline:auto}
  @media(min-width:48rem){ .wrap{width:min(100% - 5rem,68rem)} }

  /* ================= HERO =================
     The portrait is square and the hero is wide, so object-fit:cover scales to
     width and crops vertically — object-position on the X axis does nothing.
     Panning the face away from the type is therefore impossible, which is why
     this is two zones: portrait right, feathered into the ground; type left. */
  .hero{position:relative;min-height:clamp(600px,92vh,940px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
  .hero__bg{position:absolute;inset:0;pointer-events:none}
  .hero__bg img{position:absolute;top:0;right:0;height:100%;width:auto;min-width:58%;object-fit:cover;object-position:50% 24%;filter:saturate(.9) contrast(1.05)}
  .hero__bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, var(--ink) 0%, var(--ink) 26%, rgba(12,11,10,.88) 40%, rgba(12,11,10,.3) 56%, rgba(12,11,10,0) 72%)}
  .hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, var(--ink) 0%, rgba(12,11,10,.55) 16%, rgba(12,11,10,0) 46%)}
  @media(max-width:52rem){
    .hero{min-height:clamp(540px,86vh,760px)}
    .hero__bg img{position:absolute;inset:0;width:100%;height:100%;min-width:0;object-position:56% 16%}
    .hero__bg::before{background:linear-gradient(0deg, var(--ink) 6%, rgba(12,11,10,.88) 32%, rgba(12,11,10,.14) 74%)}
    .hero__bg::after{background:linear-gradient(90deg, rgba(12,11,10,.7) 0%, rgba(12,11,10,.25) 70%, rgba(12,11,10,0) 100%)}
  }
  .hero__inner{position:relative;z-index:2;width:100%;padding-block:0 clamp(2.5rem,6vw,5rem)}

  .eyebrow{
    font-family:ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
    font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
    color:var(--ember);margin:0 0 1.1rem;font-weight:600;
  }
  h1{margin:0;font-size:clamp(2.9rem,8.4vw,6.4rem);line-height:.94;letter-spacing:-.022em;font-weight:400}
  .hero p{margin:1.5rem 0 0;max-width:27rem;font-size:clamp(1.05rem,.5vw + .95rem,1.3rem);text-shadow:0 1px 18px rgba(12,11,10,.85)}
  .hero h1,.hero .eyebrow{text-shadow:0 2px 26px rgba(12,11,10,.7)}

  /* There was a figures band here — $ closed, years, team size. Removed on Kyle's
     instruction: no numbers anywhere. It was the most quotable thing on the page
     and an AI summary reaches for a figure before a sentence, so what replaces it
     has to be the specificity of the sentences themselves. */

  section{padding-block:clamp(3.6rem,8vw,7rem)}
  .rule{border:0;border-top:1px solid var(--rule);margin:0}
  h2{
    font-family:ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
    font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
    color:var(--paper-dim);font-weight:600;margin:0 0 2.2rem;
  }
  .lede{font-size:clamp(1.3rem,1.5vw + 1rem,1.95rem);line-height:1.38;letter-spacing:-.012em;max-width:38rem;margin:0}
  .lede + p{margin-top:1.9rem}
  .body{max-width:var(--measure)}
  .body p{margin:0 0 1.25rem}
  .body p:last-child{margin-bottom:0}
  @media(min-width:60rem){ .offset{margin-left:clamp(0px,14vw,15rem)} }

  /* ================= EXPERIENCE =================
     Not a card grid. Each role is a row with its own hierarchy: the role is the
     loudest thing, the organisation is quiet, and the sentences carry what a
     crawler actually reads. */
  .work{list-style:none;margin:0;padding:0}
  .work li{padding-block:clamp(1.7rem,3.4vw,2.6rem);border-top:1px solid var(--rule)}
  .work li:last-child{border-bottom:1px solid var(--rule)}
  @media(min-width:52rem){
    .work li{display:grid;grid-template-columns:minmax(13rem,20rem) 1fr;column-gap:clamp(1.5rem,4vw,4rem);row-gap:0;align-items:start}
    /* Each child of the li is a grid item, so a second paragraph flows back into
       column 1 and lands under the role title. Pin the heading block to column 1
       and every paragraph to column 2, so extra paragraphs stack in the right
       column instead of zig-zagging across it. */
    .work li > div{grid-column:1;grid-row:1}
    .work li > p{grid-column:2}
    .work li > p + p{margin-top:1.15rem}
  }
  .work h3{margin:0;font-size:clamp(1.35rem,1.1vw + 1.05rem,1.75rem);font-weight:400;letter-spacing:-.012em;line-height:1.15}
  .work .org{
    display:block;margin-top:.5rem;
    font-family:ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
    font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);text-decoration:none;
  }
  a.org:hover{color:var(--ember)}
  .work p{margin:.55rem 0 0;color:#D6CEC4}
  @media(min-width:52rem){ .work p{margin-top:.3rem} }

  .cap{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.6rem,3vw,2.4rem)}
  @media(min-width:44rem){ .cap{grid-template-columns:repeat(2,1fr);column-gap:clamp(2rem,6vw,5rem)} }
  .cap h3{margin:0 0 .45rem;font-size:1.02rem;font-weight:400;font-family:ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif}
  .cap p{margin:0;font-size:.96rem;line-height:1.56;color:#B9AFA3}
  .cap li{padding-left:1.15rem;border-left:2px solid var(--ember)}

  footer{padding-block:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--rule)}
  .foot{display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:baseline;justify-content:space-between}
  .foot p{margin:0;font-size:.85rem;color:var(--paper-dim)}
  .foot nav{display:flex;flex-wrap:wrap;gap:1.4rem}
  .foot nav a{font-family:ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:.8rem;letter-spacing:.04em;color:var(--paper-dim);text-decoration:none}
  .foot nav a:hover{color:var(--ember)}
  @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* ================= MULTI-PAGE ADDITIONS =================
   Added when /podcasts and /press were split off the home page. */

/* A compact page header for the interior pages — they do not get the portrait,
   because the portrait is the home page's job and repeating it makes every page
   look like the same page. */
.pagehead{padding-block:clamp(3rem,7vw,5.5rem) clamp(1.5rem,3vw,2.5rem);border-bottom:1px solid var(--rule)}
.pagehead .eyebrow a{color:var(--ember);text-decoration:none}
.pagehead .eyebrow a:hover{text-decoration:underline}
.pagehead h1{font-size:clamp(2.2rem,5.2vw,3.6rem);line-height:1.02;margin:.8rem 0 0}
.pagehead p{margin:1.3rem 0 0;max-width:38rem;color:#D6CEC4}

/* ================= SOURCE LIST =================
   Every entry is an outbound link to somebody else's site. That is the entire
   point of these pages: a claim on your own site is an assertion, the same claim
   on a third party's site is evidence, and the link is what lets a reader — or a
   crawler — tell which one they are looking at. */
.sources{list-style:none;margin:0;padding:0}
.sources li{padding-block:clamp(1.6rem,3vw,2.3rem);border-top:1px solid var(--rule)}
.sources li:last-child{border-bottom:1px solid var(--rule)}
@media(min-width:52rem){
  .sources li{display:grid;grid-template-columns:minmax(12rem,17rem) 1fr;column-gap:clamp(1.5rem,4vw,4rem);align-items:start}
  .sources li > div{grid-column:1;grid-row:1}
  .sources li > p,.sources li > .srclink{grid-column:2}
}
.sources h3{margin:0;font-size:clamp(1.15rem,.8vw + 1rem,1.45rem);font-weight:400;letter-spacing:-.01em;line-height:1.2}
.sources .show{
  display:block;margin-top:.45rem;
  font-family:ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);
}
.sources p{margin:.5rem 0 0;color:#D6CEC4}
@media(min-width:52rem){ .sources p{margin-top:.2rem} }
.srclink{
  display:inline-block;margin-top:.9rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;
  color:var(--paper-dim);text-decoration:none;
  border-bottom:1px solid rgba(237,231,223,.22);padding-bottom:2px;
  overflow-wrap:anywhere;
}
.srclink:hover{color:var(--ember);border-bottom-color:var(--ember)}
.srclink::after{content:" ↗";opacity:.6}

/* Home-page teaser block for the appearances. */
.teaser{display:grid;gap:.9rem}
.teaser a{
  font-family:ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:.95rem;color:var(--paper);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:.9rem;
}
.teaser a:hover{color:var(--ember);border-bottom-color:var(--ember)}
.teaser a span{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);margin-top:.3rem}
.more{
  display:inline-block;margin-top:1.6rem;
  font-family:ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:.8rem;letter-spacing:.06em;color:var(--ember);text-decoration:none;
  border-bottom:1px solid var(--ember);padding-bottom:2px;
}

/* Site nav in the footer — real pages now, not just anchors. */
.foot nav a[aria-current="page"]{color:var(--paper)}