/* ekin.co — shared stylesheet
   Type:  Fraunces (display) · Source Serif 4 (body) · IBM Plex Mono (labels)
   Colour: paper/ink neutrals, indigo primary, teal/amber/crimson secondaries,
           two committed dark bands (black for the framework, slate for the record)
*/

:root{
  --paper:#F2F2F0;
  --surface:#FBFBFA;
  --ink:#191A1E;
  --muted:#65666D;
  --faint:#9B9CA2;
  --rule:#DDDCD7;
  --accent:#3A3A9E;
  --tint:#E8E8F2;
  --teal:#0E7C7B;
  --amber:#B5720F;
  --crimson:#A2304A;
  --shadow:0 1px 2px rgba(25,26,30,.05);

  /* committed bands — identical in light and dark */
  --void:#0A0A0C;
  --void-ink:#F4F3F0;
  --void-muted:#9B9A96;
  --void-rule:rgba(244,243,240,.15);
  --slate:#2B2C31;
  --slate-ink:#F4F3F0;
  --slate-muted:#A6A6AD;
  --slate-rule:rgba(244,243,240,.16);
  --lift-teal:#3FBFBD;
  --lift-amber:#E8AA42;
  --lift-crimson:#E8798D;
  --lift-indigo:#9191F7;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#16171A; --surface:#1D1E22; --ink:#EDECE8; --muted:#9B9B98;
    --faint:#6E6F73; --rule:#2D2E33; --accent:#A3A3F2; --tint:#242431;
    --teal:#3FBFBD; --amber:#E0A23C; --crimson:#E0768A; --shadow:none;
  }
}

/* a hidden element stays hidden, whatever a component rule sets display to */
[hidden]{display:none !important}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.wrap{max-width:1080px; margin:0 auto; padding-inline:24px}
.label{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif; font-weight:400;
  text-wrap:balance; margin:0}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; z-index:99; background:var(--paper);
  padding:10px 14px; border:1px solid var(--rule)}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule); background:var(--paper);
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20}
.masthead .wrap{display:flex; align-items:baseline; gap:28px;
  padding-block:18px; flex-wrap:wrap}
.wordmark{font-family:"Fraunces",Georgia,serif; font-size:19px; letter-spacing:-.01em;
  text-decoration:none}
.masthead nav{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap}
.masthead nav a{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:var(--muted);
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.masthead nav a:hover{color:var(--ink); border-bottom-color:var(--accent)}
.masthead nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}

/* ---------- hero strip (homepage) ---------- */
.hero{
  position:relative; background-color:#E9ECEF;
  background-image:url("hero.jpg"); /* resolved relative to this stylesheet */
  background-size:cover; background-position:74% 8%; background-repeat:no-repeat;
  border-bottom:1px solid var(--rule);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(97deg,#EBEEF1 0%,rgba(235,238,241,.97) 28%,
             rgba(235,238,241,.70) 42%,rgba(235,238,241,.10) 54%,rgba(235,238,241,0) 62%);
}
.hero .wrap{position:relative; min-height:560px; display:flex; align-items:center;
  padding-block:72px}
.hero-inner{max-width:min(30rem,42vw); color:#16181C}
.hero-inner .label{color:#5A5C63}
.hero-photo{display:none}
.lede{font-family:"Fraunces",Georgia,serif; font-size:clamp(29px,3.5vw,45px);
  line-height:1.13; letter-spacing:-.015em; font-weight:300; margin:14px 0 0; color:#16181C}
.lede em{font-style:normal; font-weight:600; color:#3A3A9E}
.standfirst{font-size:18.5px; color:#3E4046; margin:24px 0 0}
.meta{display:flex; gap:10px; align-items:flex-start; margin-top:28px}
.meta .dot{width:5px;height:5px;border-radius:50%;background:#3A3A9E;flex:none;margin-top:7px}
.meta .label{flex:1 1 auto; min-width:0}

/* ---------- page header (inner pages) ---------- */
.pagehead{border-bottom:1px solid var(--rule); background:var(--surface)}
.pagehead .wrap{padding-block:56px 46px}
.pagehead h1{font-size:clamp(33px,5vw,54px); font-weight:300; letter-spacing:-.02em;
  line-height:1.08; margin-top:14px}
.pagehead .intro{font-size:19px; color:var(--muted); max-width:36em; margin:22px 0 0}

/* ---------- section heads ---------- */
.sechead{display:flex; align-items:baseline; gap:16px; padding-block:38px 8px}
.sechead h2{font-size:14px; font-family:"IBM Plex Mono",monospace; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase}
.sechead p{margin:0 0 0 auto; font-size:15px; color:var(--muted)}

/* ---------- framework band (black) ---------- */
.framework{background:var(--void); color:var(--void-ink)}
.framework .sechead h2{color:var(--void-ink)}
.framework .sechead p{color:var(--void-muted)}
.fw-intro{display:grid; grid-template-columns:1.08fr .92fr; gap:48px;
  align-items:baseline; padding-bottom:6px}
.fw-intro h3{font-size:clamp(26px,3.2vw,36px); font-weight:300; line-height:1.18;
  letter-spacing:-.015em}
.fw-intro h3 em{font-style:normal; font-weight:600; color:var(--lift-indigo)}
.fw-intro p{margin:0; color:var(--void-muted); font-size:17px}
.plate{padding:30px 0 0; margin-top:28px; border-top:1px solid var(--void-rule)}
.plate svg{display:block; width:100%; height:auto; max-width:100%}
.plate .credit{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:20px; color:var(--void-muted)}
.plate .credit a{color:var(--lift-indigo); text-decoration:none;
  border-bottom:1px solid var(--void-rule); padding-bottom:1px}
.plate .credit a:hover{border-bottom-color:var(--lift-indigo)}
.stages{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:44px 0 0;
  padding-bottom:60px}
.stage{padding:0 24px; border-left:1px solid var(--void-rule)}
.stage:first-child{padding-left:0; border-left:0}
.stage:last-child{padding-right:0}
.stage .bar{display:block; width:34px; height:3px; margin-bottom:16px}
.stage h4{font-size:23px; margin:0 0 10px; letter-spacing:-.01em}
.stage p{margin:0; color:var(--void-muted); font-size:16px}
.s1 .bar{background:#9B9CA2}
.s2 .bar{background:var(--lift-teal)} .s2 h4{color:var(--lift-teal)}
.s3 .bar{background:var(--lift-amber)} .s3 h4{color:var(--lift-amber)}
.s4 .bar{background:var(--lift-indigo)} .s4 h4{color:var(--lift-indigo)}

/* ---------- ideas list ---------- */
.ideas-sec{background:var(--paper)}
.ideas-sec .sechead h2{color:var(--ink)}
.ideas{padding-bottom:52px}
.idea{
  display:grid; grid-template-columns:118px 1fr auto; gap:26px; align-items:baseline;
  padding:24px 0 24px 18px; border-top:1px solid var(--rule); text-decoration:none;
  border-left:3px solid var(--ic); transition:background .18s ease, padding-left .2s ease;
}
.ideas .idea:first-of-type{border-top:none}
.idea:hover{background:var(--surface); padding-left:26px}
.idea:hover .idea-t{color:var(--ic)}
.idea .label{color:var(--ic)}
.idea-t{display:block; font-family:"Fraunces",Georgia,serif; font-size:26px;
  line-height:1.22; letter-spacing:-.01em; transition:color .18s ease}
.idea-d{display:block; color:var(--muted); font-size:16px; margin-top:8px; max-width:46em}
.idea .arrow{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--faint)}
.idea:hover .arrow{color:var(--ic)}
.i-teal{--ic:var(--teal)} .i-amber{--ic:var(--amber)}
.i-crimson{--ic:var(--crimson)} .i-indigo{--ic:var(--accent)}
.i-slate{--ic:var(--faint)}
/* short notes — lighter than an essay row */
.notes .idea{padding-block:20px}
.notes .idea-t{font-size:21px}
.notes .idea-d{font-size:15.5px; margin-top:6px}
.notes .idea .label{color:var(--faint)}
.notes .idea:hover .idea-t{color:var(--accent)}
.notes .idea:hover .arrow{color:var(--accent)}
.seasonal{display:inline-block; margin-top:10px; font-family:"IBM Plex Mono",monospace;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--crimson);
  border:1px solid currentColor; border-radius:2px; padding:3px 7px}

/* ---------- Friday Thoughts strip (homepage) ---------- */
.fridaysec{background:var(--surface); border-top:1px solid var(--rule)}
.fridaysec .sechead h2{color:var(--ink)}
.fridaysec .sechead p a{color:var(--accent); text-decoration:none}
.fridaysec .sechead p a:hover{text-decoration:underline}
.fridaystrip{list-style:none; margin:14px 0 0; padding:0 0 54px;
  display:grid; grid-template-columns:1fr 1fr; gap:0 52px}
.fridaystrip li{border-top:1px solid var(--rule)}
.fridaystrip li a{display:grid; grid-template-columns:116px 1fr; gap:18px;
  align-items:baseline; padding:13px 0; text-decoration:none;
  transition:padding-left .18s ease}
.fridaystrip li a:hover{padding-left:8px}
.fridaystrip .t{font-family:"Fraunces",Georgia,serif; font-size:18px; line-height:1.3;
  letter-spacing:-.005em; transition:color .18s ease}
.fridaystrip li a:hover .t{color:var(--accent)}

/* ---------- record band (slate) ---------- */
.record-sec{background:var(--slate); color:var(--slate-ink)}
.record-sec .sechead h2{color:var(--slate-ink)}
.record-sec .sechead p{color:var(--slate-muted)}
.record{padding-bottom:12px}
.rec{display:grid; grid-template-columns:210px 1fr; gap:28px;
  padding-block:20px; border-top:1px solid var(--slate-rule)}
.record .rec:first-of-type{border-top:none}
.rec h3{font-size:21px; letter-spacing:-.01em}
.rec .role{font-size:13px; color:var(--slate-muted); display:block; margin-top:5px;
  font-family:"IBM Plex Mono",monospace; letter-spacing:.06em; text-transform:uppercase}
.rec p{margin:0; font-size:17px; max-width:44em; color:rgba(244,243,240,.86)}
.rec-earlier{margin:0; padding:20px 0 0; border-top:1px solid var(--slate-rule);
  color:var(--slate-muted); font-size:16px}
.rec-earlier strong{color:var(--slate-ink); font-weight:400}

.figures{display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:34px; border-top:1px solid var(--slate-rule); padding:28px 0 6px}
.fig{padding-right:20px}
.fig strong{display:block; font-family:"Fraunces",Georgia,serif; font-size:40px;
  font-weight:300; letter-spacing:-.02em; line-height:1; color:var(--slate-ink)}
.fig span{display:block; margin-top:8px; font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-muted)}
.figures-note{margin:0; padding-bottom:54px; color:var(--slate-muted); font-size:15px}
.record-sec .more{display:inline-block; margin:0 0 54px;
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:var(--slate-ink);
  border:1px solid var(--slate-rule); padding:10px 16px; border-radius:2px}
.record-sec .more:hover{border-color:var(--slate-ink)}

/* ---------- beyond the work ---------- */
.beyond{background:var(--surface)}
.beyond .sechead h2{color:var(--ink)}
.beyond .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;
  padding-block:30px 54px}
.bcard{padding-top:18px; border-top:3px solid var(--bc)}
.bcard h3{font-size:23px; margin-bottom:8px; color:var(--bc)}
.bcard p{margin:0; color:var(--muted); font-size:16px}
.b-teal{--bc:var(--teal)} .b-amber{--bc:var(--amber)} .b-crimson{--bc:var(--crimson)}
.bcard .links{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.bcard .links a{font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); border:1px solid var(--rule); padding:6px 10px; border-radius:2px}
.bcard .links a:hover{border-color:var(--bc); color:var(--bc)}

/* ---------- long-form prose (essays, work, about) ---------- */
.prose{max-width:37rem; padding-block:46px 64px}
.prose.wide{max-width:none}
.prose h2{font-size:clamp(24px,3vw,31px); font-weight:400; letter-spacing:-.015em;
  margin:48px 0 14px; line-height:1.2}
.prose h3{font-size:21px; margin:32px 0 10px}
.prose p{margin:0 0 18px}
.prose > p:first-child{font-size:19px; color:var(--muted)}
.prose ul{margin:0 0 20px; padding-left:20px}
.prose li{margin-bottom:8px}
.prose a{color:var(--accent); text-decoration:none;
  border-bottom:1px solid var(--tint); padding-bottom:1px}
.prose a:hover{border-bottom-color:var(--accent)}
.prose blockquote{margin:26px 0; padding-left:22px; border-left:3px solid var(--accent);
  font-size:20px; line-height:1.45; color:var(--ink)}
.prose figure{margin:32px 0}
.video-figure{margin:34px 0}
.video{position:relative; aspect-ratio:16/9; max-width:100%;
  background:var(--void); border:1px solid var(--rule); border-radius:2px; overflow:hidden}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.prose figcaption{margin-top:10px}
.prose hr{border:0; border-top:1px solid var(--rule); margin:44px 0}

/* two-column entry list used on Work */
.entry{display:grid; grid-template-columns:230px 1fr; gap:34px;
  padding-block:34px; border-top:1px solid var(--rule)}
.entry:first-of-type{border-top:none}
.entry .side h2{font-size:26px; margin:0 0 6px; letter-spacing:-.015em}
.entry .side .role{display:block; margin-bottom:4px}
.entry .body p{margin:0 0 16px}
.entry .body p:last-child{margin-bottom:0}
.entry .body strong{font-weight:600}

/* platform tiles (Music) */
.platforms{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px; margin:30px 0 8px}
.platform{display:block; text-decoration:none; border:1px solid var(--rule);
  border-radius:2px; padding:18px 18px 16px; background:var(--surface);
  transition:border-color .18s ease}
.platform:hover{border-color:var(--accent)}
.platform strong{display:block; font-family:"Fraunces",Georgia,serif; font-size:20px;
  font-weight:400; margin-bottom:4px}
.platform span{display:block; color:var(--muted); font-size:14px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule); background:var(--paper)}
footer .wrap{display:grid; grid-template-columns:auto 1fr; gap:28px;
  align-items:center; padding-block:34px 54px}
footer .headshot{width:84px; height:84px; border-radius:50%; object-fit:cover;
  filter:grayscale(1)}
footer .fbody{display:flex; gap:20px; flex-wrap:wrap; align-items:baseline}
footer .mail{font-family:"Fraunces",Georgia,serif; font-size:26px; text-decoration:none}
footer .mail:hover{color:var(--accent)}
footer .soc{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
footer .soc a{font-family:"IBM Plex Mono",monospace; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-decoration:none}
footer .soc a:hover{color:var(--accent)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .stages{grid-template-columns:repeat(2,1fr); gap:32px 0}
  .stage:nth-child(3){padding-left:0; border-left:0}
  .figures{grid-template-columns:repeat(2,1fr); gap:26px 0}
}
@media (max-width:820px){
  .hero{background-image:none}
  .hero::before{display:none}
  .hero .wrap{min-height:0; padding-block:0 42px; display:block}
  .hero-photo{display:block; width:calc(100% + 48px); margin:0 -24px 30px;
    aspect-ratio:16/9; object-fit:cover; object-position:72% center}
  .hero-inner{max-width:none}
  .fw-intro{grid-template-columns:1fr; gap:18px}
  .stages{grid-template-columns:1fr; gap:30px}
  .stage{padding-left:0; border-left:0}
  .idea{grid-template-columns:1fr; gap:6px}
  .idea .arrow{display:none}
  .rec{grid-template-columns:1fr; gap:8px}
  .figures{grid-template-columns:1fr; gap:24px}
  .beyond .grid{grid-template-columns:1fr; gap:30px}
  .entry{grid-template-columns:1fr; gap:10px}
  .fridaystrip{grid-template-columns:1fr; gap:0}
  .fridaystrip li a{grid-template-columns:1fr; gap:4px; padding:14px 0}
  .sechead p{margin-left:0; flex-basis:100%}
  footer .wrap{grid-template-columns:1fr; gap:20px}
  footer .soc{margin-left:0}
}