:root {
    --bg: #F8F6F2;
    --fg: #111111;
    --line: rgba(17,17,17,.18);
    --card: rgba(17,17,17,.07);
    --ease: cubic-bezier(.2,.7,.2,1);
    /* Type scale — mirrors brandonyasin.com (Neue Haas Unica Pro → Inter as the free stand-in) */
    --sans: "Inter", "Neue Haas Unica Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --t-display: 251 55px/1.24 var(--sans);   /* headline-2-large */
    --t-h1:      400 54px/1.24 var(--sans);   /* headline-1 */
    --t-h2:      251 28px/1.2  var(--sans);   /* headline-2 */
    --t-quote:   251 24px/1.38 var(--sans);   /* quote */
    --t-body:    400 16px/1.3  var(--sans);   /* body */
    --t-label:   400 13px/1    var(--sans);   /* body-13 */
  }
  html[data-tone="sand"]  { --bg:#D9CDB8; --fg:#111111; --line:rgba(17,17,17,.20); --card:rgba(17,17,17,.08); }
  html[data-tone="stone"] { --bg:#A79F8C; --fg:#111111; --line:rgba(17,17,17,.22); --card:rgba(17,17,17,.10); }
  html[data-tone="umber"] { --bg:#464136; --fg:#EFE9DD; --line:rgba(239,233,221,.22); --card:rgba(239,233,221,.07); }
  html[data-tone="wine"] { --bg:#4E0A1D; --fg:#F6E7EA; --line:rgba(246,231,234,.22); --card:rgba(246,231,234,.07); }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--bg); color: var(--fg);
    font: var(--t-body);
    transition: background-color .8s var(--ease), color .8s var(--ease);
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }

  /* Header */
  header {
    position: fixed; inset: 0 0 auto 0; z-index: 20;
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 40px;
    padding: 18px 20px; font: var(--t-label); text-transform: uppercase;
    background: var(--bg); transition: background-color .8s var(--ease);
  }
  header nav { display: flex; gap: 22px; align-items: center; }
  header nav a, .contact-link { position: relative; }
  header nav a::after, .contact-link::after {
    content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
  }
  header nav a:hover::after, .contact-link:hover::after { transform: scaleX(1); }

  .brand { display: flex; align-items: center; gap: 12px; }
  .mark { height: 40px; width: auto; display: block; transition: transform .6s var(--ease); }
  .brand:hover .mark { transform: rotate(-8deg) scale(1.05); }

  /* Tone picker */
  .flower { width: 40px; height: 40px; display: block; overflow: visible; transition: transform .9s var(--ease); }
  .flower .petal { cursor: pointer; }
  .flower .petal path { fill: var(--c); fill-opacity: 0; stroke: var(--fg); stroke-width: 1; transition: fill-opacity .35s var(--ease), stroke .8s var(--ease); }
  .flower .petal:hover path, .flower .petal:focus-visible path { fill-opacity: .9; }
  .flower .petal[aria-pressed="true"] path { fill-opacity: 1; }
  .flower .petal:focus { outline: none; }
  .flower .core { fill: var(--bg); stroke: var(--fg); stroke-width: 1; transition: fill .8s var(--ease); }

  /* Hero */
  .hero { padding: 26vh 20px 12vh; position: relative; }
  .hero > *:not(.hero3d) { position: relative; z-index: 1; }
  .hero > .hero3d { position: absolute; }
  .hero h1 { cursor: default; }
  .hero3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
  .hero3d-back { z-index: 0; }
  .hero > .hero3d-front { z-index: 2; }
  .hero .eyebrow { font: var(--t-label); text-transform: uppercase; margin-bottom: 28px; display: flex; justify-content: space-between; }
  .hero h1 {
    font-weight: 300; font-size: clamp(44px, 8.4vw, 132px); line-height: .98; letter-spacing: -.045em;
  }
  .hero h1 em {
    font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em;
  }
  .hero h1 .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
  .hero h1 .line span { display: inline-block; transform: translateY(105%); animation: rise 1.1s var(--ease) forwards; }
  .hero h1 .line:nth-child(2) span { animation-delay: .12s; }
  @keyframes rise { to { transform: translateY(0); } }
  .hero .sub { margin-top: 40px; }
  .hero .sub b { font: var(--t-label); text-transform: uppercase; display: block; }

  /* Marquee */
  .marquee { border-block: 1px solid var(--line); overflow: hidden; white-space: nowrap; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 10px 0; }
  .marquee div { display: inline-block; animation: slide 40s linear infinite; }
  .marquee span { padding-right: 48px; }
  .marquee .smile { font-size: 2.1em; line-height: 0; vertical-align: -.2em; padding: 0; margin-left: .25em; }
  @keyframes slide { to { transform: translateX(-50%); } }

  /* Projects */
  .work { padding: 80px 20px 40px; }
  .work-head { display: flex; justify-content: space-between; font: var(--t-label); text-transform: uppercase; margin-bottom: 18px; }
  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 8px; }
  .project.wide { grid-column: 1 / -1; }
  .project .meta { display: flex; justify-content: space-between; font: var(--t-label); text-transform: uppercase; margin-bottom: 10px; }
  .project .meta .tags { opacity: .6; }
  .media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--card); }
  .project.wide .media { aspect-ratio: 16 / 9; }
  .media img, .media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
  .project:hover .media img, .project:hover .media video { transform: scale(1.03); }
  .placeholder { position: absolute; inset: 0; display: grid; place-items: center; font: var(--t-label); text-transform: uppercase; opacity: .5; }

  /* Hover-play video — add <video muted loop playsinline preload="metadata" poster="…"><source src="…"></video> inside .media */
  .media video { position: absolute; inset: 0; }

  /* Page transitions */
  .page { animation: page-in .8s var(--ease) both; }
  @keyframes page-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  body.leaving .page { opacity: 0; transform: translateY(-10px); transition: opacity .38s var(--ease), transform .38s var(--ease); }

  /* Custom cursor */
  .cursor {
    position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
    width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
    background: var(--fg); color: var(--bg);
    display: grid; place-items: center; font: var(--t-label); text-transform: uppercase;
    transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .8s var(--ease), opacity .3s;
    opacity: 0;
  }
  .cursor span { opacity: 0; transition: opacity .2s; white-space: nowrap; }
  .cursor.on { opacity: 1; }
  .cursor.link { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: transparent; border: 1px solid var(--fg); }
  .cursor-shape { position: absolute; left: 50%; top: 50%; height: auto; fill: var(--fg);
    transform: translate(-50%, -50%) scale(0) rotate(-25deg); transition: transform .45s var(--ease), fill .8s var(--ease); }
  .cursor span { font-size: 9px; letter-spacing: .04em; position: absolute; left: 50%; top: 50%; transform: translate(-50%, var(--off, -50%)); }
  .cursor.label { background: transparent; }
  .cursor.label .cursor-shape.active { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  .cursor.label span { opacity: 1; transition-delay: .12s; }
  @media (hover: hover) and (pointer: fine) {
    html.custom-cursor, html.custom-cursor * { cursor: none !important; }
  }

  /* Footer */
  footer { padding: 18vh 20px 24px; }
  footer .big { font-weight: 300; font-size: clamp(40px, 7vw, 110px); letter-spacing: -.045em; line-height: 1; }
  footer .big em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; }
  footer .row { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; font: var(--t-label); border-top: 1px solid var(--line); padding-top: 14px; }

  @media (max-width: 760px) {
    :root { --t-display: 251 34px/1.2 var(--sans); }
    header { grid-template-columns: 1fr auto auto; column-gap: 14px; padding: 14px 16px; }
    header nav { gap: 14px; }
    header .mark, header .flower { height: 34px; }
    header .flower { width: 34px; }
    .hero, .work, footer { padding-left: 16px; padding-right: 16px; }
    .hero { padding-top: 22vh; }
    .grid { grid-template-columns: 1fr; gap: 44px; }
    .project.wide .media { aspect-ratio: 4 / 5; }
    footer .row { grid-template-columns: 1fr 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .page { animation: none; }
    body.leaving .page { transition: none; }
    .hero h1 .line span { animation: none; transform: none; }
    .marquee div { animation: none; }
  }

  /* ---------- Project page ---------- */
  .p-hero { padding: 24vh 20px 0; }
  .p-hero .eyebrow { font: var(--t-label); text-transform: uppercase; margin-bottom: 28px; display: flex; gap: 24px; }
  .p-hero .eyebrow a { opacity: .6; }
  .p-hero h1 { font-weight: 300; font-size: clamp(56px, 11vw, 180px); line-height: .92; letter-spacing: -.05em; }
  .p-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 64px 20px 72px; }
  .p-intro .lead { font: var(--t-quote); max-width: 640px; }
  .p-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; align-content: start; }
  .p-meta dt { font: var(--t-label); text-transform: uppercase; opacity: .6; margin-bottom: 8px; }
  .p-meta dd { font: var(--t-body); }
  .p-meta .full { grid-column: 1 / -1; }
  .gallery { padding: 0 20px; display: grid; gap: 8px; }
  .g-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .g-row.full { grid-template-columns: 1fr; }
  .gallery figure { overflow: hidden; min-width: 0; }
  .gallery figure[style] img, .gallery figure[style] video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gallery figure:not([style]) img, .gallery figure:not([style]) video { width: 100%; height: auto; display: block; }
  .next { display: block; padding: 22vh 20px 0; }
  .next .lab { font: var(--t-label); text-transform: uppercase; margin-bottom: 18px; display: block; }
  .next .name { font-weight: 300; font-size: clamp(48px, 9vw, 150px); line-height: .95; letter-spacing: -.05em; display: inline-block; transition: transform .6s var(--ease); }
  .next:hover .name { transform: translateX(16px); }
  @media (max-width: 760px) {
    .p-hero { padding: 20vh 16px 0; }
    .p-intro { grid-template-columns: 1fr; padding: 40px 16px 48px; gap: 40px; }
    .gallery { padding: 0 16px; }
    .g-row { grid-template-columns: 1fr; }
    .next { padding: 16vh 16px 0; }
  }

  /* ---------- Tags: sentence case instead of all caps ---------- */
  .project .meta .tags, .p-hero .eyebrow span { text-transform: none; }

  /* ---------- Gallery: one steady column, sized so the tallest row still fits the screen ---------- */
  :root { --frame-h: calc(100svh - 112px); }
  @media (min-width: 761px) {
    .gallery[style] { max-width: calc(var(--frame-h) * var(--k) + 40px); margin-inline: auto; }
  }
  /* a single portrait frame on its own row: keep it inside the screen, centred in the column */
  .gallery .g-row.full figure:not([style]) { display: flex; justify-content: center; }
  .gallery .g-row.full figure:not([style]) img, .gallery .g-row.full figure:not([style]) video { width: auto; max-width: 100%; max-height: var(--frame-h); }

  /* ---------- Gallery rows with equal-height frames (no crop) ---------- */
  .g-row.eq { display: flex; gap: 8px; }
  .g-row.eq figure { flex: var(--a) 1 0; aspect-ratio: var(--a); min-width: 0; }
  @media (max-width: 760px) {
    .g-row.eq { flex-direction: column; }
    .g-row.eq figure { flex: none; width: 100%; }
  }

  /* ---------- Gallery section labels — same quiet label style as the rest of the site ---------- */
  .g-sec {
    display: flex; gap: 24px; font: var(--t-label); text-transform: uppercase;
    padding: 96px 0 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
  }
  .g-sec span:first-child { opacity: .6; }
  .gallery > .g-sec:first-child { padding-top: 0; }
  @media (max-width: 760px) { .g-sec { padding-top: 64px; } }
  .gallery .g-row.full.tall figure img, .gallery .g-row.full.tall figure video { width: 100% !important; max-height: none; }

  /* ---------- No orphans: never leave a single word on the last line ---------- */
  p, dd, h1, h2, .lead, footer .big { text-wrap: pretty; }

  /* ---------- Footer: hover underline only as wide as the link ---------- */
  footer .row > * { justify-self: start; }

  /* ---------- Footer: logo shapes come together next to "together" ---------- */
  footer { overflow-x: clip; }
  footer .big .assemble { height: .92em; width: auto; margin-left: .18em; vertical-align: -.1em; overflow: visible; fill: currentColor; }
  footer .big .tg { white-space: nowrap; }
  footer .big .assemble g { transform-box: fill-box; transform-origin: center;
    transition: transform 1.1s var(--ease), opacity .5s var(--ease); transition-delay: var(--d, 0s); }
  footer .big .assemble:not(.on) g { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.6); transition-delay: 0s; }
  @media (prefers-reduced-motion: reduce) { footer .big .assemble g { transition: opacity .3s; transform: none !important; } }