/* ==========================================================================
   Plinth (working name) - marketing site
   Language: editorial serif over full-bleed interior photography, plaster
   neutrals, one sage accent. Shares DM Sans + IBM Plex Mono with the product.

   Shape rule (one system, used everywhere):
     controls (buttons, tabs, round arrows)  -> pill
     tiles, photos and the hero frame        -> 20px
     chips and stamps                        -> 6px

   Theme: light, with one deliberate switch to night for the closing sections.
   Layer scale: page 0 / hero copy 1 / nav 20 / skip link 30
   ========================================================================== */

:root {
  --font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --r-pill: 999px;
  --r-tile: 20px;
  --r-chip: 6px;

  --paper: #f3f3f0;
  --sheet: #fbfbf9;
  --ink: #14171a;
  --ink-2: #3b4147;
  --ink-3: #676e75;
  --line: rgb(20 23 26 / 0.1);
  --line-2: rgb(20 23 26 / 0.2);

  --sage: #55653f;
  --sage-tint: #e3e8d9;

  --night: #0d0f10;
  --on-night: #f1f1ee;
  --on-night-mute: rgb(241 241 238 / 0.66);
  --night-line: rgb(241 241 238 / 0.14);

  --on-photo: #fdfdfb;

  --gutter: clamp(20px, 4.4vw, 64px);
  --max: 1240px;
  --frame: 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}
h1, h2, h3, p, dl, dd, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.night :focus-visible { outline-color: var(--on-night); }
::selection { background: var(--sage-tint); color: var(--ink); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
h1, h2, .tile-figure, .closing-statement, .wordmark, .hero-figures dd, .slide h3, .panel h3, .tabs button {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.012em;
}

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 30;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
}
.skip:focus { top: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.2s var(--ease);
}
.btn i { font-size: 1.05em; transition: transform 0.3s var(--ease); }
.btn:hover i { transform: translate(2px, -2px); }
.btn:active { transform: scale(0.98); }
.btn--lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn--ink { background: var(--ink); color: var(--on-photo); }
.btn--ink:hover { background: #262b30; }
.btn--glass {
  background: rgb(255 255 255 / 0.14); border-color: rgb(255 255 255 / 0.38); color: inherit;
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
.btn--glass:hover { background: rgb(255 255 255 / 0.24); }
.btn--paper { background: var(--on-night); color: var(--ink); }
.btn--paper:hover { background: #ffffff; }
.btn--line { border-color: rgb(241 241 238 / 0.32); color: var(--on-night); }
.btn--line:hover { border-color: var(--on-night); }

/* ---------- Navigation: sits inside the hero frame, turns to glass once the page scrolls ---------- */
.nav {
  position: fixed; inset: var(--frame) var(--frame) auto var(--frame); z-index: 20;
  height: 72px; padding: 0 calc(var(--gutter) - var(--frame));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  color: var(--on-photo);
  border: 1px solid transparent; border-bottom-color: rgb(255 255 255 / 0.24);
  border-radius: var(--r-tile) var(--r-tile) 0 0;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), border-radius 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav.is-stuck {
  color: var(--ink);
  background: rgb(243 243 240 / 0.76);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border-color: rgb(255 255 255 / 0.7);
  border-radius: var(--r-tile);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 18px 40px -26px rgb(20 23 26 / 0.45);
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* over the night sections the bar keeps its glass but swaps to the dark surface */
.nav.is-stuck.is-night {
  color: var(--on-night);
  background: rgb(22 25 27 / 0.72);
  border-color: var(--night-line);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 18px 40px -26px rgb(0 0 0 / 0.8);
}
.nav.is-night .btn--ink { background: var(--on-night); color: var(--ink); }
.nav.is-night .btn--ink:hover { background: #ffffff; }
.nav.is-stuck.is-night .btn--glass { border-color: rgb(241 241 238 / 0.32); }
.nav.is-stuck.is-night .btn--glass:hover { border-color: var(--on-night); }
@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck.is-night { background: var(--night); }
}
.nav-links { display: flex; gap: 28px; font-size: 15px; }
.nav-links a { opacity: 0.86; transition: opacity 0.2s; }
.nav-links a:hover { opacity: 1; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; border: 1px solid currentColor; font-size: 19px;
}
.brand-mark--lg { width: 46px; height: 46px; border-radius: 14px; font-size: 26px; }
.brand-name { font-family: var(--font-serif); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.nav-actions { display: flex; justify-content: flex-end; gap: 10px; }
.nav.is-stuck .btn--glass { background: transparent; border-color: var(--line-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.is-stuck .btn--glass:hover { border-color: var(--ink); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: max(100dvh, 720px);
  display: flex; flex-direction: column;
  padding: var(--frame);
}
.nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 48px; pointer-events: none; }
.hero-photo {
  position: absolute; inset: var(--frame) var(--frame) 11% var(--frame);
  border-radius: var(--r-tile) var(--r-tile) 0 0; overflow: hidden;
  background: #6f6b66;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
/* top scrim keeps the white type legible on the ceiling, bottom fade dissolves the floor into the page */
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgb(20 23 26 / 0.56) 0%, rgb(20 23 26 / 0.34) 34%, rgb(20 23 26 / 0) 62%),
    linear-gradient(to bottom, rgb(243 243 240 / 0) 74%, var(--paper) 100%);
}
.hero-copy {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(112px, 16vh, 156px) var(--gutter) 0;
  color: var(--on-photo);
}
.hero h1 { font-size: clamp(2.5rem, 5.3vw, 5rem); line-height: 1.02; text-wrap: balance; }
.hero h1 span { display: block; }
.hero-copy p { max-width: 54ch; margin-top: 18px; font-size: clamp(1rem, 1.25vw, 1.125rem); color: rgb(253 253 251 / 0.94); }
.hero-copy .btn { margin-top: 28px; }

.hero-foot {
  position: relative; z-index: 1; margin-top: auto;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px;
  padding: 26px calc(var(--gutter) - var(--frame)) 22px;
  border-top: 1px solid var(--line);
}
.hero-foot h2 { font-size: clamp(1.5rem, 2.1vw, 1.9rem); line-height: 1.1; }
.hero-foot-text p { max-width: 50ch; margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.hero-figures { display: flex; }
.hero-figures > div { padding: 0 32px; border-left: 1px solid var(--line-2); }
.hero-figures > div:first-child { border-left: 0; padding-left: 0; }
.hero-figures > div:last-child { padding-right: 0; }
.hero-figures dt { max-width: 17ch; font-size: 13px; line-height: 1.3; color: var(--ink-3); }
.hero-figures dd { margin-top: 6px; font-size: clamp(2.8rem, 4.6vw, 4.2rem); line-height: 0.9; }

/* ---------- Sections ---------- */
.section { padding: clamp(88px, 11vw, 160px) var(--gutter); }
.section > * { max-width: var(--max); margin-inline: auto; }
.section-head h2 { font-size: clamp(2.1rem, 3.7vw, 3.4rem); line-height: 1.04; text-wrap: balance; }
.section-head--center { text-align: center; }
.section-head--center h2 { max-width: 19ch; margin-inline: auto; }
.eyebrow {
  margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage);
}

/* ---------- Product bento: four tiles, four surfaces ---------- */
.bento {
  margin-top: clamp(36px, 5vw, 64px);
  display: grid; gap: 14px;
  grid-template-columns: 1fr 2.15fr 1.05fr;
  grid-template-rows: repeat(2, minmax(212px, auto));
  grid-template-areas: "a c d" "b c d";
}
.tile--a { grid-area: a; } .tile--b { grid-area: b; } .tile--c { grid-area: c; } .tile--d { grid-area: d; }
.tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  padding: 22px; border-radius: var(--r-tile);
}
.tile h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.tile-body p { margin-top: 6px; font-size: 14px; line-height: 1.45; }
.tile-figure { font-size: clamp(2.6rem, 4.1vw, 3.6rem); line-height: 0.95; white-space: nowrap; }
.tile-figure small { margin-left: 8px; font-family: var(--font-sans); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.tile-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.chip { padding: 5px 8px; border: 1px solid var(--line-2); border-radius: var(--r-chip); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }

.tile--sheet { background: var(--sheet); border: 1px solid var(--line); }
.tile--sheet .tile-figure { color: var(--sage); }
.tile--sheet .tile-body p { color: var(--ink-3); }

.tile--ink { background: var(--ink); color: var(--on-night); }
.tile--ink .tile-body p { color: var(--on-night-mute); }
.tile-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-pill); background: var(--sage-tint); color: var(--sage); font-size: 20px; }

.tile--photo { color: var(--on-photo); min-height: 340px; }
.tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile--photo:hover img { transform: scale(1.03); }
.tile--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(20 23 26 / 0.5) 0%, rgb(20 23 26 / 0.08) 38%, rgb(20 23 26 / 0.12) 55%, rgb(20 23 26 / 0.74) 100%);
}
.tile--photo > :not(img) { position: relative; z-index: 1; }
.tile--photo .tile-body { max-width: 40ch; }
.tile--photo .tile-body p { color: rgb(253 253 251 / 0.9); }

.tile--sage { background: var(--sage-tint); text-align: center; }
.tile--sage .tile-figure { color: var(--sage); font-size: clamp(2.8rem, 4.4vw, 3.9rem); }
.tile--sage .tile-body p { color: var(--ink-2); }
.revs { display: flex; justify-content: center; gap: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--sage); }
.revs span { display: inline-flex; align-items: center; gap: 4px; }
.revs i { font-size: 14px; }

/* ---------- How it works: tabs ---------- */
.how { padding-top: 0; }
.how .section-head h2 { max-width: 13ch; }
.tabs {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line-2);
}
.tabs button {
  position: relative; padding: 14px 8px 16px;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.2; color: var(--ink-3);
  transition: color 0.3s var(--ease);
}
.tabs button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--ink); transform: scaleX(0); transition: transform 0.45s var(--ease);
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button[aria-selected="true"]::after { transform: scaleX(1); }

.panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); align-items: center; gap: clamp(28px, 5vw, 72px);
  padding-top: clamp(32px, 4.5vw, 64px);
}
.panel-icon { font-size: 30px; color: var(--sage); }
.panel h3 { margin-top: 18px; max-width: 18ch; font-size: clamp(1.7rem, 2.5vw, 2.3rem); line-height: 1.06; }
.panel-text p { margin-top: 14px; max-width: 42ch; color: var(--ink-2); }
.panel-media { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; height: clamp(300px, 32vw, 400px); }
.panel-media figure { border-radius: var(--r-tile); overflow: hidden; }
.shot { background: var(--sheet); border: 1px solid var(--line); }
/* product captures are shown zoomed from their top left corner so the figures stay readable */
.shot img { width: 172%; max-width: none; height: auto; }
.shot--contain { display: grid; place-items: center; padding: 20px; background: var(--sage-tint); border-color: transparent; }
.shot--contain img { width: auto; height: 100%; max-height: 100%; min-height: 0; border-radius: 14px; box-shadow: 0 24px 48px -28px rgb(20 23 26 / 0.6); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Night: rooms + closing ---------- */
.night { background: var(--night); color: var(--on-night); }
.dusk {
  height: clamp(220px, 34vw, 480px);
  background:
    radial-gradient(ellipse 150% 100% at 50% 100%, var(--night) 34%, rgb(13 15 16 / 0) 88%),
    var(--paper);
}
.rooms { padding-top: clamp(24px, 4vw, 56px); }
.carousel {
  position: relative;
  margin-top: clamp(40px, 6vw, 88px);
  padding: clamp(28px, 4vw, 56px) 0;
  border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line);
}
.carousel-controls { position: absolute; top: clamp(28px, 4vw, 56px); right: 0; z-index: 1; display: flex; gap: 8px; }
.round {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid rgb(241 241 238 / 0.32); border-radius: var(--r-pill); font-size: 17px;
  transition: border-color 0.25s var(--ease), transform 0.2s var(--ease);
}
.round:hover { border-color: var(--on-night); }
.round:active { transform: scale(0.96); }
.slide { display: grid; grid-template-columns: minmax(240px, 420px) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 72px); padding-right: 200px; }
.slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-tile); }
.bubble { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgb(241 241 238 / 0.5); border-radius: var(--r-pill); font-size: 13px; }
.slide h3 { margin-top: 18px; font-size: clamp(1.8rem, 2.7vw, 2.5rem); line-height: 1.05; }
.slide p { margin-top: 12px; max-width: 44ch; color: var(--on-night-mute); }
.carousel > .btn { position: absolute; right: 0; bottom: clamp(28px, 4vw, 56px); }

.closing { position: relative; overflow: hidden; padding: clamp(72px, 10vw, 150px) var(--gutter) 0; }
.closing-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 62%, transparent 96%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 62%, transparent 96%);
}
.closing > :not(.closing-bg) { position: relative; max-width: var(--max); margin-inline: auto; }
.closing-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(36px, 5vw, 72px); align-items: center; }
.closing-grid .brand-mark { grid-column: 2 / span 1; align-self: start; justify-self: end; margin-top: 6px; }
.closing-title { grid-column: 3 / span 8; font-size: clamp(2.1rem, 3.7vw, 3.4rem); line-height: 1.04; max-width: 17ch; }
.closing-lede { grid-column: 3 / span 4; color: var(--on-night-mute); max-width: 34ch; }
.closing-inset { grid-column: 9 / span 3; border-radius: var(--r-tile); overflow: hidden; }
.closing-inset img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.closing-cta { grid-column: 9 / span 3; justify-self: start; }
.closing-statement { margin-top: clamp(88px, 13vw, 190px) !important; font-size: clamp(2.8rem, 6.4vw, 5.8rem); line-height: 0.98; }

.foot {
  margin-top: clamp(48px, 7vw, 96px) !important;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;
  padding: 22px 0; border-top: 1px solid var(--night-line);
  font-size: 13.5px; color: var(--on-night-mute);
}
.foot-links { display: flex; gap: 24px; }
.foot a { color: var(--on-night); transition: opacity 0.2s; }
.foot a:hover { opacity: 0.7; }
.foot-mail { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(241 241 238 / 0.4); }
.wordmark {
  max-width: none !important;
  height: 0.5em; overflow: hidden;
  font-size: 22.5vw; line-height: 0.82; text-align: center; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
  color: rgb(241 241 238 / 0.09);
  user-select: none;
}

/* ---------- Motion: load-in for the hero, one reveal per block on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .hero-photo img { animation: settle 2.2s var(--ease) both; }
  .hero-copy > * { animation: rise 1s var(--ease) both; }
  .hero-copy > :nth-child(1) { animation-delay: 0.15s; }
  .hero-copy > :nth-child(2) { animation-delay: 0.3s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.42s; }
  .hero-foot { animation: rise 1s var(--ease) 0.55s both; }

  .js [data-reveal] {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .panel.is-entering, .slide.is-entering { animation: rise 0.7s var(--ease) both; }
}
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Smaller screens ---------- */
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .nav { grid-template-columns: auto 1fr; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: "c c" "a b" "d d"; }
  .panel { grid-template-columns: 1fr; align-items: start; }
  .slide { padding-right: 0; }
  .carousel-controls { position: static; margin-bottom: 22px; }
  .carousel > .btn { position: static; margin-top: 28px; }
  .closing-grid .brand-mark { grid-column: 1 / -1; justify-self: start; }
  .closing-title { grid-column: 1 / -1; }
  .closing-lede { grid-column: 1 / span 7; }
  .closing-inset { grid-column: 9 / span 4; }
  .closing-cta { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .nav { height: 62px; }
  .nav .btn--glass { display: none; }
  .brand-name { font-size: 23px; }
  .hero { min-height: max(100dvh, 780px); }
  .hero-photo { bottom: 30%; }
  .hero h1 span { display: inline; }
  .hero-copy { padding-top: 104px; }
  .hero-foot { grid-template-columns: 1fr; gap: 22px; }
  .hero-figures > div { padding: 0 22px; }
  .bento { grid-template-columns: 1fr; grid-template-areas: "c" "a" "b" "d"; }
  .tile--photo { min-height: 320px; }
  .tabs button { padding-inline: 4px; font-size: 1.05rem; }
  .panel-media { grid-template-columns: 1fr; height: auto; }
  .panel-media figure { height: 250px; }
  .panel-media .photo { height: 190px; }
  .shot img { width: 220%; }
  .slide { grid-template-columns: 1fr; }
  .closing-lede, .closing-inset { grid-column: 1 / -1; }
  .closing-inset img { aspect-ratio: 3 / 2; }
  .foot { flex-direction: column; align-items: flex-start; }
}