/* RaSiKe "Take a seat" theme for every sub-page (30 Oct 2026): the home's velvet-black room, LED amber and League Gothic,
   laid over site.css by redefining its tokens. Loaded after site.css; site.css itself stays as it was. */
@font-face { font-family: "League Gothic"; src: url("/fonts/league-gothic-latin.woff2") format("woff2"); font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --oat: #0C0A0B; --oat-2: #141113; --oat-3: #1C181A; --paper: #141113;
  --ink: #F2EDE6; --ink-2: #C4BBB2; --mute: #8F867F; --line: rgba(242, 237, 230, .12);
  --thread: #FFDDB0; --thread-2: #E9BF86;
  --night: #0C0A0B; --night-2: #141113; --on-night: #F2EDE6; --on-night-2: #C4BBB2; --line-night: rgba(242, 237, 230, .12);
  --screen: #F1F0EB;
  --f-display: "League Gothic", "Arial Narrow", sans-serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
body { font-variation-settings: normal; }
::selection { background: var(--thread); color: var(--oat); }

/* type: tall condensed capitals, as on the home */
.h1, .h2, .h3, .ph__h, .ana__h1, .ana__h2, .final__h, .mh__name, .mc__name, .idx__name, .mot__nm, .nf__code {
  font-family: var(--f-display); font-weight: 400; font-stretch: 100%; font-variation-settings: normal;
  text-transform: uppercase; letter-spacing: .012em; line-height: .95;
}
.mark__w, .ft__mark { font-family: var(--f-display); font-weight: 400; text-transform: none; letter-spacing: .03em; }

/* the red stitch becomes the home's LED step light */
.stitch { height: 2px; background: var(--thread); box-shadow: 0 0 14px 2px rgba(255, 221, 176, .45), 0 0 50px 4px rgba(255, 221, 176, .12); }
.mark__w::after { display: none; }
.hd__nav a::after { background: var(--thread); box-shadow: 0 0 8px rgba(255, 221, 176, .6); }
.label { color: var(--thread); }
.label::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--thread); box-shadow: 0 0 10px 2px rgba(255, 221, 176, .55); flex: none; }
.night .label, .ft .label, .lt__txt .label { color: var(--thread); }
.ft a:hover { color: var(--thread); }
.ft { border-top: 1px solid var(--line); }

/* surfaces that were dark-on-light stay readable */
.dl__login { background: var(--oat-3); color: var(--ink); }
.dl__login::before { border-color: var(--line); }
.dl__login .fld input { color: var(--ink); border-color: rgba(242, 237, 230, .3); }
.dl__login .fld label, .dl__login .frm__note, .dl__login .frm__ok { color: var(--ink-2); }
.chip input:checked + span::before { background: var(--oat); border-color: var(--oat); }

/* cut-out catalogue shots sit on a light studio floor (multiply would vanish on black) */
picture.is-cut { background: var(--screen); }
.is-cut img { object-fit: contain; }

/* the anatomy frames were rendered on oat: show the player as a lit screen in the dark room */
.ana__stage, .ana__poster, .ana canvas { background: #EBE6DC; }

/* every display face in site.css: League Gothic is already condensed, so no extra weight, stretch or tight tracking */
.ana__h1,
.ana__h2,
.ana__n,
.as__n,
.ct__line,
.ctb__t,
.dls__n,
.facts dd,
.final__h,
.ft__line,
.ft__mark,
.h1,
.h2,
.h3,
.idx__name,
.legal-list a,
.mark__w,
.matl__g h3,
.mc__name,
.mh__line,
.mh__name,
.mot__solo .mot__nm,
.mot__tab .mot__nm,
.nf__code,
.nf__models a,
.ph__h,
.pj__t,
.pn__n,
.sfh__h,
.sheet__ct,
.sheet__nav a,
.steps__n,
.sw__name,
.tl__y,
.where__n { font-weight: 400; font-stretch: 100%; font-variation-settings: normal; letter-spacing: .012em; }

/* page heads: each sub-page opens like the home, a dark room behind the title and an LED step under it */
.ph--room { position: relative; isolation: isolate; min-height: 64svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(44px, 6vw, 90px); }
.ph--room.ph--tight { min-height: 46svh; }
.ph--room::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: linear-gradient(0deg, var(--oat) 0%, rgba(12, 10, 11, .72) 38%, rgba(12, 10, 11, .55) 70%, rgba(12, 10, 11, .8) 100%), var(--ph-img) center 60% / cover no-repeat; }
.ph--room::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--thread); box-shadow: 0 0 14px 2px rgba(255, 221, 176, .45), 0 0 50px 4px rgba(255, 221, 176, .12); }
.ph__row { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 600 14px/1.2 var(--f-body); color: var(--thread); }
.ph__row::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--thread); box-shadow: 0 0 10px 2px rgba(255, 221, 176, .55); }
.ph--room .ph__h { font-size: clamp(64px, 11vw, 180px); }
.ph--room .ph__lead { color: var(--ink); max-width: 34em; }
.ph--room .ph__jump { margin-top: 26px; }

/* quote: live configuration console beside the form */
.qc { display: grid; gap: 14px; }
.qc__view { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--oat-2); border: 1px solid var(--line); }
.qc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.4s var(--ease); }
.qc__img.is-on { opacity: 1; transform: none; }
.qc__view::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 221, 176, .03) 0 1px, transparent 1px 4px), linear-gradient(0deg, rgba(12, 10, 11, .8), transparent 48%); }
.qc__br { position: absolute; z-index: 2; width: 16px; height: 16px; border: 0 solid var(--thread); }
.qc__br--tl { left: 10px; top: 10px; border-top-width: 1.5px; border-left-width: 1.5px; }
.qc__br--tr { right: 10px; top: 10px; border-top-width: 1.5px; border-right-width: 1.5px; }
.qc__br--bl { left: 10px; bottom: 10px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.qc__br--br { right: 10px; bottom: 10px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.qc__live { position: absolute; z-index: 2; left: 34px; top: 14px; margin: 0; display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--thread); }
.qc__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--thread); box-shadow: 0 0 10px 2px rgba(255, 221, 176, .6); animation: qcPulse 1.6s ease-in-out infinite; }
@keyframes qcPulse { 50% { opacity: .3; } }
.qc__hud { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; }
.qc__name { margin: 0; font: 400 clamp(36px, 3.4vw, 52px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: .012em; }
.qc__mech { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); }
.qc__plan { border: 1px solid var(--line); padding: 12px 14px 8px; background: var(--oat-2); }
.qc__k { margin: 0 0 6px; display: flex; justify-content: space-between; font: 600 11px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.qc__k span { color: var(--thread); letter-spacing: .04em; }
.qc__svg { width: 100%; height: auto; display: block; overflow: visible; }
.qc__scr { fill: var(--screen); }
.qc__glow { fill: rgba(241, 240, 235, .1); filter: blur(5px); }
.qc__led { stroke: var(--thread); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.qc__seat rect { fill: var(--oat-3); stroke: rgba(255, 221, 176, .55); stroke-width: 1; }
.qc__seat .qc__back { fill: var(--thread); stroke: none; opacity: .85; }
.qc__seat { animation: qcSeat .45s var(--ease) both; animation-delay: calc(var(--i) * 25ms); }
@keyframes qcSeat { from { opacity: 0; transform: translateY(6px); } }
.qc__read { margin: 0; display: grid; border-top: 1px solid var(--line); }
.qc__read div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.qc__read dt { font: 600 11px/1.6 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.qc__read dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.qc__read .qc__code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; color: var(--thread); letter-spacing: .04em; }
.qc__meter { height: 2px; background: var(--oat-3); }
.qc__meter i { display: block; height: 100%; background: var(--thread); box-shadow: 0 0 10px rgba(255, 221, 176, .6); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
@media (max-width: 900px) {
  .qt { grid-template-areas: "steps" "aside" "form"; }
  .qt__aside.qc { display: grid; position: static; }
  .qc__view { aspect-ratio: 16 / 10; }
  .qc__plan, .qc__read div:nth-child(n+3), .qc__meter, .qc .ms__note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .qc__img, .qc__seat, .qc__live i { transition: none; animation: none; } }

/* contact: room under the page head before the big lines start */
.ct { padding-top: clamp(40px, 5vw, 72px); }
.ct .frm .h3 { margin-top: 0; }

/* model hero with a studio shot: on wide screens show the whole seat, the stage edges fade into the page */
@media (min-width: 701px) {
  .mh__img .is-fit { background: var(--oat); }
  .mh__img .is-fit img { object-fit: contain; object-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 94%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 94%, transparent);
    mask-composite: intersect; }
}

/* logo: signature wordmark (header left, footer bottom right) */
.mark__sig { display: block; width: 140px; color: var(--ink); line-height: 0; }
.mark__sig svg, .ft__sig svg { display: block; width: 100%; height: auto; overflow: visible; }
.ft__sig { display: block; width: 190px; color: var(--ink); order: 3; justify-self: end; }
.ft__base:has(.ft__sig) .ft__small { order: 2; }
@media (max-width: 700px) { .mark__sig { width: 96px; } }

/* phone: portrait version of a room photo (outpainted top and bottom, real photo in the middle), framed on the seats */
@media (max-width: 700px) and (orientation: portrait) { picture.has-tall img { object-position: var(--op-tall, 50% 50%) !important; } }
/* Kevin's own logo is wide and compact: a little smaller than the signature */
.mark__sig:has(.logo--klassiek) { width: 124px; }
.ft__sig:has(.logo--klassiek) { width: 170px; }

/* model gallery: a photo that would start a new pair on its own takes the full width (no hole beside it) */
@media (min-width: 701px) { .mg__it--0:last-child { grid-column: span 12; aspect-ratio: 21 / 9; height: auto; } }

/* upholstery collections (Kevin's sheets, 5 Nov): fabrics and leather as cards with a swatch strip */
.ucg { margin-top: clamp(28px, 4vw, 52px); }
.ucg__h { font: 600 13px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--thread); margin: 0 0 16px; }
.ucg__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.uc { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.uc__sw { display: block; aspect-ratio: 6 / 1; overflow: hidden; border-radius: 2px; margin-bottom: 8px; }
.uc__sw img { width: 100%; height: 100%; object-fit: cover; }
.uc__type { margin: 0; font-size: 12px; letter-spacing: .06em; color: var(--mute); }
.uc__n { margin: 0; font: 400 clamp(28px, 2.6vw, 38px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .012em; }
.uc__t { margin: 0 0 6px; color: var(--ink-2); font-size: 14.5px; }
.uc .lnk { margin-top: auto; align-self: flex-start; }
.matl__groups--more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(28px, 4vw, 48px); }
.matl .ms__note { margin: 18px 0; }
@media (max-width: 900px) { .ucg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ucg__grid, .matl__groups--more { grid-template-columns: 1fr; } }

/* Try a colour v2 (5 Nov 2026): a cinema stage for the real photo recoloured by /js/try.js */
.try { --try-c: #8a7a6a; position: relative; }
.try__scene { position: relative; height: clamp(520px, 78vh, 820px); overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 70% at 50% 8%, #221c1f 0%, #120f11 45%, #0a0809 100%); }
.try__screen { position: absolute; left: 50%; top: 7%; width: min(64%, 980px); aspect-ratio: 2.39 / 1; transform: translateX(-50%); border-radius: 2px;
  background: linear-gradient(180deg, rgba(241, 240, 235, .06), rgba(241, 240, 235, .01)); z-index: -2;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 80% at 50% 40%, #000 30%, transparent 100%); }
.try__spot { position: absolute; left: 50%; top: -10%; width: min(70vw, 900px); height: 120%; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(38% 55% at 50% 62%, rgba(255, 236, 210, .10), transparent 70%), conic-gradient(from 180deg at 50% 0%, transparent 162deg, rgba(255, 230, 200, .045) 172deg, rgba(255, 230, 200, .06) 180deg, rgba(255, 230, 200, .045) 188deg, transparent 198deg); }
.try__big { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-62%); margin: 0; z-index: -1; text-align: center; white-space: nowrap; pointer-events: none;
  font: 400 clamp(110px, 17vw, 300px)/.85 var(--f-display); text-transform: uppercase; letter-spacing: .01em;
  color: transparent; -webkit-text-stroke: 1px rgba(242, 237, 230, .13); transition: opacity .3s; }
.try__floor { position: absolute; left: 50%; bottom: 4%; width: min(80%, 1100px); height: 30%; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(50% 45% at 50% 55%, color-mix(in srgb, var(--try-c) 26%, transparent), transparent 72%); filter: blur(12px); transition: background .6s ease; }
.try__canvas { position: absolute; left: 50%; bottom: 9%; width: min(78%, 980px); height: 70%; transform: translateX(-50%); }
.try__laag { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: opacity .5s ease; }
.try__head { position: absolute; left: 0; right: 0; top: clamp(28px, 4vw, 52px); }
.try__h { margin: 0; font: 400 clamp(40px, 5.2vw, 84px)/.92 var(--f-display); text-transform: uppercase; letter-spacing: .01em; max-width: 9ch; }
.try__pose { position: absolute; right: max(16px, 4vw); top: clamp(30px, 4.4vw, 58px); min-height: 44px; padding: 0 20px; border-radius: 99px; border: 1px solid rgba(242, 237, 230, .25); background: rgba(12, 10, 11, .55); color: var(--ink); font: 600 14px/1 var(--f-body); cursor: pointer; backdrop-filter: blur(8px); }
.try__pose[aria-pressed="true"] { background: var(--thread); color: var(--oat); border-color: var(--thread); }
.try__seats { position: absolute; left: 50%; bottom: clamp(14px, 2.2vw, 26px); transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(12, 10, 11, .6); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.try__seats button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 99px; background: transparent; color: var(--ink-2); font: 600 14px/1 var(--f-body); letter-spacing: .04em; cursor: pointer; }
.try__seats button[aria-pressed="true"] { background: var(--ink); color: var(--oat); }
.try__label { position: absolute; right: max(16px, 4vw); bottom: clamp(22px, 2.6vw, 34px); margin: 0; max-width: 260px; text-align: right; font-size: 12px; line-height: 1.4; color: var(--mute); }
.try__dock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); padding-block: clamp(28px, 3.5vw, 48px) clamp(36px, 5vw, 72px); border-bottom: 1px solid var(--line); }
.try__lead { margin: 0 0 22px; color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 520px; }
.try__k { margin: 0 0 10px; font: 600 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.try__mat + .try__mat { margin-top: 18px; }
.try__seg { display: flex; flex-wrap: wrap; gap: 8px; }
.try__seg button { min-height: 40px; padding: 0 15px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font: 600 14px/1 var(--f-body); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.try__seg button:hover { border-color: rgba(242, 237, 230, .35); color: var(--ink); }
.try__seg button[aria-pressed="true"] { background: var(--ink); color: var(--oat); border-color: var(--ink); }
.try__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 14px; }
.try__name { font: 400 clamp(34px, 3.4vw, 50px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .012em; color: var(--ink); }
.try__col { font-size: 14px; color: var(--mute); }
.try__sw { list-style: none; margin: 0; padding: 3px; display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; max-height: 248px; overflow-y: auto; }
.try__sw button { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; background-size: cover; background-position: center; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 -6px 10px rgba(0, 0, 0, .25); transition: transform .15s; }
.try__sw button:hover { transform: scale(1.08); }
.try__sw button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--oat), 0 0 0 4px var(--thread); }
.try__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
@media (max-width: 900px) {
  .try__dock { grid-template-columns: minmax(0, 1fr); }
  .try__scene { height: clamp(500px, 82vh, 700px); }
  .try__canvas { width: 94%; height: 56%; bottom: 17%; }
  .try__label { left: 16px; right: 16px; bottom: auto; top: calc(100% - 118px); max-width: none; text-align: center; }
  .try__screen { width: 86%; top: 22%; }
}
@media (max-width: 520px) {
  .try__h { font-size: 44px; }
  .try__pose { top: auto; bottom: 74px; right: 50%; transform: translateX(50%); }
  .try__label { display: none; }
  .try__seats button { padding: 0 13px; font-size: 13px; }
  .try__sw { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); max-height: 210px; }
  .try__seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .try__seg button { flex: none; }
}
.try__fine { display: none; margin: 16px 0 0; font-size: 12.5px; color: var(--mute); }
@media (max-width: 520px) { .try__fine { display: block; } }