:root{
    --ink:#17181A;
    --ink-2:#1F2023;
    --paper:#F3EDE4;
    --paper-dim:#E7DFD1;
    --safelight:#E4572E;
    --safelight-dim:#7A2A16;
    --brass:#C9A227;
    --muted:#8B8680;
    --line: rgba(243,237,228,0.14);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  /* film grain texture overlay — subtle, static, no flashing */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:9999;
    pointer-events:none;
    opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:'IBM Plex Sans', sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  a{color:inherit;}

  ::selection{background:var(--safelight); color:var(--ink);}

  a:focus-visible,
  button:focus-visible{
    outline:2px solid var(--safelight);
    outline-offset:3px;
  }

  .mono{
    font-family:'IBM Plex Mono', monospace;
  }

  /* ---------- Header ---------- */

  header{
    padding:64px 24px 40px;
    text-align:center;
    border-bottom:1px solid var(--line);
    position:relative;
    overflow:hidden;
  }

  header::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(ellipse at 50% -10%, rgba(228,87,46,0.28), transparent 55%),
      radial-gradient(ellipse at 15% 110%, rgba(201,162,39,0.16), transparent 50%),
      radial-gradient(ellipse at 85% 110%, rgba(228,87,46,0.14), transparent 50%),
      radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.35) 100%);
    background-size: 140% 140%, 100% 100%, 100% 100%, 100% 100%;
    animation: glow-drift 14s ease-in-out infinite alternate;
    pointer-events:none;
  }

  header::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--safelight), var(--brass), var(--safelight), transparent);
    opacity:.6;
  }

  @keyframes glow-drift{
    0%   { background-position: 40% 0%, 0 0, 0 0; }
    100% { background-position: 60% 20%, 0 0, 0 0; }
  }

  .brand-eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--safelight);
    margin:0 0 14px;
  }

  h1.brand{
    font-family:'Oswald', sans-serif;
    font-weight:700;
    font-size:clamp(40px, 7vw, 76px);
    letter-spacing:0.01em;
    text-transform:uppercase;
    margin:0;
    color:var(--paper);
  }

  h1.brand em{
    font-style:normal;
    background: linear-gradient(100deg, var(--safelight), var(--brass), var(--safelight));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shine-sweep 6s ease-in-out infinite;
  }

  @keyframes shine-sweep{
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
  }

  .tagline{
    max-width:520px;
    margin:18px auto 0;
    color:var(--muted);
    font-size:15px;
  }

  /* ---------- Jump nav ---------- */

  nav.jump{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    padding:22px 24px;
    max-width:1040px;
    margin:0 auto;
  }

  nav.jump a{
    text-decoration:none;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--muted);
    border:1px solid var(--line);
    padding:7px 12px;
    border-radius:2px;
    transition:border-color .15s ease, color .15s ease;
  }

  nav.jump a{
    position:relative;
    overflow:hidden;
  }

  nav.jump a::before{
    content:"";
    position:absolute;
    left:0; bottom:0; right:100%;
    height:2px;
    background:var(--safelight);
    transition:right .2s ease;
  }

  nav.jump a:hover{
    color:var(--safelight);
    border-color:var(--safelight-dim);
  }

  nav.jump a:hover::before{
    right:0;
  }

  /* ---------- Roll (category) ---------- */

  main{
    max-width:1040px;
    margin:0 auto;
    padding:20px 24px 100px;
  }

  section.roll{
    margin-top:56px;
    scroll-margin-top:24px;
    opacity:0;
    transform:translateY(16px);
    animation: roll-in 0.6s ease forwards;
    animation-delay: calc(var(--roll-index, 0) * 0.06s);
  }

  @keyframes roll-in{
    to{ opacity:1; transform:translateY(0); }
  }

  .roll-strip{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    padding:10px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background-image:
      radial-gradient(circle at 10px 4px, var(--ink) 3px, transparent 3.5px),
      radial-gradient(circle at 10px 26px, var(--ink) 3px, transparent 3.5px);
    background-size: 20px 30px;
    background-repeat: repeat-x;
    background-position: 0 0, 0 0;
    position:relative;
  }

  .roll-strip::before,
  .roll-strip::after{
    content:"";
    position:absolute;
    left:0; right:0;
    height:12px;
    background:
      radial-gradient(circle at 10px 6px, var(--ink-2) 3px, transparent 3.4px);
    background-size:20px 12px;
    background-repeat:repeat-x;
    opacity:.55;
  }
  .roll-strip::before{ top:-13px; }
  .roll-strip::after{ bottom:-13px; }

  .roll-title{
    font-family:'Oswald', sans-serif;
    font-weight:700;
    font-size:26px;
    text-transform:uppercase;
    letter-spacing:0.01em;
    margin:0;
    padding-left:26px;
    position:relative;
    background:linear-gradient(100deg, var(--paper) 40%, var(--brass) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }

  .roll-title::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--safelight);
    box-shadow:0 0 8px 2px rgba(228,87,46,0.6);
  }

  .roll-count{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--brass);
    white-space:nowrap;
    padding-right:26px;
  }

  .roll-desc{
    color:var(--muted);
    font-size:13px;
    margin:10px 0 0;
    padding-left:26px;
  }

  /* ---------- Frame grid ---------- */

  .frames{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));
    gap:18px;
    margin-top:22px;
  }

  .frame{
    display:block;
    text-decoration:none;
    background:
      radial-gradient(circle at 85% 15%, rgba(228,87,46,0.9) 0%, transparent 35%),
      radial-gradient(circle at 15% 90%, rgba(201,162,39,0.7) 0%, transparent 30%),
      var(--paper);
    background-blend-mode:soft-light, soft-light, normal;
    color:var(--ink);
    border-radius:3px;
    padding:22px 22px 20px;
    position:relative;
    border:1px solid transparent;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  }

  .frame:hover{
    transform:translateY(-3px) scale(1.015);
    box-shadow:0 14px 32px rgba(228,87,46,0.28), 0 4px 10px rgba(0,0,0,0.4);
    border-color:var(--safelight);
    background:
      radial-gradient(circle at 85% 15%, rgba(228,87,46,1) 0%, transparent 45%),
      radial-gradient(circle at 15% 90%, rgba(201,162,39,0.9) 0%, transparent 40%),
      linear-gradient(160deg, var(--paper) 60%, #F7E3D6 100%);
    background-blend-mode:soft-light, soft-light, normal;
  }

  .frame:hover .frame-name{
    color:var(--safelight-dim);
  }

  /* viewfinder-style corner ticks, appear on hover — photography motif */
  .frame::before,
  .frame::after{
    content:"";
    position:absolute;
    width:14px;
    height:14px;
    opacity:0;
    transition:opacity .18s ease;
    pointer-events:none;
  }
  .frame::before{
    top:4px; left:4px;
    border-top:2px solid var(--safelight);
    border-left:2px solid var(--safelight);
  }
  .frame::after{
    bottom:4px; right:4px;
    border-bottom:2px solid var(--safelight);
    border-right:2px solid var(--safelight);
  }
  .frame:hover::before,
  .frame:hover::after{
    opacity:.85;
  }

  .frame-no{
    position:absolute;
    top:10px;
    right:12px;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--muted);
  }

  .frame-icon{
    width:52px;
    height:52px;
    border-radius:9px;
    background:#fff;
    padding:5px;
    box-shadow:0 2px 6px rgba(0,0,0,0.2);
    display:block;
    margin:0 0 10px;
  }

  .frame-name{
    font-family:'Oswald', sans-serif;
    font-weight:700;
    font-size:21px;
    text-transform:uppercase;
    letter-spacing:0.01em;
    margin:0 30px 8px 0;
    background:linear-gradient(100deg, var(--ink) 30%, var(--safelight-dim) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }

  .frame-desc{
    font-size:14px;
    color:#4B4844;
    margin:0;
    font-weight:500;
  }

  .frame-link{
    position:absolute;
    inset:0;
    z-index:1;
  }

  .frame-stats{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:12px;
    font-family:'IBM Plex Mono', monospace;
    font-size:36px;
    font-weight:700;
    color:var(--muted);
    position:relative;
    z-index:2;
  }

  .frame-stars{
    color:var(--brass);
    letter-spacing:1px;
    font-size:39px;
    display:inline-flex;
  }

  .star-btn{
    background:none;
    border:none;
    padding:0;
    margin:0;
    font-size:inherit;
    font-family:inherit;
    color:var(--brass);
    cursor:pointer;
    line-height:1;
    transition:transform .1s ease;
  }
  .star-btn:hover:not(:disabled){
    transform:scale(1.15);
  }
  .star-btn:disabled{
    cursor:default;
  }

  .like-btn{
    background:none;
    border:none;
    padding:0;
    margin:0;
    font-size:inherit;
    font-family:inherit;
    font-weight:inherit;
    color:var(--muted);
    cursor:pointer;
    white-space:nowrap;
    transition:color .15s ease, transform .1s ease;
  }
  .like-btn:hover:not(:disabled){
    color:var(--safelight);
    transform:scale(1.08);
  }
  .like-btn.liked{
    color:var(--safelight);
    cursor:default;
  }
  .like-btn:disabled{
    cursor:default;
  }

  .frame-views{
    white-space:nowrap;
  }

  .frame-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid rgba(23,24,26,0.1);
  }

  .frame-badge{
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    font-weight:700;
    letter-spacing:0.03em;
    text-transform:uppercase;
    padding:4px 9px;
    border-radius:3px;
    background:var(--safelight);
    color:#fff;
    box-shadow:0 0 10px rgba(228,87,46,0.5);
    white-space:nowrap;
  }

  .frame-note{
    font-size:11px;
    color:#6B6862;
    font-style:italic;
    text-align:right;
  }

  /* Empty / unfilled slot */

  .frame.empty{
    background:transparent;
    border:1px dashed var(--line);
    color:var(--muted);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    min-height:84px;
    cursor:default;
  }

  .frame.empty:hover{
    transform:none;
    box-shadow:none;
    border-color:var(--safelight-dim);
  }

  .frame.empty .frame-name{
    color:var(--muted);
    font-size:14px;
  }

  .frame.empty .frame-desc{
    color:var(--muted);
    font-size:12px;
  }

  /* ---------- Footer ---------- */

  footer{
    border-top:1px solid var(--line);
    padding:32px 24px 60px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
  }

  footer .mono{
    color:var(--safelight-dim);
  }

  /* ---------- Age gate ---------- */

  #age-gate{
    position:fixed;
    inset:0;
    z-index:10000;
    background:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
  }

  .age-gate-box{
    max-width:480px;
    text-align:center;
    background:var(--paper);
    color:var(--ink);
    padding:36px 32px;
    border-radius:6px;
    border:1px solid var(--safelight);
    box-shadow:0 0 40px rgba(228,87,46,0.3);
  }

  .age-gate-box h2{
    font-family:'Oswald', sans-serif;
    font-weight:700;
    font-size:24px;
    text-transform:uppercase;
    margin:0 0 14px;
  }

  .age-gate-box p{
    font-size:14px;
    color:#4B4844;
    line-height:1.5;
    margin:0 0 10px;
  }

  .age-gate-buttons{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:20px 0 14px;
  }

  #age-gate-enter{
    background:var(--safelight);
    color:#fff;
    border:none;
    padding:14px 20px;
    border-radius:4px;
    font-family:'Oswald', sans-serif;
    font-weight:700;
    text-transform:uppercase;
    font-size:14px;
    letter-spacing:0.02em;
    cursor:pointer;
    transition:background .15s ease;
  }
  #age-gate-enter:hover{
    background:var(--safelight-dim);
  }

  #age-gate-exit{
    color:var(--muted);
    text-decoration:none;
    font-size:13px;
    padding:8px;
  }
  #age-gate-exit:hover{
    color:var(--ink);
  }

  .age-gate-links{
    font-size:12px;
    margin-top:14px;
  }
  .age-gate-links a{
    color:var(--safelight-dim);
    text-decoration:underline;
  }

  /* ---------- Ad rails ---------- */

  .toc-rail{
    position:absolute;
    top:190px;
    width:150px;
    display:flex;
    flex-direction:column;
    gap:24px;
    z-index:50;
  }
  .toc-rail-left{ left:18px; }
  .toc-rail-right{ right:18px; }

  @media (max-width:900px){
    .toc-rail{ display:none; }
  }

  .toc-strip{
    display:none;
  }

  @media (max-width:900px){
    .toc-strip{
      display:flex;
      flex-direction:row;
      overflow-x:auto;
      gap:10px;
      padding:14px 14px 4px;
      margin:6px 0 22px;
      grid-column:1 / -1;
    }
    .toc-strip .toc-tile{
      flex:0 0 130px;
      height:130px;
    }
    .toc-strip .toc-tile-dc{
      flex:0 0 130px;
      height:260px;
    }
  }

  .toc-tile{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    height:170px;
    border-radius:6px;
    padding:14px 10px;
    text-decoration:none;
  }

  .toc-tile-dc{
    background:linear-gradient(160deg, var(--paper) 0%, #F7E3D6 100%);
    border:2px solid var(--safelight);
    box-shadow:0 0 16px rgba(228,87,46,0.35);
    transition:transform .18s ease;
    animation:ad-pulse 2.4s ease-in-out infinite;
    height:300px;
    padding:0;
    position:relative;
    overflow:hidden;
  }
  .toc-tile-dc img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0;
  }
  .toc-tile-dc .toc-tile-name,
  .toc-tile-dc .toc-tile-tag{
    display:none;
  }
  .toc-tile-dc:hover{
    transform:translateY(-3px) scale(1.03);
  }
  @keyframes ad-pulse{
    0%, 100% { transform:scale(1); box-shadow:0 0 14px rgba(228,87,46,0.3); border-color:var(--safelight); }
    50%      { transform:scale(1.06); box-shadow:0 0 26px rgba(228,87,46,0.65); border-color:var(--brass); }
  }
  .toc-tile-name{
    font-family:'Oswald', sans-serif;
    font-weight:700;
    font-size:15px;
    text-transform:uppercase;
    color:var(--ink);
    letter-spacing:0.01em;
  }
  .toc-tile-tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:#fff;
    margin-top:6px;
    background:var(--safelight);
    padding:3px 8px;
    border-radius:3px;
    display:inline-block;
    position:relative;
    overflow:hidden;
  }
  .toc-tile-tag::after{
    content:"";
    position:absolute;
    top:0; left:-100%;
    width:60%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.7), transparent);
    animation:tag-shine 2.4s ease-in-out infinite;
  }
  @keyframes tag-shine{
    0%   { left:-100%; }
    60%, 100% { left:150%; }
  }

  /* Variant B — gold-dominant, alternates with the orange variant to avoid repetition */
  .toc-tile-dc-alt{
    border-color:var(--brass);
    box-shadow:0 0 16px rgba(201,162,39,0.35);
    animation-name:ad-pulse-alt;
  }
  @keyframes ad-pulse-alt{
    0%, 100% { transform:scale(1); box-shadow:0 0 14px rgba(201,162,39,0.3); border-color:var(--brass); }
    50%      { transform:scale(1.06); box-shadow:0 0 26px rgba(201,162,39,0.65); border-color:var(--safelight); }
  }
  .toc-tile-dc-alt .toc-tile-tag{
    background:var(--brass);
  }

  .toc-tile-network{
    background:var(--paper);
    border:1px solid var(--line);
    padding:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .toc-tile-network img,
  .toc-tile-network iframe{
    max-width:100%;
    max-height:100%;
  }

  .toc-tile-empty{
    border:1px dashed var(--line);
    color:var(--muted);
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.04em;
  }

  /* ---------- Reduced motion ---------- */

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .frame{transition:none;}
    header::before{animation:none;}
    h1.brand em{animation:none; -webkit-text-fill-color: var(--safelight); background:none; color:var(--safelight);}
    section.roll{opacity:1; transform:none; animation:none;}
  }

  @media (max-width:640px){
    .roll-title{font-size:20px;}
    .frames{grid-template-columns:1fr;}
  }

/* ---- Featured ads row (CreatorsHub etc.) ---- */
.toc-picks{ margin:0 0 32px; }
.toc-picks-label{ font-size:12px; letter-spacing:.25em; color:#ffd600; margin:0 0 10px; }
.toc-picks-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.toc-pick{ display:block; border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.45); transition:transform .2s ease, box-shadow .2s ease; }
.toc-pick:hover{ transform:translateY(-3px); box-shadow:0 14px 36px rgba(140,90,255,.35); }
.toc-pick img{ display:block; width:100%; height:auto; }

/* ---- Between-row banners ---- */
.toc-break{ grid-column:1 / -1; margin:26px 0; }
.toc-break .toc-pick{ max-width:1100px; margin:0 auto; }

/* ---- Featured row: rotate one banner at a time ---- */
.toc-picks-row.toc-rotate{ display:block; }
.toc-rotate .toc-pick + .toc-pick{ display:none; }
.toc-rotate.ready .toc-pick{ display:none; }
.toc-rotate.ready .toc-pick.on{ display:block; animation:tocFade .7s ease; }
@keyframes tocFade{ from{opacity:0} to{opacity:1} }

/* ---- Free preview reel ---- */
.toc-reel{ grid-column:1 / -1; margin:6px 0 30px; }
.toc-reel-head{ font-weight:700; letter-spacing:.06em; color:#ffd600; margin:0 0 10px; font-size:14px; text-transform:uppercase; }
.toc-reel-grid{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px; }
.toc-reel-item{ display:flex; flex-direction:column; background:#0d0b12; border:1px solid #2a2433; border-radius:10px; overflow:hidden; text-decoration:none; color:#fff; transition:transform .15s ease, border-color .15s ease; }
.toc-reel-item:hover{ transform:translateY(-2px); }
.toc-reel-dc:hover{ border-color:#ff0066; }
.toc-reel-ch:hover{ border-color:#8c5aff; }
.toc-reel-thumb{ display:block; aspect-ratio:16/9; background:#000; }
.toc-reel-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.toc-reel-site{ font-size:11px; font-weight:700; padding:6px 8px 0; letter-spacing:.04em; }
.toc-reel-dc .toc-reel-site{ color:#ff3d8b; }
.toc-reel-ch .toc-reel-site{ background:linear-gradient(90deg,#ff3d7f,#ffd600,#28dc8c,#00b4ff,#8c5aff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.toc-reel-title{ font-size:12px; color:#ddd; padding:2px 8px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toc-reel-cta{ font-size:12px; font-weight:700; padding:6px 8px 8px; color:#fff; }
@media(max-width:1300px){ .toc-reel-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:600px){ .toc-reel-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---- Ad-blocker notice ---- */
.toc-note{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:100000; max-width:calc(100% - 24px); width:620px; background:#110d16; color:#fff; border:2px solid #ff0066; border-radius:12px; padding:12px 14px; display:flex; gap:12px; align-items:center; box-shadow:0 10px 30px rgba(0,0,0,.6); font-size:14px; line-height:1.4; }
.toc-note b{ color:#ffd600; }
.toc-note button{ flex:0 0 auto; background:#ff0066; color:#fff; border:0; border-radius:8px; padding:8px 14px; font-weight:700; cursor:pointer; }

/* ---- Preview reel blur ---- */
.toc-reel-thumb{ overflow:hidden; }
.toc-reel-thumb img{ filter:blur(3px); transform:scale(1.08); }

/* ---- Bigger preview reel cards ---- */
.toc-reel-head{ font-size:16px; margin-bottom:14px; }
.toc-reel-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.toc-reel-item{ border-radius:14px; }
.toc-reel-site{ font-size:13px; padding:10px 12px 0; }
.toc-reel-title{ font-size:15px; padding:4px 12px 0; }
.toc-reel-cta{ font-size:14px; padding:8px 12px 12px; }
@media(max-width:1100px){ .toc-reel-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:800px){ .toc-reel-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px){ .toc-reel-grid{ grid-template-columns:1fr; } }