/* Journal page — base */
main{ padding-top: 68px; }

/* ===== SECTION 1: Journal Hero ===== */
.journal-hero{ padding: clamp(28px, 6vw, 72px) 0; }
.hero-grid{
  display:grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(16px, 3vw, 28px); align-items:center;
}
.hero-title{
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 3.4vw, 42px);
  margin: 0 0 10px 0;
  text-shadow: 0 2px 14px rgba(93,211,255,.15);
}
.hero-lead{ margin:0 0 8px 0; }
.hero-text{ color: var(--muted); margin:0 0 10px 0; }
.hero-points{ margin:0; padding-left:18px; color: var(--muted); }

.hero-mosaic{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(12px, 2vw, 18px);
}
.hero-mosaic .tile{
  grid-column: span 12; /* начнём по одному в ряд, потом усложним на десктопе */
  padding:10px; border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  transition: transform .25s ease;
}
.hero-mosaic .tile:hover{ transform: translateY(-6px); }
.hero-mosaic img{
  width:100%; max-width:350px; aspect-ratio: 16/11; object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
}
.hero-mosaic figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }

/* плавная диагональ «ступеньками» на широких */
@media (min-width: 980px){
  .hero-mosaic .tile:nth-child(1){ grid-column: 1 / span 7; }
  .hero-mosaic .tile:nth-child(2){ grid-column: 5 / span 7; }
  .hero-mosaic .tile:nth-child(3){ grid-column: 3 / span 7; }
}
@media (max-width: 1100px){ .hero-grid{ grid-template-columns: 1fr; } }

/* ===== SECTION 2: Notebook Reels ===== */
.notebook-reels{ padding: clamp(28px, 6vw, 72px) 0; }
.reel{
  display:flex; gap: clamp(14px, 2vw, 20px);
  overflow:auto; scroll-snap-type: x mandatory;
  padding: 0 clamp(16px, 3vw, 28px) clamp(10px, 2vw, 18px);
  -webkit-overflow-scrolling: touch;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.note-card{
  flex:0 0 auto; width:min(86vw, 350px); scroll-snap-align:start;
  margin:0; padding:12px; border-radius: calc(var(--radius) + 4px);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(700px 220px at 50% -15%, rgba(138,255,193,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.note-card figure{ margin:0; }
.note-card img{ width:100%; height:auto; border-radius: calc(var(--radius) - 4px); }
.note-card figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.note-card h3{ margin:10px 0 6px 0; font-size: clamp(16px, 2vw, 20px); }
.note-card p{ margin:0 0 8px 0; color: var(--muted); }
.tags{ display:flex; gap:8px; padding:0; margin:0; list-style:none; }
.tags li{
  font-size:12px; color:var(--ink);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 999px; padding: 4px 8px;
  transition: transform .15s ease, box-shadow .2s ease;
}
.tags li:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }

/* ===== SECTION 3: Soundscape Notes ===== */
.sound-notes{ padding: clamp(28px, 6vw, 72px) 0; }
.sound-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(14px, 2vw, 20px);
}
.sound-card{
  grid-column: span 6;
  padding:14px; border-radius: calc(var(--radius) + 4px);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(700px 220px at 50% -15%, rgba(93,211,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.sound-card figure{ margin:0; }
.sound-card img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.sound-card figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.sound-card h3{ margin:10px 0 6px 0; font-size: clamp(16px,2vw,20px); }
.sound-card p{ margin:0; color: var(--muted); }

.eq{
  display:flex; align-items:flex-end; gap:6px; margin-bottom:10px; height:20px;
}
.eq span{
  display:block; width:6px; height:10px; border-radius:2px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  animation: beat 1.2s ease-in-out infinite;
}
.eq span:nth-child(2){ animation-delay:.1s }
.eq span:nth-child(3){ animation-delay:.2s }
.eq span:nth-child(4){ animation-delay:.3s }
.eq span:nth-child(5){ animation-delay:.4s }
@keyframes beat{ 50%{ transform: scaleY(1.8); } }

@media (max-width: 980px){
  .sound-card{ grid-column: span 12; }
}
/* ===== SECTION 4: Bazaar Letters ===== */
.bazaar-letters{ padding: clamp(28px,6vw,72px) 0; }
.letters-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(14px,2vw,20px);
}
.letter-card{
  grid-column: span 6;
  position:relative; padding:14px; border-radius: calc(var(--radius) + 4px);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(700px 220px at 50% -15%, rgba(93,211,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.letter-card .envelope{
  position:absolute; inset:8px; border-radius:12px; pointer-events:none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%);
  opacity:.25;
}
.letter-card figure{ margin:0; }
.letter-card img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.letter-card figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.letter-card h3{ margin:10px 0 6px 0; font-size: clamp(16px,2vw,20px); }
.letter-card p{ margin:0; color:var(--muted); }
@media (max-width:980px){ .letter-card{ grid-column: span 12; } }

/* ===== SECTION 5: Rooflight Sketches ===== */
.rooflight{ padding: clamp(28px,6vw,72px) 0; }
.roof-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(14px,2vw,20px);
}
.roof-frame{ grid-column: span 6; }
.roof-glass{
  height: min(62vh, 520px);
  border-radius: 26px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  background-size: 24px 24px, auto;
  overflow:hidden; box-shadow: var(--shadow);
}
.roof-glass img{
  width:100%; height:100%; object-fit:cover; max-width:350px;
  transform: translateY(var(--roofPan,0)); transition: transform .6s ease;
}
.roof-frame:hover .roof-glass img{ --roofPan: -6%; }
.roof-frame figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
@media (max-width:980px){ .roof-frame{ grid-column: span 12; } }

/* ===== SECTION 6: Breakfast Essays ===== */
.breakfast-essays{ padding: clamp(28px,6vw,72px) 0; }
.breakfast-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(14px,2vw,20px);
}
.b-essay{
  grid-column: span 6; padding:14px; border-radius: calc(var(--radius) + 4px);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(700px 220px at 50% -15%, rgba(138,255,193,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.b-time{
  display:inline-block; font-size:12px; color:var(--muted);
  padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03); margin-bottom:8px;
}
.b-essay figure{ margin:0; }
.b-essay img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.b-essay figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.b-essay h3{ margin:10px 0 6px 0; font-size: clamp(16px,2vw,20px); }
.b-essay p{ margin:0; color:var(--muted); }
@media (max-width:980px){ .b-essay{ grid-column: span 12; } }
/* ===== SECTION 7: Stepwell Pages ===== */
.stepwell-pages{ padding: clamp(28px,6vw,72px) 0; }
.pages-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(14px,2vw,20px);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  padding: clamp(12px,2vw,16px);
}
.page{
  grid-column: span 6;
  padding:12px; border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  position:relative;
}
.page::after{
  /* мягкий «загиб страницы» */
  content:""; position:absolute; right:10px; top:10px; width:34px; height:34px;
  background: linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,0));
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity:.15;
}
.page-head{ font-size:12px; color:var(--muted); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.page-head .dot{ width:8px; height:8px; border-radius:50%; background: var(--brand-2); box-shadow:0 0 8px rgba(255,209,102,.5); }
.page figure{ margin:0; }
.page img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.page figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.page p{ margin:8px 0 0 0; color:var(--muted); }
@media (max-width:980px){ .page{ grid-column: span 12; } }

/* ===== SECTION 8: Ferry Receipts ===== */
.ferry-receipts{ padding: clamp(28px,6vw,72px) 0; }
.receipts{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(14px,2vw,20px);
}
.tape{
  grid-column: span 6; position:relative;
  padding:14px; border-radius: 14px;
  border:1px dashed rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.tape .tear{
  /* перфорация сверху */
  content:""; position:absolute; left:10px; right:10px; top:-1px; height:12px;
  background:
    radial-gradient(6px 6px at 0   50%, transparent 60%, rgba(255,255,255,.22) 61%) repeat-x,
    radial-gradient(6px 6px at 12px 50%, transparent 60%, rgba(255,255,255,.22) 61%) repeat-x;
  background-size: 12px 12px, 12px 12px;
  mask-image: linear-gradient(#000, #000);
  opacity:.5;
}
.t-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.stamp{
  font-size:11px; letter-spacing:1px; padding:4px 8px; border-radius:6px;
  border:1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
}
.t-photo{ margin:0; }
.t-photo img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: 10px; }
.t-photo figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.t-lines{ margin:8px 0 0 0; padding-left:18px; color:var(--muted); }
@media (max-width:980px){ .tape{ grid-column: span 12; } }

/* ===== SECTION 9: Cedar Margins ===== */
.cedar-margins{ padding: clamp(28px,6vw,72px) 0; }
.cedar-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(16px,3vw,28px);
}
.cm-text{ color:var(--muted); }
.cm-bullets{ margin:10px 0 0 0; padding-left:18px; color:var(--muted); }
.cm-pics{ display:flex; flex-direction:column; gap: clamp(12px,2vw,16px); }
.cm-shot{
  margin:0; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow: var(--shadow);
}
.cm-shot img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.cm-shot figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
@media (max-width:1020px){ .cedar-grid{ grid-template-columns: 1fr; } }
/* ===== SECTION 10: Ghat Footnotes ===== */
.ghat-footnotes{ padding: clamp(28px,6vw,72px) 0; }
.ghat-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(14px,2vw,20px);
}
.g-note{
  grid-column: span 6;
  padding:14px; border-radius: calc(var(--radius) + 4px);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(700px 220px at 50% -15%, rgba(93,211,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow); position:relative;
}
.fn-head{
  font-size:12px; color:var(--muted); margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.fn-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background: var(--brand-2); box-shadow:0 0 10px rgba(255,209,102,.6);
  animation: fnpulse 1.8s ease-in-out infinite;
}
@keyframes fnpulse { 50%{ transform: scale(1.4); opacity:.7 } }
.g-note figure{ margin:0; }
.g-note img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.g-note figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.g-note p{ margin:8px 0 0 0; color:var(--muted); }
@media (max-width:980px){ .g-note{ grid-column: span 12; } }

/* ===== SECTION 11: Streetlight Essays ===== */
.streetlight-essays{ padding: clamp(28px,6vw,72px) 0; position:relative; }
.neon-ribbon{
  height: 8px; margin: 0 clamp(16px,3vw,28px) 10px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(93,211,255,.6), rgba(138,255,193,.6));
  filter: blur(1px);
  animation: glowshift 6s ease-in-out infinite alternate;
}
@keyframes glowshift{ 50%{ filter: blur(3px); opacity:.7 } }
.street-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(14px,2vw,20px);
}
.street-card{
  grid-column: span 6; padding:14px; border-radius: calc(var(--radius) + 4px);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(700px 220px at 50% -15%, rgba(255,209,102,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  transition: transform .25s ease;
}
.street-card:hover{ transform: translateY(-6px); }
.street-card figure{ margin:0; }
.street-card img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.street-card figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.street-card h3{ margin:10px 0 6px 0; font-size: clamp(16px,2vw,20px); }
.street-card p{ margin:0; color:var(--muted); }
@media (max-width:980px){ .street-card{ grid-column: span 12; } }

/* ===== SECTION 12: Railway Margins ===== */
.railway-margins{ padding: clamp(28px,6vw,72px) 0; }
.rail-grid{
  display:grid; grid-template-columns: 220px 1fr; gap: clamp(16px,3vw,28px);
}
.rail-time{
  border:1px solid rgba(255,255,255,.08); border-radius: calc(var(--radius) + 6px);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  padding:10px;
}
.rail-time ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.rail-time li{
  font-size:12px; color:var(--muted); padding-left:14px; position:relative;
}
.rail-time li::before{
  content:""; position:absolute; left:0; top:6px; width:8px; height:8px; border-radius:50%;
  background: var(--brand); box-shadow:0 0 8px rgba(93,211,255,.65);
}

.rail-cards{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(14px,2vw,20px);
}
.rail-card{
  grid-column: span 6; padding:14px; border-radius: calc(var(--radius) + 4px);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(700px 220px at 50% -15%, rgba(138,255,193,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.rail-card figure{ margin:0; }
.rail-card img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.rail-card figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.rail-card h3{ margin:10px 0 6px 0; font-size: clamp(16px,2vw,20px); }
.rail-card p{ margin:0; color:var(--muted); }

@media (max-width:1020px){
  .rail-grid{ grid-template-columns: 1fr; }
  .rail-card{ grid-column: span 12; }
}
/* ===== SECTION 13: Courtyard Sketchbook ===== */
.courtyard-sketch{ padding: clamp(28px,6vw,72px) 0; }
.court-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(14px,2vw,20px);
}
.court-tile{
  grid-column: span 4; margin:0; padding:10px;
  border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow); position:relative; transition: transform .25s ease;
}
.court-tile:hover{ transform: translateY(-6px); }
.court-tile::after{
  /* тонкая «карандашная» линия внизу тайла */
  content:""; position:absolute; left:10px; right:10px; bottom:8px; height:2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 10px, transparent 10px 18px);
  opacity:.5;
}
.court-tile img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.court-tile figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
/* Лёгкая «лестница» по колонкам */
.court-tile:nth-child(1){ grid-column: 1 / span 4; }
.court-tile:nth-child(2){ grid-column: 3 / span 4; }
.court-tile:nth-child(3){ grid-column: 6 / span 4; }
@media (max-width:1100px){ .court-tile{ grid-column: 1 / -1; } }

/* ===== SECTION 14: Postcards Not Sent ===== */
.unsent-postcards{ padding: clamp(28px,6vw,72px) 0; }
.pc-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(14px,2vw,20px);
}
.pc-card{
  grid-column: span 4; position:relative; padding:12px; border-radius: 14px;
  border:1px dashed rgba(255,255,255,.18);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.pc-card figure{ margin:0; }
.pc-card img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: 10px; }
.pc-card figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.pc-card p{ margin:8px 0 0 0; color:var(--muted); }
.pc-stamp{
  position:absolute; right:10px; top:10px;
  font-size:11px; letter-spacing:1px; padding:4px 8px; border-radius:50px;
  border:1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  transform: rotate(-8deg);
  box-shadow: 0 0 0 2px rgba(255,255,255,.04) inset;
  animation: stampblink 3.6s ease-in-out infinite;
}
@keyframes stampblink{ 50%{ transform: rotate(-8deg) scale(1.06); } }
@media (max-width:1100px){ .pc-card{ grid-column: span 12; } }

/* ===== SECTION 15: Four Quiet Things ===== */
.four-quiet{ padding: clamp(28px,6vw,72px) 0; }
.fq-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(14px,2vw,20px);
}
.fq-card{
  grid-column: span 6; padding:14px; border-radius: calc(var(--radius) + 4px);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(700px 220px at 50% -15%, rgba(138,255,193,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow); transition: transform .25s ease;
}
.fq-card:hover{ transform: translateY(-6px); }
.fq-card figure{ margin:0; }
.fq-card img{ width:100%; max-width:350px; aspect-ratio:16/11; object-fit:cover; border-radius: calc(var(--radius) - 4px); }
.fq-card figcaption{ font-size:12px; color:var(--muted); margin-top:6px; }
.fq-card h3{ margin:10px 0 6px 0; font-size: clamp(16px,2vw,20px); }
.fq-card p{ margin:0; color:var(--muted); }
@media (max-width:980px){ .fq-card{ grid-column: span 12; } }