/* Layout refinements after Marina's review. Text scales live in site.css. */

/* The opening carries a larger signature, with room reserved for the menu. */
.site-header.over-photo .brand { flex: 0 1 280px; width: 280px; min-width: 0; height: auto; }
.site-header.over-photo .brand img { width: 100%; height: auto; }
.site-header.over-photo .menu-toggle { flex-shrink: 0; }

/* Give every grid column a real minimum of zero, including long article text. */
.earth-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
.time-story { grid-template-columns: repeat(2,minmax(0,1fr)); }
.meaning-section { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
.inner-hero { grid-template-columns: repeat(2,minmax(0,1fr)); }
.earth-grid > *, .time-story > *, .field-board > *, .letters-section > *,
.meaning-section > *, .journal-grid > *, .article-layout > *, .diary-entry > * { min-width: 0; }
.button, .text-link { max-width: 100%; min-height: 44px; }
.button { text-align: center; }
.journal-links { flex-wrap: wrap; }
.prose a, .team-grid a { overflow-wrap: anywhere; }
.article-aside a { padding-block: .5rem; }

/* Annotations have their own rows. Contour lines exist only around the photo. */
.hero {
  display: grid;
  grid-template-columns: minmax(0,1.65fr) minmax(0,1fr);
  column-gap: clamp(3rem,6vw,7rem);
  row-gap: 4rem;
  align-content: center;
  align-items: center;
  padding: 11rem var(--gutter) 2.5rem;
}
.hero-content { width: auto; max-width: 100%; padding: 0; }
.hero h1 { font-size: clamp(4.5rem,7.7vw,8rem); }
.hero-intro { max-width: 33ch; }
.hero-notebook {
  position: relative; top: auto; right: auto; display: block;
  width: 100%; max-width: 370px; margin: 2rem auto 0;
}
.hero-notebook .hand-note {
  margin: 0 0 1.5rem; text-align: center; transform: none;
  font-size: 2.24rem; line-height: 1.3;
}
.hero-notebook figure { margin: 0; transform: none; }
.hero-photo-art { position: relative; padding: 1.25rem 1.6rem 1.7rem; isolation: isolate; }
.hero-photo-art .original-contour { inset: 0; z-index: -1; opacity: .75; }
.hero-notebook figure img { width: 100%; aspect-ratio: 1.14; transform: rotate(4deg); }
.hero-notebook figcaption { margin: 1.5rem 0 0; line-height: 1.35; }
.hero-bottom {
  position: static; grid-column: 1 / -1; margin-top: 1rem;
  flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
}
.hero-bottom a { min-height: 44px; }
.landscape-plane { left: 50%; transform: translate(-50%,-50%); }
.hand-illustration {
  display: block; width: min(100%,310px); height: auto;
  margin: 2.25rem 0 0; opacity: 1;
}

/* Reserve room for both the ink and the enlarged caption. */
.illustrated .photo-art { margin-bottom: calc(16% + 1.5rem); }
.illustrated > figcaption { padding-inline: 0; }
.earth-collage { padding-left: 5%; }
.earth-collage .collage-detail { width: 57%; margin-bottom: 1.5rem; }
.forest-window { transform: none; }
.earth-collage .forest-window figcaption { line-height: 1.6; }
.collage-detail { transform: translateY(var(--float-y,0px)) rotate(3deg); }
.field-board { grid-template-columns: repeat(3,minmax(0,1fr)); }
.field-photo { transform: translateY(var(--float-y,0px)) rotate(-2deg); }
.field-photo.second { transform: translateY(var(--float-y,0px)) rotate(2deg); }
.field-photo figcaption { margin-top: 1.5rem; }
.inner-hero-art { padding-left: 2rem; }
.inner-hero-art .illustrated { transform: none; }
.inner-hero-art .illustrated > figcaption { transform: none; padding-inline: .5rem; }
.comparison-images { aspect-ratio: 16/9; }
.comparison figcaption { flex-wrap: wrap; line-height: 1.6; }
.comparison-images .after { will-change: clip-path; }

/* Full photograph + brand green, following the supplied composition. */
.letters-section { grid-template-columns: repeat(2,minmax(0,1fr)); background: var(--green); color: var(--paper); }
.letters-image {
  margin: 0; min-height: 0; mask: none; -webkit-mask: none;
  display: grid; align-items: center; overflow: hidden;
}
.letters-image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.letters-copy { padding: clamp(2.5rem,5vw,6rem); }
.letters-copy h2 { max-width: 16ch; }
.letters-copy h2 em { color: var(--gold); }
.letters-copy p:not(.eyebrow) { max-width: 33ch; }
.letters-copy .text-link { display: table; color: var(--paper); line-height: 1.6; }
.letters-copy .letters-primary {
  display: flex; width: fit-content; align-items: center; gap: 2rem;
  margin-top: 2.5rem; padding-bottom: .6rem; font-size: 1.3rem;
}
.letters-copy .text-link:hover { color: var(--gold); }

/* A clear footer hierarchy; the motto stays on one line. */
.site-footer { padding-block: 4.5rem 2.5rem; }
.footer-top { gap: 2.5rem; flex-wrap: wrap; padding-bottom: 3.5rem; }
.footer-brand { display: block; flex: 0 1 320px; }
.footer-top img { width: 320px; max-width: 100%; height: auto; }
.footer-top p {
  white-space: nowrap; font-size: clamp(1rem,4.3vw,2.925rem);
  line-height: 1.4; letter-spacing: -.035em;
}
.footer-columns {
  display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.3fr) minmax(0,1fr);
  gap: 3rem; border-top: 1px solid var(--line); padding: 3rem 0;
}
.footer-group { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; min-width: 0; }
.footer-group h2 {
  font: 500 1.05rem/1.5 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--green); margin-bottom: .8rem;
}
.footer-group a, .footer-group p { font: 400 1.3rem/1.65 var(--sans); }
.footer-group a { min-height: 44px; padding-block: .3rem; max-width: 100%; overflow-wrap: anywhere; }
.footer-group a:hover { text-decoration: underline; text-underline-offset: .3em; }
.footer-utility {
  border-top: 1px solid var(--line); display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between; gap: 1.5rem; padding-top: 2rem;
}
.footer-utility .motion-toggle { font: 400 1.17rem/1.6 var(--sans); min-height: 44px; }
.footer-utility .review-note { padding: 0; flex-wrap: wrap; gap: .6rem 1.5rem; font-size: 1rem; }
.review-note a { min-height: 44px; display: inline-flex; align-items: center; }

/* Open the touch navigation before its enlarged labels run out of room. */
@media (max-width: 1320px) {
  .site-header { min-height: 100px; padding-block: 1rem; }
  .brand, .brand img { width: 150px; flex-basis: 150px; height: 62px; }
  .site-header.over-photo .brand { flex-basis: 220px; width: 220px; }
  .site-header.over-photo nav { max-height: calc(100dvh - 142px); }
  .menu-toggle { display: flex; align-items: center; gap: 1rem; font: 500 1.3rem/1.5 var(--sans); min-height: 48px; padding: .7rem 0; }
  .menu-toggle span { font-size: 1.35rem; }
  .site-header nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    padding: 1.5rem var(--gutter) 2rem; background: var(--paper); color: var(--green);
    max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 18px 25px rgba(0,30,20,.12);
  }
  .menu-open .site-header nav { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; }
  .site-header nav a { font-size: 1.69rem; padding: .8rem 0; }
  .site-header nav a:last-child { border: 0; }
  .site-header nav a::after { display: none; }
  .hero { column-gap: 3rem; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
  .hero h1 { font-size: clamp(3.8rem,7.7vw,6rem); }
  .hero-notebook .hand-note { font-size: 1.76rem; }
  .hero-notebook figcaption { font-size: 1.76rem; }
  .field-board { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .field-text { grid-column: 1 / -1; max-width: 650px; margin: 2rem auto 0; }
  .letters-copy { padding: 2.5rem; }
  .letters-copy h2 { font-size: clamp(2.6rem,4vw,3.4rem); }
}

@media (max-width: 900px) {
  .hero { column-gap: 2rem; padding-top: 10rem; }
  .hero-notebook { margin-top: 1rem; }
  .hero-photo-art { padding-inline: 1rem; }
  .earth-grid { gap: 3rem; }
  .time-story { gap: 3rem; }
  .letters-section { grid-template-columns: 1fr; }
  .letters-image > img { position: static; width: 100%; height: auto; object-fit: contain; }
  .letters-copy { padding: 3rem var(--gutter) 4rem; }
  .letters-copy h2 { font-size: clamp(2.7rem,6.5vw,4rem); max-width: 20ch; }
  .letters-copy p:not(.eyebrow) { max-width: 40ch; }
  .footer-columns { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem; }
  .footer-group:last-child { grid-column: 1 / -1; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .footer-brand { flex-basis: auto; }
  .footer-top img { width: 280px; }
}

@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0,1fr); row-gap: 3rem; min-height: 100svh; padding-top: 10rem; }
  .hero h1 { font-size: clamp(3.5rem,12vw,6rem); max-width: 12ch; }
  .hero-intro { max-width: 35ch; }
  .hero-notebook { max-width: 320px; width: 90%; margin: 0 auto; }
  .hero-notebook .hand-note { font-size: 1.76rem; }
  .hero-bottom { margin-top: 0; }
  .hero-bottom > span { display: none; }
  .hero-shade { background: linear-gradient(90deg,rgba(6,35,25,.65),rgba(6,35,25,.3)),linear-gradient(180deg,rgba(6,35,25,.2),rgba(6,35,25,.42)); }
  .earth-grid, .time-story, .meaning-section, .inner-hero { grid-template-columns: minmax(0,1fr); }
  .earth-grid { gap: 2.5rem; }
  .earth-collage { max-width: 540px; width: 95%; padding-bottom: 0; margin: auto; }
  .earth-copy { padding-top: 0; }
  .earth-copy h3 { max-width: 24ch; }
  .hand-illustration { width: min(85%,310px); margin: 2rem 0 0; }
  .forest-note { max-width: 440px; width: 100%; margin: auto; }
  .field-board { grid-template-columns: minmax(0,1fr); gap: 3rem; padding-bottom: 0; }
  .field-photo, .field-photo.second { max-width: 460px; width: 90%; margin: 0 auto; transform: none; }
  .field-text { grid-column: auto; margin: 0; max-width: none; }
  .field-photo .photo-surface { aspect-ratio: 1.1; }
  .field-observation { max-width: 220px; }
  .meaning-section { gap: 3rem; }
  .meaning-visual { order: 2; max-width: 320px; width: 100%; margin: auto; }
  .araucaria-illustration { max-height: 330px; }
  .journal-grid, .journal-grid:has(.journal-card:nth-child(4)) { grid-template-columns: minmax(0,1fr); gap: 3rem; }
  .journal-grid .journal-card:nth-child(3) { grid-column: auto; max-width: none; margin: 0; }
  .journal-card h3 { font-size: 2rem; max-width: 30ch; }
  .inner-hero { gap: 3rem; min-height: 0; padding-top: 3rem; padding-bottom: 3rem; }
  .inner-hero h1 { font-size: clamp(2.8rem,9vw,4.5rem); }
  .inner-hero-art { width: 92%; max-width: 560px; margin: auto; padding: 0; }
  .team-grid { grid-template-columns: minmax(0,1fr); gap: 3.5rem; }
  .team-grid .team-portrait { max-width: 360px; }
  .newsletter-invite { grid-template-columns: minmax(0,1fr); gap: 2rem; }
  .newsletter-invite > img { width: min(85%,280px); max-width: 280px; margin: auto; }
}

@media (max-width: 600px) {
  .section-pad { padding-block: 3.5rem; }
  .hero-notebook figcaption { font-size: 1.76rem; }
  .hero h1 { font-size: clamp(3.2rem,12vw,4.5rem); }
  .hero-content .eyebrow { max-width: 29ch; line-height: 1.7; }
  .hero-bottom a { font-size: 1.04rem; flex-wrap: wrap; gap: .75rem; }
  .hero-photo-art { padding: 1.1rem 1rem 1.5rem; }
  .earth-collage .collage-detail { width: 65%; transform: translateY(var(--float-y,0px)); }
  .earth-collage .forest-window figcaption { font-size: 1.2rem; }
  .comparison-images { aspect-ratio: 4/3; }
  .comparison figcaption, .prose .comparison figcaption { font-size: 1.2rem; flex-direction: column; gap: .5rem; }
  .year { top: .7rem; font-size: .975rem; padding: .3rem .65rem; }
  .year-after { left: .7rem; } .year-before { right: .7rem; }
  .compare-line span { flex-basis: 52px; height: 52px; }
  .time-story { gap: 3rem; }
  .time-section .section-heading h2 { font-size: clamp(2.25rem,8.5vw,2.6rem); }
  .time-section .lede { font-size: 1.56rem; }
  .inner-hero-art .photo-surface { aspect-ratio: 1.15; }
  .inner-hero-art .illustrated > figcaption { font-size: 1.84rem; padding-inline: 0; }
  .field-photo.illustrated > figcaption { font-size: 1.6rem; }
  .letters-copy h2 { font-size: clamp(2.4rem,9vw,3rem); }
  .letters-copy .text-link { font-size: 1.17rem; }
  .letters-copy .letters-primary { font-size: 1.3rem; }
  .footer-top { padding-bottom: 2.5rem; }
  .footer-top img { width: 250px; }
  .footer-columns { grid-template-columns: minmax(0,1fr); gap: 2.5rem; padding-block: 2.5rem; }
  .footer-group:last-child { grid-column: auto; }
  .footer-utility { flex-direction: column; gap: 1.5rem; }
  .footer-utility .review-note { flex-direction: column; align-items: flex-start; }
  .article-aside { gap: .5rem 1.25rem; }
  .article-aside a { min-height: 44px; margin: 0; }
  .prose .comparison { width: 100%; margin-inline: 0; }
  .prose table { max-width: 100%; }
  .prose blockquote { margin-inline: 0; padding-inline: 1rem; font-size: 2rem; }
  .diary-entry .article-gallery { grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
  .diary-entry .article-gallery .article-photo:last-child:nth-child(odd) { grid-column: auto; }
  .diary-entry .article-gallery img, .diary-entry .article-gallery .article-photo:last-child:nth-child(odd) img { height: auto; max-height: none; }
}

@media (max-width: 380px) {
  .site-header { gap: 1rem; }
  .brand, .brand img { flex-basis: 140px; width: 140px; }
  h2 { font-size: 2.35rem; }
  .hero { padding-top: 9rem; }
  .hero-notebook { width: 100%; }
  .button { padding-inline: 1.1rem; }
  .footer-top img { width: 230px; }
  .article-title h1 { font-size: 2.35rem; }
  .prose h2 { font-size: 2rem; }
}