@font-face{
  font-family:'Clash Grotesk';
  src:url('fonts/ClashGrotesk-Variable.woff2') format('woff2-variations'),
      url('fonts/ClashGrotesk-Variable.woff') format('woff-variations');
  font-weight:200 700; font-style:normal; font-display:swap;
}
/* David Lloyd — portfolio
   Scheme: paper light / navy dark, Clash Grotesk + Newsreader + JetBrains Mono
   Light is the default; dark follows the OS unless the visitor picks a side. */

:root, [data-theme="light"]{
  --paper:#F4EFE3;
  --card:#FBF8F0;
  --field:#FFFDF8;
  --ink:#14120F;
  --mid:#55504A;
  --faint:#8A8378;
  --fainter:#cac3ae;
  --rule:#DCD3C2;
  --hair:#C9BEA9;
  --accent:#c04224;
  --imgframe:#E7E0D1;
  --imgfilter:none;
  --barbg:rgba(219, 209, 185, .8);
  --bodyweight:400;
}
[data-theme="dark"]{
  --paper:#101a29;
  --card:#17263a;
  --field:#191817;
  --ink:#EFECE4;
  --mid:#9FAFC4;
  --faint:rgba(239,236,228,.6);
  --fainter:rgba(239,236,228,.4);
  --rule:#2C3A4F;
  --hair:#3A4A60;
  --accent:#FF6A3D;
  --imgframe:#1A2636;
  --imgfilter:brightness(.92);
  --barbg:rgba(20,27,37,.9);
  --bodyweight:300;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --paper:#101a29; --card:#17263a; --field:#191817;
    --ink:#EFECE4; --mid:#9FAFC4; --faint:rgba(239,236,228,.6); --fainter:rgba(239,236,228,.4);
    --rule:#2C3A4F; --hair:#3A4A60; --accent:#FF6A3D;
    --imgframe:#1A2636; --imgfilter:brightness(.92);
    --barbg:rgba(20,27,37,.9); --bodyweight:300;
  }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Newsreader',Georgia,serif; font-weight:var(--bodyweight);
  font-size:18px; line-height:1.55; -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
/* The dark-mode filter stays off <video>: iOS Safari renders filtered video
   as a blank box. Desktop is unaffected, which makes it easy to miss. */
img{ max-width:100%; filter:var(--imgfilter); }
video{ max-width:100%; }
a{ color:var(--accent); text-underline-offset:3px; }
a:hover{ color:var(--ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wrap{ max-width:1320px; margin-inline:auto; padding-inline:clamp(20px,5vw,64px); }
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }
.display{ font-family:'Clash Grotesk',system-ui,sans-serif; }

/* ── sticky bar ── */
.bar{
  position:sticky; top:0; z-index:40;
  background:var(--barbg); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
.bar-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:58px;
}
.wordmark{
  font-family:'Clash Grotesk',system-ui,sans-serif; font-weight:700;
  font-size:clamp(20px,5vw,28px); letter-spacing:-0.025em; text-decoration:none;
  color:var(--ink); white-space:nowrap; flex:0 0 auto;
}
.bar-tools{ display:flex; align-items:center; gap:10px; flex:0 1 auto; min-width:0; }
/* Phone: the wordmark never breaks, so the pills give way instead —
   first the redundant Index link (the wordmark already goes home and the
   drawer lists it), then the theme pill's label, leaving just its dot. */
@media (max-width:560px){
  .bar-row{ gap:10px; }
  .bar-tools{ gap:6px; }
  .pill{ padding:5px 10px; gap:6px; }
  .bar-tools a.pill{ display:none; }
}
@media (max-width:400px){
  .pill [data-theme-label]{ display:none; }
  .pill{ padding:6px 9px; }
}
.pill{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink);
  background:var(--card); border:1px solid var(--hair); border-radius:100px;
  padding:5px 13px; cursor:pointer; display:flex; align-items:center; gap:8px;
  text-decoration:none; white-space:nowrap; transition:border-color .18s ease;
}
.pill:hover{ border-color:var(--ink); color:var(--ink); }
.pill[aria-current]{ color:var(--accent); border-color:var(--accent); }
.pill.block{ justify-content:center; }
/* About page: a pill under the lede sizes to its text instead of the column. */
.art-head .pill{ display:inline-flex; margin-top:22px; }
/* About page: one column of prose, centered, so the page doesn't look like a column is missing. */
.cols.solo{ justify-content:flex-start; }
/* About page: a narrower page block, centered, so heading and prose share one left edge. */
.solo-page{ max-width:760px; }
/* Project-page call to action, under the prev/next row. */
.page-cta{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px;
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:18px;
}
.page-cta a{ color:var(--accent); text-decoration:none; font-weight:500; }
.page-cta a:hover{ color:var(--ink); }
.page-cta span{ color:var(--faint); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--ink); display:block; }
.burger{ display:flex; flex-direction:column; gap:3px; width:13px; }
.burger i{ height:1.5px; background:var(--ink); display:block; }

/* ── menu drawer ── */
.drawer{ display:none; border-top:1px solid var(--rule); background:var(--card); max-height:calc(100vh - 59px); overflow:auto; }
.drawer[data-open]{ display:block; }
.drawer-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(24px,3vw,44px); align-items:start;
  padding-block:clamp(24px,4vh,40px) clamp(32px,5vh,48px);
}
.drawer h2{
  margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--ink);
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
}
.drawer ul{ list-style:none; margin:0; padding:0; }
.drawer a{
  display:flex; align-items:flex-start; gap:11px; padding:6px 0;
  text-decoration:none; color:var(--ink);
  font-family:'Clash Grotesk',system-ui,sans-serif; font-weight:500;
  font-size:16px; letter-spacing:-0.015em; line-height:1.25;
  transition:color .15s ease;
}
.drawer a .dia{
  width:5px; height:5px; background:var(--hair); transform:rotate(45deg);
  flex:0 0 5px; margin-top:8px; transition:background .15s ease;
}
.drawer a:hover{ color:var(--accent); }
.drawer a:hover .dia{ background:var(--accent); }
.drawer a[aria-current]{ color:var(--accent); }
.drawer a[aria-current] .dia{ background:var(--accent); }
.drawer .mail{
  display:block; padding:14px 0 0; font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px; font-weight:400; letter-spacing:0; color:var(--accent);
}

/* ── masthead ── */
.masthead{ padding-block:clamp(44px,9vh,88px) clamp(28px,5vh,48px); }
.masthead h1{
  margin:0; max-width:26ch;
  font-family:'Clash Grotesk',system-ui,sans-serif; font-weight:700;
  font-size:clamp(44px,1rem + 6vw,72px); line-height:0.9; letter-spacing:-0.015em;
}
.masthead-sub{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(24px,4vw,56px); padding-top:clamp(24px,4vh,40px);
}
.masthead-sub .claim{
  margin:0; max-width:24ch;
  font-family:'Clash Grotesk',system-ui,sans-serif; font-weight:600;
  font-size:clamp(22px,1rem + 1.2vw,32px); line-height:1.1;
  letter-spacing:-0.02em; color:var(--accent);
}
.masthead-sub p:last-child{ margin:0; max-width:58ch; color:var(--mid); }

/* ── section rules ── */
.sect{
  margin:0 0 20px; padding-bottom:1px; border-bottom:1px solid var(--ink);
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 20px;
}
.sect-pages{
  margin:0 0 20px; padding-bottom:1px; border-bottom:1px solid var(--fainter);
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 20px;
}
.sect .count{ color:var(--accent); }

/* ── featured grid: hero spans two columns and two rows ── */
.featured{ display:grid; gap:clamp(20px,2.4vw,28px); grid-template-columns:1fr; }
.feat{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--rule);
  transition:border-color .2s ease;
}
.feat:hover{ border-color:var(--ink); color:inherit; }
.shotwrap{ aspect-ratio:4/3; overflow:hidden; background:var(--imgframe); display:block; }
.shotwrap img, .shotwrap video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s cubic-bezier(.2,.6,.2,1); }
.feat:hover .shotwrap img, .feat:hover .shotwrap video{ transform:scale(1.035); }
.feat-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--rule); }
.tag{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.feat h3{
  margin:0; font-family:'Clash Grotesk',system-ui,sans-serif; font-weight:500;
  font-size:25px; letter-spacing:-0.022em; line-height:1.05;
}
.feat p{ margin:0; font-size:16px; line-height:1.45; color:var(--mid); }

@media (min-width:700px){
  .featured{ grid-template-columns:repeat(2,1fr); }
  .featured .hero{ grid-column:span 2; }
  .featured .hero .shotwrap{ aspect-ratio:16/9; }
}
@media (min-width:1040px){
  .featured{ grid-template-columns:repeat(3,1fr); }
  /* image-row + body-row. The row's auto minimum keeps the 4:3 floor from
     .shotwrap, and height:100% lets the photo absorb any extra height the grid
     hands the card — so a stretched card grows its image, never its empty body. */
  .feat{ display:grid; grid-template-rows:minmax(auto,1fr) auto; }
  .feat .shotwrap{ width:100%; height:100%; min-height:0; }
  .featured .hero{ grid-column:span 2; grid-row:span 2; }
  .featured .wide{ grid-column:span 2; }
  .featured .wide .shotwrap{ aspect-ratio:16/9; }

  .featured .hero h3{ font-size:36px; }
  .featured .hero p{ font-size:18px; }
}

/* ── index rows ── */
.sect-rows{
  margin:clamp(44px,8vh,72px) 0 4px; padding-bottom:8px;
  border-bottom:1px solid var(--ink);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:12px 24px;
}
.sect-rows p{
  margin:0; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px;
  font-weight:500; letter-spacing:.18em; text-transform:uppercase;
}
.filters{ display:flex; flex-wrap:wrap; gap:4px; }
.filters button{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  padding:5px 11px; border-radius:100px; border:1px solid var(--hair);
  background:transparent; color:var(--ink); transition:border-color .15s ease;
}
.filters button:hover{ border-color:var(--ink); }
.filters button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.index{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.index li:last-child .row{ border-bottom:none; padding-bottom:4px; }
.row{
  display:grid; grid-template-columns:76px minmax(0,1fr); grid-template-areas:"thumb title" "thumb line";
  align-items:center; gap:2px 16px; padding:14px 0;
  border-bottom:1px solid var(--rule); text-decoration:none; color:inherit;
  transition:background .15s ease;
}
.row:hover{ background:var(--card); color:inherit; }
.row-thumb{ grid-area:thumb; width:76px; height:56px; overflow:hidden; background:var(--imgframe); }
.row-thumb img, .row-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.row h3{
  grid-area:title; margin:0; font-family:'Clash Grotesk',system-ui,sans-serif;
  font-weight:500; font-size:19px; letter-spacing:-0.02em; line-height:1.1;
}
.row-line{ grid-area:line; margin:0; font-size:15px; color:var(--mid); line-height:1.4; }
.row-tag{
  grid-area:tag; margin:0; text-align:right;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--faint); display:none;
}
@media (min-width:860px){
  .row{
    grid-template-columns:76px minmax(0,1fr) minmax(0,1.3fr) 150px;
    grid-template-areas:"thumb title line tag"; gap:20px;
  }
  .row-tag{ display:block; }
}

/* ── closing block ── */
.closing{
  margin-top:clamp(48px,10vh,96px); padding-top:clamp(28px,5vh,44px);
  border-top:1px solid var(--hair);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,4vw,56px); align-items:end;
}
.closing h2{
  margin:0; max-width:16ch;
  font-family:'Clash Grotesk',system-ui,sans-serif; font-weight:700;
  font-size:clamp(34px,1rem + 3.4vw,60px); line-height:0.95; letter-spacing:-0.028em;
}
.closing p{ margin:0; max-width:46ch; color:var(--mid); }
.index + .closing{ margin-top:clamp(20px,3vh,32px); }
.closing .links{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px;
  display:flex; flex-wrap:wrap; gap:8px 22px; padding-top:16px;
}
.closing .links a{ color:var(--accent); text-decoration:none; font-weight:500; }
.closing .links span{ color:var(--faint); }
.page-foot{ padding-bottom:clamp(40px,8vh,80px); }

/* ══════════ article pages (project, bio, contact) ══════════ */

.art-head{ padding-top:clamp(40px,7vh,72px); }
.art-head .eyebrow{
  margin:0 0 14px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.art-head h1{
  margin:0; max-width:20ch;
  font-family:'Clash Grotesk',system-ui,sans-serif; font-weight:700;
  font-size:clamp(38px,1rem + 4.4vw,80px); line-height:0.92; letter-spacing:-0.028em;
}
.art-head .lede{
  margin:22px 0 0; max-width:46ch; font-style:italic;
  font-size:clamp(19px,1rem + .6vw,26px); line-height:1.35; color:var(--mid);
}

.cols{
  display:flex; flex-wrap:wrap; gap:clamp(32px,5vw,64px);
  align-items:flex-start; padding-top:clamp(32px,5vh,48px);
}
/* .side now comes before .content in the DOM, so the spec reads before the
   body copy for assistive tech at any width, matching the stacked mobile
   view visually too. At the wrap point, push .side after .content again so
   the wide two-column reading stays content-left, spec-right — and only
   turn on sticky there too, since in the single-column stack .side has no
   dedicated column of its own and would just float over the body copy. */
@media (min-width:900px){
  .side{ order:1; position:sticky; top:80px; }
}
.content{ flex:1 1 440px; min-width:0; display:flex; flex-direction:column; gap:24px; max-width:64ch; }
.content p{ margin:0; }
.content h2{
  margin:6px 0 0; font-family:'Clash Grotesk',system-ui,sans-serif; font-weight:600;
  font-size:clamp(22px,1rem + 1.1vw,30px); letter-spacing:-0.02em; line-height:1.15;
}
.side{ flex:0 1 300px; min-width:240px; display:flex; flex-direction:column; gap:22px; }

figure{ margin:0; display:flex; flex-direction:column; gap:10px; }
.shot{ aspect-ratio:4/3; overflow:hidden; background:var(--imgframe); border:1px solid var(--fainter);}
.shot.portrait{ aspect-ratio:9/16; }
.shot img, .shot video{ width:100%; height:100%; object-fit:cover; display:block; }
figcaption{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; line-height:1.5; color:var(--faint); }
.figrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }

.gallery{
  margin-top:clamp(32px,6vh,56px); padding-top:20px;
  border-top:1px solid var(--fainter);
}
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(18px,2.4vw,28px);
}

.spec{
  margin:0; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px;
  line-height:1.5; border-top:1px solid var(--hair);
}
.spec > div{ padding:12px 0; border-bottom:1px solid var(--rule); }
.spec dt{
  margin:0 0 4px; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}
.spec dd{ margin:0; }
.spec .key dd{ color:var(--accent); font-weight:500; }

/*foot */
.art-foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:20px 32px; margin-top:clamp(40px,8vh,72px); padding-top:24px;
  border-top:1px solid var(--hair);
}
.art-foot a{ flex:1 1 240px; display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; }
.art-foot a:hover span:last-child{ color:var(--accent); }
.art-foot a.next{ text-align:right; align-items:flex-end; }
.art-foot span:first-child{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.art-foot span:last-child{
  font-family:'Clash Grotesk',system-ui,sans-serif; font-weight:500;
  font-size:19px; letter-spacing:-0.02em; transition:color .15s ease;
}
.art-foot .all{
  flex:0 0 auto; text-align:center;
  font-family:'Clash Grotesk',system-ui,sans-serif; font-weight:500;
  font-size:19px; letter-spacing:-0.02em; transition:color .15s ease;
}
.art-foot .all:hover{ color:var(--accent); }
/* On a phone the three footer links stack; keep prev/next together and drop the
   all-work link below them, centered, instead of wedging it between the two. */
@media (max-width:640px){
  .art-foot{ gap:16px 24px; }
  .art-foot a.prev{ order:1; }
  .art-foot a.next{ order:2; }
  .art-foot .all{
    order:3; flex:1 1 100%; width:100%; text-align:center;
    padding-top:16px; border-top:1px solid var(--rule);
  }
}

/* ── contact form ── */
form{ display:flex; flex-direction:column; gap:22px; }
form[hidden]{ display:none; }
.pair{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; }
label{ display:flex; flex-direction:column; gap:7px; }
.lab{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
input[type=text], input[type=email], textarea{
  font-family:'Newsreader',Georgia,serif; font-size:17px; color:var(--ink);
  background:var(--field); border:1px solid var(--hair); border-radius:0;
  padding:12px 14px; width:100%; transition:border-color .15s ease;
}
textarea{ line-height:1.5; resize:vertical; }
input:focus, textarea:focus{ outline:none; border-color:var(--ink); }
::placeholder{ color:var(--faint); }
.kinds{ display:flex; flex-direction:column; gap:9px; }
.kinds .opts{ display:flex; flex-wrap:wrap; gap:7px; }
.kinds label{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  padding:8px 14px; border-radius:100px; border:1px solid var(--hair);
  color:var(--ink); transition:border-color .15s ease;
}
.kinds label:hover{ border-color:var(--ink); }
.kinds input{ position:absolute; opacity:0; pointer-events:none; }
.kinds input:checked + label, .kinds label:has(input:checked){ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cf-turnstile{ min-height:65px; }
.send{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  color:var(--paper); background:var(--ink); border:1px solid var(--ink);
  border-radius:100px; padding:13px 26px; transition:background .18s ease, border-color .18s ease;
}
.send:hover{ background:var(--accent); border-color:var(--accent); }
.form-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.form-foot p{ margin:0; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; color:var(--faint); }
.note{ margin:0; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; line-height:1.6; color:var(--faint); }
.form-status{ margin:0; font-size:18px; color:var(--accent); }
.form-status[data-state="error"]{ color:var(--mid); }
.todo{ background:rgba(217,58,15,.10); color:var(--accent); padding:1px 5px; }
[data-theme="dark"] .todo{ background:rgba(255,106,61,.14); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

/* On a phone the drawer stacks, so About/Contact would land below the fold. Float them to the top. */
@media (max-width:700px){
  .drawer-grid > div:last-child{ order:-1; }
}