/* SID VILE fan site: the Crossweirds cover look (dark teal, cream poster letters, red accent, black band).
   No cookies, no trackers, no outside fonts. */
/* 30 Oct (Proof r1 fix 1): font URLs are relative to this file, so they load live (/fonts/) AND in the file:// review shots. */
@font-face { font-family: "Anton"; src: url("fonts/Anton-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "PT Sans"; src: url("fonts/PTSans-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "PT Sans"; font-weight: 700; src: url("fonts/PTSans-Bold.ttf") format("truetype"); font-display: swap; }
:root { --teal: #0d4f57; --deep: #07343a; --cream: #f1e6c8; --red: #c8241c; --ink: #0b0b0b; }
* { box-sizing: border-box; }
/* 24 Oct: the gradient lives on body and covers the whole page (it used to stop at the first screen on long pages). */
html { background: var(--deep); }
body { min-height: 100vh; background: radial-gradient(ellipse 120% 900px at 50% 0, var(--teal) 0%, var(--deep) 100%) no-repeat, var(--deep); margin: 0; font-family: "PT Sans", Arial, sans-serif; color: var(--cream); font-size: 18px; line-height: 1.45; }
main { max-width: 640px; margin: 0 auto; padding: 26px 20px 40px; text-align: center; }
.brand { font-family: "Anton", Impact, sans-serif; letter-spacing: 2px; font-size: 20px; margin: 0; }
h1 { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: clamp(40px, 10vw, 64px); line-height: 1; margin: 8px 0 12px;
     text-transform: uppercase; text-shadow: 3px 3px 0 var(--ink); }
h1 .red { color: var(--red); }
.lead { font-size: 20px; margin: 0 auto 18px; max-width: 30em; }
.hero { width: min(320px, 78vw); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); margin: 6px 0 22px; }
.card { background: var(--ink); border: 3px solid var(--cream); padding: 22px 20px; text-align: left; }
.card > :last-child { margin-bottom: 0; }
.card h2 { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 28px; letter-spacing: 1px; margin: 0 0 8px; text-align: center; text-transform: uppercase; }
label { display: block; font-size: 16px; margin: 10px 0 4px; }
input[type=email] { width: 100%; font: inherit; padding: 14px 16px; border: 3px solid var(--cream); background: #fff; color: var(--ink); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin-top: 12px; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--red); }
button { width: 100%; margin-top: 16px; font-family: "Anton", Impact, sans-serif; font-size: 24px; letter-spacing: 1px; color: var(--cream);
         background: var(--red); border: 0; padding: 14px; cursor: pointer; text-transform: uppercase; }
button:hover { background: #a51d16; }
.small { font-size: 14px; opacity: .85; }
.small a, footer a, a.tap { color: var(--cream); }
/* 29 Oct: 44 px tap areas for text links (Proof A1) */
footer a, a.tap { display: inline-block; padding: 12px 14px; min-height: 44px; }
a.tap { display: block; text-align: center; margin-top: 4px; }
/* 30 Oct (Proof r1 fix 6): even spacing round the footer dots; height stays 44 px from min-height + vertical padding.
   The side padding widens the tap area, the matching negative margin keeps it out of the layout, so each dot has one plain space each side
   (padding alone left "SID VILE ·" tight and "· Privacy" wide on the r2 home shot). */
footer a { padding: 12px 6px; margin: 0 -6px; } /* 6 not 8: "Home · Privacy" leaves ~13 px between the words, so two 6 px pads never overlap */
.hero { margin-top: 22px; }
.soon-note { display: none; text-align: center; font-size: 19px; }
.trap { position: absolute; left: -5000px; }
/* 30 Oct (lane A): email-first pages. The button stays disabled in the HTML until the list is approved. */
button:disabled, button:disabled:hover { background: #6b6b6b; color: #ddd; cursor: not-allowed; }
.optin { font-size: 14px; margin: 14px 0 0; opacity: .9; }
.soon-box { margin: 14px 0 0; padding: 12px 14px; border: 2px dashed rgba(241, 230, 200, .5); font-size: 15px; }
a.dl { display: block; margin-top: 16px; text-align: center; font-family: "Anton", Impact, sans-serif; font-size: 24px; letter-spacing: 1px; color: var(--cream);
       background: var(--red); padding: 14px; text-decoration: none; text-transform: uppercase; }
a.dl:hover { background: #a51d16; }
.peek { width: min(260px, 70vw); border: 3px solid var(--cream); margin: 18px 0 4px; background: #fff; }
footer { text-align: center; font-size: 14px; padding: 10px 20px 30px; opacity: .8; }

/* 24 Oct: real desktop layout (cover beside the pitch). Phone stays one column. */
@media (min-width: 960px) {
  main { max-width: 1120px; padding: 56px 40px 64px; }
  main.split { display: grid; grid-template-columns: minmax(320px, 440px) 1fr; column-gap: 64px; text-align: left; align-items: start; }
  main.split > * { grid-column: 2; }
  main.split > .hero { grid-column: 1; grid-row: 1 / span 30; width: 100%; margin: 0; position: sticky; top: 40px; }
  main.split h1 { font-size: 88px; }
  main.split .lead { margin-left: 0; font-size: 22px; }
  main.split .card { max-width: 560px; }
  main.split ul.what { margin-left: 0; }
  main.wide { max-width: 860px; }
  .brand { font-size: 24px; }
}