/* ==========================================================================
   ra ramen — pink paper, black ink
   A minimal print-paper theme following Japanese typographic conventions:
   generous ma (negative space), hairline rules instead of boxes, a mincho
   display face over a gothic text face, and no colour beyond paper and ink.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500&display=swap");

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Paper stock — sampled off the book's own contents page, which sits at
     hue 352 (rose), not the warmer peach this started as. */
  --paper:        #f6cdd3;
  --paper-deep:   #efbbc2;
  --paper-edge:   #e7abb3;

  /* Ink — the soft tones carry a little of the paper's hue, so they read as
     ink thinned on this sheet rather than neutral grey laid over it. */
  --ink:          #161012;
  --ink-soft:     #594044;
  --ink-faint:    #85666a;

  /* Hairlines — ink at low opacity so rules sit *on* the paper */
  --rule:         rgba(22, 16, 18, 0.18);
  --rule-strong:  rgba(22, 16, 18, 0.34);

  /* Display face */
  --jp-serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho",
              "YuMincho", "Noto Serif JP", serif;
}

/* Map the tokens onto Material's plumbing. The palette declares
   `custom`, so no built-in colour rule competes with these. */

[data-md-color-scheme="default"] {
  --md-default-bg-color:            var(--paper);
  --md-default-bg-color--light:     var(--paper);
  --md-default-bg-color--lighter:   var(--paper);
  --md-default-bg-color--lightest:  var(--paper);

  --md-default-fg-color:            var(--ink);
  --md-default-fg-color--light:     var(--ink-soft);
  --md-default-fg-color--lighter:   var(--ink-faint);
  --md-default-fg-color--lightest:  var(--rule);

  --md-typeset-color:               var(--ink);
  --md-typeset-a-color:             var(--ink);
  --md-typeset-mark-color:          var(--paper-edge);
  --md-typeset-del-color:           rgba(22, 16, 18, 0.1);
  --md-typeset-ins-color:           rgba(22, 16, 18, 0.1);

  --md-code-fg-color:               var(--ink);
  --md-code-bg-color:               var(--paper-deep);
  --md-code-hl-color:               var(--paper-edge);

  --md-footer-bg-color:             var(--paper);
  --md-footer-bg-color--dark:       var(--paper);
  --md-footer-fg-color:             var(--ink);
  --md-footer-fg-color--light:      var(--ink-soft);
  --md-footer-fg-color--lighter:    var(--ink-faint);

  --md-shadow-z1: none;
  --md-shadow-z2: none;
  --md-shadow-z3: none;
}

[data-md-color-primary="custom"] {
  --md-primary-fg-color:        var(--ink);
  --md-primary-fg-color--light: var(--ink-soft);
  --md-primary-fg-color--dark:  var(--ink);
  --md-primary-bg-color:        var(--paper);
  --md-primary-bg-color--light: var(--ink-soft);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color:            var(--ink);
  --md-accent-fg-color--transparent: rgba(22, 16, 18, 0.08);
  --md-accent-bg-color:            var(--paper);
  --md-accent-bg-color--light:     var(--paper-deep);
}

/* --------------------------------------------------------------------------
   2. Page ground & measure
   -------------------------------------------------------------------------- */

body {
  background-color: var(--paper);
}

.md-grid {
  max-width: 58rem;
}

.md-main__inner {
  margin-top: 0;
}

.md-content__inner {
  max-width: 34rem;          /* ~55 Latin characters — a printed measure */
  margin-inline: auto;
  padding: 3rem 1rem 5rem;
}

.md-content__inner::before {
  display: none;             /* Material's spacer — the padding above covers it */
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

.md-typeset {
  font-size: 0.8rem;
  line-height: 2;            /* loose leading, as Japanese setting expects */
  letter-spacing: 0.01em;
  font-feature-settings: "palt" 1;   /* proportional kana/punctuation metrics */
  line-break: strict;                /* honour kinsoku shori */
  text-spacing-trim: space-first;    /* trim leading bracket/quote space */
  hanging-punctuation: allow-end;
}

.md-typeset p {
  margin: 0 0 1.4em;
}

/* Headings sit in mincho at light weight — presence from space, not weight. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--jp-serif);
  font-weight: 400;
  color: var(--ink);
}

.md-typeset h1 {
  font-size: 1.85em;
  line-height: 1.55;
  letter-spacing: 0.05em;
  margin: 0 0 1.6em;
}

.md-typeset h2 {
  font-size: 1.2em;
  line-height: 1.7;
  letter-spacing: 0.1em;
  margin: 3.4em 0 1.4em;
  padding-bottom: 0.7em;
  border-bottom: 1px solid var(--rule);
}

.md-typeset h3 {
  font-size: 1em;
  letter-spacing: 0.12em;
  margin: 2.6em 0 1em;
}

.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-size: 0.85em;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin: 2.2em 0 0.9em;
}

/* The line directly under a page title reads as a lede. */
.md-typeset h1 + p {
  color: var(--ink-soft);
  letter-spacing: 0.03em;
}

.md-typeset h1 + p strong {
  color: var(--ink);
  font-weight: 500;
}

/* Permalinks stay out of the way until wanted. */
.md-typeset .headerlink {
  color: var(--rule);
  transition: color 125ms;
}

.md-typeset :is(h1, h2, h3, h4):hover .headerlink {
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   4. Links — an ink hairline, never a colour
   -------------------------------------------------------------------------- */

.md-typeset a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: text-decoration-color 125ms;
}

.md-typeset a:hover,
.md-typeset a:focus-visible {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* --------------------------------------------------------------------------
   5. Lists — hanging markers, mincho numerals
   -------------------------------------------------------------------------- */

.md-typeset ul,
.md-typeset ol {
  margin: 0 0 1.4em;
  padding-left: 0;           /* Material already hangs items by 1.25em */
}

.md-typeset li {
  margin-bottom: 0.5em;
}

.md-typeset li::marker {
  color: var(--ink-faint);
}

.md-typeset ol > li::marker {
  font-family: var(--jp-serif);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.md-typeset ul > li::marker {
  content: "–  ";            /* a dash reads quieter than a bullet on paper */
}

.md-typeset li > ul,
.md-typeset li > ol {
  margin-top: 0.5em;
}

/* --------------------------------------------------------------------------
   6. Rules, quotes, tables
   -------------------------------------------------------------------------- */

.md-typeset hr {
  border-bottom: 1px solid var(--rule);
  margin: 3.2em 0;
}

.md-typeset blockquote {
  border-left: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  padding-left: 1.4em;
  margin-left: 0;
}

.md-typeset table:not([class]) {
  border: 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  box-shadow: none;
  font-size: 0.95em;
  background-color: transparent;
}

.md-typeset table:not([class]) th {
  background-color: transparent;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--jp-serif);
  font-weight: 400;
  letter-spacing: 0.1em;
  padding: 0.9em 1em;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--rule);
  padding: 0.9em 1em;
}

.md-typeset table:not([class]) tr:first-child td {
  border-top: 0;
}

.md-typeset table:not([class]) tbody tr:hover {
  background-color: rgba(22, 16, 18, 0.04);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   7. Code
   -------------------------------------------------------------------------- */

.md-typeset code,
.md-typeset pre > code {
  border-radius: 0;
  box-shadow: none;
}

.md-typeset code {
  background-color: var(--paper-deep);
  padding: 0.1em 0.4em;
  font-size: 0.88em;
}

.md-typeset pre > code {
  background-color: var(--paper-deep);
  border: 1px solid var(--rule);
  padding: 1.1em 1.2em;
  line-height: 1.75;
}

.md-typeset .highlight :is(.o, .ow, .k, .kd, .kn, .nt) {
  color: var(--ink);
  font-weight: 500;
}

.md-typeset .highlight :is(.c, .c1, .cm) {
  color: var(--ink-faint);
  font-style: normal;
}

.md-typeset .md-clipboard {
  color: var(--rule-strong);
}

.md-typeset .md-clipboard:hover {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   8. Admonitions — a labelled block, not a coloured card
   --------------------------------------------------------------------------
   Material colours each flavour with rules like
   `.md-typeset :is(.admonition, details):is(.tip)` (specificity 0,3,0).
   The `[class]` below — always true, since every admonition carries one —
   lifts these overrides past that in one short selector, so note, tip,
   warning and the rest all render identically.
   -------------------------------------------------------------------------- */

.md-typeset :is(.admonition, details)[class] {
  background-color: transparent;
  border: 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  box-shadow: none;
  font-size: 0.95em;
  margin: 2.4em 0;
  padding: 0.2em 0 1em;
}

.md-typeset :is(.admonition, details)[class] > :is(.admonition-title, summary) {
  background-color: transparent;
  border: 0;
  font-family: var(--jp-serif);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.54rem;
  margin: 0;
  padding: 0.9rem 0 0.3rem;
}

/* One small ink square replaces every flavour's icon. */
.md-typeset :is(.admonition, details)[class] > :is(.admonition-title, summary)::before {
  background-color: var(--ink);
  mask-image: none;
  -webkit-mask-image: none;
  position: static;
  flex: 0 0 auto;
  width: 0.16rem;
  height: 0.16rem;
  margin: 0;
  border-radius: 0;
}

.md-typeset :is(.admonition, details)[class] > :not(.admonition-title):not(summary) {
  margin-left: 0.7rem;
  margin-right: 0;
}

.md-typeset details[class] > summary::after {
  color: var(--ink-faint);
  top: 0.85rem;
}

/* --------------------------------------------------------------------------
   9. Header
   -------------------------------------------------------------------------- */

.md-header {
  background-color: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  box-shadow: none !important;
}

.md-header__title {
  font-family: var(--jp-serif);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  margin-left: 0.6rem;
}

.md-header__topic:first-child {
  font-weight: 400;
}

.md-header__button {
  color: var(--ink);
  opacity: 0.72;
}

.md-header__button:hover {
  opacity: 1;
}

/* Tabs */
.md-tabs {
  background-color: var(--paper);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}

.md-tabs__list {
  gap: 0.4rem;
}

.md-tabs__link {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  opacity: 1;
  color: var(--ink-soft);
  margin-top: 0.72rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid transparent;
  transition: color 125ms, border-color 125ms;
}

.md-tabs__link:hover {
  color: var(--ink);
}

.md-tabs__item--active .md-tabs__link {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Search */
.md-search__form {
  background-color: transparent;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  height: 1.6rem;
}

.md-search__form:hover {
  background-color: rgba(22, 16, 18, 0.04);
}

.md-search__input {
  color: var(--ink);
  letter-spacing: 0.06em;
}

.md-search__input::placeholder {
  color: var(--ink-faint);
}

.md-search__icon,
.md-search__options .md-icon {
  color: var(--ink-soft);
}

.md-search__output {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--rule);
}

.md-search-result__meta {
  background-color: var(--paper-deep);
  color: var(--ink-soft);
  letter-spacing: 0.1em;
}

.md-search-result__article {
  background-color: var(--paper);
}

.md-search-result__link:is(:focus, :hover) {
  background-color: var(--paper-deep);
}

/* --------------------------------------------------------------------------
   10. Navigation
   -------------------------------------------------------------------------- */

.md-nav {
  font-size: 0.66rem;
  line-height: 1.8;
}

.md-nav__title {
  font-family: var(--jp-serif);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  background-color: transparent;
  box-shadow: none;
  padding-bottom: 0.8rem;
}

.md-nav__link {
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  transition: color 125ms;
}

.md-nav__link:is(:hover, :focus) {
  color: var(--ink);
}

.md-nav__item--active > .md-nav__link,
.md-nav__link--active {
  color: var(--ink);
}

/* Section labels (navigation.sections) read as small caps rules. With
   navigation.indexes they are links to the section's own page, so they take a
   hairline on hover — otherwise, being ink already, they give no feedback. */
.md-nav__item--section > .md-nav__link {
  font-family: var(--jp-serif);
  font-size: 0.92em;
  letter-spacing: 0.16em;
  color: var(--ink);
}

.md-nav__item--section > a.md-nav__link:hover {
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* The integrated table of contents, kept faint. */
.md-nav--secondary .md-nav__link,
.md-nav__item .md-nav--secondary .md-nav__title {
  color: var(--ink-faint);
}

.md-nav--secondary .md-nav__list,
.md-nav--secondary .md-nav__item {
  border-left-color: var(--rule);
}

.md-sidebar__scrollwrap {
  scrollbar-color: var(--rule) transparent;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.md-footer {
  background-color: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--rule);
}

.md-footer__inner {
  padding: 0.6rem 0;
}

.md-footer__link {
  opacity: 1;
  color: var(--ink-soft);
  transition: color 125ms;
}

.md-footer__link:hover {
  color: var(--ink);
}

.md-footer__direction {
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  opacity: 0.8;
}

.md-footer__title {
  font-family: var(--jp-serif);
  background-color: transparent;
}

.md-footer-meta {
  background-color: var(--paper);
  border-top: 1px solid var(--rule);
}

.md-copyright,
.md-copyright__highlight {
  color: var(--ink-faint);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
}

.md-footer-meta .md-social__link {
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   12. Details
   -------------------------------------------------------------------------- */

::selection {
  background-color: var(--ink);
  color: var(--paper);
}

.md-top {
  background-color: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
}

.md-top:hover {
  background-color: var(--ink);
  color: var(--paper);
}

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

@media print {
  .md-typeset a {
    text-decoration-color: var(--rule);
  }
}

/* --------------------------------------------------------------------------
   13. Cover lockup & front matter
   --------------------------------------------------------------------------
   The homepage opens the way the book does: the Latin title set in gothic
   (the cover's own voice, not the mincho used for text), with the katakana
   running vertically in the one place ink becomes a field instead of a line.
   -------------------------------------------------------------------------- */

.md-typeset .cover {
  display: flex;
  align-items: stretch;
  gap: 1.8rem;
  min-height: 8.5rem;
  margin: 0 0 1em;
}

.md-typeset .cover__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0.5rem;
}

.md-typeset .cover__title {
  font-family: var(--md-text-font-family);
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.7em;
}

.md-typeset .cover__author {
  font-size: 0.8em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.md-typeset .cover__kana {
  flex: 0 0 auto;
  writing-mode: vertical-rl;
  white-space: nowrap;       /* the title runs as one unbroken column */
  font-family: var(--jp-serif);
  font-size: 1em;
  letter-spacing: 0.2em;
  background-color: var(--ink);
  color: var(--paper);
  margin: 0;
  padding: 1.3rem 0.46rem;
}

.md-typeset .dedication {
  margin: 4em 0 1.8em;
  text-align: center;
  text-wrap: balance;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
}

.md-typeset .signature {
  margin: 0 0 4.4em;
  text-align: center;
  font-family: var(--jp-serif);
  font-size: 0.85em;
  letter-spacing: 0.2em;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   14. Logo
   --------------------------------------------------------------------------
   The mark carries fine detail — the chopsticks, the speed lines, RAMEN — so
   it needs more room than Material's default 1.2rem or it silts up.
   -------------------------------------------------------------------------- */

.md-header__button.md-logo {
  padding: 0.2rem;
  margin: 0.2rem 0.1rem;
}

.md-header__button.md-logo img {
  width: auto;
  height: 1.6rem;
}

/* --------------------------------------------------------------------------
   15. Profile
   --------------------------------------------------------------------------
   The home page's own lockup: the mark, the name, the handle. The book keeps
   its cover; this is the person.
   -------------------------------------------------------------------------- */

.md-typeset .profile {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin: 1.4em 0 3.2em;
}

.md-typeset .profile__mark {
  flex: 0 0 auto;
  width: 4.6rem;
  height: auto;
}

.md-typeset .profile__name {
  font-family: var(--md-text-font-family);
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.5em;
}

.md-typeset .profile__handle {
  font-size: 0.8em;
  letter-spacing: 0.14em;
  margin: 0;
}

.md-typeset .profile__handle a {
  color: var(--ink-soft);
}

.md-typeset .profile__handle a:hover {
  color: var(--ink);
}

.md-typeset .profile__bio {
  font-size: 1.05em;
  line-height: 1.85;
  margin: 0 0 1.2em;
}

.md-typeset .profile__where {
  font-size: 0.75em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 2.4em;
}

/* The Japanese half of the bio, set in mincho below a hairline. */
.md-typeset .profile__ja {
  font-family: var(--jp-serif);
  font-size: 0.95em;
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding-top: 2em;
  margin: 0 0 1.2em;
}

.md-typeset .profile__thanks {
  font-family: var(--jp-serif);
  font-size: 0.85em;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin: 0 0 1em;
}