/* tylerwince.com — UNIBODY
 * Milled from a single block: one typeface (Geist), two tones, one accent.
 * No borders anywhere — separation is done with surface tone and air.
 * Signature: the machining pass — the name resolves from blur under a
 * specular gleam, like light crossing brushed aluminum.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  --color-bg: #fbfbfd;
  --color-fg: #1d1d1f;
  --color-muted: #6e6e73;
  --color-accent: #0071e3;
  --color-border: rgba(29, 29, 31, 0.14);

  --color-surface: #f5f5f7;
  --color-elev: #ffffff;          /* raised element on a surface band */
  --color-cta: #0071e3;           /* filled buttons, both schemes */
  --color-cta-fg: #ffffff;
  --color-accent-inverted: #2997ff; /* accent on the inverted tile */
  --color-gleam: #a9a9b0;         /* the specular pass over the hero */

  --glass: rgba(251, 251, 253, 0.72);
  --shadow-capsule: 0 1px 1px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.09);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-cover: 0 10px 26px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);

  --font-display: "Geist", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Geist", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --content-w: 1056px;
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #000000;
    --color-fg: #f5f5f7;
    --color-muted: #86868b;
    --color-accent: #2997ff;
    --color-border: rgba(245, 245, 247, 0.18);

    --color-surface: #161617;
    --color-elev: #2c2c2e;
    --color-accent-inverted: #0071e3;
    --color-gleam: #ffffff;

    --glass: rgba(22, 22, 23, 0.78);
    --shadow-capsule: 0 1px 1px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-cover: 0 10px 26px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  }
}

/* ---------------------------------------------------------------- base */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; }

::selection { background: var(--color-accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* The TW monogram, drawn in currentColor. */
.monogram {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: currentColor;
  -webkit-mask: url("/assets/images/monogram.svg") no-repeat center / contain;
  mask: url("/assets/images/monogram.svg") no-repeat center / contain;
}

/* ---------------------------------------------------------------- banner */

.site-banner {
  background: var(--color-surface);
  font-size: 12px;
  color: var(--color-muted);
}

.banner-text {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 9px 20px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.banner-no { font-weight: 500; }

.banner-name {
  font-weight: 600;
  color: var(--color-fg);
  letter-spacing: 0.04em;
}

.banner-note { font-weight: 400; }

.banner-link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}

.banner-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- capsule nav */

.site-header {
  position: sticky;
  top: 12px;
  z-index: 1000;
  pointer-events: none;
  margin-top: 10px;
}

.site-nav {
  position: relative;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 16px;
}

.nav-capsule {
  pointer-events: auto;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px 7px 8px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: var(--shadow-capsule);
  transition: padding 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.is-scrolled .nav-capsule {
  padding-top: 5px;
  padding-bottom: 5px;
  box-shadow: var(--shadow-lift);
}

.site-title {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
}

.site-title-mark { width: 19px; height: 19px; }

.site-title-text {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item { display: block; }

.nav-link {
  display: block;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-fg) 82%, var(--color-muted));
  text-decoration: none;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.nav-link:hover {
  background: color-mix(in srgb, var(--color-fg) 7%, transparent);
  color: var(--color-fg);
}

.nav-link.active {
  background: var(--color-fg);
  color: var(--color-bg);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: var(--color-fg);
}

.nav-toggle-line {
  width: 15px;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}

.nav-open .nav-toggle-line:nth-child(1) { transform: translateY(3.3px) rotate(45deg); }
.nav-open .nav-toggle-line:nth-child(2) { transform: translateY(-3.3px) rotate(-45deg); }

@media (max-width: 800px) {
  .nav-toggle { display: flex; }

  /* The capsule's backdrop-filter makes it the containing block for this
     absolutely-positioned sheet — size and center it in viewport units. */
  .nav-list {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 32px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px;
    border-radius: 26px;
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    backdrop-filter: blur(24px) saturate(1.8);
    box-shadow: var(--shadow-lift);
  }

  .nav-open .nav-list { display: flex; }

  .nav-link {
    font-size: 17px;
    padding: 13px 16px;
    border-radius: 16px;
  }
}

/* ---------------------------------------------------------------- shell */

.site-main {
  padding: 12px 24px 0;
}

.content-area {
  max-width: var(--content-w);
  margin: 0 auto;
}

/* ---------------------------------------------------------------- hero */

.hero {
  padding: clamp(84px, 13vh, 150px) 0 clamp(48px, 7vw, 84px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
}

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 9.5vw, 8rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.hero-meta {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.32rem);
  line-height: 1.45;
  color: var(--color-muted);
  max-width: 38ch;
  text-wrap: balance;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 6px;
}

.button {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: filter 0.25s var(--ease), transform 0.25s var(--ease);
}

.button--fill {
  background: var(--color-cta);
  color: var(--color-cta-fg);
  padding: 12px 24px;
  border-radius: 999px;
}

.button--fill:hover { filter: brightness(1.1); }
.button--fill:active { transform: scale(0.98); }

.button--text { color: var(--color-accent); }
.button--text:hover { text-decoration: underline; }

/* The machining pass. */
.hero-char { display: inline-block; }

.hero-title.is-machining .hero-char {
  opacity: 0;
  animation: machine-in 0.95s var(--ease) both;
  animation-delay: calc(0.15s + var(--i) * 0.05s);
}

@keyframes machine-in {
  0%   { opacity: 0; filter: blur(14px); transform: translateY(0.14em) scale(1.03); }
  45%  { opacity: 1; color: var(--color-gleam); }
  72%  { filter: blur(0); }
  100% { opacity: 1; filter: blur(0); transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero-meta { animation: fade-up 0.8s var(--ease) 0.75s both; }
  .js .hero-actions { animation: fade-up 0.8s var(--ease) 0.9s both; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- home sections */

.home { padding-bottom: 24px; }

.home-section { margin: clamp(84px, 11vw, 140px) 0; }

.section-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 6px 20px;
  margin-bottom: 34px;
}

.section-label {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent);
}

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.view-all {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  padding-bottom: 5px;
  white-space: nowrap;
}

.view-all:hover { text-decoration: underline; }

/* Apps — the bento. */
.app-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.app-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 296px;
  padding: 36px;
  border-radius: 30px;
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.app-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

.app-card:nth-child(1),
.app-card:nth-child(4) {
  grid-column: span 4;
  flex-direction: row;
  align-items: center;
  gap: 32px;
}

/* One tile is inverted — the block shows its other face. */
.app-card:nth-child(1) {
  background: var(--color-fg);
  color: var(--color-bg);
}

.app-card:nth-child(1) .app-desc {
  color: color-mix(in srgb, var(--color-bg) 62%, transparent);
}

.app-card:nth-child(1) .app-more { color: var(--color-accent-inverted); }

.app-icon {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: var(--shadow-card);
}

.app-icon--glyph {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-fg) 8%, transparent);
  font-size: 34px;
  font-weight: 600;
}

.app-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.app-card:nth-child(1) .app-info,
.app-card:nth-child(4) .app-info { flex: 1; }

.app-name {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.app-desc {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--color-muted);
  max-width: 44ch;
}

.app-more {
  margin-top: auto;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-accent);
  white-space: nowrap;
}

.app-card:nth-child(1) .app-more,
.app-card:nth-child(4) .app-more {
  margin-top: 0;
  margin-left: auto;
  align-self: center;
}

@media (max-width: 1000px) {
  .app-list { grid-template-columns: 1fr 1fr; }

  .app-card,
  .app-card:nth-child(1),
  .app-card:nth-child(4) {
    grid-column: span 1;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .app-card:nth-child(1) .app-more,
  .app-card:nth-child(4) .app-more {
    margin-top: auto;
    margin-left: 0;
    align-self: flex-start;
  }
}

@media (max-width: 640px) {
  .app-list { grid-template-columns: 1fr; }
  .app-card { padding: 30px; }
}

/* Writing — the editorial index on a quiet band. */
.home-section--writing {
  background: var(--color-surface);
  border-radius: 34px;
  padding: clamp(34px, 5.5vw, 66px);
}

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.post-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: baseline;
  gap: 20px;
  padding: 20px 22px;
  border-radius: 18px;
  color: inherit;
  text-decoration: none;
  transition: background 0.25s var(--ease);
}

.post-row:hover { background: var(--color-elev); }

.post-date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-muted);
  white-space: nowrap;
}

.post-title {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.post-open {
  font-size: 20px;
  color: var(--color-muted);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}

.post-row:hover .post-open {
  transform: translateX(4px);
  color: var(--color-accent);
}

@media (max-width: 640px) {
  .post-row {
    display: block;
    position: relative;
    padding-right: 44px;
  }

  .post-date { display: block; margin-bottom: 4px; }

  .post-open {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

  .post-row:hover .post-open { transform: translateY(-50%) translateX(4px); }
}

/* Reading — the shelf rides past the page edge. */
.book-grid {
  list-style: none;
  margin: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 12px max(24px, calc((100vw - var(--content-w)) / 2)) 30px;
  scroll-padding-inline: max(24px, calc((100vw - var(--content-w)) / 2));
  scrollbar-width: none;
}

.book-grid::-webkit-scrollbar { display: none; }

.book-card {
  flex: 0 0 168px;
  scroll-snap-align: start;
}

.book-card > a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.book-card-cover {
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-cover);
  margin-bottom: 12px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.book-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-card-cover b {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 42px;
  font-weight: 600;
  color: var(--color-muted);
}

.book-card > a:hover .book-card-cover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.book-card-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-card-author {
  font-size: 12.5px;
  color: var(--color-muted);
}

.book-card-status {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  margin-top: clamp(90px, 12vw, 150px);
  background: var(--color-surface);
  padding: 56px 24px 44px;
  font-size: 14px;
}

.footer-inner {
  max-width: var(--content-w);
  margin: 0 auto;
}

.footer-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 44px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.footer-line .monogram { width: 22px; height: 22px; }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  max-width: 720px;
}

.footer-col-title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.footer-links,
.social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  color: color-mix(in srgb, var(--color-fg) 78%, var(--color-muted));
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--color-fg);
  text-decoration: underline;
}

.footer-legal {
  margin: 48px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------------------------------------------------------------- articles */

.article,
.service-manual,
.book-score-sheet,
.operator-sheet {
  padding-top: clamp(40px, 6vw, 72px);
}

.article-header {
  max-width: 680px;
  margin: 0 auto 48px;
}

.article-kicker {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  margin: 0 0 14px;
  text-transform: capitalize;
}

.article-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.article-description {
  margin: 18px 0 0;
  font-size: 21px;
  line-height: 1.45;
  color: var(--color-muted);
  text-wrap: balance;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
}

.meta-item {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-muted);
}

.article-body {
  max-width: 680px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.65;
}

.article-body p { margin: 0 0 1.15em; }

.article-body h2 {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 2.2em 0 0.65em;
}

.article-body h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 1.9em 0 0.6em;
}

.article-body ul,
.article-body ol {
  margin: 0 0 1.15em;
  padding-left: 1.25em;
}

.article-body li { margin: 0.4em 0; }

.article-body img { border-radius: 16px; }

.article-body :is(p, li, blockquote, figcaption) a {
  color: var(--color-accent);
  text-decoration: none;
}

.article-body :is(p, li, blockquote, figcaption) a:hover { text-decoration: underline; }

/* Ticket trim from the stable post layout — machined away. */
.article--ticket .ticket-rip { display: none; }

/* Content pages (page.html): wide shell, prose capped and centered. */
.service-manual .manual-body { max-width: var(--content-w); margin: 0 auto; }

.service-manual .manual-copy > :is(p, h2, h3, h4, ul, ol, blockquote) {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.service-manual .manual-copy > :is(h2, h3, h4) {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}

.service-manual .manual-copy > h2 { font-size: 27px; font-weight: 700; margin: 2em auto 0.65em; }
.service-manual .manual-copy > h3 { font-size: 20px; font-weight: 600; margin: 1.8em auto 0.6em; }
.service-manual .manual-copy > :is(p, ul, ol) { line-height: 1.65; }
.service-manual .manual-copy > :is(ul, ol) { padding-left: 1.25em; }

.manual-plate {
  max-width: 680px;
  margin: 0 auto 44px;
  text-align: center;
}

.manual-plate .article-kicker,
.manual-index,
.manual-badge,
.manual-rail { display: none; }

.manual-plate .article-meta { justify-content: center; }

/* Book pages (book.html). */
.book-score-sheet .article-kicker { font-size: 0; }
.book-score-sheet .article-kicker::before { content: "Book notes"; font-size: 14px; }

.book-score-header {
  max-width: 680px;
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px 36px;
  align-items: start;
}

.book-score-cover {
  grid-row: 1 / 3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-cover);
  background: var(--color-surface);
  aspect-ratio: 2 / 3;
}

.book-score-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-score-cover > span {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 44px;
  font-weight: 600;
  color: var(--color-muted);
}

.book-score-title .article-title { font-size: clamp(1.9rem, 4vw, 2.8rem); }

.book-byline {
  margin: 12px 0 0;
  font-size: 17px;
  color: var(--color-muted);
}

.book-score-meta {
  display: flex;
  gap: 28px;
  align-self: end;
}

.book-score-meta span { display: flex; flex-direction: column; gap: 2px; }

.book-score-meta b {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.book-score-meta span > :not(b) { font-size: 14px; }

@media (max-width: 640px) {
  .book-score-header { grid-template-columns: 110px 1fr; }
  .book-score-meta { flex-wrap: wrap; gap: 14px 24px; }
}

.pull-quote {
  max-width: 640px;
  margin: 44px auto;
  padding: 0;
  background: none;
  text-align: center;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.pull-quote-light { display: none; }

.pull-quote-mark {
  display: block;
  color: var(--color-accent);
  font-size: 2em;
  line-height: 1;
  margin-bottom: 8px;
}

.score-margin { display: none; }

/* App pages (app.html) — a product hero. */
.operator-sheet .article-kicker { font-size: 0; }
.operator-sheet .article-kicker::before { content: "App"; font-size: 14px; }

.app-machine-header {
  max-width: 720px;
  margin: 0 auto 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.app-medallion img {
  width: 116px;
  height: 116px;
  border-radius: 26px;
  box-shadow: var(--shadow-lift);
  display: block;
}

.app-medallion-ring { display: none; }

.app-title-panel .article-title { font-size: clamp(2.4rem, 5vw, 3.4rem); }

.app-title-panel .article-description { font-size: 21px; }

.app-spec-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 32px;
  margin-top: 4px;
}

.app-spec-panel > span { display: flex; flex-direction: column; gap: 2px; }

.app-spec-panel b {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.app-spec-panel span > :not(b) { font-size: 14px; }

.download-plunger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-cta);
  color: var(--color-cta-fg);
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: filter 0.25s var(--ease), transform 0.25s var(--ease);
}

.download-plunger:hover { filter: brightness(1.1); }
.download-plunger:active { transform: scale(0.98); }

.app-spec-panel .download-plunger { align-self: center; }

/* ---------------------------------------------------------------- content elements */

pre {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 20px 24px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  margin: 28px 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: color-mix(in srgb, var(--color-fg) 6%, transparent);
  padding: 2px 6px;
  border-radius: 6px;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

blockquote {
  margin: 28px 0;
  padding: 24px 28px;
  background: var(--color-surface);
  border-radius: 20px;
}

blockquote p:last-child { margin-bottom: 0; }

hr {
  border: 0;
  margin: 56px 0;
  display: flex;
  justify-content: center;
}

hr::before {
  content: "· · ·";
  color: var(--color-muted);
  letter-spacing: 0.5em;
  font-size: 17px;
}

/* ---------------------------------------------------------------- reading page */

.reading-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 920px;
  margin: 8px auto 60px;
  text-align: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 13px;
  color: var(--color-muted);
}

@media (max-width: 640px) {
  .reading-stats { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
}

/* The segmented control. */
.sort-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  margin: 0 auto 44px;
  padding: 4px;
  border-radius: 999px;
  background: var(--color-surface);
}

.sort-controls > span { display: none; }

.sort-link {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.sort-link:hover { color: var(--color-fg); }

.sort-link.active {
  background: var(--color-elev);
  color: var(--color-fg);
  box-shadow: var(--shadow-card);
}

@media (max-width: 640px) {
  .sort-controls { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .sort-controls::-webkit-scrollbar { display: none; }
}

.year-section {
  max-width: 760px;
  margin: 0 auto;
}

.year-section .year-heading {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 52px 0 10px;
  padding-left: 16px;
}

.book-list {
  max-width: 760px;
  margin: 0 auto;
}

.book-line {
  display: grid;
  grid-template-columns: 42px 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 11px 16px;
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  transition: background 0.25s var(--ease);
}

.book-line:hover { background: var(--color-surface); }

.book-target-hinge,
.book-line-flag { display: none; }

.book-line-cover {
  width: 42px;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.book-line:hover .book-line-cover { background: var(--color-elev); }

.book-line-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-line-cover b {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-muted);
}

.book-line-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.book-line-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.book-line-author {
  font-size: 13.5px;
  color: var(--color-muted);
}

.book-line-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.rating-lamps { display: flex; gap: 4px; }

.rating-lamps i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.15;
}

.book-line:not([data-rating]) .rating-lamps { display: none; }

.book-line[data-rating="1"] .rating-lamps i:nth-child(-n+1),
.book-line[data-rating="2"] .rating-lamps i:nth-child(-n+2),
.book-line[data-rating="3"] .rating-lamps i:nth-child(-n+3),
.book-line[data-rating="4"] .rating-lamps i:nth-child(-n+4),
.book-line[data-rating="5"] .rating-lamps i:nth-child(-n+5) { opacity: 0.9; }

.book-line-rating > span:not(.rating-lamps) {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-muted);
}

.book-target-arrow {
  font-size: 13px;
  color: var(--color-muted);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.book-line:hover .book-target-arrow { opacity: 1; }

@media (max-width: 640px) {
  .book-line { grid-template-columns: 38px 1fr auto; }
  .book-line-cover { width: 38px; }
  .book-target-arrow { display: none; }
  .book-line-rating > span:not(.rating-lamps) { display: none; }
}

/* ---------------------------------------------------------------- writing page */

.post-index {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.post-index-header { margin-bottom: 24px; }

.post-index-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 26px;
  padding: 26px 22px;
  border-radius: 20px;
  color: inherit;
  text-decoration: none;
  transition: background 0.25s var(--ease);
}

.post-index-row:hover { background: var(--color-surface); }

.post-index-date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-muted);
  padding-top: 5px;
  white-space: nowrap;
}

.post-index-title {
  display: block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.post-index-row:hover .post-index-title { color: var(--color-accent); }

.post-index-desc {
  display: block;
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-muted);
}

.post-index-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.post-index-topic {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-fg) 6%, transparent);
  color: var(--color-muted);
}

@media (max-width: 640px) {
  .post-index-row { display: block; }
  .post-index-date { display: block; padding-top: 0; margin-bottom: 6px; }
}

/* ---------------------------------------------------------------- apps page */

.app-showcase {
  max-width: 1000px;
  margin: 0 auto 90px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.app-showcase-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 210px;
  padding: 42px 40px;
  border-radius: 28px;
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.app-showcase-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

/* The showcase markup is text-only; the icons are set from here.
   Order matches apps.md: Etch, Waymark, Little Quotes, Yapware. */
.app-showcase-card::before {
  content: "";
  width: 64px;
  height: 64px;
  border-radius: 15px;
  margin-bottom: 18px;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-card);
}

.app-showcase-card:nth-child(1)::before { background-image: url("/assets/etch_logo.png"); }
.app-showcase-card:nth-child(2)::before { background-image: url("/assets/waymark_icon.png"); }
.app-showcase-card:nth-child(3)::before { background-image: url("/assets/littleQuotes_icon.png"); }
.app-showcase-card:nth-child(4)::before { background-image: url("/assets/yapware_logo.png"); }

/* Extra class in the selector: .article-body's h3 margins must not win here. */
.app-showcase-card .app-showcase-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.app-showcase-detail {
  font-size: 15px;
  color: var(--color-muted);
}

.app-showcase-card::after {
  content: "Learn more ›";
  margin-top: auto;
  padding-top: 26px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-accent);
}

@media (max-width: 640px) {
  .app-showcase { grid-template-columns: 1fr; }
  .app-showcase-card { min-height: 0; padding: 32px 30px; }
}

.philosophy-section {
  max-width: 1000px;
  margin: 0 auto;
}

.philosophy-section .philosophy-heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: capitalize;
  margin: 0 0 40px;
}

.philosophy-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
}

.philosophy-item { max-width: 44ch; }

.philosophy-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}

.philosophy-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
}

@media (max-width: 640px) {
  .philosophy-list { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------------------------------------------------------------- app content extras */

.feature-grid,
.screenshot-strip,
.stack-grid {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(960px, calc(100vw - 48px));
  margin-top: 32px;
  margin-bottom: 32px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.feature-card,
.feature {
  background: var(--color-surface);
  border-radius: 24px;
  padding: 28px;
}

.feature-card h3,
.feature h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.feature-card p,
.feature p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
}

/* Screenshots ride a strip, App Store style. */
.screenshot-strip {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 8px 4px 26px;
  scrollbar-width: none;
}

.screenshot-strip::-webkit-scrollbar { display: none; }

.screenshot-card {
  flex: 0 0 238px;
  margin: 0;
  scroll-snap-align: start;
}

.screenshot-card img {
  width: 100%;
  border-radius: 22px;
  box-shadow: var(--shadow-cover);
  display: block;
}

.stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 16px;
}

.stack-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.stack-card-stack { height: 100%; }

.stack-card-front {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--color-surface);
  border-radius: 20px;
  padding: 20px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.stack-card:hover .stack-card-front {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.stack-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stack-card-header .stack-card-count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-muted);
}

.stack-card-download-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-cta);
  color: var(--color-cta-fg);
  display: grid;
  place-items: center;
  font-size: 14px;
}

.stack-card-content { min-width: 0; }

.stack-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.stack-card-loading .stack-card-title { color: var(--color-muted); }

.callout {
  background: var(--color-surface);
  border-radius: 20px;
  padding: 26px 28px;
  margin: 32px 0;
}

.callout p { margin: 0 0 0.9em; }
.callout p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- archive page */

.archive-arcade {
  max-width: var(--content-w);
  margin: 0 auto;
}

/* Today's design — the inverted feature slab. */
.archive-today {
  background: var(--color-fg);
  color: var(--color-bg);
  border-radius: 32px;
  padding: clamp(38px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.archive-marquee {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.archive-today-label {
  font-family: var(--font-mono);
  font-size: 13px;
  opacity: 0.6;
}

.archive-today-theme {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.archive-today .archive-today-manifesto {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.55;
  opacity: 0.75;
  max-width: 58ch;
}

.archive-today-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.archive-meta-item {
  font-family: var(--font-mono);
  font-size: 13px;
  opacity: 0.7;
}

.archive-palette {
  display: inline-flex;
  gap: 6px;
}

.archive-palette i {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  box-shadow: var(--shadow-card);
}

.archive-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 56px 4px 22px;
}

.archive-count {
  font-size: 15px;
  color: var(--color-muted);
}

.archive-count b {
  color: var(--color-fg);
  font-weight: 600;
}

.archive-surprise {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: var(--color-cta);
  color: var(--color-cta-fg);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.25s var(--ease), transform 0.25s var(--ease);
}

.archive-surprise:hover { filter: brightness(1.1); }
.archive-surprise:active { transform: scale(0.98); }

.archive-surprise span { font-size: 8px; }

.archive-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.archive-card {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

a.archive-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

.archive-card--lost { opacity: 0.55; }

.archive-thumb {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-fg) 8%, var(--color-surface));
}

.archive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 0.6s var(--ease);
}

a.archive-card:hover .archive-thumb img { transform: scale(1.03); }

.archive-thumb-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 20px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-muted);
}

.archive-card-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px 24px;
}

.archive-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-muted);
}

.archive-theme {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.archive-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.archive-card-info .archive-palette { margin-top: 8px; }

.archive-card-info .archive-palette i {
  width: 12px;
  height: 12px;
}

/* ---------------------------------------------------------------- now page */

.currently-reading {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  max-width: 680px;
  margin: 24px auto;
}

.reading-card {
  background: var(--color-surface);
  border-radius: 20px;
  padding: 22px;
}

.reading-card-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.reading-card-author {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--color-muted);
}

.page-footer-note {
  max-width: 680px;
  margin: 56px auto 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-muted);
}

.page-footer-note a { color: var(--color-accent); text-decoration: none; }
.page-footer-note a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- 404 */

.error-page {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 90px 0 60px;
}

.error-code {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 11rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  background: linear-gradient(180deg, var(--color-fg), color-mix(in srgb, var(--color-fg) 35%, var(--color-bg)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.error-page h2 {
  margin: 10px 0 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.error-message {
  margin: 4px 0 0;
  font-size: 16px;
  color: var(--color-muted);
  max-width: 44ch;
}

.error-page a {
  margin-top: 20px;
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
}

.error-page a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- reveals */

@media (prefers-reduced-motion: no-preference) {
  .js .home-section,
  .js .reveal-zone {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }

  .js .home-section.in-view,
  .js .reveal-zone.in-view {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  html { scroll-behavior: auto; }
}