/* Self-hosted fonts — EB Garamond retains OpenType smcp (verified at subset time) */

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond-400.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/eb-garamond-500.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/eb-garamond-600.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond-italic-400.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/eb-garamond-italic-500.woff2") format("woff2");
}

@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/courier-prime-400.woff2") format("woff2");
}

@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/courier-prime-700.woff2") format("woff2");
}

@font-face {
  font-family: "Courier Prime";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/courier-prime-italic-400.woff2") format("woff2");
}

:root {
  --ground: #0f1310;
  --ink: #e6e2d8;
  --muted: rgba(230, 226, 216, 0.45);
  --soft: rgba(230, 226, 216, 0.62);
  --verd: #6e9b8a;
  --onverd: #0f1310;
  --rule: rgba(230, 226, 216, 0.13);
  --rule2: rgba(230, 226, 216, 0.24);
  --gutter: 196px;
  --pad: 40px;
  --gap: 28px;
  --rowh: 26px;
  --entryw: 378px;
  --entryh: 18px;
  --entrysize: 13px;
  --annleft: 412px;
  --anntop: 0px;
  --annsize: 15px;
}

[data-theme="light"] {
  --ground: #efede6;
  --ink: #1a1d18;
  --muted: rgba(26, 29, 24, 0.45);
  --soft: rgba(26, 29, 24, 0.62);
  --verd: #3f6a5a;
  --onverd: #efede6;
  --rule: rgba(26, 29, 24, 0.15);
  --rule2: rgba(26, 29, 24, 0.28);
}

@media (max-width: 1240px) {
  :root {
    --gutter: 140px;
    --pad: 32px;
  }
}

@media (max-width: 900px) {
  :root {
    --gutter: 104px;
    --pad: 26px;
    --annleft: 400px;
  }
}

@media (max-width: 860px) {
  :root {
    --gutter: 46px;
    --pad: 18px;
    --gap: 14px;
    --rowh: 98px;
    --entryw: 100%;
    --entryh: 36px;
    --entrysize: 12px;
    --annleft: 0px;
    --anntop: 38px;
    --annsize: 13px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--ground);
}

body {
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  font-family: "EB Garamond", Garamond, serif;
  font-size: 17px;
  line-height: 1.6;
}

a {
  color: var(--verd);
  text-decoration: none;
}

a:hover {
  color: var(--verd);
  text-decoration: underline;
  text-underline-offset: 3px;
}

::selection {
  background: var(--verd);
  color: var(--onverd);
}

.small-caps {
  font-family: "EB Garamond", serif;
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1;
}

.mono-label {
  font-family: "Courier Prime", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page {
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
}

.shell {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ——— Top bar ——— */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}

.topbar-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 9px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar-status {
  font-family: "EB Garamond", serif;
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1;
  letter-spacing: 0.08em;
  font-size: 15px;
  color: var(--soft);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.topbar-inquire {
  font-family: "Courier Prime", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--verd);
}

.theme-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule2);
  color: var(--muted);
  font-family: "Courier Prime", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 10px;
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ——— Shared layout ——— */

.col-grid {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  column-gap: var(--gap);
}

.col-grid > * {
  min-width: 0;
}

.mark-gutter {
  text-align: right;
  font-family: "EB Garamond", serif;
  font-size: 15px;
  color: var(--verd);
  line-height: 1;
}

.section-label {
  font-family: "EB Garamond", serif;
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1;
  letter-spacing: 0.14em;
  font-size: 15px;
  color: var(--muted);
}

.section-rule {
  border-top: 1px solid var(--rule);
  padding: 88px 0 96px;
}

.cta {
  background: var(--verd);
  color: var(--onverd);
  font-family: "EB Garamond", serif;
  font-size: 17px;
  letter-spacing: 0.02em;
  padding: 11px 26px;
  text-decoration: none;
}

.cta:hover {
  text-decoration: none;
  color: var(--onverd);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: 34px;
}

.cta-email {
  font-family: "Courier Prime", monospace;
  font-size: 13px;
  color: var(--soft);
}

/* ——— Hero ——— */

.hero {
  padding: 84px 0 96px;
}

.hero-copy {
  max-width: 660px;
}

.hero-kicker {
  font-family: "Courier Prime", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--verd);
}

.hero-title {
  margin: 26px 0 0;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.hero-lede {
  margin: 22px 0 0;
  font-size: 19px;
  line-height: 1.65;
  color: var(--soft);
  text-wrap: pretty;
}

.hero-rule {
  height: 1px;
  background: var(--rule);
  margin: 44px 0 0;
}

.hero-claim {
  margin: 40px 0 40px;
  font-size: 23px;
  line-height: 1.45;
  color: var(--ink);
}

.hero-meta {
  font-family: "Courier Prime", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ——— Catalogue ——— */

.catalogue-intro {
  max-width: 680px;
}

.catalogue-heading {
  margin: 18px 0 0;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: var(--ink);
}

.catalogue-lede {
  margin: 18px 0 0;
  font-size: 17px;
  color: var(--soft);
  max-width: 52ch;
  text-wrap: pretty;
}

.catalogue-header {
  margin-top: 56px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rule2);
  align-items: start;
}

.catalogue-header-no {
  text-align: right;
  font-family: "Courier Prime", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.catalogue-header-item {
  font-family: "Courier Prime", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.catalogue {
  border-bottom: 1px solid var(--rule);
  padding: 14px 0 16px;
}

.catalogue-row {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: start;
  height: var(--rowh);
  padding: 4px 0;
}

.catalogue-num {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 12px;
  font-family: "Courier Prime", monospace;
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.catalogue-mark {
  font-family: "EB Garamond", serif;
  font-size: 15px;
  line-height: 18px;
  color: var(--verd);
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: ease;
  transition-duration: 600ms;
}

.catalogue-body {
  position: relative;
  min-width: 0;
  height: 100%;
}

.catalogue-entry {
  width: var(--entryw);
  height: var(--entryh);
  overflow: hidden;
  font-family: "Courier Prime", monospace;
  font-size: var(--entrysize);
  line-height: 18px;
  color: var(--muted);
}

.catalogue-note {
  position: absolute;
  left: var(--annleft);
  right: 0;
  top: var(--anntop);
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: var(--annsize);
  line-height: 18px;
  color: var(--verd);
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: ease;
  transition-duration: 600ms;
  pointer-events: none;
}

.catalogue-row.is-active .catalogue-mark,
.catalogue-row.is-active .catalogue-note {
  opacity: 1;
}

.catalogue-row.is-leaving .catalogue-mark,
.catalogue-row.is-leaving .catalogue-note {
  opacity: 0;
}

.catalogue-row.phase-in .catalogue-mark,
.catalogue-row.phase-in .catalogue-note {
  transition-duration: 600ms;
}

.catalogue-row.phase-out .catalogue-mark,
.catalogue-row.phase-out .catalogue-note {
  transition-duration: 900ms;
}

/* ——— What Unsot could be ——— */

.could-be {
  max-width: 700px;
}

.could-be-list {
  display: grid;
  gap: 0;
  margin-top: 28px;
}

.could-be-item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}

.could-be-num {
  font-family: "Courier Prime", monospace;
  font-size: 11px;
  color: var(--muted);
  width: 24px;
  flex: 0 0 auto;
}

.could-be-text {
  font-size: 21px;
  color: var(--ink);
}

/* ——— Brand system ——— */

.brand-lede {
  margin: 16px 0 0;
  max-width: 52ch;
  color: var(--soft);
  text-wrap: pretty;
}

.brand-subhead {
  margin-top: 52px;
  font-family: "Courier Prime", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rule2);
}

.brand-subhead + .brand-subhead,
.palette-grid + .brand-note + .brand-subhead,
.type-grid + .brand-subhead,
.lockups + .brand-note + .brand-subhead {
  margin-top: 64px;
}

.brand-subhead.spaced {
  margin-top: 64px;
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 26px;
  margin-top: 26px;
}

.swatch {
  height: 76px;
  border: 1px solid var(--rule2);
}

.swatch-ground {
  background: #0f1310;
}

.swatch-ink {
  background: #e6e2d8;
}

.swatch-muted {
  background: rgba(230, 226, 216, 0.45);
}

.swatch-verd {
  background: #6e9b8a;
}

.swatch-name {
  margin-top: 10px;
  font-family: "EB Garamond", serif;
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1;
  letter-spacing: 0.1em;
  font-size: 14px;
  color: var(--ink);
}

.swatch-spec {
  font-family: "Courier Prime", monospace;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
}

.brand-note {
  margin: 20px 0 0;
  max-width: 56ch;
  font-size: 16px;
  color: var(--soft);
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 44px;
  margin-top: 30px;
}

.type-grid > * {
  min-width: 0;
}

.type-label {
  font-family: "Courier Prime", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.type-sample-display {
  font-family: "EB Garamond", serif;
  font-size: 34px;
  line-height: 1.15;
  color: var(--ink);
  margin-top: 16px;
}

.type-sample-caps {
  font-family: "EB Garamond", serif;
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1;
  letter-spacing: 0.12em;
  font-size: 19px;
  color: var(--ink);
  margin-top: 14px;
}

.type-sample-italic {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  margin-top: 10px;
}

.type-sample-chars {
  font-family: "EB Garamond", serif;
  font-size: 15px;
  color: var(--muted);
  margin-top: 14px;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.type-sample-mono {
  font-family: "Courier Prime", monospace;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
  margin-top: 16px;
}

.type-sample-mono-chars {
  font-family: "Courier Prime", monospace;
  font-size: 13px;
  color: var(--muted);
  margin-top: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.lockups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 20px;
  margin-top: 26px;
}

.lockup {
  border: 1px solid var(--rule);
  padding: 34px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 150px;
}

.lockup-compact {
  padding: 26px 22px;
  gap: 16px;
}

.lockup-horizontal {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.lockup-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.lockup-star {
  font-family: "EB Garamond", serif;
  font-size: 13px;
  line-height: 1;
  color: var(--verd);
}

.lockup-star-lg {
  font-family: "EB Garamond", serif;
  font-size: 15px;
  line-height: 1;
  color: var(--verd);
}

.lockup-word {
  font-family: "EB Garamond", serif;
  font-size: 24px;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.lockup-label {
  font-family: "Courier Prime", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.favicon-sizes {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.favicon-box {
  border: 1px solid var(--rule2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.favicon-box-64 {
  width: 64px;
  height: 64px;
}

.favicon-box-32 {
  width: 32px;
  height: 32px;
}

.favicon-box-16 {
  width: 16px;
  height: 16px;
}

.favicon-glyph-64 {
  font-family: "EB Garamond", serif;
  font-size: 26px;
  line-height: 1;
  color: var(--verd);
}

.favicon-glyph-32 {
  font-family: "EB Garamond", serif;
  font-size: 14px;
  line-height: 1;
  color: var(--verd);
}

.favicon-glyph-16 {
  font-family: "EB Garamond", serif;
  font-size: 8px;
  line-height: 1;
  color: var(--verd);
}

/* ——— The name ——— */

.name-block {
  max-width: 660px;
}

.name-lede {
  margin: 20px 0 0;
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.name-table {
  margin-top: 44px;
  border-top: 1px solid var(--rule2);
}

.name-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}

.name-key {
  font-family: "EB Garamond", serif;
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1;
  letter-spacing: 0.1em;
  font-size: 16px;
  color: var(--soft);
  flex: 0 1 auto;
}

.name-val {
  font-family: "Courier Prime", monospace;
  font-size: 13px;
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
}

/* ——— Acquire ——— */

.acquire {
  padding: 88px 0 104px;
}

.acquire-copy {
  max-width: 640px;
}

.acquire-title {
  margin: 18px 0 0;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.2;
  color: var(--ink);
}

.acquire-lede {
  margin: 18px 0 0;
  font-size: 18px;
  color: var(--soft);
  max-width: 48ch;
  text-wrap: pretty;
}

/* ——— Footer ——— */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 34px 0 64px;
}

.footer-mark {
  text-align: right;
  font-family: "EB Garamond", serif;
  font-size: 13px;
  line-height: 1;
  color: var(--verd);
}

.footer-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
}

.footer-disclaimer,
.footer-email {
  margin: 0;
  font-family: "Courier Prime", monospace;
  font-size: 11px;
  line-height: 1.9;
  color: var(--muted);
}

.footer-disclaimer {
  max-width: 56ch;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}