/* Shared reading design for Coffee Days articles. Diagrams keep their own CSS. */
:root {
  color-scheme: dark;
  --article-bg: #081b14;
  --article-ink: #f1eee2;
  --article-muted: #bacbb0;
  --article-line: #8ca47b55;
  --article-font: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --article-heading-font: "Yu Mincho", "Hiragino Mincho ProN", serif;
  --bg: var(--article-bg);
  --forest: var(--article-bg);
  --fcf-forest: var(--article-bg);
  --ink: var(--article-ink);
  --fcf-ink: var(--article-ink);
  --muted: var(--article-muted);
  --fcf-muted: var(--article-muted);
  --line: var(--article-line);
  --fcf-line: var(--article-line);
  --paper: #f5f3eb;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--article-bg); color: var(--article-ink); font-family: var(--article-font); line-height: 2; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
a { color: inherit; text-underline-offset: 5px; text-decoration-color: #b4c6a478; }
/* Reading links stay identifiable when WordPress resets anchor decoration. */
.coffee-editable-article :is(.reading-narrative, .review-article, #aricha-review > main) a {
  color: #ead5a4;
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .25em;
  text-decoration-skip-ink: auto;
}
.coffee-editable-article :is(.reading-narrative, .review-article, #aricha-review > main) a:is(:hover, :focus-visible) {
  color: #fff3d1;
  text-decoration-thickness: 2px;
}
:is(button, a, input) { -webkit-tap-highlight-color: transparent; }
:is(button, a, input):focus-visible { outline: 2px solid #d4dfb8; outline-offset: 5px; }
[hidden] { display: none !important; }
:where(#fcf-review, #aricha-review) { background: radial-gradient(ellipse at 85% 12%, #294b3129, transparent 35%), var(--article-bg); min-height: 100svh; }
.masthead, .article-heading { position: relative; z-index: 2; width: 100%; max-width: 900px; margin: auto; padding-inline: 36px; }
.masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-block: 24px; }
.brand { font-family: Georgia, serif; letter-spacing: -.045em; font-size: 1.8125rem; line-height: 1.3; text-decoration: none; }
.masthead > :is(.tagline, span) { font-size: .875rem; line-height: 1.8; color: var(--article-muted); letter-spacing: .04em; }
.article-heading { padding-block: 30px 46px; }
.eyebrow { font-size: .875rem; letter-spacing: .1em; color: var(--article-muted); line-height: 1.8; }
.article-heading h1 { font-family: var(--article-heading-font); font-size: 2.9375rem; font-weight: 400; letter-spacing: -.035em; line-height: 1.5; margin: 14px 0 23px; overflow-wrap: anywhere; text-wrap: balance; }
.title-main { display: block; }
.title-detail { display: block; font-family: var(--article-font); font-size: .875rem; font-weight: 400; letter-spacing: 0; line-height: 1.9; margin: 18px 0 0; color: var(--article-muted); }
.article-heading nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .875rem; line-height: 1.8; }
.article-heading nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; border-bottom: 1px solid var(--article-line); }
.coffee-editable-article .article-heading nav { font-size: 1rem; }
.coffee-editable-article .article-heading nav a { color: #ead5a4; border-bottom-color: currentColor; }
.coffee-editable-article .article-heading nav a:is(:hover, :focus-visible) { color: #fff3d1; }
:where(.reading-narrative, .review-article, #aricha-review > main) { width: min(680px, calc(100% - 72px)); margin: 0 auto; padding: 0; }
:where(.reading-narrative, .review-article, #aricha-review > main) :where(h2, h3) { font-family: var(--article-heading-font); font-weight: 400; line-height: 1.7; letter-spacing: -.025em; margin: 0 0 28px; overflow-wrap: anywhere; }
:where(.reading-narrative, .review-article, #aricha-review > main) h2 { font-size: 2rem; }
:where(.reading-narrative, .review-article, #aricha-review > main) h3 { font-size: 1.75rem; }
:where(.reading-narrative, .review-article, #aricha-review > main) :where(p, li) { font-size: 1.125rem; line-height: 2; overflow-wrap: anywhere; }
:where(.reading-narrative, .review-article, #aricha-review > main) p { margin: 0 0 25px; }
:where(.reading-narrative, .review-article, #aricha-review > main) ul { padding-left: 1.4em; margin: 0 0 28px; }
:where(.reading-narrative, .review-article, #aricha-review > main) li { margin-bottom: 12px; }
:where(.reading-narrative, .review-article, #aricha-review > main) strong { font-weight: 600; color: #fff8e6; }
:where(.reading-narrative, .review-article, #aricha-review > main) blockquote { margin: 26px 0 30px; padding: 9px 0 9px 22px; border-left: 2px solid #b7c59f; color: #d5ddca; }
:where(.reading-narrative, .review-article, #aricha-review > main) blockquote p:last-child { margin-bottom: 0; }
:where(.reading-step, .reading-section) { padding: 34px 0 60px; }
.section-mark, .section-number { font-size: .875rem; line-height: 1.8; letter-spacing: .06em; color: var(--article-muted); margin-bottom: 23px; }
.article-lead { padding-bottom: 32px; }
.article-lead p:first-child { font-size: 1.125rem; }
.reading-section h3 { margin-top: 36px; }
:where(.reader-footer, #aricha-review > footer) { position: relative; z-index: 2; width: min(828px, calc(100% - 72px)); margin: auto; padding: 30px 0 44px; border-top: 1px solid var(--article-line); background: var(--article-bg); font-size: .875rem; line-height: 1.8; color: var(--article-muted); }
:where(.reader-footer, #aricha-review > footer) .brand { display: block; color: var(--article-ink); font-size: 1.5625rem; margin-bottom: 10px; }
#aricha-review > footer p { font-size: .875rem; color: var(--article-muted); margin: 20px 0 0; }
.review-photo { margin: 30px 0 36px; }
.review-photo img { display: block; width: 100%; height: auto; border: 1px solid var(--article-line); }
.review-photo figcaption { padding-top: 12px; font-size: .875rem; line-height: 1.9; color: var(--article-muted); }
.skip-link { position: absolute; left: 20px; top: -80px; z-index: 10; background: #d6dfbc; color: var(--article-bg); padding: 12px; }
.skip-link:focus { top: 15px; }
@media (max-width: 720px) {
  .masthead, .article-heading { padding-inline: 22px; }
  .masthead { align-items: flex-start; padding-block: 20px 22px; }
  .masthead > :is(.tagline, span) { max-width: 170px; }
  .article-heading { padding-block: 22px 30px; }
  .article-heading h1 { font-size: 1.875rem; }
  .article-heading nav { gap: 6px 17px; }
  :where(.reading-narrative, .review-article, #aricha-review > main) { width: calc(100% - 40px); }
  :where(.reading-narrative, .review-article, #aricha-review > main) h2 { font-size: 1.625rem; }
  :where(.reading-narrative, .review-article, #aricha-review > main) h3 { font-size: 1.5rem; }
  :where(.reading-narrative, .review-article, #aricha-review > main) :where(p, li) { line-height: 1.95; }
  :where(.reading-step, .reading-section) { padding: 29px 0 46px; }
  :where(.reader-footer, #aricha-review > footer) { width: calc(100% - 44px); }
}
@media (max-width: 360px) {
  .article-heading h1 { font-size: 1.75rem; }
  .masthead > :is(.tagline, span) { max-width: 130px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }