/* LoomiTV — dmca page styles */

:root{
    --radius:3px; --maxw:1240px;
  }

body{ background:var(--bg); color:var(--fg); font-family:'Inter',sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;}

:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.eyebrow{ font-family:'Inter',sans-serif; font-weight:600; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);}

h1,h2,h3,h4{ font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; line-height:1.05;}

ul,ol{ padding-left:22px; margin:14px 0; }

li{ margin-bottom:8px; color:var(--muted); font-size:14.5px;}


.page-hero{ padding:170px 0 60px; text-align:center; background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(227,166,62,0.14), transparent 60%);}

.page-hero h1{ font-size:clamp(34px,4.6vw,52px); margin-bottom:14px;}

.page-hero .updated{ color:var(--muted-2); font-size:13px;}

main.wrap{ padding-top:70px; padding-bottom:120px; max-width:760px; }

.toc{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 30px; margin-bottom:48px;}

.toc h3{ font-size:14px; margin-bottom:12px;}

.toc ol{ margin:0; padding-left:18px;}

.toc li{ margin-bottom:6px;}

.toc a{ color:var(--muted); font-size:13.5px;}

.toc a:hover{ color:var(--gold); }

section.legal{ margin-bottom:48px; scroll-margin-top:100px;}

section.legal h2{ font-size:22px; margin-bottom:14px; padding-top:24px; border-top:1px solid var(--line);}

section.legal:first-of-type h2{ border-top:none; padding-top:0; }

section.legal p{ color:var(--muted); font-size:15px; margin-bottom:14px;}

.info-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px; margin-top:16px;}

.info-card .row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px;}

.info-card .row:last-child{ border-bottom:none; }

.info-card .row span:first-child{ color:var(--muted-2);}

form.contact{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:28px;}

.field{ margin-bottom:16px; min-width:0; }

.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:7px;}

.field input, .field textarea{ width:100%; background:var(--bg-warm); border:1px solid var(--line-strong); border-radius:4px; padding:11px 14px; color:var(--fg); font-size:13.5px; font-family:inherit;}

.field input:focus, .field textarea:focus{ outline:none; border-color:var(--gold);}

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px;}

/* Submit notice button — scoped to this one form only, no other button on the site affected.
   Red/white is the default state (not hover-only): base.css's plain .btn{background:transparent}
   was winning a same-specificity tie against .btn-primary{background:var(--crimson)} since .btn
   comes later in that file, so the red only ever showed on :hover, where the pseudo-class gave
   it enough specificity to win. Setting it explicitly here, scoped, fixes that without touching
   base.css or any other page's buttons. */
form.contact .btn-primary{
  background: var(--crimson);
  border-color: var(--crimson);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(198,52,42,.35),
    0 8px 24px rgba(198,52,42,.25);
}

form.contact .btn-primary:hover{
  background: #A9291F;
  border-color: #A9291F;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(198,52,42,.5),
    0 12px 30px rgba(198,52,42,.35);
}

.disclaimer{ background:rgba(227,166,62,0.06); border:1px solid rgba(227,166,62,0.25); border-radius:var(--radius); padding:20px 24px; font-size:13.5px; color:var(--muted);}

@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }

@media (max-width:768px){
  .page-hero{ padding:130px 0 44px; }
  main.wrap{ padding-top:48px; padding-bottom:80px; }
  .toc{ padding:20px 22px; }
  section.legal h2{ font-size:20px; }
  form.contact{ padding:22px; }
}