/* Final layer: loaded last, after journey.css, journal-playful.css and
   journal-diary.css, so these breakpoints are the last word at equal specificity.

   Rules that a later component sheet owns were removed rather than forced:
   - hero title + .scene-title mobile sizing lives in journey.css
   - .hotel-strips sizing lives in journal-playful.css
   - .reef-sequence / .reef-frame / .reef-curtain sizing lives in
     components.css and journal-playful.css (the sticky scroll scene)
   Generic .photo-strips heights were dropped here because they also matched
   .reef-curtain and cut the curtain short of its frame. */

@media(min-width:1700px) {
  .hero .title-destination {
    font-size:22rem
  }

  .photo-full {
    max-height:1100px
  }

  .section-large {
    padding-block:10rem
  }

}

@media(max-width:1100px) {
  :root {
    --space-7:6rem;
    --space-6:4.5rem
  }

  .intro-grid {
    gap:3rem
  }

  .chapter-copy {
    gap:3rem
  }

  .kuranda-grid {
    gap:2.5rem
  }

  .night-scene {
    gap:2.5rem
  }

  .food-grid {
    gap:1.5rem
  }

  .route-summary {
    gap:2rem
  }

  .lab-icons {
    grid-template-columns:repeat(4,1fr)
  }

  .photo-full {
    min-height:550px
  }

  .hero {
    min-height:650px
  }

  .night-scene .photo {
    height:550px
  }

}

/* The drop-down menu: a stacked panel, not a squeezed row. Phones and small
   tablets share it, so the header bar never has to fit the whole navigation. */
@media(max-width:760px) {
  .menu-toggle {
    display:block;
    min-height:44px
  }

  .site-nav {
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    flex-direction:column;
    align-items:flex-start;
    gap:.85rem;
    background:var(--color-ink);
    padding:1rem var(--gutter);
    border-top:1px solid #ffffff30
  }

  .site-header.menu-open .site-nav {
    display:flex
  }

  .site-nav a {
    padding-block:.35rem
  }

  .site-nav .lang-switch {
    margin-left:0;
    margin-top:.25rem
  }

}

@media(max-width:760px) {
  :root {
    --gutter:1.5rem;
    --space-6:3.75rem;
    --space-7:4.5rem
  }

  .site-header {
    padding-block:1rem
  }

  .site-nav {
    gap:1.3rem
  }

  .hero {
    height:calc(var(--journal-svh, 1svh) * 92);
    min-height:630px
  }

  .hero-title>.meta {
    font-size:.7rem
  }

  .hero-side {
    display:none
  }

  .hero-bottom {
    bottom:1.7rem
  }

  .hero-index {
    display:none
  }

  .hero-bottom .info-location {
    max-width:160px
  }

  .hero-bottom .info-location small {
    font-size:.7rem
  }

  .hero-bottom .info-location strong {
    font-size:.65rem
  }

  .scroll-cue {
    font-size:.65rem;
    gap:.6rem
  }

  .intro-grid,.chapter-copy,.kuranda-grid,.night-scene,.route-summary {
    grid-template-columns:1fr;
    gap:2.5rem
  }

  .intro-copy {
    max-width:none
  }

  .intro-grid .title-editorial {
    font-size:clamp(2.5rem,8vw,4rem)
  }

  .trip-meta {
    gap:1rem 1.5rem;
    margin-top:2rem
  }

  .chapter-nav {
    grid-template-columns:1fr 1fr;
    margin-top:2rem
  }

  .chapter-nav a {
    padding-block:1.2rem;
    border-bottom:1px solid var(--color-line)
  }

  .chapter-nav strong {
    font-size:.9rem
  }

  .chapter-head>.meta {
    display:none
  }

  .chapter-head {
    margin-bottom:1.5rem
  }

  .title-day {
    gap:1rem
  }

  .title-day>span {
    padding-right:1rem
  }

  .scene-title {
    bottom:2rem
  }

  .scene-title h3 {
    font-size:3rem
  }

  .photo-full {
    height:calc(var(--journal-svh, 1svh) * 65);
    min-height:440px
  }

  .photo-caption {
    left:1.25rem;
    right:1.25rem;
    bottom:1.25rem
  }

  .chapter-copy {
    padding-top:2rem;
    gap:1.5rem
  }

  .kuranda-grid .photo-card {
    aspect-ratio:4/3
  }

  .kuranda-copy .title-editorial {
    margin-top:1rem
  }

  .small-strip {
    margin-top:2.5rem
  }

  .small-strip .photo {
    height:280px
  }

  .reef-intro {
    padding-bottom:2.5rem
  }

  .reef-intro .title-editorial {
    font-size:clamp(2.6rem,9vw,4rem)
  }

  .reef-word {
    bottom:2.5rem
  }

  .reef-word h3 {
    font-size:3rem
  }

  .ocean-note {
    top:6rem;
    font-size:.7rem
  }

  .photo-split {
    gap:.5rem
  }

  .photo-split>.photo {
    min-height:320px
  }

  .night-scene {
    padding-block:4rem
  }

  .night-scene .photo {
    height:480px
  }

  .night-scene>div:first-child {
    max-width:560px
  }

  .food-grid {
    grid-template-columns:1fr 1fr;
    gap:2rem 1rem;
    margin-top:2rem
  }

  .food-grid article:nth-child(2) {
    padding-top:2.5rem
  }

  .food-grid article:nth-child(3) {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    padding-top:0;
    align-items:center
  }

  .food-grid article:nth-child(3) .photo {
    height:260px
  }

  .food-grid h3 {
    font-size:1.05rem
  }

  .food-grid .annotation {
    font-size:1.8rem
  }

  .memory-grid {
    gap:.6rem;
    grid-template-columns:1fr
  }

  .memory-grid>.photo,.memory-grid>.photo:first-child {
    height:420px;
    grid-row:auto
  }

  .memory-grid>.photo:not(:first-child) {
    height:300px
  }

  .route-summary .route-diagram {
    padding-top:0
  }

  .route-mobile-list {
    display:flex;
    list-style:none;
    padding:0;
    margin:1rem 0;
    gap:.5rem;
    flex-wrap:wrap;
    font-size:.75rem;
    color:var(--color-muted)
  }

  .route-mobile-list li:not(:last-child):after {
    content:' →';
    color:var(--color-accent)
  }

  .gallery-top {
    display:block
  }

  .gallery-top p {
    margin-top:1rem
  }

  .journal-gallery {
    grid-template-columns:1fr 1fr;
    gap:.75rem
  }

  .journal-gallery .photo {
    height:330px
  }

  .journal-gallery .photo:nth-child(2) {
    height:250px;
    margin-top:3rem
  }

  .journal-gallery .photo:nth-child(3) {
    grid-column:1/-1;
    height:300px;
    margin-top:0
  }

  .journal-wide {
    height:360px;
    margin-top:.75rem
  }

  .closing {
    height:calc(var(--journal-svh, 1svh) * 70);
    min-height:500px
  }

  .closing-content .title-destination {
    font-size:8rem
  }

  .lab-grid {
    grid-template-columns:1fr
  }

  .lab-icons {
    grid-template-columns:repeat(3,1fr)
  }

  .lab-stage {
    padding:1.25rem
  }

  .lab-section {
    padding-block:3rem
  }

  .lab-nav {
    gap:1rem
  }

  .lab-stage .photo-strips.four {
    grid-template-columns:repeat(4,1fr)
  }

  .lab-stage .photo-strips.four>.photo {
    height:220px
  }

  footer {
    align-items:start;
    flex-direction:column;
    gap:1rem
  }

  .route-summary .route-label {
    font-size:15px;
    letter-spacing:.5px
  }

  .route-summary .route-label-small {
    font-size:12px
  }

}

@media(max-width:440px) {
  .brand {
    font-size:.95rem
  }

  .title-day h2 {
    font-size:1.4rem
  }

  .photo-split>.photo {
    min-height:280px
  }

  .food-grid p {
    font-size:.8rem
  }

  .food-grid article:nth-child(3) .photo {
    height:220px
  }

  .lab-icons {
    grid-template-columns:1fr 1fr
  }

  .lab-stage .title-day {
    gap:.7rem
  }

  .lab-stage .title-day h3 {
    font-size:1.2rem
  }

  .lab-stage .title-day>span {
    padding-right:.7rem
  }

  .lab-stage .statistic {
    font-size:4rem
  }

  .lab-stage .photo-split>.photo {
    min-height:0
  }

  .route-inline .route-label {
    font-size:14px;
    letter-spacing:0
  }

  .hero-bottom .info-location .travel-icon {
    display:none
  }

}

@media(max-width:760px) {
  .route-inline .route-label {
    font-size:18px;
    letter-spacing:0
  }

  .route-inline .route-label-small {
    font-size:15px
  }

  .route-summary .route-label {
    font-size:24px;
    letter-spacing:0
  }

  .route-summary .route-label-small {
    font-size:19px
  }

  .reef-word .route-label {
    font-size:17px;
    letter-spacing:0
  }

}

.lab-stage .route-label {
  font-size:20px;
  letter-spacing:0
}

.lab-stage .route-label-small {
  font-size:17px
}

.lab-stage svg[viewBox="0 0 660 400"] .route-label {
  font-size:26px
}

.lab-stage svg[viewBox="0 0 660 400"] .route-label-small {
  font-size:22px
}


@media(max-width:1000px) {
  .personal-journal .chapter-nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .personal-journal .chapter-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .personal-journal .hero-title>.meta { letter-spacing:.22em; }
  .personal-journal .hero .hero-title { margin-top:calc(var(--journal-svh, 1svh) * 20); padding-inline:1rem; }
  .personal-journal .hero-subtitle { max-width:20rem; margin-inline:auto; }
  .personal-journal .arrival-details { grid-template-columns:1fr; gap:2rem; }
  .personal-journal .chapter-details,.personal-journal .keepsake-pair,.personal-journal .paronella-details { grid-template-columns:1fr; gap:2rem; }
  .personal-journal .balloon-view { aspect-ratio:4/3; }
  .personal-journal .homecoming { gap:2rem; }
  .personal-journal .route-summary .route-label { font-size:16px; }
  .personal-journal .route-summary .route-label-small { font-size:12px; }
  .personal-journal .food-grid { grid-template-columns:1fr; gap:2rem; }
  .personal-journal .food-grid article:nth-child(n) { padding-top:0; display:block; }
  .personal-journal .food-grid article:nth-child(3) .photo { height:auto; }
  .personal-journal .menu-toggle { min-height:44px; }
}