/* bohventures.com: page styles on the scroll-craft floor.
   Engine selectors ([data-sc-*], .sc-stage, .sc-copy) are the mechanism and are
   not restyled here. Grammar: chaptered editorial (see scrollcraft/builds/bohventures/BRIEF.md). */

/* ---------------------------------------------------------------- tokens -- */
:root {
  --sc-canvas:     #f8f5f4;  /* paper */
  --sc-surface:    #fafafa;  /* paper-alt */
  --sc-ink:        #2c2927;  /* ink */
  --sc-ink-soft:   #575250;  /* ink-soft */
  --sc-accent:     #ff5100;  /* accent: large type and marks only, never text under 24px on paper */
  --sc-accent-ink: #1a1716;  /* text on accent, 5.4:1 */
  --sc-font-display: "DM Serif Display", Georgia, serif;
  --sc-font-text:    "Poppins", system-ui, sans-serif;

  --boh-accent-soft: #ff7a3d;
  --boh-line:        #eeeeee;
  --boh-ink-body:    #3a3a3a;
  --boh-ink-ground:  #2c2927;
  --boh-ticket:      #fffdf8;

  --sc-shadow-color: 20 12% 12%;
  --boh-margin: 0rem;  /* the folio column; opened on wide screens */
}
@media (min-width: 1100px) {
  :root { --boh-margin: 13rem; }
}

/* Each chapter lands on its own ground (hard cuts, no drift). Tokens and
   `color` are restated together, because a token redefined on a subtree does
   not re-ink text whose colour already resolved higher up. */
.chapter--paper { background: var(--sc-canvas); color: var(--sc-ink); }
.chapter--alt   { background: var(--boh-line); color: var(--sc-ink); }
.chapter--ink {
  --sc-ink: #f8f5f4;
  --sc-ink-soft: #cfc6c1;
  --sc-accent: #ff7a3d;                   /* the accent's second stop, for dark ground */
  --sc-hairline: rgb(248 245 244 / 0.14);
  --sc-hairline-strong: rgb(248 245 244 / 0.26);
  --boh-ink-body: #e7e1dd;
  background: var(--boh-ink-ground);
  color: var(--sc-ink);
}

/* ---------------------------------------------------------------- global -- */
body { background: var(--sc-canvas); }
.sc-grain { opacity: 0.03; }
.sc-wrap { padding-left: calc(var(--sc-gutter) + var(--boh-margin)); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: #ffd9c7; color: #2c2927; }

.skip {
  position: absolute; left: var(--sc-4); top: var(--sc-4); z-index: 100;
  padding: var(--sc-2) var(--sc-4); background: var(--sc-ink); color: var(--sc-canvas);
  transform: translateY(-200%); transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.skip:focus { transform: none; }

/* A call to action set as running text, not a button island. */
.runlink {
  color: inherit; font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--sc-accent);
  text-decoration-thickness: 2px; text-underline-offset: 0.3em;
  transition: text-decoration-thickness var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .runlink:hover { text-decoration-thickness: 4px; }
}

.chapter__h {
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: var(--sc-t-2xl); line-height: 1.04; letter-spacing: var(--sc-track-snug);
  max-width: 26ch; margin: 0; text-wrap: balance;
}
@media (max-width: 700px) { .chapter__h { font-size: var(--sc-t-xl); line-height: 1.12; } }
@media (max-width: 380px) { .chapter__h { font-size: 1.4rem; } }
.chapter__intro { margin: var(--sc-4) 0 0; max-width: 44ch; color: var(--sc-ink-soft); text-wrap: pretty; }
.chapter { padding-block: var(--sc-section); }

/* ------------------------------------------------------- 0 · title page -- */
.title { min-height: 100svh; display: flex; padding-block: var(--sc-6) var(--sc-8); }
.title__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto auto; column-gap: var(--sc-5);
}
.masthead {
  grid-column: 1 / -1; margin: 0; display: flex; align-items: center; gap: var(--sc-3);
  font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.masthead img { width: 40px; height: 40px; }
.title__h1 { grid-column: 1 / -1; align-self: end; margin: var(--sc-9) 0 0; font-weight: 400; }
.title__main {
  display: block; font-family: var(--sc-font-display);
  font-size: var(--sc-t-4xl); line-height: 0.94; letter-spacing: var(--sc-track-tight);
  max-width: 11ch;
}
.title__deck {
  display: block; margin: var(--sc-5) 0 0 calc(100% * 5 / 12);
  font-family: var(--sc-font-display); font-style: italic;
  font-size: var(--sc-t-xl); line-height: 1.18; letter-spacing: var(--sc-track-snug);
  max-width: 24ch; text-wrap: balance;
}
.title__sub, .title__cta { grid-column: 6 / span 6; margin: 0; }
.title__sub { margin-top: var(--sc-6); max-width: 46ch; color: var(--sc-ink-soft); text-wrap: pretty; }
.title__cta { margin-top: var(--sc-4); }

@media (max-width: 860px) {
  .title__deck { margin-left: 0; }
  .title__sub, .title__cta { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .title__main { font-size: clamp(2.9rem, 12.5vw, 3.6rem); }
  .title__h1 { margin-top: var(--sc-8); }
}

/* --------------------------------------------- I · the pass (the peak) -- */
/* Three photographic planes share one 2048 square frame, so they align at
   rest. Each is sized to cover the frame and scaled around the pass window's
   centre (50.2%, 38.9% of the square). Progress comes from the engine's --sc-p. */
/* Pacing: the walk runs across p 0.06..0.86, then the kitchen holds (a
   declared resolved hold, published by signature.js). The wall eases in
   (e squared): you start slowly and the doorway rushes past at the end.
   signature.js mirrors these formulas for data-sc-verify-state; keep them in step. */
.pass {
  --e: clamp(0, calc((var(--sc-p, 0) - 0.06) / 0.8), 1);
  --near: clamp(0, calc(var(--e) * 1.8), 1);               /* the diners leave first */
  --wall-max: 2.3;
  background: var(--sc-canvas);
}
.pass__stage { display: flex; flex-direction: column; }
.pass__frame { margin: 0; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pass__box {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  container-type: size; background: #1d1a18;
}
.pass__box > img, .pass__box > .pass__wall, .pass__haze {
  position: absolute; left: 50%;
  width: max(100cqw, 100cqh); height: max(100cqw, 100cqh);
  top: calc((100cqh - max(100cqw, 100cqh)) * 0.35);
  translate: -50% 0;
  transform-origin: 50.2% 38.9%;
  max-width: none;
}
.pass__plane { display: block; width: 100%; height: 100%; max-width: none; }
.pass__box > img.pass__plane { object-fit: cover; }
.pass__plane--kitchen { transform: scale(calc(1 + 0.12 * var(--e))); }
.pass__haze {
  pointer-events: none;
  background: radial-gradient(40% 26% at 50.2% 40%, rgb(255 170 110 / 0.5), transparent 70%);
  opacity: calc(0.1 + 0.3 * var(--e));
  mix-blend-mode: soft-light;
}
.pass__wall {
  transform: scale(calc(1 + var(--wall-max) * var(--e) * var(--e)));
  opacity: calc(1 - clamp(0, calc((var(--e) - 0.9) / 0.1), 1));
}
.pass__wall .pass__plane { position: absolute; inset: 0; }
.pass__plane--diners {
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--near) * 10%)) scale(calc(1 + 1.5 * var(--near)));
  opacity: calc(1 - clamp(0, calc((var(--near) - 0.5) / 0.5), 1));
}
/* The steel ticket rail above the pass window, part of the wall plane. */
.pass__rail {
  position: absolute; left: 30%; width: 40%; top: 23.4%; height: 0.55%;
  background: linear-gradient(#d9d6d2, #8d8883 60%, #5f5a56);
  border-radius: 2px; box-shadow: 0 2px 3px rgb(0 0 0 / 0.3);
}

.pass__caption {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-5);
  padding: var(--sc-4) var(--sc-gutter) var(--sc-4) calc(var(--sc-gutter) + var(--boh-margin));
  background: var(--sc-canvas);
}
.pass__caption-lead { font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-lg); }
.pass__caption-side { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 860px) {
  .pass { --wall-max: 3.6; }
  .pass__stage { justify-content: center; }
  .pass__frame { flex: none; }
  .pass__box { flex: none; height: min(125vw, 70svh); }
  .pass__caption { flex-direction: column; gap: var(--sc-1); padding-inline: var(--sc-gutter); }
}

/* Reduced motion: no pin travel, one static layered composition. */
@media (prefers-reduced-motion: reduce) {
  .pass { --e: 0.55 !important; --near: 0.99 !important; height: auto !important; }
  .pass__stage { position: relative; height: auto; }
  .pass__box { flex: none; height: min(80svh, 62vw); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .pass__box { height: min(125vw, 70svh); }
}

/* ---------------------------------------------------- I · the pillars -- */
.pillars { padding-block: var(--sc-8) var(--sc-section); }
.pillars .chapter__h { margin-bottom: var(--sc-8); }
.menu {
  list-style: none; padding: 0; margin: 0 0 0 clamp(0rem, 10vw, 12rem);
  border-top: 1px solid var(--sc-hairline-strong); max-width: 62rem;
}
.menu__item {
  display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto;
  column-gap: var(--sc-7); row-gap: var(--sc-3); align-items: baseline;
  padding-block: var(--sc-6); border-bottom: 1px solid var(--sc-hairline-strong);
}
.menu__name { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.1; }
.menu__text { margin: 0; max-width: 54ch; color: var(--boh-ink-body); text-wrap: pretty; }

.menu__add {
  justify-self: start; min-height: 44px; padding: var(--sc-2) var(--sc-4);
  background: transparent; color: var(--sc-ink); border: 1px solid var(--sc-ink); border-radius: var(--sc-r-sm);
  font-size: var(--sc-t-sm); font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.menu__add:active { transform: translateY(1px); }
.menu__add[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-canvas); }
@media (hover: hover) and (pointer: fine) {
  .menu__add:hover { background: rgb(44 41 39 / 0.07); }
  .menu__add[aria-pressed="true"]:hover { background: #45403d; }
}
@media (max-width: 760px) {
  .menu { margin-left: 0; }
  .menu__item { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- II · work -- */
.work__head { margin-bottom: var(--sc-9); }
.ledger {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(var(--sc-6), 6vw, var(--sc-10)); row-gap: var(--sc-9);
  padding-bottom: var(--sc-9);
}
/* Magazine stagger: the right column sits half a step low. */
.entry:nth-child(even) { margin-top: var(--sc-9); margin-bottom: calc(-1 * var(--sc-9)); }
.entry__plate {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--sc-canvas); border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / 0.6);
}
/* Every logo sits in the same box whatever its shape, so the ledger keeps its rhythm. */
.entry__plate img {
  position: absolute; left: 16%; top: 14%; width: 68%; height: 72%;
  max-width: none; object-fit: contain;
}
.entry__name { margin: var(--sc-5) 0 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.1; }
.entry__tags { margin: var(--sc-2) 0 0; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-accent); }
.entry__text { margin: var(--sc-3) 0 0; max-width: 52ch; color: var(--boh-ink-body); text-wrap: pretty; }
@media (max-width: 760px) {
  .ledger { grid-template-columns: 1fr; padding-bottom: 0; }
  .entry:nth-child(even) { margin: 0; }
}

/* ---------------------------------------------------- III · questions -- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-5); }
.faq__h { grid-column: 1 / span 4; align-self: start; position: sticky; top: var(--sc-8); }
.faq__list { grid-column: 6 / -1; border-top: 1px solid var(--sc-hairline-strong); }
.qa { border-bottom: 1px solid var(--sc-hairline-strong); }
.qa summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-5);
  padding-block: var(--sc-5); cursor: pointer; list-style: none;
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.25;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; flex: none; font-family: var(--sc-font-text); font-size: 1.4rem; line-height: 1;
  transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { margin: 0 0 var(--sc-5); max-width: 60ch; color: var(--boh-ink-body); text-wrap: pretty; }
@media (max-width: 860px) {
  .faq__h, .faq__list { grid-column: 1 / -1; }
  .faq__h { position: static; margin-bottom: var(--sc-6); }
}

/* -------------------------------------------------------- IV · about -- */
.people {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(var(--sc-6), 7vw, var(--sc-10)); margin-top: var(--sc-8);
}
.person--offset { margin-top: var(--sc-10); }
.person__photo { margin: 0; }
.person__frame { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--sc-r-sm); max-width: 26rem; background: #d9d4d1; }
.person__frame img { width: 100%; height: 118%; max-width: none; object-fit: cover; margin-top: -9%; }
.person figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.person figcaption strong { display: block; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-lg); color: var(--sc-ink); }
.person__bio { margin: var(--sc-5) 0 0; max-width: 46ch; color: var(--boh-ink-body); text-wrap: pretty; }
@media (max-width: 760px) {
  .people { grid-template-columns: 1fr; row-gap: var(--sc-9); }
  .person--offset { margin-top: 0; }
}

/* ------------------------------------------------------ V · contact -- */
.contact { padding-bottom: var(--sc-6); }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-5); row-gap: var(--sc-8); }
.contact__lead { grid-column: 1 / span 5; align-self: start; position: sticky; top: var(--sc-8); }
.contact__form { grid-column: 7 / -1; }
@media (max-width: 860px) {
  .contact__lead, .contact__form { grid-column: 1 / -1; }
  .contact__lead { position: static; }
}

.contact-form { display: grid; gap: var(--sc-5); }
.field { display: grid; gap: var(--sc-2); margin: 0; min-width: 0; }
.field > span, .needs legend { font-size: var(--sc-t-sm); font-weight: 500; }
.field small { font-weight: 400; color: var(--sc-ink-soft); font-size: inherit; }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: var(--sc-3) var(--sc-4);
  background: rgb(248 245 244 / 0.06); color: var(--sc-ink);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm);
  font-size: max(16px, var(--sc-t-base));   /* 16px minimum stops iOS zooming the form */
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: transparent; background: rgb(248 245 244 / 0.1); }
.needs { border: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-1) var(--sc-5); }
.needs legend { padding: 0; margin-bottom: var(--sc-3); }
.needs label { display: flex; align-items: center; gap: var(--sc-3); min-height: 44px; cursor: pointer; font-size: var(--sc-t-sm); }
.needs input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--sc-accent); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.submit {
  justify-self: start; min-height: 52px; padding: var(--sc-3) var(--sc-6);
  background: var(--sc-accent); color: var(--sc-accent-ink); border: 0; border-radius: var(--sc-r-sm);
  font-weight: 600; font-size: var(--sc-t-base); cursor: pointer; white-space: nowrap;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.submit:active { transform: translateY(1px); }
.submit:disabled { opacity: 0.55; cursor: progress; }
@media (hover: hover) and (pointer: fine) { .submit:hover { background: #ff9360; } }
.chapter--ink .submit { --sc-accent-ink: #1a1716; }
.contact-status { margin: var(--sc-4) 0 0; min-height: 1.6em; font-size: var(--sc-t-base); }
.contact-status:focus { outline: none; }
@media (max-width: 520px) { .needs { grid-template-columns: 1fr; } }

.colophon { margin-top: var(--sc-10); }
.colophon__line { margin: 0 0 var(--sc-5); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline); font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-xl); }
.colophon__small { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.colophon__small a { color: inherit; text-underline-offset: 0.25em; }

/* ----------------------------------------------- the ticket (signature) -- */
.ticket {
  position: fixed; left: 0; top: 0; z-index: var(--sc-z-chrome);
  width: 11.5rem; visibility: hidden; pointer-events: none;
  will-change: transform;
}
.ticket.is-on { visibility: visible; }
.ticket__paper {
  pointer-events: auto; position: relative;
  background: var(--boh-ticket); color: #2c2927;
  padding: var(--sc-4) var(--sc-4) var(--sc-5);
  font-size: 0.8125rem; line-height: 1.45;
  box-shadow: 0 2px 4px rgb(40 30 25 / 0.18), 0 12px 28px -8px rgb(40 30 25 / 0.35);
  /* torn bottom edge */
  --tooth: 7px;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--tooth)) 100%;
  padding-bottom: calc(var(--sc-5) + var(--tooth));
}
.ticket__paper::before { /* the clip that holds it on the rail */
  content: ""; position: absolute; top: 0; left: 50%; width: 34px; height: 9px; translate: -50% 0;
  background: linear-gradient(#cfcac5, #8d8883); border-radius: 0 0 3px 3px;
}
.ticket__head {
  display: flex; justify-content: space-between; margin: 0 0 var(--sc-2); padding-bottom: var(--sc-2);
  border-bottom: 1px dashed rgb(44 41 39 / 0.35); font-weight: 600; letter-spacing: 0.06em;
}
.ticket__folio { margin: 0 0 var(--sc-2); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #575250; }
.ticket__items { list-style: none; margin: 0 0 var(--sc-3); padding: 0; font-variant-numeric: tabular-nums; }
.ticket__items li { padding-block: 1px; }
.ticket__empty { color: #6b6461; font-style: italic; }
.ticket__stamp {
  margin: 0 0 var(--sc-3); display: inline-block; padding: 0 var(--sc-2);
  border: 2px solid #c23a00; color: #c23a00; border-radius: 4px;
  font-size: 1.2rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  rotate: -8deg;
}
.ticket__stamp[hidden] { display: none; }
.ticket__cta { color: #2c2927; font-weight: 500; text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.ticket__tab { display: none; }

/* Phone: once docked, the ticket folds into a tab at the bottom-left. */
.ticket.is-tabbed { transform: none !important; left: var(--sc-4); top: auto; bottom: max(var(--sc-4), env(safe-area-inset-bottom)); width: auto; }
.ticket.is-tabbed .ticket__paper { display: none; }
.ticket.is-tabbed.is-open .ticket__paper { display: block; position: absolute; left: 0; bottom: calc(100% + var(--sc-3)); width: 12rem; }
.ticket.is-tabbed .ticket__tab {
  pointer-events: auto; display: inline-flex; align-items: center; gap: var(--sc-3);
  min-height: 44px; padding: var(--sc-2) var(--sc-4);
  background: var(--boh-ticket); color: #2c2927; border: 0; border-radius: var(--sc-r-sm);
  font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 2px 4px rgb(40 30 25 / 0.2), 0 10px 24px -8px rgb(40 30 25 / 0.4); cursor: pointer;
}
.ticket__count {
  min-width: 1.5rem; height: 1.5rem; display: inline-grid; place-items: center;
  background: #2c2927; color: #f8f5f4; border-radius: 999px; font-variant-numeric: tabular-nums;
}