/* Butter Side Up: a quiet palette, with the brand's crust and butter as accents. */
:root {
  --paper: #FAF8F4;
  --ink: #1A1714;
  --ink-2: #5F574E;
  --ink-3: #8C8379;
  --rule: #E3DDD3;
  --crust: #B5712E;
  --butter: #FFD84D;
  --night: #161310;
  --night-ink: #F3EEE6;
  --night-ink-2: #A69D90;
  --night-rule: #342E28;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--butter); color: var(--ink); }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--crust); outline-offset: 3px; }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: -.01em; }
.label { font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.fine { font-size: .88rem; color: var(--ink-3); }
.idx { font-size: .8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.link {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color .2s;
}
.link:hover { text-decoration-color: currentColor; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 8px 14px; border-radius: 6px; background: var(--ink); color: var(--paper);
}
.skip:focus { top: 12px; }

.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .9em 1.35em; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font: 500 .98rem/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .2s;
}
.btn:hover { background: #000; }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-small { padding: .7em 1.1em; font-size: .88rem; }

/* Header */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgb(250 248 244 / .86);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.nav.scrolled { border-bottom-color: var(--rule); }
.nav-inner { display: flex; align-items: center; gap: 32px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.brand img { transform-origin: 50% 55%; }
.nav nav { margin-left: auto; }
.nav-links { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav-links a { color: var(--ink-2); font-size: .94rem; text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }

/* Opening */
.hero { padding: clamp(56px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); }
.hero-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.available { display: inline-flex; align-items: center; gap: .7em; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--butter); box-shadow: 0 0 0 4px rgb(255 216 77 / .3); }
h1 {
  font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 500;
  line-height: 1; letter-spacing: -.04em; text-wrap: balance;
}
h1 .serif { letter-spacing: -.025em; }
.hero-bottom {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 28px 64px;
  margin-top: clamp(40px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--rule);
}
.lede { max-width: 34em; color: var(--ink-2); font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.5; }
.hero-cta { display: grid; justify-items: start; gap: 12px; }

/* Sections */
.section { padding: clamp(72px, 10vw, 136px) 0; }
/* The homepage runs its sections closer together: 40% of the usual space between them. */
.home .section { padding: clamp(29px, 4vw, 54px) 0; }
.home .hero { padding-bottom: clamp(16px, 2.4vw, 32px); }
.section-head {
  display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 16px 48px;
  margin-bottom: clamp(40px, 6vw, 72px); padding-top: 24px; border-top: 1px solid var(--rule);
}
.section-head h2 { font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.section-head .num { margin-right: 1em; color: var(--ink); }
.statement { max-width: 21em; font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 450; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.statement + p { max-width: 36em; margin-top: 20px; color: var(--ink-2); font-size: 1.1rem; }

/* What we build */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; margin: 0; padding: 0; list-style: none; }
.services li { padding-top: 18px; border-top: 1px solid var(--ink); }
.services h3 { margin: 28px 0 10px; font-size: 1.3rem; font-weight: 500; letter-spacing: -.015em; }
.services p { color: var(--ink-2); font-size: 1rem; }

/* Selected work */
.project { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.project-media {
  display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 6px;
  background: linear-gradient(140deg, #EFE7DA, #E2D5C1);
  color: var(--ink-2); font-size: .9rem;
}
/* The tutor's media box: a sample conversation that opens the demo */
.project-chat {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 48px clamp(18px, 3vw, 36px) clamp(20px, 3vw, 32px);
  color: var(--ink); font-size: .95rem; line-height: 1.4; text-decoration: none;
}
.chat-hint { position: absolute; top: 16px; left: clamp(18px, 3vw, 36px); color: var(--ink-2); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.chat-bubble { max-width: 84%; padding: 9px 13px; border-radius: 14px; }
.chat-bubble.you { align-self: flex-end; border-bottom-right-radius: 4px; background: #FFF1BF; }
.chat-bubble.tutor { align-self: flex-start; border-bottom-left-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgb(26 23 20 / 6%); }
.chat-bubble b { font-weight: 600; }
.chat-cta { align-self: center; margin-top: 6px; padding: .5em 1.15em; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .9rem; font-weight: 500; transition: background-color .2s; }
.project-chat:hover .chat-cta { background: #000; }
.project-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.project h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 500; line-height: 1.05; letter-spacing: -.03em; }
.kicker { margin-top: 10px; color: var(--ink-2); font-size: 1.15rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 14px 28px; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--rule); font-size: .98rem; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; }

/* The Test Kitchen */
.kitchen { background: var(--night); color: var(--night-ink); }
.kitchen .section-head { border-top-color: var(--night-rule); }
.kitchen .section-head h2 { color: var(--night-ink-2); }
.kitchen .section-head .num { color: var(--night-ink); }
.kitchen .statement + p { color: var(--night-ink-2); }
.toys { border-top: 1px solid var(--night-rule); }
.toy {
  display: grid; grid-template-columns: minmax(200px, .8fr) 1.3fr 1.1fr; gap: 24px 48px;
  padding: clamp(32px, 4vw, 52px) 0; border-bottom: 1px solid var(--night-rule);
}
.toy h3 { font-size: 1.6rem; font-weight: 500; line-height: 1.1; letter-spacing: -.025em; }
.status { display: inline-flex; align-items: center; gap: .6em; margin-top: 12px; color: var(--night-ink-2); font-size: .85rem; }
.status::before { content: ""; width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 50%; }
.status.served { color: var(--butter); }
.status.served::before { background: currentColor; }
.toy-what > p:first-child { font-size: 1.05rem; }
.toy-why h4 { margin-bottom: 14px; color: var(--night-ink-2); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.toy-why ul { margin: 0; padding: 0; list-style: none; }
.toy-why li { position: relative; margin-bottom: 10px; padding-left: 20px; color: var(--night-ink-2); font-size: .98rem; }
.toy-why li::before { content: ""; position: absolute; left: 0; top: .78em; width: 9px; height: 1px; background: currentColor; }
.bridge { margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.3; }
/* A light stage, with room above the box for the chef to stand. */
.stage {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 170px; margin-top: 22px; padding: 108px 16px 16px;
  border-radius: 10px; background: var(--paper); color: var(--ink);
}
/* A preview box that opens the toy's page, the same size as the chef's stage. */
.stage-sample { padding-top: 16px; text-decoration: none; transition: background-color .2s; }
.stage-sample:hover { background: #fff; }
.sample-q { color: var(--ink-3); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.sample-verdict { margin-top: 4px; color: #2F6B3A; font-size: 3rem; font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.sample-note { margin-top: 8px; color: var(--ink-2); font-size: .88rem; }
.stage-hint { position: absolute; top: 14px; right: 16px; color: var(--ink-3); font-size: .8rem; }
/* The fridge's sample: a patch of door with a few magnets on it */
.stage-fridge, .stage-fridge:hover { justify-content: center; padding: 40px 18px 24px; background: linear-gradient(135deg, #f6f6f3 0%, #e8eae9 45%, #eef0ee 70%, #e3e6e5 100%); }
.stage-fridge:hover .fridge-magnet { box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 6px 14px rgba(0, 0, 0, .14); }
.fridge-magnets { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; }
.fridge-magnet {
  padding: 4px 10px; border-radius: 3px; background: #fffdf7; color: #2a2a2a;
  font: 16px/1.3 "Courier New", Courier, monospace;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 3px 8px rgba(0, 0, 0, .12);
  transition: box-shadow .2s;
}
.fridge-magnet:nth-child(1) { transform: rotate(-2deg); }
.fridge-magnet:nth-child(2) { transform: rotate(1.5deg) translateY(3px); }
.fridge-magnet:nth-child(3) { transform: rotate(-1deg); }
.fridge-magnet:nth-child(4) { transform: rotate(2.5deg) translateY(-2px); }
.fridge-magnet:nth-child(5) { transform: rotate(-1.5deg) translateY(2px); }
.stage input {
  width: 100%; padding: .75em .95em; border: 1px solid var(--rule); border-radius: 8px;
  background: #fff; color: var(--ink); font: 400 1rem var(--sans);
}
.stage input:focus { border-color: var(--ink); outline: 2px solid var(--butter); outline-offset: 1px; }
.toy-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: .92rem; }

/* Process */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px 28px; margin: 0; padding: 0; list-style: none; }
.steps li { padding-top: 18px; border-top: 1px solid var(--ink); }
.steps h3 { margin: 28px 0 10px; font-size: 1.2rem; font-weight: 500; letter-spacing: -.015em; }
.steps p { color: var(--ink-2); font-size: .98rem; }

/* About */
.section-head:last-child { margin-bottom: 0; }
.about-copy p:not(.statement) { max-width: 36em; margin-top: 20px; color: var(--ink-2); font-size: 1.1rem; }
.todo { padding-left: 16px; border-left: 2px solid var(--crust); font-style: italic; }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-copy p { max-width: 30em; color: var(--ink-2); font-size: 1.1rem; }
.email {
  display: inline-block; margin-top: 28px;
  font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -.02em;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--rule);
  transition: text-decoration-color .2s;
}
.email:hover { text-decoration-color: var(--ink); }
.form { display: grid; gap: 28px; }
.field { display: grid; gap: 6px; color: var(--ink-3); font-size: .85rem; font-weight: 500; }
.field input, .field textarea {
  width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  background: transparent; color: var(--ink); font: 400 1.1rem/1.4 var(--sans);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.form-status { padding: 12px 14px; border-left: 2px solid var(--butter); background: #fff; }
.form-status:empty { display: none; }

/* Footer */
.footer { padding: 32px 0 44px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: .9rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; }
.footer ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--ink); }

/* Inner pages */
.page-hero { padding: clamp(40px, 7vw, 96px) 0 clamp(8px, 2vw, 24px); }
.back { display: inline-block; margin-bottom: clamp(28px, 4vw, 48px); color: var(--ink-2); font-size: .92rem; text-decoration: none; }
.back:hover { color: var(--ink); }
.page-title { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.page-hero .status { color: var(--ink-3); }
.page-hero .status.served { color: var(--crust); }
.page-hero .status.served::before { background: var(--butter); border-color: var(--crust); }
.page-lede { max-width: 38em; margin-top: 24px; color: var(--ink-2); font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.5; }
.section-tight { padding-block: clamp(48px, 7vw, 96px); }
.page-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-top: 28px; }

/* Page not found (404.html): the copy beside the toast that landed butter side down */
.not-found {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: center;
  gap: clamp(32px, 6vw, 96px); padding-block: clamp(48px, 8vw, 112px);
}
.not-found .page-title { margin-top: 16px; }
.not-found .page-lede { margin-bottom: 32px; }
.not-found-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 32px; padding: 0; list-style: none; font-size: .95rem; }
.not-found-art { justify-self: center; width: 100%; max-width: 360px; }
.not-found-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  .not-found { grid-template-columns: 1fr; padding-block: 32px 56px; }
  .not-found-art { order: -1; max-width: 200px; }
}
/* 404 toast: it falls onto the screen as if the screen were the floor, then the butter splats out
   and drips. The resting layout is the finished picture, so without motion it is simply the still. */
.toast-art { overflow: visible; }
.toast-art.play .toast-fall { animation: toast-fall .76s linear both; }
.toast-art.play .toast-flip { animation: toast-flip .76s linear both; }
.toast-art.play .toast-butter-face { animation: toast-face .76s linear both; }
.toast-art.play .toast-land { animation: toast-land .32s .76s ease-out both; }
.toast-art.play .toast-shadow { animation: toast-shadow 1.06s linear both; }
.toast-art.play .toast-splat { animation: toast-splat .5s .74s both; }
/* Each drip runs at its own pace, so they land one by one: quickest on the far right, a slow ooze in
   the short middle one, and a straggler second from the right. */
.toast-art.play .toast-drip-1 { animation: toast-drip-1 2.6s 1.12s cubic-bezier(.55, 0, .35, 1) both; }
.toast-art.play .toast-drip-2 { animation: toast-drip-2 1.5s 1.30s cubic-bezier(.45, 0, .3, 1) both; }
.toast-art.play .toast-drip-3 { animation: toast-drip-3 1.6s 1.00s cubic-bezier(.5, 0, .25, 1) both; }
.toast-art.play .toast-drip-4 { animation: toast-drip-4 1.9s 1.20s cubic-bezier(.4, 0, .6, 1) both; }
.toast-art.play .toast-drip-5 { animation: toast-drip-5 2.8s 1.38s cubic-bezier(.65, 0, .35, 1) both; }
.toast-art.play .toast-drip-6 { animation: toast-drip-6 1.2s 1.08s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes toast-fall {
  0% { transform: translate(-260.0px, -420.0px) rotate(150.0deg) scale(3.200); opacity: 0; }
  8.333% { transform: translate(-234.2px, -378.4px) rotate(137.5deg) scale(3.152); opacity: 1; }
  16.667% { transform: translate(-208.9px, -337.5px) rotate(125.0deg) scale(3.016); }
  25% { transform: translate(-184.1px, -297.4px) rotate(112.5deg) scale(2.813); }
  33.333% { transform: translate(-159.8px, -258.2px) rotate(100.0deg) scale(2.571); }
  41.667% { transform: translate(-136.2px, -220.0px) rotate(87.5deg) scale(2.316); }
  50% { transform: translate(-113.2px, -182.8px) rotate(75.0deg) scale(2.065); }
  58.333% { transform: translate(-90.9px, -146.9px) rotate(62.5deg) scale(1.830); }
  66.667% { transform: translate(-69.6px, -112.4px) rotate(50.0deg) scale(1.618); }
  75% { transform: translate(-49.3px, -79.6px) rotate(37.5deg) scale(1.430); }
  83.333% { transform: translate(-30.3px, -48.9px) rotate(25.0deg) scale(1.266); }
  91.667% { transform: translate(-13.2px, -21.3px) rotate(12.5deg) scale(1.123); }
  100% { transform: translate(-0.0px, -0.0px) rotate(0.0deg) scale(1.000); }
}
@keyframes toast-flip {
  0% { transform: scaleX(-1.000); }
  8.333% { transform: scaleX(-0.707); }
  16.667% { transform: scaleX(-0.000); }
  25% { transform: scaleX(0.707); }
  33.333% { transform: scaleX(1.000); }
  41.667% { transform: scaleX(0.707); }
  50% { transform: scaleX(0.000); }
  58.333% { transform: scaleX(-0.707); }
  66.667% { transform: scaleX(-1.000); }
  75% { transform: scaleX(-0.707); }
  83.333% { transform: scaleX(-0.000); }
  91.667% { transform: scaleX(0.707); }
  100% { transform: scaleX(1.000); }
}
@keyframes toast-face {
  0%, 16.66% { opacity: 1; } 16.67%, 50% { opacity: 0; } 50.01%, 83.33% { opacity: 1; } 83.34%, 100% { opacity: 0; }
}
@keyframes toast-land {
  30% { transform: scale(1.045); } 65% { transform: scale(.985); }
}
@keyframes toast-shadow {
  0.00% { transform: translate(150.0px, 230.0px) rotate(150.0deg) scale(1.450); opacity: 0.000; }
  5.97% { transform: translate(135.1px, 207.2px) rotate(137.5deg) scale(1.413); opacity: 0.025; }
  11.95% { transform: translate(120.5px, 184.8px) rotate(125.0deg) scale(1.375); opacity: 0.050; }
  17.92% { transform: translate(106.2px, 162.9px) rotate(112.5deg) scale(1.337); opacity: 0.075; }
  23.90% { transform: translate(92.2px, 141.4px) rotate(100.0deg) scale(1.300); opacity: 0.100; }
  29.87% { transform: translate(78.6px, 120.5px) rotate(87.5deg) scale(1.262); opacity: 0.125; }
  35.85% { transform: translate(65.3px, 100.1px) rotate(75.0deg) scale(1.225); opacity: 0.150; }
  41.82% { transform: translate(52.5px, 80.4px) rotate(62.5deg) scale(1.188); opacity: 0.175; }
  47.80% { transform: translate(40.1px, 61.5px) rotate(50.0deg) scale(1.150); opacity: 0.200; }
  53.77% { transform: translate(28.4px, 43.6px) rotate(37.5deg) scale(1.113); opacity: 0.225; }
  59.75% { transform: translate(17.5px, 26.8px) rotate(25.0deg) scale(1.075); opacity: 0.250; }
  65.72% { transform: translate(7.6px, 11.7px) rotate(12.5deg) scale(1.038); opacity: 0.275; }
  71.70% { transform: translate(0.0px, 0.0px) rotate(0.0deg) scale(1.000); opacity: 0.300; }
  100% { transform: none; opacity: 0; }
}
@keyframes toast-splat {
  0% { opacity: 0; transform: scale(.4); animation-timing-function: cubic-bezier(.12, .8, .3, 1); }
  4% { opacity: 1; }
  62% { transform: scale(1.05); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: none; }
}
@keyframes toast-drip-1 { from { transform: translateY(-441px); } }
@keyframes toast-drip-2 { from { transform: translateY(-319px); } }
@keyframes toast-drip-3 { from { transform: translateY(-494px); } }
@keyframes toast-drip-4 { from { transform: translateY(-123px); } }
@keyframes toast-drip-5 { from { transform: translateY(-378px); } }
@keyframes toast-drip-6 { from { transform: translateY(-500px); } }
@media (prefers-reduced-motion: reduce) {
  .toast-art.play * { animation: none !important; }
}
code { font: .88em/1.5 ui-monospace, "SF Mono", Menlo, monospace; }
p code, td code { padding: .1em .4em; border: 1px solid var(--rule); border-radius: 5px; background: #fff; white-space: nowrap; }

/* Alphabet Soup demo: roomy boxes, so the chef has somewhere to stand. */
.recipe {
  display: grid; gap: 40px; padding: clamp(64px, 7vw, 88px) clamp(20px, 4vw, 40px) clamp(24px, 4vw, 36px);
  border: 1px solid var(--rule); border-radius: 10px; background: #fff;
}
.recipe .field input, .recipe .field textarea {
  padding: .7em .9em; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--paper); font-size: 1rem;
}
.recipe .field input:focus, .recipe .field textarea:focus { border-color: var(--ink); outline: 2px solid var(--butter); outline-offset: 1px; box-shadow: none; }
.recipe .field textarea { min-height: 0; }
.hint { font-weight: 400; }
.recipe-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); transition: background-color .2s, color .2s; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
/* Test Kitchen pages all share one layout (templates/test-kitchen-page.html). In "Try it", the toy
   sits on the left and "Things to try" on the right. The tips fold into a slim tab the first time
   you use the toy, so the toy gets the room; the tab opens them again (main.js). */
.play {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: start;
  column-gap: clamp(32px, 5vw, 72px);
  transition: grid-template-columns .35s cubic-bezier(.4, 0, .2, 1), column-gap .35s cubic-bezier(.4, 0, .2, 1);
}
.play.tips-closed { grid-template-columns: minmax(0, 1fr) 44px; column-gap: 20px; }
.play-toy { min-width: 0; }
.tips { position: sticky; top: 88px; }
.tips-head { margin-bottom: 16px; font: inherit; }
.tips-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.tips-act::after { content: "Hide"; color: var(--ink-3); font-size: .85rem; }
.tips-toggle:hover .tips-act::after { color: var(--ink); }
.tips ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.tips li { display: grid; grid-template-columns: 2.75rem 1fr; padding: 16px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: 1rem; }
.tips .idx { padding-top: .2em; }
.play.tips-closed .tips ol { display: none; }
.play.tips-closed .tips-head { margin: 0; }
.play.tips-closed .tips-toggle {
  justify-content: flex-start; gap: 10px; width: 44px; padding: 18px 0;
  border: 1px solid var(--rule); border-radius: 999px; background: #fff;
  writing-mode: vertical-rl;
}
.play.tips-closed .tips-toggle:hover { border-color: var(--ink); }
.play.tips-closed .tips-act::after { content: "+"; color: var(--ink); font-size: 1.1rem; line-height: 1; }
@media (max-width: 860px) {
  .play, .play.tips-closed { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .tips { position: static; }
  .play.tips-closed { row-gap: 24px; }
  .play.tips-closed .tips-toggle { width: auto; padding: 10px 20px; writing-mode: horizontal-tb; }
}
@media (prefers-reduced-motion: reduce) {
  .play { transition: none; }
}

.code { display: flex; align-items: center; gap: 16px; padding: 16px 16px 16px 20px; border-radius: 10px; background: var(--night); color: var(--night-ink); }
.code code { flex: 1; min-width: 0; font-size: .92rem; overflow-wrap: anywhere; }
.copy {
  flex: none; padding: .55em 1em; border: 1px solid var(--night-rule); border-radius: 999px;
  background: transparent; color: var(--night-ink); font: 500 .85rem var(--sans); cursor: pointer;
}
.copy:hover { border-color: var(--night-ink-2); }
.touches { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; margin: 48px 0; }
.touches h3 { margin-bottom: 8px; font-size: 1.1rem; font-weight: 500; }
.touches p { color: var(--ink-2); }
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.table th, .table td { padding: 16px 24px 16px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.table th { color: var(--ink-3); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.table td:last-child { color: var(--ink-2); }

.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; margin: 0 0 clamp(40px, 5vw, 56px); padding: 0; list-style: none; }
.how li { padding-top: 18px; border-top: 1px solid var(--night-rule); }
.how h3 { margin-bottom: 10px; font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em; }
.how p { color: var(--night-ink-2); font-size: .98rem; }

/* What's really going on, as a table: the toy on the left, the skill on the right (Test Kitchen pages) */
.explain table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.explain th, .explain td { padding: 16px 32px 16px 0; border-top: 1px solid var(--night-rule); text-align: left; vertical-align: top; }
.explain th { color: var(--night-ink-2); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.explain td:first-child { width: 38%; color: var(--night-ink); }
.explain td:last-child { color: var(--night-ink-2); }
.explain .bridge { margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 640px) {
  .explain thead { display: none; }
  .explain tr { display: block; padding: 16px 0; border-top: 1px solid var(--night-rule); }
  .explain td { display: block; width: auto !important; padding: 0; border: 0; }
  .explain td + td { margin-top: 6px; }
}

/* Narrower screens */
@media (max-width: 900px) {
  .how { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .how, .touches { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .toy { grid-template-columns: 1fr 1fr; }
  .toy-title { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid var(--rule); }
  .steps li { display: grid; grid-template-columns: 4rem 1fr; padding: 20px 0; border-top-color: var(--rule); }
  .steps h3 { margin: 0 0 6px; }
}
@media (max-width: 860px) {
  .project, .contact { grid-template-columns: 1fr; }
  .project-chat { aspect-ratio: auto; }
}
@media (max-width: 760px) {
  .nav nav { display: none; }
  .nav .btn-small { margin-left: auto; }
  .hero-bottom, .section-head { grid-template-columns: 1fr; }
  .toy { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .services { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn .arrow, .nav { transition: none; }
}