/* ==========================================================================
   KATAID: Stories (blog)
   Loaded only on /stories pages, on top of style.css.
   Uses the site palette (same as Spaces & Rates): white page, paper page
   header, charcoal text, limewash footer.
   Yellow: the active nav underline (site default), the thin rule above
   the tagline, and the story card border on hover. No shadows.
   Sora everywhere except the tagline (Playfair Display Italic).

   Post layout
   - Phones and tablets: one reading column (680px max), photos in line.
   - Wide screens (1100px+): the reading column sits left, photos sit in a
     side column on the right, next to the text they belong to.
   ========================================================================== */

/* ---------- Shared chrome: keep yellow and shadows in check ---------- */
.stories-page .site-header.scrolled{ box-shadow: none; }
.stories-page .btn:hover,
.stories-page .btn:active{ box-shadow: none; }
.stories-page .btn-dark:hover{
  background: var(--white);
  color: var(--charcoal);
  border-color: var(--charcoal);
}

/* ---------- Frame ---------- */
.post-frame{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}
.post-col{ max-width: 680px; }

/* ---------- Post header (page-header band, like Spaces) ---------- */
.post-header{ padding: 44px 0 36px; }
.post-header .eyebrow:hover{ color: var(--charcoal); }
.post-header .h1{
  margin-top: 12px;
  font-size: clamp(2rem, 7.2vw, 2.9rem);
  line-height: 1.14;
}
.post-dek{
  margin-top: 16px;
  max-width: none;
  font-size: 1.125rem;
  line-height: 1.6;
  font-style: italic;
}
.post-meta{
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--ink-40);
}

/* Cover photo: under the title on small screens, beside it on wide ones */
.post-cover{ margin: 28px 0 0; }
.post-cover.is-portrait{ max-width: 440px; }
.post-cover img{
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  background: var(--paper);
}

/* ---------- Post body ---------- */
.post-body{
  padding-top: 40px;
  font-size: 1.0625rem;
  line-height: 1.8;
}
.post-body::after{ content: ""; display: block; clear: both; }
.post-body p{ margin: 0 0 1.25em; }
.post-body h2{
  margin: 2.1em 0 0.75em;
  font-size: clamp(1.35rem, 5vw, 1.7rem);
  line-height: 1.25;
}
.post-body h3{ margin: 1.8em 0 0.6em; font-size: 1.15rem; }
.post-body a{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.post-body strong{ font-weight: 600; }

.post-figure{ margin: 1.9em 0 2.1em; }
.post-figure.is-portrait{ max-width: 440px; }
.post-figure img{
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  background: var(--paper);
}
.post-figure-slot{
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  background: var(--paper);
  border: 1px solid var(--line);
}
.post-figure figcaption{
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--ink-60);
}

.post-quote{
  margin: 1.9em 0 2.1em;
  padding: 26px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.post-quote blockquote{ margin: 0; }
.post-quote blockquote p{
  margin: 0;
  font-size: 1.22rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--charcoal);
}
.post-quote figcaption{
  display: block;
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-60);
}

/* ---------- Tagline: thin yellow rule above it ---------- */
.tagline{
  clear: both;
  margin: 3.2em 0 0.5em;
  text-align: center;
}
.tagline-rule{
  display: block;
  width: 48px;
  height: 2px;
  margin: 0 auto 20px;
  background: var(--yellow);
}
.tagline-text{
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--charcoal);
}
.post-body .tagline-text{ margin: 0; }

.post-back{
  margin: 0;
  padding: 40px 0 80px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
}
.post-back a{
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

@media (min-width: 720px){
  .post-header{ padding: 60px 0 48px; }
  .post-body{ padding-top: 52px; font-size: 1.125rem; }
  .post-dek{ font-size: 1.2rem; }
  .post-quote{ padding: 32px 34px; }
  .post-quote blockquote p{ font-size: 1.35rem; }
}

/* ---------- Wide screens: reading column + photo column ---------- */
@media (min-width: 1100px){
  .post-frame{ max-width: 1120px; }
  .post-header.has-cover .post-head-grid{
    display: grid;
    grid-template-columns: 680px 360px;
    column-gap: 40px;
    align-items: center;
  }
  .post-header.has-cover .post-cover{ margin: 0; max-width: 360px; }
  /* Portrait photos move into the side column, next to their section */
  .post-body .post-figure.is-portrait{
    float: right;
    clear: right;
    width: 360px;
    max-width: none;
    margin: 0.35em -400px 1.5em 0;
  }
}

/* ---------- Stories index ---------- */
.stories-list{ padding: 56px 0 84px; }
.story-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.story-card a{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 0.4s var(--ease-soft), transform 0.5s var(--ease-soft);
}
/* Hover: yellow border, card and photo zoom in slightly. No shadow. */
.story-card a:hover,
.story-card a:focus-visible{
  border-color: var(--yellow);
  transform: scale(1.02);
}
.story-card-media{
  aspect-ratio: 1200 / 630;
  background: var(--paper);
  overflow: hidden;
}
.story-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-soft);
}
/* Cover photos keep their own shape (e.g. vertical) and show in full */
.story-card-media.has-cover{ aspect-ratio: auto; }
.story-card-media.has-cover img{ height: auto; object-fit: initial; }
.story-card a:hover .story-card-media img,
.story-card a:focus-visible .story-card-media img{ transform: scale(1.06); }
.story-card-body{ padding: 22px; }
.story-card-title{
  font-size: 1.2rem;
  line-height: 1.3;
}
.story-card-dek{
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink-60);
}
.story-card time{
  display: block;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--ink-40);
}
.stories-list .tagline{ margin-top: 72px; }

@media (min-width: 720px){
  .stories-list{ padding-top: 70px; }
  .story-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .story-grid{ grid-template-columns: repeat(3, 1fr); }
}