/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
 * genre: editorial · macrostructure: Bench Ledger · theme: contract direction · enrichment: photography
 * nav: wordmark + one link · footer: hardware colophon · contrast/mobile/tokens: pass
 */
@import url("tokens.css");

@font-face { font-family: "Fraunces"; src: url("assets/fonts/Fraunces.ttf") format("truetype"); font-display: swap; font-weight: 100 900; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/IBMPlexSans-Regular.ttf") format("truetype"); font-display: swap; font-weight: 400; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/IBMPlexSans-SemiBold.ttf") format("truetype"); font-display: swap; font-weight: 600; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; }
body { background: var(--color-paper); color: var(--color-ink); font: 400 18px/1.6 var(--font-body); }
body[data-cvx-style="paper"] { --cvx-radius: 2px; --cvx-shadow: 3px 3px 0 rgba(60,32,18,.9); --cvx-surface: #f2e6cf; --cvx-live: var(--color-accent); --cvx-border-width: 1px; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; }
.skip-link { position: fixed; left: var(--space-md); top: var(--space-md); z-index: 999; background: var(--color-paper); padding: var(--space-sm) var(--space-md); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.site-header { background: var(--color-paper); border-bottom: 2px solid var(--color-rule); }
.header-inner, .shell { width: min(1100px, calc(100% - 40px)); margin-inline: auto; }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.wordmark { font: 600 clamp(1.35rem, 2.5vw, 1.9rem)/1 var(--font-display); text-decoration: none; white-space: nowrap; }
.header-link { color: var(--color-accent); font-family: var(--font-display); font-weight: 650; text-decoration-thickness: 2px; text-underline-offset: .3em; white-space: nowrap; }
h1, h2 { font: 600 var(--text-display)/1.06 var(--font-display); font-style: normal; letter-spacing: -.025em; overflow-wrap: anywhere; min-width: 0; margin: 0; }
h3 { font: 600 1.35rem/1.2 var(--font-display); margin: 0; }
p { margin: 0; }
.eyebrow { color: var(--color-accent); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hero { position: relative; min-height: 650px; background: linear-gradient(90deg, oklch(18% .03 52 / .88), oklch(20% .03 52 / .58) 54%, oklch(20% .03 52 / .18)), url("assets/images/bench-hero.png") center/cover no-repeat; color: var(--color-hero-ink); }
.hero-inner { min-height: 650px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: 56px 72px; }
.hero-copy { max-width: 670px; display: grid; gap: var(--space-lg); }
.hero-copy h1 em { display: block; color: var(--color-accent); font-style: normal; }
.lede { max-width: 62ch; font-size: 1.09rem; }
.hero-portrait { align-self: center; width: min(100%, 460px); aspect-ratio: 4 / 3; margin-left: auto; object-fit: cover; object-position: center; box-shadow: 12px 14px 0 rgb(25 15 8 / 44%); }
.button { min-height: 48px; width: fit-content; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 4px 4px 0 var(--color-ink); padding: .78rem 1.15rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.button:hover, .button:focus-visible { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--color-ink); }
.button:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--color-ink); }
.button[aria-disabled="true"],.button:disabled{opacity:.55;cursor:not-allowed;transform:none}
.button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.commerce-line { border-block: 2px solid var(--color-rule); padding: var(--space-md) 0; font-weight: 600; }
.section { padding-block: clamp(56px, 6vw, 88px); }
.section-head { display: flex; flex-direction: column; gap: var(--space-md); max-width: 760px; margin-bottom: var(--space-2xl); }
.quote-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .6fr); gap: var(--space-2xl); align-items: center; }
.quote { font: 600 clamp(1.7rem, 3vw, 2.45rem)/1.28 var(--font-display); max-width: 24ch; }
.signature { color: var(--color-accent); font: italic 1.6rem/1 var(--font-display); margin-top: var(--space-md); }
.tool-rail { position: relative; height: 210px; border-top: 2px solid var(--color-rule); overflow: visible; }
.tool { position: absolute; left: 10px; bottom: 6px; width: 64px; height: 156px; color: var(--color-rule); transform-origin: 0% 100%; transform: rotate(0); transition: transform var(--dur-spread) var(--ease-spring); }
.tool:nth-child(1){--rot:-10deg;z-index:5}.tool:nth-child(2){--rot:0deg;z-index:4}.tool:nth-child(3){--rot:10deg;z-index:3;scale:1.03}.tool:nth-child(4){--rot:20deg;z-index:2}.tool:nth-child(5){--rot:30deg;z-index:1}
.tool-fan.is-open .tool, .tool-fan:focus-within .tool, .tool-fan:hover .tool { transform: rotate(var(--rot)); }
.objects-section { background: var(--color-paper); }
.object-strip { aspect-ratio: 3 / 1; background: url("assets/images/bench-objects.png") center/cover no-repeat; }
.object-caption { margin-top: var(--space-md); max-width: 70ch; }
.contents-layout { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); }
.contents-list { columns: 2; column-gap: var(--space-xl); padding-left: 1.3rem; margin: 0; }
.contents-list li { break-inside: avoid; margin-bottom: var(--space-md); padding-left: .35rem; }
.look-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; }
.look-grid figure { margin: 0; padding: .75rem; background: #fffdf7; border: 1px solid color-mix(in srgb, var(--color-rule) 34%, transparent); box-shadow: 0 .8rem 2rem rgb(61 38 18 / 10%); }
.look-grid img { width: 100%; height: auto; aspect-ratio: 1010 / 1664; object-fit: contain; }
.look-grid figcaption { margin-top: var(--space-sm); font-size: 1rem; font-weight: 600; }
.product-band { background: linear-gradient(115deg, var(--color-paper-deep), var(--color-paper)); border-block: 2px solid var(--color-rule); }
.product-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr); gap: var(--space-2xl); align-items: center; }
.product-photo { width: min(100%, 27rem); height: auto; aspect-ratio: 3/4; object-fit: contain; margin-inline: auto; }
.offer { display: grid; gap: var(--space-md); }
.price { color: var(--color-accent); font: 600 clamp(4rem, 8vw, 5.5rem)/.95 var(--font-display); }
.price sup { font-size: .32em; vertical-align: top; }
.hardware-label { width: fit-content; margin-top: var(--space-md); border: 2px solid var(--color-rule); background: var(--color-paper-deep); padding: .35rem .7rem; font: 600 .78rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.faq { max-width: 820px; }
.faq details { border-top: 2px solid var(--color-rule); padding: var(--space-lg) 0; }
.faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.faq details p { margin-top: var(--space-md); max-width: 68ch; }
.site-footer { background: var(--color-ink); color: var(--color-paper); border-top: 8px solid var(--color-accent); }
.footer-inner { padding-block: var(--space-xl); display: flex; justify-content: space-between; gap: var(--space-lg); align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.footer-links a { white-space: nowrap; }
.bar-cascade { display:none; gap:4px; height:24px; align-items:end; }
.bar-cascade span { width:6px; height:8px; background: currentColor; animation: bar-cascade 1s ease-in-out infinite; animation-delay: calc(var(--i)*.1s); }
[data-state="loading"] .bar-cascade { display:flex; }
@keyframes bar-cascade { 50% { transform: scaleY(3); } }

@media (max-width: 760px) {
  .header-inner,.shell{width:min(100% - 32px,1100px)}
  .hero-inner,.quote-band,.contents-layout,.product-grid{grid-template-columns:minmax(0,1fr)}
  .hero{min-height:0}.hero-inner{min-height:0;padding-block:48px 64px}.hero-portrait{width:min(100%,520px);height:auto;margin:0}
  .quote-band{gap:var(--space-xl)}.tool-rail{height:170px}.section{padding-block:52px}
  .contents-list{columns:1}.look-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.look-grid figure:first-child{grid-column:1/-1}
  .footer-inner{align-items:flex-start;flex-direction:column}.footer-links{gap:var(--space-sm) var(--space-md)}
}
@media (max-width: 420px){.header-inner{min-height:68px;gap:.5rem}.wordmark{font-size:1.05rem}.header-link{font-size:.76rem;white-space:normal;text-align:right}.hero-inner{padding-block:36px 46px}.hero-portrait{width:100%;height:auto}.section{padding-block:42px}.button{max-width:100%;font-size:.94rem;white-space:normal}.look-grid{grid-template-columns:minmax(0,1fr)}.tool-rail{height:auto;aspect-ratio:3/2}.look-grid img{height:auto;max-height:none;object-fit:contain}html body .cvx-bar .cvx-off{min-width:0;max-width:100%;white-space:normal!important;text-align:center}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.tool{transform:rotate(var(--rot))}}

.home-option .home-option-cta{order:99}

/* SD4 product display: workshop pair, with the held library kept inert. */
.home-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,4vw,3rem);align-items:stretch;padding-top:1.4rem}.home-option{position:relative;display:flex;min-width:0;flex-direction:column;gap:1.25rem;padding:clamp(1.2rem,3vw,2rem);border:1px solid var(--color-rule);background:#fffdf7}.home-option>.product-photo{width:min(100%,15rem)}.home-option .offer{display:flex;flex:1;min-width:0;flex-direction:column}.home-option .offer>*{margin-block:0}.home-option .offer>*+*{margin-top:1rem}.home-option h3{font:600 clamp(1.7rem,3vw,2.35rem)/1.1 var(--font-display)}.home-option .home-option-cta{width:100%;margin-top:auto}.home-option--bundle{padding-top:clamp(2.8rem,5vw,3.6rem);overflow:visible}.home-best-value{position:absolute;z-index:4;top:-1rem;left:50%;padding:.45rem .85rem;border:2px solid var(--color-rule);background:var(--color-paper-deep);color:var(--color-accent);font-weight:800;letter-spacing:.1em;text-transform:uppercase;transform:translateX(-50%) rotate(-1deg);white-space:nowrap}.home-bundle-price{display:flex;min-height:5rem;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;font-family:var(--font-display);font-variant-numeric:tabular-nums}.home-bundle-price s{color:var(--color-ink-muted);font-size:clamp(2rem,4vw,2.7rem);font-weight:600;text-decoration-color:var(--color-accent);text-decoration-thickness:.12em}.home-bundle-price strong{color:var(--color-accent);font-size:clamp(3.8rem,7vw,5rem);line-height:.9}.home-bundle-price span{width:100%;color:var(--color-accent);font-family:var(--font-body);font-weight:800;text-align:center}.home-library-list{margin:0;padding-left:1.2rem}.home-held{padding:.85rem;border-left:.3rem solid var(--color-accent);background:var(--color-paper-deep);font-weight:700}.home-option-cta--disabled[aria-disabled="true"]{border-color:var(--color-rule);background:transparent;color:var(--color-ink-muted);cursor:not-allowed;pointer-events:none}@media(max-width:760px){.home-option-grid{grid-template-columns:minmax(0,1fr);gap:2.5rem}.home-option>.product-photo{width:min(72%,15rem)}}