/* nooneis.com — brief §5, translated from kit/reference/wireframe-desktop.dc.html (1440) and wireframe-phone.dc.html
   (390). Base rules are the phone arrangement; the desktop arrangement arrives at 900px. Light theme only. */

@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/barlow-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/barlow-condensed-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700.woff2) format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/dm-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/dm-mono-500.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/newsreader-400.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/newsreader-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/newsreader-700.woff2) format('woff2'); }   /* the manuscript's bold heads on /chapter-one (§6.6) */

:root {
  --paper: #F2F1EC;
  --ink: #120F0D;
  --quiet: #596F80;
  --small: #526677;
  --rule: #C4CACC;
  --rule-light: #D6DAD9;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Barlow', Arial, sans-serif;
  --mono: 'DM Mono', Menlo, monospace;
  --pad: 24px;                 /* side padding: 24 on the phone, 120 at 1440 */
  --col: 100%;                 /* the left column of the desktop grid */
  --gap: 0px;
  --book-text: 'kern', 'liga', 'onum';
}

html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.6; min-height: 100vh; overflow-x: hidden; }
.page { display: flex; flex-direction: column; min-height: 100vh; max-width: 1440px; margin: 0 auto; }
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; }
a { color: var(--ink); }
a:hover { color: var(--quiet); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
em { font-style: italic; }
p { margin: 0; }
.placeholder { color: var(--small); }

/* Buttons: paper on ink, 48px tall, square corners (reference). Real <button>s inside forms. */
.buy-form { display: flex; margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; box-sizing: border-box; border: 0; border-radius: 0; margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.btn--outlined { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn:hover { color: var(--paper); }
.btn--outlined:hover { color: var(--ink); }

/* ---- Header (§6.1) ---- */
.site-header { display: flex; justify-content: space-between; align-items: flex-end; padding: 20px var(--pad) 0; gap: 16px; }
.site-nav { display: flex; gap: 18px; font-family: var(--sans); font-size: 14px; line-height: 1.2; padding-bottom: 10px; }
.site-nav a { text-decoration: none; white-space: nowrap; padding: 12px 0; margin: -12px 0; }   /* 44px targets without moving the baseline */
.nav-long { display: none; }
.nav-short { display: inline; }
.record { font-family: var(--mono); font-size: 11px; line-height: 1.2; letter-spacing: 0.04em; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); white-space: nowrap; }

/* ---- Hero (§6.2) ---- */
.hero { display: flex; flex-direction: column; padding: 36px var(--pad) 56px; container-type: inline-size; }
/* The phone headline (owner's instruction of 2026-10-04): 66px at 390 wide, scaling with the screen, and always the same
   three lines. Its longest line, WHAT NO ONE, is 322px at 66px in Barlow Condensed 700, 94% of the 342px column at 390;
   sizing it at 19.3% of the hero's own column keeps that proportion at every width (52.5px at 320, 164px at 899), so
   no line can wrap and no two can join. The calc() is the same rule for browsers without container units. */
.headline { font-family: var(--display); font-weight: 700; font-size: calc((100vw - 48px) * 0.193); font-size: 19.3cqw; line-height: 0.92; text-transform: uppercase; order: -1; }
.hero__text { display: contents; }

/* The standing book (§5.4): the reference construction, with every length a fraction of the book's width (--bw) so
   that at 454px (desktop reference, re-issued 2026-10-04) and 290px (phone reference) it is the reference exactly.
   --sw is the spine's share of the width, --fz the front face's lift, --h1..--h4 the hinge gradient's stops. */
.stage { --bw: min(290px, 84.8cqw); --sw: 0.0828; --fz: 0.0414; --h1: 0.0138; --h2: 0.0241; --h3: 0.0379; --h4: 0.1103; container-type: inline-size; width: 342px; max-width: 100%; height: 480px; margin-top: 28px; display: flex; align-items: center; justify-content: center; perspective: 1600px; filter: drop-shadow(18px 22px 18px rgba(52, 44, 26, 0.30)); }
.book { position: relative; width: var(--bw); height: calc(var(--bw) * 1.5); transform-style: preserve-3d; transform: rotateY(28deg); }
.book__front { position: absolute; left: 0; top: 0; width: var(--bw); height: calc(var(--bw) * 1.5); transform: translateZ(calc(var(--bw) * var(--fz))); }
.book__front img { width: var(--bw); height: calc(var(--bw) * 1.5); }
.book__hinge { position: absolute; left: 0; top: 0; width: var(--bw); height: calc(var(--bw) * 1.5); background: linear-gradient(90deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.05) calc(var(--bw) * var(--h1)), rgba(255,255,255,0.14) calc(var(--bw) * var(--h2)), rgba(0,0,0,0.06) calc(var(--bw) * var(--h3)), rgba(0,0,0,0) calc(var(--bw) * var(--h4)), rgba(0,0,0,0) 88%, rgba(0,0,0,0.05) 100%); }
.book__spine { position: absolute; left: calc(var(--bw) * (1 - var(--sw)) / 2); top: 0; width: calc(var(--bw) * var(--sw)); height: calc(var(--bw) * 1.5); transform: rotateY(-90deg) translateZ(calc(var(--bw) * 0.5)); }
.book__spine img { width: calc(var(--bw) * var(--sw)); height: calc(var(--bw) * 1.5); }
.book__spine-shade { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0.24), rgba(0,0,0,0.12) 70%, rgba(0,0,0,0.20)); }

.title { margin: 32px 0 0; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.2; }
.subtitle { margin: 6px 0 0; font-size: 19px; line-height: 1.35; color: var(--small); }
.byline { margin: 16px 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; }

.buy-rows { margin-top: 36px; display: flex; flex-direction: column; border-top: 1.5px solid var(--ink); }
.buy-row { display: flex; flex-direction: column; gap: 14px; padding: 16px 0 18px; border-bottom: 1px solid var(--rule); }
.buy-row__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.buy-row__name { font-family: var(--display); font-weight: 600; font-size: 26px; text-transform: uppercase; line-height: 1.1; }
.buy-row__detail { font-family: var(--sans); font-size: 14px; line-height: 1.3; color: var(--small); margin-top: 2px; }
.buy-row__price { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.1; }
.buy-row .buy-form, .buy-row .btn { width: 100%; }
.sold-here { margin: 14px 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--small); }

/* ---- Back-cover paragraph (§6.3) ---- */
.back-cover { padding: 56px var(--pad); border-top: 1px solid var(--rule); }
.back-cover__text { font-size: 22px; line-height: 1.5; text-wrap: pretty; font-kerning: normal; font-feature-settings: var(--book-text); }
.back-cover__text .lead { text-transform: uppercase; font-size: 0.78em; letter-spacing: 0.06em; }

/* ---- Contents (§6.4) ---- */
.contents { display: flex; flex-direction: column; gap: 20px; padding: 56px var(--pad); border-top: 1px solid var(--rule); }
.section-head { margin: 0; font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; text-transform: uppercase; }
.contents-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.contents-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule-light); }
.contents-list .num { font-family: var(--mono); font-size: 12px; color: var(--small); }
.contents-list .ttl { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.1; }

/* ---- First chapter (§6.5) ---- */
.chapter-one { display: flex; flex-direction: column; padding: 56px var(--pad); border-top: 1px solid var(--rule); }
.small-label { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.3; color: var(--small); }
.chapter-one .section-head { margin-top: 6px; }
.chapter-one__body { display: flex; flex-direction: column; }
.chapter-one__text { margin-top: 24px; display: flex; flex-direction: column; }
.chapter-one__text p { font-size: 18px; line-height: 1.333; text-wrap: pretty; font-feature-settings: var(--book-text); }
.chapter-one__text p + p { margin-top: 0; text-indent: 1.5em; }   /* the book's body rules (§6.6, kit of 2026-10-04 afternoon) */
.read-link { margin-top: 24px; font-size: 20px; align-self: flex-start; }
.buy-pair { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.buy-pair .buy-form, .buy-pair .btn { width: 100%; }

/* ---- Author and list (§6.7) ---- */
.author { display: flex; flex-direction: column; padding: 48px var(--pad); border-top: 1px solid var(--rule); }
.author__note { font-size: 24px; line-height: 1.35; }
.list { display: flex; flex-direction: column; margin-top: 48px; }
.list__invite { font-size: 21px; line-height: 1.4; }
/* §10: after signing up, Kit returns the reader to /#subscribed. The confirmation is hidden until it is the URL's target;
   then it shows and the form goes, by CSS alone. It follows the invitation and precedes the form in the markup. */
.list__confirm { display: none; margin-top: 24px; font-size: 21px; line-height: 1.4; }
#subscribed:target { display: block; }
#subscribed:target ~ .list__form { display: none; }
.list__form { display: flex; flex-direction: column; margin: 0; }
.list__form label { margin-top: 24px; font-family: var(--sans); font-size: 14px; line-height: 1.3; color: var(--small); }
.list__row { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.list__row input { height: 52px; width: 100%; box-sizing: border-box; padding: 0 14px; border: 1px solid var(--ink); border-radius: 0; background: transparent; font-family: var(--sans); font-size: 17px; color: var(--ink); -webkit-appearance: none; appearance: none; }
.list__row input::placeholder { color: var(--small); }
.list__row .btn { height: 52px; width: 100%; }

/* ---- Footer (§6.8) ---- */
.site-footer { margin-top: auto; padding: 32px var(--pad) 40px; border-top: 1.5px solid var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.4; color: var(--small); }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.footer-domain { padding: 5px 10px; border: 1px solid var(--quiet); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--small); }
.footer-links { margin-top: 20px; font-size: 14px; color: var(--small); }
.footer-links a { color: var(--small); text-decoration: none; padding: 12px 0; margin: -12px 0; }
.footer-links a:hover { color: var(--quiet); text-decoration: underline; }

/* ---- /chapter-one, set as the typeset book sets it (§6.6, kit of 2026-10-04 20:06; reference/typeset-chapter-1-v9.pdf) ----
   Measured from the book (Miller Text 12pt on 16pt): body line-height 1.333, first-line indent 1.5em, no space between
   paragraphs, first paragraph flush. Chapter Number centered at body size; Chapter Title centered bold 1.5x; Mechanism
   Head centered bold 1.25x; Mechanism Inset roman, justified, 3em in on each side (1.5em on phone, per §6.6), no indent, 1em between its
   paragraphs and 1.5em after the block; "What follows" keeps its indent. Baseline-to-baseline distances in the book,
   in body ems: number→title 2.175, title→first line 3.333, last line→head 3.375, head→inset 2.417. The margins below
   produce those distances with Newsreader's metrics (checked in the browser). */
.chapter { padding: 40px var(--pad) 72px; max-width: 34em; margin: 0 auto; box-sizing: content-box; font-size: 18px; line-height: 1.333; }
.chapter__number { text-align: center; font-size: 1em; line-height: 1.333; margin: 0; }
.chapter__title { margin: 0.31em 0 1.28em; text-align: center; font-family: var(--serif); font-weight: 700; font-size: 1.5em; line-height: 1.2; }
.chapter__text { margin-top: 0; }
.chapter__text p { font-size: 1em; line-height: 1.333; margin: 0; text-indent: 1.5em; text-wrap: pretty; font-feature-settings: var(--book-text); }
.chapter__text > p:first-child { text-indent: 0; }
.chapter__head { margin: 1.5em 0 0.86em; text-align: center; font-family: var(--serif); font-weight: 700; font-size: 1.25em; line-height: 1.2; }
.chapter__inset { margin: 0 1.5em 1.5em; font-style: normal; }   /* §6.6: 1.5em each side on phone, 3em on desktop (the book itself measures 1.8em; see OPEN_ITEMS) */
.chapter__inset p { text-indent: 0; margin: 0; }
.chapter__inset p + p { margin-top: 1em; }
.chapter .buy-pair { margin-top: 56px; }
.chapter__back { margin-top: 32px; font-size: 20px; }

/* ---- /shipping, /privacy, /thanks, 404 ---- */
.doc { padding: 48px var(--pad) 72px; max-width: 34em; margin: 0 auto; box-sizing: content-box; }
.doc p { margin-top: 24px; font-size: 18px; line-height: 1.6; }
.doc .legal { margin-top: 48px; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--small); }

/* ---- Below about 360px: the flat cover (§5.4) ---- */
@media (max-width: 359px) {
  .site-header { flex-wrap: wrap; row-gap: 10px; }   /* the nav and the record line no longer fit side by side */
  .stage { width: 100%; height: auto; perspective: none; filter: drop-shadow(8px 10px 12px rgba(52, 44, 26, 0.30)); }
  .book { --bw: 100cqw; transform: none; }
  .book__front { position: static; transform: none; }
  .book__hinge, .book__spine { display: none; }
}

/* ---- Desktop arrangement (§5.3): from 900px, the reference's 1440 layout, scaled, exact at 1440 ---- */
@media (min-width: 900px) {
  :root { --pad: clamp(56px, 8.333vw, 120px); --col: 40%; --gap: 8%; }
  body { font-size: 21px; }

  .site-header { padding-top: 40px; }
  .site-nav { gap: 32px; font-size: 15px; padding-bottom: 12px; }
  .nav-long { display: inline; }
  .nav-short { display: none; }
  .record { font-size: 14px; padding-bottom: 10px; }

  .hero { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); column-gap: var(--gap); padding: 72px var(--pad) 96px; align-items: start; }
  .hero__text { display: flex; flex-direction: column; }
  .headline { order: 0; font-size: clamp(64px, 7.222vw, 104px); }
  .stage { --bw: min(454px, 94.6cqw); --sw: 0.0837; --fz: 0.0419; --h1: 0.011; --h2: 0.0198; --h3: 0.033; --h4: 0.0969; width: 100%; max-width: 480px; height: auto; aspect-ratio: 2 / 3; margin-top: 0; margin-left: -2.5%; perspective: 2200px; filter: drop-shadow(26px 30px 26px rgba(52, 44, 26, 0.30)); }   /* 454×681 in a 480×720 stage, 12px to the left: the reference exactly at 1440 */
  .title { margin-top: 44px; font-size: 34px; }
  .subtitle { font-size: 22px; }
  .byline { margin-top: 18px; font-size: 15px; }
  .buy-rows { margin-top: 48px; }
  .buy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; padding: 18px 0; gap: 0 32px; }
  .buy-row__top { display: contents; }
  .buy-row__name { font-size: 28px; }
  .buy-row__detail { font-size: 15px; }
  .buy-row__price { font-size: 28px; }
  .buy-row .buy-form { grid-column: 3; width: auto; }
  .buy-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .buy-row .btn { width: auto; min-width: 176px; }
  .sold-here { margin-top: 16px; font-size: 15px; line-height: 1.4; }

  .back-cover { padding: 128px var(--pad); }
  .back-cover__text { margin: 0 auto; max-width: 960px; font-size: clamp(24px, 2.153vw, 31px); line-height: 1.55; text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }

  .contents { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); column-gap: var(--gap); padding: 112px var(--pad); gap: 0 var(--gap); }
  .section-head { font-size: 56px; }
  .contents-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(11, auto); grid-auto-flow: column; column-gap: 40px; }
  .contents-list li { grid-template-columns: 36px minmax(0, 1fr); padding: 12px 0; }
  .contents-list .num { font-size: 13px; }
  .contents-list .ttl { font-size: 24px; }

  .chapter-one { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); column-gap: var(--gap); padding: 112px var(--pad); align-items: start; }
  .small-label { font-size: 15px; }
  .chapter-one .section-head { margin-top: 8px; }
  .chapter-one__body { max-width: 624px; }
  .chapter-one__text { margin-top: 0; }
  .chapter-one__text p { font-size: 21px; text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }
  .read-link { margin-top: 28px; font-size: 22px; }
  .buy-pair { flex-direction: row; gap: 16px; margin-top: 40px; }
  .buy-pair .buy-form, .buy-pair .btn { width: auto; }

  .author { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); column-gap: var(--gap); align-items: start; padding: 112px var(--pad); }
  .author__note { font-size: 26px; line-height: 1.4; }
  .list { margin-top: 0; max-width: 624px; }
  .list__invite { font-size: 24px; }
  .list__confirm { margin-top: 28px; font-size: 24px; }
  .list__form label { margin-top: 28px; }
  .list__row { flex-direction: row; }
  .list__row input { flex-grow: 1; width: auto; padding: 0 16px; }
  .list__row .btn { width: auto; padding: 0 28px; }

  .site-footer { padding: 40px var(--pad) 48px; font-size: 15px; }
  .footer-domain { padding: 6px 12px; font-size: 13px; }

  .chapter { padding: 72px var(--pad) 120px; font-size: 21px; }
  .chapter__text p { text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }
  .chapter__inset { margin-left: 3em; margin-right: 3em; }
  .chapter .buy-pair { margin-top: 72px; }
  .chapter__back { font-size: 22px; }

  .doc { padding: 72px var(--pad) 120px; }
  .doc p { font-size: 21px; }
  .doc .legal { font-size: 15px; }
}