/* ============================================================
   Nuevox Homes: v2 design system
   Apple's spatial logic (full-bleed sections, hairlines, pills,
   one action colour) rendered in the Nuevox warm-earth palette.
   ============================================================ */

:root{
  /* ---- Palette (unchanged brand colours) ---- */
  --paper:#F3EEE4;      /* canvas: Apple's #f5f5f7 */
  --linen:#FAF7F1;      /* lifted surface: Apple's white */
  --cream:#E7DECF;      /* alternate wash */
  --ink:#1E1A12;        /* primary text + dark bands */
  --stone:#5C5447;      /* secondary text */
  --mist:#8B8271;       /* tertiary text */
  --line:#DDD3C1;       /* hairline on light */
  --line-dark:rgba(243,238,228,.16); /* hairline on dark */
  --clay:#9C6A45;       /* THE action colour: filled pills only */
  --claysoft:#C0936E;   /* decorative accent only */

  /* ---- Type ---- */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;

  --t-caption:12px;  --tr-caption:.28em;
  --t-body-sm:14px;  --tr-body-sm:-.014em;
  --t-body:17px;     --tr-body:-.016em;
  --t-sub:21px;      --tr-sub:-.012em;
  --t-h-sm:28px;
  --t-h:40px;
  --t-h-lg:56px;

  /* ---- Motion: the Apple feel lives here ---- */
  --ease:cubic-bezier(.32,.08,.24,1);   /* settle */
  --ease-out:cubic-bezier(.16,1,.3,1);  /* release */
  --dur:.9s;

  /* ---- Shape ---- */
  --r-pill:980px;
  --r-tile:22px;
  --r-img:12px;

  --nav-h:62px;
  --subnav-h:0px;   /* sticky section bar removed; keeps calc() valid */
  --gutter:clamp(20px,4vw,48px);
  --measure:980px;   /* Apple's internal text max-width */
  --media-max:1100px; /* widest an image is ever painted; see note below */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-body); line-height:1.47;
  letter-spacing:var(--tr-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; overflow-x:clip;
}
img{ display:block; max-width:100%; height:auto; }
/* height:auto is load-bearing: every <img> now carries width/height
   attributes, and without it those attributes override `aspect-ratio` and
   stretch the founder portraits to their full intrinsic height. Rules that
   genuinely want a fixed box set height:100% themselves and still win. */
/* The <picture> wrapper must not participate in layout, or every
   `img{width:100%;height:100%}` rule would resolve against it instead. */
picture{ display:contents; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* Paper grain: the one texture the brand keeps */
body::after{
  content:""; position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--claysoft); color:var(--ink); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.display{
  font-family:var(--serif); font-weight:400; line-height:.98; letter-spacing:-.022em;
  margin:0;
}
.display em{ font-style:italic; font-weight:300; }

.t-display{ font-size:clamp(44px,8.2vw,104px); }
.t-h-lg  { font-size:clamp(34px,5.4vw,var(--t-h-lg)); }
.t-h     { font-size:clamp(28px,4vw,var(--t-h)); }
.t-h-sm  { font-size:clamp(23px,2.6vw,var(--t-h-sm)); }

.eyebrow{
  font-size:var(--t-caption); letter-spacing:var(--tr-caption); text-transform:uppercase;
  font-weight:500; color:var(--clay); margin:0;
}
.on-dark .eyebrow{ color:var(--claysoft); }

/* The "whisper voice": Apple's weight-300 subhead */
.sub{
  font-size:clamp(18px,2.1vw,var(--t-sub)); font-weight:300; line-height:1.33;
  letter-spacing:var(--tr-sub); color:var(--stone); margin:0;
}
.on-dark .sub{ color:rgba(243,238,228,.72); }

.body{ font-size:var(--t-body); line-height:1.47; color:var(--stone); margin:0; }
.on-dark .body{ color:rgba(243,238,228,.66); }
.small{ font-size:var(--t-body-sm); letter-spacing:var(--tr-body-sm); }

.on-dark{ color:var(--paper); }

/* ============================================================
   BUTTONS: one filled clay pill, one outlined. Never two filled.
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-pill); padding:12px 22px;
  font-size:var(--t-body); font-weight:500; letter-spacing:var(--tr-body);
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease-out);
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-fill{ background:var(--clay); color:var(--linen); }
.btn-fill:hover{ background:#8A5B39; }
.btn-line{ border:1px solid var(--clay); color:var(--clay); }
.btn-line:hover{ background:rgba(156,106,69,.07); }
.on-dark .btn-line{ border-color:rgba(243,238,228,.4); color:var(--paper); }
.on-dark .btn-line:hover{ background:rgba(243,238,228,.1); }
.btn-sm{ padding:8px 17px; font-size:var(--t-body-sm); }

/* Ghost link with the Apple chevron */
.link{ color:var(--clay); font-size:var(--t-body); display:inline-flex; align-items:center; gap:5px; }
.link::after{ content:"›"; font-size:1.25em; line-height:0; transform:translateY(-1px);
  transition:transform .3s var(--ease-out); }
.link:hover::after{ transform:translate(3px,-1px); }
.on-dark .link{ color:var(--claysoft); }

/* ============================================================
   GLOBAL NAV: thin, translucent, hairline. Hides on scroll down.
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  background:rgba(243,238,228,.72); backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:transform .5s var(--ease), background-color .4s var(--ease),
             border-color .4s var(--ease);
}
.nav.scrolled{ border-bottom-color:var(--line); }
.nav.hidden{ transform:translateY(-100%); }
.nav-inner{
  max-width:1440px; margin:0 auto; height:100%; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.wordmark{ font-family:var(--serif); font-size:19px; letter-spacing:-.02em; display:flex;
  align-items:center; gap:5px; }
.wordmark i{ width:5px; height:5px; border-radius:50%; background:var(--clay);
  display:block; transform:translateY(4px); transition:transform .4s var(--ease-out); }
.wordmark:hover i{ transform:translateY(4px) scale(1.5); }
.nav-links{ display:flex; align-items:center; gap:clamp(14px,1.8vw,22px); }

/* The header holds one thing you can do: go to the homes that are available.
   Same fill, radius and colour as the Inquire pill, one step larger and bolder. */
/* Two persistent actions as a matched pair. Flat, hairline-bordered and
   untextured: the same language as the buttons in the page body, where warm
   surfaces and thin rules do the work rather than blur or shadow. */
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-cta, .nav-cta2{
  border-radius:var(--r-pill); white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 22px;
  font-size:var(--t-body-sm); font-weight:500; letter-spacing:-.006em;
  border:1px solid transparent;
  transition:background-color .35s var(--ease), border-color .35s var(--ease),
             color .35s var(--ease);
}
.nav-cta{ background:var(--clay); color:var(--linen); border-color:var(--clay); }
.nav-cta:hover, .nav-cta[aria-current]{ background:#8A5B39; border-color:#8A5B39; }
/* Deeper clay for the outlined label: the brand tone reads 3.98:1 on paper,
   this holds 4.99:1. */
.nav-cta2{ background:transparent; color:#8A5B39; border-color:rgba(138,91,57,.38); }
.nav-cta2:hover{ border-color:#8A5B39; background:rgba(138,91,57,.06); }

.nav-burger{ display:none; padding:8px; margin-right:-8px; }

/* ============================================================
   SECTIONS: full-bleed, no cards inside a section
   ============================================================ */
.section{ padding:clamp(72px,10vw,136px) var(--gutter); }
.section--tight{ padding-block:clamp(48px,6vw,80px); }
.bg-paper{ background:var(--paper); }
.bg-linen{ background:var(--linen); }
.bg-cream{ background:var(--cream); }
.bg-ink{ background:var(--ink); }
.wrap{ max-width:1440px; margin:0 auto; }
.measure{ max-width:var(--measure); margin-inline:auto; }
.center{ text-align:center; }
.stack{ display:flex; flex-direction:column; }
.actions{ display:flex; flex-wrap:wrap; gap:14px; }
.center .actions{ justify-content:center; }

/* ============================================================
   HERO: centred type, product image fills the rest
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column;
  padding-top:calc(var(--nav-h) + var(--subnav-h) + clamp(32px,5vw,64px)); overflow:hidden; }
.hero-copy{ position:relative; z-index:2; padding-inline:var(--gutter); }
.hero-media{ position:relative; flex:none; margin:clamp(32px,5vw,56px) auto 0;
  width:min(100% - var(--gutter) * 2, var(--media-max)); aspect-ratio:16/9;
  border-radius:var(--r-tile); overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }

/* Scroll-linked scale: set by JS, falls back to static */
.zoom{ will-change:transform; transform:scale(var(--z,1)); transform-origin:center 60%; }

/* ============================================================
   TILE GRID: the Apple homepage stack
   ============================================================ */
.tiles{ display:grid; gap:12px; padding:12px; background:var(--paper); }
.tiles--half{ grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); }
.tile{
  position:relative; border-radius:var(--r-tile); overflow:hidden;
  min-height:clamp(460px,62svh,640px);
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(40px,5vw,64px) clamp(20px,4vw,40px) 0;
  text-align:center; isolation:isolate;
}
.tile--tall{ min-height:clamp(560px,84svh,880px); }
.tile-bg{ position:absolute; inset:0; z-index:-2; }
.tile-bg img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease-out); }
.tile:hover .tile-bg img{ transform:scale(1.03); }
.tile-scrim{ position:absolute; inset:0; z-index:-1; }
/* Copy sits at the top of a tile, so the scrim is weighted there. */
.scrim-top{ background:linear-gradient(to bottom,
    rgba(30,26,18,.88) 0%, rgba(30,26,18,.78) 26%,
    rgba(30,26,18,.44) 55%, rgba(30,26,18,.74) 78%,
    rgba(30,26,18,.88) 100%); }
.scrim-doc{ background:linear-gradient(to bottom,
    rgba(250,247,241,.94) 0%, rgba(250,247,241,.86) 34%,
    rgba(250,247,241,.32) 66%, rgba(250,247,241,.55) 100%); }
.tile-copy{ max-width:min(92vw,620px); }
.tile-copy .actions{ margin-top:clamp(18px,2.5vw,26px); }
/* image anchored at the bottom of a copy-first tile */
.tile--figure{ justify-content:flex-start; padding-bottom:0; }
.tile-figure{ margin-top:auto; width:100%; max-width:min(100%,880px);
  display:flex; justify-content:center; }
/* Keep the product shot to roughly one screen: the Apple marquee never
   scrolls past itself. Portrait renders are height-bound, not width-bound. */
.tile-figure img{ max-height:min(56svh,640px); width:auto; object-fit:contain; }

/* ============================================================
   SPEC STRIP: hairline dividers, no boxes
   ============================================================ */
.specs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border-top:1px solid var(--line); }
.on-dark .specs{ border-top-color:var(--line-dark); }
.spec{ padding:clamp(24px,3vw,36px) 4px; text-align:center;
  border-left:1px solid var(--line); }
.on-dark .spec{ border-left-color:var(--line-dark); }
.spec:first-child{ border-left:0; }
.spec b{ display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,3.4vw,var(--t-h)); letter-spacing:-.02em; }
.spec span{ display:block; margin-top:8px; font-size:var(--t-body-sm); color:var(--mist); }
.on-dark .spec span{ color:rgba(243,238,228,.5); }

/* ============================================================
   CHAPTER: full-bleed feature, type over or under the image
   ============================================================ */
.chapter{ position:relative; }
.chapter-media{ position:relative; overflow:hidden; border-radius:var(--r-tile);
  aspect-ratio:16/9; width:min(100%, var(--media-max)); margin-inline:auto; }
.chapter-media img{ width:100%; height:100%; object-fit:cover; }
.chapter-copy{ max-width:min(92vw,660px); margin-inline:auto; text-align:center;
  padding-bottom:clamp(28px,4vw,48px); }

/* Sticky-scroll chapter: headline pins while the frames advance */
.pin{ position:relative; }
.pin-stage{ position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center; }
.pin-frame{ position:absolute; inset:0; opacity:0;
  transition:opacity .7s var(--ease); }
.pin-frame img{ width:100%; height:100%; object-fit:cover; }
.pin-frame.on{ opacity:1; }
/* `ch` here would resolve against the 17px container, not the headline
   use an absolute measure so the pinned title keeps its scale. */
.pin-caption{ position:relative; z-index:3; text-align:center;
  max-width:min(90vw,660px); padding-inline:var(--gutter); }
.pin-track{ height:280svh; }

/* ============================================================
   GALLERY
   ============================================================ */
/* Explicit counts rather than auto-fit: auto-fit drops to three columns on a
   typical laptop and strands a fourth item on its own row. */
.grid-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px); }
@media (max-width:980px){ .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px){ .grid-4{ grid-template-columns:minmax(0,1fr); } }
.figure figcaption{ margin-top:12px; font-size:var(--t-body-sm); color:var(--mist); }
.on-dark .figure figcaption{ color:rgba(243,238,228,.55); }
.figure .shot{ overflow:hidden; border-radius:var(--r-img); aspect-ratio:4/3; }
.figure .shot img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out); }
.figure:hover .shot img{ transform:scale(1.05); }

/* ============================================================
   FOOTER: flat, typographic, hairline dividers
   ============================================================ */
.footer{ background:var(--cream); font-size:var(--t-caption); color:var(--mist);
  padding:clamp(40px,5vw,56px) var(--gutter); }
.footer a:hover{ color:var(--ink); }
.footer-cols{ display:grid; gap:32px;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); }
.footer h4{ font-size:var(--t-caption); font-weight:600; color:var(--ink); margin:0 0 12px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.footer-fine{ margin-top:36px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; }

/* ============================================================
   REVEALS: long, soft, one direction. Never bouncy.
   ============================================================ */
/* Gated on .js, which an inline script in <head> sets. If that script never
   runs (JS off, blocked, or an error) the content is simply visible rather than
   stuck at opacity 0 with nothing to reveal it. */
.js .rv{ opacity:0; transform:translateY(24px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.js .rv.in{ opacity:1; transform:none; }
.rv[data-d="1"]{ transition-delay:.07s }
.rv[data-d="2"]{ transition-delay:.14s }
.rv[data-d="3"]{ transition-delay:.21s }
.rv[data-d="4"]{ transition-delay:.28s }

/* Image "develops" into place */
.js .rv-img img{ transform:scale(1.08); opacity:0;
  transition:transform 1.4s var(--ease), opacity 1s var(--ease); }
.js .rv-img.in img{ transform:none; opacity:1; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv,.rv-img img,.pin-frame{ transition:none!important; transform:none!important;
    opacity:1!important; }
  .zoom{ transform:none!important; }
  .pin-track{ height:auto; }
  .pin-stage{ position:static; height:auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  .nav-cta, .nav-cta2{ height:36px; padding:0 16px; }
  /* The fixed bottom bar already offers Inquire on a phone. */
  .nav-cta2{ display:none; }
  .tile{ min-height:clamp(420px,70svh,560px); }
}
/* On a phone the section links ARE the navigation, so they stay and scroll
   sideways. The context label is what gives way instead. */

@media (max-width:520px){
  .spec{ border-left:0; border-top:1px solid var(--line); }
  .on-dark .spec{ border-top-color:var(--line-dark); }
  .specs{ grid-template-columns:1fr 1fr; }
  .actions .btn{ flex:1 1 auto; }
}



/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  background:rgba(30,26,18,.93); padding:clamp(16px,4vw,48px); cursor:zoom-out;
}
.lightbox[hidden]{ display:none; }   /* must beat the display:grid above */
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain;
  border-radius:var(--r-img); background:#fff; }

/* Founder row: always four across, names beneath */
.people{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,18px);
  width:100%; max-width:520px; margin-top:auto;
  padding-bottom:clamp(28px,4vw,44px); }
.people figure{ margin:0; }
.people img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; }
.people figcaption{ margin-top:10px; font-size:var(--t-caption); line-height:1.35; }
.people figcaption b{ display:block; font-weight:500; }
.people figcaption span{ color:var(--claysoft); }

/* A tile whose background is a document (plan drawing), not a photograph */
.tile--doc .tile-bg img{ object-fit:contain; object-position:center 78%;
  padding:clamp(16px,3vw,40px); }

/* ============================================================
   v3: fewer affordances, one clear path down the page
   ============================================================ */

/* Full-bleed hero: one image, centred statement, no buttons. */
/* Flex, not grid: `place-items:center` on a grid container makes absolutely
   positioned children (the image and scrim) shrink-to-fit instead of stretching
   to inset:0, which leaves the hero image floating in the corner. */
.hero-full{
  position:relative; min-height:100svh; display:flex;
  align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  padding:calc(var(--nav-h) + var(--subnav-h) + clamp(40px,6vw,72px))
          var(--gutter) clamp(72px,9vw,112px);
}
/* The exterior rendering is a 1024px file. Painted full-bleed it was being
   stretched ~2.8x on a retina laptop, which is the pixelation. Framing it at
   --media-max brings that down to about 1.1x at 1x and ~2.2x at 2x. The panel
   reads as deliberate rather than as a stretched backdrop. */
.hero-full > .bg, .hero-full > .scrim{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(100% - var(--gutter) * 2, var(--media-max));
  aspect-ratio:16/9; border-radius:var(--r-tile); overflow:hidden;
}
.hero-full > .bg img{ width:100%; height:100%; object-fit:cover; }
/* A radial behind the copy plus a vertical wash: this image has a bright sky
   and pale stone, so a linear gradient alone leaves the eyebrow unreadable. */
.hero-full > .scrim{ background:
    radial-gradient(88% 58% at 50% 44%, rgba(30,26,18,.70), rgba(30,26,18,.36) 62%,
                    rgba(30,26,18,.14) 100%),
    linear-gradient(to bottom, rgba(30,26,18,.55) 0%, rgba(30,26,18,.30) 45%,
                    rgba(30,26,18,.62) 100%); }
.hero-full > .inner{ position:relative; z-index:2; max-width:min(92vw,880px);
  margin-inline:auto; }

/* Quiet scroll cue: a link, not a button. */
.cue{ display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  margin-top:clamp(28px,4vw,44px); font-size:var(--t-body-sm); letter-spacing:.02em; }
.cue svg{ opacity:.7; animation:nudge 2.6s var(--ease) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(5px) } }
@media (prefers-reduced-motion:reduce){ .cue svg{ animation:none } }

/* ---- Projects: a list built to grow ---- */
.projects{ display:grid; gap:clamp(16px,2vw,28px); margin-top:clamp(40px,5vw,64px); }
.projects--multi{ grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr)); }
/* A card with no page behind it yet: same shape, no click affordance. */
.project--soon{ cursor:default; }
.project--soon .project-media img{ transition:none; }
.project-soon{ font-size:var(--t-body-sm); color:rgba(243,238,228,.5); white-space:nowrap; }

/* The whole card is the link: no button inside it. */
.project{ display:block; border-radius:var(--r-tile); overflow:hidden; background:var(--ink);
  color:var(--paper); transition:transform .6s var(--ease-out); }
@media (hover:hover){ .project:hover{ transform:translateY(-4px); } }
.project-media{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.project-media img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s var(--ease-out); }
@media (hover:hover){ .project:hover .project-media img{ transform:scale(1.04); } }
.project-badge{ position:absolute; top:18px; left:18px; z-index:2;
  display:inline-flex; align-items:center; gap:7px; border-radius:var(--r-pill);
  background:rgba(30,26,18,.72); backdrop-filter:blur(10px);
  padding:7px 14px; font-size:var(--t-caption); letter-spacing:.1em;
  text-transform:uppercase; color:var(--paper); }
.project-badge i{ width:5px; height:5px; border-radius:50%; background:var(--claysoft); }
.project-body{ padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,40px) clamp(26px,3vw,38px);
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:16px 28px; }
.project-title{ font-family:var(--serif); font-weight:400; letter-spacing:-.022em;
  font-size:clamp(26px,3.2vw,var(--t-h)); margin:0; }
.project-where{ margin:8px 0 0; font-size:var(--t-body-sm); color:rgba(243,238,228,.58); }
.project-meta{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:var(--t-body-sm);
  color:rgba(243,238,228,.72); margin:0; padding:0; list-style:none; }
.project-meta li + li{ position:relative; padding-left:19px; }
.project-meta li + li::before{ content:""; position:absolute; left:0; top:50%;
  width:5px; height:1px; background:rgba(243,238,228,.35); }
.project-go{ font-size:var(--t-body); color:var(--claysoft); white-space:nowrap; }
.project-go::after{ content:"›"; margin-left:6px; font-size:1.2em; line-height:0;
  display:inline-block; transition:transform .35s var(--ease-out); }
@media (hover:hover){ .project:hover .project-go::after{ transform:translateX(4px); } }

/* Quiet forward-looking note under the list */
.note{ margin-top:clamp(24px,3vw,36px); text-align:center; font-size:var(--t-body);
  color:var(--mist); }
.note a{ color:var(--clay); }
.note a:hover{ text-decoration:underline; }

/* ---- The plan pair: drawing and render, same scale, side by side ---- */
.plan-pair{ display:grid; gap:clamp(14px,1.8vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));
  margin-top:clamp(36px,4vw,56px); }
.plan-panel{ display:block; width:100%; background:var(--linen);
  border-radius:var(--r-img); overflow:hidden; cursor:zoom-in; text-align:left; }
/* Both images share the drawing's proportions, so one square-ish frame renders
   them at the same scale with their edges aligned. */
.plan-panel .frame{ aspect-ratio:1/1; display:grid; place-items:center;
  padding:clamp(12px,1.8vw,24px); }
.plan-panel .frame img{ max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; transition:transform .8s var(--ease-out); }
@media (hover:hover){ .plan-panel:hover .frame img{ transform:scale(1.02); } }
.plan-panel .label{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:0 clamp(14px,1.8vw,22px) clamp(16px,2vw,22px); color:var(--ink); }
.plan-panel .label b{ font-size:var(--t-body); font-weight:500; }
.plan-panel .label span{ font-size:var(--t-body-sm); color:var(--mist); }

/* ---- Standards strip reuses .specs, but reads as words not figures ---- */
.specs--words .spec b{ font-size:clamp(21px,2.2vw,26px); }

/* ---- Mobile action bar (kept from the previous site) ---- */
.actionbar{ position:fixed; left:0; right:0; bottom:0; z-index:95; display:none;
  gap:10px; padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(243,238,228,.94); backdrop-filter:blur(20px);
  border-top:1px solid var(--line); }
.actionbar .btn{ flex:1; }
@media (max-width:820px){ .actionbar{ display:flex; } body{ padding-bottom:76px; } }