/*
  Plain hand-written CSS - no design system underneath.

  Removed govuk-frontend entirely (2026-09-13): once the navy header,
  buttons, and card borders were stripped for the minimal darioamodei.com-
  style redesign, the only things still being pulled from govuk-frontend
  were a handful of heading/body type-scale classes and a skip-link - for
  ~180KB of CSS+JS (and a full unused JS module, since no govuk-frontend
  component - header nav, buttons, accordion - is used on this page
  anymore). Replaced with the plain rules below. Off-Grid
  (offgrid.taikiito.com) is a different project and keeps govuk-frontend
  properly, since GOV.UK's look is a deliberate trust signal there; this
  is a personal homepage, so it doesn't need it.
*/

* {
  box-sizing: border-box;
}

/* "Newsreader" - the serif Google Font darioamodei.com uses for both
   body copy and headings (there loaded as the optical-size cuts
   "Newsreader 24 Pt" for body / "Newsreader Display" for large
   headings; the base family is the same, so one weight range here
   covers both). Noto Sans JP covers Japanese, with a serif Japanese
   fallback (Hiragino Mincho ProN / Yu Mincho) to keep the same tone;
   system serif is the final fallback if the webfont fails to load. */
html, body {
  font-family: "Newsreader", "Noto Sans JP",
    "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* Base size raised from 16px to 18px (1.125rem) - GOV.UK treats 16px as
   an accessibility *floor*, not a target; its own body copy sizes up to
   19px on desktop. 18px reads more comfortably for the longer prose on
   this page. Line-height 1.6 was already in the GOV.UK-recommended
   range for long-form body text and needed no change. */
body {
  background: #f0eee6;
  color: #1a1a1a;
  line-height: 1.6;
  margin: 0;
  font-size: 1.125rem;
}

/* Browsers apply :visited via the UA stylesheet as `a:visited { color:
   purple }` (specificity 0,1,1 - element + pseudo-class), which beats a
   bare `a { color: inherit }` (0,0,1). Needs an explicit :visited rule
   to actually override the default blue/purple visited-link color. */
a,
a:visited {
  color: inherit;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
}

/* Visually hidden unless focused - standard skip-link pattern. */
.taiki-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #f0eee6;
  color: #1a1a1a;
  padding: 8px 12px;
  z-index: 10;
}

.taiki-skip-link:focus {
  left: 8px;
  top: 8px;
}

/* Narrowed from 700px to keep lines under ~75 characters now that body
   text is 18px instead of 16px (GOV.UK guidance: lines beyond ~75
   characters get harder to read; the British Dyslexia Association
   recommends 60-70). */
.taiki-page {
  max-width: 660px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

/* Header: plain text wordmark, no colored bar/box. */
.taiki-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}

.taiki-wordmark,
.taiki-wordmark:visited {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: none;
}

.taiki-lang-toggle {
  background: none;
  border: none;
  color: #1a1a1a;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0;
  text-decoration: underline;
  text-decoration-thickness: max(1px, .0625rem);
  text-underline-offset: 0.2em;
}

.taiki-lang-toggle:hover {
  color: #5b6472;
}

/* Hero: plain name, one-line description - no colored background block. */
.taiki-hero {
  margin-bottom: 40px;
}

.taiki-hero__lede {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 34em;
  margin: 0;
}

/* Plain, not a mailto: link - clicking used to force-launch a mail app,
   which the user found annoying. Just showing the address as text lets
   people read/copy it and reach out however they prefer. Placed just
   above the footer rather than up in the hero - GitHub is already
   linked once in the projects list below, no need to repeat it here. */
.taiki-hero__label {
  color: #5b6472;
}

.taiki-contact {
  margin-top: 56px;
  margin-bottom: 0;
  color: #1a1a1a;
}

/* Projects & writing: plain list, links underlined in the same ink color
   as body text (no "link blue") - no card borders/boxes, no dividers
   between items, whitespace alone separates them. */
.taiki-section h2 {
  margin-bottom: 20px;
  font-size: 1.3rem;
}

.taiki-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.taiki-list > li {
  padding-bottom: 24px;
}

.taiki-list > li:last-child {
  padding-bottom: 0;
}

.taiki-list h3 {
  margin-bottom: 6px;
  font-size: 1.1rem;
}

.taiki-list a,
.taiki-list a:visited {
  color: #1a1a1a;
  text-decoration: underline;
  text-decoration-thickness: max(1px, .0625rem);
  text-underline-offset: .15em;
}

.taiki-list a:hover {
  color: #5b6472;
}

.taiki-list p {
  margin: 0;
  color: #5b6472;
}

.taiki-sublist {
  margin: 8px 0 0;
  padding-left: 1.1em;
  color: #5b6472;
}

.taiki-sublist li {
  margin-top: 4px;
}

.taiki-note {
  color: #a8a196;
  font-weight: 400;
  font-size: 0.9em;
}

.taiki-footer {
  margin-top: 20px;
  color: #a8a196;
  font-size: 0.9rem;
}

/* Language show/hide via data attribute, toggled by JS */
[data-lang-content] {
  display: none;
}

[data-lang-content].is-active {
  display: block;
}

span[data-lang-content].is-active,
li[data-lang-content].is-active {
  display: list-item;
}