/* ════════════════════════════════════════════════════════════════
   Page-level compositions — built on tokens/components in style.css
════════════════════════════════════════════════════════════════ */

/* ── Placeholder media (used until real art/video ships) ────────── */
[data-placeholder]{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg, rgba(216,105,112,.05) 0 2px, transparent 2px 14px),
    var(--bg-elevated);
  border:1.5px dashed var(--surface-line);
  border-radius:var(--radius-md);
  color:var(--text-muted);
  text-align:center;
  overflow:hidden;
}
[data-placeholder]::before{
  content: attr(data-placeholder);
  font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:0 18px; max-width:80%;
}
[data-placeholder]::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120% 100% at 50% 0%, rgba(216,105,112,.08), transparent 60%);
}

/* ════════════════════════════════════════════════════════════════
   LANDING — hero
════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  display:grid; grid-template-columns:1fr .82fr;
  align-items:center;
  gap:24px;
  max-width:var(--container);
  margin-inline:auto;
  padding:clamp(190px,10vw,230px) var(--edge) 20px;
  min-height:calc(100svh - 86px);
}
.hero-kicker{
  font-size:.92rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--pink-300); margin-bottom:20px;
}
.hero-title{
  font-size:var(--fs-display);
  color:var(--text-hi);
  margin-bottom:22px;
}
.hero-title em{ font-style:normal; color:var(--pink-300); }
.hero-lead{
  font-size:var(--fs-lead);
  max-width:46ch;
  color:var(--text-lo);
  margin-bottom:30px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-art{
  position:relative;
  display:flex; justify-content:center;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));
}
.hero-art img{
  width:100%; max-width:440px;
  animation: hero-float 7s var(--ease-out) infinite alternate;
}
@keyframes hero-float{ from{ transform:translateY(0);} to{ transform:translateY(-14px);} }

/* ── Lore ─────────────────────────────────────────────────────── */
.lore{ padding-block:56px; max-width:900px; }
.lore h2{ font-size:var(--fs-h2); margin-bottom:16px; }
.lore p{ max-width:70ch; font-size:1.18rem; color:var(--text-lo); }
.lore-aside{
  margin-top:18px; padding-left:18px;
  border-left:2px solid var(--pink-900);
  font-size:1.05rem; color:var(--text-muted);
}
.lore-aside em{ font-style:normal; color:var(--pink-300); }

/* ── Studio log — the landing page's news feed ───────────────────── */
.studio-log{ padding-block:56px 20px; }
.log-head{ margin-bottom:30px; }
.log-head h2{ font-size:var(--fs-h2); margin-bottom:6px; }
.log-sub{ color:var(--text-muted); font-size:1.05rem; }
.log-note{ opacity:.75; }

.log-list{
  position:relative;
  display:flex; flex-direction:column;
  border-top:1px solid rgba(137,107,96,.25);
}
.log-post{
  position:relative;
  display:grid; grid-template-columns:150px 1fr;
  gap:28px;
  padding:22px 0;
  border-bottom:1px solid rgba(137,107,96,.25);
}
.log-post::before{
  content:"";
  position:absolute; left:142px; top:28px;
  width:9px; height:9px; border-radius:50%;
  background:var(--pink-500);
  box-shadow:0 0 0 4px rgba(216,105,112,.16);
}
.log-meta{ display:flex; flex-direction:column; gap:8px; }
.log-meta time{ font-size:.9rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.log-tag{
  align-self:flex-start;
  font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
  color:var(--pink-200); border:1px solid rgba(216,105,112,.35); background:rgba(216,105,112,.08);
}
.log-body h3{ font-size:1.55rem; margin-bottom:8px; font-family:var(--font-body); font-weight:700; letter-spacing:0; }
.log-body p{ color:var(--text-lo); max-width:62ch; font-size:1.1rem; }

@media (max-width:640px){
  .log-post{ grid-template-columns:1fr; gap:8px; }
  .log-post::before{ display:none; }
}

/* ── Peek shelf ───────────────────────────────────────────────── */
.peek{ padding-block:40px 20px; }
.peek h2{ font-size:var(--fs-h2); margin-bottom:6px; }
.peek-sub{ color:var(--text-muted); margin-bottom:34px; }
.peek-shelf{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:220px;
  gap:16px;
}
.peek-tile{
  position:relative;
  grid-row:span 1;
  border-radius:var(--radius-lg);
  overflow:hidden;
  text-decoration:none;
  isolation:isolate;
  border:1px solid rgba(137,107,96,.3);
  transition:transform .4s var(--ease-out), border-color .3s;
}
.peek-tile--wide{ grid-column:span 2; grid-row:span 2; }
.peek-tile .peek-tile-media{
  position:absolute; inset:0; border-radius:0; border:none;
  align-items:flex-start;
  padding-top:26px;
}
.peek-tile:hover{ transform:translateY(-6px); border-color:var(--pink-500); }
.peek-tile-label{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:20px;
  background:linear-gradient(0deg, rgba(20,15,13,.92), transparent);
  display:flex; flex-direction:column; gap:4px;
}
.peek-tile-name{ font-family:var(--font-display); font-size:1.7rem; color:var(--text-hi); }
.peek-tile-desc{ font-size:1rem; color:var(--text-lo); max-width:38ch; }

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; text-align:left; padding-top:96px; min-height:auto; }
  .hero-art{ order:-1; max-width:280px; margin-inline:auto; }
  .page-intro{ padding-top:100px; }
  .patreon-hero{ padding-top:100px; }
  .peek-shelf{ grid-template-columns:1fr 1fr; grid-auto-rows:170px; }
  .peek-tile--wide{ grid-column:span 2; grid-row:span 1; }
}
@media (max-width:560px){
  .peek-shelf{ grid-template-columns:1fr; }
  .peek-tile--wide{ grid-column:span 1; }
}

/* ════════════════════════════════════════════════════════════════
   INNER PAGES — shared intro block
════════════════════════════════════════════════════════════════ */
.page-intro{
  max-width:var(--container); margin-inline:auto;
  padding:clamp(190px,10vw,230px) var(--edge) 8px;
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-end;
}
.page-intro h1{ font-size:var(--fs-h1); max-width:14ch; }
.page-intro p{ max-width:46ch; color:var(--text-lo); font-size:1.2rem; }
.page-section{ max-width:var(--container); margin-inline:auto; padding:36px var(--edge) 0; }

/* ════════════════════════════════════════════════════════════════
   MODELS — alternating roster
════════════════════════════════════════════════════════════════ */
.roster{ display:flex; flex-direction:column; gap:64px; padding-block:56px 48px; }
.model-row{
  display:grid; grid-template-columns:340px 1fr;
  gap:40px; align-items:center;
}
.model-row:nth-child(even){ grid-template-columns:1fr 340px; }
.model-row:nth-child(even) .model-portrait{ order:2; }
.model-portrait{
  aspect-ratio:3/4; border-radius:var(--radius-lg);
  transform:rotate(-2deg);
  transition:transform .35s var(--ease-out);
}
.model-row:nth-child(even) .model-portrait{ transform:rotate(2deg); }
.model-row:hover .model-portrait{ transform:rotate(0deg) scale(1.02); }
.model-info{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.model-row:nth-child(even) .model-info{ align-items:flex-end; text-align:right; }
.model-tag{
  font-family:var(--font-pixel); font-size:.62rem; letter-spacing:.03em;
  color:var(--pink-300); background:rgba(216,105,112,.12);
  border:1px solid rgba(216,105,112,.35); border-radius:6px; padding:6px 11px;
}
.model-name{ font-size:2.8rem; }
.model-desc{ color:var(--text-lo); max-width:44ch; font-size:1.12rem; }
.model-links{ display:flex; gap:10px; margin-top:6px; }

@media (max-width:760px){
  .model-row, .model-row:nth-child(even){ grid-template-columns:1fr; text-align:left !important; }
  .model-row .model-portrait, .model-row:nth-child(even) .model-portrait{ order:0; max-width:280px; margin-inline:auto; transform:none; }
  .model-info, .model-row:nth-child(even) .model-info{ align-items:flex-start !important; text-align:left !important; }
}

/* ════════════════════════════════════════════════════════════════
   GAMES — HUD-accented panels
════════════════════════════════════════════════════════════════ */
.game-list{ display:flex; flex-direction:column; gap:28px; padding-block:48px 48px; }
.game-panel{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:0;
  background:var(--bg-elevated);
  border:1px solid rgba(137,107,96,.28);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.game-embed{ aspect-ratio:16/10; border-radius:0; border:none; border-right:1px solid rgba(137,107,96,.28); }
.game-embed iframe{ width:100%; height:100%; border:none; }
.game-body{ padding:32px; display:flex; flex-direction:column; gap:12px; }
.game-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.game-tag{
  font-family:var(--font-pixel); font-size:.6rem; letter-spacing:.03em;
  padding:7px 11px; border-radius:5px;
  background:var(--brown-800); color:var(--pink-200);
  border:1px solid rgba(216,105,112,.3);
}
.game-title{ font-size:2.3rem; }
.game-desc{ color:var(--text-lo); font-size:1.12rem; }
.game-actions{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }

@media (max-width:800px){
  .game-panel{ grid-template-columns:1fr; }
  .game-embed{ border-right:none; border-bottom:1px solid rgba(137,107,96,.28); }
}

/* ════════════════════════════════════════════════════════════════
   ANIMATIONS — teaser reel, asymmetric grid
════════════════════════════════════════════════════════════════ */
.reel-grid{
  display:grid; grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:150px;
  gap:14px;
  padding-block:48px 48px;
}
.reel-tile{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  grid-column:span 2; grid-row:span 1;
  align-items:flex-end !important; justify-content:flex-start !important;
  padding:14px;
}
.reel-tile::before{ text-align:left; max-width:78%; font-size:.78rem; opacity:.9; padding:0; font-weight:600; }
.reel-tile--a{ grid-column:span 4; grid-row:span 2; }
.reel-tile--b{ grid-column:span 2; grid-row:span 2; }
.reel-tile .play{
  position:absolute; inset:0; margin:auto; width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(36,27,24,.72); border:1.5px solid var(--pink-300);
  color:var(--pink-200); font-size:1.1rem;
  z-index:2;
}
@media (max-width:760px){
  .reel-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .reel-tile, .reel-tile--a, .reel-tile--b{ grid-column:span 1; grid-row:span 1; }
}

/* ════════════════════════════════════════════════════════════════
   PATREON — pitch, tiers, contact
════════════════════════════════════════════════════════════════ */
.patreon-hero{
  max-width:var(--container); margin-inline:auto;
  padding:clamp(190px,10vw,230px) var(--edge) 20px;
  text-align:center;
}
.patreon-hero h1{ font-size:var(--fs-display); margin-bottom:18px; }
.patreon-hero p{ max-width:56ch; margin-inline:auto; color:var(--text-lo); font-size:var(--fs-lead); margin-bottom:28px; }

.tiers{
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
  max-width:920px; margin-inline:auto;
  padding-block:44px 60px;
}
.tier{
  position:relative;
  background:var(--bg-elevated);
  border:1.5px dashed var(--surface-line);
  border-radius:var(--radius-lg);
  padding:38px 32px 32px;
  display:flex; flex-direction:column; gap:16px;
  transform:rotate(var(--tilt,0deg));
}
.tier:nth-child(1){ --tilt:-1deg; }
.tier:nth-child(2){ --tilt:1deg; }
.tier--feature{
  border-style:solid; border-color:var(--pink-500);
  background:linear-gradient(180deg, rgba(216,105,112,.12), var(--bg-elevated) 60%);
}
.tier-icon{
  width:210px; height:auto;
  align-self:center;
  display:block;
  margin-inline:auto;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.45));
  margin-bottom:6px;
}
.tier-badge{
  align-self:flex-start;
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted);
}
.tier--feature .tier-badge{ color:var(--pink-300); }
.tier-name{ font-size:2.1rem; }
.tier-price{ font-family:var(--font-body); font-size:2.1rem; font-weight:700; color:var(--pink-200); font-variant-numeric:tabular-nums; }
.tier-price span{ font-size:.95rem; color:var(--text-muted); font-weight:400; }
.tier-perks{ display:flex; flex-direction:column; gap:10px; font-size:1.08rem; color:var(--text-lo); }
.tier-perks li{ display:flex; gap:10px; }
.tier-perks li.is-headline{ color:var(--pink-200); font-weight:600; }
.tier-note{ font-size:.78rem; color:var(--text-muted); margin-top:auto; padding-top:12px; }

@media (max-width:820px){
  .tiers{ grid-template-columns:1fr; }
  .tier{ transform:none; }
}