:root{--ink:#0a0a0a;--paper:#f2f1ed;--light:#f4f3ee;--signal:#ff3b30;--sans:Arial,Helvetica,sans-serif;--mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}body{font-family:var(--sans)}button,input{font:inherit}a{color:inherit;text-decoration:none}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:hover{text-decoration:underline}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--signal);outline-offset:5px}[hidden]{display:none!important}
.js body:not(.complete){overflow:hidden}.js body:not(.complete) #publication{display:none}
#intro{min-height:100svh;background:var(--ink);color:var(--light);padding:26px 30px 16px;display:grid;grid-template-rows:auto 1fr auto;gap:28px}.js #intro{height:100svh;position:fixed;inset:0;z-index:10;overflow:auto}
.mast{display:flex;justify-content:space-between;align-items:start;font-size:clamp(26px,3.2vw,54px);font-weight:800;line-height:.9;letter-spacing:-.055em}.mast small{font:12px/1 var(--mono);letter-spacing:.05em;color:#aaa;margin-top:5px}
.counter-stage{width:min(1120px,100%);justify-self:center;align-self:center}.eyebrow{font:500 12px/1.35 var(--mono);letter-spacing:.08em;color:#aaa;margin:0 0 24px}
.counter-row{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:32px;align-items:baseline;padding:8px 0;border-top:1px solid #ffffff26}.number,#zero{font:500 clamp(34px,min(6.2vw,7.4svh),92px)/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.055em}.number{display:flex}.slot,.glyph{display:inline-block}.slot{position:relative;flex:none}.glyph{transform-origin:center;vertical-align:top}.label,#wordmark{font:600 clamp(12px,1.2vw,17px)/1.1 var(--sans);letter-spacing:-.02em;margin:0}.finite{margin-top:22px;border-bottom:1px solid #ffffff26;color:var(--signal)}#wordmark{grid-column:2;grid-row:1}#zero{grid-column:1;grid-row:1}.intro-foot{display:flex;justify-content:space-between;align-items:center;font:11px/1.4 var(--mono);color:#aaa;gap:16px}#skipIntro{border:0;background:var(--ink);color:var(--light);font:12px/1 var(--mono);padding:14px 0 14px 16px;min-height:44px;white-space:nowrap;position:relative;z-index:40}
.falling{z-index:30;pointer-events:none;will-change:transform}.collapsing .counter-row:not(.finite){border-color:transparent;transition:border-color 1s}
#publication{padding:26px 30px 0}.pub-nav{display:flex;justify-content:space-between;gap:24px;border-bottom:1px solid var(--ink);padding-bottom:14px;align-items:center}.pub-brand{font-weight:900;font-size:18px;letter-spacing:-.05em}.pub-links{display:flex;gap:22px;font:12px/1.2 var(--mono)}
.zero-hero{min-height:calc(100svh - 62px);position:relative;display:grid;grid-template-rows:1fr auto auto;gap:38px;padding:8vh 0 100px}#heroMark{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;border-top:1px solid var(--ink);padding-top:16px;outline:none}#heroMark #wordmark{grid-column:1;grid-row:1;font-weight:900;font-size:clamp(76px,15vw,230px);line-height:.8;letter-spacing:-.075em;color:var(--ink)}#heroMark #wordmark>span{display:block}#heroMark #zero{grid-column:2;grid-row:1;font-size:clamp(120px,24vw,360px);line-height:.8;letter-spacing:-.09em;color:var(--signal);padding-right:.08em}
.nothing-yet{border-top:1px solid var(--ink);padding-top:14px;margin:0;font-size:clamp(24px,2.4vw,38px);line-height:1;letter-spacing:-.045em}.signup{width:min(720px,100%);justify-self:end}.signup label{display:block;font-size:clamp(24px,2.6vw,40px);font-weight:600;letter-spacing:-.05em;margin-bottom:16px}.signup-row{display:flex;border-bottom:1px solid var(--ink)}.signup input{min-width:0;flex:1;border:0;border-radius:0;background:transparent;padding:12px 0;font-size:18px}.signup button{border:0;background:transparent;min-width:48px;min-height:48px;font-size:28px}.signup button:disabled{opacity:.5}#signupStatus{min-height:28px;margin:12px 0 0;font:12px/1.4 var(--mono)}#debris{position:absolute;bottom:0;left:-30px;right:-30px;height:85px;overflow:hidden;pointer-events:none;color:#868680}.debris-glyph{position:absolute!important;will-change:auto!important}
.text-section{border-top:1px solid var(--ink);padding:18px 0 12vh;display:grid;grid-template-columns:repeat(12,1fr);gap:16px;scroll-margin-top:24px}.section-kicker{grid-column:1/4;font:12px/1.2 var(--mono);letter-spacing:.06em}.manifesto-copy,.submission-copy,.editor-copy{grid-column:5/12;max-width:880px}.text-section p{margin:0;font-size:clamp(25px,3.45vw,57px);line-height:1.03;letter-spacing:-.05em}.text-section .lead{font-weight:700;font-size:clamp(38px,5.7vw,92px);line-height:.91;letter-spacing:-.065em}.manifesto-copy p{min-height:65svh;display:flex;align-items:center;padding:12vh 0}.manifesto-copy p:first-child{padding-top:6vh}.submissions,.editor{min-height:75svh}.submission-copy p,.editor-copy p{margin-bottom:40px}.action-link{display:inline-block;margin-top:36px;border-bottom:1px solid;font:14px/1.4 var(--mono)}footer{display:flex;justify-content:space-between;gap:28px;border-top:1px solid;padding:18px 0 28px;font:11px/1.3 var(--mono)}
@media(max-width:700px){#intro{padding:18px 18px 8px;gap:20px}.mast{font-size:26px}.counter-stage{align-self:center}.eyebrow{margin-bottom:20px}.counter-row{grid-template-columns:1fr;gap:5px;padding:8px 0}.label{grid-row:1;font-size:12px}.number,#zero{font-size:clamp(32px,11vw,58px)}.finite{margin-top:12px}#wordmark{grid-column:1;grid-row:1;font-size:12px}#zero{grid-column:1;grid-row:2}.intro-foot{font-size:9px}.js #intro{min-height:0}.js body:not(.complete){overflow:auto}#publication{padding:18px 18px 0}.pub-brand{font-size:14px}.pub-links{gap:14px;font-size:11px}.zero-hero{padding:7vh 0 90px;gap:32px}#heroMark{grid-template-columns:minmax(0,1fr);gap:28px}#heroMark #wordmark{font-size:20.5vw;line-height:.8}#heroMark #zero{grid-column:1;grid-row:2;font-size:43vw;justify-self:end;padding-right:.08em}.nothing-yet{font-size:10vw;max-width:100%;padding-right:12vw;line-height:.94}.signup label{font-size:7vw}.text-section{display:block;padding:18px 0 18vh}.section-kicker{margin-bottom:10vh}.text-section p{font-size:9vw;line-height:1.05}.text-section .lead{font-size:13vw;line-height:.94}.manifesto-copy p{min-height:72svh;padding:12vh 0}.manifesto-copy p:first-child{padding-top:0;min-height:60svh}.submissions,.editor{min-height:90svh}.submission-copy p{line-height:1.25}#debris{left:-18px;right:-18px}footer{font-size:9px}footer span{max-width:48%}}
@media(max-height:740px) and (min-width:701px){#intro{gap:16px}.number,#zero{font-size:clamp(32px,min(5.4vw,6.6svh),64px)}.mast{font-size:28px}.eyebrow{margin-bottom:16px}.finite{margin-top:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Compact, hard-edged signup: one field, one unmistakable action. */
.signup-row{border:1px solid var(--ink)}.signup input{padding:15px 14px}.signup input::placeholder{color:#666660}.signup button{background:var(--signal);color:var(--ink);width:64px;border-left:1px solid var(--ink);transition:background .15s,color .15s}.signup button:hover{background:var(--ink);color:var(--paper)}.signup-row:focus-within{outline:2px solid var(--signal);outline-offset:4px}.signup input:focus{outline:none}
@media(min-width:701px){.zero-hero{grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;column-gap:8vw}#heroMark{grid-column:1/-1}.nothing-yet{align-self:start;border-top:0;font-size:clamp(30px,3.7vw,56px);max-width:12ch;padding:0}.signup{align-self:start}.signup label{font:12px/1.3 var(--mono);letter-spacing:.08em;margin-bottom:14px}}
@media(max-width:700px){.zero-hero{padding-top:5vh;gap:26px}#heroMark #zero{font-size:38vw}.nothing-yet{font-size:9.4vw}.signup label{font:12px/1.3 var(--mono);letter-spacing:.07em;margin-bottom:12px}.signup button{width:58px}.signup input{font-size:16px;padding:14px}}

@media(max-width:700px){.zero-hero{grid-template-columns:minmax(0,1fr)}#skipIntro{position:fixed;right:18px;bottom:max(8px,env(safe-area-inset-bottom));padding:14px 0 14px 16px}.intro-foot{padding-right:70px}}
@media(max-width:700px) and (max-height:700px){#intro{gap:10px}.eyebrow{margin-bottom:14px}.counter-row{padding:6px 0}.number,#zero{font-size:34px}.mast{font-size:23px}.finite{margin-top:8px}}

/* One publication statement: the count, its meaning, then the invitation. */
.label{white-space:nowrap}.eyebrow .slot{vertical-align:top}
.zero-hero{display:block;min-height:calc(100svh - 70px);padding:10vh 0 110px}
#heroMark{grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:8vw;border-top:0;padding:0;align-items:center}
#heroMark #wordmark{font-size:clamp(76px,10vw,150px);line-height:.87;letter-spacing:-.065em}
.publication-state{min-width:0}
.count-summary{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px}
#heroMark #zero{font-size:clamp(100px,12vw,180px);line-height:1;letter-spacing:-.07em;padding:0}
.count-label{font:12px/1.3 var(--mono);letter-spacing:.07em;margin:0 0 14px}
.nothing-yet{border:0;padding:0;max-width:15ch;font-size:clamp(24px,2.4vw,36px);line-height:1.05;letter-spacing:-.035em}
.signup{width:100%;margin-top:36px;padding-top:24px;border-top:1px solid #0a0a0a30}
.signup label{font:12px/1.3 var(--mono);letter-spacing:.06em;margin-bottom:12px}
.text-section p{font-size:clamp(20px,2vw,28px);line-height:1.35;letter-spacing:-.025em;max-width:36ch}
.text-section .lead{font-size:clamp(30px,3.8vw,52px);line-height:1.08;letter-spacing:-.04em;max-width:23ch}
.manifesto-copy p{min-height:48svh;padding:8vh 0}
@media(max-width:700px){
 .zero-hero{padding:6vh 0 100px}
 #heroMark{grid-template-columns:minmax(0,1fr);gap:40px}
 #heroMark #wordmark{font-size:18.5vw;line-height:.88}
 .count-summary{gap:20px}
 #heroMark #zero{font-size:116px;padding:0;line-height:1}
 .count-label{font-size:11px;margin-bottom:10px}
 .nothing-yet{font-size:25px;line-height:1.06;max-width:15ch;padding:0}
 .signup{margin-top:24px;padding-top:24px}
 .text-section p{font-size:21px;line-height:1.4}
 .text-section .lead{font-size:34px;line-height:1.1}
 .manifesto-copy p{min-height:48svh;padding:8vh 0}
 .section-kicker{margin-bottom:7vh}
}

/* A condensed display face gives the name drama without enlarging body copy. */
:root{--display:Impact,"Haettenschweiler","Arial Narrow",sans-serif}
.mast>span{font-family:var(--display);font-weight:400;font-size:clamp(34px,4vw,58px);line-height:.88;letter-spacing:-.01em}
#wordmark{font-family:var(--display);font-weight:400;letter-spacing:0}
#heroMark #wordmark{font-family:var(--display);font-weight:400;font-size:clamp(100px,14vw,210px);line-height:.88;letter-spacing:-.015em}
#debris{height:180px;overflow:visible}
@media(max-width:700px){.mast>span{font-size:32px}#heroMark #wordmark{font-size:26vw;line-height:.9;letter-spacing:-.015em}}
@media(max-width:700px) and (max-height:700px){.mast>span{font-size:26px}}

/* Editorial copy reads as a short position, not a sequence of empty screens. */
.manifesto-copy p,.manifesto-copy p:first-child{display:block;min-height:0;padding:0;margin:0 0 28px}
.manifesto-copy .lead{margin-bottom:40px}
.manifesto{padding-bottom:80px;padding-top:24px}
.editor{min-height:0;padding-top:24px;padding-bottom:80px}
.editor-copy .editor-credit{font:12px/1.4 var(--mono);letter-spacing:.03em;margin-bottom:20px}
.editor-copy p{font-size:22px;max-width:34ch;margin-bottom:20px}
.editor-copy .action-link{margin-top:8px}
@media(max-width:700px){.manifesto,.editor{padding-bottom:64px}.section-kicker{margin-bottom:32px}.manifesto-copy p{font-size:20px;margin-bottom:24px}.manifesto-copy .lead{font-size:32px;margin-bottom:32px}.editor-copy p{font-size:20px}}

/* Cropped opening masthead; the preferred publication wordmark remains intact. */
.mast{margin-left:-30px;padding-left:0;overflow:hidden;align-items:start}
.mast>span{font-size:clamp(56px,6.5vw,94px);line-height:.82;letter-spacing:-.02em;transform:translateX(-.055em);padding-bottom:.08em}
.mast small{padding-right:0;flex:none}
#heroMark #wordmark{font-family:var(--sans);font-weight:900;font-size:clamp(76px,10vw,150px);line-height:.87;letter-spacing:-.065em}
.editor-copy .contact-email{font-size:clamp(18px,2vw,26px);margin:0 0 44px}
.editorial-masthead{border-top:1px solid #0a0a0a30;padding-top:20px}
.editorial-masthead .editor-credit{margin-bottom:14px}
.glyph{cursor:grab;touch-action:none;user-select:none;pointer-events:auto}
.glyph:active{cursor:grabbing}
@media(max-width:700px){.mast{margin-left:-18px}.mast>span{font-size:48px}#heroMark #wordmark{font-size:18.5vw;line-height:.88}}
@media(max-width:700px) and (max-height:700px){.mast>span{font-size:34px}}

/* Full, uncropped title while the three treatments are being compared. */
.mast{margin-left:0;overflow:visible;gap:16px}
.mast>span{font-family:var(--sans);font-weight:900;font-size:clamp(36px,4vw,64px);line-height:.76;letter-spacing:-.065em;transform:none;padding:0}
.mast-line{display:block}
.intro-foot{justify-content:flex-end}
.slot{touch-action:none}.glyph::before{content:"";position:absolute;inset:-6px -2px}
.type-word{display:inline-block;white-space:nowrap}
.type-slot,.type-letter{display:inline-block;position:relative;vertical-align:baseline}
.type-slot{touch-action:none}.type-letter{cursor:grab;user-select:none;touch-action:none}
.type-letter::before{content:"";position:absolute;inset:-5px -1px}
.type-letter:active{cursor:grabbing}
.free-letter{position:absolute!important;z-index:80;pointer-events:auto;will-change:transform}
#heroMark #wordmark .type-slot,#heroMark #wordmark .type-letter{display:inline-block}
:root[data-masthead="a"] .mast-title{font-size:clamp(56px,8.2vw,118px);line-height:.69;letter-spacing:-.075em;font-family:Arial,Helvetica,sans-serif;font-weight:900}
:root[data-masthead="b"] .mast-title{font-size:clamp(48px,7vw,100px);line-height:.81;letter-spacing:-.055em;font-family:"Helvetica Neue",Arial,sans-serif;font-weight:700}
:root[data-masthead="b"] .mast-line:last-child{margin-left:.8em}
:root[data-masthead="c"] .mast-title{font-size:clamp(58px,9vw,128px);line-height:.77;letter-spacing:-.02em;font-family:Impact,"Arial Narrow",sans-serif;font-weight:400}
@media(max-width:700px){.mast>span{font-size:34px}.mast small{font-size:11px}:root[data-masthead="a"] .mast-title{font-size:13.5vw}:root[data-masthead="b"] .mast-title{font-size:12vw}:root[data-masthead="c"] .mast-title{font-size:15vw}}

.complete>.free-letter[data-from-intro="true"]{color:#868680!important}

.contact-line{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:44px}.contact-line .contact-email{margin:0}.contact-say{font:14px/1.4 var(--mono)}

/* A zero-width baseline strut remains after its letter leaves the line. */
.type-slot::after{content:"\200b";display:inline-block;width:0;pointer-events:none}
.label .slot,.eyebrow .slot{vertical-align:top}

/* Selected A: slightly taller letters and the same near-collision stack throughout. */
:root[data-masthead="a"] .mast-title{font-size:clamp(60px,8.8vw,126px);line-height:.69;letter-spacing:-.08em}
#heroMark #wordmark{font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:clamp(80px,10.8vw,162px);line-height:.69;letter-spacing:-.08em}
@media(max-width:700px){:root[data-masthead="a"] .mast-title{font-size:14.5vw}#heroMark #wordmark{font-size:20vw;line-height:.69;letter-spacing:-.08em}}

/* One slight irregularity in the selected masthead. */
.type-letter.tilted-c{font-size:1.08em;rotate:-6deg}
.free-letter.tilted-c{rotate:none}

/* A small ink-drawn arrow stays an arrow when picking up type. */
@media (hover:hover) and (pointer:fine){
  :root{--drawn-cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M4%203%20L7%2025%20L12%2018%20L18%2028%20L22%2025%20L16%2016%20L25%2015%20Z%22%20fill%3D%22%23f3f1e8%22%20stroke%3D%22%23171715%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M7%207%20L9%2017%20M10%208%20L19%2013%22%20fill%3D%22none%22%20stroke%3D%22%23171715%22%20stroke-width%3D%22.8%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") 4 3,default}
  body,body *,a,button,.glyph,.type-letter,.glyph:active,.type-letter:active{cursor:var(--drawn-cursor)}
  input,textarea,[contenteditable="true"]{cursor:text}
}

/* Short-but-wide viewports: the intro is height-constrained, not width-constrained,
   so the masthead and counter stack are capped against svh as well as vw. Without
   this a 1440x800 laptop renders desktop-sized type in 800px of room and scrolls. */
@media(max-height:900px) and (min-width:701px){
  #intro{gap:18px;padding:20px 30px 12px}
  .eyebrow{margin-bottom:14px}
  .counter-row{padding:6px 0}
  .finite{margin-top:14px}
  :root[data-masthead="a"] .mast-title{font-size:clamp(46px,min(8.2vw,10.5svh),118px)}
  :root[data-masthead="b"] .mast-title{font-size:clamp(42px,min(7vw,9svh),100px)}
  :root[data-masthead="c"] .mast-title{font-size:clamp(48px,min(9vw,11svh),128px)}
}
@media(max-height:780px) and (min-width:701px){
  #intro{gap:12px;padding:14px 30px 10px}
  .eyebrow{margin-bottom:10px}
  .counter-row{padding:4px 0}
  .finite{margin-top:10px}
}

/* The intro wordmark is a counter label, not a masthead: it sits on the FINITE
   CONTENT row beside BOOKS and SONGS, so it takes the same face as .label.
   Overrides the leftover Impact rule from the masthead studies. #heroMark
   #wordmark is scoped separately and keeps the display face. */
#intro #wordmark{font-family:var(--sans);font-weight:600;font-size:clamp(12px,1.2vw,17px);line-height:1.1;letter-spacing:-.02em}

/* The manifesto opens with body-size copy rather than an oversized lead, so it
   needs more air below the section rule than the default 18px to read as a
   deliberate opening instead of text crowding the border. */
.manifesto{padding-top:72px}
@media(max-width:700px){.manifesto{padding-top:40px}}

/* Manifesto set in the newspaper face against the Impact masthead and mono
   furniture. Times has a small x-height and fine serifs, so it needs a size
   bump and looser tracking than the grotesk body default's -.05em. */
.manifesto-copy{font-family:"Cormorant Garamond","Times New Roman",Times,serif;font-style:italic}
.manifesto-copy p{font-size:clamp(19px,2vw,31px);line-height:1.3;letter-spacing:0}
@media(max-width:700px){.manifesto-copy p{font-size:21px;line-height:1.32}}

/* Email addresses are mono everywhere they appear on this site (the Contact
   link, the status line). The signup field was the one place an address was
   set in the grotesk. Mono also makes a typed address easier to proofread. */
.signup input{font-family:var(--mono);letter-spacing:-.02em}
.signup input::placeholder{color:#0a0a0a66}

/* Tagline under the wordmark on both screens. Mono uppercase, matching the
   site's other furniture (FC-000, WORKS PUBLISHED, the section kickers)
   rather than competing with the display face above it. */
.tagline{margin:0;font:11px/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase}
.mast{flex-wrap:wrap}
.mast-tagline{width:100%;margin-top:4px}
/* The 8vw gap on #heroMark applies to rows too, which stranded the tagline
   ~200px below the wordmark. Zero the row gap and butt the two together at
   the row boundary: wordmark to the bottom of row 1, tagline to the top of
   row 2. That holds regardless of how the taller right-hand column sizes
   the rows. */
#heroMark{row-gap:0}
#heroMark #wordmark{align-self:end}
#heroMark .publication-state{grid-row:1/3;align-self:center}
#heroMark .hero-tagline{grid-column:1;grid-row:2;align-self:start;margin-top:18px;font-size:12px}
@media(max-width:700px){
  .tagline{font-size:10px;letter-spacing:.12em}
  #heroMark .hero-tagline{grid-column:1;grid-row:2;margin-top:12px}
}