/* "Daylight through linen": warm linen surfaces, mocha frosted glass, a dealer accent, and sunlight falling through slats.
   Always light on purpose (the owner does not want a dark theme), even on phones set to dark mode. Shared by every page.
   A dealer's brand color replaces --accent at runtime; the gold CTA on glass stays fixed so it is always readable.
   Fonts are self-hosted (CSP font-src 'self'): Bodoni Moda for display (24px and up only), Schibsted Grotesk for UI. Both SIL OFL. */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/schibsted-grotesk.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/bodoni-moda.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/bodoni-moda-italic.woff2) format("woff2")}
:root{
  color-scheme:light;
  --bg:#f1ebe3; --bg2:#e7dfd4; --panel:#fffdfa; --ink:#33281f; --muted:#6f5f53; --line:#e6dccf;
  --accent:#96651e; --accent-ink:#ffffff; --gold:#e6b45e; --gold-ink:#33281f; --gold-hi:#f6d593;
  --glass:rgba(110,88,72,.86); --glass-ink:#fffaf3; --glass-muted:rgba(255,250,243,.84);
  --glass-chip:rgba(255,250,243,.15); --glass-chip-line:rgba(255,250,243,.3);
  --paper:rgba(255,253,250,.82); --hairline:rgba(255,255,255,.7);
  --stage:#e4d9ca; --bad:#a8281f; --warn:#9a4a12;
  /* Pro dealer themes override these too (src/theme.js): page highlight, header band, and the sunlight tints */
  --bg-hi:#fbf7f1; --head:#6e5848; --head-ink:#ffffff; --sun-rgb:255,244,222; --halo-rgb:246,213,147;
  --shadow:0 1px 1px rgba(90,60,35,.05),0 8px 18px -6px rgba(90,60,35,.14),0 28px 50px -18px rgba(90,60,35,.22);
  --shadow-soft:0 1px 1px rgba(90,60,35,.05),0 4px 12px -2px rgba(90,60,35,.12);
  --shadow-pop:0 2px 4px rgba(90,60,35,.06),0 18px 40px -10px rgba(90,60,35,.32);
  --glow:0 10px 24px -8px color-mix(in srgb,var(--accent) 60%,transparent);
  --r-sheet:30px; --r-card:24px; --r-field:16px;
  --font:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Bodoni Moda","Iowan Old Style","Palatino",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.5,0,.75,0);
  /* defaults for controls on light surfaces; .on-glass flips them */
  --c-ink:var(--ink); --c-muted:var(--muted); --c-chip:var(--panel); --c-chip-line:var(--line);
}
.on-glass{--c-ink:var(--glass-ink); --c-muted:var(--glass-muted); --c-chip:var(--glass-chip); --c-chip-line:var(--glass-chip-line)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:radial-gradient(120% 70% at 50% 0%,var(--bg-hi) 0%,var(--bg) 55%,var(--bg2) 100%) fixed var(--bg)}
body{background:transparent;isolation:isolate;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Sunlight through slats: soft bands of light drift slowly across the room. The subject's own light, not decoration. */
body::before{content:"";position:fixed;inset:-30% -60% -30% -20%;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(-16deg,transparent 0 28px,rgba(var(--sun-rgb),.0) 30px,rgba(var(--sun-rgb),.8) 44px 66px,rgba(var(--sun-rgb),0) 80px,transparent 82px 112px);
  -webkit-mask-image:radial-gradient(65% 55% at 68% 16%,#000 0%,rgba(0,0,0,.5) 45%,transparent 78%);mask-image:radial-gradient(65% 55% at 68% 16%,#000 0%,rgba(0,0,0,.5) 45%,transparent 78%);
  animation:daylight 46s ease-in-out infinite alternate;will-change:transform}
body::after{content:"";position:fixed;z-index:-1;pointer-events:none;width:70vmax;height:70vmax;right:-22vmax;top:-30vmax;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--halo-rgb),.42),rgba(var(--halo-rgb),.12) 55%,transparent);animation:sun 14s ease-in-out infinite alternate}
@keyframes daylight{from{transform:translate3d(-4%,-1%,0) rotate(0deg)}to{transform:translate3d(5%,3%,0) rotate(2deg)}}
@keyframes sun{from{opacity:.7;transform:scale(.94)}to{opacity:1;transform:scale(1.05)}}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}
.on-glass :focus-visible{outline-color:#fff}
::selection{background:var(--gold-hi);color:var(--ink)}
input,textarea,select{caret-color:var(--accent);accent-color:var(--accent)}
input::placeholder,textarea::placeholder{color:#7a6a5e}
*{scrollbar-width:thin;scrollbar-color:rgba(120,95,75,.32) transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:rgba(120,95,75,.28);border-radius:8px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-track{background:transparent}
a{text-underline-offset:3px;text-decoration-thickness:1.5px}
[hidden]{display:none!important}
.serif{font-family:var(--serif);font-weight:400}
/* the blinds mark: four slats that tilt open once, then breathe */
.slatmark{display:inline-grid;gap:3px;width:26px}
.slatmark i{display:block;height:3.5px;border-radius:2px;background:currentColor;transform-origin:50% 50%;animation:slat 5.5s var(--ease) infinite}
.slatmark i:nth-child(2){animation-delay:.08s}.slatmark i:nth-child(3){animation-delay:.16s}.slatmark i:nth-child(4){animation-delay:.24s}
@keyframes slat{0%,62%,100%{transform:scaleY(1)}72%{transform:scaleY(.3)}84%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){body::before,body::after,.slatmark i{animation:none}}
