/* Woakes Star — overrides layered AFTER Tailwind preflight/utilities.
   Holds only what utilities can't express cleanly: progressive-enhancement
   reveal states, the split-flap board, focus styling and motion rules. */

:root {
  --shell-pad: clamp(1.25rem, 4vw, 2.5rem);
}

/* clip (not hidden) keeps position: sticky working while killing sideways scroll */
html { overflow-x: clip; scroll-behavior: smooth; }
body { overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

::selection { background: #B0401C; color: #F6F1E9; }

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: 6.5rem; }

/* Keyboard focus: visible on every interactive surface */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #B0401C;
  outline-offset: 2px;
  border-radius: 4px;
}
.on-pine a:focus-visible, .on-pine button:focus-visible, .on-pine summary:focus-visible {
  outline-color: #E3C892;
}

/* Display type: deliberately restrained, so the page reads as a document,
   not a landing-page template with one giant headline. */
.h-hero { font-size: clamp(2rem, 3.9vw, 3.15rem); line-height: 1.12; letter-spacing: -0.018em; }
.h-section { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.1; letter-spacing: -0.015em; }

/* --- Scroll reveal: start-state only exists when JS is on (html.js) --- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(0.2,0.7,0.2,1); }
.js [data-reveal][data-reveal-delay="1"].is-in { transition-delay: .08s; }
.js [data-reveal][data-reveal-delay="2"].is-in { transition-delay: .16s; }
.js [data-reveal][data-reveal-delay="3"].is-in { transition-delay: .24s; }

/* --- Split-flap arrivals board --- */
.flap-board { font-variant-numeric: tabular-nums; }
.flap-line { display: flex; flex-wrap: nowrap; gap: 3px; }
.flap-static { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; }
.flap-cell {
  --flap-w: clamp(15px, 2.2vw, 22px);
  width: var(--flap-w);
  height: calc(var(--flap-w) * 1.42);
  display: inline-flex; align-items: center; justify-content: center;
  background: #1b1a17; color: #E3C892;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(var(--flap-w) * 0.82); font-weight: 600; line-height: 1;
  border-radius: 3px;
  border-top: 1px solid #2c2a25; border-bottom: 1px solid #050505;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -2px 3px rgba(0,0,0,0.5);
  position: relative; overflow: hidden;
}
.flap-cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,0.55); }
.flap-cell.flip { animation: flapflip .12s ease-in; }
@keyframes flapflip { 0% { transform: rotateX(0); } 49% { transform: rotateX(-88deg); } 50% { transform: rotateX(88deg); } 100% { transform: rotateX(0); } }

/* --- Consignment stepper thread --- */
.stepper { position: relative; }
.stepper::before {
  content: ""; position: absolute; left: 27px; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(#B8894B, rgba(184,137,75,0.15));
}
@media (max-width: 640px) { .stepper::before { left: 19px; } }

/* Marker dot on each stage */
.stage-dot { box-shadow: 0 0 0 6px #F6F1E9; }
.on-pine .stage-dot { box-shadow: 0 0 0 6px #123329; }

/* Ledger comparison rule */
.ledger-row + .ledger-row { border-top: 1px solid rgba(32,32,28,0.10); }
.on-pine .ledger-row + .ledger-row { border-top: 1px solid rgba(246,241,233,0.12); }

/* Visibly-flagged placeholder for any fact the client has not confirmed */
.ph { border-bottom: 1px dashed #B8894B; color: #8A6634; }
.on-pine .ph { color: #E3C892; border-bottom-color: #E3C892; }

/* Native FAQ disclosure marker */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }

/* Sticky header: gains a hairline and soft backing once the page scrolls */
[data-header] { transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
[data-header].is-stuck {
  background: rgba(246,241,233,0.86);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom-color: rgba(32,32,28,0.10);
  box-shadow: 0 10px 30px -24px rgba(32,32,28,0.5);
}

/* Mobile menu panel (only ever shown below the md breakpoint) */
[data-menu] { display: none; }
[data-menu].is-open { display: block; }
@media (min-width: 768px) { [data-menu], [data-menu-toggle] { display: none !important; } }

/* Underline-on-hover nav links */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* Policy-page prose (keeps the markup light on those pages) */
.prose-policy { color: #514C41; }
.prose-policy h2 { margin-top: 2.25rem; margin-bottom: .5rem; font-family: 'Fraunces', ui-serif, Georgia, serif; font-weight: 600; font-size: 1.5rem; line-height: 1.2; color: #20201C; letter-spacing: -0.01em; }
.prose-policy h3 { margin-top: 1.35rem; margin-bottom: .35rem; font-weight: 600; font-size: 1.05rem; color: #20201C; }
.prose-policy p { margin: .8rem 0; line-height: 1.72; }
.prose-policy ul { margin: .8rem 0; padding-left: 1.3rem; list-style: disc; }
.prose-policy li { margin: .4rem 0; line-height: 1.65; }
.prose-policy a { color: #B0401C; text-decoration: underline; text-underline-offset: 2px; }
.prose-policy a:hover { color: #983516; }
.prose-policy strong { color: #20201C; font-weight: 600; }

/* Clause flagged for legal/client sign-off */
.review { margin: 1rem 0; border: 1px solid rgba(184,137,75,0.45); background: rgba(184,137,75,0.10); border-radius: 10px; padding: .7rem 1rem; font-size: .9rem; color: #514C41; }
.review b { color: #8A6634; font-weight: 600; }

/* Reduced motion: strip movement everywhere, including the board's flip */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}