
:root{
  --bg:#080909;
  --panel:#111212;
  --ink:#f2eee5;
  --muted:#aaa59d;
  --red:#c92b27;
  --line:#2e2c29;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:
  radial-gradient(circle at 50% -10%, #27201b 0, #111 32%, #080909 62%);
  color:var(--ink);font-family:Arial,Helvetica,sans-serif;min-height:100%}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.shell{max-width:1180px;margin:0 auto;padding:60px 28px 80px;display:grid;grid-template-columns:.84fr 1.16fr;gap:64px;align-items:start}
.intro{position:sticky;top:40px;padding:18px 0}
.logo{width:96px;max-width:40%;display:block;margin:0 0 22px}
.eyebrow{letter-spacing:.48em;font-size:12px;color:#d7d0c5;margin:0 0 22px}
h1{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:clamp(48px,6.6vw,92px);line-height:.87;margin:0;letter-spacing:-.045em}
h1 span{color:var(--red)}
.sub{font-family:Georgia,"Times New Roman",serif;text-transform:uppercase;letter-spacing:.42em;font-size:13px;margin:24px 0 0}
.rule{height:2px;background:var(--red);width:80px;margin:42px 0}
h2{font-family:Georgia,"Times New Roman",serif;font-size:30px;line-height:1.08;margin:0 0 16px}
.lede{font-size:17px;line-height:1.7;color:#c9c3b9;max-width:500px}
.agents-link{display:block;margin:26px 0 0;padding:16px 18px;border:1px solid var(--line);text-decoration:none;color:#c9c3b9;font-size:14px;line-height:1.5;transition:.18s;max-width:500px}
.agents-link span{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--red);text-transform:uppercase;margin-bottom:4px}
.agents-link:hover{border-color:#81796e;color:var(--ink)}
footer a{color:#8d877e;text-decoration:none}
footer a:hover{color:var(--ink)}
/* Agents page */
.agents{max-width:960px;margin:0 auto;padding:60px 28px 80px}
.agents .intro{position:static;max-width:640px}
.agents h1{font-size:clamp(40px,6vw,76px)}
.awards-band{background:var(--red);margin:44px -28px 0;padding:36px 28px 28px}
.awards{display:grid;grid-template-columns:1fr 1fr;gap:28px 36px;max-width:960px;margin:0 auto}
.award{text-align:center}
.award img{display:block;width:170px;height:auto;margin:0 auto 10px}
.award h2{font-size:17px;line-height:1.35;margin:0 0 8px;color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:700}
.award p{margin:0 auto;color:#ffd9d2;line-height:1.55;font-size:13px;max-width:400px}
.verified{text-align:center;color:#fff;font-size:13px;letter-spacing:.04em;margin:30px 0 0}
.before{margin:52px 0 0}
.before h2,.terms h2{font-family:Georgia,"Times New Roman",serif;font-size:24px;margin:0 0 18px}
.before-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.before-grid div{border:1px solid var(--line);padding:18px}
.before-grid h3{font-family:Georgia,"Times New Roman",serif;font-size:19px;margin:0 0 8px;color:var(--red)}
.before-grid p{margin:0;color:#c9c3b9;font-size:14px;line-height:1.55}
.agents .cta{margin:44px 0 0}
.agents .cta p{color:#8d877e;font-size:13px;margin:12px 0 0}
.terms{margin:56px 0 0;border-top:1px solid var(--line);padding-top:30px}
.terms h2{font-size:18px;letter-spacing:.02em}
.terms p{color:#aaa59d;font-size:13px;line-height:1.65;margin:0 0 12px}
.terms p strong{color:var(--ink)}
.terms .questions{color:var(--ink);margin-top:20px}
@media (max-width:850px){ .agents{padding:28px 16px 48px} .awards-band{margin:28px -16px 0;padding:28px 16px 20px} .awards{grid-template-columns:1fr;gap:26px} .before-grid{grid-template-columns:1fr} }
.generator{min-width:0}
form,.result,.loading,.error{background:rgba(17,18,18,.92);border:1px solid var(--line);padding:28px;box-shadow:0 28px 80px rgba(0,0,0,.28)}
label{display:block;font-size:12px;font-weight:700;letter-spacing:.18em;margin-bottom:10px}
label span{font-weight:400;color:#777;letter-spacing:.06em}
textarea,input,select{width:100%;background:#090a0a;border:1px solid #383532;color:var(--ink);font:inherit;border-radius:0;outline:none;transition:border .2s}
select{height:54px;padding:0 14px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23aaa59d' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
select:focus{border-color:#81796e}
textarea{min-height:255px;resize:vertical;padding:18px;line-height:1.6;font-size:18px}
input{height:54px;padding:0 14px}
textarea:focus,input:focus{border-color:#81796e}
.count{font-size:12px;color:#777;text-align:right;margin:8px 0 0}
.credit-label{margin-top:22px}
.starters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.starters-label{font-size:10px;font-weight:700;letter-spacing:.2em;color:#777;margin-right:4px}
.starter{margin:0;padding:8px 12px;font-size:12px;font-weight:500;letter-spacing:.02em;background:transparent;border:1px solid #383532;color:#c9c3b9;width:auto;text-align:left}
.starter:hover{border-color:#81796e;color:var(--ink);transform:none;filter:none}
.hint{font-size:12px;color:#8d877e;margin:12px 0 0;line-height:1.5}
.reroll{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 22px}
.reroll button{margin:0;width:auto}
.reroll button[disabled]{opacity:.5;cursor:wait}
.reroll-note{flex-basis:100%;font-size:12px;color:#8d877e;margin:4px 0 0;line-height:1.5}
.reroll-note.busy{color:#e9c9c5}
button{appearance:none;border:1px solid var(--red);background:var(--red);color:white;font-weight:700;letter-spacing:.14em;padding:18px 22px;cursor:pointer;margin-top:24px;transition:.18s}
button:hover{transform:translateY(-1px);filter:brightness(1.08)}
button:disabled{opacity:.45;cursor:wait;transform:none}
.fineprint{font-size:11px;line-height:1.55;color:#716d67;margin:14px 0 0}
.result{padding:18px}
.poster-frame{background:#050505;border:1px solid #2d2a27}
.poster-frame img{display:block;width:100%;height:auto}
.result-copy{padding:24px 8px 8px}
.result-copy h3{font-family:Georgia,"Times New Roman",serif;font-size:42px;line-height:1.05;margin:0 0 10px;color:var(--red)}
.result-copy .tagline{font-family:Georgia,"Times New Roman",serif;font-size:20px;color:#d8d0c6;margin:0 0 14px}
.result-copy .synopsis{font-size:15px;line-height:1.65;color:#bdb6ab;margin:0 0 6px;max-width:560px}
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.format{margin:0;padding:10px 8px;background:transparent;border:1px solid #383532;color:#aaa59d;text-align:center;width:auto;letter-spacing:0;font-weight:400}
.format b{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--ink)}
.format span{display:block;font-size:10px;margin-top:3px;letter-spacing:.04em}
.format[aria-checked="true"]{border-color:var(--red);background:rgba(201,41,37,.12)}
.format:hover{transform:none;filter:none;border-color:#81796e}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.ghost{background:transparent;color:var(--ink);border-color:#6a655e}
button.small{padding:12px 16px;font-size:12px;margin-top:0}
.share-row,.instagram-guide{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.share-label{font-size:11px;font-weight:700;letter-spacing:.24em;color:#aaa59d;margin:0 0 14px}
.share-buttons{display:flex;gap:10px;flex-wrap:wrap}
.share-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 18px;border:1px solid #6a655e;color:var(--ink);text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.14em;background:transparent;cursor:pointer;margin:0;transition:.18s;font-family:inherit}
.share-btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.share-btn svg{width:18px;height:18px;flex:none}
.share-btn.copied{border-color:var(--red);color:#f1c4bf}
.instagram-guide ol{margin:0 0 18px;padding-left:20px;color:#c9c3b9;font-size:15px;line-height:1.7}
.instagram-guide li strong{color:var(--ink);font-weight:700}
.caption-box{background:#090a0a;border:1px solid #383532;padding:16px;display:grid;gap:14px}
.caption-box p{margin:0;font-size:15px;line-height:1.6;color:#d8d0c6;white-space:pre-wrap}
.remaining{font-size:14px;color:#e9c9c5;border-left:2px solid var(--red);padding-left:12px;margin:26px 0 0;line-height:1.5}
.share-note{font-size:13px;color:#c9c3b9;margin:14px 0 0;line-height:1.5}
#startOverBtn{margin-top:14px}
.button-link{display:inline-block;border:1px solid var(--red);background:var(--red);color:#fff;font-weight:700;letter-spacing:.14em;padding:18px 26px;text-decoration:none;margin-top:28px;font-size:14px;transition:.18s}
.button-link:hover{transform:translateY(-1px);filter:brightness(1.08)}
.permalink .sub{text-transform:none;letter-spacing:.04em;font-size:20px;line-height:1.4}
.permalink h1{font-size:clamp(40px,5.6vw,76px)}
.permalink .synopsis{font-size:16px;line-height:1.65;color:#bdb6ab;margin:18px 0 0;max-width:520px}
.permalink .credit-line{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8d877e;margin:16px 0 0}
.loading{text-align:center;padding:80px 28px}
.loader{width:50px;height:50px;border:2px solid #333;border-top-color:var(--red);border-radius:50%;margin:0 auto 22px;animation:spin 1s linear infinite}
.loading p{font-family:Georgia,"Times New Roman",serif;font-size:24px;margin:0 0 8px}
.loading span{font-size:13px;color:#827c74}
.error{border-color:#62302d;color:#f1c4bf;line-height:1.5}
footer{border-top:1px solid #1f1f1e;padding:22px 28px;display:flex;justify-content:space-between;gap:20px;color:#65615c;font-size:10px;letter-spacing:.18em}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:850px){
  .shell{grid-template-columns:1fr;gap:28px;padding:28px 16px 48px}
  .intro{position:static;padding:0}
  .logo{width:84px;margin-bottom:18px}
  .eyebrow{margin-bottom:14px}
  h1{font-size:clamp(40px,12.5vw,58px)}
  .rule{margin:28px 0}
  h2{font-size:24px}
  .lede{font-size:16px;line-height:1.6}
  form,.result,.loading,.error{padding:20px 16px}
  .result{padding:12px 12px 20px}
  .result-copy{padding:18px 4px 4px}
  .result-copy h3{font-size:34px}
  textarea{min-height:170px;font-size:17px;padding:14px}
  input{height:50px}
  button,.button-link{width:100%;text-align:center;padding:16px 18px}
  button.small{width:100%}
  .starter{width:auto}
  .reroll button{width:100%}
  .format{width:auto;padding:9px 4px}
  .format span{font-size:9px}
  .actions{display:grid;grid-template-columns:1fr}
  .share-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .share-btn{justify-content:center;padding:14px 10px;font-size:12px}
  .instagram-guide ol{font-size:14px;padding-left:18px}
  .caption-box p{font-size:14px}
  footer{flex-direction:column;gap:8px;padding:20px 16px;text-align:center}
  /* Shared links: show the poster first, then the story and the call to action. */
  .permalink .generator{order:-1}
  .permalink .intro{padding-top:6px}
}
