/* Weathered manuscript: aged vellum, iron-gall ink, hairline rules, one muted pigment per language. */
:root {
  --bg: #d8c9a4; --panel: #d8c9a4; --ink: #2b2016; --muted: #6e5d44; --accent: #365840; --line: #a99669;
  --display: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --body: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --script: 'Noto Serif', 'Noto Serif Devanagari', serif;
}
body[data-lang="durgal"] {
  --accent: #6f2f20;
  --script: 'Noto Sans Runic', 'Noto Sans Ogham', 'Segoe UI Historic', 'Segoe UI Symbol', sans-serif;
}
body[data-lang="sviksill"] {
  --accent: #66460c;
  --script: 'Noto Sans Runic', 'Noto Sans Ogham', 'Segoe UI Historic', 'Segoe UI Symbol', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 244, 214, .38) 0%, rgba(255, 244, 214, 0) 60%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(70, 42, 14, .38) 100%),
    var(--bg);
  background-attachment: fixed; font-family: var(--body); font-size: 1.125rem; line-height: 1.55;
}
/* faint paper grain and staining */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .12  0 0 0 .55 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
}
.page { position: relative; z-index: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page { max-width: 620px; margin: 0 auto; padding: 56px 20px 64px; }

.header { margin-bottom: 28px; padding-bottom: 14px; border-bottom: 3px double var(--muted); }
.wordmark { font-family: var(--display); font-size: 2.1rem; font-weight: 500; margin: 0; letter-spacing: .01em; }
.tagline { margin: 2px 0 0; color: var(--muted); font-style: italic; font-size: 1.05rem; }

.tabs { display: flex; gap: 26px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 6px 0 8px;
  color: var(--muted); font: inherit; font-size: 1.05rem; cursor: pointer; border-radius: 0;
}
.tab span { font-style: italic; font-size: .85rem; margin-left: 4px; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tab:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.banner { border-left: 3px solid var(--accent); padding: 4px 12px; font-size: .95rem; color: var(--muted); margin: 0 0 22px; font-style: italic; }

.translate-form { display: flex; gap: 16px; align-items: baseline; }
.translate-form input {
  flex: 1; min-width: 0; padding: 8px 0; font: inherit; font-size: 1.25rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
}
.translate-form input::placeholder { color: var(--muted); font-style: italic; }
button {
  font: inherit; font-size: 1rem; cursor: pointer; background: none; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 2px; padding: 6px 16px; letter-spacing: .03em;
}
button:hover:not(:disabled) { background: var(--ink); color: #e6d9b8; }
#translate-btn { background: var(--ink); color: #e6d9b8; }
#translate-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.secondary { border-color: var(--line); color: var(--muted); padding: 3px 12px; font-size: .92rem; }
button.secondary:hover:not(:disabled) { background: none; color: var(--ink); border-color: var(--ink); }
.status { min-height: 1.4em; color: var(--muted); font-size: .95rem; font-style: italic; margin: 12px 0; }

.result { margin-top: 18px; }
.entry { padding: 14px 0; border-top: 1px solid var(--line); }
.label { margin: 0 0 4px; font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.translated-text { font-size: 1.85rem; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
.script-text { font-family: var(--script); font-size: 1.35rem; line-height: 1.7; color: var(--accent); margin: 0; overflow-wrap: anywhere; }
.new-words { color: var(--muted); font-size: .95rem; font-style: italic; margin: 4px 0 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.actions { display: flex; gap: 10px; }

.footer { margin-top: 56px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; }
.footer p { margin: 0 0 6px; }
.footer a { color: var(--muted); text-underline-offset: 3px; }
.footer a:hover { color: var(--ink); }
.footer .fine { font-size: .85rem; font-style: italic; }

@media (max-width: 480px) {
  .page { padding-top: 36px; }
  .wordmark { font-size: 1.8rem; }
  .tabs { gap: 16px; }
  .tab span { display: none; }
  .translated-text { font-size: 1.55rem; }
}