/* rickmurphy.nyc — bare bones. The work is the hero.
   Typeface is one variable; swap in a Lettermatic face when you want. */
:root{
  --face: "Instrument Sans", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --paper: #FDFDFC;
  --ink:   #16161A;
  --mute:  #7C7C84;
  --hair:  #E4E4E0;
  --gutter: 40px;
  --max: 1440px;
  --plate: 680px;
  --plate-gap: 40px;
  --row-gap: 88px;   /* between projects on the index */
  --tile-gap: 10px;  /* between lead and thumbnails */
  --lead-col: 1.04fr;
  --hero: 44%;      /* hero column beside the intro text */   /* half the old full-bleed width */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#0E0E10; --ink:#F0F0EE; --mute:#8E8E96; --hair:#26262A; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--face); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gutter)}

/* header */
header.site{display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; padding-block:34px 0; flex-wrap:wrap}
.mark .over{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute)}
.mark .name{font-size:22px; font-weight:600; letter-spacing:-.015em; margin-top:2px}
nav.site{display:flex; gap:24px; font-size:14px; padding-bottom:4px}
nav.site a[aria-current]{text-decoration:underline; text-underline-offset:4px}

/* statement */
.statement{font-size:clamp(20px,2.4vw,27px); line-height:1.4; letter-spacing:-.01em;
  max-width:26ch; margin:54px 0 0; font-weight:400}

/* work index */
.index{display:grid; grid-template-columns:150px minmax(0,1fr); gap:56px;
  margin-top:60px; align-items:start}
@media (max-width:860px){ .index{grid-template-columns:1fr; gap:24px} }
.rail{position:sticky; top:34px; display:flex; flex-direction:column; gap:3px; font-size:14px}
@media (max-width:860px){
  .rail{position:static; flex-direction:row; flex-wrap:wrap; gap:8px}
}
.rail button{font:inherit; background:none; border:0; padding:3px 0; text-align:left;
  color:var(--mute); cursor:pointer}
@media (max-width:860px){ .rail button{padding:5px 0; margin-right:16px} }
.rail button:hover{color:var(--ink)}
.rail button[aria-pressed="true"]{color:var(--ink); text-decoration:underline; text-underline-offset:4px}
.rail .n{font-variant-numeric:tabular-nums; color:var(--mute); font-size:12px; margin-left:6px}

/* Index rows: each project full width — lead left, four thumbnails right. */
.rows{display:flex; flex-direction:column; gap:var(--row-gap)}
.row[hidden]{display:none}
.rowhead{margin-bottom:14px}
.rowhead h2{font-size:clamp(21px,2.5vw,30px); font-weight:500; letter-spacing:-.02em;
  margin:0; line-height:1.15}
.rowmeta{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-top:10px}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{font-size:11px; letter-spacing:.02em; background:var(--ink); color:var(--paper);
  padding:2px 7px}
.more{font-size:13px; text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
.rowbody{display:flex; align-items:flex-start; gap:var(--tile-gap)}
a.lead{display:block; background:var(--hair); overflow:hidden; flex:0 0 auto}
.thumbs{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:var(--tile-gap)}
.throw{display:flex; gap:var(--tile-gap); align-items:flex-start}
.th{background:var(--hair); overflow:hidden; flex:0 0 auto}
/* contain, not cover — the whole image, never a crop */
.fill{width:100%; height:100%; object-fit:contain; display:block}
.row a:hover h2, .rowhead a:hover{text-decoration:underline; text-underline-offset:4px}
@media (max-width:860px){
  .rowbody{flex-direction:column}
  a.lead, .thumbs{width:100% !important; flex:none}
  a.lead{aspect-ratio:auto !important}
  a.lead .fill{height:auto}
  .th{flex:1 1 auto}
}

/* project page */
.proj{margin-top:64px}
.proj h1{font-size:clamp(30px,4.6vw,52px); line-height:1.05; letter-spacing:-.03em;
  font-weight:600; margin:0; max-width:16ch}
.proj .sub{margin-top:20px; font-size:clamp(17px,1.7vw,20px); line-height:1.5;
  max-width:52ch; color:var(--ink)}
.meta{display:flex; flex-wrap:wrap; gap:8px 34px; margin-top:28px;
  font-size:12px; color:var(--mute)}
.meta b{display:block; font-weight:400; color:var(--mute); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:2px}
.meta span{color:var(--ink); font-size:13px}
.brief{margin-top:44px; padding-top:22px; border-top:1px solid var(--hair);
  font-size:15px; line-height:1.6; max-width:58ch; color:var(--mute)}
.brief em{font-style:normal; color:var(--ink)}
.body{margin-top:36px; font-size:16.5px; line-height:1.65; max-width:56ch}
.body p{margin:0 0 18px}
/* Plates flow in a grid. A section picks one of three sizes:
   large = 1 across at full content width, medium = 2 (the default), small = 4. */
.plates{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:52px var(--plate-gap); align-items:start; margin-top:36px}
.plates.size-large{grid-template-columns:minmax(0,1fr); gap:64px}
.plates.size-medium{grid-template-columns:repeat(2,minmax(0,1fr))}
.plates.size-small{grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 22px}
/* A large plate is the whole point of being large: let it stand tall. */
.plates.size-large .plate img, .plates.size-large .plate video{max-height:88vh}
.plates.size-small .plate img, .plates.size-small .plate video{max-height:44vh}
.plates.size-small .plate figcaption{font-size:11.5px; margin-top:8px}
/* The caption-beside-image treatment needs room; below medium it just stacks. */
.plates.size-small .plate.tall{display:block}
.plates.size-small .plate.tall img, .plates.size-small .plate.tall video{width:100%; max-width:100%}
.plates.size-small .plate.tall figcaption{margin-top:8px}
/* Small means four across; hold that until the plates would get silly, then halve. */
@media (max-width:760px){
  .plates, .plates.size-medium{grid-template-columns:1fr; gap:44px}
  .plates.size-small{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 18px}
}

/* A section: header and optional subtext stacked above its images. */
.chapter{margin-top:72px}
.chapter + .chapter{margin-top:80px}
@media (max-width:760px){ .chapter, .chapter + .chapter{margin-top:52px} }
.chaphead{padding-bottom:4px; border-bottom:1px solid var(--hair)}
.chaphead h2{margin:0 0 10px; font-size:23px; line-height:1.25; letter-spacing:-.017em;
  font-weight:600}
.chaphead p{margin:0 0 12px; font-size:16.5px; line-height:1.6; max-width:58ch;
  color:var(--mute)}
@media (max-width:760px){ .chaphead h2{font-size:20px} }
.chaphead + .plates{margin-top:30px}
.plate{margin:0}
/* Hero sits beside the opening text on project pages. */
.proj-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,var(--hero));
  gap:56px; align-items:start}
@media (max-width:900px){ .proj-top{grid-template-columns:1fr; gap:34px} }
.proj-top .intro{min-width:0}
.plate.lead{margin:0; max-width:none}
.proj-top .plate.lead img, .proj-top .plate.lead video{width:100%; max-width:100%;
  max-height:76vh; object-fit:contain; object-position:left top}
.proj-top .plate.lead.tall{display:block}
.proj-top .plate.lead.tall figcaption{margin-top:10px; max-width:46ch}
.plate img, .plate video{width:100%; max-height:70vh; object-fit:contain; object-position:left top}
.plate figcaption{margin-top:10px; font-size:12.5px; line-height:1.5; color:var(--mute);
  max-width:46ch}
/* Tall shots set their caption alongside — keeps the column from running away. */
.plate.tall{display:flex; gap:20px; align-items:flex-start}
.plate.tall img, .plate.tall video{width:auto; max-width:62%; flex:0 1 auto}
.plate.tall figcaption{flex:1 1 0; margin-top:0; max-width:none}
@media (max-width:760px){
  .plate.tall{display:block}
  .plate.tall img, .plate.tall video{max-width:100%; width:100%}
  .plate.tall figcaption{margin-top:10px}
}
.plate figcaption .ph{color:var(--hair-ink,#B9B9B2)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .plate figcaption .ph{color:#3A3A40}
}
footer.proj-nav{margin-top:90px; padding-top:22px; border-top:1px solid var(--hair);
  display:flex; justify-content:space-between; align-items:baseline; gap:20px; font-size:15px}

/* résumé */
.cv{margin-top:60px; display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px 56px}
@media (max-width:760px){ .cv{grid-template-columns:1fr; gap:10px} }
.cv h2{grid-column:1; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); font-weight:400; margin:0; padding-top:6px}
.cv .col{grid-column:2; margin-bottom:26px}
.cv .job{padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--hair)}
.cv .job:last-child{border-bottom:0; margin-bottom:0}
.cv .yr{font-size:12px; color:var(--mute); font-variant-numeric:tabular-nums}
.cv .role{font-size:17px; font-weight:500; margin-top:3px}
.cv .rolesub{font-size:15px; color:var(--mute); margin-top:1px}
.cv p{margin:7px 0 0; max-width:58ch; font-size:15px; line-height:1.6}
.cv .job ul{margin:12px 0 0; padding:0; list-style:none; max-width:62ch}
.cv .job li{position:relative; padding-left:16px; margin-top:9px; font-size:14.5px; line-height:1.6;
  color:var(--mute)}
.cv .job li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:5px;
  border-radius:50%; background:var(--hair-ink,#C9C9C2)}
.cv .job li strong{color:var(--ink); font-weight:500}

/* contact */
.contact{margin-top:70px; max-width:52ch}
.contact .big{font-size:clamp(26px,3.6vw,40px); letter-spacing:-.025em; font-weight:600; line-height:1.1}
.contact .mail{font-size:clamp(18px,2.2vw,24px); margin-top:34px; font-weight:500}
.elsewhere{display:flex; gap:22px; margin-top:16px; font-size:14px; color:var(--mute)}

footer.site{margin-top:110px; padding-block:24px 48px; border-top:1px solid var(--hair);
  font-size:12px; color:var(--mute); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }