/* HOUSES — premium minimal shells for creative engines.
   Tokens/base/nav/footer carry the system. Atmosphere only. */

.sy-houses{
  padding:calc(var(--sy-nav-h) + 56px) 0 96px;
  min-height:70vh;
}

.sy-houses-lead{
  max-width:42rem;
  margin-top:18px;
  font-size:1.05rem;
  color:var(--sy-dim);
  line-height:1.65;
}

.sy-houses-grid{
  margin-top:48px;
  display:grid;
  gap:24px;
}

.sy-house-card{
  display:block;
  padding:36px 32px;
  border:1px solid var(--sy-border);
  background:
    linear-gradient(160deg, rgba(232,223,208,0.04) 0%, transparent 55%),
    var(--sy-surface);
  transition:border-color var(--sy-fast) var(--sy-ease), background var(--sy-fast) var(--sy-ease);
}
.sy-house-card:hover{
  border-color:var(--sy-border-strong);
  background:
    linear-gradient(160deg, rgba(225,29,46,0.06) 0%, transparent 55%),
    var(--sy-surface-2);
}
.sy-house-card:hover .sy-house-name{color:var(--sy-cream)}

.sy-house-kicker{
  display:block;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--sy-faint);
  margin-bottom:14px;
}

.sy-house-name{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.7rem,4.2vw,2.6rem);
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--sy-text);
  line-height:1.05;
  max-width:18ch;
  transition:color var(--sy-fast) var(--sy-ease);
}

.sy-house-quote{
  margin-top:18px;
  font-family:var(--font-serif);
  font-size:1.2rem;
  font-style:italic;
  color:var(--sy-cream);
  line-height:1.45;
  max-width:28ch;
}

.sy-house-meta{
  margin-top:22px;
  max-width:46ch;
  font-size:0.95rem;
  letter-spacing:0.01em;
  text-transform:none;
  color:var(--sy-dim);
  line-height:1.55;
}

.sy-house-cta{
  margin-top:20px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--sy-cream);
}

/* ---- Guns & Crayons house page ---- */
.sy-gc{
  padding:calc(var(--sy-nav-h) + 64px) 0 110px;
  min-height:78vh;
}

.sy-gc-stage{
  max-width:52rem;
}

.sy-gc-back{
  display:inline-block;
  margin-bottom:28px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--sy-dim);
}
.sy-gc-back:hover{color:var(--sy-cream)}

.sy-gc-mast{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
}

.sy-gc-lockup{
  display:block;
  width:clamp(220px, 42vw, 420px);
  height:auto;
  object-fit:contain;
  object-position:left center;
}

.sy-gc-title{
  margin:0;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--sy-dim);
  line-height:1.4;
}

.sy-gc-sub{
  margin-top:18px;
  max-width:42ch;
  color:var(--sy-dim);
  font-size:1rem;
  line-height:1.65;
}

.sy-gc-quote-panel{
  margin-top:40px;
  padding:36px 0 0;
  border-top:1px solid var(--sy-border);
}

.sy-gc-quote{
  font-family:var(--font-serif);
  font-size:clamp(1.45rem,3.2vw,2rem);
  font-style:italic;
  font-weight:400;
  color:var(--sy-cream);
  line-height:1.4;
  max-width:32ch;
}

.sy-gc-quote-panel .sy-gc-sub{
  margin-top:20px;
  max-width:46ch;
}

.sy-gc-actions{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}

/* Access gate — prove ownership → unlock mood-room */
.sy-access{
  margin-top:48px;
  padding-top:36px;
  border-top:1px solid var(--sy-border);
  max-width:36rem;
}
.sy-access-title{
  margin-top:12px;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.5rem,3vw,2rem);
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--sy-cream);
  line-height:1.1;
}
.sy-access-sub{
  margin-top:12px;
  color:var(--sy-dim);
  font-size:0.98rem;
  line-height:1.55;
  max-width:42ch;
}
.sy-access-sub.is-ok{color:var(--sy-mint, #9fe8c8)}
.sy-access-sub.is-err{color:var(--sy-red, #e11d2e)}
.sy-access-hint{
  margin-top:8px;
  color:var(--sy-faint);
  font-size:0.9rem;
}
.sy-access-hint a{
  color:var(--sy-sign-red, #e11d2e);
  font-weight:600;
}
.sy-access-hint a:hover{color:var(--sy-sign-red-hot, var(--sy-sign-red))}
.sy-access-wallet{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:24px;
}
.sy-access-addr{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--sy-dim);
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  word-break:break-all;
  text-align:left;
  max-width:100%;
}
.sy-access-addr:hover{color:var(--sy-cream, #e8dfd0)}
.sy-access-wallets{
  margin-top:12px;
}
.sy-access-inventory{
  display:inline-block;
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--sy-sign-red, #e11d2e);
  text-decoration:none;
}
.sy-access-inventory:hover{color:var(--sy-sign-red-hot, var(--sy-sign-red))}
.sy-access-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:end;
  margin-top:18px;
  max-width:28rem;
}
.sy-access-row:has(.sy-access-field[hidden]){
  grid-template-columns:auto;
}
.sy-access-field{display:flex;flex-direction:column;gap:6px}
.sy-access-field label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--sy-faint);
}
.sy-access .sy-signal-input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--sy-border);
  background:var(--sy-surface);
  color:var(--sy-text);
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.04em;
}
.sy-access .sy-signal-input:disabled{opacity:0.45}
.sy-access .sy-signal-input:focus{
  outline:none;
  border-color:var(--sy-border-strong);
}
.sy-access-room{
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid var(--sy-border);
  /* Wider than the 36rem the panel above uses: this block now holds the
     visualizer. The prose keeps its own 46ch cap below, so nothing reflows. */
  max-width:60rem;
}
/* The wrapper owns the aspect ratio; the iframe just fills it (see dist/EMBED.md).
   No src until access.js arms it on unlock — an unlocked-only media cost. */
.sy-access-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  margin-top:24px;
  border:1px solid var(--sy-border);
  background:var(--sy-void);
}
.sy-access-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.sy-access-room-title{
  margin-top:12px;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.4rem,2.8vw,1.85rem);
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--sy-cream);
}
.sy-access-room-copy{
  margin-top:12px;
  color:var(--sy-dim);
  font-size:0.98rem;
  line-height:1.55;
  max-width:46ch;
}

.sy-room-courtesy{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  place-content:center;
  padding:32px 24px;
  background:#0a0a10;
  color:var(--sy-cream);
  text-align:center;
}
.sy-room-courtesy-inner{max-width:34rem;margin:0 auto}
.sy-room-courtesy h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.2rem,2.4vw,1.6rem);
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin:0 0 1rem;
}
.sy-room-courtesy p{
  margin:0 0 .75rem;
  color:var(--sy-dim);
  font-size:0.95rem;
  line-height:1.55;
}
.sy-room-courtesy a{color:var(--sy-cream)}
.sy-room-courtesy-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:1.4rem;
}

/* Immersive takeover — applied BEFORE the iframe's src is set (js/access.js),
   so the visualizer's own min-width:700px 4K-deck check sees the true
   rendered width at load, not the inline 16:9 box's. z-index:200 clears the
   nav (100) and the sticky mobile bar (90); stays under the global film-grain
   overlay (2000, pointer-events:none) and the skip-link (300, focus-only) so
   the room still reads as part of the site rather than replacing it outright. */
.sy-access-room.is-immersive{
  position:fixed;
  inset:0;
  z-index:200;
  margin:0;
  padding:0;
  border:0;
  max-width:none;
  background:var(--sy-void);
}
.sy-access-room.is-immersive .sy-kicker,
.sy-access-room.is-immersive .sy-access-room-title,
.sy-access-room.is-immersive .sy-access-room-copy{
  display:none;
}
.sy-access-room.is-immersive .sy-access-frame{
  width:100dvw;
  height:100dvh;
  margin:0;
  border:0;
  aspect-ratio:auto;
}

html.sy-room-lock,
html.sy-room-lock body{
  overflow:hidden;
  height:100%;
}

.sy-room-exit{
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:6px;
  padding:9px 14px;
  border:1px solid rgba(232,223,208,0.35);
  background:rgba(5,5,7,0.72);
  color:var(--sy-cream);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.sy-room-exit:hover{border-color:var(--sy-border-strong)}
.sy-room-exit span{font-size:15px;line-height:1}

/* Non-blocking nudge: the room-film deck (dist/index.html, golden-locked)
   only engages when its own iframe viewport is ≥700px — a phone in portrait
   never crosses that regardless of how this page sizes the iframe. Rather
   than fight the engine's gate, tell the visitor how to clear it honestly. */
.sy-room-rotate-hint{
  position:absolute;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:none;
  margin:0;
  padding:8px 16px;
  border:1px solid rgba(232,223,208,0.25);
  background:rgba(5,5,7,0.72);
  color:var(--sy-dim);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  pointer-events:none;
  animation:sy-room-hint-fade 6s ease forwards;
}
@keyframes sy-room-hint-fade{
  0%,60%{opacity:1}
  100%{opacity:0}
}
@media (max-width:699px) and (orientation:portrait){
  .sy-access-room.is-immersive .sy-room-rotate-hint{display:block}
}

@media (max-width:720px){
  .sy-houses{padding-top:calc(var(--sy-nav-h) + 40px)}
  .sy-house-card{padding:28px 22px}
  .sy-gc{padding-top:calc(var(--sy-nav-h) + 48px)}
  .sy-gc-mast{
    align-items:flex-start;
    gap:14px;
  }
  .sy-access-row{grid-template-columns:1fr}
}