:root{
  --bg:#fbfbfd;
  --paper:#ffffff;
  --ink:#0f172a;
  --muted:#5b6475;
  --line:#e6e8ee;
  --shadow:0 18px 50px rgba(15,23,42,.08);
  --accent:#ff3d7f;
  --accent2:#2563eb;
  --max:1140px;
  --r:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.75 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(255,61,127,.10), transparent 60%),
    radial-gradient(800px 550px at 85% 10%, rgba(37,99,235,.10), transparent 60%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:auto;padding:0 18px}
.small{font-size:14px}
.muted{color:var(--muted)}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,251,253,.88);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:900; letter-spacing:.2px;
}
.logo{
  width:34px;height:34px;border-radius:12px;
  background:conic-gradient(from 180deg, var(--accent), var(--accent2), var(--accent));
  box-shadow:0 10px 25px rgba(255,61,127,.18);
}
.nav{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.nav a{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid transparent;
}
.nav a:hover{border-color:var(--line); background:rgba(255,255,255,.7)}
.cta{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, #fff, #f6f7fb);
}
.cta:hover{filter:brightness(.98)}
.menuBtn{display:none}

/* Mobile nav */
.mobileNav{display:none; padding:0 0 14px}
@media (max-width:920px){
  .menuBtn{display:inline-block}
  .nav .hideMobile{display:none}
  .mobileNav{display:block}
  .mobileNav a{display:inline-block;margin:6px 8px 0 0}
}

/* Hero */
.hero{padding:26px 0 10px}
.heroGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width:920px){ .heroGrid{grid-template-columns:1fr} }

.heroCard{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:20px;
  position:relative;
  overflow:hidden;
}
.kicker{
  display:inline-flex; gap:8px; align-items:center;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}
h1{
  margin:10px 0 10px;
  font-size:clamp(28px,4vw,48px);
  line-height:1.1;
  letter-spacing:-.02em;
}
.lead{margin:0;color:var(--muted);max-width:70ch}

.heroMedia{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.heroMedia img{
  width:100%; height:100%;
  min-height:240px;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition:transform .5s ease, filter .5s ease;
  filter:saturate(1.05) contrast(1.03);
}
.heroMedia:hover img{transform:scale(1.07); filter:saturate(1.2) contrast(1.08)}
.heroMedia::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(15,23,42,.05));
}

/* Main layout: editorial rail */
.main{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:18px;
  padding:16px 0 40px;
}
@media (max-width:920px){ .main{grid-template-columns:1fr} }

.rail{
  position:sticky; top:86px;
  align-self:start;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:14px;
}
@media (max-width:920px){ .rail{position:static} }

.rail h3{margin:6px 0 10px}
.rail a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
}
.rail a:hover{border-color:var(--line); background:#fafbff}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.pad{padding:20px}
.content p{margin:.8rem 0}
.content h2{margin:0 0 10px; font-size:26px; letter-spacing:-.01em}
.content h3{margin:18px 0 8px}

/* Buttons */
.btnRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#f6f7fb);
}
.btn.primary{
  border-color:transparent;
  color:white;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}
.btn:hover{filter:brightness(.985)}

/* Media cards (different per page) */
.mediaCard{
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--line);
  background:#f3f5fb;
  position:relative;
}
.mediaCard img{width:100%; display:block; object-fit:cover}
.caption{
  padding:12px 14px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:14px;
}

/* Page 2: diagonal cutout */
.diag{clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%)}
.diag img{
  height:260px;
  transition:transform .5s ease, filter .5s ease;
  filter:brightness(.98) contrast(1.02);
}
.diag:hover img{transform:scale(1.06); filter:brightness(1.02) contrast(1.08)}
.diag::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,61,127,.08), rgba(37,99,235,.08));
  pointer-events:none;
}

/* Page 3: polaroid tilt */
.polaroid{
  transform:rotate(1.2deg);
  box-shadow:0 22px 55px rgba(15,23,42,.16);
}
.polaroid img{height:260px}
.polaroid:hover{transform:rotate(-.6deg); transition:.25s ease}

/* Page 4: lens */
.lens img{
  height:260px;
  transform:scale(1.02);
  transition:transform .55s ease;
}
.lens:hover img{transform:scale(1.10)}
.lens::before{
  content:"";
  position:absolute; width:140px; height:140px;
  border-radius:50%;
  left:18px; top:18px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,.05) 60%, transparent 70%);
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
  opacity:.0;
  transition:.35s ease;
}
.lens:hover::before{opacity:1}

/* Contact: stripe overlay */
.stripe img{height:240px}
.stripe::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.0),
    rgba(255,255,255,.0) 10px,
    rgba(15,23,42,.03) 10px,
    rgba(15,23,42,.03) 20px
  );
  opacity:.0;
  transition:.35s ease;
}
.stripe:hover::after{opacity:1}

/* Forms */
label{display:block;margin:10px 0 6px;color:var(--muted);font-size:14px}
input,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
}
textarea{min-height:120px;resize:vertical}

/* Reveal */
.reveal{opacity:0; transform:translateY(10px); transition:.6s ease}
.reveal.show{opacity:1; transform:none}

/* Footer */
footer{
  border-top:1px solid var(--line);
  padding:18px 0 30px;
  color:var(--muted);
}