*{box-sizing:border-box}
:root{
  --cream:#fbf7ec;
  --paper:#fffdf7;
  --ink:#151515;
  --muted:#5f574b;
  --red:#c00000;
  --yellow:#ffd51f;
  --line:#eadfca;
  --shadow:0 24px 70px rgba(45,31,5,.13);
  --dark:#101827;
}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--cream);color:var(--ink)}
.top-nav{height:74px;position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw}
.brand{font-weight:950;font-size:25px;text-decoration:none;color:var(--ink);letter-spacing:-.02em}
.brand span{margin-left:6px}
.nav-links{display:flex;gap:24px}
.nav-links a{text-decoration:none;color:var(--ink);font-weight:850}
.hero{min-height:calc(100vh - 74px);display:flex;align-items:center;justify-content:center;text-align:center;padding:70px 5vw;background:
radial-gradient(circle at 75% 10%, rgba(255,213,31,.9), transparent 34%),
linear-gradient(145deg,#fff7d8 0%,#fbf7ec 52%,#fff 100%)}
.hero-inner{max-width:1120px}
.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:13px;font-weight:950;color:var(--red);margin:0 0 14px}
h1{font-size:clamp(48px,8vw,92px);line-height:.94;letter-spacing:-.06em;margin:0 0 24px}
.lead{font-size:clamp(19px,2.3vw,25px);color:#3d3529;margin:0 auto 40px;max-width:790px;line-height:1.45}
.choice-row{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:26px;margin-top:18px}
.choice{min-height:235px;border-radius:34px;text-decoration:none;text-align:left;padding:34px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease}
.choice:hover{transform:translateY(-6px);box-shadow:0 34px 90px rgba(45,31,5,.19)}
.choice.commenter{background:linear-gradient(145deg,#fff,#ffe679);color:#121212;border:1px solid #e0bf19}
.choice.publisher{background:linear-gradient(145deg,#111827,#2c155c 70%,#4c1d95);color:white;border:1px solid rgba(255,255,255,.15)}
.choice-label{font-size:32px;font-weight:950;letter-spacing:-.04em;margin-bottom:12px}
.choice-text{font-size:18px;line-height:1.45;color:rgba(17,17,17,.72)}
.publisher .choice-text{color:rgba(255,255,255,.78)}
.interface-section{padding:82px 5vw}
.publisher-bg{background:#fffaf0}
.section-heading{max-width:890px;margin-bottom:32px}
.section-heading h2{font-size:clamp(38px,5vw,64px);line-height:1;letter-spacing:-.05em;margin:0 0 16px}
.section-heading p:not(.eyebrow){font-size:20px;line-height:1.55;color:var(--muted);margin:0}
.screen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.screen-card{appearance:none;border:1px solid var(--line);background:white;border-radius:28px;overflow:hidden;text-align:left;padding:0;cursor:pointer;box-shadow:0 17px 50px rgba(45,31,5,.08);transition:transform .18s ease, box-shadow .18s ease}
.screen-card:hover{transform:translateY(-5px);box-shadow:0 27px 70px rgba(45,31,5,.15)}
.shot{height:245px;background:#f4ead7;border-bottom:1px solid var(--line);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block;transition:transform .35s ease}
.screen-card:hover .shot img{transform:scale(1.035)}
.card-copy{padding:22px}
.pill{display:inline-block;background:#fff4c0;border:1px solid #f0d64d;color:#6b5700;border-radius:999px;padding:6px 10px;font-size:12px;text-transform:uppercase;font-weight:950;letter-spacing:.08em;margin-bottom:12px}
.card-copy h3{font-size:25px;margin:0 0 8px;letter-spacing:-.03em}
.card-copy p{font-size:16px;color:var(--muted);line-height:1.45;margin:0}
.viewer{position:fixed;inset:0;z-index:100;display:none}
.viewer.open{display:block}
.viewer-backdrop{position:absolute;inset:0;background:rgba(8,10,18,.75);backdrop-filter:blur(10px)}
.viewer-panel{position:absolute;inset:22px;background:#fff;border-radius:28px;display:grid;grid-template-rows:auto 1fr auto;box-shadow:0 40px 130px rgba(0,0,0,.45);overflow:hidden}
.viewer-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:22px 26px;border-bottom:1px solid #e8e8e8;background:#fffdf8}
.viewer-group{margin:0 0 4px;color:var(--red);text-transform:uppercase;letter-spacing:.13em;font-weight:950;font-size:12px}
.viewer-top h2{font-size:30px;margin:0 0 4px;letter-spacing:-.04em}
.viewer-top p:last-child{margin:0;color:#6b6258;line-height:1.35}
.close-btn{width:46px;height:46px;border-radius:50%;border:1px solid #ddd;background:#111;color:white;font-size:30px;line-height:1;cursor:pointer}
.viewer-image-wrap{overflow:auto;background:#f4f1eb;padding:18px;display:flex;align-items:flex-start;justify-content:center}
.viewer-image-wrap img{width:min(1500px,100%);height:auto;border-radius:16px;box-shadow:0 16px 60px rgba(0,0,0,.18);background:white}
.viewer-controls{display:flex;align-items:center;justify-content:center;gap:18px;padding:16px;border-top:1px solid #e8e8e8;background:white}
.viewer-controls button{border:0;background:#111;color:white;border-radius:999px;padding:13px 19px;font-weight:900;cursor:pointer}
#counter{font-weight:900;color:#6b6258;min-width:90px;text-align:center}
body.viewer-lock{overflow:hidden}
@media(max-width:820px){
  .top-nav{height:auto;min-height:68px;padding:14px 5vw;align-items:flex-start;flex-direction:column;gap:10px}
  .choice-row{grid-template-columns:1fr}
  .choice{min-height:190px}
  .interface-section{padding:58px 5vw}
  .viewer-panel{inset:8px;border-radius:18px}
  .viewer-top{padding:16px;flex-direction:row}
  .viewer-top h2{font-size:24px}
  .viewer-top p:last-child{display:none}
  .viewer-image-wrap{padding:8px}
}