/* UNSOUNE / Electric cyan × acid yellow. */
:root {
  --paper: #f7f9fc;
  --ink: #10151c;
  --muted: #59616d;
  --line: #ccd2da;
  --green: #004dcc;
  --mint: #c5faff;
  --orange: #0055e8;
  --cyan: #56efff;
  --yellow: #efff39;
  --serif: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
body { background: var(--paper); }
a:hover { color: #004dcc; }
.topline { background: var(--ink); color: var(--cyan); border: 0; font-weight: 700; }
.header { border-bottom: 2px solid var(--ink); }
.brand { font-weight: 950; letter-spacing: -.065em; }
.brand-dot { color: #004dcc; }
.brand small { letter-spacing: .25em; }
.header-nav .search-link { background: var(--yellow); border: 2px solid var(--ink); }
.header-nav a[aria-current] { text-decoration-thickness: 3px; }
.intro {
  position: relative;
  background: var(--cyan);
  border: 2px solid var(--ink);
  margin: 25px 0 0;
  padding: 46px 35px 42px;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 12px;
}
.eyebrow { font-weight: 800; letter-spacing: .12em; }
.live-dot { background: var(--ink); border-radius: 0; transform: rotate(-12deg); }
.intro h1 { font-size: clamp(32px, 3.5vw, 49px); font-weight: 900; line-height: 1.65; letter-spacing: -.055em; }
.intro h1 > span { background: var(--yellow); padding: 0 .13em .05em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.intro h1 > span:after { display: none; }
.intro-copy { color: var(--ink); font-weight: 600; }
.intro-art { height: 260px; }
.orbit { border-color: var(--ink); width: 300px; height: 165px; border-width: 1.5px; }
.orbit-two { width: 225px; height: 260px; }
.speech.big {
  background: var(--yellow);
  border: 3px solid var(--ink);
  width: 215px;
  height: 190px;
  border-radius: 28px;
  box-shadow: 7px 7px 0 var(--ink);
  padding: 38px 33px;
  font-size: 39px;
  font-weight: 900;
  letter-spacing: -.06em;
}
.speech.big:after { display: none; }
.speech.big span { color: var(--ink); }
.speech.small { background: #fff; border: 2px solid var(--ink); font-weight: 800; right: -7px; top: 1px; border-radius: 8px; padding: 12px; box-shadow: 3px 3px 0 var(--ink); z-index: 1; }
.spark { color: var(--ink); top: -3px; left: 0; font-size: 58px; }
.art-caption { color: var(--ink); font-weight: 700; }
.reading-path { background: var(--yellow); border: 2px solid var(--ink); border-top: 0; padding: 15px 20px; gap: 24px; }
.reading-path b { color: var(--ink); font: 900 16px Arial, sans-serif; }
.reading-path i, .reading-path em { color: var(--ink); }
.reading-path > span { font-weight: 700; }
.section-heading h2 { font-weight: 900; letter-spacing: -.035em; }
.section-heading h2 span { color: #47566a; font-weight: 700; }
.categories a { border: 1.5px solid var(--ink); background: #fff; font-weight: 700; }
.categories .active { background: var(--ink); color: var(--cyan); }
.categories a:hover { background: var(--cyan); color: var(--ink); }
.search { border-color: var(--ink); border-width: 2px; }
.news-card { border: 2px solid var(--ink); background: #fff; }
.news-card:hover { box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px, -2px); }
.card-art { background: var(--cyan); border-bottom: 2px solid var(--ink); }
.art-grid { background-image: radial-gradient(#10151c35 1px, transparent 1px); background-size: 15px 15px; }
.shape, .art-world .shape, .art-science .shape, .art-economy .shape { border: 2px solid var(--ink); }
.shape-a { background: #ffffff50; }
.art-symbol, .art-world .art-symbol, .art-science .art-symbol, .art-economy .art-symbol { color: var(--ink); font-family: Arial, sans-serif; font-weight: 900; }
.art-world { background: var(--cyan); }
.art-economy { background: var(--yellow); }
.art-science { background: #bda2ff; }
.art-society { background: #ffacdb; }
.art-label { color: var(--ink); font-weight: 800; }
.pick-label { border: 1.5px solid var(--ink); background: var(--yellow); color: var(--ink); font-weight: 800; transform: rotate(4deg); }
.featured .card-art { border-bottom: 0; border-right: 2px solid var(--ink); }
.card-body h3 { font-weight: 800; letter-spacing: -.035em; line-height: 1.55; }
.card-body > p { color: #4e5867; }
.category-label { color: #004dcc; }
.mini-summary > span { background: var(--yellow); color: var(--ink); padding: 3px 6px; font-weight: 700; }
.card-bottom { color: #4e5867; }
.card-bottom b { color: var(--ink); }
.manifesto { background: var(--yellow); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.manifesto-symbol { color: var(--ink); font-family: Arial, sans-serif; font-weight: 900; }
.manifesto h2 { font-weight: 900; letter-spacing: -.04em; }
.manifesto p:not(.eyebrow) { color: var(--ink); }
.manifesto > a { border-color: var(--ink); font-weight: 800; }
.footer { border-top: 2px solid var(--ink); }
.story-header h1, .about h1 { font-weight: 900; letter-spacing: -.045em; }
.story-intro { color: #4e5867; }
.summary-box { background: var(--cyan); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.summary-box h2, .chapter h2, .final-summary h2 { font-weight: 850; letter-spacing: -.035em; }
.summary-box li { border-color: #10151c40; }
.summary-box li:before { color: var(--ink); font-family: Arial, sans-serif; font-style: normal; font-weight: 900; }
.chapter-heading { border-bottom: 2px solid var(--ink); }
.chapter-heading > span { background: var(--yellow); padding: 0 7px; color: var(--ink); font: 900 27px/1.45 Arial, sans-serif; }
.takeaway { background: #efffb9; border-left: 4px solid var(--ink); }
.takeaway strong { color: var(--ink); }
.predictions { background: #f2edff; border: 2px solid var(--ink); }
.predictions .eyebrow, .predictions .prediction-note { color: #443562; }
.impact { border-color: #beb1d8; }
.impact h3 { font-weight: 800; }
.forecast-tag { background: #bda2ff; border-color: var(--ink); color: var(--ink); font-weight: 800; }
.counterpoint { background: #e4daf7; color: #39304a; }
.final-summary { background: var(--ink); border: 2px solid var(--ink); color: #fff; }
.final-summary .eyebrow, .final-summary li:before, .signoff { color: var(--yellow); }
.final-summary li { border-color: #58616b; }
.signoff { font-weight: 900; }
.dictionary { background: #fff; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--cyan); }
.dictionary > .eyebrow { color: var(--ink); background: var(--yellow); display: inline-block; padding: 2px 6px; }
.dictionary dd { color: #4e5867; }
.reading-controls [aria-pressed=true], .save-button[aria-pressed=true] { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.notice { background: #fff9cb; border-left-color: var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible { outline-color: #004dcc; }
@media (min-width: 1450px) { .intro { padding: 52px 40px; grid-template-columns: minmax(0, 1fr) 390px; } .intro h1 { font-size: 53px; } }
@media (max-width: 1050px) { .intro { grid-template-columns: minmax(0, 1fr) 250px; padding: 32px 25px; } .intro-art { transform: scale(.75); } .reading-path { gap: 15px; } }
@media (max-width: 700px) {
  .intro { grid-template-columns: 1fr; padding: 28px 18px; margin-top: 18px; }
  .intro h1 { font-size: clamp(23px, 6.5vw, 30px); letter-spacing: -.055em; max-width: 100%; }
  .intro .eyebrow { font-size: 7px; letter-spacing: .065em; }
  .intro-copy { font-size: 11px; }
  .reading-path { padding: 12px 9px; gap: 4px; font-size: 8px; }
  .reading-path b { font-size: 12px; margin-right: 4px; }
  .featured .card-art { border-right: 0; border-bottom: 2px solid var(--ink); }
  .card-body h3, .featured h3 { font-size: 22px; }
  .manifesto { padding: 23px 20px; box-shadow: 4px 4px 0 var(--ink); }
  .manifesto h2 { font-size: 19px; }
  .summary-box { box-shadow: 3px 3px 0 var(--ink); }
}

.art-business { background: var(--yellow); }
.art-business .shape { border-radius: 8px; transform: rotate(-12deg); }

/* Editorial navigation */
.filter-row { align-items: flex-start; }
.categories { flex: 1; }
.news-card { display: flex; flex-direction: column; }
.card-link { height: auto; flex: 1; }
.article-tags { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 20px; }
.article-tags a { font-size: 10px; background: #eef1f6; color: #26354b; border-radius: 20px; padding: 3px 9px; }
.article-tags a:hover { background: var(--cyan); }
.category-directory { padding: 45px 0 60px; }
.category-directory h1 { font-size: clamp(25px, 4vw, 40px); letter-spacing: -.04em; }
.category-tiles { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.category-tiles > a { border: 2px solid var(--ink); background: white; padding: 23px; }
.category-tiles > a:hover { background: var(--yellow); color: var(--ink); }
.category-tiles span { font-size: 10px; }
.category-tiles h2 { font-size: 20px; line-height: 1.6; }
.category-tiles p { margin-bottom: 0; font-size: 12px; }
.category-tiles b { float: right; }
@media(max-width:1050px) { .category-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(max-width:700px) { .header-nav>a[href="/unsoune/about/"] { display: none; } .header-nav { gap: 10px; } .header-nav>a { font-size: 9px; } .category-tiles { grid-template-columns: 1fr; gap: 13px; } .category-directory { padding-top: 30px; } }

/* ニュースを短く読み、背景へ進めるカード。 */
.card-brief { padding-left: 1.1em; margin: 18px 0; }
.card-brief li { margin: 0 0 10px; line-height: 1.75; font-size: 14px; }
.news-card .card-art { display: none; }
.news-card.featured { grid-column: auto; }
.news-card .card-link { display: flex; flex-direction: column; height: 100%; }
.news-card .card-body { flex: 1; border-top: 8px solid var(--cyan); }
.news-card.featured .card-body { border-top-color: var(--yellow); }
.news-card.featured h3 { font-size: 24px; }
.summary-box ul { padding-left: 1.2em; }
.summary-box ul li { padding-left: 0; }
.summary-box ul li::before { content: none; }
.ai-note, .source-credits { margin: 24px 0; font-size: 12px; color: #526068; }
.source-credits summary { cursor: pointer; }

/* Keep each card compact; no reserved space below its summary. */
.news-grid { align-items: start; }
.news-card .card-link { height: auto; }
.news-card .card-body { flex: none; }
.card-brief { margin: 12px 0; }
.card-brief li:last-child { margin-bottom: 0; }
.card-bottom { margin-top: 0; }
.meta { gap: 8px; flex-wrap: wrap; }
.meta time { margin-left: auto; }
.read-badge { padding: 1px 7px; border: 1px solid #59616d; border-radius: 4px; color: #47566a; font-weight: 700; white-space: nowrap; }
.read-badge[hidden] { display: none; }
.news-card.is-read .card-body { border-top-color: #aeb9c6; background: #f3f5f8; }
.pagination { flex-wrap: wrap; margin: 28px 0; gap: 7px; }
.pagination a { padding: 6px 12px; }

/* Inline definitions keep the article's typography and use a dotted underline. */
.story a.glossary-link {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.story a.glossary-link:hover, .story a.glossary-link:focus-visible { color: var(--orange); }
.dictionary dt[id] { scroll-margin-top: 30px; }
.dictionary dt:target, .dictionary dt:focus { background: var(--yellow); outline: 2px solid var(--ink); outline-offset: 3px; }

.settings-panel { margin: 35px 0 45px; padding: 24px; border: 2px solid var(--ink); background: #fff; }
.settings-panel h2 { margin: 22px 0 12px; font-size: 19px; }
.settings-panel h2:first-child { margin-top: 0; }
.settings-panel > label { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.settings-panel select, .settings-panel button { border: 1px solid var(--ink); background: var(--yellow); padding: 7px 12px; color: var(--ink); }
.settings-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; margin: 16px 0 22px; }
.settings-categories label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
@media (max-width: 700px) { .settings-categories { grid-template-columns: 1fr; } }
.ad-wall { margin: 35px 0; padding: 24px; border: 2px solid var(--ink); background: var(--yellow); }
.ad-wall-slot { margin: 18px auto; padding: 12px; background: var(--paper); border: 1px solid var(--ink); text-align: center; }
.ad-wall-slot > span { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 800; }
.ad-wall-slot iframe { display: block; width: 728px; max-width: 100%; height: 90px; margin: 0 auto; border: 0; background: #fff; }
.ad-thanks { margin: 38px 0; text-align: center; font-size: 18px; font-weight: 800; line-height: 2; }