/* ============================================================
   Terminals & Ink — base tokens, layout, masthead, footer
   ============================================================ */
:root {
  --ti-bg:     #fbfaf7;
  --ti-ink:    #1b1a18;
  --ti-soft:   #5d5b54;
  --ti-faint:  #8d8a80;
  --ti-rule:   #e7e3da;
  --ti-tag:    #6a6862;
  --ti-tint:   rgba(0, 0, 0, 0.025);
  --ti-accent: #2f5d8a;
  --ti-gutter: clamp(20px, 5vw, 26px);
}

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ti-bg);
  color: var(--ti-ink);
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* layout */
.ti-wrap { max-width: 720px; margin-inline: auto; padding-inline: var(--ti-gutter); }

/* Side gutters so content never reaches the screen edge on narrow viewports.
   The constrained 720px content centers well inside these on desktop, so the
   padding only becomes visible as a side margin once the viewport drops below
   the content width. Applied to the three root containers: masthead (below),
   the main content area, and the footer wrapper. */
#ti-content, .ti-footer-wrap { padding-inline: var(--ti-gutter); }

a { color: var(--ti-accent); text-underline-offset: 2px; }
code, kbd, samp { font-family: var(--wp--preset--font-family--mono); font-size: 0.82em; }
:where(code):not(pre code) { background: var(--ti-tint); padding: 1px 5px; border-radius: 4px; }

/* skip link */
.ti-skip { position: absolute; left: -9999px; top: 0; background: var(--ti-accent); color: #fff;
  padding: 10px 16px; z-index: 999; font-family: var(--wp--preset--font-family--mono); font-size: 13px; }
.ti-skip:focus { left: 8px; top: 8px; }

/* masthead */
.ti-masthead { padding: 54px var(--ti-gutter) 26px; border-bottom: 1px solid var(--ti-rule); }
.ti-masthead-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ti-logo { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.ti-logo a { color: var(--ti-ink); text-decoration: none; }
.ti-logo b { color: var(--ti-accent); }
.ti-tagline { font-family: var(--wp--preset--font-family--mono); font-size: 0.78rem; color: var(--ti-faint); }
.ti-nav { font-family: var(--wp--preset--font-family--mono); font-size: 0.8rem; margin-top: 16px;
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.ti-nav a { color: var(--ti-soft); text-decoration: none; }
.ti-nav a:hover, .ti-nav a[aria-current] { color: var(--ti-accent); }

/* color-mode toggle */
.ti-toggle { margin-left: auto; font-family: var(--wp--preset--font-family--mono); font-size: 0.78rem;
  color: var(--ti-soft); background: transparent; border: 1px solid var(--ti-rule);
  padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.ti-toggle:hover { color: var(--ti-accent); border-color: var(--ti-accent); }

/* footer */
.ti-footer { padding: 40px 0 64px; margin-top: 40px; border-top: 1px solid var(--ti-rule);
  font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; color: var(--ti-faint);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ti-footer a { color: var(--ti-faint); text-decoration: none; }
.ti-footer a:hover { color: var(--ti-accent); }

/* ---- dark mode ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ti-bg:     #101216;
    --ti-ink:    #e7e5df;
    --ti-soft:   #a4a199;
    --ti-faint:  #6f6d66;
    --ti-rule:   #23262d;
    --ti-tag:    #8a877f;
    --ti-tint:   rgba(255, 255, 255, 0.03);
    --ti-accent: #7fb1e6;
  }
}
:root[data-theme="dark"] {
  --ti-bg:     #101216;
  --ti-ink:    #e7e5df;
  --ti-soft:   #a4a199;
  --ti-faint:  #6f6d66;
  --ti-rule:   #23262d;
  --ti-tag:    #8a877f;
  --ti-tint:   rgba(255, 255, 255, 0.03);
  --ti-accent: #7fb1e6;
}
:root, body { transition: background-color 0.2s ease, color 0.2s ease; }
@media (prefers-reduced-motion: reduce) {
  :root, body, * { transition: none !important; }
}

/* ---- focus visibility (keyboard) ---- */
:where(a, button, input, summary, .ti-toggle):focus-visible {
  outline: 2px solid var(--ti-accent);
  outline-offset: 2px;
  border-radius: 3px;
}
:where(a, button):focus:not(:focus-visible) { outline: none; }

/* form fields (search) inherit the system but keep contrast */
input[type="search"], input[type="text"] {
  font-family: var(--wp--preset--font-family--mono); font-size: 0.85rem;
  color: var(--ti-ink); background: var(--ti-bg);
  border: 1px solid var(--ti-rule); border-radius: 7px; padding: 8px 12px;
}

/* ---- responsive ---- */
@media (max-width: 600px) {
  .ti-masthead { padding: 36px var(--ti-gutter) 20px; }
  .ti-masthead-top { gap: 4px; }
  .ti-logo { font-size: 1.3rem; }
  .ti-nav { gap: 16px; font-size: 0.78rem; margin-top: 14px; }
  .ti-toggle { margin-left: 0; }
  .ti-entry { padding: 26px 0; }
  .ti-prevnext { flex-direction: column; }
  .ti-prevnext a, .ti-prevnext .ti-next { max-width: 100%; text-align: left; margin-left: 0; }
  body.single .ti-note .ti-note-body { font-size: 1.2rem; }
}

@media (max-width: 380px) {
  .ti-nav { gap: 12px; }
}