/* ============================================================
   STOREFRONT PROPERTY — shared stylesheet (vanilla, no framework)
   House FLAVOR MAP: hero graphic background, framed glass sheet,
   glass sliding boards, frame detail, floating ad tile.
   Palette: ink #111111 · crimson #C8102E · deep hero ink-navy.
   PORTABILITY: no brand strings live in this file.
   ============================================================ */
:root{
  --ink:#111111;
  --ink2:#1b1e24;
  --crimson:#C8102E;
  --paper:#f6f4ef;
  --glass:rgba(255,255,255,.92);
  --glass-soft:rgba(255,255,255,.86);
  --glass-dark:rgba(14,16,20,.88);
  --line:rgba(17,17,17,.16);
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  color:var(--ink);
  background:#0c0e13;
  padding:0 0 190px; /* bottom no-fly zone: nothing actionable rests low */
}
/* ---- hero graphic background (pure CSS, no external assets) ---- */
.hero-bg{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(200,16,46,.34), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(38,84,140,.40), transparent 62%),
    repeating-radial-gradient(circle at 78% 18%, rgba(255,255,255,.055) 0 2px, transparent 2px 74px),
    linear-gradient(160deg,#101623 0%,#0c0e13 55%,#14100f 100%);
}
.hero-bg::after{ /* signal-ring motif */
  content:""; position:absolute; right:-140px; top:-140px; width:520px; height:520px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.10);
  box-shadow:0 0 0 44px rgba(255,255,255,.028), 0 0 0 96px rgba(255,255,255,.02), 0 0 0 160px rgba(255,255,255,.014);
}
/* ---- fixed hairline frame with corner detail ---- */
.frame{position:fixed; inset:10px; border:1px solid rgba(255,255,255,.22); pointer-events:none; z-index:40}
.frame i{position:absolute; width:22px; height:22px; border:0 solid var(--crimson)}
.frame i:nth-child(1){left:-1px;top:-1px;border-left-width:3px;border-top-width:3px}
.frame i:nth-child(2){right:-1px;top:-1px;border-right-width:3px;border-top-width:3px}
.frame i:nth-child(3){left:-1px;bottom:-1px;border-left-width:3px;border-bottom-width:3px}
.frame i:nth-child(4){right:-1px;bottom:-1px;border-right-width:3px;border-bottom-width:3px}
.wrap{max-width:1060px;margin:0 auto;padding:26px 16px 0}
/* ---- masthead ---- */
.masthead{
  background:var(--glass); border-radius:var(--radius);
  border-top:6px solid var(--ink); outline:1px solid var(--line);
  padding:20px 22px 16px; text-align:center;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.masthead .kicker{font-family:Verdana,Arial,sans-serif;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--crimson);font-weight:bold}
.masthead h1{font-size:clamp(23px,6vw,52px);margin:6px 0 2px;letter-spacing:.015em;line-height:1.04;overflow-wrap:anywhere}
@media(max-width:480px){.masthead h1{font-size:21px;letter-spacing:0}}
.masthead .sub{font-style:italic;font-size:clamp(14px,2.6vw,18px);color:#333;margin:2px 0 0}
.masthead .rule{height:3px;background:var(--crimson);margin:14px auto 10px;max-width:520px}
.masthead .own{font-family:Verdana,Arial,sans-serif;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#444}
.masthead nav{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.masthead nav a{
  font-family:Verdana,Arial,sans-serif;font-size:12.5px;font-weight:bold;letter-spacing:.06em;
  color:var(--ink);text-decoration:none;border:1.5px solid var(--ink);border-radius:999px;padding:7px 14px;background:#fff;
}
.masthead nav a:active{background:var(--ink);color:#fff}
/* ---- glass sheet + boards ---- */
.sheet{
  margin-top:18px;background:var(--glass-soft);border-radius:var(--radius);
  outline:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.4);
  padding:20px 18px 24px;backdrop-filter:blur(3px);
}
.sheet h2{font-size:clamp(21px,4.4vw,30px);margin:2px 0 4px}
.sheet h2 .no{color:var(--crimson)}
.sheet p.lede{font-size:16.5px;line-height:1.5;margin:4px 0 14px;color:#222}
.board-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.board-head .hint{font-family:Verdana,Arial,sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#555}
.rail{
  display:flex;gap:12px;overflow-x:auto;padding:6px 2px 14px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.tile{
  scroll-snap-align:start;flex:0 0 84%;max-width:330px;
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--ink);
  border-radius:10px;padding:14px 14px 12px;box-shadow:0 6px 18px rgba(0,0,0,.13);
  display:flex;flex-direction:column;gap:6px;
}
@media(min-width:760px){ .tile{flex-basis:31.5%} .rail{flex-wrap:wrap;overflow:visible} }
.tile h3{margin:0;font-size:18.5px;line-height:1.2}
.tile p{margin:0;font-size:14.5px;line-height:1.45;color:#2c2c2c}
.tile .price{font-family:Verdana,Arial,sans-serif;font-weight:bold;font-size:14px;margin-top:auto}
.tile a{color:var(--crimson);font-weight:bold}
.badge{
  align-self:flex-start;font-family:Verdana,Arial,sans-serif;font-size:10.5px;font-weight:bold;
  letter-spacing:.14em;text-transform:uppercase;border-radius:4px;padding:3px 8px;color:#fff;background:#2e7d32;
}
.badge.review{background:#8a6d00}
.badge.build{background:#444}
.badge.house{background:var(--crimson)}
.badge.empty{background:#fff;color:#777;border:1.5px dashed #999}
.tile.empty{border-top-color:#999;background:rgba(255,255,255,.66)}
.tile.empty h3{color:#666}
.tile.empty p{color:#666}
/* ---- dark glass panels (offer / engine / costs) ---- */
.panel{
  margin-top:18px;background:var(--glass-dark);color:#f2efe9;border-radius:var(--radius);
  padding:20px 20px 22px;box-shadow:0 18px 44px rgba(0,0,0,.5);
  border-top:5px solid var(--crimson);
}
.panel h2{margin:2px 0 8px;font-size:clamp(21px,4.4vw,29px);color:#fff}
.panel p,.panel li{font-size:15.5px;line-height:1.55;color:#e8e4da}
.panel ul{margin:8px 0 4px;padding-left:20px}
.panel li{margin:5px 0}
.panel b{color:#fff}
.panel a{color:#ffb3ba}
table.rates{width:100%;border-collapse:collapse;margin:12px 0 4px;font-family:Verdana,Arial,sans-serif;font-size:13.5px}
table.rates th,table.rates td{border:1px solid rgba(255,255,255,.28);padding:8px 10px;text-align:left;color:#f2efe9}
table.rates th{background:rgba(200,16,46,.85);color:#fff;letter-spacing:.05em}
.note{font-size:13.5px;color:#cfc9bc;font-style:italic}
/* ---- floating ad tile ---- */
.ad-tile{
  position:fixed;right:14px;bottom:132px;z-index:50;width:172px;
  background:rgba(14,16,20,.72);color:#fff;border:1.5px dashed rgba(255,255,255,.75);
  border-radius:10px;padding:10px 12px;text-align:center;text-decoration:none;
  font-family:Verdana,Arial,sans-serif;backdrop-filter:blur(2px);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.ad-tile .big{display:block;font-weight:bold;letter-spacing:.12em;font-size:13px}
.ad-tile .small{display:block;font-size:11px;margin-top:3px;color:#ddd}
/* ---- footer ---- */
footer{margin-top:20px;text-align:center;color:#d8d3c8;font-size:13.5px;line-height:1.6;padding:0 10px}
footer .brandline{font-family:Verdana,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;font-size:11.5px;color:#fff}
footer a{color:#ffb3ba}
/* ---- ART PASS (Nov 12, 2026): real product art, icon board, mini library ----
   Palette discipline: art sits whole on the solid ink ground of its frame —
   no overlays, no filters, no translucency over product art. Tones are the
   palette's own: ink frame, crimson rule on featured pieces. */
section.sheet[id]{scroll-margin-top:14px}
.tile{position:relative}
.art{
  display:block;margin:-14px -14px 8px;overflow:hidden;
  background:#0b0d10;border-bottom:1px solid var(--line);
  border-radius:10px 10px 0 0;aspect-ratio:16/10;
}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.art.top img{object-position:top center}
.art.contain{background:#0b0d10}
.art.contain img{object-fit:contain;padding:12px}
a.art{text-decoration:none}
.tile .art.square{aspect-ratio:1/1}
.board-head.sub{margin-top:10px}
.board-head.sub h3{font-size:19px;margin:0}
.rail.featured .tile{border-top:4px solid var(--crimson)}
@media(max-width:759px){ .rail.featured .tile{flex-basis:92%} }
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.lib-item{background:#fff;border:1px solid var(--line);border-top:3px solid var(--ink);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.lib-item img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#0b0d10}
.lib-item .pad{padding:8px 10px 10px;display:flex;flex-direction:column;gap:5px;flex:1}
.lib-item h4{margin:0;font-size:14.5px;line-height:1.25}
.lib-item .meta{display:flex;align-items:center;justify-content:space-between;font-family:Verdana,Arial,sans-serif;font-weight:bold;font-size:13px}
.lib-item .live{margin:auto 0 0;font-size:12.5px}
.lib-item .live a{color:var(--crimson);font-weight:bold}
.badge.sm{font-size:9.5px;padding:2px 6px}
.icon-mark{display:block;width:84px;height:84px;margin:2px auto 10px;border-radius:18px;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(106px,1fr));gap:12px}
.icon-cell{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 8px 8px;text-align:center}
.icon-cell img{width:72px;height:72px;object-fit:contain;display:block;margin:0 auto 6px}
.icon-cell figcaption{font-family:Verdana,Arial,sans-serif;font-size:10.5px;line-height:1.3;color:#333}