/* HootBook's journal story, in KUON's existing paper, ink and graphite system. */
.shiori-page .legal-hero { width: min(calc(100% - 48px), 1200px); max-width: 1200px; padding-top: 48px; }
.shiori-page .legal-hero .announcement-frame { display: grid !important; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 48px; padding: 28px 0 48px !important; }
.shiori-page .announcement-copy { min-width: 0; }
.shiori-page .legal-hero .story-wordmark { display: flex; align-items: center; gap: 10px; margin: 18px 0 30px; font: 600 38px/1 'EB Garamond', Georgia, serif !important; letter-spacing: -.025em; text-transform: none; }
.shiori-page .story-wordmark img { width: 46px; height: 46px; mix-blend-mode: multiply; }
.shiori-page .announcement-copy > .story-promise { font: 700 clamp(40px, 4.3vw, 62px)/1.02 'Barlow Condensed', sans-serif !important; text-transform: uppercase; letter-spacing: -.01em; color: #171713; margin: 0 0 26px; max-width: none !important; }
.shiori-page .story-promise em { font-style: normal; color: #74172b; }
.shiori-page .announcement-copy > .story-invitation { font: 19px/1.65 Georgia, serif !important; max-width: 46ch !important; margin: 0; }
.shiori-page .hootbook-actions { gap: 12px; margin-top: 28px; }
.shiori-page .hootbook-actions .button { font-size: 13px; min-height: 48px; padding-inline: 18px; }
.shiori-page .story-study { position: relative; width: 100%; max-width: 430px; margin: 0 auto; }
.shiori-page .story-study .book { width: 90%; height: auto; margin-left: auto; mix-blend-mode: multiply; }
.shiori-page .story-study .perch { position: absolute; width: 24.15%; height: auto; right: 14.9%; top: 9.6%; mix-blend-mode: multiply; transform: rotate(4deg); }
.shiori-page .story-study figcaption { text-align: center; margin-top: 10px; font: 500 12px/1.6 'IBM Plex Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #74172b; }
.shiori-page .legal-content { border-top: 0; padding-top: 20px; }
.shiori-page .article-body .story-opening { margin-top: 0 !important; }
.shiori-page .article-body .story-detail { font: 15px/1.7 'IBM Plex Sans', sans-serif !important; color: #514d45 !important; }
.shiori-page .story-product { width: calc(100% + 160px); max-width: calc(100vw - 48px); margin: 38px -80px 48px; }
.shiori-page .story-product a { display: block; padding: 10px; border: 1px solid #8f8a80; background: #f1eadf; box-shadow: 5px 5px 0 #d9d2c4; }
.shiori-page .story-product img { display: block; width: 100%; height: auto; }
.shiori-page .story-product figcaption { margin: 12px 0 0; font: 13px/1.6 'IBM Plex Sans', sans-serif; color: #514d45; }
.shiori-page .hootbook-calendar-figure { max-width: 540px; margin: 30px auto 42px; }
.shiori-page .article-body a:focus-visible { outline: 3px solid #74172b; outline-offset: 5px; }
.shiori-page .story-cta { font: 600 15px/1.6 'IBM Plex Sans', sans-serif; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .shiori-page .legal-hero .announcement-frame { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 24px; }
  .shiori-page .announcement-copy > .story-promise { font-size: 44px !important; }
  .shiori-page .story-product { width: 100%; max-width: 100%; margin-inline: 0; }
}
@media (max-width: 640px) {
  .shiori-page .legal-hero { width: calc(100% - 40px); padding-top: 12px; padding-bottom: 22px; }
  .shiori-page .legal-hero .announcement-frame { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px 0 30px !important; }
  .shiori-page .legal-hero .story-wordmark { font-size: 34px !important; margin-bottom: 24px; }
  .shiori-page .story-wordmark img { width: 40px; height: 40px; }
  .shiori-page .announcement-copy > .story-promise { font-size: clamp(36px, 9.8vw, 46px) !important; max-width: 24ch !important; }
  .shiori-page .story-promise br { display: none; }
  .shiori-page .announcement-copy > .story-invitation { font-size: 18px !important; }
  .shiori-page .story-study { max-width: 280px; }
  .shiori-page .legal-content { padding-top: 12px; }
  .shiori-page .article-body h2 { font-size: 30px !important; }
  .shiori-page .story-product { margin-block: 28px 36px; }
  .shiori-page .story-product a { padding: 6px; box-shadow: 3px 3px 0 #d9d2c4; }
}