/* ============================================================
   RUGS DE INDISKA - Journal
   Page-specific styles. Reuses shared tokens, header, footer,
   loader, reveal and parallax behavior from styles.css.
   ============================================================ */

.journal-hero{
  position:relative;
  min-height:clamp(390px, 46vw, 560px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:#fff;
  background:var(--sand);
}
.journal-hero__media{
  position:absolute;
  inset:-10% 0;
  will-change:transform;
}
.journal-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 54%;
  animation:journalHeroIn 2.2s var(--ease) both;
}
@keyframes journalHeroIn{ from{ transform:scale(1.08); } to{ transform:none; } }
.journal-hero__scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(12,8,5,.76) 0%, rgba(12,8,5,.42) 42%, rgba(12,8,5,.12) 100%),
    linear-gradient(180deg, rgba(12,8,5,.46) 0%, rgba(12,8,5,.08) 48%, rgba(12,8,5,.24) 100%);
}
.journal-hero__inner{
  position:relative;
  z-index:2;
  padding-block:clamp(58px, 6vw, 88px);
}
.journal-hero__eyebrow{
  font-size:10px;
  margin-bottom:14px;
  opacity:0;
  animation:journalUp .9s var(--ease) .16s forwards;
}
.journal-hero__title{
  max-width:820px;
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(42px, 5.4vw, 72px);
  line-height:1.04;
  margin-bottom:12px;
  text-shadow:0 2px 34px rgba(0,0,0,.34);
  opacity:0;
  animation:journalUp 1s var(--ease) .3s forwards;
}
.journal-hero__copy{
  max-width:62ch;
  font-size:14px;
  line-height:1.65;
  color:rgba(255,255,255,.84);
  opacity:0;
  animation:journalUp 1s var(--ease) .46s forwards;
}
@keyframes journalUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
.has-loader:not(.loaded) .journal-hero__media img,
.has-loader:not(.loaded) .journal-hero__eyebrow,
.has-loader:not(.loaded) .journal-hero__title,
.has-loader:not(.loaded) .journal-hero__copy{ animation-play-state:paused; }

.journal-copy{
  max-width:54ch;
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.85;
}
.journal-link,
.journal-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.journal-link{
  color:var(--ink);
  margin-top:34px;
}
.journal-link svg,
.journal-btn svg{
  width:22px;
  height:11px;
  transition:transform .5s var(--ease);
}
.journal-link:hover svg,
.journal-btn:hover svg{ transform:translateX(6px); }
.journal-btn{
  margin-top:32px;
  padding:16px 34px;
  background:var(--navy);
  color:#fff;
  transition:background-color .45s var(--ease), transform .45s var(--ease);
}
.journal-btn:hover{ background:var(--navy-2); transform:translateY(-2px); }

/* ============================================================
   CRAFT FEATURE
   ============================================================ */
.journal-craft{
  padding-block:clamp(80px, 9vw, 134px);
}
.journal-craft__grid{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  align-items:center;
  gap:clamp(54px, 8vw, 112px);
}
.journal-craft__text .h2{ margin-bottom:32px; }
.journal-craft__quote{
  margin-bottom:30px;
  font-family:var(--ff-display);
  font-style:italic;
  font-size:clamp(17px, 1.6vw, 21px);
  line-height:1.5;
  color:var(--muted);
}
.journal-craft__media{
  position:relative;
  overflow:visible;
}
/* .journal-craft__media::after{
  content:"";
  position:absolute;
  left:-46px;
  bottom:-42px;
  width:230px;
  height:154px;
  border:1px solid var(--hair);
  z-index:-1;
} */
.journal-craft__media img{
  width:100%;
  aspect-ratio:1053 / 727;
  object-fit:cover;
}

/* ============================================================
   STORIES
   ============================================================ */
.journal-stories{
  background:var(--cream);
  padding-block:clamp(76px, 8vw, 120px);
}
.journal-stories__head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:clamp(52px, 6vw, 84px);
}
.journal-stories__head h2{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(30px, 3vw, 42px);
  line-height:1.15;
}
.journal-stories__head p{
  font-size:9px;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted-lt);
}
.story-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(24px, 3vw, 42px);
}
.story-card--lower{ margin-top:clamp(46px, 6vw, 74px); }
.story-card figure{
  overflow:hidden;
  background:var(--sand);
  margin-bottom:24px;
}
.story-card img{
  width:100%;
  aspect-ratio:552 / 736;
  object-fit:cover;
  transition:transform 1.4s var(--ease);
}
.story-card:hover img{ transform:scale(1.045); }
.story-card__meta{
  font-size:9px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:12px;
}
.story-card h3{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(22px, 2vw, 30px);
  line-height:1.2;
  margin-bottom:14px;
}
.story-card p:not(.story-card__meta){
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.75;
}

/* ============================================================
   DESIGN
   ============================================================ */
.journal-design{
  padding-block:clamp(84px, 9vw, 134px);
}
.journal-design .eyebrow{ margin-bottom:24px; }
.journal-design__media{
  overflow:hidden;
  background:var(--sand);
  margin-bottom:clamp(46px, 5vw, 64px);
}
.journal-design__media img{
  width:100%;
  aspect-ratio:1728 / 642;
  object-fit:cover;
}
.journal-design__grid{
  display:grid;
  grid-template-columns:1fr 390px;
  align-items:start;
  gap:clamp(48px, 8vw, 120px);
}
.journal-design__text .h2{
  margin-bottom:28px;
  max-width:20ch;
}
.design-notes{
  background:var(--cream);
  padding:36px 38px;
}
.design-notes__label{
  font-size:8.5px;
  font-weight:500;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:24px;
}
.design-notes h3{
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  margin-bottom:7px;
}
.design-notes p{
  font-size:11.5px;
  line-height:1.65;
  color:var(--muted);
}
.design-notes p + h3{ margin-top:24px; }

/* ============================================================
   PERSPECTIVE
   ============================================================ */
.journal-perspective{
  position:relative;
  overflow:hidden;
  background:var(--cream);
  padding-block:clamp(84px, 9vw, 136px);
  text-align:center;
}
.journal-perspective__mark{
  position:absolute;
  left:50%;
  top:50%;
  width:min(560px, 76vw);
  aspect-ratio:1;
  transform:translate(-50%, -50%) rotate(45deg);
  border:1px solid rgba(176,141,79,.12);
}
.journal-perspective__mark::before,
.journal-perspective__mark::after{
  content:"";
  position:absolute;
  inset:28px;
  border:1px solid rgba(176,141,79,.08);
}
.journal-perspective__mark::after{ inset:56px; }
.journal-perspective__inner{ position:relative; z-index:1; }
.journal-perspective .eyebrow{ margin-bottom:10px; }
.journal-perspective__num{
  font-family:var(--ff-display);
  font-size:clamp(30px, 3.8vw, 50px);
  color:var(--gold);
  line-height:1;
  margin-bottom:18px;
}
.journal-perspective blockquote{
  max-width:760px;
  margin:0 auto 42px;
  font-family:var(--ff-display);
  font-style:italic;
  font-size:clamp(28px, 3.1vw, 46px);
  line-height:1.18;
  color:var(--ink);
}
.journal-perspective__caption{
  font-size:9px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.journal-perspective__place{
  font-family:var(--ff-display);
  font-size:clamp(18px, 1.8vw, 24px);
  color:var(--muted);
}

@media (max-width:1180px){
  .journal-craft__grid{ gap:48px; }
  .journal-design__grid{ grid-template-columns:1fr 320px; }
}

@media (max-width:960px){
  .journal-craft__grid,
  .journal-design__grid{ grid-template-columns:1fr; }
  .journal-craft__media{ order:-1; }
  .journal-design__text .h2{ max-width:none; }
  .design-notes{ max-width:520px; }
}

@media (max-width:720px){
  .journal-hero{ min-height:clamp(400px, 74vh, 560px); }
  .journal-hero__title{ max-width:10ch; }
  .journal-hero__copy{ max-width:34ch; }
  .journal-stories__head{
    display:block;
    margin-bottom:38px;
  }
  .journal-stories__head h2{ margin-bottom:18px; }
  .story-grid{ grid-template-columns:1fr; }
  .story-card--lower{ margin-top:0; }
  .journal-craft__media::after{ display:none; }
  .journal-btn{ width:100%; justify-content:center; }
  .journal-perspective blockquote{ font-size:clamp(26px, 8vw, 36px); }
}

@media (prefers-reduced-motion:reduce){
  .journal-hero__media img,
  .journal-hero__eyebrow,
  .journal-hero__title,
  .journal-hero__copy{ animation:none; opacity:1; transform:none; }
}