/* ══════════════════════════════════════════════
   BROMYDE — SHARED STYLES
   Linked by every page. Page-specific rules live in
   each page's own <style> block.
══════════════════════════════════════════════ */

/* ══ DARKROOM (default) ══ */
:root {
  --bg0:              #000000;
  --bg1:              #080808;
  --bg2:              #111111;
  --bg3:              #1A1A1A;
  --bg4:              #242424;
  --acc:              #CC0000;
  --acc-h:            #FF2020;
  --acc-dim:          #800000;
  --acc-deep:         #330000;
  --acc-glow:         rgba(204,0,0,0.18);
  --acc-border:       rgba(204,0,0,0.25);
  --acc-bg:           rgba(204,0,0,0.07);
  --t1:               #F2EEE8;
  --t2:               #9C9890;
  --t3:               #555250;
  --nav-scrolled:     rgba(0,0,0,0.93);
  --nav-border:       rgba(204,0,0,0.2);
  --grid-c:           rgba(204,0,0,0.045);
  --glow-c:           rgba(100,0,0,0.18);
  --card-bg:          #111111;
  --card-hover:       #1A1A1A;
  --card-border:      #1C1C1C;
  --card-line:        #CC0000;
  --tog-track:        rgba(255,255,255,0.07);
  --tog-pill:         rgba(180,0,0,0.85);
  --tog-pill-txt:     #F2EEE8;
  --tog-txt:          #9C9890;
  --tog-icon-active:  #F2EEE8;
  --sec-alt:          #080808;
  --sec-border:       rgba(204,0,0,0.1);
  --inp-bg:           #111111;
  --inp-border:       rgba(255,255,255,0.07);
  --inp-focus:        #800000;
  --inp-shadow:       rgba(128,0,0,0.2);
  --s-card-bg:        rgba(10,20,45,0.55);
  --s-card-border:    rgba(59,130,246,0.22);
  --d-card-bg:        rgba(30,4,4,0.55);
  --d-card-border:    rgba(204,0,0,0.3);
  --grain:            0.038;
  --logo-dot:         #CC0000;
  --logo-dot-glow:    rgba(204,0,0,0.5);
  --ff-disp:          'Cormorant', Georgia, serif;
  --ff-body:          'Source Sans 3', sans-serif;
  --ff-mono:          'Share Tech Mono', monospace;
}

/* ══ STUDIO OVERRIDES ══ */
html[data-mode="studio"] {
  --bg0:              #FFFFFF;
  --bg1:              #F5F5F7;
  --bg2:              #FAFAFA;
  --bg3:              #F0F0F2;
  --bg4:              #E8E8EA;
  --acc:              #007AFF;
  --acc-h:            #0066DD;
  --acc-dim:          #3B8EF0;
  --acc-deep:         #E3F0FF;
  --acc-glow:         rgba(0,122,255,0.16);
  --acc-border:       rgba(0,122,255,0.22);
  --acc-bg:           rgba(0,122,255,0.06);
  --t1:               #1C1C1E;
  --t2:               #636366;
  --t3:               #AEAEB2;
  --nav-scrolled:     rgba(250,250,252,0.93);
  --nav-border:       rgba(0,0,0,0.1);
  --grid-c:           rgba(0,122,255,0.035);
  --glow-c:           rgba(0,100,220,0.06);
  --card-bg:          #FFFFFF;
  --card-hover:       #F5F5F7;
  --card-border:      #E8E8EA;
  --card-line:        #007AFF;
  --tog-track:        rgba(0,0,0,0.07);
  --tog-pill:         #FFFFFF;
  --tog-pill-txt:     #1C1C1E;
  --tog-txt:          #636366;
  --tog-icon-active:  #007AFF;
  --sec-alt:          #F5F5F7;
  --sec-border:       rgba(0,0,0,0.07);
  --inp-bg:           #FFFFFF;
  --inp-border:       rgba(0,0,0,0.12);
  --inp-focus:        #007AFF;
  --inp-shadow:       rgba(0,122,255,0.16);
  --s-card-bg:        rgba(230,243,255,0.9);
  --s-card-border:    rgba(0,122,255,0.2);
  --d-card-bg:        rgba(255,235,235,0.6);
  --d-card-border:    rgba(200,0,0,0.15);
  --grain:            0;
  --logo-dot:         #007AFF;
  --logo-dot-glow:    rgba(0,122,255,0.5);
}

/* ══ GLOBAL TRANSITIONS ══ */
*, *::before, *::after {
  margin:0; padding:0; box-sizing:border-box;
  transition:
    background-color 0.38s ease,
    border-color 0.38s ease,
    color 0.38s ease,
    box-shadow 0.38s ease,
    opacity 0.38s ease;
}
html { scroll-behavior:smooth; }

body {
  background: var(--bg0);
  color: var(--t1);
  font-family: var(--ff-body);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Grain — only darkroom */
body::after {
  content:'';
  position:fixed; inset:0; z-index:9990;
  pointer-events:none;
  opacity: var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px;
}

/* ══ NAV ══ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:18px 48px;
}
nav.scrolled {
  background: var(--nav-scrolled);
  border-bottom:1px solid var(--nav-border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.nav-logo {
  font-family:var(--ff-disp); font-size:1.45rem; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--t1); text-decoration:none;
  display:flex; align-items:center; gap:10px;
  justify-self:start;
}
.nav-logo-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--logo-dot);
  box-shadow:0 0 10px var(--logo-dot), 0 0 22px var(--logo-dot-glow);
  flex-shrink:0;
  animation:dot-pulse 3s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.7; transform:scale(1.25); }
}

/* ── Mode Toggle (centred, mirrors the iOS segmented control) ── */
.mode-toggle {
  display:flex; align-items:center;
  background:var(--tog-track);
  border-radius:10px; padding:3px; gap:2px;
  justify-self:center;
}
.tog-btn {
  display:flex; align-items:center; gap:7px;
  padding:7px 20px; border-radius:8px;
  border:none; background:transparent;
  color:var(--tog-txt); font-family:var(--ff-body);
  font-size:0.82rem; font-weight:400; letter-spacing:0.02em;
  cursor:pointer;
}
.tog-btn svg { flex-shrink:0; width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; }
.tog-btn.active {
  background:var(--tog-pill);
  color:var(--tog-pill-txt);
  font-weight:600;
  box-shadow:0 1px 5px rgba(0,0,0,0.18);
}
html[data-mode="studio"] .tog-btn.active svg { stroke:var(--tog-icon-active); }

.nav-right {
  display:flex; align-items:center; gap:28px;
  justify-self:end;
}
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a {
  font-size:0.78rem; font-weight:300;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--t2); text-decoration:none;
}
.nav-links a:hover { color:var(--t1); }
.nav-cta {
  font-size:0.78rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--bg0); background:var(--acc);
  text-decoration:none; padding:9px 22px; border-radius:2px;
}
.nav-cta:hover { background:var(--acc-h); }

/* ══ HERO GRID (decorative, reused on page headers) ══ */
.hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-c) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-c) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
}

/* ══ SECTION BASE + LABEL/TITLE ══ */
.section { padding:120px 60px; }
.container { max-width:1120px; margin:0 auto; }
.s-label {
  display:inline-block; font-family:var(--ff-mono);
  font-size:0.68rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--acc); margin-bottom:18px;
}
.s-title {
  font-family:var(--ff-disp);
  font-size:clamp(2.2rem,4.5vw,3.8rem);
  font-weight:300; line-height:1.08; color:var(--t1);
}
.s-title em { font-style:italic; color:var(--t2); }

/* ══ BUTTONS ══ */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 34px;
  background:var(--acc); color:var(--bg0);
  font-size:0.82rem; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; border-radius:2px;
}
.btn-primary:hover { background:var(--acc-h); }
html[data-mode="studio"] .btn-primary { color:#FFFFFF; }
.btn-secondary {
  display:inline-flex; align-items:center;
  padding:14px 34px;
  background:transparent; color:var(--t2);
  font-size:0.82rem; font-weight:300;
  letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; border-radius:2px;
  border:1px solid var(--card-border);
}
.btn-secondary:hover { color:var(--t1); }

/* ══ FOOTER ══ */
footer {
  padding:36px 60px;
  border-top:1px solid var(--sec-border);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px;
  background:var(--bg0);
}
.f-logo {
  font-family:var(--ff-disp); font-size:1rem;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--t3);
}
.f-copy { font-family:var(--ff-mono); font-size:0.62rem; letter-spacing:0.14em; color:var(--t3); }
.f-links { display:flex; gap:28px; list-style:none; }
.f-links a {
  font-family:var(--ff-mono); font-size:0.62rem;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--t3); text-decoration:none;
}
.f-links a:hover { color:var(--acc); }

/* ══ REVEAL ══ */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity 0.75s ease, transform 0.75s ease,
    background-color 0.38s ease, border-color 0.38s ease, color 0.38s ease;
}
.reveal.visible { opacity:1; transform:none; }

/* ══ KEYFRAMES ══ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════════════
   DETAIL PAGES (shared components)
══════════════════════════════════════════════ */

/* Page header */
.detail-hero {
  padding:180px 60px 90px;
  position:relative; overflow:hidden;
  text-align:center;
}
.detail-hero .container { position:relative; z-index:1; }
.detail-title {
  font-family:var(--ff-disp);
  font-size:clamp(3rem,8vw,6rem);
  font-weight:300; letter-spacing:0.06em; line-height:0.95;
  color:var(--t1); margin-bottom:8px;
}
.detail-title em { font-style:italic; color:var(--acc); }
.detail-lead {
  font-size:1.1rem; font-weight:300; color:var(--t2);
  max-width:600px; margin:24px auto 0; line-height:1.7;
}
.detail-actions { display:flex; gap:16px; justify-content:center; margin-top:40px; }
.back-link {
  display:flex; width:max-content; margin:0 auto 28px;
  align-items:center; gap:8px;
  font-family:var(--ff-mono); font-size:0.66rem;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--t3); text-decoration:none;
}
.back-link::before { content:'←'; }
.back-link:hover { color:var(--acc); }

/* Coming-soon badge */
.coming-soon {
  display:inline-block; font-family:var(--ff-mono);
  font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--acc); border:1px solid var(--acc-border);
  background:var(--acc-bg);
  padding:6px 14px; border-radius:20px; margin-bottom:24px;
}

/* Alternating feature rows */
.feature {
  display:grid; grid-template-columns:1fr 1fr;
  gap:72px; align-items:center;
  padding:80px 0; border-top:1px solid var(--sec-border);
}
.feature:first-of-type { border-top:none; }
.feature.reverse .feature-media { order:-1; }
.feature-label {
  font-family:var(--ff-mono); font-size:0.66rem;
  letter-spacing:0.26em; text-transform:uppercase;
  color:var(--acc); margin-bottom:16px; display:block;
}
.feature-title {
  font-family:var(--ff-disp); font-size:clamp(1.8rem,3.2vw,2.6rem);
  font-weight:400; line-height:1.1; color:var(--t1); margin-bottom:18px;
}
.feature-title em { font-style:italic; color:var(--t2); }
.feature-body p {
  font-size:0.98rem; font-weight:300; color:var(--t2);
  line-height:1.8; margin-bottom:14px;
}
.feature-body p:last-child { margin-bottom:0; }

/* Phone frame around a screenshot */
.phone {
  position:relative; margin:0 auto;
  width:min(280px,80%);
  border-radius:34px; padding:10px;
  background:var(--bg3);
  border:1px solid var(--card-border);
  box-shadow:0 30px 60px rgba(0,0,0,0.45);
}
html[data-mode="studio"] .phone { box-shadow:0 24px 50px rgba(0,0,0,0.14); }
.phone img { display:block; width:100%; border-radius:26px; }

/* Mode-aware screenshot swap: show the shot matching the active mode.
   The html[data-mode] prefix keeps these ahead of `.phone img`. */
html[data-mode] .shot-studio,
html[data-mode] .shot-darkroom { display:none; }
html[data-mode="studio"]  .shot-studio  { display:block; }
html[data-mode="darkroom"] .shot-darkroom { display:block; }

/* Click-to-play video clip */
.clip {
  position:relative; margin:0 auto;
  width:min(300px,82%);
  border-radius:34px; overflow:hidden;
  background:var(--bg3);
  border:1px solid var(--card-border);
  box-shadow:0 30px 60px rgba(0,0,0,0.45);
  cursor:pointer; padding:0; display:block;
}
html[data-mode="studio"] .clip { box-shadow:0 24px 50px rgba(0,0,0,0.14); }
.clip video, .clip .clip-poster { display:block; width:100%; }
.clip .clip-poster {
  aspect-ratio:9/19.5; object-fit:cover;
  background:var(--bg2);
}
.clip-play {
  position:absolute; inset:0; margin:auto;
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--acc); color:#fff; border:none; cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,0.4);
  transition:opacity 0.25s ease, transform 0.25s ease, background-color 0.38s ease;
}
.clip-play::after { content:'▶'; font-size:1.3rem; margin-left:3px; }
.clip-play:hover { transform:scale(1.08); }
.clip.playing .clip-play { opacity:0; pointer-events:none; }
.clip-caption {
  display:block; text-align:center; margin-top:16px;
  font-family:var(--ff-mono); font-size:0.62rem;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--t3);
}

/* Placeholder media (for screens/clips not yet supplied) */
.media-placeholder {
  position:relative; margin:0 auto;
  width:min(280px,80%); aspect-ratio:9/19.5;
  border-radius:34px;
  background:
    repeating-linear-gradient(45deg, var(--bg2) 0 14px, var(--bg1) 14px 28px);
  border:1px dashed var(--card-border);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px; gap:10px;
}
.media-placeholder .mp-icon {
  font-family:var(--ff-disp); font-size:2.4rem; color:var(--acc); line-height:1;
}
.media-placeholder .mp-text {
  font-family:var(--ff-mono); font-size:0.6rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--t3); line-height:1.7;
}

/* Small note blocks */
.detail-note {
  font-family:var(--ff-mono); font-size:0.62rem; letter-spacing:0.06em;
  color:var(--t3); text-align:center; line-height:1.9; margin-top:24px;
}

/* ══ RESPONSIVE (shared) ══ */
@media (max-width:980px) {
  nav { padding:16px 20px; grid-template-columns:1fr auto; }
  .nav-right { display:none; }
  .section { padding:80px 24px; }
  .detail-hero { padding:140px 24px 70px; }
  .feature { grid-template-columns:1fr; gap:40px; padding:60px 0; }
  .feature.reverse .feature-media { order:0; }
  footer { flex-direction:column; align-items:flex-start; }
}
@media (max-width:600px) {
  .tog-btn { padding:7px 14px; font-size:0.75rem; }
}