@font-face {
  font-family: "DM Sans";
  src: url("/assets/dm-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "DM Serif Display";
  src: url("/assets/dm-serif-display-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f5f0e7;
  --cream: #fff8eb;
  --ink: #202721;
  --muted: #525b50;
  --teal: #205448;
  --forest: #163b33;
  --mint: #dce7cc;
  --peach: #f2d0bc;
  --rule: #cec8bb;
  --display: "DM Serif Display", Georgia, serif;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
  font-family: "DM Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
img { display: block; max-inline-size: 100%; }
a { color: inherit; text-underline-offset: .28em; }
a:focus-visible, summary:focus-visible {
  outline: 2px solid #a74e2e;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--cream);
}
main:focus { outline: none; }
[id] { scroll-margin-block-start: 1rem; }
em { font-family: var(--display); font-weight: 400; color: var(--teal); }
.shell { inline-size: min(100% - var(--gutter) * 2, 84rem); margin-inline: auto; }
.skip {
  position: fixed;
  z-index: 5;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  padding: .75rem 1rem;
  background: var(--cream);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.dot {
  flex: 0 0 auto;
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: 50%;
  background: currentColor;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-block-size: 2.9rem;
  padding: .68rem 1.05rem;
  border: 1px solid transparent;
  border-radius: .32rem;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color .22s, color .22s, border-color .22s;
}
.button span { font-size: 1.05rem; transition: transform .28s var(--ease); }
.button:hover span { transform: translate(.14rem, -.14rem); }
.button-dark { background: var(--ink); color: var(--cream); }
.button-dark:hover { background: var(--teal); }
.button-outline { border-color: #a7aa9c; }
.button-outline:hover { background: var(--mint); border-color: var(--teal); }
.button-light { background: var(--cream); color: var(--forest); }
.button-light:hover { background: var(--peach); }

.header-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  min-block-size: 5.1rem;
  border-block-end: 1px solid var(--rule);
}
.brand {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: .65rem;
  font-size: 1.38rem;
  font-weight: 800;
  letter-spacing: -.075em;
  text-decoration: none;
}
.brand img { border-radius: .45rem; }
.desktop-nav, .site-footer nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }
.desktop-nav a, .site-footer nav a, .mobile-menu nav > a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
}
.desktop-nav a:hover, .site-footer nav a:hover, .mobile-menu nav > a:hover { text-decoration: underline; }
.header-cta { justify-self: end; }
.mobile-menu { display: none; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.2rem, 3.5vw, 3.5rem);
  padding-block: clamp(3rem, 6.5vw, 6.7rem) clamp(2.5rem, 5vw, 5rem);
}
.hero-copy { display: grid; justify-items: start; gap: clamp(1.2rem, 2.1vw, 2rem); }
.hero-copy .eyebrow { color: var(--teal); }
.hero h1 {
  font-size: clamp(3.15rem, 6.18vw, 6.55rem);
  font-weight: 700;
  letter-spacing: -.095em;
  line-height: .95;
}
.hero h1 em { display: inline-block; letter-spacing: -.074em; padding-inline-end: .05em; }
.lede {
  max-inline-size: 33ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.42vw, 1.28rem);
  line-height: 1.55;
}
.actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.hero-figure { min-inline-size: 0; }
.hero-art {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  aspect-ratio: 1.23;
  overflow: hidden;
  border: 1px solid #30594c;
  border-radius: .7rem;
  background: radial-gradient(ellipse at 28% 14%, #316657, #163b33 67%, #112f28);
  color: var(--cream);
}
.hero-art::before {
  position: absolute;
  z-index: -1;
  inset: .65rem;
  border: 1px solid #adc1a94d;
  border-radius: .32rem;
  content: "";
}
.art-top {
  position: absolute;
  z-index: 1;
  inset: 5% 5% auto;
  display: flex;
  justify-content: space-between;
  gap: .4rem;
  font-size: clamp(.58rem, 1.95cqi, .75rem);
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.art-top i {
  display: inline-block;
  inline-size: .48em;
  block-size: .48em;
  margin-inline-end: .38em;
  border-radius: 50%;
  background: #e8c48f;
  vertical-align: .14em;
}
.platter { position: absolute; inset: 4% -3% auto; inline-size: 106%; max-inline-size: none; block-size: 93%; object-fit: contain; }
.slip {
  --tilt: 0deg;
  position: absolute;
  display: grid;
  gap: .28em;
  inline-size: max-content;
  padding: .75em .85em;
  border: 1px solid #253e2d45;
  border-radius: .24rem;
  background: var(--cream);
  color: var(--ink);
  box-shadow: .45rem .75rem 1.35rem #061e1866;
  font-size: clamp(.62rem, 2.85cqi, 1.06rem);
  line-height: 1.12;
  transform: rotate(var(--tilt));
}
.slip-kicker { font-size: .65em; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.slip-kicker b { margin-inline-end: .26em; color: #71402d; }
.slip strong { font-weight: 800; }
.slip-note { font-size: .72em; color: #404a3d; }
.slip-order { --tilt: -9deg; inset: 21% auto auto 6%; }
.slip-kitchen { --tilt: 7deg; inset: 26% 5.5% auto auto; background: var(--peach); }
.slip-stock { --tilt: 5deg; inset: auto auto 22% 10%; background: var(--mint); }
.slip-analysis { --tilt: -7deg; inset: auto 7% 18% auto; }
.hero-figure figcaption {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-block-start: .75rem;
  color: var(--muted);
  font-size: .77rem;
  font-weight: 650;
}
.hero-figure figcaption span { font-weight: 400; }

.manifesto { border-block: 1px solid var(--rule); background: #eae3d5; }
.manifesto-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, .85fr);
  align-items: end;
  column-gap: clamp(1.5rem, 5vw, 5rem);
  row-gap: 1.5rem;
  padding-block: clamp(3.25rem, 8vw, 8rem);
}
.manifesto .eyebrow { grid-column: 1 / -1; color: var(--teal); }
h2 { font-size: clamp(2.95rem, 6.8vw, 7rem); font-weight: 700; letter-spacing: -.09em; line-height: .97; }
h2 em { letter-spacing: -.07em; }
.manifesto-inner > p:last-child { max-inline-size: 33ch; padding-block-end: .35rem; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--muted); }

.product, .access { padding-block: clamp(4rem, 9vw, 9rem); }
.section-heading { display: grid; gap: clamp(.85rem, 2vw, 1.5rem); margin-block-end: clamp(2.35rem, 5vw, 4.75rem); }
.section-heading .eyebrow { color: var(--teal); }
.universe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(1.25rem, 4vw, 4.5rem);
  padding-block: clamp(1.6rem, 3vw, 3rem);
  border-block-start: 1px solid var(--rule);
}
.universe-copy { display: grid; gap: .8rem; }
.universe-copy .eyebrow { color: var(--teal); }
.universe h3 { font-size: clamp(2.25rem, 4.6vw, 5rem); font-weight: 700; letter-spacing: -.075em; line-height: .98; }
.universe-copy > p:last-child { max-inline-size: 36ch; color: var(--muted); font-size: 1.03rem; line-height: 1.55; }
.operation { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.operation .universe-visual { grid-column: 1; grid-row: 1; }
.operation .universe-copy { grid-column: 2; grid-row: 1; }
.universe-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  justify-items: center;
  min-block-size: clamp(13rem, 25vw, 21rem);
  padding: 1rem 1rem 2.5rem;
  overflow: hidden;
  border-radius: .38rem;
}
.universe-visual figcaption { position: absolute; inset: auto 1rem .75rem auto; font-size: .72rem; font-weight: 650; }
.service-visual { background: #edc3ab; color: #40281d; }
.service-visual::before {
  position: absolute;
  z-index: -1;
  inset: 8% -10% auto;
  block-size: 1.2rem;
  border-block: 1px solid #824f36;
  background: #a96b4b;
  transform: rotate(-13deg);
  content: "";
}
.kitchen-ticket {
  inline-size: min(100%, 18rem);
  padding: 1rem;
  background: var(--cream);
  box-shadow: .45rem .7rem 1.5rem #673c333d;
  transform: rotate(-6deg);
}
.ticket-top, .ticket-bottom { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 750; }
.ticket-top { justify-content: space-between; border-block-end: 1px dashed #a28a76; padding-block-end: .6rem; }
.kitchen-ticket p { display: flex; align-items: center; gap: .5rem; padding-block: .9rem; font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 700; }
.kitchen-ticket p b { padding: .18rem .38rem; background: #edd4bf; border-radius: .2rem; }
.ticket-bottom { color: var(--teal); }
.recipe-visual { background: #dce5cc; color: #2f4535; justify-items: end; padding-inline-end: 10%; }
.recipe-visual::before, .recipe-visual::after {
  position: absolute;
  z-index: -1;
  inset: 5% auto auto 9%;
  inline-size: 46%;
  aspect-ratio: 1;
  border: 1px solid #657d64;
  border-radius: 50%;
  content: "";
}
.recipe-visual::after { inset: 10% auto auto 12%; inline-size: 40%; border-style: dashed; }
.recipe-sheet {
  inline-size: min(88%, 19rem);
  padding: 1rem 1.1rem;
  background: var(--cream);
  border: 1px solid #7b886c;
  box-shadow: .55rem .55rem 0 #81947880;
}
.recipe-sheet > strong { display: block; margin-block: .3rem .75rem; font-family: var(--display); font-size: clamp(1.2rem, 2.6vw, 1.85rem); font-style: italic; font-weight: 400; line-height: 1.15; }
.recipe-sheet dl div, .ledger dl div { display: flex; justify-content: space-between; gap: 1rem; border-block-start: 1px solid #7b886c66; padding-block: .38rem; font-size: .84rem; }
.recipe-sheet dd, .ledger dd { white-space: nowrap; font-weight: 750; font-variant-numeric: tabular-nums; }
.analysis-visual {
  background: repeating-linear-gradient(90deg, #e1dccb 0 1px, transparent 1px 2.25rem), #eee8d7;
  color: var(--teal);
}
.ledger { inline-size: min(100%, 21rem); padding: 1.05rem 1.2rem; border-block: 2px solid #385b4b; background: #eee8d7; }
.ledger .eyebrow { margin-block-end: .75rem; }
.ledger dl div:last-child { font-weight: 750; }
.availability { padding-block-start: 1rem; border-block-start: 1px solid var(--rule); color: var(--muted); font-size: .83rem; line-height: 1.55; }

.ecosystem { padding-block: clamp(3.75rem, 8vw, 8rem); background: var(--forest); color: var(--cream); }
.ecosystem em, .ecosystem .eyebrow { color: var(--mint); }
.ecosystem-heading { grid-template-columns: 1.55fr .75fr; align-items: end; column-gap: 2rem; }
.ecosystem-heading .eyebrow { grid-column: 1 / -1; }
.ecosystem-heading > p:last-child { max-inline-size: 29ch; color: #e1e8d8; font-size: clamp(1rem, 1.5vw, 1.23rem); line-height: 1.55; }
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; list-style: none; }
.flow li { position: relative; padding: 2.6rem 1.2rem .25rem 0; border-block-start: 1px solid #a7c5ac91; }
.flow li > span {
  position: absolute;
  inset: -1.05rem auto auto 0;
  display: grid;
  place-items: center;
  inline-size: 2.05rem;
  aspect-ratio: 1;
  border: 1px solid #a7c5ac;
  border-radius: 50%;
  background: var(--forest);
  color: var(--mint);
  font-size: .72rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.flow li:last-child > span { background: var(--mint); color: var(--forest); }
.flow h3 { margin-block-end: .45rem; font-size: clamp(1rem, 1.6vw, 1.4rem); font-weight: 750; letter-spacing: -.035em; }
.flow p { max-inline-size: 22ch; color: #e1e8d8; font-size: .9rem; line-height: 1.5; }

.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; padding: 0; margin: 0; list-style: none; }
.door {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  min-block-size: 15.5rem;
  block-size: 100%;
  padding: clamp(1.1rem, 2.5vw, 2rem);
  overflow: hidden;
  border: 1px solid #212a2333;
  border-radius: .38rem;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.door:hover { transform: translateY(-.3rem); box-shadow: 0 .65rem 1.4rem #20272124; }
.door-home { background: #e4dfed; }
.door-pos { background: var(--peach); }
.door-kitchen { background: var(--mint); }
.door::before {
  position: absolute;
  z-index: -1;
  inset: -1.2rem 2.7rem auto auto;
  inline-size: 5.8rem;
  block-size: 6rem;
  opacity: .37;
  content: "";
}
.door-home::before { border: 1px solid #8375a0; box-shadow: .6rem .6rem 0 -1px #e4dfed, .6rem .6rem #8375a0; transform: rotate(12deg); }
.door-pos::before { border: 1px solid #9d5135; background: repeating-linear-gradient(transparent 0 .7rem, #9d5135 .7rem calc(.7rem + 1px)); transform: rotate(-12deg); }
.door-kitchen::before { border: 1px solid #4b6c50; border-radius: 50%; outline: 1px solid #4b6c50; outline-offset: -.55rem; }
.door-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.door-top img { border-radius: .62rem; object-fit: contain; }
.door-top > span { font-size: 1.5rem; line-height: 1; }
.door-copy { display: grid; align-content: start; gap: .4rem; }
.door-copy strong { font-size: clamp(1.7rem, 3vw, 2.9rem); letter-spacing: -.07em; line-height: 1; }
.door-copy > span { max-inline-size: 28ch; font-size: .93rem; line-height: 1.45; }
.door-action { border-block-start: 1px solid #212a2344; padding-block-start: .65rem; font-size: .83rem; font-weight: 750; }
.door:hover .door-action { text-decoration: underline; }

.closing { background: #233d33; color: var(--cream); }
.closing-inner { display: grid; justify-items: start; gap: 2rem; padding-block: clamp(3.5rem, 8vw, 7.5rem); }
.closing h2 { font-size: clamp(2.6rem, 5.8vw, 6rem); }
.closing em { color: var(--peach); }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-block-size: 5rem; padding-block: 1rem; }

@keyframes enter {
  from { opacity: 0; transform: translateY(.9rem); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: enter .65s var(--ease) both; }
  .hero-figure { animation: enter .8s .1s var(--ease) both; }
  [data-reveal].in-view { animation: enter .65s var(--ease) both; }
}

@media (max-width: 54rem) {
  .hero { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(3.1rem, 10.6vw, 6.7rem); }
  .hero-copy { gap: 1.15rem; }
  .hero-figure { inline-size: min(100%, 42rem); }
  .manifesto-inner { grid-template-columns: 1fr; }
  .manifesto-inner > p:last-child { max-inline-size: 50ch; }
  .flow li { padding-inline-end: .65rem; }
}

@media (max-width: 40rem) {
  .header-inner { display: flex; justify-content: space-between; min-block-size: 4.25rem; }
  .desktop-nav, .header-cta { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu summary {
    display: flex;
    align-items: center;
    gap: .48rem;
    min-block-size: 2.75rem;
    padding-inline: .55rem;
    list-style: none;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 750;
  }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary::after { inline-size: .42rem; block-size: .42rem; border: solid; border-width: 0 1.5px 1.5px 0; transform: translateY(-.13rem) rotate(45deg); content: ""; }
  .mobile-menu[open] summary::after { transform: rotate(225deg); }
  .mobile-menu nav {
    position: absolute;
    z-index: 2;
    inset: calc(100% - 1px) 0 auto;
    display: grid;
    gap: .25rem;
    border: 1px solid var(--rule);
    border-radius: 0 0 .35rem .35rem;
    padding: .5rem .75rem .75rem;
    background: var(--paper);
    box-shadow: 0 .6rem 1rem #20272124;
  }
  .mobile-menu nav > a:not(.button) { padding-inline: .4rem; }
  .hero { padding-block-start: 2.65rem; }
  .hero-art::before { inset: .35rem; }
  .universe, .operation { grid-template-columns: 1fr; }
  .operation .universe-copy, .operation .universe-visual { grid-column: auto; grid-row: auto; }
  .universe h3 br { display: none; }
  .universe-visual { min-block-size: 13rem; }
  .ecosystem-heading { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; padding-inline-start: .9rem; }
  .flow li { border-block-start: 0; border-inline-start: 1px solid #a7c5ac91; padding: 0 0 1.55rem 1.9rem; }
  .flow li:last-child { border-color: transparent; padding-block-end: 0; }
  .flow li > span { inset: 0 auto auto -1.025rem; }
  .flow p { max-inline-size: 34ch; }
  .doors { grid-template-columns: 1fr; }
  .door { min-block-size: 0; }
  .site-footer { flex-wrap: wrap; }
}

@media (max-width: 23rem) {
  .hero h1 { font-size: clamp(2.55rem, 13.1vw, 3.1rem); }
  .actions .button { gap: .37rem; padding-inline: .62rem; }
  .hero-figure figcaption { font-size: .7rem; }
  h2 { font-size: 2.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}