/* ----------------------------------------------------------------------------
 * Michael Hirst — portfolio
 * Hand-written CSS. No build step. No framework.
 * Conventions: design tokens at :root, accent rotation via [data-accent].
 * Typography is the design. Everything else gets out of the way.
 * -------------------------------------------------------------------------- */

/* --- design tokens --------------------------------------------------------- */
:root {
  /* paper */
  --bg:        #f3efe6;
  --bg-deep:   #ebe6d9;
  --ink:       #0c0c0c;
  --ink-soft:  #2a2a2a;
  --rule:      #0c0c0c;

  /* accents — one wins per page via [data-accent] */
  --accent-blue:     #2945ff;
  --accent-green:    #c8f24a;
  --accent-red:      #e84d2b;
  --accent-yellow:   #ffd500;
  --accent-olo-blue: #1a72f5;

  /* default accent (overridden by [data-accent="..."]) */
  --accent: var(--accent-blue);
  --accent-ink: #ffffff;     /* text color when sitting on accent */

  /* type ramp — variable font widths/weights for personality */
  --display-font: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --body-font:    "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;

  /*
   * Modular scale — golden ratio (φ = 1.618), base 1rem (18px)
   *   xs   = base ÷ φ²  = 0.382rem  (~6.9px  → floored to 0.722rem for legibility)
   *   sm   = base ÷ φ   = 0.618rem  (~11.1px → 0.833rem for legibility)
   *   md   = base        = 1rem       (18px)
   *   lg   = base × φ   = 1.618rem  (~29px)
   *   xl   = base × φ²  = 2.618rem  (~47px, clamped)
   *   mega = base × φ³  = 4.236rem  (~76px, clamped for viewport)
   */
  --t-xs:   0.722rem;                               /* ~13px — labels, tags, meta   */
  --t-sm:   0.833rem;                               /* ~15px — nav, captions        */
  --t-md:   1rem;                                   /* 18px  — body                 */
  --t-lg:   clamp(1.25rem, 2.2vw, 1.618rem);        /* ~22–29px — intro, prose      */
  --t-xl:   clamp(1.618rem, 3.8vw, 2.618rem);       /* ~29–47px — section titles    */
  --t-mega: clamp(2.618rem, 8vw, 4.5rem);           /* ~47–81px — hero headline     */

  /*
   * Spacing scale — same golden-ratio multipliers, base 1rem
   *   sp-1 = φ⁻²  = 0.382rem
   *   sp-2 = φ⁻¹  = 0.618rem
   *   sp-3 = 1rem
   *   sp-4 = φ¹   = 1.618rem
   *   sp-5 = φ²   = 2.618rem
   *   sp-6 = φ³   = 4.236rem
   *   sp-7 = φ⁴   = 6.854rem
   */
  --sp-1: 0.382rem;
  --sp-2: 0.618rem;
  --sp-3: 1rem;
  --sp-4: 1.618rem;
  --sp-5: 2.618rem;
  --sp-6: 4.236rem;
  --sp-7: 6.854rem;

  /* layout */
  --gutter: clamp(var(--sp-4), 3vw, var(--sp-5));
  --rail:   clamp(var(--sp-4), 4vw, var(--sp-6));

  /* lines */
  --hairline: 1px solid var(--rule);
  --thick:    2px solid var(--rule);
}

[data-accent="blue"]     { --accent: var(--accent-blue);     --accent-ink: #ffffff; }
[data-accent="green"]    { --accent: var(--accent-green);    --accent-ink: #0c0c0c; }
[data-accent="red"]      { --accent: var(--accent-red);      --accent-ink: #ffffff; }
[data-accent="yellow"]   { --accent: var(--accent-yellow);   --accent-ink: #0c0c0c; }
[data-accent="olo-blue"] { --accent: var(--accent-olo-blue); --accent-ink: #ffffff; }

/* --- reset (light) --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

/* --- base ------------------------------------------------------------------ */
html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- layout primitives ----------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-inline: var(--rail);
}

.rule { height: 0; border: 0; border-top: var(--hairline); margin: 0; }

/* --- header ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: var(--hairline);
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
}

.brand {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
}

.brand-mark {
  width: 28px;
  height: 28px;
  flex: none;
  display: block;
}

.brand-mark .dot { fill: var(--accent); transition: fill 200ms ease; }

.site-nav {
  justify-self: end;
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}

.site-nav a {
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  min-height: 40px;
  padding: var(--sp-1) 0;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 6px;
  background: var(--accent);
  z-index: -1;
}

.site-nav a:hover { color: var(--ink-soft); }

.site-header__meta {
  display: none;
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .site-header__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
    padding-block: var(--sp-2);
  }

  .brand {
    min-height: 40px;
  }

  .site-nav {
    justify-self: start;
    width: 100%;
    justify-content: space-between;
    gap: var(--sp-2);
  }
}

@media (min-width: 720px) {
  .site-header__meta { display: block; }
  .site-header__inner { grid-template-columns: auto 1fr auto auto; gap: var(--gutter); }
  .brand { font-size: 1.125rem; }
  .site-nav { gap: var(--sp-4); }
}

/* --- breadcrumb ------------------------------------------------------------ */
.breadcrumb {
  border-bottom: var(--hairline);
  background: var(--bg);
}

.breadcrumb__inner {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-block: var(--sp-3);
  font-size: var(--t-xs);
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.breadcrumb__link {
  text-decoration: none;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 120ms ease;
}

.breadcrumb__link:hover { color: var(--accent); }

.breadcrumb__sep {
  opacity: 0.4;
  font-size: 0.75em;
  line-height: 1;
  user-select: none;
}

.breadcrumb__current {
  font-weight: 600;
  color: var(--ink);
}

/* --- hero ------------------------------------------------------------------ */
.hero {
  border-bottom: var(--hairline);
  padding-block: clamp(var(--sp-5), 7vw, var(--sp-7)) clamp(var(--sp-5), 5vw, var(--sp-6));
  position: relative;
  overflow: hidden;
}

.hero__eyebrow {
  display: inline-block;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 999px;
  margin-bottom: var(--sp-4);
  font-weight: 500;
}

.hero__headline {
  font-family: var(--display-font);
  font-size: var(--t-mega);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 var(--sp-4);
  font-variation-settings: "wdth" 100;
  max-width: 18ch;
}

/* Wider stretch on the last word for personality (overridable per page). */
.hero__headline .stretch {
  font-variation-settings: "wdth" 130;
  letter-spacing: -0.05em;
}
.hero__headline .marker {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.04em 0.18em 0.06em;
  border-radius: 6px;
  display: inline-block;
  line-height: 0.95;
}

.hero__intro {
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 32ch;
  margin: 0;
  color: var(--ink-soft);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--sp-4), 4vw, var(--sp-6));
  align-items: end;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(var(--sp-5), 5vw, var(--sp-6));
  }
}

.hero__art {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  background: var(--accent);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 959px) {
  .hero__art {
    max-height: 280px;
  }
}

.hero__art svg { width: 100%; height: 100%; display: block; }


/* --- sections -------------------------------------------------------------- */
.section { padding-block: clamp(var(--sp-5), 6vw, var(--sp-7)); }
.section + .section { border-top: var(--hairline); }

.section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  margin-bottom: clamp(var(--sp-4), 3vw, var(--sp-5));
}

@media (min-width: 720px) {
  .section__head {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: var(--sp-4);
  }
}

.section__kicker {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.section__title {
  font-family: var(--display-font);
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
  font-weight: 700;
}

/* --- item lists (Product / Projects) -------------------------------------- */
.item-list { list-style: none; margin: 0; padding: 0; }

.item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: var(--hairline);
  position: relative;
}

.item:last-child { border-bottom: var(--hairline); }

/* On mobile: year shows small above body, meta wraps below */
.item__year {
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.item__body {
  display: grid;
  gap: var(--sp-3);
  min-width: 0;
}

.item__title {
  font-family: var(--display-font);
  font-size: clamp(1.618rem, 2.5vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.item__summary {
  font-size: var(--t-md);
  line-height: 1.5;
  margin: 0;
  color: var(--ink-soft);
  max-width: 60ch;
}

.item__meta {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: baseline;
}

.tag {
  display: inline-block;
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 999px;
  white-space: nowrap;
}

@media (min-width: 720px) {
  .item {
    grid-template-columns: 7rem 1fr 14rem;
    align-items: baseline;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
  }

  .item__year {
    font-size: var(--t-sm);
    text-transform: none;
    letter-spacing: 0.02em;
  }

  [data-accent="green"] .item,
  .work-detail-page .item {
    grid-template-columns: 1fr 14rem;
  }
}

/* --- audio player ---------------------------------------------------------
 * Progressive enhancement over native <audio>. Two stacked waveforms — base
 * in faded ink, played layer in --accent, clipped by --played.
 * ------------------------------------------------------------------------ */
.player {
  margin: var(--sp-3) 0 0;
  padding: 0;
}

.player__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(var(--sp-2), 2vw, var(--sp-3));
  padding: var(--sp-2);
  border: var(--hairline);
  border-radius: 6px;
  background: var(--bg);
}

.player__play {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--bg);
  border-radius: 4px;
  cursor: pointer;
  transition: background 200ms ease;
}

.player__play:hover { background: var(--ink-soft); }
.player__play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.player__play:active { transform: translateY(1px); }

.player__icon { width: 14px; height: 14px; display: block; }
.player__icon--pause { display: none; }
.player[data-state="playing"] .player__icon--play  { display: none; }
.player[data-state="playing"] .player__icon--pause { display: block; }

.player__body {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
}

.player__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.player__kicker {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.player__time {
  font-variant-numeric: tabular-nums;
  flex: none;
}

.player__scrubber {
  position: relative;
  height: 36px;
  cursor: pointer;
  border-radius: 2px;
  overflow: hidden;
  touch-action: none;            /* let pointer events drive scrubbing on touch */
  user-select: none;
  -webkit-user-select: none;
}

.player[data-state="dragging"] .player__scrubber,
.player__scrubber:active { cursor: grabbing; }

.player__scrubber:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.player__wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

.player__wave-bar {
  flex: 1 1 0;
  min-width: 2px;
  background: currentColor;
  border-radius: 1px;
}

.player__wave--base   { color: var(--ink); opacity: 0.18; }
.player__wave--played {
  color: var(--accent);
  clip-path: inset(0 calc(100% - var(--played, 0%)) 0 0);
  transition: clip-path 80ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .player__wave--played { transition: none; }
}

/* --- item title link ------------------------------------------------------- */
.item__link {
  text-decoration: none;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 1px;
  transition: border-color 150ms ease;
}
.item__link:hover { border-color: var(--ink); }

/* --- work detail page ------------------------------------------------------ */
.work-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--sp-5), 4vw, var(--sp-6));
}

@media (min-width: 960px) {
  .work-detail--has-stats {
    grid-template-columns: auto 1fr;
    align-items: start;
  }

  .work-detail--has-stats .work-detail__meta {
    grid-template-columns: 1fr 1fr;
    min-width: 200px;
    max-width: 260px;
  }
}

.work-detail__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-3);
}

@media (min-width: 480px) {
  .work-detail__meta {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 960px) {
  .work-detail--has-stats .work-detail__meta {
    grid-template-columns: 1fr 1fr;
  }
}

.work-detail__stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.work-detail__stat-value {
  font-family: var(--display-font);
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.work-detail__stat-label {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.work-detail__body { max-width: 68ch; }

/* work detail with an inline phone screenshot — two columns */
.work-detail--with-shot {
  grid-template-columns: auto 1fr;
  gap: clamp(var(--sp-5), 5vw, var(--sp-7));
  align-items: start;
}

@media (max-width: 959px) {
  .work-detail--with-shot {
    grid-template-columns: 1fr;
  }
}

.work-detail__shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.work-detail__shot img {
  width: clamp(160px, 18vw, 220px);
  height: auto;
  display: block;
}

.work-detail__shot-badge {
  width: clamp(80px, 10vw, 120px) !important;
}

/* --- olo brand collage ----------------------------------------------------- */
.section--collage { padding-bottom: clamp(5rem, 8vw, 8rem); }

.brand-collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(92px, 8vw, 124px);
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  margin-top: clamp(var(--sp-4), 3vw, var(--sp-5));
}

.brand-collage > div {
  overflow: hidden;
  border: var(--hairline);
  border-radius: 10px;
  background: var(--bg-deep);
  box-shadow: 0 8px 24px rgba(12, 12, 12, 0.10);
}

.brand-collage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Cold Stone — tactile context anchor */
.brand-collage__back {
  grid-column: 1 / span 7;
  grid-row: 1 / span 3;
}

.brand-collage__back img {
  object-position: center 38%;
}

.brand-collage > .brand-collage__fatburger {
  grid-column: 1 / span 7;
  grid-row: 4 / span 3;
  display: grid;
  place-items: center;
  padding: clamp(var(--sp-2), 1.4vw, var(--sp-3));
  background: #050403;
}

.brand-collage__fatburger img {
  width: 92%;
  height: auto;
  max-height: 92%;
  object-fit: contain;
  object-position: center;
}

/* Pinkberry — bright desktop contrast */
.brand-collage > .brand-collage__pinkberry {
  grid-column: 8 / -1;
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  padding: clamp(var(--sp-2), 1.4vw, var(--sp-3));
  background: #ffffff;
}

.brand-collage__pinkberry img {
  width: 92%;
  height: auto;
  max-height: 92%;
  object-fit: contain;
  object-position: center;
}

.brand-collage__fiveguys {
  grid-column: 8 / span 2;
  grid-row: 4 / span 3;
}

.brand-collage__rewards {
  grid-column: 10 / -1;
  grid-row: 4 / span 3;
}

.brand-collage__fiveguys img {
  object-fit: cover;
  object-position: center top;
}

.brand-collage__rewards img {
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 719px) {
  .brand-collage {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: clamp(72px, 20vw, 96px);
    gap: var(--sp-3);
  }

  .brand-collage > div {
    border-radius: 8px;
    grid-row: auto;
  }

  .brand-collage__back,
  .brand-collage__fatburger,
  .brand-collage__pinkberry {
    grid-column: 1 / -1;
  }

  .brand-collage__back {
    grid-row: span 2;
  }

  .brand-collage__fatburger {
    grid-row: span 3;
  }

  .brand-collage > .brand-collage__pinkberry {
    grid-column: 1 / -1;
    grid-row: span 2;
  }

  .brand-collage__fiveguys {
    grid-column: 1 / span 3;
    grid-row: span 4;
  }

  .brand-collage__rewards {
    grid-column: 4 / -1;
    grid-row: span 4;
  }
}

/* --- app screenshot strip -------------------------------------------------- */
.app-shots {
  display: flex;
  flex-direction: row;
  gap: var(--sp-3);
  overflow-x: auto;
  overflow-y: visible;
  padding-inline: var(--rail);
  padding-bottom: var(--sp-4);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  align-items: flex-start;
  justify-content: safe center;
}

.app-shots::-webkit-scrollbar { display: none; }

.app-shot {
  flex: 0 0 auto;
  width: clamp(220px, 22vw, 300px);
  scroll-snap-align: start;
  margin: 0;
}

.app-shot__img-wrap {
  border-radius: 16px;
  overflow: hidden;
  border: var(--hairline);
  background: #e84d2b;
  margin-bottom: var(--sp-3);
  box-shadow: none;
  /* Show just the phone UI portion — clip the branded header */
  height: clamp(340px, 45vw, 500px);
  position: relative;
}

.app-shot__img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.app-shot__caption {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.app-shot__label {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.app-shot__desc {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.4;
}

/* --- app store proof ------------------------------------------------------- */
.appstore-proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-deep);
  border-radius: 12px;
  border: var(--hairline);
}

@media (min-width: 720px) {
  .appstore-proof {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
}

.appstore-proof__rating {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.appstore-proof__score {
  font-family: var(--display-font);
  font-size: var(--t-mega);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.appstore-proof__stars {
  font-size: var(--t-xl);
  color: var(--accent);
  letter-spacing: -0.05em;
  line-height: 1;
}

.appstore-proof__count {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.appstore-proof__quote {
  margin: 0;
  border-left: 4px solid var(--accent);
  padding-left: var(--sp-4);
}

.appstore-proof__quote p {
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-2);
}

.appstore-proof__quote footer {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --- work nav -------------------------------------------------------------- */
.work-nav { border-top: var(--hairline); }

.work-nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--sp-2);
}

.work-nav__back,
.work-nav__next {
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  padding-block: var(--sp-2);
}

.work-nav__back:hover,
.work-nav__next:hover { opacity: 0.6; }

/* --- prose (About) --------------------------------------------------------- */
.prose {
  display: grid;
  gap: var(--sp-4);
  max-width: 62ch;
  font-size: var(--t-lg);
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.prose p { margin: 0; }

/* --- footer ---------------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  border-top: var(--hairline);
  padding-block: clamp(var(--sp-5), 4vw, var(--sp-6));
  font-size: var(--t-sm);
  background: var(--bg-deep);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

@media (min-width: 720px) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.site-footer h2 {
  font-family: var(--display-font);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 var(--sp-2);
  font-weight: 700;
}

.site-footer a {
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
}

.site-footer__meta {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  text-align: left;
}

@media (min-width: 720px) {
  .site-footer__meta { text-align: right; }
}

/* --- illustration-grid (projects.html) -------------------------------------
 * To remove: delete this block and the .illustration-grid in projects.html.
 * -------------------------------------------------------------------------- */
.illustration-grid {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.illustration-grid li {
  width: 100px;
  height: 100px;
  flex: none;
  background: var(--accent);
  border: var(--hairline);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2);
  overflow: hidden;
  transition: background 150ms ease;
}

.illustration-grid li:hover {
  background: var(--accent);
}

.illustration-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  transition: transform 250ms ease;
}

.illus-thumb:hover img { transform: scale(1.08); }

.illus-thumb {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- illus-lightbox --------------------------------------------------------
 * To remove: delete this block and the lightbox HTML + JS in projects.html.
 * -------------------------------------------------------------------------- */
.illus-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--accent-green);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
}

.illus-lightbox[hidden] { display: none; }

.illus-lightbox__img {
  max-width: min(800px, 88vw);
  max-height: 78vh;
  object-fit: contain;
  box-sizing: border-box;
}

.illus-lightbox__label { display: none; }

.illus-lightbox__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  appearance: none;
  border: none;
  background: none;
  color: var(--ink);
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
  opacity: 0.4;
}

.illus-lightbox__close:hover { opacity: 1; }

/* --- instagram-grid --------------------------------------------------------
 * Reuses .illustration-grid layout; overrides for photo thumbnails.
 * To remove: delete this block + the instagram <li> in projects.html.
 * -------------------------------------------------------------------------- */
.instagram-grid li,
.instagram-grid li:hover {
  display: block;           /* kill flex centering from illustration-grid */
  padding: 0;
  background: var(--bg-deep);
  position: relative;
}

.insta-thumb {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 4px;
}

.instagram-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;  /* favour upper crop for portrait shots */
  display: block;
  transition: transform 250ms ease;
  pointer-events: none;
}

.insta-thumb:hover img { transform: scale(1.08); }

.ig-handle {
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  font-weight: 600;
  transition: border-color 150ms ease;
}

.ig-handle:hover { border-color: var(--ink); }

/* --- work facts (detail sidebar) -------------------------------------------
 * Label/value list that sits in the work-detail--has-stats meta column.
 * -------------------------------------------------------------------------- */
.work-facts {
  margin: 0;
  display: grid;
  gap: var(--sp-4);
}

.work-facts__row {
  display: grid;
  gap: var(--sp-1);
}

.work-facts dt {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.work-facts dd {
  margin: 0;
  font-family: var(--display-font);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* --- work gallery ----------------------------------------------------------
 * Responsive image grid for work detail pages.
 * -------------------------------------------------------------------------- */
.work-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-top: clamp(var(--sp-4), 3vw, var(--sp-5));
}

.work-gallery__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.work-gallery__item img,
.work-gallery__item svg {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
  border: var(--hairline);
  border-radius: 6px;
  background: #ffffff;
}

/* clickable thumbnail button */
.work-gallery__btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  display: block;
  width: 100%;
  cursor: pointer;
  border-radius: 6px;
}

.work-gallery__btn img {
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.work-gallery__btn:hover img {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(12, 12, 12, 0.14);
}

.work-gallery__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- lightbox viewer -------------------------------------------------------
 * Full-screen image viewer with prev/next. Shared, accent-neutral.
 * -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--sp-2), 2vw, var(--sp-4));
  padding: clamp(var(--sp-4), 5vw, var(--sp-6));
  background: rgba(12, 12, 12, 0.92);
}

.lightbox[hidden] { display: none; }

.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: min(1000px, 90vw);
}

.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 6px;
  background: #ffffff;
}

.lightbox__caption {
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f3efe6;
}

.lightbox__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  appearance: none;
  border: 0;
  background: none;
  color: #f3efe6;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 120ms ease;
}

.lightbox__close:hover { opacity: 1; }

.lightbox__nav {
  appearance: none;
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(243, 239, 230, 0.4);
  border-radius: 999px;
  background: none;
  color: #f3efe6;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0.7;
  transition: opacity 120ms ease, border-color 120ms ease;
}

.lightbox__nav:hover { opacity: 1; border-color: #f3efe6; }

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  opacity: 1;
}

@media (max-width: 600px) {
  .lightbox {
    flex-wrap: wrap;
    align-content: center;
    padding: var(--sp-5) var(--sp-3);
  }

  .lightbox__figure {
    flex: 0 0 100%;
    max-width: 100%;
    order: 1;
  }

  .lightbox__nav {
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
    order: 2;
  }
}

.work-gallery__caption {
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- a11y / utility -------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

::selection { background: var(--accent); color: var(--accent-ink); }

@media (prefers-reduced-motion: no-preference) {
  .brand-mark .dot { transition: fill 250ms cubic-bezier(0.2, 0.8, 0.2, 1); }
}