/* HOUSES chassis stylesheet.
   Every colour, texture, radius and font is a token. A house wears a palette by swapping
   tokens, never by editing this file. Bounded bespoke (D4): the renter picks values, the
   structure, spacing and depth stay ours.
   Weight rule: this file is the only stylesheet a house loads. No imports, no CDN. */

:root{
  /* palette roles, all overridden per house at runtime */
  --ground:#160f1c; --ground-2:#1d1424; --panel:#221829; --hairline:rgba(232,195,107,.22);
  --text:#f4efe6; --text-muted:#a9a096; --accent:#e8c36b; --accent-hot:#f3d691; --on-accent:#160f1c;
  --texture:none; --texture-opacity:.35; --texture-blend:overlay;
  --font-display:"Fraunces",Georgia,serif; --font-text:"Inter",system-ui,sans-serif;
  --radius:10px; --measure:64ch;
  /* one sun for the whole house: every shadow derives from these */
  --light-angle:200deg; --shadow-tint:8,4,12;
  --elev-1:0 1px 2px rgba(var(--shadow-tint),.20);
  --elev-2:0 1px 2px rgba(var(--shadow-tint),.18), 0 4px 10px rgba(var(--shadow-tint),.14);
  --elev-3:0 1px 2px rgba(var(--shadow-tint),.18), 0 4px 10px rgba(var(--shadow-tint),.14), 0 14px 32px rgba(var(--shadow-tint),.12);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ground); color:var(--text); font-family:var(--font-text);
     font-size:16px; line-height:1.65; overflow-x:hidden;}
/* the texture is a layer, never a background-image on body: it tints with the palette */
body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--texture); background-size:cover; background-position:center;
  mix-blend-mode:var(--texture-blend); opacity:var(--texture-opacity);}

img{max-width:100%; display:block}
a{color:var(--accent)}
.wrap{width:min(1080px,92vw); margin:0 auto}

/* ---------- the bar ---------- */
.bar{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 0; background:color-mix(in srgb, var(--ground) 88%, transparent);
  border-bottom:1px solid var(--hairline); backdrop-filter:blur(8px);}
.bar .mark{font-family:var(--font-display); font-size:20px; letter-spacing:.02em; color:var(--text); text-decoration:none}
.bar nav{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.bar nav a{font-size:14px; color:var(--text-muted); text-decoration:none}
.bar nav a:hover{color:var(--accent)}
.cta{display:inline-flex; align-items:center; padding:10px 18px; border-radius:999px;
  background:var(--accent); color:var(--on-accent); text-decoration:none; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; box-shadow:var(--elev-1);}
.cta:hover{background:var(--accent-hot)}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,10vw,120px) 0 clamp(32px,6vw,64px); text-align:center}
.hero .kicker{font-family:var(--font-display); font-style:italic; color:var(--accent);
  font-size:13px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:14px}
.hero h1{font-family:var(--font-display); font-weight:400; margin:0;
  font-size:clamp(38px,7vw,76px); line-height:1.02; letter-spacing:-.01em;
  text-shadow:0 2px 4px rgba(var(--shadow-tint),.45), 0 12px 30px rgba(var(--shadow-tint),.35);}
.hero p{max-width:var(--measure); margin:18px auto 0; color:var(--text-muted); font-size:clamp(15px,2vw,18px)}

/* ---------- the rack: what people came for ---------- */
.rack{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:36px 0}
.card{position:relative; isolation:isolate; display:block; text-decoration:none; color:inherit;
  border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden;
  background:var(--panel); box-shadow:var(--elev-2); transition:transform .3s, box-shadow .3s, border-color .3s}
.card:hover,.card:focus-visible{transform:translateY(-3px); box-shadow:var(--elev-3); border-color:var(--accent)}
.card .shot{aspect-ratio:4/5; overflow:hidden; background:var(--ground-2)}
.card .shot img{width:100%; height:100%; object-fit:cover}
.card .plate{padding:14px 16px 16px}
.card .plate .k{font-family:var(--font-display); font-size:19px; color:var(--text)}
.card .plate .s{display:block; margin-top:2px; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted)}

/* ---------- sections ---------- */
.sec{padding:clamp(36px,6vw,72px) 0; border-top:1px solid var(--hairline)}
.sec h2{font-family:var(--font-display); font-weight:400; font-size:clamp(26px,4vw,40px); margin:0 0 10px}
.sec p{max-width:var(--measure); color:var(--text-muted)}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0}
.chip{border:1px solid var(--hairline); border-radius:var(--radius); padding:10px 14px; text-align:center; min-width:104px}
.chip b{display:block; font-size:17px; color:var(--text)}
.chip span{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted)}

/* ---------- the ask ---------- */
form.ask{display:grid; gap:12px; max-width:520px; margin-top:18px}
form.ask input,form.ask textarea{width:100%; padding:12px 14px; border-radius:var(--radius);
  border:1px solid var(--hairline); background:var(--ground-2); color:var(--text); font:inherit}
form.ask input:focus,form.ask textarea:focus{outline:2px solid var(--accent); outline-offset:1px}
form.ask button{justify-self:start; cursor:pointer; border:0; font:inherit}
.note{font-size:14px; color:var(--text-muted)}
.note.bad{color:var(--accent-hot)}

footer{padding:40px 0 56px; text-align:center; color:var(--text-muted); font-size:13px;
  border-top:1px solid var(--hairline)}

/* the paused state: a house that stops paying goes quiet and dignified, never broken (antibody) */
.paused{min-height:100vh; display:grid; place-items:center; text-align:center; padding:40px}
.paused .inner{max-width:420px}

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }
@media (prefers-reduced-transparency:reduce){ .bar{backdrop-filter:none} }

/* ---------- the spoke ----------
   The same mark that turns on bspokevisuals.com, wearing each house's own accent.
   It is the visible thread between the studio and every house it builds: same hand,
   your colours. Inline SVG so it costs no request, and it holds still for anyone
   who has asked the system for less motion. */
.spoke{width:1em; height:1em; flex:none; overflow:visible}
.spoke line{stroke:var(--accent); stroke-width:7; stroke-linecap:round}
@keyframes spoketurn{to{transform:rotate(360deg)}}
.spoke g{transform-origin:50px 50px; animation:spoketurn 18s linear infinite}
@keyframes spokedraw{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
.crest .spoke line{stroke-dasharray:1; animation:spokedraw .5s ease-out both}
.crest .spoke line:nth-child(1){animation-delay:.02s} .crest .spoke line:nth-child(2){animation-delay:.06s}
.crest .spoke line:nth-child(3){animation-delay:.10s} .crest .spoke line:nth-child(4){animation-delay:.14s}
.crest .spoke line:nth-child(5){animation-delay:.18s} .crest .spoke line:nth-child(6){animation-delay:.22s}
.crest .spoke line:nth-child(7){animation-delay:.26s} .crest .spoke line:nth-child(8){animation-delay:.30s}
.crest .spoke line:nth-child(9){animation-delay:.34s} .crest .spoke line:nth-child(10){animation-delay:.38s}

.bar .mark{display:inline-flex; align-items:center; gap:10px}
.bar .mark .spoke{width:20px; height:20px}
.bar .mark:hover .spoke g{animation-duration:2.4s}

.crest{display:inline-flex; align-items:center; gap:10px; justify-content:center; margin-bottom:14px}
.crest .spoke{width:22px; height:22px}
.crest .kicker{margin:0}

footer .kin{display:inline-flex; align-items:center; gap:8px}
footer .kin .spoke{width:13px; height:13px; opacity:.7}

@media (prefers-reduced-motion:reduce){ .spoke g, .crest .spoke line{animation:none} }