/*
Theme Name: 恋、どう思う？
Theme URI: https://koidouomou.com/
Author: 恋、どう思う？
Description: 「恋、どう思う？」専用のクラシックWordPressテーマ。既存の投稿・カテゴリー・URLを維持したまま、静かな読み心地と編集可能なトップページを提供します。
Version: 0.2.6
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: koidouomou
*/

:root {
  --ivory: #fbf8f2;
  --paper: #fffdf8;
  --ink: #403a36;
  --ink-soft: #6e6660;
  --dove: #b9adaa;
  --dove-deep: #88797a;
  --rosewood: #88676d;
  --rosewood-dark: #6f5258;
  --oat: #eadcc6;
  --peach: #edcbb9;
  --line: #ded5ca;
  --line-dark: #cabeb2;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.siteHeader {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
}

.headerInner {
  width: min(1180px, calc(100% - 64px));
  min-height: 92px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(111, 82, 88, 0.18);
}

.wordmark,
.footerWordmark {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.wordmark {
  font-size: 22px;
}

.desktopNav {
  display: flex;
  align-items: center;
  gap: 32px;
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.desktopNav a {
  position: relative;
  padding: 8px 0;
}

.desktopNav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: var(--rosewood);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms ease;
}

.desktopNav a:hover::after,
.desktopNav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.mobileMenu {
  display: none;
}

.hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  padding: 148px 0 80px;
  background:
    radial-gradient(circle at 78% 42%, rgba(234, 220, 198, 0.62), transparent 34%),
    linear-gradient(180deg, #fcf9f4 0%, #faf6ef 100%);
}

.hero::after {
  content: "";
  position: absolute;
  right: -150px;
  top: -250px;
  width: 610px;
  height: 610px;
  border: 1px solid rgba(136, 103, 109, 0.11);
  border-radius: 50%;
}

.heroGlow {
  position: absolute;
  right: 17%;
  bottom: -220px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: rgba(237, 203, 185, 0.15);
  filter: blur(2px);
}

.heroInner {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(400px, 0.86fr);
  align-items: center;
  gap: 42px;
}

.heroCopy {
  padding: 28px 0 42px;
}

.eyebrow,
.sectionKicker {
  margin: 0;
  color: var(--rosewood);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.08em;
}

.eyebrow span {
  display: block;
  width: 34px;
  height: 1px;
  background: var(--rosewood);
}

.hero h1 {
  margin: 28px 0 28px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(40px, 3.55vw, 50px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.055em;
}

.hero h1 span {
  display: block;
  white-space: nowrap;
}

.heroDescription {
  max-width: 640px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 2.1;
}

.heroActions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 38px;
}

.primaryButton {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 42px;
  padding: 0 25px 0 28px;
  border: 1px solid var(--rosewood);
  border-radius: 2px;
  background: var(--rosewood);
  color: #fffaf5;
  font-size: 14px;
  letter-spacing: 0.06em;
  transition: background 180ms ease, transform 180ms ease;
}

.primaryButton:hover,
.primaryButton:focus-visible {
  background: var(--rosewood-dark);
  transform: translateY(-2px);
}

.primaryButton span {
  font-size: 18px;
}

.textLink {
  padding: 7px 1px 5px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.heroVisual {
  position: relative;
  isolation: isolate;
  min-height: 505px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heroVisual img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  mix-blend-mode: normal;
  filter: saturate(0.88) contrast(0.98);
}

.heroImageWash {
  position: absolute;
  z-index: 0;
  width: 410px;
  height: 410px;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.58);
  box-shadow: 0 0 0 36px rgba(234, 220, 198, 0.16);
}

.heroVisual > p {
  position: absolute;
  z-index: 3;
  right: 11px;
  bottom: 70px;
  margin: 0;
  color: rgba(111, 82, 88, 0.58);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.13em;
  writing-mode: vertical-rl;
}

.scrollCue {
  position: absolute;
  z-index: 3;
  left: max(32px, calc((100% - 1180px) / 2));
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #8a817a;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.scrollCue span {
  width: 28px;
  height: 1px;
  background: var(--line-dark);
}

.section {
  padding: 116px 0 128px;
}

.sectionInner {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
}

.headingSplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 52px;
  margin-bottom: 52px;
}

.sectionHeading h2 {
  margin: 12px 0 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(31px, 3.1vw, 46px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.075em;
}

.headingSplit > p {
  margin: 0 0 4px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 2;
}

.categoryGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}

.categoryCard {
  position: relative;
  min-height: 224px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 24px;
  padding: 34px 62px 33px 27px;
  border-bottom: 1px solid var(--line);
  transition: background 200ms ease;
}

.categoryCard:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.categoryCard:hover,
.categoryCard:focus-visible {
  background: rgba(255, 253, 248, 0.82);
  outline: none;
}

.categoryNumber {
  padding-top: 4px;
  color: var(--dove-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.categoryLabel {
  color: var(--rosewood);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.categoryCard h3 {
  margin: 10px 0 12px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.045em;
}

.categoryCard p {
  max-width: 390px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.9;
}

.cardArrow {
  position: absolute;
  right: 28px;
  bottom: 28px;
  color: var(--dove-deep);
  font-size: 18px;
  transition: transform 180ms ease;
}

.categoryCard:hover .cardArrow,
.categoryCard:focus-visible .cardArrow {
  transform: translate(3px, -3px);
}

.recommended {
  background: var(--paper);
}

.centeredHeading {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.centeredHeading > p:last-child {
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.mobileOnlyInline {
  display: none !important;
}

.recommendedGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.articleCard {
  position: relative;
  min-height: 310px;
  display: flex;
  flex-direction: column;
  padding: 34px 38px 31px;
  border: 1px solid var(--line);
  background: var(--ivory);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.articleCard::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 42px;
  height: 42px;
  border-top: 1px solid var(--rosewood);
  border-left: 1px solid var(--rosewood);
  opacity: 0;
  transition: opacity 180ms ease;
}

.articleCard:hover,
.articleCard:focus-visible {
  border-color: var(--line-dark);
  box-shadow: 0 16px 38px rgba(72, 61, 56, 0.07);
  outline: none;
  transform: translateY(-3px);
}

.articleCard:hover::before,
.articleCard:focus-visible::before {
  opacity: 1;
}

.articleCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--rosewood);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.articleCardTop span:last-child {
  color: var(--line-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 400;
}

.articleCard h3 {
  max-width: 440px;
  margin: 25px 0 15px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.04em;
}

.articleCard > p {
  max-width: 460px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.95;
}

.readMore {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  padding-top: 24px;
  color: var(--rosewood);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.readMore span {
  font-size: 17px;
  font-weight: 400;
}

.miniWork {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background: #756368;
  color: #fffaf4;
}

.miniWork::before,
.miniWork::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 250, 244, 0.11);
  border-radius: 50%;
}

.miniWork::before {
  top: -235px;
  left: -180px;
  width: 500px;
  height: 500px;
}

.miniWork::after {
  right: -90px;
  bottom: -280px;
  width: 530px;
  height: 530px;
}

.miniWorkInner {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  align-items: center;
  gap: 82px;
}

.lightKicker {
  color: var(--oat);
}

.miniWorkIntro h2 {
  margin: 16px 0 25px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(31px, 3.25vw, 45px);
  font-weight: 500;
  line-height: 1.58;
  letter-spacing: 0.055em;
}

.miniWorkIntro > p:last-child {
  max-width: 420px;
  margin: 0;
  color: rgba(255, 250, 244, 0.72);
  font-size: 13px;
  line-height: 2;
}

.workChoices {
  border-top: 1px solid rgba(255, 250, 244, 0.24);
}

.workCard {
  position: relative;
  min-height: 148px;
  display: grid;
  grid-template-columns: 48px 1fr 36px;
  align-items: center;
  gap: 22px;
  padding: 28px 24px 28px 7px;
  border-bottom: 1px solid rgba(255, 250, 244, 0.24);
  transition: background 180ms ease, padding 180ms ease;
}

.workCard:hover,
.workCard:focus-visible {
  padding-right: 18px;
  padding-left: 18px;
  background: rgba(255, 250, 244, 0.075);
  outline: none;
}

.workNumber {
  color: rgba(255, 250, 244, 0.5);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
}

.workCard p {
  margin: 0 0 6px;
  color: rgba(255, 250, 244, 0.62);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.workCard h3 {
  margin: 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.055em;
}

.workArrow {
  font-size: 20px;
}

.feelingMapPromo {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

.feelingMapPromoInner {
  width: min(1180px, calc(100% - 64px));
  min-height: 610px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(390px, 0.96fr);
  align-items: center;
  gap: 60px;
  padding: 88px 0 92px;
}

.feelingMapPromoKicker {
  margin: 0;
  color: var(--rosewood);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.feelingMapPromoTitle {
  margin: 17px 0 24px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(34px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.055em;
}

.feelingMapPromoBody {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 2.05;
}

.feelingMapPromoPrivacy {
  margin: 8px 0 0;
  color: #7f7570;
  font-size: 12px;
  line-height: 2.05;
}

.feelingMapPromoLink {
  min-width: 244px;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  margin-top: 31px;
  padding: 0 21px 0 24px;
  border: 1px solid var(--rosewood);
  color: var(--rosewood-dark);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.055em;
  transition: background 180ms ease, color 180ms ease;
}

.feelingMapPromoLink:hover,
.feelingMapPromoLink:focus-visible {
  background: var(--rosewood);
  color: var(--paper);
  outline: none;
}

.feelingMapPromoLink > span:last-child {
  font-size: 18px;
}

.feelingMapPromoVisual {
  position: relative;
  min-height: 390px;
}

.feelingMapPromoCard {
  position: absolute;
  width: 286px;
  height: 286px;
  border: 1px solid #d8cfc5;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 18px 48px rgba(74, 61, 56, 0.075);
}

.feelingMapPromoCard:first-child {
  z-index: 1;
  left: 2%;
  bottom: 4px;
}

.feelingMapPromoCard:last-child {
  z-index: 2;
  top: 2px;
  right: 1%;
}

.feelingMapPromoCardTitle {
  height: 53px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 18px;
  border-bottom: 1px solid #e7dfd6;
  color: #514946;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.feelingMapPromoCardTitle b {
  color: var(--rosewood);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.feelingMapPromoPlot {
  position: absolute;
  inset: 72px 28px 28px;
  border: 1px solid #d8cfc5;
  background-image:
    linear-gradient(to right, transparent 49.72%, #cbbfb5 49.72%, #cbbfb5 50.28%, transparent 50.28%),
    linear-gradient(to bottom, transparent 49.72%, #cbbfb5 49.72%, #cbbfb5 50.28%, transparent 50.28%),
    linear-gradient(to right, transparent 24.85%, rgba(222, 213, 202, 0.52) 24.85%, rgba(222, 213, 202, 0.52) 25.15%, transparent 25.15%, transparent 74.85%, rgba(222, 213, 202, 0.52) 74.85%, rgba(222, 213, 202, 0.52) 75.15%, transparent 75.15%),
    linear-gradient(to bottom, transparent 24.85%, rgba(222, 213, 202, 0.52) 24.85%, rgba(222, 213, 202, 0.52) 25.15%, transparent 25.15%, transparent 74.85%, rgba(222, 213, 202, 0.52) 74.85%, rgba(222, 213, 202, 0.52) 75.15%, transparent 75.15%);
}

.feelingMapPromoDot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rosewood);
  transform: translate(-50%, -50%);
}

.feelingMapPromoDot.isOld {
  opacity: 0.24;
}

.feelingMapPromoDot.isMiddle {
  opacity: 0.48;
}

.feelingMapPromoDot.isNew {
  width: 8px;
  height: 8px;
  opacity: 0.9;
}

.popular {
  background: var(--ivory);
}

.popularLayout {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: 78px;
}

.popularHeading {
  position: sticky;
  top: 44px;
}

.popularHeading h2 {
  font-size: clamp(34px, 3vw, 40px);
}

.popularHeading > p:not(.sectionKicker) {
  max-width: 320px;
  margin: 24px 0 26px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 2;
}

.quietLink {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 7px 0 4px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--rosewood);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.popularList {
  border-top: 1px solid var(--line-dark);
}

.popularItem {
  min-height: 170px;
  display: grid;
  grid-template-columns: 64px 1fr 28px;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  transition: padding 180ms ease, background 180ms ease;
}

.popularItem:hover,
.popularItem:focus-visible {
  padding-right: 12px;
  padding-left: 12px;
  background: var(--paper);
  outline: none;
}

.popularNumber {
  color: var(--oat);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  line-height: 1;
}

.popularItem > div > span {
  color: var(--rosewood);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.popularItem h3 {
  margin: 10px 0 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.045em;
}

.popularArrow {
  color: var(--dove-deep);
  font-size: 18px;
}

.latest {
  background: #f3ede4;
}

.latestHeading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 52px;
}

.latestGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.latestCard {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 27px 25px 24px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(255, 253, 248, 0.38);
  transition: background 180ms ease;
}

.latestCard:hover,
.latestCard:focus-visible {
  background: var(--paper);
  outline: none;
}

.latestLabel {
  color: var(--rosewood);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.latestCard h3 {
  margin: 17px 0 12px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.72;
  letter-spacing: 0.035em;
}

.latestCard p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.9;
}

.latestArrow {
  margin-top: 22px;
  padding-top: 0;
  color: var(--rosewood);
  font-size: 18px;
}

.closing {
  padding: 112px 0;
  background: var(--paper);
  text-align: center;
}

.closingInner {
  width: min(820px, calc(100% - 44px));
  margin: 0 auto;
}

.closingInner > p {
  margin: 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(22px, 2.35vw, 32px);
  line-height: 1.75;
  letter-spacing: 0.075em;
}

.closingInner > p:first-child {
  color: var(--dove-deep);
  font-size: 14px;
}

.homeClosing .closingInner > p {
  color: var(--dove-deep);
  font-size: 14px;
}

.closingInner > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 38px;
  color: var(--ink-soft);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.siteFooter {
  padding: 62px 0 24px;
  background: #49413d;
  color: #fffaf4;
}

.footerInner {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.footerWordmark {
  margin: 0;
  font-size: 21px;
}

.footerIdentity > p:last-child {
  margin: 12px 0 0;
  color: rgba(255, 250, 244, 0.58);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.footerNav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 28px;
  color: rgba(255, 250, 244, 0.72);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.footerNav a:hover,
.footerNav a:focus-visible {
  color: #fffaf4;
}

.copyright {
  width: min(1180px, calc(100% - 64px));
  margin: 50px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 250, 244, 0.13);
  color: rgba(255, 250, 244, 0.42);
  font-size: 10px;
  letter-spacing: 0.07em;
}

@media (max-width: 960px) {
  .headerInner,
  .heroInner,
  .sectionInner,
  .miniWorkInner,
  .feelingMapPromoInner,
  .footerInner {
    width: min(100% - 44px, 720px);
  }

  .copyright {
    width: min(100% - 44px, 720px);
  }

  .desktopNav {
    display: none;
  }

  .mobileMenu {
    position: relative;
    display: block;
  }

  .mobileMenu summary {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    list-style: none;
  }

  .mobileMenu summary::-webkit-details-marker {
    display: none;
  }

  .mobileMenu summary span {
    width: 22px;
    height: 1px;
    background: var(--ink);
  }

  .mobileMenu nav {
    position: absolute;
    top: 48px;
    right: 0;
    width: 230px;
    padding: 12px 22px;
    border: 1px solid var(--line);
    background: rgba(255, 253, 248, 0.98);
    box-shadow: 0 18px 38px rgba(65, 55, 50, 0.1);
  }

  .mobileMenu nav a {
    display: block;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 13px;
  }

  .mobileMenu nav a:last-child {
    border-bottom: 0;
  }

  .hero {
    min-height: 0;
    padding: 126px 0 68px;
  }

  .heroInner {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .heroCopy {
    padding-bottom: 0;
  }

  .hero h1 {
    max-width: 650px;
  }

  .heroVisual {
    min-height: 390px;
  }

  .heroVisual img {
    max-width: 470px;
  }

  .heroVisual > p {
    right: 9%;
    bottom: 52px;
  }

  .scrollCue {
    display: none;
  }

  .headingSplit {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .miniWorkInner {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .miniWorkIntro > p:last-child {
    max-width: 580px;
  }

  .feelingMapPromoInner {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .feelingMapPromoCopy {
    max-width: 640px;
  }

  .feelingMapPromoVisual {
    width: min(100%, 580px);
    margin: 0 auto;
  }

  .popularLayout {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .popularHeading {
    position: static;
  }

  .popularHeading > p:not(.sectionKicker) {
    max-width: 560px;
  }

  .latestGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .headerInner {
    min-height: 74px;
  }

  .wordmark {
    font-size: 18px;
  }

  .hero {
    padding-top: 104px;
  }

  .hero::after,
  .heroGlow {
    display: none;
  }

  .eyebrow {
    gap: 9px;
    font-size: 10px;
  }

  .eyebrow span {
    width: 22px;
  }

  .hero h1 {
    margin: 20px 0 21px;
    font-size: 29px;
    line-height: 1.62;
    letter-spacing: 0.025em;
  }

  .hero h1 span {
    white-space: normal;
  }

  .mobileOnlyInline {
    display: block !important;
  }

  .heroDescription {
    font-size: 14px;
    line-height: 2;
  }

  .desktopOnly {
    display: none;
  }

  .heroActions {
    align-items: flex-start;
    flex-direction: column;
    gap: 17px;
    margin-top: 30px;
  }

  .primaryButton {
    width: 100%;
    justify-content: space-between;
  }

  .heroVisual {
    min-height: 300px;
    margin-top: 8px;
  }

  .heroImageWash {
    width: 250px;
    height: 250px;
    box-shadow: 0 0 0 22px rgba(234, 220, 198, 0.14);
  }

  .heroVisual img {
    width: min(100%, 390px);
  }

  .heroVisual > p {
    right: 0;
    bottom: 22px;
  }

  .section {
    padding: 84px 0 92px;
  }

  .headingSplit {
    margin-bottom: 34px;
  }

  .sectionHeading h2 {
    font-size: 30px;
  }

  .headingSplit > p {
    font-size: 13px;
  }

  .categoryGrid {
    grid-template-columns: 1fr;
  }

  .categoryCard {
    min-height: 0;
    grid-template-columns: 30px 1fr;
    gap: 15px;
    padding: 27px 43px 27px 3px;
  }

  .categoryCard:nth-child(odd) {
    border-right: 0;
  }

  .categoryCard h3 {
    font-size: 18px;
  }

  .categoryCard p {
    font-size: 12px;
  }

  .cardArrow {
    right: 6px;
    bottom: 26px;
  }

  .centeredHeading {
    margin-bottom: 36px;
    text-align: left;
  }

  .centeredHeading > p:last-child {
    font-size: 13px;
    line-height: 1.9;
  }

  .recommendedGrid {
    grid-template-columns: 1fr;
  }

  .articleCard {
    min-height: 285px;
    padding: 28px 26px 25px;
  }

  .articleCard h3 {
    margin-top: 20px;
    font-size: 20px;
  }

  .miniWork {
    padding: 82px 0;
  }

  .miniWork::before,
  .miniWork::after {
    opacity: 0.6;
  }

  .miniWorkIntro h2 {
    margin-top: 13px;
    font-size: 29px;
  }

  .workCard {
    min-height: 126px;
    grid-template-columns: 30px 1fr 22px;
    gap: 12px;
    padding: 22px 2px;
  }

  .workCard:hover,
  .workCard:focus-visible {
    padding-right: 7px;
    padding-left: 7px;
  }

  .workCard p {
    font-size: 10px;
  }

  .workCard h3 {
    font-size: 18px;
    line-height: 1.6;
  }

  .feelingMapPromoInner {
    gap: 48px;
    padding: 72px 0 76px;
  }

  .feelingMapPromoTitle {
    margin: 14px 0 21px;
    font-size: 29px;
    line-height: 1.65;
    letter-spacing: 0.035em;
  }

  .feelingMapPromoBody {
    font-size: 13px;
    line-height: 2;
  }

  .feelingMapPromoPrivacy {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.85;
  }

  .feelingMapPromoLink {
    width: 100%;
    min-width: 0;
    margin-top: 27px;
  }

  .feelingMapPromoVisual {
    min-height: 274px;
    margin-top: -2px;
  }

  .feelingMapPromoCard {
    width: 194px;
    height: 194px;
  }

  .feelingMapPromoCard:first-child {
    left: 0;
    bottom: 0;
  }

  .feelingMapPromoCard:last-child {
    top: 0;
    right: 0;
  }

  .feelingMapPromoCardTitle {
    height: 42px;
    gap: 9px;
    padding: 0 12px;
    font-size: 9px;
  }

  .feelingMapPromoCardTitle b {
    font-size: 8px;
  }

  .feelingMapPromoPlot {
    inset: 57px 19px 19px;
  }

  .popularItem {
    min-height: 145px;
    grid-template-columns: 46px 1fr 20px;
    gap: 12px;
  }

  .popularNumber {
    font-size: 24px;
  }

  .popularItem h3 {
    font-size: 18px;
  }

  .latestHeading {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 36px;
  }

  .latestGrid {
    grid-template-columns: 1fr;
  }

  .latestCard {
    min-height: 0;
    padding: 24px 22px 22px;
  }

  .closing {
    padding: 84px 0;
  }

  .closingInner > p {
    font-size: 22px;
  }

  .closingInner > p:first-child {
    font-size: 13px;
  }

  .homeClosing .closingInner > p {
    font-size: 13px;
  }

  .footerInner {
    align-items: flex-start;
    flex-direction: column;
  }

  .footerNav {
    justify-content: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .copyright {
    margin-top: 38px;
  }
}

/* --------------------------------------------------------------------------
   WordPress integration
   -------------------------------------------------------------------------- */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  z-index: 100000;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 12px 16px;
  clip: auto !important;
  background: var(--paper);
  color: var(--ink);
}

.desktopNavList,
.mobileNavList,
.footerNavList {
  margin: 0;
  padding: 0;
  list-style: none;
}

.desktopNavList,
.footerNavList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: inherit;
}

.mobileNavList li:last-child a,
.footerNavList li:last-child a {
  border-bottom: 0;
}

.articleHeroGridSingle {
  grid-template-columns: minmax(0, 780px);
}

.articleShellNoToc {
  grid-template-columns: minmax(0, 730px);
}

.articleContentBody {
  counter-reset: article-section;
}

.articleContentBody > h2,
.articleContentBody > .wp-block-group > h2 {
  position: relative;
  scroll-margin-top: 28px;
  margin: 108px 0 39px;
  padding: 104px 0 0 65px;
  border-top: 1px solid var(--line);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.68;
  letter-spacing: 0.05em;
  counter-increment: article-section;
}

.articleContentBody > h2::before,
.articleContentBody > .wp-block-group > h2::before {
  content: counter(article-section, decimal-leading-zero);
  position: absolute;
  top: 115px;
  left: 0;
  color: var(--dove-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.articleContentBody > h2:first-child,
.articleContentBody > .wp-block-group:first-child > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.articleContentBody > h2:first-child::before,
.articleContentBody > .wp-block-group:first-child > h2:first-child::before {
  top: 11px;
}

.articleContentBody blockquote:not(.articlePullQuote) {
  position: relative;
  margin: 52px 0 58px;
  padding: 32px 38px 31px;
  border: 0;
  background: #f5eee5;
}

.articleContentBody blockquote:not(.articlePullQuote)::before {
  content: "“";
  position: absolute;
  top: 7px;
  left: 17px;
  color: rgba(136, 103, 109, 0.17);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  line-height: 1;
}

.articleContentBody blockquote:not(.articlePullQuote) p {
  position: relative;
  margin: 0;
  color: var(--rosewood-dark);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 18px;
  line-height: 1.95;
  letter-spacing: 0.035em;
  text-align: center;
}

.articleContentBody ul,
.articleContentBody ol,
.standardPageContent ul,
.standardPageContent ol {
  margin: 0 0 1.8em;
  padding-left: 1.5em;
}

.articleContentBody img,
.articleContentBody figure {
  max-width: 100%;
  height: auto;
}

.articleContentBody figure {
  margin: 52px 0;
}

.articleContentBody figcaption {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}

.articleAdWidget {
  width: 100%;
  text-align: center;
}

.wp-block-group.is-style-koidou-closing-words {
  margin-top: 54px;
  padding: 40px 38px 35px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  text-align: center;
}

.wp-block-group.is-style-koidou-closing-words p {
  margin: 0;
  color: var(--rosewood-dark);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.055em;
}

.wp-block-group.is-style-koidou-closing-words p + p {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 14px;
}

.aboutReadingNoIndex {
  grid-template-columns: minmax(0, 650px);
  justify-content: center;
}

.aboutEssay > h2 {
  position: relative;
  scroll-margin-top: 32px;
  margin: 105px 0 43px;
  padding-top: 96px;
  border-top: 1px solid var(--line);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.065em;
}

.aboutEssay > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.aboutEssay > p {
  margin: 0 0 31px;
}

.archivePagination .page-numbers.current,
.archivePagination > span.current {
  border-color: var(--rosewood);
  background: var(--rosewood);
  color: #fffaf4;
}

.archivePagination .next,
.archivePagination .prev {
  width: auto !important;
  padding: 0 14px;
}

.archivePagination .navigation,
.archivePagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.archivePagination .nav-links > span,
.archivePagination .nav-links > a {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
}

.archiveEmpty {
  max-width: 660px;
  margin: 70px auto 0;
  color: var(--ink-soft);
  text-align: center;
}

.standardPageHero {
  padding: 150px 0 92px;
  background: linear-gradient(180deg, #f7f0e7 0%, #f3ebe1 100%);
}

.standardPageHeroInner,
.standardPageContent {
  width: min(780px, calc(100% - 64px));
  margin: 0 auto;
}

.standardPageHero h1 {
  margin: 30px 0 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(35px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.06em;
}

.standardPageStandfirst {
  margin: 28px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 2;
}

.standardPageReading {
  padding: 112px 0 128px;
  background: var(--paper);
}

.standardPageContent {
  color: #504943;
  font-size: 15.5px;
  line-height: 2.22;
}

.standardPageContent p {
  margin: 0 0 1.7em;
}

.standardPageContent h2 {
  margin: 88px 0 33px;
  padding-top: 78px;
  border-top: 1px solid var(--line);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 29px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.055em;
}

.standardPageContent h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.standardPageContent h3 {
  margin: 55px 0 24px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 21px;
  line-height: 1.7;
}

.standardPageContent a,
.articleContentBody a:not(.inlineRelatedArticle) {
  color: var(--rosewood-dark);
  text-decoration: underline;
  text-decoration-color: rgba(136, 103, 109, 0.35);
  text-underline-offset: 0.25em;
}

.standardPageClosing {
  padding: 92px 0 96px;
  background: var(--ivory);
}

.popularArchiveContent {
  width: min(980px, calc(100% - 64px));
}

.popularArchiveContent > p,
.popularArchiveContent > h2,
.popularArchiveContent > h3 {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
}

.koidouPopularArchiveList {
  margin-top: 58px;
  border-top: 1px solid var(--line-dark);
}

.standardPageContent .koidouPopularArchiveItem {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 23px;
  min-height: 108px;
  padding: 21px 18px 21px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background 180ms ease, padding 180ms ease;
}

.standardPageContent .koidouPopularArchiveItem:hover,
.standardPageContent .koidouPopularArchiveItem:focus-visible {
  padding-right: 13px;
  padding-left: 15px;
  background: var(--ivory);
  outline: none;
}

.koidouPopularArchiveNumber {
  color: var(--line-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
}

.koidouPopularArchiveCopy {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.koidouPopularArchiveCopy > span {
  color: var(--rosewood);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.koidouPopularArchiveCopy strong {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.025em;
}

.koidouPopularArchiveArrow {
  color: var(--rosewood);
  font-size: 16px;
  text-align: right;
}

.quietSearchForm {
  width: 100%;
}

.quietSearchForm input {
  width: 100%;
  min-height: 54px;
  padding: 0 15px;
  border: 0;
  border-bottom: 1px solid rgba(255, 250, 244, 0.42);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.categoryHeroThought .quietSearchForm input {
  color: #fffaf4;
}

.categoryHeroThought .quietSearchForm input::placeholder {
  color: rgba(255, 250, 244, 0.58);
}

.quietSearchForm button {
  margin-top: 22px;
  padding: 8px 0 5px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.categoryHeroSearch .quietSearchForm {
  margin-top: 21px;
}

.categoryHeroSearch .quietSearchForm input {
  border-bottom-color: var(--line-dark);
  color: var(--ink);
}

.categoryHeroSearch .quietSearchForm input::placeholder {
  color: rgba(64, 58, 54, 0.5);
}

.categoryHeroSearch .quietSearchForm button {
  color: var(--rosewood);
}

.archiveEmpty .quietSearchForm {
  margin-top: 28px;
  color: var(--ink);
  text-align: left;
}

.archiveEmpty .quietSearchForm input {
  border-bottom-color: var(--line-dark);
  color: var(--ink);
}

.archiveEmpty .quietSearchForm input::placeholder {
  color: rgba(64, 58, 54, 0.5);
}

.archiveEmpty .quietSearchForm button {
  color: var(--rosewood);
}

.notFoundPage {
  min-height: 760px;
  display: grid;
  place-items: center;
  padding: 150px 24px 100px;
  overflow: hidden;
  background: radial-gradient(circle at 70% 35%, rgba(234, 220, 198, 0.66), transparent 32%), var(--ivory);
}

.notFoundInner {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
}

.notFoundNumber {
  position: absolute;
  z-index: -1;
  top: -150px;
  right: -80px;
  margin: 0;
  color: rgba(185, 173, 170, 0.16);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 300px;
  line-height: 1;
}

.notFoundInner h1 {
  margin: 30px 0 25px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.05em;
}

.notFoundInner > p:not(.sectionKicker):not(.notFoundNumber) {
  color: var(--ink-soft);
  line-height: 2;
}

.notFoundActions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 38px;
}

@media (max-width: 960px) {
  .desktopNavList {
    display: none;
  }

  .articleShellNoToc {
    grid-template-columns: minmax(0, 730px);
  }

  .aboutReadingNoIndex {
    grid-template-columns: minmax(0, 650px);
  }
}

@media (max-width: 680px) {
  .standardPageHeroInner,
  .standardPageContent {
    width: min(100% - 36px, 620px);
  }

  .standardPageHero {
    padding: 116px 0 68px;
  }

  .standardPageReading {
    padding: 74px 0 88px;
  }

  .articleContentBody > h2,
  .articleContentBody > .wp-block-group > h2 {
    margin-top: 78px;
    padding: 72px 0 0 43px;
    font-size: 22px;
  }

  .articleContentBody > h2::before,
  .articleContentBody > .wp-block-group > h2::before {
    top: 79px;
  }

  .articleContentBody > h2:first-child,
  .articleContentBody > .wp-block-group:first-child > h2:first-child {
    padding-top: 0;
  }

  .articleContentBody > h2:first-child::before,
  .articleContentBody > .wp-block-group:first-child > h2:first-child::before {
    top: 7px;
  }

  .articleContentBody blockquote:not(.articlePullQuote),
  .wp-block-group.is-style-koidou-closing-words {
    padding-right: 22px;
    padding-left: 22px;
  }

  .wp-block-group.is-style-koidou-closing-words p {
    font-size: 18px;
  }

  .wp-block-group.is-style-koidou-closing-words p + p {
    font-size: 13px;
  }

  .notFoundPage {
    min-height: 670px;
    padding-top: 120px;
  }

  .notFoundNumber {
    top: -80px;
    right: -20px;
    font-size: 180px;
  }

  .notFoundActions {
    align-items: flex-start;
    flex-direction: column;
  }

  .footerNavList {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* Category archive */

.categoryPage {
  background: var(--ivory);
}

.categorySiteHeader {
  color: var(--ink);
}

.categoryHero {
  position: relative;
  min-height: 590px;
  overflow: hidden;
  padding: 126px 0 78px;
  background:
    radial-gradient(circle at 84% 24%, rgba(237, 203, 185, 0.22), transparent 28%),
    linear-gradient(180deg, #fcf9f4 0%, #f8f2e9 100%);
}

.categoryHero::before {
  content: "";
  position: absolute;
  top: -260px;
  right: -150px;
  width: 630px;
  height: 630px;
  border: 1px solid rgba(136, 103, 109, 0.11);
  border-radius: 50%;
}

.categoryHeroInner {
  position: relative;
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8b817a;
  font-size: 10px;
  letter-spacing: 0.07em;
}

.breadcrumb a {
  border-bottom: 1px solid transparent;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  border-color: var(--line-dark);
}

.breadcrumb span[aria-hidden="true"] {
  color: var(--line-dark);
}

.categoryHeroGrid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(350px, 0.92fr);
  align-items: end;
  gap: 96px;
  margin-top: 72px;
}

.categoryHeroTitle h1 {
  margin: 18px 0 26px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(45px, 5vw, 68px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: 0.085em;
}

.categoryHeroTitle > p:last-child {
  max-width: 590px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 2.15;
}

.categoryHeroThought {
  padding: 27px 0 8px;
  border-top: 1px solid var(--line-dark);
}

.categoryHeroThought > span {
  color: var(--rosewood);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  letter-spacing: 0.17em;
}

.categoryHeroThought > p {
  margin: 17px 0 22px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.72;
  letter-spacing: 0.06em;
}

.categoryHeroThought > a {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--ink-soft);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.categoryGhostNumber {
  position: absolute;
  z-index: 1;
  right: -22px;
  bottom: -151px;
  color: rgba(185, 173, 170, 0.14);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 250px;
  font-weight: 400;
  line-height: 1;
}

.categoryArchive {
  padding: 112px 0 130px;
  background: var(--paper);
}

.categoryArchiveHeading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 44px;
  margin-bottom: 52px;
}

.categoryArchiveHeading h2,
.otherFeelingsHeading h2 {
  margin: 12px 0 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(31px, 3vw, 43px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.065em;
}

.categoryArchiveHeading > p {
  margin: 0 0 4px;
  color: var(--ink-soft);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.categoryArchiveHeading > p span {
  margin-right: 4px;
  color: var(--rosewood);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
}

.archiveOrderSwitch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 17px;
  margin: -22px 0 48px;
}

.archiveOrderSwitch > span {
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.archiveOrderSwitch > div {
  display: inline-grid;
  grid-template-columns: minmax(92px, 0.72fr) minmax(190px, 1.45fr);
  border: 1px solid var(--line);
}

.archiveOrderSwitch a {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 17px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.055em;
  text-align: center;
  transition: background 180ms ease, color 180ms ease;
}

.archiveOrderSwitch a + a {
  border-left: 1px solid var(--line);
}

.archiveOrderSwitch a:hover,
.archiveOrderSwitch a:focus-visible {
  background: var(--ivory);
  color: var(--rosewood-dark);
  outline: none;
}

.archiveOrderSwitch a.isCurrent {
  background: #f3ede4;
  color: var(--rosewood-dark);
}

.categoryArticleGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.categoryArticleCard {
  position: relative;
  min-height: 322px;
  display: flex;
  flex-direction: column;
  padding: 32px 38px 30px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(251, 248, 242, 0.46);
  transition: background 180ms ease, box-shadow 180ms ease;
}

.categoryArticleCard::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 34px;
  height: 34px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease;
}

.categoryArticleCard:hover,
.categoryArticleCard:focus-visible {
  z-index: 2;
  background: var(--ivory);
  box-shadow: 0 18px 42px rgba(72, 61, 56, 0.07);
  outline: none;
}

.categoryArticleCard:hover::after,
.categoryArticleCard:focus-visible::after {
  border-color: var(--rosewood);
}

.categoryArticleMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--rosewood);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.categoryArticleMeta span:last-child {
  color: var(--line-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 400;
}

.categoryArticleCard h3 {
  max-width: 470px;
  margin: 24px 0 16px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.68;
  letter-spacing: 0.035em;
}

.categoryArticleCard > p {
  max-width: 485px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.95;
}

.categoryReadMore {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: auto;
  padding-top: 25px;
  color: var(--rosewood);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.categoryReadMore span {
  font-size: 17px;
  font-weight: 400;
}

.archivePagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 55px;
}

.archivePagination > span,
.archivePagination > a:not(.paginationNext) {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
}

.archivePagination > span[aria-current="page"] {
  border-color: var(--rosewood);
  background: var(--rosewood);
  color: #fffaf4;
}

.archivePagination a:hover,
.archivePagination a:focus-visible {
  border-color: var(--rosewood);
  outline: none;
}

.archivePagination .paginationNext {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-left: 13px;
  padding: 7px 0 4px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--rosewood);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.otherFeelings {
  padding: 112px 0 120px;
  background: #f3ede4;
}

.otherFeelingsInner {
  display: grid;
  grid-template-columns: minmax(310px, 0.76fr) minmax(0, 1.24fr);
  align-items: start;
  gap: 86px;
}

.otherFeelingsHeading > p:last-child {
  margin: 22px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.otherFeelingsList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}

.otherFeelingsList a {
  min-height: 93px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 21px;
  border-bottom: 1px solid var(--line-dark);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.045em;
  transition: background 180ms ease, padding 180ms ease;
}

.otherFeelingsList a:nth-child(odd) {
  border-right: 1px solid var(--line-dark);
}

.otherFeelingsList a:hover,
.otherFeelingsList a:focus-visible {
  padding-right: 16px;
  background: rgba(255, 253, 248, 0.64);
  outline: none;
}

.otherFeelingsList a span:last-child {
  color: var(--dove-deep);
  font-family: sans-serif;
  font-size: 15px;
  font-weight: 400;
}

.categoryClosing {
  padding: 106px 0;
  background: var(--paper);
  text-align: center;
}

.categoryClosing .closingInner > p:first-child {
  color: var(--dove-deep);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 14px;
}

.categoryClosing .closingInner > p:nth-child(2) {
  margin-top: 6px;
}

@media (max-width: 960px) {
  .categoryHeroInner {
    width: min(100% - 44px, 720px);
  }

  .categoryHeroGrid {
    grid-template-columns: 1fr;
    gap: 48px;
    margin-top: 58px;
  }

  .categoryHeroThought {
    max-width: 500px;
  }

  .categoryGhostNumber {
    right: -12px;
    bottom: -130px;
    font-size: 210px;
  }

  .otherFeelingsInner {
    grid-template-columns: 1fr;
    gap: 45px;
  }
}

@media (max-width: 680px) {
  .categoryHero {
    min-height: 0;
    padding: 98px 0 70px;
  }

  .categoryHero::before {
    top: -220px;
    right: -270px;
  }

  .categoryHeroGrid {
    gap: 38px;
    margin-top: 45px;
  }

  .categoryHeroTitle h1 {
    margin: 15px 0 22px;
    font-size: 37px;
    letter-spacing: 0.055em;
  }

  .categoryHeroTitle > p:last-child {
    font-size: 13px;
    line-height: 2.05;
  }

  .categoryHeroThought {
    padding-top: 21px;
  }

  .categoryHeroThought > p {
    font-size: 20px;
  }

  .categoryGhostNumber {
    right: -26px;
    bottom: -93px;
    font-size: 148px;
  }

  .categoryArchive {
    padding: 82px 0 93px;
  }

  .categoryArchiveHeading {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 34px;
  }

  .categoryArchiveHeading h2,
  .otherFeelingsHeading h2 {
    font-size: 29px;
  }

  .archiveOrderSwitch {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
    margin: -8px 0 35px;
  }

  .archiveOrderSwitch > div {
    width: 100%;
    grid-template-columns: minmax(82px, 0.72fr) minmax(0, 1.45fr);
  }

  .archiveOrderSwitch a {
    min-height: 45px;
    padding: 8px 9px;
    font-size: 10px;
  }

  .categoryArticleGrid {
    grid-template-columns: 1fr;
  }

  .categoryArticleCard {
    min-height: 300px;
    padding: 28px 25px 26px;
  }

  .categoryArticleCard h3 {
    margin-top: 20px;
    font-size: 20px;
  }

  .categoryArticleCard > p {
    font-size: 12px;
  }

  .archivePagination {
    margin-top: 42px;
  }

  .otherFeelings {
    padding: 82px 0 90px;
  }

  .otherFeelingsList {
    grid-template-columns: 1fr;
  }

  .otherFeelingsList a:nth-child(odd) {
    border-right: 0;
  }

  .categoryClosing {
    padding: 82px 0;
  }

  .categoryClosing .closingInner > p:first-child {
    font-size: 12px;
  }
}

/* Individual article */

.articlePage {
  background: var(--ivory);
}

.articleSiteHeader {
  color: var(--ink);
}

.articleHero {
  position: relative;
  min-height: 660px;
  overflow: hidden;
  padding: 126px 0 88px;
  background:
    radial-gradient(circle at 86% 32%, rgba(234, 220, 198, 0.52), transparent 27%),
    linear-gradient(180deg, #fcf9f4 0%, #f7f0e7 100%);
}

.articleHero::before {
  content: "";
  position: absolute;
  top: -285px;
  right: -125px;
  width: 650px;
  height: 650px;
  border: 1px solid rgba(136, 103, 109, 0.1);
  border-radius: 50%;
}

.articleHero::after {
  content: "";
  position: absolute;
  right: 19%;
  bottom: -315px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(237, 203, 185, 0.12);
}

.articleHeroInner {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
}

.articleHeroGrid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.36fr) minmax(300px, 0.64fr);
  align-items: end;
  gap: 92px;
  margin-top: 70px;
}

.articleHeroTitle h1 {
  max-width: 790px;
  margin: 19px 0 29px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(36px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.035em;
}

.articleHeroTitle h1 span {
  display: block;
}

.articleStandfirst {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 2.08;
}

.articleHeroGuide {
  padding: 25px 0 7px;
  border-top: 1px solid var(--line-dark);
}

.articleHeroGuide > p {
  margin: 0;
  color: var(--rosewood);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  letter-spacing: 0.17em;
}

.articleHeroGuide h2 {
  margin: 13px 0 16px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.055em;
}

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

.articleHeroGuide li {
  position: relative;
  margin-top: 7px;
  padding-left: 16px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.85;
}

.articleHeroGuide li::before {
  content: "";
  position: absolute;
  top: 0.82em;
  left: 1px;
  width: 6px;
  height: 1px;
  background: var(--dove-deep);
}

.articleHeroGuide > a {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-top: 19px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--ink-soft);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.articleGhostNumber {
  position: absolute;
  z-index: 1;
  right: -7px;
  bottom: -166px;
  color: rgba(185, 173, 170, 0.13);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 245px;
  font-weight: 400;
  line-height: 1;
}

.articleReading {
  padding: 114px 0 126px;
  background: var(--paper);
}

.articleShell {
  width: min(1080px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px minmax(0, 730px);
  justify-content: center;
  align-items: start;
  gap: 78px;
}

.articleToc {
  position: sticky;
  top: 32px;
  padding-top: 21px;
  border-top: 1px solid var(--line-dark);
}

.articleToc > p {
  margin: 0;
  color: var(--rosewood);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  letter-spacing: 0.17em;
}

.articleToc h2 {
  margin: 10px 0 19px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.articleToc ol {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.articleToc li {
  border-bottom: 1px solid var(--line);
}

.articleToc a {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 8px;
  padding: 14px 2px;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.75;
  transition: color 180ms ease, padding 180ms ease;
}

.articleToc a:hover,
.articleToc a:focus-visible {
  padding-left: 6px;
  color: var(--rosewood);
  outline: none;
}

.articleToc a span {
  color: var(--dove-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.articleContent {
  min-width: 0;
  color: #504943;
  font-size: 16px;
  line-height: 2.28;
}

.articleContent p {
  margin: 0 0 1.62em;
}

.articleIntro {
  font-size: 16.5px;
  line-height: 2.35;
}

.inlineRelatedArticle {
  position: relative;
  display: grid;
  grid-template-columns: 106px 1fr 24px;
  align-items: center;
  gap: 23px;
  margin: 56px 0 66px;
  padding: 26px 24px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  transition: background 180ms ease, padding 180ms ease;
}

.inlineRelatedArticle:hover,
.inlineRelatedArticle:focus-visible {
  padding-right: 19px;
  padding-left: 29px;
  background: var(--ivory);
  outline: none;
}

.inlineRelatedArticle > span:first-child {
  color: var(--rosewood);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.inlineRelatedArticle h2 {
  margin: 0 0 7px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.035em;
}

.inlineRelatedArticle p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.8;
}

.inlineRelatedArticle > span:last-child {
  color: var(--rosewood);
  font-size: 18px;
}

.articleAdSpace {
  min-height: 142px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin: 66px 0 82px;
  border: 1px solid #eee7df;
  background: #fbfaf7;
  color: #a89f97;
}

.articleAdSpace span {
  font-size: 9px;
  letter-spacing: 0.12em;
}

.articleAdSpace small {
  color: #c4bbb4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 8px;
  letter-spacing: 0.16em;
}

.proseSection {
  scroll-margin-top: 28px;
}

.proseSection + .proseSection {
  margin-top: 112px;
  padding-top: 106px;
  border-top: 1px solid var(--line);
}

.articleAdSpace + .proseSection {
  margin-top: 0;
}

.proseSectionHeading {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 19px;
  align-items: start;
  margin-bottom: 39px;
}

.proseSectionHeading > span {
  padding-top: 11px;
  color: var(--dove-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.proseSectionHeading h2 {
  margin: 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.68;
  letter-spacing: 0.05em;
}

.articleContent h3 {
  position: relative;
  scroll-margin-top: 28px;
  margin: 64px 0 27px;
  padding-left: 19px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.72;
  letter-spacing: 0.045em;
}

.articleContent h3::before {
  content: "";
  position: absolute;
  top: 0.3em;
  bottom: 0.3em;
  left: 0;
  width: 2px;
  background: var(--peach);
}

.articlePullQuote {
  position: relative;
  margin: 52px 0 58px;
  padding: 32px 38px 31px;
  border: 0;
  background: #f5eee5;
}

.articlePullQuote::before {
  content: "“";
  position: absolute;
  top: 7px;
  left: 17px;
  color: rgba(136, 103, 109, 0.17);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  line-height: 1;
}

.articlePullQuote p {
  position: relative;
  margin: 0;
  color: var(--rosewood-dark);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0.045em;
  text-align: center;
}

.finalProseSection {
  padding-bottom: 2px;
}

.articleClosingWords {
  margin-top: 54px;
  padding: 40px 38px 35px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  text-align: center;
}

.articleClosingWords p {
  margin: 0;
  color: var(--rosewood-dark);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.055em;
}

.articleClosingWords p + p {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 14px;
}

.articleCategoryEnd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 72px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.articleCategoryEnd > span {
  color: var(--ink-soft);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.articleCategoryEnd a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--rosewood);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.articleCategoryEnd > a:only-child {
  margin-left: auto;
}

.articleAfterReading {
  padding: 63px 0 70px;
  border-top: 1px solid var(--line);
  background: var(--ivory);
}

.articleAfterReadingHeading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 42px;
  margin-bottom: 28px;
}

.articleAfterReadingHeading h2 {
  margin: 9px 0 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(24px, 2.3vw, 30px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.06em;
}

.articleAfterReadingHeading > p {
  max-width: 390px;
  margin: 0 0 3px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.8;
}

.articleAfterReadingGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.articleAfterReadingCard {
  position: relative;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition: background 180ms ease, transform 180ms ease;
}

.articleAfterReadingCard:hover,
.articleAfterReadingCard:focus-visible {
  z-index: 2;
  background: var(--paper);
  outline: none;
  transform: translateY(-3px);
}

.articleAfterReadingPrompt {
  margin: 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.65;
  letter-spacing: 0.045em;
}

.articleAfterReadingLabel {
  margin-top: 7px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.045em;
}

.articleAfterReadingArrow {
  margin-top: auto;
  padding-top: 11px;
  color: var(--rosewood);
  font-size: 15px;
}

.articleRelatedSection {
  padding: 108px 0 120px;
  background: #f3ede4;
}

.articleRelatedHeading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 38px;
  margin-bottom: 49px;
}

.articleRelatedHeading h2 {
  margin: 11px 0 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(31px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.065em;
}

.articleRelatedHeading > p {
  margin: 0 0 5px;
  color: var(--ink-soft);
  font-size: 12px;
}

.articleRelatedGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.articleRelatedCard {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 25px 25px 23px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(255, 253, 248, 0.38);
  transition: background 180ms ease, transform 180ms ease;
}

.articleRelatedCard:hover,
.articleRelatedCard:focus-visible {
  z-index: 2;
  background: var(--paper);
  outline: none;
  transform: translateY(-3px);
}

.articleRelatedCard > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--rosewood);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.articleRelatedCard > div span:last-child {
  color: var(--line-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 400;
}

.articleRelatedCard h3 {
  margin: 17px 0 11px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.035em;
}

.articleRelatedCard > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.8;
}

.articleRelatedArrow {
  margin-top: 22px;
  padding-top: 0;
  color: var(--rosewood);
  font-size: 18px;
}

.articlePageClosing {
  padding: 106px 0;
  background: var(--paper);
  text-align: center;
}

.articlePageClosing .articleClosingLine1 {
  color: var(--dove-deep);
  font-size: 13px;
}

.articlePageClosing .articleClosingLine2 {
  margin-top: 4px;
}

@media (max-width: 960px) {
  .articleHeroInner {
    width: min(100% - 44px, 720px);
  }

  .articleHeroGrid {
    grid-template-columns: 1fr;
    gap: 48px;
    margin-top: 58px;
  }

  .articleHeroGuide {
    max-width: 520px;
  }

  .articleGhostNumber {
    right: -12px;
    bottom: -145px;
    font-size: 215px;
  }

  .articleShell {
    width: min(100% - 44px, 720px);
    grid-template-columns: 1fr;
    gap: 65px;
  }

  .articleToc {
    position: static;
    padding: 27px 29px 29px;
    border: 1px solid var(--line);
    background: var(--ivory);
  }

  .articleToc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 1px solid var(--line);
  }

  .articleToc li {
    border-right: 1px solid var(--line);
  }

  .articleToc a {
    min-height: 76px;
    align-content: start;
    padding: 13px 14px;
  }

  .articleToc a:hover,
  .articleToc a:focus-visible {
    padding-left: 19px;
  }

  .articleRelatedGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .articleHero {
    min-height: 0;
    padding: 98px 0 72px;
  }

  .articleHero::before {
    top: -240px;
    right: -280px;
  }

  .articleHero::after {
    display: none;
  }

  .articleHeroGrid {
    gap: 37px;
    margin-top: 44px;
  }

  .articlePage .breadcrumb {
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 7px;
    row-gap: 7px;
  }

  .articlePage .breadcrumbCurrentSeparator {
    display: none;
  }

  .articlePage .breadcrumbCurrent {
    flex: 0 0 100%;
    width: 100%;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  .articleHeroTitle h1 {
    margin: 15px 0 23px;
    font-size: 30px;
    line-height: 1.57;
    letter-spacing: 0.035em;
  }

  .articleStandfirst {
    font-size: 13px;
  }

  .articleHeroGuide {
    padding-top: 21px;
  }

  .articleHeroGuide h2 {
    font-size: 18px;
  }

  .articleGhostNumber {
    right: -25px;
    bottom: -101px;
    font-size: 150px;
  }

  .articleReading {
    padding: 76px 0 88px;
  }

  .articleShell {
    width: min(100% - 40px, 640px);
    gap: 50px;
  }

  .articleToc {
    padding: 24px 21px 22px;
  }

  .articleToc ol {
    grid-template-columns: 1fr;
  }

  .articleToc a {
    min-height: 0;
    padding: 13px 11px;
  }

  .articleToc a:hover,
  .articleToc a:focus-visible {
    padding-left: 16px;
  }

  .articleContent {
    font-size: 15.5px;
    line-height: 2.22;
  }

  .articleIntro {
    font-size: 16px;
    line-height: 2.24;
  }

  .inlineRelatedArticle {
    grid-template-columns: 1fr 20px;
    gap: 16px;
    margin: 47px 0 54px;
    padding: 24px 8px;
  }

  .inlineRelatedArticle:hover,
  .inlineRelatedArticle:focus-visible {
    padding-right: 3px;
    padding-left: 13px;
  }

  .inlineRelatedArticle > span:first-child {
    grid-column: 1 / -1;
  }

  .inlineRelatedArticle h2 {
    font-size: 16px;
  }

  .articleAdSpace {
    min-height: 112px;
    margin: 53px 0 66px;
  }

  .proseSection + .proseSection {
    margin-top: 83px;
    padding-top: 78px;
  }

  .proseSectionHeading {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-bottom: 32px;
  }

  .proseSectionHeading > span {
    padding-top: 0;
  }

  .proseSectionHeading h2 {
    font-size: 27px;
    line-height: 1.7;
  }

  .articleContent h3 {
    margin: 53px 0 23px;
    padding-left: 15px;
    font-size: 19px;
  }

  .articlePullQuote {
    margin: 43px 0 48px;
    padding: 29px 23px 27px;
  }

  .articlePullQuote p {
    font-size: 17px;
    text-align: left;
  }

  .articleClosingWords {
    margin-top: 45px;
    padding: 32px 18px 29px;
  }

  .articleClosingWords p {
    font-size: 18px;
  }

  .articleClosingWords p + p {
    font-size: 13px;
  }

  .articleCategoryEnd {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    margin-top: 58px;
  }

  .articleAfterReading {
    padding: 45px 0 50px;
  }

  .articleAfterReadingHeading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
  }

  .articleAfterReadingHeading h2 {
    margin-top: 7px;
    font-size: 22px;
    line-height: 1.6;
  }

  .articleAfterReadingHeading > p {
    margin-bottom: 0;
    font-size: 11px;
    line-height: 1.75;
  }

  .articleAfterReadingGrid {
    grid-template-columns: 1fr;
  }

  .articleAfterReadingCard {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 18px;
    padding: 14px 17px 13px;
  }

  .articleAfterReadingPrompt,
  .articleAfterReadingLabel {
    grid-column: 1;
  }

  .articleAfterReadingPrompt {
    font-size: 10px;
    line-height: 1.55;
  }

  .articleAfterReadingLabel {
    margin-top: 0;
    font-size: 16px;
    line-height: 1.55;
  }

  .articleAfterReadingArrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
    padding-top: 0;
    font-size: 15px;
  }

  .articleRelatedSection {
    padding: 82px 0 91px;
  }

  .articleRelatedHeading {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 34px;
  }

  .articleRelatedHeading h2 {
    font-size: 29px;
  }

  .articleRelatedGrid {
    grid-template-columns: 1fr;
  }

  .articleRelatedCard {
    min-height: 0;
    padding: 23px 21px 21px;
  }

  .articlePageClosing {
    padding: 82px 0;
  }

  .articlePageClosing .articleClosingLine1 {
    font-size: 12px;
  }
}

/* About page */

.aboutPage {
  background: var(--ivory);
}

.aboutHero {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  padding: 126px 0 78px;
  background:
    radial-gradient(circle at 79% 42%, rgba(234, 220, 198, 0.53), transparent 31%),
    linear-gradient(180deg, #fcf9f4 0%, #f8f2e9 100%);
}

.aboutHero::before {
  content: "";
  position: absolute;
  top: -280px;
  right: -180px;
  width: 650px;
  height: 650px;
  border: 1px solid rgba(136, 103, 109, 0.11);
  border-radius: 50%;
}

.aboutHeroInner {
  position: relative;
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
}

.aboutHeroGrid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  align-items: center;
  gap: 75px;
  margin-top: 48px;
}

.aboutHeroCopy h1 {
  margin: 18px 0 28px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(43px, 4.3vw, 56px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.aboutHeroCopy > p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 2.25;
}

.aboutHeroVisual {
  position: relative;
  isolation: isolate;
  min-height: 410px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aboutHeroVisual > div {
  position: absolute;
  z-index: 0;
  width: 335px;
  height: 335px;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.55);
  box-shadow: 0 0 0 30px rgba(234, 220, 198, 0.14);
}

.aboutHeroVisual img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 490px;
  mix-blend-mode: normal;
  filter: saturate(0.86) contrast(0.98);
}

.aboutHeroVisual > p {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 31px;
  margin: 0;
  color: rgba(111, 82, 88, 0.54);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  letter-spacing: 0.16em;
}

.aboutReading {
  padding: 122px 0 135px;
  background: var(--paper);
}

.aboutReadingInner {
  width: min(1040px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 235px minmax(0, 650px);
  align-items: start;
  justify-content: space-between;
  gap: 90px;
}

.aboutIndex {
  position: sticky;
  top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
}

.aboutIndex > p {
  margin: 0 0 15px;
  color: var(--rosewood);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  letter-spacing: 0.17em;
}

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

.aboutIndex li {
  border-bottom: 1px solid var(--line);
}

.aboutIndex a {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  padding: 14px 2px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.65;
  transition: color 180ms ease, padding 180ms ease;
}

.aboutIndex a:hover,
.aboutIndex a:focus-visible {
  padding-left: 6px;
  color: var(--rosewood);
  outline: none;
}

.aboutIndex a span {
  color: var(--dove-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
}

.aboutEssay {
  color: var(--ink);
  font-size: 15.5px;
  line-height: 2.25;
}

.aboutEssay section {
  scroll-margin-top: 32px;
}

.aboutEssay section + section {
  margin-top: 105px;
  padding-top: 96px;
  border-top: 1px solid var(--line);
}

.aboutSectionNumber {
  margin: 0;
  color: var(--rosewood);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  letter-spacing: 0.13em;
}

.aboutEssay h2 {
  margin: 13px 0 43px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.065em;
}

.aboutEssay > section > p:not(.aboutSectionNumber) {
  margin: 0 0 31px;
}

.aboutEssay blockquote {
  margin: 49px 0 52px;
  padding: 29px 34px 28px;
  border: 0;
  border-left: 2px solid var(--rosewood);
  background: #f7f1e8;
}

.aboutEssay blockquote p {
  margin: 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 17px;
  line-height: 2.15;
  letter-spacing: 0.035em;
}

.aboutMiniWorkLink {
  padding: 92px 0;
  overflow: hidden;
  background: #756368;
  color: #fffaf4;
}

.aboutMiniWorkInner {
  width: min(920px, calc(100% - 64px));
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 65px;
}

.aboutMiniWorkInner h2 {
  margin: 14px 0 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(28px, 3.1vw, 41px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.055em;
}

.aboutMiniWorkInner > a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 13px 0 8px;
  border-bottom: 1px solid rgba(255, 250, 244, 0.38);
  color: rgba(255, 250, 244, 0.9);
  font-size: 12px;
  letter-spacing: 0.05em;
}

.aboutClosing {
  padding: 106px 0;
  background: var(--paper);
  text-align: center;
}

/* Mini work pages */

.workPage {
  background: var(--paper);
}

.workSiteHeader {
  color: #fffaf4;
}

.workSiteHeader .headerInner {
  border-color: rgba(255, 250, 244, 0.2);
}

.workSiteHeader .desktopNav {
  color: rgba(255, 250, 244, 0.72);
}

.workSiteHeader .desktopNav a::after {
  background: #fffaf4;
}

.workSiteHeader .mobileMenu summary span {
  background: #fffaf4;
}

.workSiteHeader .mobileMenu nav {
  color: var(--ink);
}

.workPageHero {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  padding: 126px 0 86px;
  background:
    radial-gradient(circle at 78% 25%, rgba(237, 203, 185, 0.12), transparent 25%),
    linear-gradient(145deg, #79676c 0%, #69575d 100%);
  color: #fffaf4;
}

.workPageHero::before,
.workPageHero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 250, 244, 0.1);
  border-radius: 50%;
}

.workPageHero::before {
  top: -340px;
  right: -130px;
  width: 680px;
  height: 680px;
}

.workPageHero::after {
  bottom: -430px;
  left: -260px;
  width: 650px;
  height: 650px;
}

.workPageHeroInner {
  position: relative;
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
}

.workBreadcrumb {
  color: rgba(255, 250, 244, 0.6);
}

.workBreadcrumb span[aria-hidden="true"] {
  color: rgba(255, 250, 244, 0.22);
}

.workBreadcrumb a:hover,
.workBreadcrumb a:focus-visible {
  border-color: rgba(255, 250, 244, 0.45);
}

.workPageHeroGrid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(410px, 1.05fr);
  align-items: start;
  gap: 100px;
  margin-top: 73px;
}

.workPageHero h1 {
  max-width: 550px;
  margin: 20px 0 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(42px, 4.5vw, 59px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.065em;
}

.workPageIntro {
  padding: 25px 0 2px;
  border-top: 1px solid rgba(255, 250, 244, 0.3);
  color: rgba(255, 250, 244, 0.8);
  font-size: 14px;
  line-height: 2.2;
}

.workPageIntro p {
  margin: 0 0 21px;
}

.workPageGhostNumber {
  position: absolute;
  right: -21px;
  bottom: -184px;
  color: rgba(255, 250, 244, 0.055);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 285px;
  line-height: 1;
}

.workPageBody {
  padding: 124px 0 136px;
  background: var(--paper);
}

.workPageBodyInner {
  width: min(1080px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: 86px;
}

.workPageGuide {
  position: sticky;
  top: 44px;
}

.workPageGuide h2 {
  margin: 14px 0 24px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(28px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.055em;
}

.workPageGuide > p:not(.sectionKicker) {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 2;
}

.workPageGuide dl {
  margin: 39px 0 0;
  border-top: 1px solid var(--line-dark);
}

.workPageGuide dl > div {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.workPageGuide dt {
  color: var(--ink-soft);
}

.workPageGuide dd {
  margin: 0;
  color: var(--rosewood);
  font-weight: 700;
}

.workForm {
  padding: 47px 49px 38px;
  border: 1px solid var(--line-dark);
  background: var(--ivory);
}

.workFormFields {
  display: grid;
  gap: 43px;
}

.workField label {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  margin-bottom: 13px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.035em;
}

.workField label span {
  padding-top: 4px;
  color: var(--rosewood);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.workField textarea {
  width: 100%;
  min-height: 124px;
  resize: vertical;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  background: rgba(255, 253, 248, 0.7);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.9;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.workField textarea::placeholder {
  color: #a79c94;
}

.workField textarea:focus {
  border-color: var(--rosewood);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(136, 103, 109, 0.08);
}

.workFormAction {
  display: flex;
  align-items: center;
  gap: 29px;
  margin-top: 46px;
  padding-top: 35px;
  border-top: 1px solid var(--line);
}

.workFormAction button {
  flex: 0 0 auto;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 37px;
  padding: 0 23px 0 27px;
  border: 1px solid var(--rosewood);
  border-radius: 0;
  background: var(--rosewood);
  color: #fffaf4;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.workFormAction button:hover,
.workFormAction button:focus-visible {
  background: var(--rosewood-dark);
  outline: none;
  transform: translateY(-2px);
}

.workFormAction button span {
  font-size: 17px;
}

.workFormAction > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.9;
}

.workClearMessage {
  min-height: 25px;
  margin: 18px 0 0;
  color: var(--rosewood);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 12px;
  letter-spacing: 0.035em;
  opacity: 0;
  transition: opacity 220ms ease;
}

.workClearMessage.isVisible {
  opacity: 1;
}

.workPageNotice {
  padding: 88px 0 92px;
  background: #f3ede4;
}

.workPageNoticeInner {
  width: min(690px, calc(100% - 64px));
  margin: 0 auto;
}

.workPageNoticeInner > p:not(.sectionKicker) {
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 2.05;
}

.workPageNext {
  padding: 104px 0 110px;
  background: var(--paper);
}

.workPageNextInner {
  width: min(980px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 75px;
}

.workPageNext h2 {
  margin: 13px 0 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(28px, 3vw, 39px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.055em;
}

.workPageNextInner > a {
  min-height: 118px;
  display: grid;
  grid-template-columns: 38px 1fr 22px;
  align-items: center;
  gap: 18px;
  padding: 24px 18px 24px 6px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  transition: padding 180ms ease, background 180ms ease;
}

.workPageNextInner > a:hover,
.workPageNextInner > a:focus-visible {
  padding-right: 11px;
  padding-left: 13px;
  background: var(--ivory);
  outline: none;
}

.workPageNextInner > a > span:first-child {
  color: var(--dove-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
}

.workPageNextInner > a strong {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.045em;
}

.workPageNextInner > a > span:last-child {
  color: var(--rosewood);
  font-size: 18px;
}

.workPageClosing {
  padding: 103px 0;
  background: var(--ivory);
  text-align: center;
}

@media (max-width: 960px) {
  .aboutHeroInner,
  .workPageHeroInner {
    width: min(100% - 44px, 720px);
  }

  .aboutHeroGrid {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 58px;
  }

  .aboutHeroVisual {
    min-height: 350px;
  }

  .aboutHeroVisual img {
    max-width: 520px;
  }

  .aboutReadingInner {
    width: min(100% - 44px, 720px);
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .aboutIndex {
    position: static;
  }

  .aboutIndex ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 1px solid var(--line);
  }

  .aboutIndex li {
    border-right: 1px solid var(--line);
  }

  .aboutIndex a {
    min-height: 78px;
    align-content: start;
    padding: 12px;
  }

  .aboutMiniWorkInner,
  .workPageBodyInner,
  .workPageNextInner {
    width: min(100% - 44px, 720px);
  }

  .workPageHeroGrid {
    grid-template-columns: 1fr;
    gap: 42px;
    margin-top: 58px;
  }

  .workPageIntro {
    max-width: 590px;
  }

  .workPageBodyInner {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .workPageGuide {
    position: static;
  }

  .workPageGuide dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-left: 1px solid var(--line);
  }

  .workPageGuide dl > div {
    min-height: 72px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 9px 16px;
    border-right: 1px solid var(--line);
  }
}

@media (max-width: 680px) {
  .aboutHero {
    min-height: 0;
    padding: 98px 0 63px;
  }

  .aboutHero::before {
    top: -330px;
    right: -350px;
  }

  .aboutHeroGrid {
    gap: 14px;
    margin-top: 42px;
  }

  .aboutHeroCopy h1 {
    margin: 14px 0 24px;
    font-size: 36px;
    line-height: 1.5;
    letter-spacing: 0.055em;
    white-space: normal;
  }

  .aboutHeroCopy > p:last-child {
    font-size: 14px;
    line-height: 2.15;
  }

  .aboutHeroVisual {
    min-height: 270px;
  }

  .aboutHeroVisual > div {
    width: 235px;
    height: 235px;
    box-shadow: 0 0 0 20px rgba(234, 220, 198, 0.14);
  }

  .aboutHeroVisual > p {
    right: 2px;
    bottom: 16px;
  }

  .aboutReading {
    padding: 82px 0 93px;
  }

  .aboutReadingInner {
    gap: 48px;
  }

  .aboutIndex ol {
    grid-template-columns: 1fr;
  }

  .aboutIndex a {
    min-height: 0;
  }

  .aboutEssay {
    font-size: 15px;
    line-height: 2.2;
  }

  .aboutEssay section + section {
    margin-top: 77px;
    padding-top: 72px;
  }

  .aboutEssay h2 {
    margin-bottom: 35px;
    font-size: 27px;
  }

  .aboutEssay blockquote {
    margin: 41px 0 44px;
    padding: 24px 21px;
  }

  .aboutEssay blockquote p {
    font-size: 16px;
  }

  .aboutMiniWorkLink {
    padding: 76px 0 80px;
  }

  .aboutMiniWorkInner {
    align-items: flex-start;
    flex-direction: column;
    gap: 31px;
  }

  .aboutMiniWorkInner h2 {
    font-size: 28px;
  }

  .aboutClosing {
    padding: 82px 0;
  }

  .workPageHero {
    min-height: 0;
    padding: 98px 0 70px;
  }

  .workPageHero::before {
    top: -420px;
    right: -390px;
  }

  .workPageHero::after {
    display: none;
  }

  .workPageHeroGrid {
    gap: 34px;
    margin-top: 43px;
  }

  .workPageHero h1 {
    margin-top: 14px;
    font-size: 35px;
    line-height: 1.62;
    letter-spacing: 0.045em;
  }

  .workPageIntro {
    padding-top: 21px;
    font-size: 13.5px;
    line-height: 2.15;
  }

  .workPageGhostNumber {
    right: -27px;
    bottom: -103px;
    font-size: 165px;
  }

  .workPageBody {
    padding: 82px 0 92px;
  }

  .workPageBodyInner {
    gap: 43px;
  }

  .workPageGuide h2 {
    font-size: 28px;
  }

  .workPageGuide dl > div {
    padding: 8px 10px;
  }

  .workForm {
    padding: 32px 20px 27px;
  }

  .workFormFields {
    gap: 36px;
  }

  .workField label {
    grid-template-columns: 27px 1fr;
    gap: 7px;
    font-size: 16px;
  }

  .workField textarea {
    min-height: 115px;
    padding: 15px;
    font-size: 16px;
  }

  .workFormAction {
    align-items: flex-start;
    flex-direction: column;
    gap: 17px;
    margin-top: 39px;
    padding-top: 29px;
  }

  .workFormAction button {
    width: 100%;
    justify-content: space-between;
  }

  .workPageNotice {
    padding: 73px 0 78px;
  }

  .workPageNoticeInner {
    width: min(100% - 44px, 620px);
  }

  .workPageNoticeInner > p:not(.sectionKicker) {
    font-size: 12px;
  }

  .workPageNext {
    padding: 82px 0 88px;
  }

  .workPageNextInner {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .workPageNext h2 {
    font-size: 28px;
  }

  .workPageNextInner > a {
    min-height: 105px;
  }

  .workPageNextInner > a strong {
    font-size: 16px;
  }

  .workPageClosing {
    padding: 82px 0;
  }
}

/* Late specificity guards for optional WordPress layouts. */
.articleHeroGrid.articleHeroGridSingle {
  grid-template-columns: minmax(0, 780px);
}

.articleShell.articleShellNoToc {
  grid-template-columns: minmax(0, 730px);
}

.aboutReadingInner.aboutReadingNoIndex {
  grid-template-columns: minmax(0, 650px);
  justify-content: center;
}

@media screen and (max-width: 680px) {
  .popularArchiveContent {
    width: min(100% - 44px, 980px);
  }

  .koidouPopularArchiveList {
    margin-top: 42px;
  }

  .standardPageContent .koidouPopularArchiveItem {
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    gap: 12px;
    min-height: 98px;
    padding: 18px 4px;
  }

  .standardPageContent .koidouPopularArchiveItem:hover,
  .standardPageContent .koidouPopularArchiveItem:focus-visible {
    padding-right: 4px;
    padding-left: 4px;
  }

  .koidouPopularArchiveNumber {
    font-size: 14px;
  }

  .koidouPopularArchiveCopy strong {
    font-size: 15px;
  }
}