/* TYPOGRAPHY */
.title-destination {
  font-family:var(--font-script);
  font-weight:400;
  line-height:.95;
  font-size:clamp(6rem,20vw,21rem);
  letter-spacing:-.045em;
  transform:rotate(-5deg)
}

.title-editorial {
  font-size:clamp(2.5rem,5.2vw,5.4rem);
  letter-spacing:-.055em;
  line-height:1.09
}

.title-editorial em {
  font-style:normal;
  color:var(--color-muted)
}

.title-day {
  display:flex;
  gap:1.5rem;
  align-items:center
}

.title-day>span {
  padding-right:1.5rem;
  border-right:1px solid var(--color-line);
  font-size:.75rem;
  letter-spacing:.15em;
  line-height:1.5;
  flex-shrink:0
}

.title-day strong {
  display:block;
  font-size:2rem;
  font-weight:300;
  letter-spacing:-.04em
}

.title-day h2,.title-day h3 {
  font-size:clamp(1.4rem,2.7vw,2.6rem);
  letter-spacing:-.04em
}

.title-explore {
  font-size:clamp(3rem,8vw,8rem);
  line-height:.95;
  letter-spacing:-.065em;
  font-weight:300
}

.title-explore strong {
  display:block;
  font-weight:800
}

.statistic {
  font-size:clamp(4rem,8vw,8rem);
  line-height:1;
  font-weight:300;
  letter-spacing:-.08em
}

.annotation {
  font-family:var(--font-script);
  font-size:2.4rem;
  line-height:1.1;
  transform:rotate(-6deg)
}

/* NAVIGATION */
.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  padding:.85rem var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:white;
  transition:transform 180ms ease-out,opacity 180ms ease-out,background var(--motion-fast);
  background:linear-gradient(rgba(0,0,0,.28),transparent)
}

.site-header.is-scrolled,.lab-page .site-header {
  background:var(--color-ink)
}

.site-header.is-hidden {
  transform:translateY(-110%);
  opacity:0;
  pointer-events:none;
}

.site-header:has(:focus-visible), .site-header.menu-open {
  transform:none;
  opacity:1;
  pointer-events:auto;
}

.brand {
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-.04em;
  display:flex;
  gap:.75rem;
  align-items:center
}

.brand-mark {
  border:1px solid currentColor;
  border-radius:50%;
  width:1.75rem;
  height:1.75rem;
  display:grid;
  place-items:center
}

.brand-mark svg {
  width:1.1rem;
  height:1.1rem
}

.site-nav {
  display:flex;
  gap:1.5rem;
  align-items:center;
  font-size:.78rem
}

.site-nav a {
  position:relative;
  padding:.35rem 0
}

.site-nav a:after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:1px;
  background:var(--color-accent);
  transition:width var(--motion-fast)
}

.site-nav a:hover:after,.site-nav a[aria-current]:after {
  width:100%
}

.menu-toggle {
  display:none;
  background:transparent;
  border:1px solid #ffffff70;
  padding:.4rem .7rem;
  font-size:.8rem
}

.reading-progress {
  position:absolute;
  bottom:0;
  left:0;
  height:2px;
  width:100%;
  background:var(--color-accent);
  transform:scaleX(0);
  transform-origin:left
}

/* PHOTOGRAPHY */
.photo {
  position:relative;
  overflow:hidden;
  background:#254e4c;
  isolation:isolate
}

.photo>img {
  position:absolute;
  inset:0;
  object-position:var(--photo-position,center)
}

.photo-circle {
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden
}

.photo-card {
  aspect-ratio:3/4;
  border-radius:var(--radius-card)
}

.photo-landscape {
  aspect-ratio:16/9;
  border-radius:var(--radius-card)
}

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

.photo-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-2)
}

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

.photo-strips {
  display:grid;
  grid-template-columns:repeat(var(--strips,3),1fr);
  gap:var(--space-2)
}

.photo-strips>.photo {
  height:540px
}

.photo-strips.four {
  --strips:4
}

.photo-collage {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:2rem;
  align-items:start;
  padding-block:2rem
}

.photo-collage>.photo:nth-child(2) {
  margin-top:5rem
}

.photo-shade:after {
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 15%,transparent 40%,rgba(0,0,0,.58))
}

.photo-caption {
  position:absolute;
  z-index:2;
  left:2rem;
  bottom:2rem;
  right:2rem;
  color:white;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem
}

.photo-caption small {
  display:block;
  letter-spacing:.08em;
  font-size:.75rem;
  margin-top:.3rem
}

.floating-label {
  position:absolute;
  z-index:2;
  left:1.4rem;
  bottom:1.4rem;
  background:var(--color-paper);
  color:var(--color-ink);
  padding:.8rem 1rem;
  display:flex;
  gap:.75rem;
  align-items:center;
  max-width:calc(100% - 2.8rem)
}

.floating-label .meta {
  font-size:.7rem
}

.floating-label small {
  display:block;
  font-size:.7rem;
  letter-spacing:0
}

.photo-number {
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em
}

.image-credit {
  font-size:.75rem;
  color:var(--color-muted);
  margin-top:.5rem
}

/* ICONS & INFORMATION */
.travel-icon {
  width:1.5rem;
  height:1.5rem;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  flex-shrink:0
}

.info-location {
  display:flex;
  align-items:center;
  gap:.9rem
}

.info-location strong {
  display:block;
  font-size:.75rem;
  letter-spacing:.16em
}

.info-location small {
  font-size:.8rem
}

.info-weather {
  display:grid;
  grid-template-columns:auto auto;
  column-gap:1rem;
  align-items:center
}

.info-weather .statistic {
  font-size:4.5rem
}

.info-weather .weather-detail {
  grid-column:1/-1;
  font-size:.75rem;
  margin-top:.7rem;
  display:flex;
  gap:.5rem;
  align-items:center
}

.info-weather .weather-detail svg {
  width:1rem;
  height:1rem
}

.info-weather .meta {
  font-size:.7rem
}

.info-itinerary {
  border-left:2px solid var(--color-accent);
  padding-left:1rem
}

.info-itinerary strong {
  font-size:1.4rem;
  display:block;
  font-weight:500
}

.info-bubble {
  border:1px solid var(--color-line);
  padding:.75rem 1.1rem;
  border-radius:.5rem;
  position:relative
}

.info-bubble:after {
  content:'';
  position:absolute;
  bottom:-6px;
  left:20px;
  width:10px;
  height:10px;
  border-bottom:1px solid var(--color-line);
  border-right:1px solid var(--color-line);
  transform:rotate(45deg);
  background:var(--color-ink)
}

.info-checklist {
  list-style:none;
  padding:0;
  margin:1rem 0 0
}

.info-checklist li {
  display:flex;
  gap:.6rem;
  align-items:center;
  font-size:.85rem;
  padding:.3rem 0
}

.info-checklist svg {
  width:1rem;
  height:1rem;
  color:var(--color-accent)
}

.info-calendar {
  width:100%;
  max-width:300px;
  border-collapse:collapse;
  font-size:.75rem;
  text-align:center
}

.info-calendar caption {
  text-align:left;
  font-size:.8rem;
  letter-spacing:.12em;
  margin-bottom:1rem;
  font-weight:600
}

.info-calendar th {
  font-size:.65rem;
  font-weight:500;
  opacity:.65
}

.info-calendar td {
  width:14.28%;
  height:2rem
}

.info-calendar .travel-day {
  background:var(--color-accent);
  color:var(--color-ink)
}

/* ROUTES: normalize path length in HTML for a predictable draw. */
.route {
  width:100%;
  overflow:visible;
  color:inherit
}

.route-line {
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  vector-effect:non-scaling-stroke
}

.route-dot {
  fill:var(--color-accent);
  stroke:var(--color-ink);
  stroke-width:3
}

.route-label {
  fill:currentColor;
  font-family:var(--font-sans);
  font-size:12px;
  letter-spacing:1.5px
}

.route-label-small {
  font-size:10px;
  letter-spacing:.5px;
  opacity:.7
}

.route-dotted .route-line {
  stroke:var(--color-accent);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:1 9
}

.route-inline {
  max-width:460px;
  margin-block:1.75rem
}

.route-diagram {
  padding:3rem 0 1rem
}

.route-summary {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:5rem;
  align-items:center
}

.route-summary .meta {
  margin-bottom:1.5rem
}

.route-mobile-list {
  display:none
}

/* JOURNAL COMPOSITIONS */
.hero {
  height:calc(var(--journal-svh, 1svh) * 100);
  min-height:720px;
  max-height:1200px;
  color:white;
  display:grid;
  place-items:center
}

.hero:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,#041d3155,transparent 40%,#001e2b9c)
}

.hero .hero-title {
  position:relative;
  z-index:2;
  text-align:center;
  margin-top:-2rem
}

.hero-title>.meta {
  letter-spacing:.48em;
  font-size:.75rem
}

.hero-title h1 {
  margin:.5rem 0 2rem;
  text-shadow:0 2px 30px #063c4a20
}

.hero-subtitle {
  font-size:.8rem;
  letter-spacing:.06em;
  line-height:1.9
}

.hero-side {
  position:absolute;
  left:var(--gutter);
  top:44%;
  z-index:2;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:.65rem;
  letter-spacing:.2em
}

.hero-bottom {
  position:absolute;
  z-index:2;
  bottom:2.4rem;
  left:var(--gutter);
  right:var(--gutter);
  display:flex;
  align-items:end;
  justify-content:space-between
}

.hero-bottom .meta {
  font-size:.65rem
}

.scroll-cue {
  display:flex;
  gap:1rem;
  align-items:center
}

.scroll-cue span {
  border:1px solid #ffffff80;
  border-radius:50%;
  height:2.5rem;
  width:2.5rem;
  display:grid;
  place-items:center
}

.hero-index {
  display:flex;
  align-items:center;
  gap:1rem
}

.hero-index i {
  display:block;
  width:80px;
  height:1px;
  background:#ffffff65
}

.hero-index i:before {
  content:'';
  display:block;
  width:20%;
  height:1px;
  background:var(--color-accent)
}

.intro-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:7rem;
  align-items:center
}

.intro-copy {
  max-width:470px
}

.intro-copy .meta {
  margin-top:1.2rem
}

.trip-meta {
  margin-top:3rem;
  padding-top:1.5rem;
  border-top:1px solid var(--color-line);
  display:flex;
  gap:2rem;
  flex-wrap:wrap
}

.trip-meta>span {
  display:flex;
  gap:.6rem;
  align-items:center;
  font-size:.75rem
}

.trip-meta svg {
  width:1.2rem;
  height:1.2rem
}

.chapter-nav {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:4rem;
  border-top:1px solid var(--color-line)
}

.chapter-nav a {
  display:flex;
  flex-direction:column;
  padding:1.5rem 1.5rem 1rem 0;
  gap:1rem;
  position:relative
}

.chapter-nav a:after {
  content:'';
  height:2px;
  width:0;
  background:var(--color-accent-ink);
  position:absolute;
  top:-1px;
  transition:width var(--motion-fast)
}

.chapter-nav a:hover:after {
  width:90%
}

.chapter-nav span {
  font-size:.7rem;
  color:var(--color-muted);
  letter-spacing:.15em
}

.chapter-nav strong {
  font-size:1.05rem;
  font-weight:500
}

.chapter-nav svg {
  position:absolute;
  right:1.5rem;
  top:1.5rem;
  width:1rem;
  height:1rem
}

.chapter-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:2.5rem;
  gap:2rem
}

.scene-title {
  position:absolute;
  inset:auto var(--gutter) 4rem;
  z-index:2;
  color:white;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:2rem
}

.scene-title h3 {
  font-size:clamp(3rem,7vw,7rem);
  letter-spacing:-.055em
}

.chapter-copy {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8rem;
  padding-top:3.5rem;
  align-items:start
}

.chapter-copy h3 {
  font-size:clamp(1.8rem,3.2vw,3rem);
  letter-spacing:-.045em
}

.margin-note {
  font-size:.75rem;
  margin-top:1.5rem;
  color:var(--color-muted)
}

.kuranda-grid {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:4.5rem;
  align-items:center
}

.kuranda-grid .photo-card {
  aspect-ratio:4/5;
  border-radius:0
}

.kuranda-copy .title-editorial {
  margin:2rem 0
}

.kuranda-copy .route-label {
  font-size:11px
}

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

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

.section-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--color-line);
  padding-top:1rem;
  margin-bottom:2.5rem;
  gap:1rem
}

.reef-intro {
  text-align:center;
  padding-bottom:4rem
}

.reef-intro .title-editorial {
  font-size:clamp(3.3rem,7vw,7rem)
}

.reef-intro p {
  max-width:500px;
  margin:1.5rem auto 0;
  color:var(--color-muted)
}

.reef-sequence {
  height:calc(var(--journal-svh, 1svh) * 155);
  position:relative
}

.reef-frame {
  position:sticky;
  top:0;
  height:calc(var(--journal-svh, 1svh) * 100);
  min-height:540px;
  overflow:hidden
}

.reef-frame>.photo {
  height:100%;
  width:100%
}

.reef-curtain {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  z-index:3;
  gap:5px;
  pointer-events:none
}

.reef-curtain .photo {
  height:100%;
  transition:transform var(--motion-cinematic) var(--ease-out-cinematic);
  transition-delay:calc(var(--i)*100ms)
}

.reef-sequence.is-merged .reef-curtain .photo {
  transform:translateY(-105%)
}

.reef-trigger {
  position:absolute;
  top:calc(var(--journal-svh, 1svh) * 60);
  height:1px;
  width:1px
}

.reef-word {
  position:absolute;
  z-index:2;
  left:var(--gutter);
  bottom:5rem;
  color:white
}

.reef-word h3 {
  font-size:clamp(3rem,7vw,7rem);
  letter-spacing:-.05em;
  line-height:1
}

.reef-word .meta {
  margin-bottom:1.5rem
}

.reef-word .route {
  width:280px;
  margin-top:2rem
}

.ocean-note {
  position:absolute;
  z-index:2;
  top:7rem;
  right:var(--gutter);
  color:white;
  border-top:1px solid #ffffff80;
  padding-top:1rem
}

.reef-copy {
  padding-top:3rem
}

.night-scene {
  min-height:760px;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  position:relative;
  gap:5rem;
  align-items:center;
  padding-block:7rem
}

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

.night-scene .title-editorial {
  margin-block:2rem
}

.night-scene .annotation {
  color:#eac788;
  margin-top:2rem
}

.night-photo img {
  filter:brightness(.45) saturate(.7)
}

.night-photo:after {
  background:linear-gradient(0deg,#08101066,#10232211)
}

.night-disclosure {
  font-size:.7rem;
  opacity:.7;
  padding-top:.5rem
}

.food-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr 1fr;
  gap:3rem;
  align-items:start;
  margin-top:4rem
}

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

.food-grid article:nth-child(3) {
  padding-top:1.5rem
}

.food-grid .photo {
  aspect-ratio:4/5
}

.food-grid article:nth-child(2) .photo {
  aspect-ratio:1;
  border-radius:50%
}

.food-grid h3 {
  font-size:1.2rem;
  letter-spacing:-.025em;
  margin:1.5rem 0 .5rem
}

.food-grid p {
  font-size:.85rem;
  color:var(--color-muted);
  line-height:1.8
}

.food-grid .annotation {
  margin-top:1.5rem;
  color:var(--color-accent-ink)
}

.memory-grid {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:1.5rem;
  margin-top:3rem
}

.memory-grid>.photo {
  height:320px
}

.memory-grid>.photo:first-child {
  grid-row:span 2;
  height:100%
}

.memory-caption strong {
  font-size:1.15rem;
  font-weight:500;
  display:block
}

.memory-caption p {
  font-size:.8rem;
  margin-top:.3rem
}

.memory-caption .photo-number {
  display:block;
  margin-bottom:.7rem;
  color:var(--color-accent)
}

.gallery-top {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:2rem
}

.journal-gallery {
  margin-top:3rem;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1.5rem;
  align-items:start
}

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

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

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

.journal-wide {
  margin-top:1.5rem;
  height:520px
}

.closing {
  height:calc(var(--journal-svh, 1svh) * 85);
  min-height:600px;
  display:grid;
  place-items:center;
  text-align:center;
  color:white
}

.closing-content {
  position:relative;
  z-index:2
}

.closing-content .title-destination {
  font-size:clamp(7rem,17vw,17rem);
  margin:1.5rem 0 2rem
}

.closing:after {
  background:linear-gradient(180deg,#001e2840,#001e2850 55%,var(--color-ink))
}

/* STYLE LAB */
.lab-page main {
  padding-top:8rem
}

.lab-intro {
  max-width:780px
}

.lab-intro p {
  margin-top:1.5rem;
  color:var(--color-muted)
}

.lab-controls {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:2rem
}

.lab-button {
  background:transparent;
  border:1px solid var(--color-line);
  padding:.65rem 1rem;
  font-size:.8rem;
  transition:background var(--motion-fast)
}

.lab-button:hover {
  background:var(--color-accent);
  color:var(--color-ink)
}

.lab-nav {
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-top:3rem;
  padding-bottom:2rem;
  border-bottom:1px solid var(--color-line);
  font-size:.8rem
}

.lab-section {
  padding-block:4rem;
  border-bottom:1px solid var(--color-line)
}

.lab-section>h2 {
  font-size:2rem;
  letter-spacing:-.04em;
  margin-bottom:2rem
}

.lab-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem
}

.lab-example {
  min-width:0;
  border:1px solid var(--color-line)
}

.lab-stage {
  min-height:220px;
  padding:2rem;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  overflow:hidden
}

.lab-stage.dark {
  min-height:260px
}

.lab-stage .title-destination {
  font-size:6rem
}

.lab-stage .title-editorial {
  font-size:2.5rem
}

.lab-stage .title-explore {
  font-size:4rem
}

.lab-stage .photo {
  width:100%;
  height:220px
}

.lab-stage .photo-circle {
  width:200px;
  height:200px;
  flex-shrink:0
}

.lab-stage .photo-card {
  height:260px;
  width:195px
}

.lab-stage .photo-split,.lab-stage .photo-strips,.lab-stage .photo-collage {
  width:100%;
  gap:.5rem
}

.lab-stage .photo-split>.photo,.lab-stage .photo-strips>.photo {
  height:240px;
  min-height:0
}

.lab-stage .photo-collage {
  padding:0
}

.lab-stage .photo-collage>.photo {
  width:100%;
  height:220px
}

.lab-stage .photo-collage>.photo:nth-child(2) {
  margin-top:2rem
}

.lab-detail {
  padding:1.25rem;
  border-top:1px solid var(--color-line)
}

.lab-detail h3 {
  font-size:1rem;
  margin-bottom:.5rem
}

.lab-detail>code {
  font-size:.75rem;
  color:var(--color-accent-ink)
}

.lab-detail pre {
  background:#e8e6e0;
  padding:1rem;
  margin:1rem 0 0;
  max-height:160px;
  overflow:auto
}

.lab-detail .lab-button {
  margin-top:1rem
}

.lab-icons {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1rem
}

.icon-sample {
  border:1px solid var(--color-line);
  padding:1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8rem;
  font-size:.75rem
}

.icon-sample pre {
  font-size:.65rem;
  width:100%
}

.lab-stage>.info-location,.lab-stage>.info-itinerary {
  color:var(--color-paper)
}

.lab-stage .route {
  max-width:460px
}

.lab-stage .photo-full {
  min-height:0
}

.lab-hint {
  margin-bottom:1.5rem;
  color:var(--color-muted);
  font-size:.9rem
}

.lab-stage .light-surface {
  position:relative;
  width:100%;
  height:240px;
  overflow:hidden
}

.lab-stage .light-surface img {
  position:absolute;
  inset:0
}

.credits-list {
  font-size:.85rem;
  line-height:1.8
}

.credits-list li {
  margin-block:1rem
}

.credits-list a {
  text-decoration:underline
}

/* Keep intrinsic aspect ratios from forcing grid tracks wider than their container. */
.photo {
  min-width:0
}

.journal-gallery .photo-circle {
  width:100%;
  height:auto!important;
  aspect-ratio:1
}

.hero>img {
  transform:scale(1.08)
}

.photo>img[src*="hero-cairns"] {
  transform:scale(1.08)
}

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


/* Personal journal: reuse the existing compositions and preserve natural photo frames. */
.personal-journal .chapter-nav { grid-template-columns:repeat(5,minmax(0,1fr)); }
.personal-journal .chapter-nav span { padding-right:1rem; }
.personal-journal .hero { --photo-position:53% 50%; }
.personal-journal .hero .hero-title { align-self:start; margin-top:calc(var(--journal-svh, 1svh) * 18); }
.personal-journal .trip-quote { margin:2rem 0 0; padding:0; }
.personal-journal .trip-quote p:first-child { font-size:1.15rem; }
.personal-journal .trip-quote p+p,.personal-journal .trip-quote cite { font-size:.8rem; color:var(--color-muted); }
.personal-journal .trip-quote cite { display:block; margin-top:.5rem; font-style:normal; }
.personal-journal [lang="ja"] { font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; line-height:1.8; line-break:strict; }
.personal-journal .detail-photo { height:auto; aspect-ratio:4/3; }
.personal-journal .arrival-details>figure { height:auto; min-width:0; }
.personal-journal .chapter-details { margin-top:3rem; gap:3rem; align-items:center; }
.personal-journal .balloon-view { aspect-ratio:4/5; }
.personal-journal .paronella-details { padding-bottom:5rem; gap:1.5rem; }
.personal-journal .reef-portrait { max-width:1000px; margin-inline:auto; }
.personal-journal .reef-portrait .photo { aspect-ratio:4/3; }
.personal-journal .keepsake-pair { margin-top:3rem; gap:2rem; }
.personal-journal .keepsake-pair .photo { aspect-ratio:4/3; }
.personal-journal .keepsake-note { max-width:42rem; margin-block:2rem; }
.personal-journal .homecoming-photo { aspect-ratio:3/4; }
.personal-journal .homecoming { align-items:center; }
.personal-journal .food-grid .photo { aspect-ratio:4/3; border-radius:var(--radius-card); }
.personal-journal .food-grid article:nth-child(2) .photo { aspect-ratio:4/3; border-radius:var(--radius-card); }
.personal-journal .route-summary .route-label { font-size:12px; letter-spacing:.5px; }
.personal-journal .route-summary .route-label-small { font-size:10px; }