/* p-linnea.css: /linnea/ "Samma skog, andra år". The two women in the forest, then three objects laced together:
   the picture books, the film of the two women winding yarn, the Väven cover. */
:root { --ln-w: min(1120px, calc(100vw - 2 * var(--gut))); }

/* hero: the photo on the left this time, the forest the books and the novel share ----------- */
.ln-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  min-height: min(calc(100svh - var(--banner) - var(--bar)), 900px); overflow: clip;
}
.ln-hero-pic { position: relative; overflow: hidden; }
.ln-hero-pic img { position: absolute; inset: -4% 0; width: 100%; height: 108%; object-fit: cover; object-position: 50% 45%; will-change: transform; }
.ln-hero-copy { align-self: center; padding: var(--s8) var(--gut) var(--s7) var(--s8); display: grid; gap: var(--s5); }
.ln-hero .t-h1 { font-size: clamp(60px, 6.4vw, 108px); line-height: .95; }
.ln-lead { max-width: 28ch; font-size: 21px; line-height: 32px; }

/* the run of three objects ------------------------------------------------------------------ */
.ln-run { width: var(--ln-w); margin: var(--s9) auto 0; }
.ln-obj { position: relative; }

.ln-books { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); padding: var(--s7) 0; }
.ln-book { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.ln-book img { width: 200px; height: auto; box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 20px 30px -14px rgba(0,0,0,.7); }
.ln-book-text { display: grid; gap: var(--s3); padding-top: var(--s3); }
.ln-book-title { font: 500 28px/1.15 var(--f-display); }
.ln-year { display: block; font: 500 14px/20px var(--f-chrome); letter-spacing: .02em; color: var(--soft); margin-top: var(--s2); }
.ln-book blockquote p { font: italic 400 19px/29px var(--f-text); color: var(--text); }

/* seams: two yarns lace the edges together as the next object arrives (drawn in p-linnea.js) */
.ln-seam { position: relative; height: 128px; margin: var(--s3) 0; }
.ln-lace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.ln-film { margin: 0; }
.ln-film-frame { position: relative; aspect-ratio: 16 / 9; background: #2a2e2a center / cover no-repeat; overflow: hidden; }
.ln-video { width: 100%; height: 100%; object-fit: cover; }
.ln-film figcaption { margin-top: var(--s3); }

/* close: the Väven cover and a paper sheet on the full-bleed winter forest (calm, the woman on the left).
   The bottom zone is exactly the last screen under the bar (viewport - footer - bar, footer measured into --p1-foot),
   so the last screen opens on photo; the top zone (>= one footer) makes the close >= 100svh - bar. */
.ln-close { position: relative; display: grid; grid-template-rows: minmax(var(--p1-foot, 261px), auto) minmax(calc(100svh - var(--p1-foot, 261px) - var(--bar)), auto); }
.ln-close-pic { position: absolute; inset: 0; overflow: hidden; margin: 0; }
.ln-close-pic img { position: absolute; inset: -5% 0; width: 100%; height: 110%; object-fit: cover; object-position: 50% 40%; will-change: transform; }
.ln-close-top { position: relative; }
.ln-close-zone { position: relative; display: flex; align-items: flex-end; padding-bottom: var(--s6); }
.ln-close-row { width: var(--ln-w); margin: 0 auto; display: flex; justify-content: flex-end; align-items: flex-end; gap: var(--s6); }
.ln-cover { margin: 0; }
.ln-cover img { box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 26px 40px -16px rgba(0,0,0,.75); }
.ln-cover-phone { display: none; }
.ln-cover-wide img { height: min(430px, calc(100svh - var(--p1-foot, 261px) - var(--bar) - 64px)); width: auto; }
.ln-sheet { width: min(560px, 100%); padding: var(--s5) var(--s6); display: grid; gap: var(--s3); justify-items: start; }
.ln-sheet .t-h2 { color: var(--ink); font-size: 38px; }
.ln-sheet p { max-width: 52ch; font-size: 18px; line-height: 28px; }
.ln-buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.ln-price { font: 500 24px/30px var(--f-display); }
.ln-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.ln-links .stitch-link { font-size: 15px; }

/* the summer print: a second year lying on the autumn photo's corner (small, far from the cover) */
.ln-print { position: absolute; z-index: 2; left: calc(58.333% - 170px); top: 48px; width: 300px; margin: 0; padding: 8px 8px 22px; background: var(--paper-hi); transform: rotate(-2.2deg); box-shadow: 0 2px 0 rgba(0,0,0,.3), 0 22px 34px -14px rgba(0,0,0,.75); will-change: transform; }
.ln-print img { width: 100%; height: auto; }
.ln-run { padding-bottom: var(--s3); }

@media (max-width: 1100px) and (min-width: 761px) {
  .ln-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ln-hero-copy { padding-left: var(--s7); }
  .ln-print { left: calc(50% - 150px); width: 240px; }
  .ln-hero .t-h1 { font-size: 64px; }
  .ln-books { grid-template-columns: 1fr; }
  .ln-close-top { width: var(--ln-w); margin: 0 auto; padding: var(--s7) 0 var(--s5); }
  .ln-cover-phone { display: block; }
  .ln-cover-phone img { width: 220px; height: auto; }
  .ln-cover-wide { display: none; }
}
@media (max-width: 760px) {
  .ln-hero { display: block; min-height: 0; }
  .ln-hero-pic { height: 450px; }
  .ln-hero-copy { padding: var(--s5) var(--gut) var(--s6); gap: var(--s4); }
  .ln-hero .t-h1 { font-size: 54px; line-height: 1; }
  .ln-lead { font-size: 17px; line-height: 27px; }
  .ln-run { margin-top: var(--s7); }
  .ln-books { grid-template-columns: 1fr; gap: var(--s7); padding: var(--s4) 0; }
  .ln-book { grid-template-columns: 130px minmax(0, 1fr); gap: var(--s4); }
  .ln-book img { width: 130px; }
  .ln-book-title { font-size: 23px; }
  .ln-book blockquote p { font-size: 17px; line-height: 26px; }
  .ln-seam { height: 88px; }
  .ln-close-top { display: flex; padding: var(--s7) var(--gut) var(--s5); }
  .ln-cover-phone { display: block; }
  .ln-cover-phone img { width: 190px; height: auto; }
  .ln-cover-wide { display: none; }
  .ln-close-zone { padding-bottom: var(--s4); }
  .ln-sheet { width: 100%; padding: var(--s4); gap: var(--s2); }
  .ln-sheet .t-h2 { font-size: 27px; line-height: 1.1; }
  .ln-sheet p { font-size: 17px; line-height: 26px; }
  .ln-buy { flex-wrap: nowrap; gap: var(--s3); }
  .ln-price { font-size: 19px; line-height: 24px; }
  .ln-buy .btn-buy { padding: 0 18px; flex: none; }
  .ln-links { gap: 0 var(--s4); }
  .ln-links .stitch-link { font-size: 14px; }
  .ln-print { left: calc(50% - 50px); top: 8px; width: 112px; padding: 4px 4px 10px; }
}