/* Shared typography, controls and form foundations. */
@charset "UTF-8";
:root {
  --navy:#143447;
  --deep:#102f41;
  --ink:#1c3746;
  --muted:#73818a;
  --paper:#fbf9f3;
  --yellow:#efc95e;
  --line:#e2e3db;
  --white:#fff;
  --sage:#eaf0e8;
  --radius:16px;
  font-family:"Segoe UI","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

body {
  margin:0;
  font-size:15px;
  line-height:1.7;
}

button,input,textarea,select {
  font:inherit;
}

button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent;
}

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

button {
  cursor:pointer;
}

button:disabled {
  cursor:not-allowed;
  opacity:.6;
}

a:focus-visible,button:focus-visible {
  outline:3px solid #bc911f;
  outline-offset:5px;
}

button {
  color:inherit;
}

button,input,textarea,select {
  border-radius:8px;
}

input,textarea,select {
  border:1px solid #d9dedb;
  padding:12px 14px;
  background:#fff;
  width:100%;
  color:var(--ink);
  outline:none;
}

input:focus,textarea:focus,select:focus {
  border-color:#59796d;
  box-shadow:0 0 0 3px #59796d19;
}

input::placeholder,textarea::placeholder {
  color:#9ca5a8;
  font-size:13px;
}

textarea {
  resize:vertical;
  min-height:180px;
}

h1,h2,h3,p {
  margin-top:0;
}

h1,h2,h3 {
  line-height:1.35;
}

h2 {
  font-weight:650;
}

button {
  border:0;
}

fieldset {
  margin:0;
  padding:0;
  border:0;
  min-width:0;
}

label {
  display:block;
  font-size:13px;
  font-weight:600;
}

label>input,label>textarea {
  margin-top:8px;
}

dialog {
  border:0;
  padding:0;
  border-radius:20px;
  color:var(--ink);
  box-shadow:0 30px 100px #102f4133;
  width:min(760px,calc(100% - 32px));
  max-height:90dvh;
}

dialog::backdrop {
  background:#102f4199;
  backdrop-filter:blur(5px);
}

[hidden] {
  display:none!important;
}

.wrap {
  max-width:1180px;
  margin-inline:auto;
  padding-inline:30px;
}

.brand {
  display:flex;
  align-items:center;
  gap:19px;
}

.brand-mark {
  font-size:34px;
  font-weight:900;
  letter-spacing:-2px;
  line-height:1;
}

.brand-dot {
  color:#bf9634;
}

.nav-cta {
  padding:10px 20px;
  border:1px solid #bbc7c9;
  border-radius:6px;
}

.nav-cta span {
  margin-left:12px;
}

.eyebrow {
  font-size:10px;
  letter-spacing:2.3px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
  color:#60756f;
}

.tiny-line {
  display:block;
  width:25px;
  height:1px;
  background:#738c7e;
}

.underline {
  position:relative;
  z-index:0;
}

.underline:after {
  content:"";
  position:absolute;
  left:-5px;
  right:-12px;
  bottom:5px;
  height:19px;
  background:var(--yellow);
  z-index:-1;
  transform:rotate(-3deg);
  border-radius:60% 20% 50% 40%;
}

.sun {
  font-family:serif;
  font-size:44px;
  color:#c19737;
  vertical-align:top;
  margin-left:24px;
  display:inline-block;
  transform:rotate(15deg);
}

.button {
  display:inline-flex;
  gap:20px;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:600;
  padding:14px 23px;
  border-radius:7px;
  border:1px solid transparent;
  transition:background .15s,transform .15s;
}

.button:hover {
  transform:translateY(-1px);
}

.primary {
  background:var(--navy);
  color:white;
}

.primary:hover {
  background:#245166;
}

.secondary {
  background:#f6f7f2;
  color:var(--navy);
  border-color:#d8dfda;
}

.text-link {
  background:none;
  padding:0;
  font-size:12px;
  border-radius:0;
  display:inline-flex;
  gap:18px;
  align-items:center;
}

.text-link:hover {
  text-decoration:underline;
}

.status-dot {
  width:6px;
  height:6px;
  background:#749174;
  border-radius:50%;
  display:inline-block;
}

.date-divider {
  color:#c0c7c6;
  margin:0 4px;
}

.book-back {
  position:absolute;
  inset:27px 5px 24px 20px;
  background:#e4e9da;
  border:1px solid #d9dfd0;
  transform:rotate(-5deg);
  border-radius:5px;
}

.illustration {
  width:100%;
  aspect-ratio:1.63;
  background-repeat:no-repeat;
  background-color:#fff;
  mix-blend-mode:multiply;
}

.art-1 {
  background-image:url('/assets/story-1.jpg');
  background-size:255% auto;
  background-position:94% 60%;
}

.art-2 {
  background-image:url('/assets/story-2.jpg');
  background-size:245% auto;
  background-position:6% 59%;
}

.art-3 {
  background-image:url('/assets/story-3.jpg');
  background-size:235% auto;
  background-position:5% 59%;
}

.art-4 {
  background-image:url('/assets/story-4.jpg');
  background-size:255% auto;
  background-position:94% 60%;
}

.book-bottom {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #dce3d7;
  padding-top:12px;
  font-size:9px;
  letter-spacing:2px;
  margin-top:16px;
  color:#76856e;
}

.book-bottom span:last-child {
  font-size:20px;
  line-height:1;
}

.art-note {
  position:absolute;
  bottom:2px;
  right:-24px;
  z-index:2;
  background:#f3d782;
  padding:16px 25px;
  transform:rotate(-5deg);
  font-family:"STSong","SimSun",serif;
  font-size:18px;
  box-shadow:0 8px 20px #796b4610;
}

.art-note small {
  font-family:"Microsoft YaHei",sans-serif;
  font-size:9px;
  letter-spacing:.3px;
  color:#776938;
}

.art-star {
  position:absolute;
  color:#b69447;
  z-index:2;
}

.star-one {
  font-size:64px;
  top:-23px;
  right:-20px;
}

.star-two {
  font-size:27px;
  bottom:18px;
  left:-16px;
}

.event-strip {
  background:#eaf0e7;
  border-top:1px solid #dce5d7;
  border-bottom:1px solid #dce5d7;
}

.strip-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:24px;
  gap:24px;
}

.strip-label {
  font-size:10px;
  display:block;
  color:#718574;
  letter-spacing:2px;
  margin-bottom:4px;
}

.strip-inner strong {
  font-size:14px;
  font-weight:500;
}

.strip-details {
  display:flex;
  gap:28px;
  align-items:center;
  font-size:11px;
  color:#617260;
}

.strip-details b {
  font-family:Georgia,serif;
  font-weight:400;
  font-size:27px;
  margin-right:5px;
  color:#294832;
}

.strip-details a {
  border-left:1px solid #ccd7c6;
  padding-left:24px;
  font-size:11px;
}

.stories-section {
  padding-top:72px;
  padding-bottom:50px;
}

.section-top {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:25px;
  margin-bottom:30px;
}

.section-top h2 {
  font-size:29px;
  margin:13px 0 10px;
  letter-spacing:1px;
}

.yellow-period {
  color:#c59c3a;
}

.muted {
  color:var(--muted);
}

.section-top p {
  font-size:12px;
  margin-bottom:0;
}

.story-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.story-card {
  background:#fff;
  border:1px solid #e2e6de;
  border-radius:10px;
  overflow:hidden;
  transition:transform .2s,box-shadow .2s;
  display:block;
  width:100%;
  text-align:left;
  padding:0;
}

.story-card:hover {
  transform:translateY(-5px);
  box-shadow:0 13px 28px #1634470a;
}

.card-art {
  background:#f4f3ea;
  padding:19px 8px 0;
  position:relative;
}

.story-card:nth-child(2) .card-art {
  background:#f3ece2;
}

.story-card:nth-child(3) .card-art {
  background:#eff1e9;
}

.story-card:nth-child(4) .card-art {
  background:#eaf0ed;
}

.card-number {
  font-family:Georgia,serif;
  color:#919f8e;
  font-size:13px;
  position:absolute;
  top:10px;
  left:15px;
}

.card-content {
  padding:22px 19px 17px;
}

.card-tag {
  font-size:10px;
  color:#8a957e;
  letter-spacing:1px;
}

.story-card h3 {
  font-size:16px;
  margin:10px 0 12px;
  font-weight:600;
  min-height:44px;
}

.story-card p {
  font-size:11px;
  line-height:1.9;
  color:#89918e;
  min-height:42px;
}

.card-bottom {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #edf0e9;
  padding-top:14px;
  font-size:10px;
  color:#526657;
}

.card-bottom span:last-child {
  font-size:16px;
  line-height:1;
}

.source-note {
  text-align:right;
  color:#929c94;
  font-size:10px;
  margin-top:17px;
}

.quote-band {
  margin-top:8px;
  margin-bottom:62px;
  display:flex;
  gap:32px;
  align-items:center;
}

.big-quote {
  font-size:100px;
  font-family:Georgia,serif;
  line-height:1;
  color:#d5bd78;
  padding-top:20px;
}

.quote-band p {
  font-size:19px;
  font-family:"STSong","SimSun",serif;
  line-height:1.8;
  letter-spacing:1px;
  margin-bottom:0;
}

.quote-band strong {
  font-weight:500;
}

.quote-source {
  margin-left:auto;
  text-align:right;
  font-size:10px;
  color:#8a958b;
  line-height:2;
}

.participate-section {
  border-top:1px solid var(--line);
  padding-block:65px;
  display:grid;
  grid-template-columns:.83fr 1.3fr;
  gap:76px;
}

.participate-copy h2 {
  font-family:"STSong","SimSun",serif;
  font-size:40px;
  line-height:1.5;
  margin:20px 0;
  letter-spacing:2px;
}

.participate-copy>p {
  font-size:13px;
  color:#7c8b86;
  line-height:2;
}

.writing-prompts {
  margin-top:40px;
}

.small-label {
  font-size:10px;
  letter-spacing:2px;
  color:#849084;
}

.writing-prompts p {
  font-size:12px;
  margin-top:18px;
  margin-bottom:0;
}

.writing-prompts p span {
  font-family:Georgia,serif;
  color:#b39a5b;
  margin-right:12px;
}

.private-note {
  display:flex;
  gap:12px;
  margin-top:40px;
  color:#73897a;
  font-size:11px;
  max-width:310px;
}

.private-note>span {
  font-size:25px;
  line-height:1;
}

.restore-trigger {
  margin-top:12px;
  font-size:11px;
  color:#56756b;
}

.form-panel {
  padding:32px;
  background:#fff;
  border:1px solid #e0e6dc;
  border-radius:12px;
  box-shadow:0 12px 40px #193f2704;
}

.form-heading {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:28px;
  align-items:center;
}

.form-step {
  font-size:16px;
  font-weight:600;
}

.small {
  font-size:11px;
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.required {
  color:#bb9540;
  font-weight:400;
}

.form-divider {
  height:1px;
  background:#edf0e9;
  margin:26px 0;
}

.story-label {
  margin-top:20px;
}

.story-label>span {
  float:right;
  font-weight:400;
}

.field-bottom {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  color:#87988b;
  margin-top:5px;
}

.draft-button {
  font-size:10px;
  margin-top:8px;
  color:#5b7c6b;
}

.consent {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:10px;
  color:#7a8a80;
  line-height:1.9;
  font-weight:400;
  margin:22px 0;
}

.consent input {
  width:14px;
  height:14px;
  margin:4px 0 0;
  flex-shrink:0;
  accent-color:var(--navy);
}

.consent button {
  background:none;
  padding:0;
  color:#577866;
  font-size:10px;
  text-decoration:underline;
}

.form-actions {
  display:flex;
  gap:12px;
}

.form-actions .button {
  padding:13px 17px;
  flex:1;
  font-size:12px;
}

.form-message {
  font-size:12px;
  color:#af593f;
  margin:14px 0 0;
  white-space:pre-wrap;
}

.notice {
  padding:12px 15px;
  background:#fff5d8;
  font-size:12px;
  margin-bottom:20px;
  border-radius:7px;
}

.success-panel {
  text-align:center;
}

.success-icon {
  display:inline-grid;
  place-items:center;
  width:54px;
  height:54px;
  border-radius:50%;
  background:#edf2df;
  color:#507141;
  font-size:27px;
  margin:14px;
}

.success-panel h3 {
  font-size:22px;
  margin-top:16px;
}

.success-panel p {
  font-size:13px;
  color:#789080;
}

.success-panel label {
  text-align:left;
  margin:25px 0 16px;
}

.success-panel .button {
  margin-bottom:14px;
}

.success-panel input {
  font-family:monospace;
  font-size:12px;
}

.site-footer {
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:30px 40px;
  color:#8d998f;
  font-size:10px;
}

.site-footer .brand-mark {
  color:#5f7363;
  font-size:27px;
}

.site-footer>a:last-child {
  font-size:10px;
}

.dialog-bar {
  position:sticky;
  top:0;
  z-index:3;
  background:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 24px;
  border-bottom:1px solid var(--line);
  font-size:12px;
}

.icon-button {
  background:#f3f5ee;
  color:#567163;
  width:32px;
  height:32px;
  border-radius:50%;
  font-size:22px;
  line-height:1;
}

.reader-body {
  padding:28px 48px 42px;
}

.reader-body h2 {
  font-size:29px;
  margin:12px 0 20px;
}

.reader-body .illustration {
  max-width:530px;
  margin:0 auto 20px;
}

.reader-quote {
  font-family:"STSong","SimSun",serif;
  font-size:22px;
  line-height:1.8;
  border-left:3px solid var(--yellow);
  padding:8px 20px;
  background:#faf9f1;
  margin-bottom:24px;
}

.reader-text {
  font-size:15px;
  line-height:2.1;
  color:#526c71;
}

.reader-source {
  font-size:11px;
  color:#899990;
  margin:24px 0;
}

.reader-bottom {
  display:flex;
  gap:15px;
  border-top:1px solid var(--line);
  padding-top:23px;
}

.small-dialog {
  max-width:470px;
}

.small-dialog form,.privacy-content {
  padding:25px;
}

.small-dialog form>p,.privacy-content p {
  font-size:13px;
  line-height:1.9;
}

.small-dialog form .button {
  margin-top:20px;
}

.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  background:var(--navy);
  color:#fff;
  padding:12px 24px;
  border-radius:8px;
  z-index:10;
  font-size:12px;
  max-width:calc(100% - 30px);
  box-shadow:0 8px 25px #102f4122;
}

.mobile-cta {
  display:none;
}

@media(max-width:1000px) {
  .art-note {
    right:-6px;
  }

  .strip-details {
    gap:15px;
  }

  .strip-details a {
    display:none;
  }

  .story-grid {
    grid-template-columns:repeat(2,1fr);
    gap:22px;
  }

  .story-card h3 {
    min-height:0;
  }

  .story-card p {
    min-height:0;
  }

  .participate-section {
    gap:30px;
    grid-template-columns:.7fr 1.2fr;
  }

  .form-panel {
    padding:24px;
  }

  .form-actions {
    flex-direction:column;
  }
}

@media(max-width:680px) {
  html {
    scroll-padding-top:25px;
  }

  .wrap {
    padding-inline:23px;
  }

  .brand-mark {
    font-size:28px;
  }

  .brand {
    gap:12px;
  }

  .nav-cta {
    padding:7px 10px;
    font-size:10px;
  }

  .nav-cta span {
    margin-left:4px;
  }

  .sun {
    font-size:33px;
  }

  .button {
    padding:13px 20px;
  }

  .art-note {
    right:-10px;
    font-size:14px;
    padding:12px 16px;
  }

  .star-one {
    font-size:46px;
    right:-5px;
  }

  .star-two {
    font-size:23px;
    left:-6px;
  }

  .strip-inner {
    display:block;
    padding-block:22px;
  }

  .strip-inner strong {
    font-size:12px;
  }

  .strip-details {
    gap:25px;
    margin-top:14px;
  }

  .strip-details b {
    font-size:23px;
  }

  .strip-details a {
    display:block;
    font-size:10px;
    padding-left:12px;
  }

  .stories-section {
    padding-top:43px;
    padding-bottom:20px;
  }

  .section-top {
    display:block;
    margin-bottom:20px;
  }

  .section-top h2 {
    font-size:23px;
    margin-top:13px;
    letter-spacing:0;
  }

  .section-top p {
    font-size:11px;
  }

  .story-grid {
    gap:12px;
  }

  .card-art {
    padding:17px 0 0;
  }

  .card-content {
    padding:16px 12px 13px;
  }

  .card-tag {
    font-size:9px;
  }

  .story-card h3 {
    font-size:14px;
    min-height:38px;
    line-height:1.5;
    margin-top:8px;
    margin-bottom:10px;
  }

  .story-card p {
    font-size:10px;
    min-height:54px;
    margin-bottom:13px;
  }

  .card-bottom {
    font-size:9px;
    padding-top:11px;
  }

  .card-number {
    font-size:10px;
    left:10px;
    top:7px;
  }

  .source-note {
    font-size:9px;
    text-align:left;
  }

  .quote-band {
    gap:14px;
    margin-top:8px;
    margin-bottom:30px;
  }

  .big-quote {
    font-size:73px;
  }

  .quote-band p {
    font-size:15px;
    letter-spacing:0;
  }

  .quote-source {
    display:none;
  }

  .participate-section {
    grid-template-columns:1fr;
    gap:27px;
    padding-block:35px;
  }

  .participate-copy h2 {
    font-size:33px;
    margin:16px 0;
    line-height:1.45;
  }

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

  .writing-prompts {
    margin-top:24px;
  }

  .writing-prompts p {
    font-size:11px;
    margin-top:12px;
  }

  .private-note {
    margin-top:23px;
    max-width:100%;
  }

  .private-note p {
    margin-bottom:0;
  }

  .restore-trigger {
    margin-top:17px;
  }

  .form-panel {
    padding:23px 17px;
  }

  .form-heading {
    margin-bottom:23px;
  }

  .form-grid {
    gap:16px 11px;
  }

  .form-grid label {
    font-size:11px;
  }

  input,textarea,select {
    font-size:16px;
    padding:11px 10px;
  }

  input::placeholder,textarea::placeholder {
    font-size:11px;
  }

  .story-label {
    font-size:12px;
  }

  .story-label .small {
    font-size:9px;
  }

  .field-bottom {
    font-size:9px;
  }

  .form-actions {
    gap:10px;
  }

  .form-actions .button {
    font-size:13px;
    padding:14px;
  }

  .consent {
    font-size:10px;
  }

  .site-footer {
    padding-top:25px;
    padding-bottom:100px;
    flex-wrap:wrap;
    gap:16px;
    font-size:9px;
  }

  .site-footer>span {
    flex-basis:70%;
    font-size:9px;
  }

  .mobile-cta {
    display:block;
    position:fixed;
    bottom:14px;
    left:23px;
    right:23px;
    background:var(--navy);
    color:white;
    text-align:center;
    padding:12px;
    border-radius:8px;
    z-index:5;
    box-shadow:0 4px 25px #132d4730;
    font-size:13px;
  }

  .reader-body {
    padding:23px;
  }

  .reader-body h2 {
    font-size:24px;
  }

  .reader-quote {
    font-size:19px;
    padding:10px 15px;
  }

  .reader-text {
    font-size:14px;
  }

  .reader-bottom {
    flex-direction:column;
  }

  .toast {
    bottom:80px;
  }

  .dialog-bar {
    padding:13px 20px;
  }

  .eyebrow {
    font-size:9px;
    letter-spacing:1.7px;
  }
}

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

  * {
    transition:none!important;
  }
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.section-signpost {
  display:flex;
  align-items:center;
  gap:13px;
  padding:10px 0 4px;
  color:#7b8c80;
}

.section-signpost strong {
  font:400 46px/1 Georgia,serif;
  color:#c1a15d;
}

.section-signpost span {
  font-size:10px;
  line-height:1.8;
  letter-spacing:1px;
}

.storybook {
  position:relative;
  margin-top:38px;
  padding:28px 28px 20px;
  background:#e8eee4;
  border:1px solid #d7e0d5;
  border-radius:5px;
  box-shadow:0 18px 60px #2345380d;
}

.storybook:before {
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid #fff9;
  border-radius:3px;
  pointer-events:none;
}

.storybook-ribbon {
  position:absolute;
  right:42px;
  top:-15px;
  z-index:2;
  display:flex;
  gap:12px;
  align-items:center;
  padding:8px 15px;
  background:#f1d477;
  color:#6c5b2d;
  font-size:10px;
  letter-spacing:1px;
  box-shadow:0 7px 14px #8c77331a;
  transform:rotate(2deg);
}

.storybook-ribbon span+span {
  padding-left:12px;
  border-left:1px solid #d3b457;
}

.storybook-stage {
  position:relative;
  max-width:1050px;
  margin:0 auto;
  perspective:1200px;
}

.book-shadow {
  position:absolute;
  inset:18px -10px -10px 18px;
  background:#cbd6c7;
  border-radius:5px;
  transform:rotate(-1.1deg);
  box-shadow:0 22px 30px #20412c16;
}

.storybook-page {
  position:relative;
  min-height:600px;
  padding:37px 43px 30px;
  background:#fffdf7;
  border:1px solid #dfe5d9;
  border-radius:3px 9px 9px 3px;
  box-shadow:inset 13px 0 0 -8px #e5eadf,0 18px 30px #254a3610;
  transform-origin:left center;
  overflow:hidden;
}

.storybook-page:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,#e9eee610,transparent 12%,transparent 88%,#e3e9dc22);
}

.storybook-page.is-turning {
  animation:turn-page .48s ease both;
}

@keyframes turn-page {
0%{opacity:.35;transform:rotateY(-7deg) translateX(-10px)}100%{opacity:1;transform:rotateY(0) translateX(0)}
}

.storybook-meta {
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-bottom:13px;
  border-bottom:1px solid #e5e9df;
  color:#819087;
  font-size:10px;
  letter-spacing:1px;
}

.storybook-theme {
  color:#b18e4b;
}

.storybook-spread {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(280px,.91fr) minmax(0,1.09fr);
  gap:45px;
  align-items:start;
  padding-top:29px;
}

.storybook-visual {
  width:100%;
  min-height:360px;
  aspect-ratio:1.05;
  background-color:#f0f2e9;
  background-repeat:no-repeat;
  background-size:contain!important;
  border-radius:2px 11px 11px 2px;
  mix-blend-mode:normal;
  box-shadow:14px 15px 0 -8px #e1e7dd,0 14px 27px #29433014;
}

.storybook-copy {
  padding:4px 2px 0;
}

.storybook-kicker {
  font-size:10px;
  letter-spacing:2.5px;
  color:#839187;
  font-weight:700;
}

.storybook-copy h2 {
  font-family:"STSong","SimSun",serif;
  font-size:31px;
  line-height:1.55;
  letter-spacing:1px;
  margin:12px 0 10px;
  color:#183b4b;
}

.storybook-intro {
  font-size:13px;
  line-height:1.9;
  color:#799080;
  margin-bottom:21px;
}

.storybook-quote {
  margin:0 0 21px;
  padding:11px 18px;
  border-left:3px solid #edc95d;
  background:#faf6e8;
  color:#5d633f;
  font:20px/1.8 "STSong","SimSun",serif;
}

.storybook-text {
  font-size:13px;
  line-height:2.05;
  color:#526c71;
  margin-bottom:13px;
}

.storybook-page-foot {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:21px;
  padding-top:13px;
  border-top:1px solid #e6e9e1;
  font-size:10px;
  color:#8b998d;
}

.storybook-page-foot span:last-child {
  color:#b08b43;
}

.storybook-controls {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:130px 1fr 75px 130px;
  align-items:center;
  gap:18px;
  max-width:1050px;
  margin:0 auto;
  padding:21px 2px 2px;
}

.page-control {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:8px 0;
  background:transparent;
  color:#526f63;
  font-size:11px;
}

.page-control-next {
  justify-content:flex-end;
}

.page-control:hover:not(:disabled) {
  color:#b08332;
}

.book-page-count {
  text-align:center;
  color:#8b998e;
  font:12px Georgia,serif;
  letter-spacing:1px;
}

.book-dots {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}

.book-dot {
  width:7px;
  height:7px;
  padding:0;
  border-radius:50%;
  background:#c5d0c3;
  border:1px solid transparent;
  transition:transform .18s,background .18s;
}

.book-dot:hover,.book-dot.active {
  background:#b48c43;
  transform:scale(1.45);
}

.storybook-ending {
  display:grid;
  place-items:center;
  min-height:600px;
  text-align:center;
}

.storybook-ending .storybook-meta {
  position:absolute;
  inset:37px 43px auto;
}

.ending-content {
  position:relative;
  z-index:1;
  max-width:600px;
  padding:74px 25px 25px;
}

.ending-ellipsis {
  font:700 56px/1 Georgia,serif;
  letter-spacing:10px;
  color:#d4b75e;
  margin:0 0 22px 10px;
}

.ending-content h2 {
  font:400 36px/1.5 "STSong","SimSun",serif;
  color:#183b4b;
  margin:0 0 15px;
  letter-spacing:3px;
}

.ending-content p {
  font-size:14px;
  line-height:2;
  color:#73877d;
  max-width:450px;
  margin:0 auto 27px;
}

.ending-button {
  margin:0 auto 15px;
}

.ending-note {
  display:block;
  font-size:10px;
  letter-spacing:1px;
  color:#a18b59;
}

.story-index-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-top:48px;
  margin-bottom:20px;
}

.story-index-head h3 {
  font-size:19px;
  font-weight:600;
  margin:10px 0 0;
  color:#264656;
}

.story-index-head>.muted {
  font-size:11px;
  padding-bottom:2px;
}

.story-grid {
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}

.story-card {
  border-radius:8px;
  box-shadow:0 4px 12px #26453606;
}

.story-card:hover {
  box-shadow:0 15px 28px #16344712;
}

.card-art {
  padding:21px 8px 0;
}

.card-art .story-visual {
  aspect-ratio:1.18;
  background-size:cover!important;
  background-position:center!important;
  border-radius:2px;
  mix-blend-mode:normal;
}

.card-art-1,.card-art-2 {
  background:#f0eee5;
}

.card-art-3 {
  background:#edf1e7;
}

.card-art-4 {
  background:#f2ece1;
}

.card-art-5 {
  background:#e9eff0;
}

.card-content {
  padding:17px 15px 14px;
}

.card-tag {
  font-size:9px;
  letter-spacing:.8px;
}

.story-card h3 {
  font-size:14px;
  line-height:1.55;
  min-height:67px;
  margin:8px 0 9px;
}

.story-card p {
  font-size:10px;
  line-height:1.75;
  min-height:54px;
  margin-bottom:13px;
}

.card-bottom {
  font-size:9px;
  align-items:center;
}

.card-source {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:calc(100% - 20px);
}

.source-note {
  margin-top:19px;
  text-align:left;
}

.art-memory {
  background-image:url('/assets/story-memory.jpg');
  background-size:cover!important;
  background-position:center!important;
  mix-blend-mode:normal;
  border-radius:2px;
}

.art-together {
  background-image:url('/assets/story-together.jpg');
  background-size:cover!important;
  background-position:center!important;
  mix-blend-mode:normal;
  border-radius:2px;
}

.storybook-loading {
  display:grid;
  place-items:center;
  min-height:500px;
  color:#819188;
  font-size:13px;
}

.story-visual.story-art-3,.story-visual.story-art-4,.story-visual.story-art-5 {
  background-size:contain!important;
  background-position:center!important;
  background-color:#fff;
}

@media(max-width:1050px) {
  .storybook-spread {
    gap:28px;
  }

  .storybook-copy h2 {
    font-size:27px;
  }

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

  .storybook-page {
    padding-inline:34px;
  }
}

@media(max-width:760px) {
  .section-signpost {
    padding-top:25px;
  }

  .storybook {
    margin-top:30px;
    padding:19px 16px 13px;
  }

  .storybook:before {
    inset:8px;
  }

  .storybook-ribbon {
    right:21px;
    font-size:9px;
    gap:8px;
    padding:7px 10px;
  }

  .storybook-ribbon span+span {
    padding-left:8px;
  }

  .storybook-page {
    min-height:0;
    padding:27px 23px 23px;
  }

  .storybook-spread {
    grid-template-columns:1fr;
    gap:26px;
    padding-top:24px;
  }

  .storybook-visual {
    min-height:0;
    aspect-ratio:1.25;
  }

  .storybook-copy h2 {
    font-size:26px;
  }

  .storybook-text {
    font-size:12px;
    line-height:1.95;
  }

  .storybook-controls {
    grid-template-columns:78px 1fr 60px 78px;
    gap:5px;
    padding-top:17px;
  }

  .page-control {
    font-size:10px;
  }

  .page-control span {
    display:none;
  }

  .page-control-next span {
    display:inline;
  }

  .storybook-ending {
    min-height:490px;
  }

  .storybook-ending .storybook-meta {
    inset:27px 23px auto;
  }

  .ending-content {
    padding:55px 9px 0;
  }

  .ending-content h2 {
    font-size:29px;
  }

  .story-index-head {
    margin-top:37px;
  }

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

  .story-card h3 {
    font-size:13px;
    min-height:0;
  }

  .story-card p {
    min-height:0;
  }

  .source-note {
    line-height:1.8;
  }
}

@media(max-width:520px) {
  .storybook-meta {
    font-size:9px;
  }

  .storybook-theme {
    font-size:9px;
  }

  .storybook-page-foot {
    display:block;
    line-height:1.8;
  }

  .storybook-page-foot span:last-child {
    display:block;
    margin-top:4px;
  }

  .storybook-quote {
    font-size:18px;
  }

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

  .card-art .story-visual {
    aspect-ratio:1.7;
  }

  .story-index-head {
    display:block;
  }

  .story-index-head>.muted {
    display:block;
    margin-top:6px;
  }

  .book-dots {
    gap:6px;
  }

  .book-dot {
    width:6px;
    height:6px;
  }

  .storybook-controls {
    grid-template-columns:56px 1fr 52px 56px;
  }
}

.participate-section {
  padding-block:56px;
  gap:64px;
}

.participate-copy h2 {
  margin:16px 0 18px;
}

.participate-copy .participate-lead {
  font-size:14px;
  color:#6f7f7b;
  line-height:1.9;
}

.participate-note {
  max-width:360px;
  margin:22px 0 0;
  color:#87938e;
  font-size:11px;
  line-height:1.9;
}

.restore-trigger {
  margin-top:22px;
}

.form-panel {
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

.form-heading {
  padding-bottom:14px;
  margin-bottom:22px;
  border-bottom:1px solid var(--line);
}

@media(max-width:1000px) {
  .participate-section {
    gap:38px;
  }

  .form-panel {
    padding:28px 0 0;
    border-top:1px solid var(--line);
  }
}

@media(max-width:680px) {
  .participate-section {
    gap:30px;
    padding-block:40px;
  }

  .participate-copy .participate-lead {
    font-size:13px;
  }

  .participate-note {
    margin-top:17px;
  }

  .form-panel {
    padding-top:26px;
  }
}