/* ============================================================
   article.css — the features.

   Four pieces, four different sets of rules. Nothing is centred,
   nothing shares a measure, and the marginalia is set at whatever
   angle it was written at. Columns collide with pictures on purpose;
   the pictures win.
   ============================================================ */
:root{
  --slab:"Alfa Slab One", Georgia, serif;
  --type:"Special Elite", "Courier New", monospace;
}
.art{ background:#fff; color:var(--ink) }

/* ---------- head ---------- */
.art__top{
  display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap;
  padding:.5rem var(--trim); border-bottom:5px solid var(--ink);
  position:sticky; top:0; z-index:120; background:#fff;
}
.art__top a{ font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase }
.art__top .cat{ margin-left:auto; font-family:var(--mono); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; opacity:.55 }

.hd{ position:relative; padding:clamp(1rem,3vw,2.4rem) var(--trim) 0 }
.hd__no{
  position:absolute; right:var(--trim); top:-.1em; z-index:0;
  font-family:var(--anton); font-size:clamp(6rem,26vw,24rem); line-height:.7;
  color:#F0F0EE; letter-spacing:-.05em; pointer-events:none;
}
.hd h1{ position:relative; z-index:2; margin:0; text-transform:uppercase; line-height:.74 }
.hd h1 span{ display:block }
.hd__stand{
  position:relative; z-index:2; max-width:44ch; margin-top:.9rem;
  font-family:var(--wonk); font-size:clamp(1rem,2vw,1.5rem); line-height:1.22;
  font-variation-settings:"SOFT" 70,"WONK" 1,"opsz" 60;
}
.hd__by{
  position:relative; z-index:2; margin-top:.9rem; display:flex; gap:1.2rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; opacity:.7;
}

/* ---------- the body, jammed against a gutter of notes ---------- */
.rag{
  display:grid; gap:clamp(1rem,2.6vw,2.6rem);
  grid-template-columns:minmax(0,1fr);
  padding:clamp(1.4rem,4vw,3rem) var(--trim) clamp(2rem,5vw,4rem);
  position:relative;
}
@media (min-width:900px){
  .rag{ grid-template-columns:minmax(0,7fr) minmax(0,3fr) }
}
.rag__text > p{ margin:0 0 .85em; max-width:62ch }
.rag__text > p:first-of-type::first-letter{
  float:left; font-family:var(--slab); font-size:4.6em; line-height:.72;
  padding:.02em .08em 0 0; color:var(--spot);
}
.rag__notes{ display:grid; gap:1.6rem; align-content:start }
.gnote{
  font-family:var(--mono); font-size:.66rem; line-height:1.45;
  border-left:3px solid var(--spot); padding-left:.6rem;
}
.gnote:nth-child(2){ transform:rotate(-1.4deg) }
.gnote:nth-child(3){ transform:rotate(1.1deg) }

.bigquote{
  font-family:var(--wonk); font-style:italic;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;
  font-size:clamp(1.5rem,4.2vw,3.4rem); line-height:1; color:var(--spot);
  margin:1.4rem 0; max-width:22ch;
}
.sidequote{
  writing-mode:vertical-rl; font-family:var(--anton); text-transform:uppercase;
  font-size:clamp(1rem,2.4vw,2rem); line-height:1; letter-spacing:.01em;
  position:absolute; right:.2rem; top:14%; opacity:.9; pointer-events:none;
}
@media (max-width:900px){ .sidequote{ display:none } }

.foot-note{
  border-top:3px solid var(--ink); margin:0 var(--trim) 4rem;
  padding-top:.6rem; font-family:var(--mono); font-size:.62rem; line-height:1.5; max-width:64ch;
}

/* ---------- pictures ---------- */
.plateimg{ margin:0 }
.plateimg img{ width:100%; height:auto; display:block }
.plateimg figcaption{
  font-family:var(--mono); font-size:.56rem; line-height:1.4; padding:.3rem .35rem;
  background:#fff; max-width:34ch;
}
.bleed{ width:100%; margin-block:clamp(1rem,3vw,2rem) }
.bleed img{ width:100%; height:clamp(180px,34vw,460px); object-fit:cover }
.jut{ position:relative; z-index:3 }
@media (min-width:900px){
  .jut--l{ margin-left:calc(var(--trim) * -1); width:calc(100% + var(--trim)) }
  .jut--r{ margin-right:calc(var(--trim) * -1); width:calc(100% + var(--trim)) }
}

/* ============================================================
   per-piece rules — each feature is set differently on purpose
   ============================================================ */

/* 09 ACADEMY — municipal. typewriter body, headline shoved left and tilted. */
[data-art="academy"] .hd h1{ font-family:var(--anton); font-size:clamp(3rem,15vw,13rem); letter-spacing:-.03em }
[data-art="academy"] .hd h1 span:nth-child(2){ margin-left:.14em; color:var(--spot) }
[data-art="academy"] .hd{ transform:rotate(-1.1deg); transform-origin:left top }
[data-art="academy"] .rag__text{ font-family:var(--type); font-size:1rem; line-height:1.5 }
[data-art="academy"] .rag__text > p{ max-width:58ch }

/* 10 COUNT — figures. slab headline, the body in two tight columns. */
[data-art="count"] .hd h1{ font-family:var(--slab); font-size:clamp(2.6rem,12vw,10rem); line-height:.82 }
[data-art="count"] .hd h1 span:nth-child(1){ color:var(--spot) }
[data-art="count"] .rag__text{ font-family:var(--wonk); font-variation-settings:"SOFT" 20,"WONK" 0,"opsz" 12; font-size:1.02rem; line-height:1.44 }
@media (min-width:900px){ [data-art="count"] .rag__text{ columns:2; column-gap:2rem; column-rule:1px solid var(--ink) } 
  [data-art="count"] .rag__text > p{ max-width:none } }
.hugenum{
  font-family:var(--slab); font-size:clamp(3rem,18vw,16rem); line-height:.78;
  color:var(--spot); letter-spacing:-.03em; margin:.2em 0 0;
}
.hugenum small{ display:block; font-family:var(--mono); font-size:.06em; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); margin-top:.6em }

/* 02 KNOT — specimen. blackletter, three columns, headline collides. */
[data-art="knot"] .hd h1{ font-family:var(--black); font-size:clamp(2.6rem,13vw,11rem); line-height:.86; text-transform:none }
[data-art="knot"] .hd h1 span:nth-child(2){ font-family:var(--wonk); font-style:italic; font-size:.62em; margin-left:1.2em; margin-top:-.28em }
[data-art="knot"] .rag__text{ font-family:var(--wonk); font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 14; font-size:1.04rem; line-height:1.42 }
@media (min-width:1100px){ [data-art="knot"] .rag__text{ columns:2; column-gap:2.2rem }
  [data-art="knot"] .rag__text > p{ max-width:none } }

/* 04 CONTACT — track. everything mono, the list set as a spec sheet. */
[data-art="contact"] .hd h1{ font-family:var(--mono); font-weight:700; font-size:clamp(2rem,9vw,7rem); letter-spacing:-.02em; line-height:.9 }
[data-art="contact"] .hd h1 span:nth-child(2){ color:var(--spot) }
[data-art="contact"] .rag__text{ font-family:var(--mono); font-size:.86rem; line-height:1.62 }
[data-art="contact"] .rag__text > p{ max-width:66ch }
[data-art="contact"] .rag__text > p:first-of-type::first-letter{ font-family:var(--mono); font-size:3.4em }
[data-art="contact"] .hd__no{ color:#EDEFEE }

/* ---------- next ---------- */
.nextup{ border-top:6px solid var(--ink); padding:clamp(1.4rem,4vw,3rem) var(--trim) 5rem }
.nextup h2{ font-family:var(--anton); text-transform:uppercase; font-size:clamp(1.4rem,5vw,3.4rem); line-height:.82 }
.nextup__grid{ display:grid; gap:2px; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); margin-top:1.2rem }
.nextup a{ position:relative; display:block; overflow:hidden }
.nextup img{ width:100%; height:clamp(120px,15vw,200px); object-fit:cover; display:block }
.nextup span{
  position:absolute; left:0; bottom:0; background:#fff; padding:.25rem .4rem;
  font-family:var(--mono); font-size:.56rem; line-height:1.3; max-width:88%;
}
.nextup span b{ font-family:var(--anton); font-size:.9rem; display:block; text-transform:uppercase; line-height:1 }
.nextup a:hover img{ filter:contrast(1.2) saturate(1.3) }

/* ============================================================
   THE CARSON KIT
   Letters at different sizes inside one word. Words broken across
   lines mid-word. Ghost type layered underneath. Copy cropped off
   the trim. Registration marks ruled over everything. None of it
   touches the body copy — the writing still has to be readable.
   ============================================================ */

/* per-letter mangling. sizes and offsets are emitted seeded, so the
   headline is broken the same way every load and can be art-directed. */
.smash{ display:block; line-height:.76; letter-spacing:-.02em }
.smash i{ font-style:normal; display:inline-block; vertical-align:baseline }
.smash .brk{ display:block }                 /* the mid-word break */

/* ghost impressions of the same word, printed underneath and off-register */
.ghost{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.ghost span{
  position:absolute; font-family:var(--anton); text-transform:uppercase;
  line-height:.72; white-space:nowrap; color:var(--ink);
}
.ghost span:nth-child(1){ opacity:.06; font-size:22vw; top:-2%;  left:-6% }
.ghost span:nth-child(2){ opacity:.05; font-size:17vw; top:34%;  left:22%; transform:rotate(-3deg) }
.ghost span:nth-child(3){ opacity:.07; font-size:12vw; top:62%;  left:-14% }
.ghost span:nth-child(4){ opacity:.04; font-size:28vw; top:12%;  left:52%; letter-spacing:.2em }

/* copy that runs off the trim, so you read it mid-word */
.croprow{ overflow:hidden; border-block:1px solid var(--ink); padding-block:.2rem }
.croprow p{
  margin:0; white-space:nowrap; margin-left:-3.5ch;
  font-family:var(--anton); text-transform:uppercase;
  font-size:clamp(1rem,3.4vw,2.6rem); line-height:1; letter-spacing:-.01em;
}
.croprow--r p{ margin-left:0; margin-right:-6ch; text-align:right }

/* names set solid, the way the covers do it */
.solidset{ font-family:var(--anton); text-transform:uppercase; line-height:.92;
  font-size:clamp(.9rem,2.6vw,1.9rem); letter-spacing:-.01em }
.solidset b{ font-weight:400 } .solidset i{ font-style:normal; color:var(--spot) }

/* registration and crop marks, ruled across the sheet */
.marks{ position:absolute; inset:0; z-index:1; pointer-events:none }
.marks i{ position:absolute; background:var(--ink); opacity:.5 }
.marks .h{ height:1px; left:0; right:0 }
.marks .v{ width:1px; top:0; bottom:0 }
.marks .reg{
  width:26px; height:26px; background:none; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--ink); opacity:.45;
}
.marks .reg::before, .marks .reg::after{
  content:""; position:absolute; background:var(--ink);
}
.marks .reg::before{ left:50%; top:-7px; bottom:-7px; width:1px }
.marks .reg::after { top:50%; left:-7px; right:-7px; height:1px }

/* the header becomes a stage things can overlap in */
.hd{ isolation:isolate }
.hd > *{ position:relative; z-index:2 }
.hd__stand{ mix-blend-mode:multiply }
/* the deck runs under the headline rather than politely below it */
.hd--overlap .hd__stand{ margin-top:-1.4em; margin-left:8%; max-width:38ch }
@media (max-width:820px){ .hd--overlap .hd__stand{ margin-top:.8rem; margin-left:0 } }

/* type up the outside edges */
.edge{
  position:absolute; z-index:4; writing-mode:vertical-rl; pointer-events:none;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.3em; text-transform:uppercase;
}
.edge--l{ left:.25rem; top:0 } .edge--r{ right:.25rem; top:0; transform:rotate(180deg) }
@media (max-width:820px){ .edge{ display:none } .croprow p{ font-size:1rem } }