: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);
  }

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

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

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

  .ad-box{
    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;
  }

  .ad-box-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;
  }
  .ad-box-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); }
  }
  .ad-box-dc img{
    width:64px;
    height:64px;
    border-radius:8px;
    margin-bottom:8px;
    box-shadow:0 2px 8px rgba(0,0,0,0.25);
  }
  .ad-box-name{
    font-family:'Oswald', sans-serif;
    font-weight:700;
    font-size:15px;
    text-transform:uppercase;
    color:var(--ink);
    letter-spacing:0.01em;
  }
  .ad-box-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;
  }
  .ad-box-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 */
  .ad-box-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); }
  }
  .ad-box-dc-alt .ad-box-tag{
    background:var(--brass);
  }

  .ad-box-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;}
  }