@import url('./desk-tokens.css');

:root {
  --paper: #fcfbf7;
  --ink: #1a1917;
  --pencil: #6b6560;
  --quiet: #a9a39a;
  --rule: #e4e0d6;
  --accent: #d2452b;
  --max-w: 1180px;
  --display: Archivo, Arial, sans-serif;
  --utility: "IBM Plex Mono", monospace;
}
* { box-sizing: border-box; }
html { background: var(--desk); color: var(--ink); }
body { margin: 0; color: var(--ink); font: 1rem/1.68 "Source Serif 4", Georgia, serif; }
a { color: inherit; text-decoration-thickness: .07em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .13em; }
a:focus-visible, input:focus-visible, button:focus-visible { outline: 3px solid #2b5fa8; outline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; }
button { cursor: pointer; }
.visually-hidden { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; padding: .65rem .85rem; z-index: 10; }
.skip-link:focus { top: 1rem; background: var(--ink); color: var(--paper); }

/* Ink bands align with the desk content, and continue to the viewport edges. */
.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 16px max(56px, calc((100% - 1068px)/2)); background: var(--ink); color: var(--paper); font: 500 .65625rem/1.68 var(--utility); letter-spacing: .13em; text-transform: uppercase; }
.site-nav a { text-decoration: none; color: #b9b4ac; }
.site-nav .site-nav__brand, .site-nav a[aria-current="page"] { color: var(--paper); }
.site-nav a[aria-current="page"] { border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
.site-nav__links { display: flex; align-items: center; gap: 22px; }
.masthead { max-width: var(--max-w); margin: auto; padding: 56px 56px 30px; display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.masthead__lead { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.live-wordmark { width: 360px; transform: rotate(-1deg); transform-origin: 50% 80%; mix-blend-mode: multiply; }
.masthead h1 { font: 800 2.5rem/1.1 var(--display); letter-spacing: -.03em; max-width: 20ch; margin: 0; }
.now-scrap { width: 320px; flex-shrink: 0; filter: drop-shadow(0 4px 10px rgba(46,32,14,.28)); transform: rotate(.9deg); }
.now-card { background: #fbf1ec; clip-path: var(--tear-scrap); padding: 24px 26px; display: flex; flex-direction: column; gap: 11px; }
.section-kicker { font: 500 .625rem/1.6 var(--utility); color: var(--accent); letter-spacing: .15em; text-transform: uppercase; margin: 0; }
.now-card__text { font: 600 1.0625rem/1.4 var(--display); letter-spacing: -.01em; margin: 0; }
.now-card__summary { font: .65625rem/1.65 var(--utility); color: var(--pencil); margin: 0; }
.now-card__summary a { text-decoration: none; }
.now-card__summary a:hover { text-decoration: underline; }
.stream-layout { max-width: var(--max-w); margin: auto; padding: 28px 56px 64px; }
.stream-list, .practice-list { display: flex; flex-direction: column; gap: 44px; min-width: 0; }

/* Shadow belongs to the wrapper; the inner paper owns its clipped edge. */
.paper-sheet { --sheet-angle: -.4deg; --sheet-edge: var(--tear-a); --sheet-grain: var(--sheet-grain-a); width: 100%; max-width: 950px; align-self: flex-start; filter: drop-shadow(0 6px 14px rgba(46,32,14,.3)); transform: rotate(var(--sheet-angle)); }
.paper-sheet:nth-child(even) { --sheet-angle: .45deg; --sheet-edge: var(--tear-b); --sheet-grain: var(--sheet-grain-b); align-self: flex-end; }
.stream-entry, .entry-page__article, .about-content, .earlier-entries, .empty-stream { position: relative; isolation: isolate; background-color: var(--paper); background-image: var(--sheet-grain); clip-path: var(--sheet-edge); padding: 46px 50px; overflow: hidden; }
.sheet-content { position: relative; display: flex; flex-direction: column; gap: 15px; }
.entry-kind-mark { position: absolute; top: 18px; left: 22px; width: 68px; height: 68px; object-fit: contain; mix-blend-mode: multiply; }
.sheet-watermark { position: absolute; right: -30px; bottom: -30px; width: 280px; height: 280px; max-width: none; object-fit: contain; opacity: .08; pointer-events: none; z-index: -1; mix-blend-mode: multiply; }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-left: 78px; font: .6875rem/1.6 var(--utility); color: var(--pencil); }
.entry-meta time { color: var(--ink); font-weight: 500; }
.entry-kind-label { color: var(--project-colour, var(--pencil)); font-size: .625rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.entry-meta a { text-decoration: none; }
.entry-project { display: inline-flex; align-items: center; gap: 6px; }
.project-dot { display: inline-block; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--project-colour); }
.entry-project__glyph, .earlier-entry__project-glyph { display: inline-block; flex-shrink: 0; width: 1rem; height: 1rem; background: var(--project-colour); mask: var(--project-glyph) center/contain no-repeat; }
.stream-entry h2 { margin: 0; padding-left: 78px; font: 700 2.375rem/1.08 var(--display); letter-spacing: -.025em; overflow-wrap: anywhere; }
.stream-entry h2 a { text-decoration: none; }
.stream-entry h2 a:hover { text-decoration: underline; }
.stream-entry__body { font-size: 1.03125rem; line-height: 1.68; max-width: 62ch; margin-top: 6px; }
.stream-entry__body p { margin: 12px 0 0; }
.stream-entry__body p:first-child { margin-top: 0; }
.stream-entry__teaser { margin-top: 8px; }
.stream-entry__teaser--with-media { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 22px; align-items: start; }
.stream-entry__teaser-copy { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stream-entry__preview { font-size: 1rem; line-height: 1.66; }
.stream-entry__preview--model, .model-text { background: rgba(107,101,96,.08); border: 1px solid #d8d4ca; border-left: 4px solid var(--pencil); color: #45433f; padding: 15px 17px; }
.stream-entry__preview p { margin: 0; }
.stream-entry__preview p + p { margin-top: 9px; }
.stream-entry__preview-label, .model-text__label { font: 500 .625rem/1.6 var(--utility); letter-spacing: .13em; text-transform: uppercase; color: var(--pencil); }
.stream-entry__read-more { align-self: flex-start; font: 500 .6875rem/1.6 var(--utility); color: var(--accent); }
.stream-entry__media { margin: 0; max-width: 38rem; }
.stream-entry__media--compact img { width: 100%; }
.reply-invitation { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--pencil); font-size: .875rem; }
.reply-invitation a { background: var(--ink); color: var(--paper); font: 500 .625rem/1.6 var(--utility); letter-spacing: .1em; text-transform: uppercase; padding: 10px 14px; text-decoration: none; }
.desk-divider { width: 60%; height: 18px; object-fit: fill; margin: 48px auto 0; mix-blend-mode: multiply; }

.paper-sheet.earlier-sheet { --sheet-angle: 0deg; max-width: 950px; align-self: center; }
.earlier-entries > h2 { font: 500 .59375rem/1.6 var(--utility); letter-spacing: .16em; color: #8a847c; text-transform: uppercase; margin: 0 0 12px; }
.earlier-entry { display: grid; grid-template-columns: 8rem 1.25rem 5.4rem minmax(0,1fr) 7rem; gap: 12px; align-items: center; border-top: 1px solid var(--rule); padding: 13px 0; font: .6875rem/1.5 var(--utility); }
.earlier-entry time, .earlier-entry__project { color: var(--pencil); }
.earlier-entry__mark { width: 1.25rem; height: 1.25rem; object-fit: contain; }
.earlier-entry__kind { color: var(--project-colour); text-transform: uppercase; font-size: .625rem; letter-spacing: .12em; }
.earlier-entry h3 { font: 600 1rem/1.35 var(--display); margin: 0; }
.earlier-entry h3 a { text-decoration: none; }
.earlier-entry__project { display: flex; align-items: center; justify-content: flex-end; gap: 6px; text-align: right; }
.empty-stream h2 { font: 700 1.8rem/1.2 var(--display); }
.empty-stream p { color: var(--pencil); }

.newsletter-footer { background: var(--ink); color: var(--paper); }
.newsletter-footer__inner { max-width: var(--max-w); margin: auto; padding: 34px 56px 40px; display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 44px; align-items: center; }
.newsletter-footer__signoff { font: 700 1.625rem/1.24 var(--display); letter-spacing: -.02em; color: var(--paper); }
.newsletter-footer__copy p { margin: 0; }
.newsletter-footer__copy p + p { color: #b9b4ac; font-size: .875rem; line-height: 1.6; max-width: 46ch; margin-top: 10px; }
.newsletter-footer__signup { display: flex; flex-direction: column; gap: 9px; }
.newsletter-footer__signup form, .newsletter-placeholder { display: flex; }
.newsletter-footer__signup input { flex: 1; min-width: 0; background: var(--ink); color: var(--paper); border: 1.5px solid var(--paper); border-right: 0; font: .8125rem/1.6 var(--utility); padding: 13px 14px; border-radius: 0; }
.newsletter-footer__signup input::placeholder { color: var(--quiet); }
.newsletter-footer__signup button { background: var(--paper); color: var(--ink); border: 0; padding: 13px 18px; font: 500 .6875rem/1.6 var(--utility); letter-spacing: .1em; text-transform: uppercase; }
.newsletter-status, .newsletter-rss { font: .65625rem/1.6 var(--utility); color: #a9a39a; margin: 0; }
.newsletter-placeholder { gap: 1rem; font-family: var(--utility); }

/* Reading pages keep a straight sheet and the existing long-form type. */
.reading-desk { width: 100%; max-width: calc(47.5rem + 128px + 112px); margin: 0 auto; padding: 36px 56px 64px; }
.back-link { display: inline-block; color: var(--pencil); font: .6875rem/1.6 var(--utility); margin-bottom: 24px; }
.paper-sheet.reading-sheet { --sheet-angle: 0deg; max-width: none; }
.entry-page__article, .about-content { padding: 56px 64px; }
.entry-header { border-bottom: 3px solid var(--project-colour); padding-bottom: 40px; }
.entry-identity { padding-left: 78px; }
.entry-kind, .entry-date { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: .6875rem/1.65 var(--utility); margin: 0; }
.entry-kind span:first-child { color: var(--project-colour); font-size: .625rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; }
.entry-kind span:last-child, .entry-date { color: var(--pencil); }
.entry-date { margin-top: 4px; }
.entry-date a { text-decoration: none; }
.entry-header h1 { font: 700 clamp(2.45rem, 7vw, 4.75rem)/1.02 var(--display); letter-spacing: -.03em; margin: 26px 0 0; overflow-wrap: anywhere; }
.entry-media { margin: 44px 0; }
.entry-media--small { max-width: 220px; }
.entry-media--small img, .stream-entry__media--small img { mix-blend-mode: multiply; }
.entry-body { font-size: clamp(1.08rem,2.5vw,1.24rem); line-height: 1.72; margin: 44px 0; max-width: 39rem; overflow-wrap: anywhere; }
.entry-body p { margin: 1.15rem 0; }
.entry-inline-image { margin: 2rem 0; max-width: 34rem; }
.entry-inline-image img { border: 1px solid var(--rule); width: 100%; }
.entry-inline-image figcaption { color: var(--pencil); font: .6875rem/1.6 var(--utility); margin-top: 9px; }
.model-text { margin: 2rem 0; padding: 20px 22px; }
.model-text .model-text__label { margin: 0 0 1rem; }
.model-text p { margin: 1rem 0 0; }
.drawn-divider { width: 60%; height: 18px; object-fit: fill; margin: 48px auto 24px; mix-blend-mode: multiply; }
.entry-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font: .6875rem/1.6 var(--utility); color: var(--pencil); }
.practice-masthead .live-wordmark { width: 240px; }
.practice-card { background-color: var(--paper); }
.practice-card .section-kicker { color: var(--pencil); display: flex; align-items: center; gap: 10px; }
.practice-mark { width: 22px; height: 22px; object-fit: contain; mix-blend-mode: multiply; }
.about-content .section-header h1 { font: 800 clamp(2.45rem,5vw,3.5rem)/1.08 var(--display); letter-spacing: -.03em; margin: 18px 0; }
.about-content .section-header > p:last-child { color: var(--pencil); font-size: 1.15rem; }
.about-prose { max-width: 39rem; }
.about-prose h2, .about-signup h2 { font: 700 1.45rem/1.25 var(--display); letter-spacing: -.02em; margin: 42px 0 10px; }
.about-prose p { font-size: 1.08rem; margin: 13px 0; }
.kinds-legend { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin: 28px 0; }
.kinds-legend__item { display: flex; gap: 12px; align-items: start; }
.kinds-legend__item img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; mix-blend-mode: multiply; }
.kinds-legend__item strong { font: 500 .875rem/1.6 var(--utility); }
.kinds-legend__item p { font-size: .875rem; color: var(--pencil); margin: 3px 0 0; }
.about-signup { border-top: 1px solid var(--rule); margin-top: 36px; }
.about-signup .newsletter-footer__signup { margin-top: 20px; }
.about-signup input { background: transparent; color: var(--ink); border-color: var(--ink); }
.about-signup button { background: var(--ink); color: var(--paper); }
.about-signup .newsletter-status, .about-signup .newsletter-rss { color: var(--pencil); }

@media (prefers-reduced-motion: no-preference) {
  .paper-sheet { animation: settle 360ms ease-out both; }
  .live-wordmark { animation: live-breathe 4.6s ease-in-out infinite; }
  .entry-kind-mark, .practice-mark, .earlier-entry__mark, .kinds-legend__item img { animation: mark-wobble 3.8s ease-in-out -.7s infinite; }
  .paper-sheet:nth-child(even) .entry-kind-mark, .kinds-legend__item:nth-child(even) img { animation-duration: 4.6s; animation-delay: -1.4s; }
  .sheet-watermark { animation: mark-wobble 6.5s ease-in-out -1s infinite; }
  .paper-sheet:nth-child(even) .sheet-watermark { animation-duration: 7s; animation-delay: -2s; }
  .desk-divider, .drawn-divider { animation: mark-wobble 7s ease-in-out -3s infinite; }
}
@keyframes settle { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@keyframes live-breathe { 0%,100% { transform: scale(1) rotate(-1deg); } 50% { transform: scale(1.015) rotate(-.5deg); } }
@keyframes mark-wobble { 0%,100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg) translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }

@media (max-width: 760px) {
  .site-nav { padding: 16px 20px; flex-wrap: wrap; gap: 8px 20px; }
  .site-nav__links { gap: 18px; flex-wrap: wrap; }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .masthead { padding: 30px 20px 20px; flex-direction: column; align-items: stretch; gap: 24px; }
  .live-wordmark { width: min(360px, 85%); }
  .masthead h1 { font-size: clamp(1.9rem,7vw,2.5rem); }
  .now-scrap { width: 100%; }
  .stream-layout { padding: 20px 20px 40px; }
  .stream-list, .practice-list { gap: 32px; }
  .paper-sheet { --sheet-angle: -.25deg; }
  .paper-sheet:nth-child(even) { --sheet-angle: .25deg; }
  .stream-entry, .entry-page__article, .about-content, .earlier-entries, .empty-stream { padding: 24px 22px; }
  .entry-kind-mark { width: 48px; height: 48px; left: 14px; top: 14px; }
  .sheet-watermark { width: 180px; height: 180px; right: -24px; bottom: -24px; }
  .entry-meta, .entry-identity { padding-left: 50px; gap: 6px 12px; }
  .stream-entry h2 { padding-left: 50px; font-size: clamp(1.5rem,5.5vw,2.375rem); }
  .stream-entry__teaser--with-media { grid-template-columns: 90px minmax(0,1fr); gap: 16px; }
  .stream-entry__body { font-size: 1rem; }
  .stream-entry h2 a, .stream-entry__read-more, .reply-invitation a, .back-link, .entry-footer a, .now-card__summary a, .newsletter-rss a, .earlier-entry h3 a { display: inline-flex; align-items: center; min-height: 44px; }
  .stream-entry h2 a { display: block; }
  .entry-meta a { display: inline-flex; align-items: center; min-height: 44px; }
  .desk-divider { width: 70%; margin-top: 36px; }
  .newsletter-footer__inner { padding: 16px 20px; grid-template-columns: minmax(0,1fr); gap: 20px; }
  .newsletter-footer__signup button, .newsletter-footer__signup input { min-height: 44px; }
  .reading-desk { padding: 20px 20px 40px; }
  .entry-header { padding-bottom: 26px; }
  .entry-header h1 { font-size: clamp(2.45rem,8vw,4.75rem); }
  .entry-body, .entry-media { margin: 28px 0; }
  .earlier-entry { grid-template-columns: 1.25rem 1fr; gap: 6px 12px; }
  .earlier-entry time { grid-column: 2; }
  .earlier-entry__mark { grid-column: 1; grid-row: span 2; }
  .earlier-entry__kind, .earlier-entry h3, .earlier-entry__project { grid-column: 2; }
  .earlier-entry__project { justify-content: flex-start; text-align: left; }
}
@media (max-width: 480px) {
  .stream-entry__teaser--with-media { grid-template-columns: minmax(0,1fr); }
  .stream-entry__media--compact { width: 110px; }
  .entry-meta { column-gap: 10px; }
  .entry-meta time { flex-basis: 100%; }
  .reply-invitation { align-items: flex-start; flex-direction: column; }
  .kinds-legend { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .newsletter-footer__signup button { padding: 13px 12px; }
  .entry-kind { align-items: flex-start; flex-direction: column; gap: 2px; }
}