/* Eli Turner portfolio
   Layout: one centered column (max 1320px) with fluid gutters; every size
   scales smoothly with the window using clamp(), so there are no "jumps"
   between laptop, monitor, tablet and phone. */

/* Type: Neue Haas Grotesk from Eli's Adobe Fonts web project (kit frn8ohe,
   loaded by a <link> in each page's <head>). Adobe fonts can't be self-hosted.
   Geist (self-hosted) is only a stand-in if Adobe's fonts can't load — e.g. in
   the Claude preview link, which blocks outside stylesheets. */
@font-face { font-family: "Geist"; src: url("../fonts/geist-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  --paper: #fffefa;
  --ink: #050505;
  --body: #424242;
  --muted: #8b8a85;
  --line: #e8e6dd;
  --tile: #f2f1eb;
  --on-image: #fffefa;
  --grey: #8c8c8c;

  /* Display 700 = 75 Bold (titles, section headers)
     Text 400 = 55 Roman (body, nav, links); Text 700 = 75 Bold (small headers)
     Display 400 = 45 Light (light details: footer labels, captions, meta) */
  --font-title: "neue-haas-grotesk-display", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "neue-haas-grotesk-text", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-light: "neue-haas-grotesk-display", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font: var(--font-title);
  --title-weight: 700;
  --edge: 16px;            /* thin outer margin used by the nav and project grid */
  --t-ui: clamp(15px, 1.4vw, 20px);
  --bar-h: 56px;

  --max: 1320px;
  --gutter: clamp(16px, 4vw, 60px);
  --section: clamp(64px, 9vw, 140px);
  --gap: clamp(16px, 2.2vw, 32px);

  --t-display: clamp(52px, 8vw, 112px);
  --t-h2: clamp(30px, 3.6vw, 48px);
  --t-h3: clamp(20px, 1.7vw, 24px);
  --t-lead: clamp(17px, 1.35vw, 19px);
  --t-body: clamp(15.5px, 1.15vw, 17px);
  --t-small: 13px;
  --t-footer: clamp(30px, 3.6vw, 52px);

  --header-h: 72px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-synthesis: none;   /* never fake weights the kit doesn't include */
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font-family: inherit; }
/* 1. Titles and section headers: Display Bold */
h1, h2, h3, .next a.title { font-family: var(--font-title); font-weight: var(--title-weight); }
/* 2. Smaller headers: Text Bold */
.card h3, .product h3, .specs dt, .opportunity .cols.four dt, .swatches b, .about figcaption strong { font-family: var(--font-body); font-weight: 700; }
/* 3. Light details: Display Light */
.eyebrow, .copyright, .card p, .brief-meta, .hero-note, .swatches small, .field label, .product dt, .about figcaption small {
  font-family: var(--font-light); font-weight: 400;
}
h1, h2, h3 { color: var(--ink); margin: 0; line-height: 1; text-wrap: balance; }
p { margin: 0; max-width: 65ch; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--paper); padding: 8px 12px; }

/* ---------- Header ----------
   One transparent row of text. Name far left, links from 1/8 across,
   tagline from 2/3 across, contact far right. White text in "difference"
   mode, so it reads as black on the page and stays visible over images. */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  height: var(--bar-h);
  color: #fff; mix-blend-mode: difference;
}
.bar {
  height: 100%;
  display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: 10px; align-items: center;
  padding-left: max(var(--edge), env(safe-area-inset-left, 0px));
  padding-right: max(var(--edge), env(safe-area-inset-right, 0px));
  font-size: var(--t-ui); font-weight: 400; letter-spacing: .01em; line-height: 1.12; text-transform: lowercase;
}
.bar a { text-decoration: none; color: inherit; }
/* Projects dropdown: plain text under "projects", shown on hover or keyboard focus */
.has-menu { position: relative; }
.dropdown {
  position: absolute; left: 0; top: 100%;
  display: grid; gap: .2em; padding-top: .45em;
  visibility: hidden;
}
.dropdown a { white-space: nowrap; }
/* main.js opens it with the ink-burst animation (.open); without JS, plain hover works */
html:not(.js-menu) .has-menu:hover .dropdown, .has-menu:focus-within .dropdown, .has-menu.open .dropdown { visibility: visible; }

/* "Living ink" nav (driven by main.js): letters swell like a fisheye under the
   cursor; menus burst out of their word as one blob of ink. */
.wob { display: inline-block; white-space: pre; }
.wob .ch { display: inline-block; transform-origin: 50% 72%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bar .name { grid-column: 1 / 4; white-space: nowrap; }
.bar .links { grid-column: 4 / 16; display: flex; gap: 0 .6em; flex-wrap: wrap; }
.bar .tag { grid-column: 17 / 21; white-space: nowrap; }
.bar .contact-link { grid-column: 21 / -1; justify-self: end; }

/* Home: the bar starts in the middle of the full-screen image, scrolls up
   with the page and then sticks to the top. */
.site-header.centered { margin-top: calc(50svh - var(--bar-h) / 2); }
.site-header.over-hero { mix-blend-mode: normal; color: var(--on-image); text-shadow: 0 0 18px rgb(0 0 0 / .45), 0 1px 3px rgb(0 0 0 / .35); }

.pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 18px; border: 1px solid var(--ink); border-radius: 999px;
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--ink);
  background: transparent; cursor: pointer; font-family: inherit;
  transition: background .2s, color .2s;
}
.pill .arrow {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); transition: transform .25s, background .2s, color .2s;
}
.pill .arrow svg { width: 13px; height: 13px; }
.pill:hover { background: var(--ink); color: var(--paper); }
.pill:hover .arrow { background: var(--paper); color: var(--ink); transform: rotate(45deg); }
.pill.light { border-color: var(--on-image); color: var(--on-image); }
.pill.light .arrow { background: var(--on-image); color: var(--ink); }
.pill.light:hover { background: var(--on-image); color: var(--ink); }
.pill.light:hover .arrow { background: var(--ink); color: var(--on-image); }

.menu-btn { display: none; grid-column: 13 / -1; justify-self: end; background: none; border: 0; padding: 8px 0; cursor: pointer; color: inherit; font: inherit; text-transform: lowercase; }
.mobile-nav { display: none; }

/* Switches to the "menu" button below 880px (the mono nav needs the room) */
@media (max-width: 880px) {
  .bar .links, .bar .tag, .bar .contact-link { display: none; }
  .bar .name { grid-column: 1 / 13; }
  .menu-btn { display: block; }
  /* Phone menu: a text-only dropdown down the right side, under "menu" — same
     look as the desktop projects dropdown (it lives inside the header, so it
     shares the nav's white-on-photo / color-inverting text). */
  .mobile-nav {
    position: absolute; top: calc(100% - 6px);
    right: max(var(--edge), env(safe-area-inset-right, 0px));
    display: flex; flex-direction: column; align-items: flex-end;
    font-size: var(--t-ui); font-weight: 400; text-transform: lowercase; text-align: right;
    visibility: hidden;
  }
  .mobile-nav.open { visibility: visible; }   /* main.js animates the items in */
  .mobile-nav a, .m-projects {
    display: block; padding: 7px 0; color: inherit; text-decoration: none;
    background: none; border: 0; font: inherit; text-transform: inherit; text-align: right; cursor: pointer;
  }
  /* Projects list opens under "projects", a touch smaller and lighter */
  .m-sub { display: none; flex-direction: column; align-items: flex-end; padding-bottom: 4px; }
  .m-sub.open { display: flex; }
  .m-sub a { padding: 5px 0; font-size: .9em; opacity: .75; }
}

/* ---------- Home ---------- */
/* Full-screen image; it slides up under the centered bar. */
.hero {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 480px;
  margin-top: calc(-50svh - var(--bar-h) / 2);
  background: var(--ink);
}
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgb(5 5 5 / .22); }

.edge {
  padding-left: max(var(--edge), env(safe-area-inset-left, 0px));
  padding-right: max(var(--edge), env(safe-area-inset-right, 0px));
}
.work { padding-block: calc(var(--bar-h) + clamp(24px, 3vw, 48px)) clamp(72px, 9vw, 140px); }
.work-label { font-size: var(--t-ui); color: var(--ink); padding-bottom: 12px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 80px) 10px; }
@media (max-width: 700px) { .cards { grid-template-columns: 1fr; } }
.card { display: grid; gap: 10px; align-content: start; text-decoration: none; }
/* Square boxes; each card's img sets object-position so the product stays in frame */
.card-img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--tile); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
a.card:hover .card-img img { transform: scale(1.03); }
.card h3 { font-size: var(--t-ui); line-height: 1.15; }
.card p { font-size: var(--t-ui); color: var(--grey); line-height: 1.15; }

.section { padding-block: var(--section); }
.eyebrow { font-size: var(--t-small); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- Page titles (about / gallery / contact) ---------- */
.page-title { padding-block: clamp(40px, 6vw, 90px) clamp(24px, 3vw, 40px); }
.page-title h1 { font-size: var(--t-display); letter-spacing: -.02em; padding-bottom: clamp(20px, 2.5vw, 32px); border-bottom: 1px solid var(--line); }

/* About */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-bottom: var(--section); }
.about figure { margin: 0; display: grid; gap: 14px; }
.about figure img { border-radius: 6px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.about figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.about figcaption strong { display: block; color: var(--ink); }
.about figcaption small { color: var(--muted); font-size: var(--t-small); }
.socials { display: flex; gap: 8px; }
.socials a { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background .2s, color .2s; }
.socials a:hover { background: var(--ink); color: var(--paper); }
.socials svg { width: 16px; height: 16px; }
.about-text { display: grid; gap: 1.2em; font-size: var(--t-lead); }
.about-text .pill { justify-self: start; margin-top: 12px; }
@media (max-width: 800px) { .about { grid-template-columns: 1fr; } }

/* Gallery: masonry columns */
.masonry { columns: 4 260px; column-gap: var(--gap); padding-bottom: var(--section); }
.masonry button { display: block; width: 100%; margin: 0 0 var(--gap); padding: 0; border: 0; background: var(--tile); border-radius: 6px; overflow: hidden; cursor: zoom-in; break-inside: avoid; }
.masonry img { width: 100%; transition: transform .5s; }
.masonry button:hover img { transform: scale(1.03); }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); padding-bottom: var(--section); }
.contact-intro { display: grid; gap: 28px; align-content: start; }
.contact-intro .lead { font-size: var(--t-h3); color: var(--ink); }
.contact-lines { display: grid; gap: 6px; }
.contact-lines a { color: var(--ink); text-decoration: none; font-size: var(--t-lead); width: fit-content; }
.contact-lines a:hover { text-decoration: underline; text-underline-offset: 4px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--t-small); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  font: inherit; color: var(--ink); background: transparent; width: 100%;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 0;
  transition: border-color .2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.form .pill { justify-self: start; }
.form-note { grid-column: 1 / -1; font-size: var(--t-small); color: var(--muted); min-height: 1.4em; }
@media (max-width: 800px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form { grid-template-columns: 1fr; } }

/* ---------- Project pages ---------- */
/* Project hero sits under the transparent nav */
.p-hero { position: relative; margin-top: calc(-1 * var(--bar-h)); }
/* Project pages start hidden for a moment (class set in <head>) and fade in once
   they're at the top, so an old scroll spot is never seen. The animation is a
   safety net that shows the page after 2.5s even if the script never runs. */
html.p-opening body { opacity: 0; animation: p-reveal .01s 2.5s forwards; }
@keyframes p-reveal { to { opacity: 1; } }
body { transition: opacity .25s ease; }

/* Opens on one full-screen image; scroll (or the arrow) to reach the project */
.p-hero img { width: 100%; height: 100vh; height: 100svh; min-height: 480px; object-fit: cover; }

/* Small down arrow at the bottom of the full-screen images (home + projects) */
.hero-arrow {
  position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 2;
  width: 48px; height: 48px; margin-left: -24px; display: grid; place-items: center;
  color: var(--on-image); filter: drop-shadow(0 0 3px rgb(0 0 0 / .5)) drop-shadow(0 1px 10px rgb(0 0 0 / .35));
  transition: transform .25s ease, opacity .2s;
}
.hero-arrow svg { width: 30px; height: 30px; stroke-width: 2.2; }
.hero-arrow:hover { transform: translateY(4px); }
.hero-arrow:focus-visible { outline-color: var(--on-image); }
.p-hero::after { content: ""; position: absolute; inset: 0 0 auto; height: 160px; background: linear-gradient(rgb(5 5 5 / .3), rgb(5 5 5 / 0)); pointer-events: none; }
/* Project title sits on the hero, white, bottom-left (above the arrow) */
.hero-title { position: absolute; left: 0; right: 0; bottom: clamp(84px, 12vh, 140px); z-index: 2; color: var(--on-image); pointer-events: none; }
.hero-title h1 { color: var(--on-image); font-size: var(--t-display); letter-spacing: -.02em; text-shadow: 0 2px 24px rgb(0 0 0 / .25); }
.hero-title .sub { color: var(--on-image); font-size: var(--t-lead); font-weight: 400; margin-top: .5em; text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
/* Soft darkening behind the title (bottom-left), only as much as needed to read it */
.p-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 65% at 0% 100%, rgb(5 5 5 / .55), rgb(5 5 5 / 0) 70%),
    linear-gradient(to top, rgb(5 5 5 / .24), rgb(5 5 5 / 0) 35%);
}

/* Short project brief under the hero: one paragraph + small detail lines */
.p-intro { padding-block: clamp(36px, 4.5vw, 64px) clamp(28px, 3.5vw, 48px); }
.p-intro .brief { max-width: 44ch; font-size: var(--t-body); color: var(--body); }
.brief-meta { list-style: none; margin: clamp(22px, 2.5vw, 32px) 0 0; padding: 0; font-size: 12.5px; line-height: 1.4; color: var(--body); }
@media (max-width: 760px) {
  .hero-title { bottom: 96px; }
  .p-intro .brief { max-width: none; }
  .brief-meta { font-size: 13px; }
}

.block { padding-block: clamp(48px, 7vw, 110px); }
.block + .block { padding-top: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.split.wide-media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.wide-media.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split.top { align-items: start; }
.text { display: grid; gap: 1em; align-content: start; min-width: 0; }
.text h2 { font-size: var(--t-h3); letter-spacing: .02em; text-transform: uppercase; margin-bottom: .3em; }
.text h2.big { font-size: var(--t-h2); letter-spacing: 0; }
.text .quote { font-size: var(--t-lead); color: var(--ink); font-weight: 400; }
@media (max-width: 800px) {
  .split, .split.wide-media, .split.wide-media.flip { grid-template-columns: 1fr; }
  .split .text { order: -1; }
}

.media img, .full img, .grid img { width: 100%; border-radius: 4px; background: var(--tile); }
.zoomable { cursor: zoom-in; }
.full { padding-block: clamp(24px, 3vw, 40px); }
.full.bleed img { border-radius: 0; }

.grid { display: grid; gap: clamp(8px, 1.2vw, 16px); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid.c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid.square img { aspect-ratio: 1.17; object-fit: cover; }
.grid.tall img { aspect-ratio: 0.65; object-fit: cover; }
.grid.landscape img { aspect-ratio: 1.6; object-fit: cover; }
@media (max-width: 900px) {
  .grid.c5, .grid.c6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .grid.c3:not(.keep), .grid.c2 { grid-template-columns: 1fr; }
  .grid.c5, .grid.c6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Existing products comparison */
.compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.product { display: grid; gap: 14px; align-content: start; }
.product img { aspect-ratio: 1.2; object-fit: cover; border-radius: 4px; width: 100%; background: var(--tile); }
.product h3 { font-size: 16px; letter-spacing: .04em; }
.product dl { margin: 0; display: grid; gap: 12px; font-size: 14px; }
.product dt { font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.product dd { margin: 0; }
.product ul { margin: 4px 0 0; padding-left: 1.1em; line-height: 1.35; }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } .product { grid-template-columns: 120px minmax(0, 1fr); align-items: start; } .product img { grid-row: span 2; } }

.opportunity { background: var(--tile); }
.opportunity .wrap { display: grid; gap: 24px; padding-block: clamp(56px, 7vw, 110px); }
.opportunity h2 { font-size: var(--t-h2); }
.opportunity .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 60px); }
@media (max-width: 800px) { .opportunity .cols { grid-template-columns: 1fr; } }
.opportunity .band-lead { max-width: 60ch; font-size: var(--t-lead); color: var(--ink); }

/* Floating scrollbar (mouse/trackpad computers). The native bar sits in its own
   solid strip, so it's hidden and main.js draws a thin thumb over the page that
   inverts colors like the nav. Touch devices keep their own overlay scrollbars. */
@media (hover: hover) and (pointer: fine) {
  html.custom-scroll { scrollbar-width: none; }
  html.custom-scroll::-webkit-scrollbar { display: none; }
}
.scroll-rail { position: fixed; top: 0; right: 0; bottom: 0; width: 14px; z-index: 55; mix-blend-mode: difference; }
.scroll-thumb {
  position: absolute; right: 3px; width: 4px; min-height: 40px; border-radius: 4px;
  background: #fff; opacity: .45; cursor: grab;
  transition: opacity .2s, width .15s, right .15s;
}
.scroll-rail:hover .scroll-thumb, .scroll-thumb.active { opacity: .8; width: 7px; right: 3px; }
.scroll-thumb.active { cursor: grabbing; }
body.menu-open .scroll-rail { display: none; }

/* Small disclosure label on a project hero (e.g. "Enhanced with AI") */
.hero-note {
  position: absolute; z-index: 2; right: max(var(--edge), env(safe-area-inset-right, 0px)); bottom: 14px;
  font-size: 12px; letter-spacing: .04em; color: var(--on-image); text-shadow: 0 1px 6px rgb(0 0 0 / .45);
}

/* Cutout images (transparent background): no grey tile behind them */
img.cutout { background: none !important; border-radius: 0 !important; }
/* A standalone image kept to a comfortable size, centered */
.cutout-wrap img, .full.narrow img { max-width: min(100%, 1100px); margin-inline: auto; }

/* Images that share one 4:3 shape (Sudzee final images). Each sets its own
   object-position so the product stays in frame; clicking shows the full image. */
img.r43 { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; }
/* Text + photo rows that sit on the same 2-column grid as the photo pairs, so
   every photo in the section is exactly the same size. The text keeps its
   breathing room with padding inside its own column. Stacks at the same width
   the photo pairs do. */
.split.match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); }
.split.match-grid .text { order: 0; padding-inline: clamp(16px, 4vw, 64px); }
@media (max-width: 520px) {
  .split.match-grid { grid-template-columns: 1fr; gap: 20px; }
  .split.match-grid .text { order: -1; padding-inline: 0; }
}

/* Two images stacked in one column of a split */
.media.stack { display: grid; gap: clamp(8px, 1.2vw, 16px); }

/* An image placed under a text column */
.text > img { width: 100%; border-radius: 4px; margin-top: 1em; }

/* Color palette swatches */
.swatches { list-style: none; margin: 1em 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.swatches li { display: grid; gap: 2px; font-size: 13px; }
.swatches span { aspect-ratio: 4 / 3; border-radius: 4px; margin-bottom: 6px; }
.swatches b { color: var(--ink); }
.swatches small { color: var(--grey); font-size: 12px; }

/* Four short feature notes in the grey band (Huntington) */
.opportunity .cols.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin: 0; }
.opportunity .cols.four div { display: grid; gap: 8px; align-content: start; border-top: 1px solid var(--line); padding-top: 14px; }
.opportunity .cols.four dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.opportunity .cols.four dd { margin: 0; }
@media (max-width: 900px) { .opportunity .cols.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .opportunity .cols.four { grid-template-columns: 1fr; } }

.specs { display: grid; gap: 0; margin: 12px 0 0; border-top: 1px solid var(--line); }
.specs div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-size: 12px; letter-spacing: .1em; color: var(--ink); padding-top: 3px; }
.specs dd { margin: 0; }

.next { border-top: 1px solid var(--line); }
.next .wrap { padding-block: clamp(40px, 5vw, 72px); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.next a.title { text-decoration: none; color: var(--ink); font-size: var(--t-h2); }
.next a.title:hover { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }

/* ---------- Footer ---------- */
/* Footer uses the nav bar's exact grid, edges, text size and lowercase style,
   so its columns line up with the nav above:
   get in touch → under "eli turner", follow me → under "industrial designer",
   menu → right-aligned under "contact". */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap {
  max-width: none;
  padding-left: max(var(--edge), env(safe-area-inset-left, 0px));
  padding-right: max(var(--edge), env(safe-area-inset-right, 0px));
  padding-block: clamp(56px, 7vw, 110px) 20px;
  display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: 10px; row-gap: clamp(56px, 7vw, 110px);
  font-size: var(--t-ui); font-weight: 400; line-height: 1.2; letter-spacing: .01em; text-transform: lowercase;
}
.footer-contact, .footer-col { display: grid; gap: .45em; align-content: start; min-width: 0; }
.footer-contact { grid-column: 1 / 13; }
.footer-follow { grid-column: 17 / 21; }
.footer-menu { grid-column: 21 / -1; justify-items: end; text-align: right; }
.site-footer .eyebrow { font-size: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--grey); margin-bottom: .35em; }
.site-footer a { color: var(--ink); text-decoration: none; width: fit-content; overflow-wrap: anywhere; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.footer-contact .big { font: inherit; }
/* Email and phone are plain text (not links), but easy to select and copy */
.contact-text { color: var(--ink); width: fit-content; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; cursor: text; }
.contact-lines .contact-text { font-size: var(--t-lead); }
.copyright {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: var(--t-small); font-weight: 400; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--line);
}
/* Phones: the nav already has the menu, so the footer's menu is hidden.
   get in touch stays left (under "eli turner"), follow me moves right (under "menu"). */
@media (max-width: 880px) {   /* same switch point as the nav */
  .footer-menu { display: none; }
  .footer-contact { grid-column: 1 / 13; }
  .footer-follow { grid-column: 13 / -1; justify-items: end; text-align: right; }
}

/* ---------- Lightbox ---------- */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgb(5 5 5 / .9); }
.lightbox img { width: 100%; height: 100%; object-fit: contain; padding: clamp(16px, 4vw, 56px); cursor: zoom-out; }
.lightbox .close { position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink); font-size: 22px; cursor: pointer; }

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