/* === tokens === */
:root {
  --kalk: #F2EEE3;
  --ink: #2A2826;
  --stone: #7A7670;
  --pergament: #E8E1D3;
  --tegl: #A53F22;
  --sandsten: #8B5A3C;
}

/* === base === */
*, *::before, *::after { box-sizing: border-box; }

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

a:any-link {
  color: var(--stone);
  text-decoration-thickness: .5px;
}

body {
  font-family: 'EB Garamond', Garamond, Georgia, serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* === mark + wordmark (shared by home and error) === */
.mark {
  width: var(--mark-size);
  height: var(--mark-size);
  display: block;
}

.wordmark {
  margin: calc(var(--mark-size) * 0.075) 0 0;
  font-size: calc(var(--mark-size) * 0.238);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}

/* === layout: home (hero scrolls past intro) === */
body.layout-home {
  --mark-size: clamp(240px, 46vh, 460px);
}

body.layout-home main {
  display: block;
}

body.layout-home .hero {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6vh 6vw;
  position: relative;
}

body.layout-home .hero .wordmark {
  transform-origin: top center;
}

body.layout-home .hero .chevron {
  position: absolute;
  bottom: 5vh;
  font-size: 1.75rem;
  color: var(--stone);
  animation: chevron-hint 2.4s ease-in-out infinite;
}

@keyframes chevron-hint {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* Scroll-driven: shrink wordmark + mark, fade chevron as the hero scrolls out.
   Falls back to static composition in browsers without animation-timeline. */
@supports (animation-timeline: scroll()) {
  body.layout-home .hero .mark {
    animation: mark-shrink ease-out both;
    animation-timeline: scroll(root);
    animation-range: 0 30vh;
  }
  body.layout-home .hero .wordmark {
    animation: wordmark-collapse ease-out both;
    animation-timeline: scroll(root);
    animation-range: 0 30vh;
  }
  body.layout-home .hero .chevron {
    animation: chevron-dismiss linear both;
    animation-timeline: scroll(root);
    animation-range: 0 15vh;
  }
}

@keyframes mark-shrink {
  to { transform: scale(0.92); }
}

@keyframes wordmark-collapse {
  to { transform: translateY(-4vh) scale(0.95); }
}

@keyframes chevron-dismiss {
  to { opacity: 0; transform: translateY(16px); }
}

body.layout-home .intro {
  max-width: 628px;
  margin: 0 auto;
  padding: 0 24px 8vh;
  font-size: 17px;
  line-height: 1.75;
}

/* === layout: error (centered hero + message) === */
body.layout-error {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.layout-error main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6vh 6vw;
  text-align: center;
}

/* === layout: error (hero + message) === */
body.layout-error .logo {
  --mark-size: clamp(160px, 26vh, 260px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}

body.layout-error .message {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.layout-error .message .code {
  font-size: 0.85rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--stone);
}

body.layout-error .message .rule {
  display: block;
  width: 2rem;
  height: 0.5px;
  background: var(--stone);
  margin: 1.1rem 0;
}

body.layout-error .message .headline {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  color: var(--ink);
}

body.layout-error .message .lede {
  margin-top: 1.1rem;
  font-size: 1.125rem;
  color: var(--stone);
  max-width: 32rem;
  line-height: 1.55;
}

body.layout-error .message .home-link {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--stone);
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}

body.layout-error .message .home-link:hover {
  color: var(--stone);
  border-bottom-color: var(--ink);
}

/* === layout: article (long-form document) === */
body.layout-article {
  line-height: 1.7;
  font-size: 18px;
  padding: 80px 0 40px;
}

body.layout-article main { display: block; }

body.layout-article .page {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 48px;
}

body.layout-article .section-label {
  margin: 96px 0 16px;
  padding-top: 56px;
  border-top: 0.5px solid var(--stone);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--stone);
}

body.layout-article .section-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

body.layout-article h2 {
  font-size: 32px;
  font-weight: 400;
  margin: 0 0 28px;
  line-height: 1.2;
}

body.layout-article h3 {
  font-size: 19px;
  font-weight: 500;
  margin: 40px 0 14px;
}

body.layout-article p { margin: 0 0 18px; }
body.layout-article ul { padding-left: 22px; margin: 0 0 18px; }
body.layout-article li { margin-bottom: 8px; }
body.layout-article em { color: var(--ink); font-style: italic; }
body.layout-article strong { font-weight: 500; }
body.layout-article .page a { color: var(--ink); }

body.layout-article code {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  background: var(--pergament);
  padding: 1px 6px;
  color: var(--ink);
  font-size: 0.95em;
}

/* Cover */
body.layout-article .cover {
  text-align: center;
  padding: 40px 0 60px;
}
body.layout-article .cover-logo {
  width: 320px;
  height: 320px;
  display: block;
  margin: 0 auto 48px;
}
body.layout-article .cover-title {
  font-size: 76px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}
body.layout-article .cover-sub {
  margin-top: 24px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--stone);
}

/* Canonical mark */
body.layout-article .canonical-mark {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
body.layout-article .canonical-mark img {
  width: 240px;
  height: 240px;
  display: block;
  flex-shrink: 0;
}
body.layout-article .canonical-info { flex: 1; min-width: 280px; }

/* Applications */
body.layout-article .application-row {
  display: flex;
  gap: 32px;
  margin-top: 36px;
  align-items: flex-end;
  flex-wrap: wrap;
}
body.layout-article .application-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
body.layout-article .app-frame {
  overflow: hidden;
  border: 0.5px solid var(--stone);
}
body.layout-article .app-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
body.layout-article .app-frame.square { border-radius: 0; }
body.layout-article .app-frame.circle { border-radius: 50%; }
body.layout-article .app-frame.lg { width: 128px; height: 128px; }
body.layout-article .app-frame.md { width: 72px; height: 72px; }
body.layout-article .app-frame.sm { width: 36px; height: 36px; }
body.layout-article .application-tile-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--stone);
}

/* Palette */
body.layout-article .palette {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 28px;
}
body.layout-article .color-card { border: 0.5px solid var(--stone); }
body.layout-article .color-swatch { height: 92px; }
body.layout-article .color-info {
  padding: 10px 12px;
  background: var(--kalk);
  border-top: 0.5px solid var(--stone);
  font-size: 12px;
  line-height: 1.4;
}
body.layout-article .color-name { font-size: 14px; margin-bottom: 2px; }
body.layout-article .color-hex { color: var(--stone); font-style: italic; font-size: 12px; }

/* Type specs */
body.layout-article .type-spec {
  margin: 28px 0;
  padding-top: 28px;
  border-top: 0.5px solid var(--stone);
}
body.layout-article .type-spec:first-of-type {
  border-top: none;
  padding-top: 0;
}
body.layout-article .type-label {
  font-size: 11px;
  color: var(--stone);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 14px;
}
body.layout-article .type-spec blockquote {
  margin: 0;
  padding: 32px 48px;
  background: var(--pergament);
  font-size: 22px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
}
body.layout-article .type-spec blockquote cite {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  font-style: normal;
  color: var(--stone);
  letter-spacing: 0.04em;
}

/* Article preview */
body.layout-article .article-preview {
  background: var(--kalk);
  border: 0.5px solid var(--stone);
  padding: 64px 72px;
  margin-top: 28px;
}
body.layout-article .article-meta {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--stone);
  margin-bottom: 28px;
}
body.layout-article .article-title {
  font-size: 38px;
  font-weight: 400;
  line-height: 1.12;
  margin-bottom: 24px;
}
body.layout-article .article-subtitle {
  font-style: italic;
  font-size: 19px;
  color: var(--stone);
  margin-bottom: 40px;
  line-height: 1.45;
}
body.layout-article .article-body p {
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 18px;
}
.uncial {
  height: 80px;
  float: left;
  margin: 6px 4px 0 0;
  display: block;
  filter: saturate(0);
  transition: filter 2s ease-out 1s;
}
.uncial.saturated {
  filter: saturate(1);
}
@media (prefers-reduced-motion: reduce) {
  .uncial {
    filter: saturate(1);
    transition: none;
  }
}

/* Principles */
body.layout-article .note {
  font-size: 14px;
  color: var(--stone);
  font-style: italic;
  margin-top: 12px;
}
body.layout-article .principle-list { list-style: none; padding-left: 0; }
body.layout-article .principle-list li {
  padding-left: 22px;
  position: relative;
  margin-bottom: 12px;
}
body.layout-article .principle-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--stone);
}

/* Live note */
body.layout-article .live-note {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 0.5px solid var(--stone);
  background: var(--pergament);
  margin-top: 28px;
  font-size: 15px;
  line-height: 1.5;
}
body.layout-article .live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tegl);
  flex-shrink: 0;
}

/* Uncialer-katalog */
body.layout-article .uncialer-scroll {
  margin-top: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
body.layout-article .uncialer-scroll::-webkit-scrollbar { display: none; }
body.layout-article .uncialer-grid {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
}
body.layout-article .uncialer-grid th {
  font-weight: 400;
  color: var(--stone);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 12px 4px;
  text-align: center;
}
body.layout-article .uncialer-grid thead th {
  border-bottom: 0.5px solid var(--stone);
}
body.layout-article .uncialer-grid tbody th {
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  padding: 0 12px 0 0;
  border-right: 0.5px solid var(--stone);
  width: 1%;
  white-space: nowrap;
}
body.layout-article .uncialer-grid td {
  padding: 3px;
  text-align: center;
}
body.layout-article .uncialer-grid td a {
  display: inline-block;
  line-height: 0;
  transition: transform 150ms ease;
}
body.layout-article .uncialer-grid td a:hover { transform: scale(1.08); }
body.layout-article .uncialer-grid td img {
  height: 84px;
  width: auto;
  display: block;
}

/* Closing */
body.layout-article .closing {
  text-align: center;
  padding: 80px 0 0;
  border-top: 0.5px solid var(--stone);
  margin-top: 80px;
}
body.layout-article .closing img {
  width: 96px;
  height: 96px;
  margin-bottom: 12px;
}
body.layout-article .closing-mark {
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* === uncial modal (lightbox on the catalog page) === */
.uncial-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--kalk);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  outline: none;
  animation: uncial-modal-fade 200ms ease-out;
}

.uncial-modal[hidden] { display: none; }

.uncial-modal-img {
  max-width: min(70vmin, 600px);
  max-height: min(70vmin, 600px);
  width: auto;
  height: auto;
  display: block;
}

@keyframes uncial-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .uncial-modal { animation: none; }
}

/* === footer (shared) === */
footer {
  text-align: center;
  color: var(--stone);
}

footer .rule {
  display: block;
  width: 1.5rem;
  height: 0.5px;
  background: var(--stone);
  margin: 0 auto 0.9rem;
}

footer .links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  font-size: 1.75rem;
  line-height: 1;
  padding: 0.25rem;
  transition: color 200ms ease, transform 200ms ease;
}

footer a:hover {
  color: var(--ink);
  transform: translateY(-1px);
}

body.layout-home footer,
body.layout-error footer {
  padding-bottom: 4vh;
}

/* Static under article – same column width as .page so the closing's wide rule lines up. */
body.layout-article footer {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 48px;
}

/* === mobile (≤600px) === */
/* Keep every layout inside the viewport – only the palette strip scrolls horizontally. */
@media (max-width: 600px) {
  /* dvh tracks the *visible* area, so centered content doesn't get pushed under iOS Safari's
     collapsing chrome (which is what made the wordmark and fixed footer overlap). */
  body.layout-error { min-height: 100dvh; }

  body.layout-home { --mark-size: clamp(200px, 38dvh, 360px); }
  body.layout-home .hero { padding: 4vh 6vw; }

  /* Article: tighter horizontal rhythm so nothing pushes past the viewport edge. */
  body.layout-article { padding: 56px 0 32px; font-size: 17px; }
  body.layout-article .page { padding: 0 24px; }
  body.layout-article .section-label { margin: 64px 0 16px; padding-top: 40px; }

  body.layout-article .cover { padding: 24px 0 40px; }
  body.layout-article .cover-logo { width: 220px; height: 220px; margin-bottom: 32px; }
  body.layout-article .cover-title { font-size: clamp(40px, 14vw, 64px); }
  body.layout-article .cover-sub { font-size: 14px; letter-spacing: 0.28em; }

  body.layout-article h2 { font-size: 26px; }
  body.layout-article h3 { font-size: 17px; }

  body.layout-article .canonical-mark { gap: 24px; }
  body.layout-article .canonical-mark img { width: 160px; height: 160px; }
  body.layout-article .canonical-info { min-width: 0; }

  /* Palette: horizontal strip aligned with the body text indent on both sides. */
  body.layout-article .palette {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin-top: 28px;
    padding-bottom: 8px;
    gap: 12px;
    scrollbar-width: none;
  }
  body.layout-article .palette::-webkit-scrollbar { display: none; }
  body.layout-article .color-card {
    flex: 0 0 144px;
    scroll-snap-align: start;
  }

  body.layout-article .application-row { gap: 20px; }
  body.layout-article .app-frame.lg { width: 96px; height: 96px; }
  body.layout-article .app-frame.md { width: 56px; height: 56px; }
  body.layout-article .app-frame.sm { width: 28px; height: 28px; }

  body.layout-article .type-spec blockquote { padding: 22px 20px; font-size: 18px; }

  body.layout-article .article-preview { padding: 32px 24px; }
  body.layout-article .article-title { font-size: 26px; }
  body.layout-article .article-subtitle { font-size: 17px; }
  body.layout-article .article-body p { font-size: 16px; }
  .uncial { height: 72px; }

  /* Grid sizes stay close to desktop – the scroll wrapper handles overflow. */
  body.layout-article .uncialer-grid td img { height: 64px; }

  body.layout-article .closing { padding-top: 56px; margin-top: 56px; }
  body.layout-article .closing img { width: 72px; height: 72px; }
  body.layout-article .closing-mark { font-size: 18px; }

  body.layout-article footer { padding: 0 24px; }
}