:root {
  --bg:#f4efe4;
  --paper:#fffaf0;
  --ink:#252b2d;
  --muted:#6b7168;
  --navy:#263746;
  --moss:#6f7b61;
  --gold:#a88a4b;
  --line:#d8cdbb;
  --shadow:0 10px 28px rgba(38,55,70,.08);
  --radius:18px;
  --max:1120px;
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:auto
}

body {
  background:var(--bg)!important;
  color:var(--ink)!important
}

.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(244,239,228,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)
}

.site-header__inner {
  max-width:var(--max);
  margin:auto;
  min-height:64px;
  padding:8px 20px;
  display:flex;
  align-items:center;
  gap:22px
}

.site-logo {
  color:var(--navy)!important;
  text-decoration:none;
  font-size:1.35rem;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap
}

.site-nav {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:4px
}

.site-nav a {
  display:flex;
  align-items:center;
  min-height:44px;
  padding:8px 12px;
  border-radius:999px;
  color:var(--ink)!important;
  text-decoration:none;
  font-weight:700;
  font-size:.93rem
}

.site-nav a:hover,.site-nav a[aria-current="page"] {
  background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line)
}

.page-shell {
  max-width:var(--max);
  margin:auto;
  padding:30px 20px 88px
}

.eyebrow {
  color:var(--moss);
  font-weight:800;
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase
}

.page-title {
  margin:.15em 0 .3em;
  font-size:clamp(2rem,5vw,3.7rem);
  line-height:1.08;
  color:var(--navy)
}

.lead {
  max-width:720px;
  color:var(--muted);
  font-size:1rem;
  margin:0 0 26px
}

.home-card {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:26px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:26px;
  padding:26px;
  box-shadow:var(--shadow);
  align-items:center
}

.home-card__visual {
  background:#e9e1d3;
  border-radius:18px;
  overflow:hidden;
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center
}

.home-card__visual img {
  width:100%;
  max-height:560px;
  object-fit:contain;
  display:block
}

.home-card h2 {
  margin:.2em 0;
  font-size:clamp(1.5rem,3vw,2.25rem);
  color:var(--navy)
}

.meta {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0 22px
}

.chip {
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:white;
  font-size:.82rem;
  font-weight:700
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 16px;
  border-radius:12px;
  background:var(--navy);
  color:white!important;
  text-decoration:none;
  font-weight:800
}

.btn.secondary {
  background:transparent;
  color:var(--navy)!important;
  border:1px solid var(--line)
}

.section {
  margin-top:48px
}

.section h2 {
  color:var(--navy);
  font-size:1.45rem;
  margin:0 0 14px
}

.portal-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px
}

.portal {
  display:block;
  min-height:150px;
  padding:18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--ink)!important;
  box-shadow:0 5px 16px rgba(38,55,70,.04)
}

.portal strong {
  display:block;
  font-size:1.08rem;
  color:var(--navy);
  margin-bottom:6px
}

.portal span {
  color:var(--muted);
  font-size:.9rem;
  line-height:1.55
}

.portal .count {
  display:block;
  margin-top:12px;
  font-weight:900;
  color:var(--moss);
  font-size:1.35rem
}

.category-grid {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.category-grid a {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  padding:8px 12px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  color:var(--ink)!important;
  font-weight:700
}

.home-note {
  margin-top:40px;
  padding:16px 18px;
  border-left:4px solid var(--gold);
  background:rgba(255,250,240,.65);
  border-radius:0 12px 12px 0;
  color:var(--muted);
  font-size:.9rem
}

/* Shared page foundations */
body:not(.home) header:not(.site-header) {
  background:rgba(244,239,228,.96)!important;
  border-color:var(--line)!important
}

body:not(.home) main {
  max-width:var(--max)!important
}

body:not(.home) a {
  text-underline-offset:3px
}

.hero-card::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 18% 24%,rgba(198,164,79,.72) 0 2px,transparent 3px),radial-gradient(circle at 77% 18%,rgba(255,255,255,.95) 0 2px,transparent 4px),radial-gradient(circle at 84% 45%,rgba(192,158,70,.66) 0 2px,transparent 3px),radial-gradient(circle at 27% 68%,rgba(255,255,255,.9) 0 2px,transparent 4px),radial-gradient(circle at 63% 73%,rgba(198,164,79,.68) 0 2px,transparent 3px);
  transform:scale(.94)
}

.hero-card--changing .hero-card__image-button,.hero-card--changing .hero-card__overlay {
  opacity:0;
  transform:translateY(7px) scale(.992)
}

.hero-card--spark .hero-card__image-button img {
  animation:heroCardArrive .58s cubic-bezier(.2,.72,.2,1)
}

.hero-card--spark .hero-card__overlay {
  animation:heroTextArrive .52s cubic-bezier(.2,.72,.2,1)
}

.hero-card--spark::after {
  animation:heroSparkle .62s ease-out
}

@keyframes heroCardArrive {
  0% {
    opacity:.18;
    transform:scale(.985);
    filter:brightness(1.16)
  }

  55% {
    opacity:1;
    transform:scale(1.012);
    filter:brightness(1.04)
  }

  100% {
    opacity:1;
    transform:scale(1);
    filter:brightness(1)
  }

}

@keyframes heroTextArrive {
  0% {
    opacity:0;
    transform:translateY(12px)
  }

  100% {
    opacity:1;
    transform:translateY(0)
  }

}

@keyframes heroSparkle {
  0% {
    opacity:0;
    transform:scale(.94)
  }

  28% {
    opacity:1
  }

  100% {
    opacity:0;
    transform:scale(1.06)
  }

}

@media(prefers-reduced-motion:reduce) {
  .hero-card__image-button,.hero-card__image-button img,.hero-card__overlay {
    transition:none!important;
    animation:none!important
  }

  .hero-card::after {
    display:none
  }

}

@media(max-width:900px) {
  .portal-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .home-card {
    grid-template-columns:1fr
  }

}

@media(max-width:700px) {
  .site-header__inner {
    padding:6px 12px;
    gap:8px;
    overflow-x:auto
  }

  .site-logo {
    font-size:1.12rem
  }

  .site-nav {
    gap:0
  }

  .site-nav a {
    padding:8px 9px;
    font-size:.86rem
  }

  .page-shell {
    padding:22px 12px 72px
  }

  .home-card {
    padding:14px;
    border-radius:18px;
    gap:14px
  }

  .home-card__visual {
    min-height:0
  }

  .portal-grid {
    grid-template-columns:1fr 1fr;
    gap:8px
  }

  .portal {
    min-height:132px;
    padding:14px
  }

  .category-grid a {
    flex:1 1 calc(50% - 8px);
    justify-content:center;
    text-align:center
  }

  .page-title {
    font-size:2.25rem
  }

}

@media(max-width:420px) {
  .site-nav a {
    font-size:.81rem;
    padding:8px 7px
  }

  .portal-grid {
    grid-template-columns:1fr
  }

  .portal {
    min-height:auto
  }

  .category-grid a {
    flex-basis:100%
  }

}

/* Archive layout and filters */
.archive-page .archive-main {
  max-width:var(--max)!important;
  margin:auto;
  padding:30px 20px 88px!important
}

.archive-page .archive-main>h1 {
  font-size:clamp(2rem,5vw,3.15rem);
  line-height:1.1;
  color:var(--navy);
  margin:.1em 0 .25em
}

.archive-page .archive-main>h1 + p {
  max-width:760px;
  color:var(--muted);
  margin-top:0
}

.finder {
  margin:20px 0 30px;
  padding:16px;
  background:rgba(255,250,240,.8);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 5px 16px rgba(38,55,70,.04)
}

.finder__search {
  display:grid;
  gap:6px
}

.finder__search span {
  font-size:.8rem;
  font-weight:800;
  color:var(--moss)
}

.finder__search input {
  width:100%;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
  color:var(--ink);
  padding:10px 13px;
  font:inherit;
  outline:none
}

.finder__search input:focus {
  border-color:var(--moss);
  box-shadow:0 0 0 3px rgba(111,123,97,.13)
}

.finder__chips {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:12px
}

.filter-chip {
  appearance:none;
  border:1px solid var(--line);
  background:white;
  color:var(--ink);
  border-radius:999px;
  min-height:40px;
  padding:7px 11px;
  font:inherit;
  font-size:.82rem;
  font-weight:800;
  cursor:pointer
}

.filter-chip[aria-pressed="true"] {
  background:var(--navy);
  border-color:var(--navy);
  color:white
}

.finder__status {
  margin-top:10px;
  color:var(--muted);
  font-size:.82rem;
  font-weight:700
}

.archive-page [hidden] {
  display:none!important
}

.archive-page .year h2 {
  color:var(--navy)
}

.archive-page .event summary {
  min-height:50px
}

.archive-page .row {
  min-height:52px
}

.archive-page .work,.archive-page .card {
  scroll-margin-top:82px
}

@media(min-width:901px) {
  .archive-page[data-page="timeline"] {
  }

  .archive-page .event summary:hover,.archive-page .row:hover {
    background:rgba(255,250,240,.65)
  }

}

@media(max-width:700px) {
  .archive-page .archive-main {
    padding:22px 12px 72px!important
  }

  .finder {
    position:relative;
    margin:14px 0 22px;
    padding:12px;
    border-radius:14px
  }

  .finder__chips {
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:3px;
    scrollbar-width:none
  }

  .finder__chips::-webkit-scrollbar {
    display:none
  }

  .filter-chip {
    flex:0 0 auto;
    min-height:44px
  }

  .archive-page .event summary {
    min-height:56px
  }

  .archive-page .row {
    min-height:58px
  }

  .archive-page .site-header__inner {
    overflow-x:auto
  }

  .archive-page .site-nav {
    flex:0 0 auto
  }

}

/* Home hero card */
.home-v070 {
  background:var(--bg)!important
}

.home-main {
  max-width:var(--max);
  margin:0 auto;
  padding:18px 20px 82px
}

.hero-card {
  position:relative;
  min-height:min(76vh,760px);
  border:1px solid var(--line);
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(145deg,#f7f0df 0%,#efe5cf 58%,#e6dcc5 100%);
  box-shadow:var(--shadow);
  isolation:isolate
}

.hero-card__image-button {
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  width:100%;
  height:min(76vh,760px);
  min-height:560px;
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.95),rgba(250,246,235,.72) 42%,rgba(232,222,199,.82) 100%);
  display:block;
  cursor:pointer;
  transition:opacity .18s ease,transform .42s cubic-bezier(.2,.72,.2,1),filter .42s ease
}

.hero-card__image-button img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transition:opacity .18s ease,transform .42s cubic-bezier(.2,.72,.2,1),filter .42s ease
}

.hero-card__overlay {
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  padding:58px 28px 24px;
  color:var(--navy);
  background:linear-gradient(to bottom,rgba(248,242,228,0),rgba(248,242,228,.9) 28%,rgba(248,242,228,.98) 58%,rgba(248,242,228,.99) 100%);
  border-radius:0 0 18px 18px;
  pointer-events:none;
  transition:opacity .18s ease,transform .42s cubic-bezier(.2,.72,.2,1)
}

.hero-card__meta {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px
}

.hero-card__meta span {
  display:inline-flex;
  min-height:30px;
  align-items:center;
  padding:4px 9px;
  border:1px solid rgba(74,82,64,.23);
  border-radius:999px;
  background:rgba(255,253,247,.72);
  color:#4b5645;
  font-size:.78rem;
  font-weight:800;
  backdrop-filter:blur(6px)
}

.hero-card__overlay h1 {
  max-width:920px;
  margin:0 0 8px;
  font-size:clamp(1.7rem,4.7vw,3.7rem);
  line-height:1.08;
  letter-spacing:.01em;
  color:var(--navy);
  text-shadow:0 1px 0 rgba(255,255,255,.75)
}

.hero-card__overlay p {
  max-width:840px;
  margin:0;
  color:#38423b;
  font-size:clamp(.9rem,1.6vw,1.07rem);
  line-height:1.72;
  text-shadow:none;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.hero-card__actions {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:17px;
  pointer-events:auto
}

.hero-switch,.hero-link {
  appearance:none;
  min-height:46px;
  padding:9px 15px;
  border-radius:12px;
  font:inherit;
  font-weight:850;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(41,48,38,.09)
}

.hero-switch {
  border:1px solid rgba(128,105,55,.28);
  background:#fffdf7;
  color:var(--navy)
}

.hero-link {
  border:1px solid #283b4b;
  background:#283b4b;
  color:#fff!important
}

.home-portals {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:16px
}

.home-portals a {
  min-height:90px;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper);
  color:var(--ink)!important;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.home-portals strong {
  color:var(--navy);
  font-size:1.08rem
}

.home-portals span {
  color:var(--muted);
  font-size:.84rem;
  margin-top:2px
}

/* Theater */
.theater-section {
  margin-top:34px
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:12px;
  padding-bottom:10px;
  border-bottom:2px solid var(--navy)
}

.section-heading h2 {
  margin:0;
  color:var(--navy);
  font-size:1.5rem
}

.section-heading span {
  color:var(--muted);
  font-size:.84rem;
  font-weight:750
}

.theater-work {
  padding:22px 0;
  border-bottom:1px solid var(--line)
}

.theater-work__head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px
}

.theater-work__head h2 {
  margin:0;
  color:var(--navy);
  font-size:1.22rem
}

.theater-work__head h3 {
  margin:2px 0 0;
  font-size:.98rem;
  font-weight:750
}

.theater-work__head .date {
  white-space:nowrap;
  color:var(--muted);
  font-size:.82rem
}

.pages {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px
}

.theater-zoom {
  display:block;
  border-radius:12px;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  cursor:zoom-in
}

.theater-zoom img {
  width:100%;
  height:auto;
  display:block
}

.regular-page {
  width:min(480px,100%);
  margin:0 auto
}

.regular-page img {
  width:100%;
  height:auto
}

.theater-modal {
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(10,14,17,.96);
  display:grid;
  grid-template-columns:minmax(52px,8vw) minmax(0,1fr) minmax(52px,8vw);
  align-items:center;
  color:white;
  padding:max(12px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))
}

.theater-modal[hidden] {
  display:none!important
}

.theater-modal__stage {
  height:100%;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  overflow:hidden
}

.theater-modal__stage img {
  display:block;
  max-width:100%;
  max-height:calc(100vh - 100px);
  object-fit:contain;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none
}

.theater-modal__close,.theater-modal__prev,.theater-modal__next {
  appearance:none;
  border:0;
  color:#fff;
  background:rgba(255,255,255,.12);
  font:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  min-height:48px;
  border-radius:999px
}

.theater-modal__close {
  position:absolute;
  top:max(10px,env(safe-area-inset-top));
  right:max(10px,env(safe-area-inset-right));
  font-size:1.55rem;
  z-index:2
}

.theater-modal__prev,.theater-modal__next {
  font-size:2.4rem
}

.theater-modal__label {
  font-size:.85rem;
  font-weight:800;
  text-align:center;
  min-height:1.5em
}

.theater-modal__hint {
  font-size:.72rem;
  color:rgba(255,255,255,.68)
}

body.modal-open {
  overflow:hidden
}

@media(max-width:900px) {
  .home-portals {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .hero-card__image-button {
    height:min(72vh,680px)
  }

}

@media(max-width:700px) {
  .home-main {
    padding:8px 0 64px
  }

  .hero-card {
    border-radius:0;
    border-left:0;
    border-right:0;
    min-height:72vh
  }

  .hero-card__image-button {
    height:72vh;
    min-height:520px
  }

  .hero-card__overlay {
    left:10px;
    right:10px;
    bottom:10px;
    padding:72px 16px 18px;
    border-radius:0 0 14px 14px
  }

  .hero-card__overlay p {
    -webkit-line-clamp:5;
    font-size:.9rem
  }

  .hero-card__actions {
    margin-top:12px
  }

  .home-portals {
    margin:12px 12px 0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px
  }

  .home-portals a {
    min-height:76px;
    padding:11px 12px
  }

  .home-v070 .home-note {
    margin:28px 12px 0
  }

  .pages {
    grid-template-columns:1fr
  }

  .theater-zoom {
    border-radius:8px
  }

  .theater-modal {
    grid-template-columns:46px minmax(0,1fr) 46px;
    padding-left:4px;
    padding-right:4px
  }

  .theater-modal__prev,.theater-modal__next {
    min-width:42px;
    min-height:50px;
    font-size:2rem
  }

  .theater-modal__stage img {
    max-height:calc(100vh - 90px)
  }

  .regular-page {
    width:100%
  }

}

@media(max-width:420px) {
  .hero-card__image-button {
    height:70vh;
    min-height:500px
  }

  .hero-card__overlay h1 {
    font-size:1.65rem
  }

  .hero-card__meta span {
    font-size:.72rem
  }

  .home-portals {
    grid-template-columns:1fr 1fr
  }

}

.regular-thumb-page {
  width:min(360px,100%);
  padding:18px;
  background:var(--paper);
  display:flex;
  justify-content:center
}

.regular-thumb-page img {
  width:auto;
  max-width:100%;
  height:auto;
  image-rendering:auto
}

/* Home artwork presentation */
.home-v070 .hero-card {
  min-height:0;
  overflow:visible;
  padding:18px;
  background:linear-gradient(145deg,#f7f0df 0%,#efe5cf 58%,#e6dcc5 100%);
}

.home-v070 .hero-card__visual {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:0;
  max-height:none;
  padding:0;
  overflow:hidden;
  border-radius:20px;
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.98),rgba(250,246,235,.82) 46%,rgba(232,222,199,.88) 100%);
  transition:opacity .18s ease,transform .42s cubic-bezier(.2,.72,.2,1),filter .42s ease;
}

.home-v070 .hero-card__visual img {
  display:block;
  width:100%;
  height:auto;
  max-height:min(74vh,820px);
  object-fit:contain;
  object-position:center;
  transition:opacity .18s ease,transform .42s cubic-bezier(.2,.72,.2,1),filter .42s ease;
}

.home-v070 .hero-card__overlay, .home-v070 .hero-card__info {
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  margin:14px 0 0;
  padding:22px 24px 20px;
  border:1px solid rgba(173,145,78,.38);
  border-radius:22px;
  color:var(--navy);
  background: radial-gradient(circle at 20px 20px,rgba(191,157,73,.12) 0 2px,transparent 2.5px), radial-gradient(circle at calc(100% - 24px) calc(100% - 22px),rgba(111,123,97,.12) 0 3px,transparent 3.5px), linear-gradient(145deg,#fffaf0 0%,#f7edd8 100%);
  box-shadow:0 8px 20px rgba(66,59,41,.08), inset 0 0 0 4px rgba(255,255,255,.38);
  pointer-events:auto;
}

.home-v070 .hero-card__info::before, .home-v070 .hero-card__info::after {
  position:absolute;
  color:#b59447;
  font-size:.9rem;
  line-height:1;
  opacity:.78;
}

.home-v070 .hero-card__info::before {
  content:"✦";
  top:12px;
  right:16px
}

.home-v070 .hero-card__info::after {
  content:"◆";
  bottom:13px;
  right:18px;
  font-size:.55rem
}

.home-v070 .hero-card__overlay h1 {
  font-size:clamp(1.65rem,4vw,3rem);
  margin-bottom:10px
}

.home-v070 .hero-card__overlay p {
  max-width:900px;
  display:block;
  overflow:visible;
  -webkit-line-clamp:unset;
  font-size:clamp(.94rem,1.5vw,1.08rem);
  line-height:1.8;
  padding-right:20px;
}

.home-v070 .hero-card__actions {
  gap:11px;
  margin-top:18px
}

.home-v070 .hero-switch {
  min-height:56px;
  padding:12px 22px;
  border:1px solid #b99a56;
  border-radius:16px;
  background:linear-gradient(180deg,#fffdf8,#f2e4c5);
  color:var(--navy);
  font-size:1rem;
  box-shadow:0 6px 16px rgba(91,70,30,.12);
}

.home-v070 .hero-switch:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 19px rgba(91,70,30,.16)
}

.home-v070 .hero-link {
  min-height:56px;
  padding:12px 20px;
  border-radius:16px
}

.hero-card--changing .hero-card__visual, .hero-card--changing .hero-card__info {
  opacity:0;
  transform:translateY(7px) scale(.992)
}

.hero-card--spark .hero-card__visual img {
  animation:heroCardArrive .58s cubic-bezier(.2,.72,.2,1)
}

.hero-card--spark .hero-card__info {
  animation:heroTextArrive .52s cubic-bezier(.2,.72,.2,1)
}

@media(prefers-reduced-motion:reduce) {
  .hero-card__visual,.hero-card__visual img,.hero-card__info {
    transition:none!important;
    animation:none!important
  }

}

@media(max-width:700px) {
  .home-v070 .hero-card {
    padding:10px;
    border-radius:20px
  }

  .home-v070 .hero-card__visual {
    border-radius:15px
  }

  .home-v070 .hero-card__visual img {
    max-height:none;
    width:100%;
    height:auto
  }

  .home-v070 .hero-card__info {
    margin-top:10px;
    padding:18px 16px 17px;
    border-radius:17px
  }

  .home-v070 .hero-card__actions {
    display:grid;
    grid-template-columns:1fr 1fr
  }

  .home-v070 .hero-switch,.home-v070 .hero-link {
    width:100%;
    min-height:54px;
    padding:10px 12px
  }

}

/* Home artwork caption */
.home-v070 .hero-card {
  padding-bottom:0
}

.home-v070 .hero-card__visual {
  z-index:1
}

.home-v070 .hero-card__info {
  z-index:3;
  width:calc(100% - 56px);
  margin:-46px auto 18px;
  padding:24px 26px 21px;
  border-radius:24px 24px 20px 20px;
  background: radial-gradient(circle at 18px 18px,rgba(194,157,69,.14) 0 2px,transparent 2.5px), radial-gradient(circle at calc(100% - 20px) 20px,rgba(111,123,97,.11) 0 2px,transparent 2.5px), linear-gradient(145deg,rgba(255,251,240,.97),rgba(247,236,213,.97));
  backdrop-filter:blur(8px);
  box-shadow:0 12px 28px rgba(66,59,41,.13),inset 0 0 0 4px rgba(255,255,255,.35);
}

.home-v070 .hero-card__info::before {
  content:"✦ · ✧";
  letter-spacing:.35em;
  top:13px;
  right:15px;
  font-size:.72rem
}

.home-v070 .hero-card__info::after {
  content:"❦";
  bottom:13px;
  right:18px;
  font-size:.82rem
}

@media(max-width:700px) {
  .home-v070 .hero-card__info {
    width:calc(100% - 20px);
    margin:-28px auto 10px;
    padding:20px 16px 17px;
  }

}

/* Timeline card entries */
.event[data-kind="カード"] summary {
  display:grid;
  grid-template-columns:7.2em auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
}

.event[data-kind="カード"] summary .event-type {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:28px;
  padding:3px 9px;
  border:1px solid #c9b991;
  border-radius:999px;
  background:#fff9ea;
  color:#625331;
  font-size:.76rem;
  font-weight:850;
  white-space:nowrap;
}

.event[data-kind="カード"] summary .event-headline {
  min-width:0;
  font-weight:760;
  color:var(--ink);
}

.event[data-kind="カード"] summary em {
  margin-left:auto
}

.event[data-kind="カード"][data-card-event-type="ガシャ"] summary .event-type {
  background:#f5edfb;
  border-color:#d3c0df;
  color:#654c75
}

.event[data-kind="カード"][data-card-event-type="イベント"] summary .event-type {
  background:#edf4e9;
  border-color:#b9c8ad;
  color:#4d6544
}

.event[data-kind="カード"][data-card-event-type="カード追加"] summary .event-type {
  background:#fff4df;
  border-color:#d8bf8b;
  color:#765c2e
}

@media(max-width:700px) {
  .event[data-kind="カード"] summary {
    grid-template-columns:auto 1fr auto;
    gap:6px 8px;
  }

  .event[data-kind="カード"] summary time {
    grid-column:1/2
  }

  .event[data-kind="カード"] summary .event-type {
    grid-column:2/3;
    justify-self:start
  }

  .event[data-kind="カード"] summary .event-headline {
    grid-column:1/4;
    padding-top:2px
  }

  .event[data-kind="カード"] summary em {
    grid-column:3/4;
    grid-row:1/2
  }

}

/* Timeline taxonomy */
.archive-page[data-page="timeline"] .event summary {
  display:grid;
  grid-template-columns:7.2em auto minmax(0,1fr);
  align-items:center;
  gap:8px;
}

.archive-page[data-page="timeline"] .event summary .event-type {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:29px;
  padding:3px 9px;
  border:1px solid #d4c9b3;
  border-radius:999px;
  background:#fffaf1;
  color:#525a50;
  font-size:.75rem;
  font-weight:850;
  white-space:nowrap;
}

.archive-page[data-page="timeline"] .event summary .event-subtype {
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  border:1px solid #ddd2bc;
  color:#6c6253;
  font-size:.7rem;
  font-weight:800;
  white-space:nowrap;
}

.archive-page[data-page="timeline"] .event summary .event-headline {
  min-width:0;
  font-weight:730;
  color:var(--ink);
}

.archive-page[data-page="timeline"] .event[data-kind="カード追加"] summary {
  grid-template-columns:7.2em auto auto minmax(0,1fr);
}

.archive-page[data-page="timeline"] .event[data-kind="劇場公開"] .event-type {
  background:#eef3f7;
  border-color:#b9c8d2;
  color:#38556a
}

.archive-page[data-page="timeline"] .event[data-kind="楽曲追加"] .event-type, .archive-page[data-page="timeline"] .event[data-kind="CD・音源"] .event-type {
  background:#f3edf8;
  border-color:#d1c0df;
  color:#674f78
}

.archive-page[data-page="timeline"] .event[data-kind="グッズ発売"] .event-type {
  background:#fff1ea;
  border-color:#e1c3b3;
  color:#80513d
}

.archive-page[data-page="timeline"] .event[data-kind="カード追加"] .event-type, .archive-page[data-page="timeline"] .event[data-kind="映り込みカード"] .event-type {
  background:#fff5df;
  border-color:#dbc38e;
  color:#765b2d
}

.archive-page[data-page="timeline"] .event[data-kind="デレぽ投稿"] .event-type {
  background:#edf5ef;
  border-color:#bbcfbe;
  color:#456248
}

.archive-page[data-page="timeline"] .event[data-kind="コミュ追加"] .event-type {
  background:#f0f4e8;
  border-color:#c1cba7;
  color:#56653f
}

.archive-page[data-page="timeline"] .event[data-kind="イベント（リアル）"] .event-type {
  background:#fbeeed;
  border-color:#d8b9b6;
  color:#7a4845
}

.archive-page[data-page="timeline"] .event[data-kind="イベント（ゲーム内）"] .event-type {
  background:#eaf3f3;
  border-color:#b7cccc;
  color:#416464
}

.archive-page[data-page="timeline"] .event[data-kind="その他デレステ"] .event-type {
  background:#eef0f8;
  border-color:#c2c7da;
  color:#4e5776
}

.archive-page[data-page="timeline"] .event[data-kind="その他モバマス"] .event-type {
  background:#f4eee6;
  border-color:#d4c3ae;
  color:#6f5b43
}

.archive-page[data-page="timeline"] .event[data-kind="その他情報"] .event-type {
  background:#f2f1ed;
  border-color:#d1cec3;
  color:#66635a
}

@media(max-width:700px) {
  .archive-page[data-page="timeline"] .event summary, .archive-page[data-page="timeline"] .event[data-kind="カード追加"] summary {
    grid-template-columns:auto 1fr;
    gap:6px 8px;
  }

  .archive-page[data-page="timeline"] .event summary time {
    grid-column:1/2
  }

  .archive-page[data-page="timeline"] .event summary .event-type {
    grid-column:2/3;
    justify-self:start
  }

  .archive-page[data-page="timeline"] .event summary .event-subtype {
    grid-column:2/3;
    justify-self:start
  }

  .archive-page[data-page="timeline"] .event summary .event-headline {
    grid-column:1/3;
    padding-top:2px
  }

}

/* Storybook visual language */
:root {
  --forest:#536853;
  --forest-deep:#33483d;
  --dusk:#394b63;
  --star:#b89145;
  --blush:#e9d9d0;
  --sky:#e8eef2;
  --paper2:#fffdf7
}

html {
  background:#f4efe4
}

body {
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  background: radial-gradient(circle at 12% 6%,rgba(255,255,255,.95) 0 1px,transparent 2px), radial-gradient(circle at 76% 11%,rgba(184,145,69,.18) 0 1px,transparent 2px), linear-gradient(180deg,#f8f3e9 0,#f5f0e5 56%,#eef0e7 100%);
  background-size:auto,42px 42px,auto;
  color:#30352f
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background: radial-gradient(ellipse at 8% 90%,rgba(83,104,83,.09),transparent 31%), radial-gradient(ellipse at 94% 82%,rgba(57,75,99,.07),transparent 28%)
}

.site-header {
  background:rgba(248,243,233,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(83,104,83,.2)
}

.site-logo,.storybook-title,.resource-portal strong,.section-heading h2 {
  font-family:"BIZ UDPMincho","Yu Mincho","Hiragino Mincho ProN",serif
}

.site-logo {
  letter-spacing:.08em;
  color:var(--forest-deep)!important
}

.storybook-title {
  position:relative;
  color:var(--dusk)!important;
  letter-spacing:.055em;
  text-wrap:balance
}

.storybook-title::after {
  content:"✦ · ❦ · ✧";
  display:block;
  margin-top:.35em;
  color:var(--star);
  font-family:Georgia,serif;
  font-size:.35em;
  letter-spacing:.5em;
  opacity:.75
}

.archive-main>p,.resource-hero>p {
  max-width:780px
}

.finder {
  background:rgba(255,253,247,.82);
  border-color:rgba(83,104,83,.22)
}

.filter-chip {
  background:#fffdf8
}

.filter-chip[aria-pressed="true"] {
  background:var(--forest-deep);
  border-color:var(--forest-deep);
  color:white
}

.event {
  border-color:rgba(83,104,83,.18)
}

.event summary:hover {
  background:rgba(255,253,247,.72)
}

.event summary {
  grid-template-columns:7.2em minmax(160px,auto) minmax(0,1fr)!important;
  gap:8px 12px!important
}

.event-tags {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  align-items:center
}

.event-tag {
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:2px 8px;
  border:1px solid rgba(83,104,83,.22);
  border-radius:999px;
  background:#fffdf7;
  color:#4a5e4b;
  font-size:.7rem;
  font-weight:800;
  white-space:nowrap
}

.event-tag[data-tag="デレステ"] {
  background:#eef2f7;
  color:#47566d;
  border-color:#c7cfdb
}

.event-tag[data-tag="モバマス"] {
  background:#f4eee5;
  color:#6b5842;
  border-color:#d7c6af
}

.event-tag[data-tag="劇場"] {
  background:#edf4ef;
  color:#3e634d;
  border-color:#bed0c2
}

.event-tag[data-tag="カード"] {
  background:#fff4df;
  color:#72592f;
  border-color:#ddc592
}

.event-tag[data-tag="デレぽ"] {
  background:#eef6f1;
  color:#42634b;
  border-color:#bcd1c1
}

.event-headline {
  font-weight:740;
  line-height:1.55
}

@media(max-width:700px) {
  .event summary {
    grid-template-columns:1fr!important
  }

  .event summary time,.event-tags,.event-headline {
    grid-column:1!important
  }

  .event-tags {
    margin-top:2px
  }

}

/* resource hub */
.resource-main {
  max-width:1120px!important
}

.resource-hero {
  padding:20px 0 8px
}

.eyebrow {
  font-size:.72rem!important;
  font-weight:900;
  letter-spacing:.18em;
  color:var(--forest);
  text-transform:uppercase
}

.resource-portal-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:26px
}

.resource-portal {
  position:relative;
  min-height:180px;
  padding:22px;
  border:1px solid rgba(83,104,83,.2);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,253,247,.96),rgba(241,240,226,.92));
  box-shadow:0 8px 23px rgba(56,66,52,.07);
  text-decoration:none!important;
  color:inherit!important;
  overflow:hidden
}

.resource-portal::after {
  content:"";
  position:absolute;
  width:105px;
  height:105px;
  border-radius:50%;
  right:-42px;
  bottom:-48px;
  background:rgba(83,104,83,.07)
}

.resource-portal__mark {
  color:var(--star);
  font-size:1.1rem
}

.resource-portal strong {
  display:block;
  margin-top:10px;
  color:var(--dusk);
  font-size:1.25rem
}

.resource-portal em {
  display:block;
  margin-top:4px;
  color:var(--forest);
  font-style:normal;
  font-weight:800;
  font-size:.82rem
}

.resource-portal small {
  display:block;
  margin-top:12px;
  color:#677066;
  line-height:1.55
}

.resource-portal:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 27px rgba(56,66,52,.1)
}

@media(max-width:850px) {
  .resource-portal-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}

@media(max-width:520px) {
  .resource-portal-grid {
    grid-template-columns:1fr
  }

  .resource-portal {
    min-height:135px
  }

}

/* media galleries */
.media-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:24px
}

.media-card {
  min-width:0;
  border:1px solid rgba(83,104,83,.2);
  border-radius:17px;
  overflow:hidden;
  background:#fffdf8;
  box-shadow:0 6px 18px rgba(54,65,51,.06)
}

.media-card>a {
  display:block;
  background:#eef0e7
}

.media-card img {
  display:block;
  width:100%;
  height:auto;
  max-height:470px;
  object-fit:contain
}

.media-card>div {
  padding:11px 12px
}

.media-card h2 {
  font-family:"BIZ UDPMincho","Yu Mincho","Hiragino Mincho ProN",serif;
  color:var(--dusk);
  font-size:.92rem;
  line-height:1.45;
  margin:0 0 6px
}

.media-card p,.media-card small {
  font-size:.76rem;
  line-height:1.5;
  color:#687067;
  margin:0
}

.derepo-card img {
  aspect-ratio:9/16;
  object-fit:cover;
  object-position:top
}

.cameo-media-grid .media-card img {
  max-height:540px;
  object-fit:contain
}

@media(max-width:900px) {
  .media-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

}

@media(max-width:620px) {
  .media-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px
  }

  .media-card>div {
    padding:8px
  }

  .media-card h2 {
    font-size:.8rem
  }

  .media-card p,.media-card small {
    font-size:.68rem
  }

}

.image-lightbox {
  position:fixed;
  inset:0;
  z-index:1200;
  background:rgba(24,31,31,.94);
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 56px;
  align-items:center;
  padding:12px;
  color:white
}

.image-lightbox[hidden] {
  display:none!important
}

.image-lightbox figure {
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-height:96vh
}

.image-lightbox img {
  max-width:100%;
  max-height:90vh;
  object-fit:contain
}

.image-lightbox figcaption {
  padding:7px;
  font-size:.8rem
}

.image-lightbox button {
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:white;
  min-width:46px;
  min-height:46px;
  font-size:2rem
}

.image-lightbox__close {
  position:absolute;
  right:12px;
  top:12px;
  z-index:3
}

.image-lightbox__prev {
  grid-column:1
}

.image-lightbox figure {
  grid-column:2
}

.image-lightbox__next {
  grid-column:3
}

/* attribute pages */
.attribute-list {
  display:grid;
  gap:9px;
  margin-top:24px
}

.attribute-item {
  display:grid;
  grid-template-columns:minmax(180px,auto) 1fr auto;
  gap:12px;
  align-items:center;
  padding:13px 15px;
  border:1px solid rgba(83,104,83,.18);
  border-radius:14px;
  background:rgba(255,253,248,.86);
  color:inherit!important;
  text-decoration:none!important
}

.attribute-item>div {
  display:flex;
  gap:4px;
  flex-wrap:wrap
}

.attribute-item strong {
  font-size:.91rem;
  line-height:1.45
}

.attribute-item time {
  font-size:.76rem;
  color:#6f766d
}

@media(max-width:700px) {
  .attribute-item {
    grid-template-columns:1fr
  }

  .attribute-item time {
    grid-row:1
  }

  .attribute-item>div {
    grid-row:2
  }

  .attribute-item strong {
    grid-row:3
  }

}

/* kubo catalog rows */
.kubo-list {
  display:grid;
  gap:9px;
  margin-top:24px
}

.kubo-item {
  padding:13px 15px;
  border:1px solid rgba(83,104,83,.18);
  border-radius:14px;
  background:rgba(255,253,248,.86)
}

.kubo-item__meta {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 12px
}

.kubo-item__name {
  font-size:.95rem
}

.kubo-item__source {
  font-size:.82rem;
  color:var(--muted)
}

.kubo-item__date {
  margin-left:auto;
  font-size:.78rem;
  color:var(--muted);
  white-space:nowrap
}

.kubo-item__quote {
  margin:6px 0 0;
  font-size:.86rem;
  color:var(--ink)
}

/* headings and theater/card touches */
.section-heading {
  border-bottom-color:var(--forest)!important
}

.theater-mode-switch__button[aria-pressed="true"] {
  border-color:var(--forest)!important
}

.card h3,.theater-work h2,.regular-thumb-meta h3 {
  font-family:"BIZ UDPMincho","Yu Mincho","Hiragino Mincho ProN",serif
}

/* Storybook refinements */
:root {
  --asagi:#7db9b2;
  --asagi-deep:#477f79;
  --asagi-pale:#e9f5f2;
  --ink:#354744
}

body {
  background:linear-gradient(180deg,#f4faf8 0,#edf7f4 34%,#f8f6ec 100%)!important;
  color:var(--ink)
}

.site-header {
  background:rgba(239,248,246,.94)!important;
  border-bottom:1px solid rgba(71,127,121,.18)
}

.site-logo {
  display:inline-flex!important;
  align-items:baseline;
  gap:.06em;
  text-decoration:none!important;
  color:var(--asagi-deep)!important;
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif!important;
  font-weight:700!important;
  letter-spacing:.04em
}

.site-logo__main {
  font-size:1.28em;
  transform:rotate(-2deg);
  display:inline-block
}

.site-logo__sub {
  font-size:.62em;
  font-weight:600;
  letter-spacing:.08em;
  opacity:.8
}

.site-logo:before {
  content:"✦";
  font-size:.55em;
  margin-right:.35em;
  opacity:.58
}

.site-logo:after {
  content:"⌁";
  font-size:.75em;
  margin-left:.22em;
  opacity:.55
}

.site-nav a:hover,.site-nav a:focus-visible {
  color:var(--asagi-deep)!important;
  background:rgba(125,185,178,.12)
}

.storybook-title,#hero-card-title,.card-name,.card-title,.card h2,.card h3 {
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif!important;
  font-weight:700!important;
  letter-spacing:.055em!important;
  color:#365e59!important;
  text-shadow:0 1px 0 rgba(255,255,255,.8)
}

#hero-card-title {
  font-size:clamp(1.7rem,4vw,2.7rem)!important
}

.squirrel-divider {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  width:min(240px,70%);
  margin:.35rem auto .75rem
}

.squirrel-divider__line {
  height:1px;
  flex:1;
  background:linear-gradient(90deg,transparent,rgba(71,127,121,.5))
}

.squirrel-divider__line:last-child {
  background:linear-gradient(90deg,rgba(71,127,121,.5),transparent)
}

.squirrel-divider img {
  width:34px;
  height:28px;
  opacity:.78;
  filter:sepia(.15)
}

.hero-card__visual {
  cursor:zoom-in
}

.hero-zoom-hint {
  position:absolute;
  right:12px;
  bottom:12px;
  background:rgba(28,55,52,.72);
  color:white;
  padding:.35rem .65rem;
  border-radius:999px;
  font-size:.72rem;
  pointer-events:none
}

.image-modal[hidden] {
  display:none
}

.image-modal {
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(20,32,31,.88);
  display:grid;
  place-items:center;
  padding:3rem 1rem 1rem;
  cursor:zoom-out
}

.image-modal__image {
  max-width:min(94vw,1100px);
  max-height:90vh;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 20px 70px rgba(0,0,0,.35)
}

.image-modal__close {
  position:fixed;
  top:16px;
  right:20px;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#355e59;
  font-size:1.7rem;
  cursor:pointer
}

.home-portals {
  grid-template-columns:repeat(5,minmax(0,1fr))!important
}

.resource-hub-card,.home-portals a,.finder,.event,.card-entry {
  border-color:rgba(71,127,121,.18)!important
}

.resource-hub-card:hover,.home-portals a:hover {
  border-color:rgba(71,127,121,.38)!important;
  transform:translateY(-1px)
}

.is-future {
  opacity:.62;
  pointer-events:none
}

@media(max-width:760px) {
  .home-portals {
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }

  .site-nav {
    gap:.15rem!important
  }

  .site-nav a {
    font-size:.78rem!important;
    padding:.4rem .45rem!important
  }

}

.derepo-stitch-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.1rem;
  margin:1.5rem 0
}

.derepo-stitch-card {
  background:rgba(255,255,255,.72);
  border:1px solid rgba(71,127,121,.18);
  border-radius:16px;
  overflow:hidden
}

.derepo-stitch-link {
  display:block;
  background:#e7f1ef;
  max-height:520px;
  overflow:hidden
}

.derepo-stitch-link img {
  display:block;
  width:100%;
  height:auto
}

.derepo-stitch-meta {
  padding:.85rem 1rem
}

.derepo-stitch-meta h2 {
  font:700 1rem/1.4 "Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  margin:0 0 .35rem;
  color:#365e59
}

.derepo-stitch-meta p {
  margin:.2rem 0;
  font-size:.84rem
}

.derepo-date {
  color:#6d7f7b
}

/* Forest decoration */
.site-logo:before,.site-logo:after {
  content:none!important
}

.site-logo {
  position:relative;
  padding:.42rem .82rem .46rem!important;
  border:1px solid rgba(54,111,104,.20);
  border-radius:18px 18px 14px 14px;
  background:rgba(255,255,255,.58);
  box-shadow:0 3px 12px rgba(47,93,88,.07),inset 0 1px 0 rgba(255,255,255,.85)
}

.site-logo__main {
  font-size:1.34em!important;
  letter-spacing:.08em!important
}

.site-logo__sub {
  font-size:.58em!important;
  margin-left:.08em
}

.site-logo::selection {
  background:#c9e5df
}

.hero-card {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(63,119,111,.18)!important;
  box-shadow:0 16px 45px rgba(48,91,85,.10)!important;
  background: linear-gradient(155deg,rgba(255,255,255,.86),rgba(232,246,242,.88) 58%,rgba(249,244,226,.82))!important
}

.forest-frame {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden
}

.forest-frame .tree {
  position:absolute;
  bottom:-38px;
  width:92px;
  height:180px;
  border-radius:55% 55% 12% 12%;
  background:linear-gradient(180deg,rgba(91,155,143,.16),rgba(77,131,121,.04))
}

.forest-frame .tree:after {
  content:"";
  position:absolute;
  left:43px;
  bottom:0;
  width:7px;
  height:68px;
  border-radius:8px;
  background:rgba(83,119,105,.10)
}

.tree--1 {
  left:-25px;
  transform:rotate(-7deg)
}

.tree--2 {
  right:2%;
  height:145px!important;
  width:75px!important;
  transform:rotate(5deg)
}

.tree--3 {
  right:-42px;
  height:215px!important;
  width:110px!important;
  opacity:.65
}

.forest-frame .leaf {
  position:absolute;
  width:34px;
  height:17px;
  border-radius:100% 0 100% 0;
  background:rgba(89,157,143,.14)
}

.leaf--1 {
  left:7%;
  top:11%;
  transform:rotate(-28deg)
}

.leaf--2 {
  right:14%;
  top:8%;
  transform:rotate(32deg)
}

.forest-frame .star-dot {
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(210,174,95,.46);
  box-shadow:14px 10px 0 rgba(210,174,95,.22)
}

.star-dot--1 {
  left:18%;
  top:7%
}

.star-dot--2 {
  right:22%;
  top:17%
}

.hero-card__copy {
  background:rgba(246,250,246,.76)!important;
  backdrop-filter:blur(5px);
  border:1px solid rgba(75,130,121,.14)!important;
  border-radius:22px!important;
  box-shadow:0 9px 28px rgba(54,94,88,.07)!important
}

#hero-card-title {
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif!important;
  font-weight:700!important;
  letter-spacing:.075em!important;
  color:#315f59!important
}

.squirrel-divider img {
  width:40px!important;
  height:32px!important;
  opacity:.86!important
}

.home-portals a {
  background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(232,246,242,.68))!important;
  border-radius:18px!important;
  padding:1rem .8rem!important;
  box-shadow:0 5px 18px rgba(50,91,85,.055)
}

.home-portals strong {
  color:#356d66!important;
  letter-spacing:.06em
}

.page-title-clean {
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight:700;
  color:#356d66;
  letter-spacing:.06em
}

.derepo-review-note {
  margin:1rem 0 1.5rem;
  padding:.9rem 1rem;
  border-left:4px solid #7db9b2;
  background:rgba(232,246,242,.72);
  border-radius:0 12px 12px 0;
  font-size:.9rem
}

.derepo-timeline-section>h2,.derepo-image-archive>h2 {
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  color:#356d66;
  margin-top:2rem
}

.derepo-year {
  margin:1.6rem 0 .65rem;
  color:#477f79;
  border-bottom:1px solid rgba(71,127,121,.18);
  padding-bottom:.35rem
}

.derepo-post-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:.75rem
}

.derepo-post-card {
  background:rgba(255,255,255,.72);
  border:1px solid rgba(71,127,121,.16);
  border-radius:14px;
  padding:.85rem 1rem
}

.derepo-post-card time {
  display:block;
  font-size:.76rem;
  color:#6f827e;
  margin-bottom:.28rem
}

.derepo-post-card strong {
  display:block;
  color:#355f5a;
  margin-bottom:.35rem
}

.derepo-post-card p {
  margin:.2rem 0;
  font-size:.9rem;
  line-height:1.7
}

.thread-badge {
  display:inline-block;
  margin-top:.45rem;
  padding:.2rem .5rem;
  border-radius:999px;
  background:#e1f1ed;
  color:#477f79;
  font-size:.72rem
}

@media(max-width:720px) {
  .hero-card {
    border-radius:18px!important
  }

  .hero-card__copy {
    border-radius:16px!important
  }

  .forest-frame .tree {
    opacity:.7
  }

  .derepo-post-list {
    grid-template-columns:1fr
  }

}

/* Section title divider */
.squirrel-divider {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  margin:12px 0 18px!important
}

.squirrel-divider__vine {
  width:min(145px,28vw);
  height:18px;
  position:relative;
  border-bottom:1px solid rgba(85,130,110,.28)
}

.squirrel-divider__vine:before,.squirrel-divider__vine:after {
  content:"";
  position:absolute;
  bottom:-1px;
  width:16px;
  height:8px;
  border:1px solid rgba(93,142,115,.34);
  border-left:0;
  border-bottom:0;
  border-radius:100% 0
}

.squirrel-divider__vine:before {
  right:22%;
  transform:rotate(-18deg)
}

.squirrel-divider__vine:after {
  left:28%;
  transform:scaleX(-1) rotate(-18deg)
}

.squirrel-divider__squirrel {
  position:relative;
  display:inline-block;
  width:38px;
  height:34px;
  flex:0 0 38px
}

.squirrel-divider__squirrel i {
  position:absolute;
  display:block;
  background:#8a7355
}

.sq-body {
  width:18px;
  height:20px;
  left:13px;
  bottom:2px;
  border-radius:55% 48% 48% 52%
}

.sq-head {
  width:12px;
  height:12px;
  left:22px;
  bottom:17px;
  border-radius:50%
}

.sq-ear {
  width:6px;
  height:7px;
  left:27px;
  bottom:27px;
  border-radius:90% 10% 90% 10%;
  transform:rotate(16deg)
}

.sq-tail {
  width:20px;
  height:27px;
  left:0;
  bottom:5px;
  border-radius:70% 42% 68% 42%;
  transform:rotate(-24deg);
  transform-origin:bottom right
}

.sq-tail:after {
  content:"";
  position:absolute;
  width:11px;
  height:16px;
  right:-5px;
  bottom:-3px;
  background:var(--paper,#f7f0dc);
  border-radius:70% 20% 70% 20%;
  transform:rotate(12deg)
}

.today-history {
  margin:22px auto;
  padding:20px 22px;
  max-width:1120px;
  border:1px solid rgba(74,128,116,.18);
  border-radius:20px;
  background:rgba(255,255,255,.64);
  box-shadow:0 8px 26px rgba(50,91,85,.055)
}

.today-history h2 {
  margin:0 0 5px;
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  color:#356d66;
  font-size:1.22rem
}

.today-history__lead {
  margin:.2rem 0 1rem;
  color:#687b76;
  font-size:.88rem
}

.today-history__item {
  display:grid;
  grid-template-columns:72px 1fr;
  gap:10px;
  padding:.58rem 0;
  border-top:1px solid rgba(74,128,116,.12)
}

.today-history__year {
  font-weight:700;
  color:#5d8c83
}

.today-history__item a {
  color:#334e49;
  text-decoration:none
}

.today-history__item a:hover {
  text-decoration:underline
}

.today-history__more {
  display:inline-block;
  margin-top:.8rem;
  color:#477f79;
  font-weight:700
}

.today-history__empty {
  color:#7a8581
}

@media(max-width:600px) {
  .today-history {
    margin:16px 10px;
    padding:17px
  }

  .today-history__item {
    grid-template-columns:58px 1fr
  }

  .squirrel-divider__vine {
    width:24vw
  }

}

/* Derecone landing page */
body[data-page="derecone"] {
  background: linear-gradient(180deg,rgba(229,244,240,.76) 0,rgba(247,244,232,.76) 320px,rgba(247,244,232,1) 100%)
}

body[data-page="derecone"] .archive-main {
  max-width:1040px!important;
  padding-top:52px!important
}

.derecone-hero {
  position:relative;
  padding:18px 4px 32px;
  border-bottom:1px solid rgba(67,119,111,.18)
}

.derecone-hero__eyebrow {
  margin:0 0 7px!important;
  font-size:.7rem!important;
  font-weight:800;
  letter-spacing:.24em;
  color:#789b94!important
}

.derecone-title {
  margin:0!important;
  font-family:"BIZ UDPMincho","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(2.65rem,7vw,4.8rem)!important;
  line-height:1;
  color:#315f59!important;
  letter-spacing:.08em
}

.derecone-title:after {
  content:none!important
}

.derecone-lead {
  margin:17px 0 0!important;
  max-width:580px!important;
  color:#637873!important;
  line-height:1.85;
  font-size:.94rem
}

.derecone-menu {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:24px
}

.derecone-menu__card {
  position:relative;
  display:flex;
  min-height:190px;
  flex-direction:column;
  padding:22px 22px 20px;
  border:1px solid rgba(70,126,116,.18);
  border-radius:18px;
  background:rgba(255,255,255,.67);
  box-shadow:0 7px 22px rgba(48,91,85,.055);
  color:#344e49!important;
  text-decoration:none!important;
  overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease
}

.derecone-menu__card:hover {
  transform:translateY(-2px);
  border-color:rgba(70,126,116,.36);
  box-shadow:0 11px 28px rgba(48,91,85,.085)
}

.derecone-menu__label {
  align-self:flex-start;
  margin-bottom:auto;
  padding:.26rem .56rem;
  border-radius:999px;
  background:#e2f1ed;
  color:#527f77;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em
}

.derecone-menu__card strong {
  display:block;
  margin-top:28px;
  font-family:"BIZ UDPMincho","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:1.6rem;
  color:#315f59;
  letter-spacing:.06em
}

.derecone-menu__desc {
  display:block;
  margin-top:7px;
  max-width:18em;
  color:#687a76;
  font-size:.85rem;
  line-height:1.65
}

.derecone-menu__line {
  display:block;
  width:38px;
  margin-top:17px;
  border-top:1px solid rgba(165,139,87,.55)
}

.derecone-menu__card--future {
  cursor:default;
  opacity:.58;
  background:rgba(247,247,241,.64)
}

.derecone-menu__card--future:hover {
  transform:none;
  box-shadow:0 7px 22px rgba(48,91,85,.055);
  border-color:rgba(70,126,116,.18)
}

@media(max-width:720px) {
  body[data-page="derecone"] .archive-main {
    padding-top:34px!important
  }

  .derecone-hero {
    padding:10px 5px 25px
  }

  .derecone-menu {
    grid-template-columns:1fr;
    gap:10px
  }

  .derecone-menu__card {
    min-height:142px;
    padding:18px
  }

  .derecone-menu__card strong {
    margin-top:18px;
    font-size:1.4rem
  }

}

/* Metadata links and timeline media */
.card-date-link {
  color:inherit;
  text-decoration:none;
  border-bottom:1px dotted rgba(64,117,108,.45)
}

.card-date-link:hover {
  color:#356d66;
  border-bottom-color:#356d66
}

.card-date-link strong,.skill-name {
  font-weight:800;
  color:#304f4a
}

.timeline-media {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 12px
}

.timeline-media__item {
  position:relative;
  display:block;
  overflow:hidden;
  border:1px solid rgba(68,120,111,.18);
  border-radius:12px;
  background:#edf5f2;
  text-decoration:none;
  color:#365e59;
  box-shadow:0 4px 13px rgba(48,91,85,.05)
}

.timeline-media__item img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top
}

.timeline-media__item span {
  position:absolute;
  left:7px;
  bottom:7px;
  padding:.18rem .48rem;
  border-radius:999px;
  background:rgba(34,61,57,.76);
  color:#fff;
  font-size:.66rem;
  line-height:1.4
}

.timeline-media--card .timeline-media__item {
  width:min(150px,31vw);
  aspect-ratio:3/4
}

.timeline-media--theater .timeline-media__item {
  width:min(190px,38vw);
  aspect-ratio:4/3
}

.timeline-media--theater .timeline-media__item:nth-child(2) img {
  object-fit:cover;
  object-position:top
}

.timeline-media__item:hover {
  border-color:rgba(68,120,111,.4);
  box-shadow:0 7px 18px rgba(48,91,85,.08)
}

.derepo-count {
  font-weight:800;
  color:#477f79;
  margin:.25rem 0 1rem
}

.derepo-placeholder-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  margin-bottom:1.5rem
}

.derepo-placeholder {
  padding:12px;
  border:1px solid rgba(71,127,121,.16);
  border-radius:14px;
  background:rgba(255,255,255,.68);
  box-shadow:0 4px 14px rgba(48,91,85,.045)
}

.derepo-placeholder__top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:9px
}

.derepo-placeholder__top time {
  font-weight:800;
  color:#476f68;
  font-size:.82rem
}

.derepo-placeholder__timeline {
  font-size:.72rem;
  color:#5f807a
}

.derepo-placeholder__image {
  display:grid;
  place-items:center;
  min-height:150px;
  border:1px dashed rgba(71,127,121,.24);
  border-radius:10px;
  background:linear-gradient(160deg,rgba(231,245,241,.75),rgba(250,247,238,.76));
  color:#84928f;
  font-size:.78rem
}

@media(max-width:640px) {
  .timeline-media {
    gap:7px
  }

  .timeline-media--card .timeline-media__item {
    width:calc(50% - 4px);
    max-width:none
  }

  .timeline-media--theater .timeline-media__item {
    width:calc(50% - 4px);
    max-width:none
  }

  .timeline-media__item {
    border-radius:9px
  }

  .timeline-media__item span {
    left:5px;
    bottom:5px;
    font-size:.62rem
  }

  .derepo-placeholder-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px
  }

  .derepo-placeholder {
    padding:9px;
    border-radius:11px
  }

  .derepo-placeholder__image {
    min-height:112px
  }

}

@media(max-width:380px) {
  .derepo-placeholder-grid {
    grid-template-columns:1fr
  }

}

/* Component refinements */
.center-effect-name {
  font-weight:800;
  color:#304f4a
}

.hero-switch {
  white-space:nowrap!important;
  min-width:max-content!important
}

.hero-card__visual {
  cursor:pointer!important
}

.squirrel-divider {
  display:none!important
}

.today-history {
  display:grid!important;
  grid-template-columns:120px 1fr!important;
  grid-template-rows:auto 1fr!important;
  column-gap:18px!important;
  row-gap:0!important;
  align-items:center!important;
  margin:14px auto 20px!important;
  padding:14px 18px!important;
  min-height:0!important;
  border-radius:15px!important
}

.today-history__label {
  grid-column:1;
  grid-row:1;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.16em;
  color:#6f918a
}

.today-history__date {
  grid-column:1;
  grid-row:2;
  font-family:"BIZ UDPMincho","Yu Mincho",serif;
  font-size:2.45rem;
  font-weight:700;
  line-height:1;
  color:#315f59
}

.today-history__items {
  grid-column:2;
  grid-row:1/3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  min-width:0
}

.today-history__event {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:8px;
  align-items:baseline;
  color:#405d58;
  text-decoration:none;
  line-height:1.35
}

.today-history__event span {
  font-size:.68rem;
  color:#77908b;
  font-weight:700
}

.today-history__event strong {
  font-size:.82rem;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.today-history__event:hover strong {
  text-decoration:underline
}

.timeline-media--theater .timeline-media__item {
  width:min(190px,42vw)
}

.timeline-media--cameo .timeline-media__item {
  width:min(150px,31vw);
  aspect-ratio:4/3
}

.timeline-media--cameo .timeline-media__item img {
  object-fit:cover;
  object-position:center
}

.event--static {
  border:inherit
}

.event-static-head {
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:8px;
  align-items:center;
  padding:inherit
}

@media(max-width:640px) {
  .today-history {
    grid-template-columns:82px 1fr!important;
    column-gap:11px!important;
    padding:11px 12px!important;
    margin:10px 8px 14px!important
  }

  .today-history__date {
    font-size:1.95rem
  }

  .today-history__label {
    font-size:.55rem;
    letter-spacing:.1em
  }

  .today-history__event {
    grid-template-columns:35px 1fr;
    gap:5px
  }

  .today-history__event strong {
    font-size:.74rem
  }

  .hero-card__actions {
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important
  }

  .hero-switch {
    font-size:.78rem!important;
    padding-left:12px!important;
    padding-right:12px!important;
    white-space:nowrap!important
  }

  .hero-link {
    font-size:.78rem!important;
    padding-left:12px!important;
    padding-right:12px!important;
    white-space:nowrap!important
  }

  .hero-card__visual img {
    max-height:58vh!important;
    object-fit:contain!important
  }

  .timeline-media--cameo .timeline-media__item {
    width:calc(50% - 4px);
    max-width:none
  }

}

/* Derepo archive */
.derepo-placeholder__gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px
}

.derepo-placeholder__gallery:has(.derepo-placeholder__photo:only-child) {
  grid-template-columns:1fr
}

.derepo-placeholder__photo {
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:10px;
  border:1px solid rgba(71,127,121,.15);
  background:#eef5f2
}

.derepo-placeholder__photo img {
  display:block;
  width:100%;
  height:auto;
  max-height:330px;
  object-fit:contain;
  background:#fff
}

.derepo-placeholder__photo span {
  position:absolute;
  right:6px;
  bottom:6px;
  min-width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(38,66,62,.78);
  color:#fff;
  font-size:.68rem;
  font-weight:800
}

.timeline-media--derepo .timeline-media__item {
  width:min(160px,32vw);
  max-height:180px
}

.timeline-media--derepo .timeline-media__item img {
  object-fit:cover;
  object-position:top
}

@media(max-width:640px) {
  .timeline-media--derepo .timeline-media__item {
    width:calc(50% - 4px);
    max-height:160px
  }

  .derepo-placeholder__gallery {
    gap:5px
  }

  .derepo-placeholder__photo img {
    max-height:240px
  }

}

/* Derepo responsive layout */
.derepo-retake-note {
  margin:.35rem 0;
  padding:.8rem .9rem;
  border-radius:10px;
  background:#f7f3e9;
  color:#6d6658;
  font-size:.82rem;
  line-height:1.6
}

.derepo-placeholder__photo img {
  max-height:none;
  object-fit:contain
}

@media(max-width:640px) {
  .derepo-placeholder-grid {
    grid-template-columns:1fr!important
  }

  .derepo-placeholder {
    padding:10px
  }

  .derepo-placeholder__gallery {
    grid-template-columns:1fr!important
  }

  .derepo-placeholder__photo img {
    width:100%;
    height:auto;
    max-height:none!important;
    object-fit:contain
  }

  .resource-main {
    padding-left:12px!important;
    padding-right:12px!important
  }

  .site-header__inner {
    gap:8px
  }

  .site-nav {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    scrollbar-width:none
  }

  .site-nav::-webkit-scrollbar {
    display:none
  }

}

/* Timeline and completed home components */
.archive-page[data-page="timeline"] .event {
  margin:0!important;
  border-bottom:1px solid rgba(83,104,83,.18)!important;
  border-top:0!important;
  border-left:0!important;
  border-right:0!important;
  border-radius:0!important;
  background:transparent!important
}

.archive-page[data-page="timeline"] .event summary,.archive-page[data-page="timeline"] .event-static-head {
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:7.2em minmax(160px,auto) minmax(0,1fr)!important;
  gap:8px 12px!important;
  align-items:center!important;
  width:100%!important;
  min-height:54px!important;
  padding:8px 4px!important
}

.archive-page[data-page="timeline"] .event-static-head time,.archive-page[data-page="timeline"] .event summary time {
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.archive-page[data-page="timeline"] .event-static-head .event-headline,.archive-page[data-page="timeline"] .event summary .event-headline {
  min-width:0!important;
  overflow-wrap:anywhere
}

.archive-page[data-page="timeline"] details.event[open] {
  background:rgba(255,253,247,.52)!important
}

.archive-page[data-page="timeline"] details.event>.body {
  margin:0 0 8px calc(7.2em + 12px)!important;
  border:1px solid rgba(184,145,69,.32)!important;
  border-radius:13px!important;
  background:#fffaf0!important;
  padding:12px 14px!important
}

.archive-page[data-page="timeline"] details.event:not([open])>.body {
  display:none!important
}

/* Expandable vs static timeline events: chevron + cursor are the primary
   signifiers, a subtle accent border reinforces it — never color alone. */
.archive-page[data-page="timeline"] .event--expandable {
  border-left:3px solid rgba(51,72,61,.28)!important;
  cursor:pointer
}

.archive-page[data-page="timeline"] .event--static {
  border-left:3px solid transparent!important;
  cursor:default
}

.archive-page[data-page="timeline"] .event-static-head {
  cursor:default
}

.archive-page[data-page="timeline"] .event--expandable summary {
  position:relative!important;
  list-style:none;
  padding-right:30px!important;
  cursor:pointer
}

.archive-page[data-page="timeline"] .event--expandable summary::-webkit-details-marker {
  display:none
}

.archive-page[data-page="timeline"] .event--expandable summary::after {
  content:"";
  position:absolute;
  top:50%;
  right:8px;
  width:8px;
  height:8px;
  border-right:2px solid var(--forest-deep);
  border-bottom:2px solid var(--forest-deep);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .16s ease,opacity .16s ease;
  opacity:.65
}

.archive-page[data-page="timeline"] details.event--expandable[open]>summary::after {
  transform:translateY(-30%) rotate(-135deg)
}

.archive-page[data-page="timeline"] details.event--expandable:hover {
  border-left-color:var(--forest-deep)!important
}

.archive-page[data-page="timeline"] .event--expandable summary:hover::after,
.archive-page[data-page="timeline"] .event--expandable summary:focus-visible::after {
  opacity:1
}

.archive-page[data-page="timeline"] .event--expandable summary:focus-visible {
  outline:2px solid var(--forest-deep);
  outline-offset:-2px
}

@media(max-width:700px) {
  .archive-page[data-page="timeline"] .event summary,.archive-page[data-page="timeline"] .event-static-head {
    grid-template-columns:1fr!important;
    gap:4px!important;
    padding:10px 2px!important
  }

  .archive-page[data-page="timeline"] .event summary time,.archive-page[data-page="timeline"] .event-static-head time,.archive-page[data-page="timeline"] .event summary .event-tags,.archive-page[data-page="timeline"] .event-static-head .event-tags,.archive-page[data-page="timeline"] .event summary .event-headline,.archive-page[data-page="timeline"] .event-static-head .event-headline {
    grid-column:1!important
  }

  .archive-page[data-page="timeline"] details.event>.body {
    margin:0 0 8px 0!important
  }

  .archive-page[data-page="timeline"] .event--expandable summary {
    padding-right:26px!important
  }

  .archive-page[data-page="timeline"] .event--expandable summary::after {
    right:4px
  }

}

.today-history {
  display:grid!important;
  grid-template-columns:148px minmax(0,1fr)!important;
  grid-template-rows:auto 1fr!important;
  column-gap:24px!important;
  align-items:center!important;
  padding:20px 24px!important;
  background:linear-gradient(135deg,rgba(255,253,247,.96),rgba(236,246,242,.92))!important
}

.today-history__label {
  grid-column:1;
  grid-row:1;
  font-size:.72rem!important;
  font-weight:900!important;
  letter-spacing:.18em!important;
  color:#698d86!important
}

.today-history__date {
  grid-column:1;
  grid-row:2;
  font-family:"BIZ UDPMincho","Yu Mincho",serif!important;
  font-size:clamp(2.8rem,6vw,4.6rem)!important;
  font-weight:800!important;
  line-height:.95!important;
  color:#315f59!important
}

.today-history__items {
  grid-column:2;
  grid-row:1/3;
  gap:7px!important
}

.today-history__event {
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  gap:9px!important;
  padding:5px 0!important;
  text-decoration:none!important;
  border-bottom:1px solid rgba(83,104,83,.10)
}

.today-history__event:last-child {
  border-bottom:0
}

.today-history__event span {
  font-size:.7rem!important
}

.today-history__event strong {
  font-size:.9rem!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important
}

.today-history__none {
  color:#7b8984;
  font-size:.86rem
}

.hero-card {
  background:radial-gradient(circle at 14% 18%,rgba(184,145,69,.16) 0 3px,transparent 4px),radial-gradient(circle at 88% 12%,rgba(74,128,116,.18) 0 4px,transparent 5px),linear-gradient(135deg,#f7f3e8 0%,#eaf5f1 48%,#f4ead8 100%)!important
}

.forest-frame {
  z-index:0!important;
  opacity:1!important
}

.forest-frame .tree {
  background:linear-gradient(180deg,rgba(82,137,126,.20),rgba(82,137,126,.05))!important
}

.forest-frame .leaf {
  background:rgba(83,145,132,.20)!important
}

.forest-frame .star-dot {
  background:rgba(184,145,69,.58)!important
}

.hero-card__visual {
  position:relative!important;
  z-index:1!important;
  margin:18px!important;
  border:1px solid rgba(64,106,98,.18)!important;
  border-radius:22px!important;
  background:linear-gradient(90deg,rgba(255,255,255,.38) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.38) 1px,transparent 1px),rgba(255,253,247,.58)!important;
  background-size:28px 28px!important;
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.22),0 14px 34px rgba(50,91,85,.08)!important;
  overflow:hidden!important
}

.hero-card__visual img {
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:68vh!important;
  object-fit:contain!important;
  position:relative!important;
  z-index:1!important
}

.hero-card__info {
  z-index:2!important
}

.kubo-picker {
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:8px 24px;
  margin:20px auto;
  padding:22px 24px;
  border:1px solid rgba(83,104,83,.18);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,253,247,.96),rgba(245,239,224,.90));
  box-shadow:0 8px 26px rgba(50,91,85,.055)
}

.kubo-picker__eyebrow {
  grid-column:1;
  font-size:.67rem;
  letter-spacing:.18em;
  font-weight:900;
  color:#7b948d
}

.kubo-picker h2 {
  grid-column:1;
  margin:2px 0 0;
  font-size:1.15rem;
  color:#405c56
}

.kubo-picker__body {
  grid-column:2;
  grid-row:1/3;
  min-width:0
}

.kubo-picker__term {
  font-family:"BIZ UDPMincho","Yu Mincho",serif;
  font-weight:800;
  font-size:clamp(2rem,5vw,3.4rem);
  line-height:1;
  color:#315f59
}

.kubo-picker__meta {
  margin-top:6px;
  color:#78857f;
  font-size:.72rem;
  font-weight:700
}

.kubo-picker__quote {
  margin:9px 0 0;
  max-width:820px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  color:#535f5a;
  font-size:.83rem;
  line-height:1.55
}

.kubo-picker__actions {
  display:flex;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap
}

.kubo-picker__actions button,.kubo-picker__actions a {
  min-height:38px;
  padding:8px 13px;
  border:1px solid rgba(65,100,92,.22);
  border-radius:999px;
  background:#fffdf8;
  color:#3f625b;
  font:inherit;
  font-size:.78rem;
  font-weight:800;
  text-decoration:none;
  cursor:pointer
}

@media(max-width:640px) {
  .today-history {
    grid-template-columns:92px minmax(0,1fr)!important;
    gap:10px!important;
    padding:14px!important
  }

  .today-history__date {
    font-size:2.25rem!important
  }

  .today-history__event {
    grid-template-columns:35px minmax(0,1fr)!important
  }

  .kubo-picker {
    grid-template-columns:1fr;
    gap:3px;
    padding:16px
  }

  .kubo-picker__eyebrow,.kubo-picker h2,.kubo-picker__body {
    grid-column:1;
    grid-row:auto
  }

  .kubo-picker__term {
    font-size:2.2rem
  }

  .hero-card__visual {
    margin:10px!important
  }

}