/* Self-hosted Google Fonts: Latin subsets, SIL Open Font License. */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/noto-serif-jp-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/noto-serif-jp-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/source-serif-4-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/source-serif-4-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/source-serif-4-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Night ink around the original print. */
:root {
  color-scheme: dark;
  --night-deep: #0b100f;
  --night: #141a18;
  --panel: #1c2421;
  --mat: #1a1612;
  --ink: #e8d6b8;
  --ink-soft: #cdbba0;
  --forest: #8a9a88;
  --mist: #a8a290;
  --quiet: #9a9484;
  --red: #c4543c;
  --red-deep: #af4430;
  --link: #e07a62;
  --rule: #3a4640;
  --frame: #5c6b5a;
  --title: 'Noto Serif JP', Georgia, serif;
  --body: 'Source Serif 4', Georgia, serif;
}
* { box-sizing: border-box; }
html { background: var(--night-deep); }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% 0%, #c4543c14, transparent 42%),
    radial-gradient(ellipse at 50% 120%, #25302d66, transparent 55%),
    var(--night-deep);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23e8d6b8' filter='url(%23grain)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
::selection { background: #c4543c55; color: var(--ink); }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; border-radius: 1px; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--title); font-weight: 400; line-height: 1.3; }
h1 { font-size: clamp(2.25rem, 5vw, 3.6rem); letter-spacing: -.035em; }
p + p { margin-top: 1.1em; }
.skip-link { position: absolute; top: -100px; left: 1rem; padding: .65rem 1rem; background: var(--panel); color: var(--ink); z-index: 10; }
.skip-link:focus { top: 1rem; }
.page-frame {
  max-width: 1120px;
  margin: 28px auto;
  padding: 0 48px;
  border: 1px solid var(--frame);
  position: relative;
  background: var(--night);
}
.page-frame::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid #5c6b5a66;
  pointer-events: none;
  z-index: 1;
}

/* Masthead */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 2;
}
.identity { display: flex; gap: 24px; align-items: center; color: var(--ink); text-decoration: none; }
.identity:hover { text-decoration: none; }
.seal {
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #c4543c55, 0 10px 28px #00000066;
}
.wordmark { display: grid; gap: 10px; }
.site-title { font-family: var(--title); font-size: clamp(1.1rem, 2.5vw, 1.6rem); line-height: 1.4; }
.domain { font-size: .78rem; letter-spacing: .2em; color: var(--quiet); text-transform: lowercase; }
.masthead nav { display: flex; gap: 26px; }
.masthead nav a, .eyebrow, .section-heading, .colophon, .read-link, .post-navigation, .stamp-link {
  font-size: .75rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 500;
}
.masthead nav a { color: var(--ink-soft); text-decoration: none; padding: 12px 0; }
.masthead nav a:hover { text-decoration: underline; }
.masthead nav a[aria-current='page'] { color: var(--link); box-shadow: 0 1px var(--red); }

/* Prints taken from the original image */
.featured-print, .full-print {
  position: relative;
  z-index: 2;
  margin: 22px 0 0;
  padding: 9px;
  background: var(--mat);
  box-shadow:
    0 0 0 1px var(--frame),
    inset 0 0 0 6px var(--night),
    inset 0 0 0 7px var(--frame);
}
.featured-print img, .full-print img { display: block; width: 100%; height: auto; }
.featured-print figcaption, .full-print figcaption {
  margin: 10px 8px 2px;
  color: var(--quiet);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
}
.horizon {
  position: relative;
  z-index: 2;
  margin: 18px 0 0;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--frame);
}
.horizon img {
  display: block;
  width: 100%;
  height: auto;
}
.horizon::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 28%;
  background: linear-gradient(to bottom, transparent, var(--night));
  pointer-events: none;
}

/* Journal index */
main { min-height: 280px; position: relative; z-index: 2; }
main:focus { outline: none; }
.introduction { max-width: 700px; padding: 52px 0 46px; }
.eyebrow { color: var(--quiet); line-height: 1.8; }
.introduction .eyebrow { display: flex; align-items: center; gap: 13px; margin-bottom: 21px; }
.sun { width: 17px; height: 17px; display: inline-block; background: var(--red); border-radius: 50%; box-shadow: 0 0 0 1px #c4543c88; }
.introduction h1 { margin-bottom: 20px; }
.introduction > p:last-child { max-width: 48ch; color: var(--ink-soft); font-size: 1.16rem; }
.writing { padding: 36px 0 24px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; color: var(--quiet); margin-bottom: 18px; }
.section-heading h2 { font: inherit; }
.section-heading > span { font-size: .68rem; }
.post-list { list-style: none; margin: 0; padding: 0; }
.print-plate {
  position: relative;
  border: 3px double var(--frame);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 24px;
  background: var(--panel);
}
.plate-number { font-family: var(--title); font-size: .85rem; color: var(--quiet); padding-top: 3px; }
.plate-content h3 { font-size: 2.1rem; margin: 12px 0 14px; }
.plate-content h3 a { color: var(--ink); text-decoration: none; }
.plate-content h3 a:hover { color: var(--link); text-decoration: underline; }
.plate-content > p:not(.eyebrow) { max-width: 52ch; color: var(--ink-soft); }
.read-link { display: inline-block; margin-top: 25px; text-decoration: none; }
.read-link span { padding-left: 10px; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 20px; color: var(--forest); padding: 26px 0 16px; }
.ornament span { width: 44px; height: 1px; background: var(--rule); }
.ornament img { width: 42px; height: 42px; object-fit: cover; border: 1px solid var(--red-deep); }

/* Reading pages */
.reading-page { max-width: 65ch; margin: 0 auto; padding: 52px 0 48px; }
.article-heading { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--rule); }
.article-heading .eyebrow { margin-bottom: 18px; }
.article-deck { margin-top: 20px; font-size: 1.3rem; color: var(--quiet); font-style: italic; }
.prose { font-size: 1.16rem; line-height: 1.85; overflow-wrap: break-word; }
.prose .lead { font-size: 1.35rem; line-height: 1.7; }
.prose h2 { font-size: 1.8rem; margin: 1.6em 0 .65em; }
.prose h3 { font-size: 1.35rem; margin: 1.6em 0 .65em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose blockquote { border-left: 2px solid var(--red); margin: 1.5em 0; padding-left: 1.2em; color: var(--ink-soft); }
.prose figure { margin: 2em 0; }
.prose img { display: block; border: 1px solid var(--frame); padding: 5px; background: var(--mat); }
.prose figcaption { color: var(--quiet); font-size: .9rem; margin-top: .6em; }
.prose pre { overflow-x: auto; padding: 1em; border: 1px solid var(--rule); font-size: .85rem; background: var(--panel); }
.end-stamp {
  width: 48px;
  height: 48px;
  margin: 38px 0;
  transform: rotate(-3deg);
  border: 1px solid var(--red-deep);
  overflow: hidden;
}
.end-stamp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-navigation { border-top: 1px solid var(--rule); padding-top: 24px; }
.post-navigation a { text-decoration: none; }
.not-found { padding-block: 80px 100px; }
.not-found h1 { margin: 20px 0 25px; }
.stamp-link { display: inline-block; padding: 12px 18px; border: 1px solid var(--red); margin-top: 30px; text-decoration: none; color: var(--link); }

/* Colophon */
.colophon {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 18px 24px;
  align-items: end;
  padding: 28px 0 30px;
  border-top: 1px solid var(--rule);
  font-size: .66rem;
  letter-spacing: .12em;
  color: var(--quiet);
  position: relative;
  z-index: 2;
}
.colophon a { color: var(--quiet); white-space: nowrap; }
.footer-art {
  width: 88px;
  border: 1px solid var(--rule);
  display: block;
}
.footer-mark { color: var(--red); font-size: 1.2rem; vertical-align: -1px; padding-right: 8px; }
.footer-domain { white-space: nowrap; }

@media (max-width: 800px) {
  .page-frame { margin: 16px; padding-inline: 28px; }
  .masthead { flex-wrap: wrap; gap: 20px; }
  .masthead nav { margin-left: 136px; }
  .introduction { padding-top: 40px; }
}
@media (max-width: 600px) {
  body { font-size: 18px; }
  .page-frame { margin: 10px; padding-inline: 20px; }
  .masthead { padding-block: 25px 20px; gap: 20px; }
  .seal { width: 88px; height: 88px; }
  .site-title { font-size: 1.1rem; }
  .wordmark { gap: 8px; }
  .domain { font-size: .68rem; }
  .masthead nav { margin-left: 0; gap: 30px; }
  .masthead nav a { padding: 5px 0; }
  .introduction { padding: 36px 0; }
  .introduction > p:last-child { font-size: 1.1rem; }
  .print-plate { padding: 25px 22px; grid-template-columns: 1fr; gap: 0; }
  .plate-number { display: none; }
  .plate-content h3 { font-size: 1.8rem; }
  .eyebrow { font-size: .67rem; letter-spacing: .15em; }
  .reading-page { padding-block: 36px; }
  .prose { font-size: 1.1rem; }
  .prose .lead { font-size: 1.22rem; }
  .colophon { grid-template-columns: 72px 1fr; font-size: .62rem; }
  .footer-art { width: 72px; }
}
@media print {
  body { background: #efdec1; color: #212c2f; }
  body::before, .masthead nav, .skip-link, .colophon, .post-navigation, .horizon { display: none; }
  .page-frame { border: 0; margin: 0; padding: 0; background: transparent; }
  .page-frame::before { display: none; }
  .reading-page { max-width: none; }
  a { color: #212c2f; }
}

/* Keep both footer links in the colophon’s third grid cell. */
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }