/* ============================================================
   Two-Faced Turek — microsite
   ============================================================ */

:root{
  --ink:        #0e0e0f;
  --ink-2:      #17171a;
  --ink-3:      #1f1f23;
  --line:       #32323a;
  --paper:      #f4f1ec;
  --paper-dim:  #b9b5ae;
  --muted:      #8b8781;
  --red:        #c8102e;
  --red-hot:    #e01637;

  --ff-display: "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif;
  --ff-body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap:   1120px;
  --gutter: 20px;

  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  --step-3: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --step-4: clamp(2.6rem, 1.5rem + 5.4vw, 6rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ff-body);
  font-size:var(--step-0);
  line-height:1.6;
  overflow-x:hidden;
  /* concrete grain */
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(200,16,46,.06), transparent 55%);
}

img{ max-width:100%; height:auto; display:block; }

/* film grain — keeps the flat dark panels from looking printed-from-a-template */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


a{ color:inherit; }

h1,h2,h3{
  font-family:var(--ff-display);
  font-weight:700;
  line-height:0.98;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0 0 .4em;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--red); color:#fff; padding:12px 18px;
  font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.08em;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--red-hot); outline-offset:3px; }

/* ---------- shared bits ---------- */

/* reads as a spoken lead into the headline under it */
.leadin{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:clamp(1.15rem, 2.8vw, 1.95rem);
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  color:var(--red-hot);
  margin:0 0 .5rem;
  line-height:1.1;
}

.section-title{
  font-size:var(--step-3);
  text-align:center;
  margin:0 0 2.5rem;
  text-wrap:balance;
}
@media (min-width:980px){
  .section-title--left{ text-align:left; margin-inline:0; }
}

.btn{
  display:inline-block;
  font-family:var(--ff-display);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding:15px 30px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn--primary{ background:var(--red); color:#fff; border-color:var(--red); }
.btn--primary:hover{ background:var(--red-hot); border-color:var(--red-hot); transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  /* lockup up top, the face through the middle, the headline down low */
  grid-template-rows:auto 1fr auto;
  justify-items:center;
  text-align:center;
  padding:clamp(1.5rem, 4vh, 3rem) 0 clamp(2rem, 5vh, 3.5rem);
  isolation:isolate;
  overflow:hidden;
}

/* the poster sits centred behind the type, dropped back so the
   headline carries the page and the art reads as atmosphere */
.hero__art{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%; height:100%;
  max-width:none;
  object-fit:cover;
  object-position:50% 100%;  /* ride the crop up; the face reads above the type */
  filter:grayscale(1) contrast(1.08) brightness(.72);
}

/* Near-square and portrait viewports leave almost no vertical crop to play
   with, so the headline lands on the eyes. Oversize the art and pull it up
   to buy that room back. */
@media (max-aspect-ratio: 3/2){
  .hero__art{
    inset:auto;
    top:-27%;
    left:0;
    height:128%;
    object-position:50% 0%;
  }
}

/* scrim: dark in the middle where the type sits, open at the edges
   so the face still reads through it at the edges */
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    /* darkest where the headline sits, open across the eyes above it */
    radial-gradient(ellipse 62% 40% at 50% 76%,
      rgba(14,14,15,.84) 0%, rgba(14,14,15,.62) 45%, rgba(14,14,15,.2) 78%, transparent 100%),
    linear-gradient(to bottom,
      rgba(14,14,15,.5) 0%, rgba(14,14,15,.12) 14%, transparent 34%,
      transparent 58%, var(--ink) 100%);
  pointer-events:none;
}

/* the poster's lockup, set in type so it scales and stays selectable */
.hero__lockup{
  position:relative;
  grid-row:1;
  margin:0;
  font-family:var(--ff-display);
  font-weight:700;
  font-size:clamp(1.6rem, 5.4vw, 3.6rem);
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--paper);
  text-shadow:0 2px 20px rgba(0,0,0,.85);
}

.hero__copy{
  position:relative;
  grid-row:3;
}

.hero__headline{
  font-size:var(--step-4);
  max-width:12ch;
  margin:0 auto 1.1rem;
  text-shadow:0 2px 14px rgba(0,0,0,.9), 0 2px 40px rgba(0,0,0,.75);
}
.hero__headline em{
  font-style:normal;
  color:var(--red-hot);
  display:inline-block;
}

.hero__sub{
  font-size:var(--step-1);
  max-width:44ch;
  color:var(--paper-dim);
  margin:0 auto 2rem;
  text-shadow:0 1px 10px rgba(0,0,0,.95), 0 1px 26px rgba(0,0,0,.8);
}
.hero__sub strong{ color:var(--paper); }

/* ============================================================
   58% STAT
   ============================================================ */

.stat{
  padding:clamp(3.5rem, 9vw, 7rem) 0;
  border-top:1px solid var(--line);
  background:var(--ink-2);
}

.stat__inner{
  display:grid;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
}
@media (min-width:860px){
  .stat__inner{ grid-template-columns:minmax(260px,.8fr) 1.4fr; }
}

.stat__figure{
  margin:0;
  text-align:left;
  line-height:.8;
  /* let the numeral hang past the text edge, the way print does it */
  margin-left:-.06em;
}
.stat__number{
  display:block;
  font-family:var(--ff-display);
  font-weight:700;
  font-size:clamp(6rem, 19vw, 13rem);
  line-height:.78;
  color:var(--red);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}
.stat__pct{ font-size:.42em; vertical-align:super; letter-spacing:0; }
.stat__label{
  display:block;
  margin-top:.5rem;
  padding-top:.8rem;
  border-top:3px solid var(--red);
  font-family:var(--ff-display);
  font-size:.95rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--paper-dim);
}

.stat__text h2{ font-size:var(--step-2); max-width:24ch; text-wrap:balance; }
.stat__text p{ max-width:58ch; color:var(--paper-dim); margin:0 0 1.5rem; }
.stat__text strong{ color:var(--paper); }

/* ============================================================
   VOTES — accordion
   ============================================================ */

.votes{ padding:clamp(3.5rem, 9vw, 7rem) 0; }

.accordion{
  border-top:1px solid var(--line);
  max-width:900px;
  margin-inline:auto;
}

.acc{ border-bottom:1px solid var(--line); }

.acc__head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(1rem, 3vw, 2rem);
  padding:clamp(1.3rem, 3vw, 1.9rem) 0;
  cursor:pointer;
  list-style:none;
  position:relative;
  transition:color .2s ease;
}
.acc__head::-webkit-details-marker{ display:none; }
.acc__head::marker{ content:""; }

/* red wash that slides in behind the open / hovered row */
.acc__head::before{
  content:"";
  position:absolute;
  left:calc(var(--gutter) * -1); right:calc(var(--gutter) * -1);
  top:0; bottom:0;
  background:linear-gradient(90deg, rgba(200,16,46,.14), transparent 70%);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.acc:hover .acc__head::before,
.acc[open] .acc__head::before{ opacity:1; }

.acc__num{
  font-family:var(--ff-display);
  font-size:clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight:700;
  letter-spacing:.1em;
  color:var(--line);
  font-variant-numeric:tabular-nums;
  transition:color .2s ease;
}
.acc:hover .acc__num,
.acc[open] .acc__num{ color:var(--red); }

.acc__title{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:clamp(1.3rem, 3.2vw, 2.1rem);
  line-height:1.05;
  text-transform:uppercase;
  text-wrap:balance;
  transition:color .2s ease;
}
.acc[open] .acc__title{ color:var(--red-hot); }

/* + / − toggle */
.acc__icon{
  position:relative;
  width:26px; height:26px;
  flex:none;
}
.acc__icon::before,
.acc__icon::after{
  content:"";
  position:absolute; left:50%; top:50%;
  background:var(--paper-dim);
  transition:transform .3s ease, background-color .2s ease;
}
.acc__icon::before{ width:20px; height:2px; margin:-1px 0 0 -10px; }
.acc__icon::after { width:2px; height:20px; margin:-10px 0 0 -1px; }
.acc[open] .acc__icon::after{ transform:rotate(90deg); }
.acc[open] .acc__icon::before,
.acc[open] .acc__icon::after{ background:var(--red-hot); }

.acc__body{
  padding:0 0 clamp(1.5rem, 3vw, 2rem);
  max-width:62ch;
  /* line the copy up under the title, past the number column */
  margin-left:clamp(2.6rem, 6vw, 4.6rem);
}
.acc__body p{
  margin:0;
  font-size:var(--step-1);
  color:var(--paper-dim);
}
.acc__body strong{ color:var(--paper); }
.acc__source{ margin:1rem 0 0 !important; font-size:.85rem !important; }
.acc__source a{ color:var(--muted); }

.acc[open] .acc__body{
  animation:acc-open .32s ease both;
}
@keyframes acc-open{
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .acc[open] .acc__body{ animation:none; }
  .acc__icon::before, .acc__icon::after{ transition:none; }
}

/* ============================================================
   HEADLINES
   ============================================================ */

.headlines{
  padding:clamp(3.5rem, 9vw, 7rem) 0;
  background:var(--ink-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.headlines__inner{
  display:grid;
  gap:clamp(2rem, 5vw, 3.5rem);
  align-items:start;
}
@media (min-width:980px){
  /* this section runs wider than the page's default measure so the
     headlines read closer to full width */
  .headlines__inner{
    max-width:1300px;
    grid-template-columns:minmax(260px, .58fr) 1.42fr;
  }
  /* the poster rides along while the headlines scroll past it */
  .poster{ position:sticky; top:clamp(2rem, 8vh, 5rem); }
}

/* the full poster, lockup and all */
.poster{
  margin:0;
  position:relative;
  max-width:min(100%, 460px);
  justify-self:center;
}
.poster::before{
  content:"";
  position:absolute;
  inset:16px -16px -16px 16px;
  border:3px solid var(--red);
  z-index:0;
}
.poster img{
  position:relative;
  z-index:1;
  width:100%;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
/* pull the offset frame in so it doesn't crowd the screen edge on phones */
@media (max-width:520px){
  .poster{ max-width:calc(100% - 12px); margin-left:-6px; }
  .poster::before{ inset:10px -10px -10px 10px; }
}

.headlines__grid{
  display:grid;
  gap:1.25rem;
}

.headline{
  background:var(--paper);
  color:var(--ink);
  padding:1.6rem 1.9rem;
  border-left:5px solid var(--red);
  transition:transform .2s ease;
}
.headline:hover{ transform:translateY(-3px); }
@media (prefers-reduced-motion: reduce){ .headline:hover{ transform:none; } }

.headline__outlet{
  margin:0 0 .6rem;
  font-family:var(--ff-display);
  font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--red);
}
.headline__text{
  margin:0 0 .8rem;
  font-size:1.38rem;
  color:var(--ink);
  text-transform:none;
  line-height:1.18;
  /* no balancing: fill the line, drop to a second only when it runs out */
  text-wrap:normal;
}
.headline__text a{ text-decoration:none; }
.headline__text a:hover{ text-decoration:underline; }
.headline__date{
  margin:0;
  font-size:.8rem;
  color:#6a665f;
  font-variant-numeric:tabular-nums;
}

/* empty slot styling — visually obvious, easy to spot before launch */
.headline--empty{
  background:transparent;
  color:var(--muted);
  border:2px dashed var(--line);
  border-left:5px solid var(--line);
}
.headline--empty .headline__outlet{ color:var(--muted); }
.headline--empty .headline__text{ color:var(--paper-dim); }
.headline--empty .headline__date{ color:var(--muted); }
.headline--empty:hover{ transform:none; }

/* ============================================================
   CLOSING
   ============================================================ */

.cta{ padding:clamp(4.5rem, 12vw, 9rem) 0; }
.cta__inner{ text-align:center; }
.cta__title{
  /* slightly tighter than --step-4 so the name fits on one line on phones */
  font-size:clamp(2.05rem, 1.15rem + 4.6vw, 5.5rem);
  margin:0 auto .8rem;
  max-width:18ch;
  text-wrap:balance;
}
/* the name never breaks across lines */
.cta__title em{ font-style:normal; color:var(--red-hot); white-space:nowrap; }
.cta__sub{
  color:var(--paper-dim);
  margin:0 auto;
  max-width:48ch;
  font-size:var(--step-1);
  text-wrap:balance;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer{
  border-top:1px solid var(--line);
  padding:2.5rem 0 3rem;
  background:var(--ink-2);
  text-align:center;
}
.share{
  font-family:var(--ff-display);
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.5rem;
}
.share__link{
  color:var(--paper-dim);
  text-decoration:none;
  margin-left:1rem;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
}
.share__link:hover{ color:var(--paper); border-color:var(--red); }
.disclaimer{
  /* inline-block so the box hugs the text instead of running the full
     60ch measure; the centred footer centres it */
  display:inline-block;
  margin:0;
  padding:.7rem 1.4rem;
  border:1px solid var(--line);
  font-size:.78rem;
  color:var(--muted);
  max-width:60ch;
  text-align:center;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .55s ease, transform .55s ease;
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

@media print{
  body{ background:#fff; color:#000; }
  .hero__art{ display:none; }
}