/* Harrow — shared styles.
   Layout: one long field. Pages are bands of prepared ground: a canvas hero,
   then text set in a narrow measure, with ledger-like rules between sections. */
:root {
  --loam: #e7e6df;        /* page ground: pale limestone */
  --loam-2: #dcdbd2;      /* recessed band */
  --ink: #1b1e19;         /* text */
  --ink-soft: #565a50;    /* secondary text */
  --steel: #2c4687;       /* tool steel: the one accent */
  --rye: #9c7a2c;         /* new growth: small marks only */
  --rule: #c5c4b9;
  --f-display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.9rem;
  --step-3: clamp(2.4rem, 5vw, 3.6rem);
  --step-4: clamp(4.5rem, 17vw, 13rem);
  --step-5: clamp(3.2rem, 10vw, 7.5rem);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --loam: #131511; --loam-2: #1b1e18; --ink: #e4e3da; --ink-soft: #a3a596;
    --steel: #93a9ea; --rye: #d1ad5b; --rule: #33372e; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --loam: #131511; --loam-2: #1b1e18; --ink: #e4e3da; --ink-soft: #a3a596;
  --steel: #93a9ea; --rye: #d1ad5b; --rule: #33372e; color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--loam); color: var(--ink);
  font-family: var(--f-body); font-size: var(--step-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.wrap {
  max-width: 1120px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
a { color: var(--steel); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }
.label {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}
a.label { text-decoration: none; }
a.label:hover { color: var(--steel); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; line-height: 0.95; }

/* Top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.mark svg { width: 30px; height: 22px; overflow: visible; }
.mark span { font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; letter-spacing: 0.08em; }
.mark rect { transition: transform 0.35s cubic-bezier(.3,1.6,.5,1); }
.mark:hover rect:nth-child(odd) { transform: translateY(2px); }
.mark:hover rect:nth-child(even) { transform: translateY(-2px); }
.top nav { display: flex; gap: 22px; }
.top nav a { color: var(--ink-soft); text-decoration: none; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.top nav a:hover, .top nav a[aria-current] { color: var(--steel); }

/* Home hero */
.hero { position: relative; border-top: 1px solid var(--rule); overflow: hidden; }
.hero canvas { display: block; width: 100%; height: clamp(320px, 48vw, 540px); touch-action: pan-y; }
.hero-text {
  position: absolute; inset: auto 0 0 0; pointer-events: none;
  padding-block: clamp(40px, 6vw, 80px) clamp(18px, 3vw, 34px);
  background: linear-gradient(to bottom, transparent, var(--loam) 45%);
}
.hero h1 {
  font-weight: 900; font-size: var(--step-4); letter-spacing: 0.02em; line-height: 0.8;
  color: var(--ink); margin-left: -0.04em; display: flex;
}
.hero h1 span { display: inline-block; animation: rise 0.9s cubic-bezier(.2,.8,.2,1) both; }
.hero h1 span:nth-child(2) { animation-delay: 0.05s; } .hero h1 span:nth-child(3) { animation-delay: 0.1s; }
.hero h1 span:nth-child(4) { animation-delay: 0.15s; } .hero h1 span:nth-child(5) { animation-delay: 0.2s; }
.hero h1 span:nth-child(6) { animation-delay: 0.25s; }
@keyframes rise { from { transform: translateY(0.18em); opacity: 0.25; } to { transform: none; opacity: 1; } }
.hero-sub { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 14px; align-items: baseline; }
.tagline { margin: 0; font-size: var(--step-1); font-style: italic; }
.cycle {
  display: inline-grid; vertical-align: bottom; overflow: hidden; height: 1.6em;
  color: var(--steel); font-style: normal; font-family: var(--f-display); font-weight: 800;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.cycle > span { grid-area: 1 / 1; line-height: 1.6em; transition: transform 0.6s cubic-bezier(.7,0,.2,1), opacity 0.6s; }
.cycle > span.out { transform: translateY(-100%); opacity: 0; }
.cycle > span.in { transform: translateY(100%); opacity: 0; }
.hint { display: flex; gap: 18px; flex-wrap: wrap; }
.hint-touch { display: none; }
@media (hover: none) { .hint-mouse { display: none; } .hint-touch { display: inline; } }

/* Ticker */
.ticker { border-block: 1px solid var(--rule); background: var(--ink); color: var(--loam); overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: drift 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track a, .ticker-track span {
  font-family: var(--f-display); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 10px 0; white-space: nowrap; display: flex; align-items: center;
  color: inherit; text-decoration: none;
}
.ticker-track a:hover { color: var(--rye); }
.ticker-track a::after, .ticker-track span::after { content: ""; display: inline-block; width: 22px; height: 10px; margin: 0 22px;
  background: repeating-linear-gradient(90deg, var(--rye) 0 3px, transparent 3px 7px); }
@keyframes drift { to { transform: translateX(-50%); } }

/* Thesis */
.thesis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 64px; padding-block: clamp(56px, 9vw, 110px); }
.thesis h2 { font-size: var(--step-3); font-weight: 800; }
.thesis-body { min-width: 0; max-width: 62ch; }
.thesis-body p { margin: 0 0 1em; }
.thesis-body p:first-child { font-size: var(--step-1); line-height: 1.45; }
.def {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 0.95rem;
}
.def dt { font-family: var(--f-mono); font-size: 0.78rem; color: var(--rye); padding-top: 3px; }
.def dd { margin: 0; color: var(--ink-soft); }

/* Fields list */
.band { background: var(--loam-2); border-block: 1px solid var(--rule); }
.rows { padding-block: clamp(48px, 8vw, 90px); }
.rows-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 32px; margin-bottom: 28px; }
.rows-head h2 { font-size: var(--step-3); font-weight: 800; }
.rows-head p { margin: 0; max-width: 48ch; color: var(--ink-soft); }
.row-list { list-style: none; margin: 0; padding: 0; }
.row-list li { position: relative; border-top: 1px dashed var(--rule); }
.row-list li:last-child { border-bottom: 1px dashed var(--rule); }
.row-list a.row {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 150px; gap: 8px 24px; align-items: center;
  padding-block: 20px; color: inherit; text-decoration: none;
}
.row-list li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--steel);
  transform: scaleX(0); transform-origin: left; transition: transform 0.7s cubic-bezier(.6,0,.2,1);
}
.row-list li:hover::after, .row-list li:focus-within::after { transform: scaleX(1); }
.row-list .k { font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-soft); align-self: start; padding-top: 8px; }
.row-list h3 { font-size: var(--step-2); font-weight: 800; letter-spacing: 0.01em; transition: transform 0.4s, color 0.4s; }
.row-list li:hover h3 { transform: translateX(6px); color: var(--steel); }
.row-list p { margin: 4px 0 0; color: var(--ink-soft); max-width: 58ch; }
.row-list .go { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); margin-top: 8px; display: inline-block; }
.glyph { width: 150px; height: 64px; display: block; justify-self: end; }

/* Journal list */
.journal { padding-block: clamp(56px, 9vw, 110px); }
.journal-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 64px; margin-bottom: 36px; }
.journal-head h2, .journal-head h1 { font-size: var(--step-3); font-weight: 800; }
.journal-head p { margin: 0; color: var(--ink-soft); max-width: 56ch; }
.entries { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.entries li { border-bottom: 1px dashed var(--rule); }
.entries a {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline;
  padding-block: 22px; color: inherit; text-decoration: none;
}
.entries .no { font-family: var(--f-display); font-weight: 900; font-size: 2.6rem; line-height: 0.9; color: var(--steel); transition: transform 0.4s; }
.entries a:hover .no { transform: translateY(-3px); }
.entries h3 { font-size: 1.6rem; font-weight: 800; transition: color 0.3s; }
.entries a:hover h3 { color: var(--steel); }
.entries p { margin: 6px 0 0; color: var(--ink-soft); max-width: 60ch; }
.entries .meta { display: flex; flex-direction: column; align-items: end; gap: 4px; text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-soft); padding: 7px 12px; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--loam); border-color: var(--ink); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"]:hover { color: var(--loam); }
.more-link { margin-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.btn {
  display: inline-block; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: none; border: 1px solid var(--ink); color: var(--ink); padding: 9px 14px; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--ink); color: var(--loam); }

/* Page hero (field pages, journal entries) */
.page-hero { position: relative; border-top: 1px solid var(--rule); overflow: hidden; }
.page-hero canvas { display: block; width: 100%; height: clamp(260px, 38vw, 440px); touch-action: pan-y; }
.page-hero .over {
  position: absolute; inset: auto 0 0 0; pointer-events: none;
  padding-block: clamp(50px, 7vw, 90px) clamp(16px, 2.5vw, 30px);
  background: linear-gradient(to bottom, transparent, var(--loam) 55%);
}
.page-hero h1 { font-size: var(--step-5); font-weight: 900; line-height: 0.85; letter-spacing: 0.01em; margin-top: 8px; }
.crumbs { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; pointer-events: auto; }
.crumbs span[aria-hidden] { color: var(--rule); }

/* Field page body */
.field-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 64px; padding-block: clamp(40px, 7vw, 80px); }
.field-intro .lede { font-size: var(--step-1); line-height: 1.45; margin: 0 0 1em; max-width: 60ch; }
.field-intro p { margin: 0 0 1em; max-width: 62ch; }
.field-intro aside { display: flex; flex-direction: column; gap: 14px; }
.stat { border-top: 1px solid var(--rule); padding-top: 10px; }
.stat b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
.principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.principles li { padding: 22px 24px 26px 0; border-right: 1px dashed var(--rule); }
.principles li + li { padding-left: 24px; }
.principles li:last-child { border-right: 0; }
.principles .label { color: var(--rye); }
.principles h3 { font-size: 1.6rem; font-weight: 800; margin: 10px 0 10px; }
.principles p { margin: 0; color: var(--ink-soft); }
.section { padding-block: clamp(40px, 7vw, 80px); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.section-head h2 { font-size: var(--step-3); font-weight: 800; }
.notice { border: 1px solid var(--rule); padding: 14px 18px; color: var(--ink-soft); font-size: 0.92rem; max-width: 70ch; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--rule); padding-block: 26px; }
.pager a { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; }
.pager a:last-child { text-align: right; align-items: end; }
.pager b { font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; line-height: 1; transition: color 0.3s; }
.pager a:hover b { color: var(--steel); }

/* Journal entry */
.entry-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 64px; padding-block: clamp(40px, 7vw, 80px); }
.entry-page .side { display: flex; flex-direction: column; gap: 8px; }
.entry-page .side .no { font-family: var(--f-display); font-weight: 900; font-size: 5rem; line-height: 0.85; color: var(--steel); }
.prose { min-width: 0; max-width: 64ch; }
.prose > p:first-child { font-size: var(--step-1); line-height: 1.45; }
.prose p, .prose ul, .prose ol, .prose blockquote { margin: 0 0 1.1em; }
.prose h2 { font-size: 1.9rem; font-weight: 800; margin: 1.6em 0 0.5em; }
.prose h3 { font-size: 1.4rem; font-weight: 800; margin: 1.4em 0 0.4em; }
.prose blockquote { border-left: 2px solid var(--rye); padding-left: 18px; color: var(--ink-soft); font-style: italic; }
.prose ul { padding-left: 1.2em; }

/* Plates: engraved illustrations */
.plate-band { padding-block: clamp(32px, 5vw, 64px) 0; }
.plate-entry { padding-bottom: 0; }
.plate-field { padding-block: 0 clamp(36px, 5vw, 64px); }
.plate { margin: 0; }
.plate-img { border: 1px solid var(--rule); background: #e7e6df; overflow: hidden; }
.plate img { display: block; width: 100%; height: auto; transform: scale(1.03); transition: transform 1.6s cubic-bezier(.2,.8,.2,1), filter 0.4s; }
.plate.in img { transform: scale(1); }
.plate figcaption { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; padding-top: 10px; border-bottom: 1px solid var(--rule); padding-bottom: 10px; font-style: italic; color: var(--ink-soft); font-size: 0.95rem; }
.plate figcaption .label { font-style: normal; color: var(--rye); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plate img { filter: brightness(0.86) contrast(1.05); } }
:root[data-theme="dark"] .plate img { filter: brightness(0.86) contrast(1.05); }

/* Brand page */
.brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tile { border: 1px solid var(--rule); display: flex; flex-direction: column; }
.tile .art { display: grid; place-items: center; min-height: 220px; padding: 28px; }
.tile .art img { max-width: 100%; max-height: 120px; }
.tile .art.dark { background: #131511; }
.tile .art.light { background: #e7e6df; }
.tile .cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--rule); }
.tile .cap a { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.swatch { border: 1px solid var(--rule); }
.swatch .chipc { height: 96px; }
.swatch div:last-child { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.swatch b { font-family: var(--f-display); font-weight: 800; font-size: 1.25rem; }
.swatch code { font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.specimens { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.specimen { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 12px 32px; padding-block: 22px; border-bottom: 1px dashed var(--rule); align-items: baseline; }
.specimen .big { font-size: clamp(2rem, 6vw, 4rem); line-height: 1; overflow-wrap: anywhere; }
.rules-list { margin: 0; padding-left: 1.2em; max-width: 64ch; }
.rules-list li { margin-bottom: 0.5em; }

/* Footer */
footer { border-top: 1px solid var(--rule); }
footer .wrap.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 26px 12px; }
footer .links { display: flex; gap: 18px; flex-wrap: wrap; }
footer .fine { padding-block: 0 28px; display: block; }
footer .fine p { margin: 0; font-size: 0.82rem; color: var(--ink-soft); max-width: 80ch; }

@media (max-width: 760px) {
  .thesis, .journal-head, .field-intro, .entry-page { grid-template-columns: minmax(0, 1fr); }
  .row-list a.row { grid-template-columns: minmax(0, 1fr) 110px; }
  .row-list .k { grid-column: 1 / -1; padding-top: 0; }
  .glyph { width: 110px; height: 52px; }
  .top nav { gap: 14px; }
  .entries a { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .entries .no { font-size: 2rem; }
  .entries .meta { grid-column: 2; flex-direction: row; align-items: baseline; gap: 12px; text-align: left; }
  .principles { grid-template-columns: minmax(0, 1fr); }
  .principles li, .principles li + li { padding: 20px 0; border-right: 0; border-bottom: 1px dashed var(--rule); }
  .entry-page .side { flex-direction: row; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .entry-page .side .no { font-size: 3rem; }
  .brand-grid { grid-template-columns: minmax(0, 1fr); }
  .specimen { grid-template-columns: minmax(0, 1fr); }
  .pager b { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .plate img { transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}