/* Hallmark · genre: editorial · macrostructure: Broadsheet / Long Document / Archive / Chronology / Colophon
 * theme: custom (vibe: "Nusantara terracotta · aged lontar parchment") · design-system: design.md · designed-as-app
 * paper oklch(95.5% 0.018 70) · accent oklch(54% 0.155 38) laterite · focus oklch(50% 0.17 32) oxide
 * display: Playfair Display 700 · body: Newsreader · sans: Inter · mono: JetBrains Mono
 * axes: light-paper / classical-display-serif / warm-terracotta accent
 * nav: N6 broadsheet · footer: Ft4 colophon · motion: cut · reduced-motion honored
 */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · slop: pass (1–58) · contrast: pass (40–41) · mobile: pass (34,49,50–57) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · icons: pass (30) · nav: N6 · footer: Ft4 */

/* ============ Tokens ============ */
:root {
  --color-paper: oklch(95.5% 0.018 70);
  --color-paper-2: oklch(91% 0.028 68);
  --color-paper-3: oklch(87% 0.036 65);
  --color-ink: oklch(24% 0.012 55);
  --color-ink-2: oklch(40% 0.014 50);
  --color-ink-3: oklch(45% 0.013 50);
  --color-rule: oklch(80% 0.014 60);
  --color-rule-strong: oklch(45% 0.015 50);
  --color-accent: oklch(54% 0.155 38);
  --color-accent-deep: oklch(43% 0.145 35);
  --color-accent-soft: oklch(88% 0.05 50);
  --color-accent-ink: oklch(97% 0.015 70);
  --color-focus: oklch(50% 0.17 32);

  --font-display: "Playfair Display", Georgia, serif;
  --font-serif: "Newsreader", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1.0625rem;
  --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.75rem;
  --text-display: clamp(2.5rem, 6vw, 4.25rem);

  --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem;
  --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem;
  --space-xl: 3rem; --space-2xl: 4.5rem; --space-3xl: 7rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 180ms; --dur-med: 320ms;

  --radius-sm: 2px; --radius-md: 3px; --radius-pill: 9999px;

  --measure-wide: 72rem;
  --measure-read: 42rem;
}

/* ============ Base ============ */
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  overflow-x: clip;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background-color: var(--color-accent); color: var(--color-accent-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 1px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

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

/* ============ Layout helpers ============ */
.ss-wrap { width: 100%; max-width: var(--measure-wide); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.ss-read { max-width: var(--measure-read); }

/* ============ Typographic helpers ============ */
.ss-kicker {
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent-deep);
}
.ss-meta { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--color-ink-3); letter-spacing: 0.01em; }
.ss-stand {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.1875rem; line-height: 1.55; color: var(--color-ink-2);
}

/* ============ Rules & ornaments ============ */
.ss-double-rule { border-top: 1px solid var(--color-rule-strong); border-bottom: 1px solid var(--color-rule-strong); padding-block: 4px; }
/* true double line via layered box-shadow */
.ss-rule-pair { border-top: 1px solid var(--color-rule-strong); box-shadow: inset 0 3px 0 -2px var(--color-rule-strong); }
.ss-fleuron { font-family: var(--font-display); color: var(--color-accent); text-align: center; font-size: 1.375rem; }

/* ============ Buttons (8 states) ============ */
.ss-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.02em; line-height: 1; white-space: nowrap; min-height: 2.5rem;
  padding: 0.6875rem 1.125rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; user-select: none;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}
.ss-btn--sm { padding: 0.4375rem 0.75rem; font-size: 0.75rem; }
.ss-btn--primary { background-color: var(--color-accent-deep); border-color: var(--color-accent-deep); color: var(--color-accent-ink); }
.ss-btn--primary:hover, .ss-btn--primary.is-hover { background-color: var(--color-accent); border-color: var(--color-accent); }
.ss-btn--primary:active, .ss-btn--primary.is-active { transform: translateY(1px); }
.ss-btn--outline { background-color: transparent; border-color: var(--color-rule-strong); color: var(--color-ink); }
.ss-btn--outline:hover, .ss-btn--outline.is-hover { border-color: var(--color-accent); color: var(--color-accent-deep); }
.ss-btn--outline:active, .ss-btn--outline.is-active { transform: translateY(1px); }
.ss-btn--ghost { background-color: transparent; border-color: transparent; color: var(--color-ink-2); }
.ss-btn--ghost:hover, .ss-btn--ghost.is-hover { background-color: var(--color-paper-2); color: var(--color-accent-deep); }
.ss-btn--ghost:active, .ss-btn--ghost.is-active { transform: translateY(1px); }
.ss-btn:disabled, .ss-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.ss-btn[data-state="loading"] { color: var(--color-ink-3); pointer-events: none; }
.ss-btn[data-state="error"] { border-color: var(--color-focus); color: var(--color-focus); background-color: transparent; }
.ss-btn[data-state="success"], .ss-btn[data-saved="true"] {
  background-color: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-deep);
}

/* icon-only square */
.ss-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; color: var(--color-ink-2); cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.ss-icon-btn:hover { background-color: var(--color-paper-2); color: var(--color-accent-deep); border-color: var(--color-rule); }

/* ============ Inputs ============ */
.ss-input {
  font-family: var(--font-sans); font-size: 0.9375rem; color: var(--color-ink);
  background-color: var(--color-paper); border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-sm); padding: 0.625rem 0.875rem; width: 100%; min-height: 2.5rem;
  transition: border-color var(--dur-short) var(--ease-out);
}
.ss-input::placeholder { color: var(--color-ink-3); }
.ss-input:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-accent); }

/* ============ Chips ============ */
.ss-chip {
  font-family: var(--font-sans); font-size: 0.75rem; color: var(--color-ink-2);
  border: 1px solid var(--color-rule); border-radius: var(--radius-sm);
  padding: 0.25rem 0.5625rem; display: inline-block;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
a.ss-chip:hover, button.ss-chip:hover { border-color: var(--color-accent); color: var(--color-accent-deep); }

/* ============ Tabs (underline filter) ============ */
.ss-tab {
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500;
  color: var(--color-ink-2); padding: 0.5rem 0; margin-right: 1.25rem;
  border-bottom: 2px solid transparent; white-space: nowrap; background: transparent; cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.ss-tab:hover { color: var(--color-accent-deep); }
.ss-tab[aria-current="true"], .ss-tab.is-active { color: var(--color-ink); border-bottom-color: var(--color-accent); font-weight: 600; }

/* ============ Keyboard hint ============ */
.ss-kbd {
  font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 0.6875rem; color: var(--color-ink-3);
  border: 1px solid var(--color-rule); border-bottom-width: 2px; border-radius: var(--radius-sm);
  padding: 0.0625rem 0.3125rem;
}

/* ============ Modal ============ */
.ss-overlay {
  position: fixed; inset: 0; z-index: 50;
  background-color: color-mix(in oklch, var(--color-ink) 35%, transparent);
  display: flex; align-items: flex-start; justify-content: center;
  padding-block: clamp(4rem, 12vh, 8rem); padding-inline: 1rem;
}
.ss-modal {
  position: relative; z-index: 1; width: 100%; max-width: 42rem;
  background-color: var(--color-paper);
  border: 1px solid var(--color-rule-strong);
  box-shadow: inset 0 3px 0 -2px var(--color-rule-strong),
              0 18px 40px -24px color-mix(in oklch, var(--color-ink) 60%, transparent);
}
.ss-modal-input {
  font-family: var(--font-sans); font-size: 1.0625rem; color: var(--color-ink);
  background: transparent; border: 0; outline: 0; width: 100%;
}
.ss-modal-input::placeholder { color: var(--color-ink-3); }

/* ============ Editorial prose ============ */
.prose-editorial { font-family: var(--font-serif); color: var(--color-ink); font-size: var(--text-base); line-height: 1.78; }
.prose-editorial p { margin-block: 0 1.25rem; }
.prose-editorial p:first-of-type:first-letter {
  float: left; font-family: var(--font-display); font-weight: 700;
  font-size: 3.6rem; line-height: 0.82; color: var(--color-accent);
  padding-right: 0.5rem; margin-top: 0.35rem; background: transparent;
}
.prose-editorial h2, .prose-editorial h3, .prose-editorial h4 {
  font-family: var(--font-display); font-weight: 700; margin-top: 2.25rem; margin-bottom: 0.75rem;
}
.prose-editorial h3 { font-size: var(--text-xl); border-bottom: 1px solid var(--color-rule); padding-bottom: 0.35rem; }
.prose-editorial a { color: var(--color-ink); border-bottom: 1px solid var(--color-accent); transition: color var(--dur-short) var(--ease-out); }
.prose-editorial a:hover { color: var(--color-accent-deep); }
.prose-editorial strong { font-weight: 700; color: var(--color-ink); }
.prose-editorial ul, .prose-editorial ol { margin-block: 0 1.25rem; }
.prose-editorial ul { list-style: none; padding-left: 0; }
.prose-editorial ul li { position: relative; padding-left: 1.25rem; margin-bottom: 0.5rem; }
.prose-editorial ul li::before { content: "◆"; position: absolute; left: 0; top: 0.45rem; color: var(--color-accent); font-size: 0.625rem; }
.prose-editorial ol { list-style: decimal; padding-left: 1.5rem; }
.prose-editorial ol li { margin-bottom: 0.5rem; }
.prose-editorial ol li::marker { color: var(--color-accent-deep); font-family: var(--font-sans); }

.editorial-blockquote {
  border-left: 3px solid var(--color-accent); background: transparent; border-radius: 0;
  font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; line-height: 1.6;
  color: var(--color-ink-2); padding: 0.5rem 0 0.5rem 1.5rem; margin: 2rem 0;
}
.editorial-blockquote cite {
  display: block; font-style: normal; font-family: var(--font-sans);
  font-size: 0.75rem; color: var(--color-ink-3); margin-top: 0.75rem; letter-spacing: 0.02em;
}

/* ============ Print ============ */
@media print {
  .no-print, header, footer, nav { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .prose-editorial { font-size: 12pt; line-height: 1.5; }
  .prose-editorial p:first-of-type:first-letter { color: #000; }
}

/* ============ Scrollbar (subtle) ============ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-paper-2); }
::-webkit-scrollbar-thumb { background: var(--color-rule-strong); border-radius: 0; border: 3px solid var(--color-paper-2); }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }