/* ---- Fonts ------------------------------------------------------- */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans[wdth,wght].ttf") format("truetype-variations");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Italic[wdth,wght].ttf") format("truetype-variations");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DejaVu Serif";
  src: url("fonts/DejaVuSerif.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2800-28FF; /* Braille patterns only */
}

/* ---- Design tokens ----------------------------------------------- */

:root {
  --space: 1rem;
  --line: 2px;

  --key: calc(var(--space) * 3.5);
  --kb-gap: calc(var(--space) / 2);

  --grid-columns: 12;
  --grid-gutter: var(--space);
  --grid-margin: var(--space);

  --color-light: #f0ebe4;
  --color-dark: #313131;

  --color-bg: var(--color-light);
  --color-fg: var(--color-dark);
}

/* ---- Theming ----------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-dark);
    --color-fg: var(--color-light);
  }
}

html[data-theme="light"] {
  --color-bg: var(--color-light);
  --color-fg: var(--color-dark);
}

html[data-theme="dark"] {
  --color-bg: var(--color-dark);
  --color-fg: var(--color-light);
}

/* ---- Reset & base ------------------------------------------------ */

* { box-sizing: border-box; }

html {
  font-size: 18px;
}

body {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-feature-settings: "ss01";
  margin: 0;
  padding: 0;
  padding-inline: var(--grid-margin);
  background: var(--color-bg);
  color: var(--color-fg);
}

/* ---- Utilities --------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
  width: 100%;
}

/* ---- Typography -------------------------------------------------- */

h1, h2 {
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 550;
  letter-spacing: -0.06rem;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

header h1 {
  margin-top: var(--grid-margin);
  margin-bottom: 0;
  visibility: hidden;
}

.lead {
  font-size: 2.4rem;
  line-height: 1.2;
  font-stretch: 75%;
  font-weight: 410;
  letter-spacing: -0.01rem;
  margin-top: calc(var(--space)*1);
}

p {
  font-size: 1.1rem;
  line-height: 1.35;
  font-weight: 450;
  margin: 0;
}

p:has(+ figure), p:has(+ .panel) {
  margin-bottom: calc(var(--space) * 2);
}

p.indent {
  text-indent: 2.5em;
}

footer > p {
  margin-top: var(--space);
  margin-bottom: calc(var(--space) * 4);
}

em, i {
  font-style: italic;
  font-feature-settings: "ss01", "ss02";
}

dd, dl, footer > p {
  font-size: 0.85rem;
  font-weight: 450;
  letter-spacing: 0.01rem;
}

dd {
  margin-bottom: calc(var(--space) * 0.25);
  margin-left: 0;
}

ul {
  padding: 0;
}

li {
  font-size: 0.85rem;
  font-weight: 450;
  letter-spacing: 0.01rem;
  margin-bottom: calc(var(--space) * 0.2);
}

a {
  color: var(--color-fg);
  font-weight: 600;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

dd a {
  font-weight: 450;
}

kbd.tag,
span.tag {
  display: inline-block;
  border: var(--line) solid var(--color-fg);
  border-radius: 999px;
  padding: 0 0.4em;
  margin: -0.2em 0.1em;
  font-family: inherit;
  font-size: 0.8em;
  font-weight: 550;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--color-bg);
  background: var(--color-fg);
}

hr { 
  border: none;
  height: var(--line);
  background-color: var(--color-fg);
  margin-top: calc(var(--space)*4);
}

/* ---- Grid placement ---------------------------------------------- */
/* Add overrides in the responsive section at the bottom. */

/* Header */
header h1 { grid-column: 4 / 10; }
header p  { grid-column: 2 / 12; }

/* Section content */
section h2 { grid-column: 4 / 10; }
section p  { grid-column: 5 / 9; }
section ul { grid-column: 5 / 9; }

/* Translator panels */
.panel        { grid-column: 3 / 11; }
.panel-latin  { grid-column: 3 / 7; }
.panel-braille { grid-column: 7 / 11; }

/* Footer */
footer h2 {
  grid-column: 1 / -1;
  grid-row: 1;
  font-size: 1.9rem;
  margin-top: 0;
}

footer dl {
  grid-column: 1 / 7;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--grid-gutter);
  margin: 0;
  align-content: center;
}
footer dt { grid-column: 1 / 3; font-weight: 600; }
footer dd { grid-column: 3 / 7; }
footer p  { grid-column: 1 / 7; grid-row: 3; }

.footer-logo {
  grid-row: 2;
  align-self: center;
  display: block;
}
.footer-logo:nth-of-type(1) { grid-column: 9 / 11; }
.footer-logo:nth-of-type(2) { grid-column: 11 / 13; }

.footer-logo svg {
  width: 80%;
  display: block;
  margin-inline: auto;
}

/* Figures */
section figure        { display: contents; }
section figure img    { grid-column: 2 / 10; }
section figure svg    { grid-column: 2 / 10; }
figcaption            { grid-column: 10 / 12; }

/* ---- Figures & media --------------------------------------------- */

figure {
  margin: 0;
}

section figure img {
  align-self: start;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
}

html[data-theme="dark"] section figure img {
  mix-blend-mode: difference;
}

section figure svg {
  align-self: start;
  width: 100%;
  color: var(--color-fg); /* currentColor inside SVG reads this */
}

section figure svg [stroke] {
  vector-effect: non-scaling-stroke; /* constant stroke when scaled */
  stroke-width: var(--line);
}

section figure img,
section figure figcaption {
  margin-bottom: var(--space);
}

figcaption {
  font-size: 0.85rem;
  line-height: 1.35;
  font-weight: 450;
  letter-spacing: 0.01rem;
  margin-top: 0;
  align-self: end;
}

/* ---- Braille heading animation ----------------------------------- */

h2[data-braille] {
  position: relative;
  display: inline-block;
  overflow: hidden; 
}

h2[data-braille] .latin-text {
  display: inline-block;
  transition: opacity 0.3s ease;
}

h2[data-braille] .braille-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-family: "DejaVu Serif", sans-serif;
  font-size: 1.09em;
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap; /* prevent wrapping / layout shift */
  pointer-events: none;
}

h2[data-braille].is-typing .latin-text  { opacity: 0; }
h2[data-braille].is-typing .braille-text { opacity: 1; }

/* ---- Translator: panels & text fields ---------------------------- */

.panel-latin,
.panel-braille {
  display: flex;
  flex-direction: column;
}

.panel label, .panel legend {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0;
  margin-top: calc(var(--space)*1.5);
  margin-bottom: calc(var(--space)/2);
}

fieldset {
  padding: 0;
  border: 0;
  margin: 0;
}

.text-field {
  font-size: 1.2rem;
  font-weight: 450;
  line-height: 38px;
  min-height: calc(var(--key)*1.15);
  flex: 1;
  padding: 0.6rem;
  border: var(--line) solid var(--color-fg);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--color-bg);
  outline: none;
}

.text-field:focus {
  outline: calc(var(--line) * 0.5) solid var(--color-fg);
  box-shadow: calc(var(--line) * 2) calc(var(--line) * 2) var(--color-fg);
}

.text-field.braille {
  font-family: "DejaVu Serif", "Segoe UI Symbol", "Apple Braille", monospace;
  font-size: 1.7rem;
  overflow-wrap: anywhere;
}

.text-field[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
}

.unsupported {
  background: #ffd6d6;
  color: #a00;
  padding: 0 2px;
  text-decoration: underline wavy #a00;
}

.status {
  font-size: 0.85rem;
  color: #a00;
  margin-top: 0.3rem;
  min-height: 1rem;
}

/* ---- On-screen keyboard ------------------------------------------ */

.key-spacer {
  pointer-events: none;
}

.keyboard {
  display: flex;
  flex-direction: column;
  gap: var(--kb-gap);
}

.key-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--key), 1fr));
  gap: var(--kb-gap);
}

.key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: var(--key);
  width: 100%;
  aspect-ratio: 1;
  color: var(--color-fg);
  background: var(--color-bg);
  border: var(--line) solid var(--color-fg);
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  transition:
    background-color 500ms,
    border-color 500ms,
    border-radius 500ms,
    box-shadow 500ms,
    opacity 500ms;
}

.key:hover {
  border-radius: calc(var(--key) / 2);
  outline: var(--line) solid var(--color-fg);
  z-index: 10;
}

/* Prefix / modifier keys: rounded pill shape */
.key.prefix {
  background: var(--color-bg);
  border-color: var(--color-fg);
  border-radius: calc(var(--key) / 2);
}

.key.prefix:hover {
  border-radius: 0;
}

/* Armed / latched modifier state */
.key.armed,
.key.latched {
  border-color: var(--color-fg);
  background: var(--color-bg);
  border-radius: 0;
  outline: calc(var(--line) * 0.5) solid var(--color-fg);
  box-shadow: calc(var(--line) * 2) calc(var(--line) * 2) var(--color-fg);
}

/* Dimmed: letter key inactive in current modifier mode */
.key.dimmed {
  cursor: crosshair;
  border-color: var(--color-bg);
}

.key.dimmed:hover {
  outline: none;
  background: inherit;
}

/* Space bar: wide, last 4 columns */
.key[data-key="__SPACE__"] {
  grid-column: -5 / -1;
  width: auto;
  aspect-ratio: unset;
}

/* Key internal elements */
.key .cell {
  font-family: "DejaVu Serif", "Segoe UI Symbol", "Apple Braille", monospace;
  font-size: 1.6rem;
  line-height: 1;
}

.key .label {
  font-size: 0.75rem;
  margin-top: 2px;
  font-weight: 600;
}

.keyboard-hint {
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.5rem;
}

/* ---- Navigation overlay ------------------------------------------ */

#main-nav {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  height: 100vh;
  z-index: 1000;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms, visibility 250ms;
}

#main-nav.open {
  visibility: visible;
  opacity: 1;
}

body.nav-open > *:not(#main-nav):not(#nav-toggle):not(#theme-toggle) {
  filter: blur(8px);
  transition: filter 250ms;
}

.nav-list {
  grid-column: 1 / 5;
  background: var(--color-bg);
  border: calc(var(--line) * 1.5) solid var(--color-fg);
  padding: var(--space) calc(var(--space) * 2);
  padding-top: 4rem;
  align-self: start;
  list-style: none;
}

.nav-list li {
  margin-bottom: 0.7rem;
}

.nav-list a {
  text-decoration: none;
  color: var(--color-fg);
  font-size: 2rem;
  font-weight: 550;
  letter-spacing: -0.07rem;
  display: block;
  transition: color 150ms;
}

.nav-list a:hover,
.nav-list a.nav-active {
  text-decoration: underline calc(var(--line) * 1.5);
}

/* ---- Controls: nav toggle & theme toggle ------------------------- */

#nav-toggle,
#theme-toggle {
  position: fixed;
  top: var(--grid-margin);
  z-index: 1001;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#nav-toggle {
  left: var(--grid-margin);
  visibility: visible; /* stay visible when #main-nav is hidden */
}

#theme-toggle {
  right: var(--grid-margin);
  color: var(--color-fg);
}

.theme-toggle-icon {
  width: 38px;
  height: 38px;
  display: block;
  transition: transform 300ms ease;
}

#theme-toggle.is-rotated .theme-toggle-icon {
  transform: rotate(180deg);
}

/* Hamburger icon */
.hamburger-icon {
  display: block;
  width: 32px;
  height: 3px;
  background: var(--color-fg);
  position: relative;
  transition: background 200ms;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--color-fg);
  position: absolute;
  left: 0;
  transition: transform 200ms;
}

.hamburger-icon::before { top: -10px; }
.hamburger-icon::after  { top: 10px; }

/* X transformation when nav is open */
#nav-toggle[aria-expanded="true"] .hamburger-icon {
  background: transparent;
}

#nav-toggle[aria-expanded="true"] .hamburger-icon::before {
  transform: translateY(10px) rotate(45deg);
}

#nav-toggle[aria-expanded="true"] .hamburger-icon::after {
  transform: translateY(-10px) rotate(-45deg);
}

/* ---- Responsive -------------------------------------------------- */

/* Tablet (769–1439px): keep 12-col grid, widen column spans */
@media (max-width: 1439px) {

  .panel { grid-column: 1 / 13; }
  .panel-latin   { grid-column: 1 / 7; }
  .panel-braille { grid-column: 7 / 13; }

  header h1  { grid-column: 3 / 11; }
  section h2 { grid-column: 3 / 11; }
  section p  { grid-column: 3 / 11; }
  section ul { grid-column: 3 / 11; }

  section figure img { grid-column: 1 / 13; }
  section figure svg { grid-column: 1 / 13; }
  figcaption         { grid-column: 3 / 11; }

  section figure img { margin-bottom: calc(var(--space)/2); }
  section figure figcaption { margin-bottom: calc(var(--space)*2); }

  .nav-list { grid-column: 1 / 7; }
}

/* Smartphone (≤768px): 6-column grid, content full-width. */
@media (max-width: 768px) {
  :root {
    --grid-columns: 6;
    --key: calc(var(--space) * 2);
    --kb-gap: calc(var(--space) / 4);
  }

  .key-row { grid-template-columns: repeat(8, 1fr); }
  .key .cell { font-size: 1rem; }
  .key .label { font-size: 0.55rem; }

  header h1 { grid-column: 1 / -1; /* margin-top: calc(var(--space)*4); */ }
  header p  { grid-column: 1 / -1; }

  section h2 { grid-column: 1 / -1; }
  section p  { grid-column: 1 / -1; }
  section ul { grid-column: 1 / -1; }

  section figure img { grid-column: 1 / -1; }
  section figure svg { grid-column: 1 / -1; }
  figcaption         { grid-column: 1 / -1; }

  section figure img { 
    margin-bottom: calc(var(--space)/2); 
    aspect-ratio: 1 / 1;
  }
  section figure figcaption { margin-bottom: calc(var(--space)*2); }

  .panel         { grid-column: 1 / -1; }
  .panel-latin   { grid-column: 1 / -1; }
  .panel-braille { grid-column: 1 / -1; }

  footer dl { grid-column: 1 / -1; }
  footer dt { grid-column: 1 / 4; }
  footer dd { grid-column: 4 / 7; }
  footer p  { grid-column: 1 / -1; }

  .footer-logo                { grid-row: 4; margin-bottom: calc(var(--space) * 2); }
  .footer-logo:nth-of-type(1) { grid-column: 1 / 4; }
  .footer-logo:nth-of-type(2) { grid-column: 4 / 7; }

  .nav-list { grid-column: 1 / -1; }

  h1, h2 {
    font-size: 1.8rem;
  }

  footer h2 {
    font-size: 1.6rem;
  }

  .lead {
    font-size: 2rem;
    margin-top: calc(var(--space)*1);
  }

  .nav-list {
    padding: var(--space) calc(var(--space) * 1);
    padding-top: calc(var(--space)*3);
  }

  .nav-list a {
    font-size: 1.5rem;
  }

  .panel label, .panel legend {
    font-size: 0.8rem;
    margin-top: calc(var(--space)*1);
    margin-bottom: calc(var(--space)/2);
  }

  /* .nav-list li {
    margin-bottom: 0.5rem;
  } */

}