/* p-home.css: Home. Acts: hero (planes) > bridge > grief (hard cut) > peak "Året vävs in" > author > close. */

/* ---------------- hero: one full-bleed scene in planes ---------------- */
.hero { position: relative; height: calc(100svh - var(--banner) - var(--bar)); min-height: 620px; max-height: 1100px; overflow: clip; background: var(--canvas); }
.scene { position: absolute; inset: 0; }
.pl { position: absolute; inset: 0; display: block; }
.pl img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.far { z-index: 1; transform-origin: 70% 40%; }
.far img { transform: scale(1.05); }
.th { position: absolute; inset: 0; pointer-events: none; }
/* the warp: at most 3 mid-plane threads, placed by p-home.js clear of the title's text rects and the copy column; one near strand, out of focus, in front of the book in her hands */
.th.back { z-index: 2; } .th.near { z-index: 6; }
.focal { z-index: 5; }
.th .yarn { top: -12%; height: 124%; left: 0; display: none; }
.th .yarn.on { display: block; }
.th.near .strand { width: 16px; margin-left: -8px; filter: blur(3.2px); opacity: .9; box-shadow: none; border-radius: 8px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 82%, transparent); }
.hero-h1 { position: absolute; z-index: 3; left: 50.5%; top: 8.5%; max-width: 5.3em; margin: 0; color: var(--text);
  text-shadow: 0 2px 2px rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.45); }
.hero-copy { position: absolute; z-index: 7; left: 66.5%; right: var(--gut); top: 47%; max-width: 30em; }
.hero-sub { color: var(--text); }
.hero-by { margin-top: var(--s2); color: var(--soft); }
.hero-lead { margin-top: var(--s4); max-width: 24em; color: var(--text); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.hero-buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s5); }
.hero-price { font: 500 34px/1 var(--f-display); color: var(--text); }
.hero-also { flex-basis: 100%; width: max-content; flex-grow: 0; color: var(--text); font: 500 14px/20px var(--f-chrome); letter-spacing: .02em; text-decoration: none; border-bottom: 1.5px dashed var(--lamp); padding: 14px 0 9px; }
.hero-also, .hero-buy .btn-buy { flex: 0 0 auto; }
.hero-also { margin-right: 100%; }

/* the real cover in the lower left, on her cardigan: never cropped or filtered, true ratio, a board edge outside the
   artwork (Vintervägen), the flat tilt and two-part shadow of Ögon; it links to the buy target */
.hero-book { --cw: clamp(116px, min(13.5vw, 24.5svh), 260px); position: absolute; z-index: 8; left: calc(var(--gut) + 6px); bottom: clamp(28px, 5.4%, 64px); }
.hb-cover { position: relative; z-index: 2; display: block; width: var(--cw); rotate: -2.4deg; }
.hb-cover::before { content: ""; position: absolute; inset: 3px -5px -5px 3px; z-index: -1; border-radius: 1px 3px 3px 1px; background: linear-gradient(90deg, #d9d2c1, #efe9db 40%, #cfc7b4); box-shadow: 0 2px 3px rgba(6,10,8,.5), 0 26px 44px -14px rgba(6,10,8,.8); }
.hb-cover img { display: block; width: 100%; height: auto; border-radius: 1px 3px 3px 1px; }

@media (max-width: 1100px) and (min-width: 761px) {
  .hero-h1 { left: 46%; }
  .hero-copy { left: 58.5%; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .hero-h1 { top: 5%; }
  .hero-copy { top: 29%; left: 56%; }
}

/* ---------------- bridge (short) ---------------- */
.bridge { position: relative; padding: var(--s9) var(--gut) 0; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s7) var(--s8); align-items: end; }
.bridge-copy { max-width: 34em; }
.bridge-copy p { margin-top: var(--s4); }
.bridge-copy .bridge-link { margin-top: var(--s5); }
.bridge-covers { position: relative; height: 300px; overflow-x: clip; }
@media (max-width: 1100px) and (min-width: 761px) { .lc { width: 140px; } .lc2 { left: calc(6% + 115px); } .bc2 { left: calc(6% + 230px); } }
.lc { position: absolute; z-index: 3; width: 180px; height: auto; box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 18px 30px -14px rgba(0,0,0,.7); }
.lc1 { left: 6%; top: 22px; transform: rotate(-3deg); }
.lc2 { left: calc(6% + 150px); top: 0; transform: rotate(2.5deg); }
.bridge-covers .yarn { top: -40px; height: calc(100% + 80px); z-index: 2; }   /* threads pass BEHIND the real covers (never over them) */
.bc1 { left: calc(6% + 40px); } .bc2 { left: calc(6% + 290px); }
.walk { grid-column: 1 / -1; position: relative; margin: var(--s7) calc(var(--gut) * -1) 0; height: min(46vw, 640px); overflow: clip; }
.walk picture, .walk img { display: block; width: 100%; height: 118%; }
.walk img { object-fit: cover; object-position: 50% 40%; will-change: transform; }
.walk .yarn { top: -20px; height: calc(100% + 40px); z-index: 2; }
.wk1 { left: 9%; } .wk2 { left: 93%; }

/* ---------------- grief: the hard cut, twice the room of the bridge ---------------- */
.grief { position: relative; height: 200vh; background: #0d1418; }
.grief-stage { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); overflow: clip; }
.grief-pic, .grief-pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.grief-pic img { object-fit: cover; object-position: 50% 45%; transform-origin: 0% 55%; transform: scale(1.28); will-change: transform; }
/* the plate is zoomed from its LEFT edge, so the walking woman (plate x .315-.51) sits right of x = .40 of the stage at
   every width; the quote's measure ends at 36vw, left of her, anchored low-left */
.grief-q { position: absolute; z-index: 2; left: var(--gut); bottom: 11%; width: min(560px, calc(36vw - var(--gut))); color: var(--text); }
.grief-q::before { content: ""; position: absolute; z-index: -1; inset: -34% -22% -30% -30%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(5,10,16,.86), rgba(5,10,16,.8) 55%, rgba(5,10,16,.5) 80%, rgba(5,10,16,0));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 72%, transparent), linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 72%, transparent), linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  mask-composite: intersect; }
.grief-q .t-quote { font-size: clamp(30px, 2.6vw, 40px); line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 4px 22px rgba(0,6,14,.7); }
.grief-q footer { margin-top: var(--s4); color: var(--text); text-shadow: 0 1px 6px rgba(0,0,0,.8); }

/* ---------------- peak: "Året vävs in" ---------------- */
.peak { position: relative; background: var(--canvas); }
.peak-pin { position: relative; height: 270vh; }   /* the stills left the pin, so the desktop stage is budgeted for the push alone (freeze 0) */
.stage { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); grid-template-rows: 1fr auto; grid-template-areas: "cloth head" "cloth side";
  column-gap: var(--s8); row-gap: var(--s5); padding: var(--s6) var(--gut); overflow: clip; }
.peak-head { grid-area: head; align-self: end; }
.peak-head, .peak-side { transition: opacity 220ms var(--ease); }
.peak-head.is-leaving, .peak-side.is-leaving { opacity: 0; }
.peak-h2 { font-size: clamp(40px, 3.7vw, 58px); line-height: 1.06; }
.peak-src { margin-top: var(--s3); }
.cloth-wrap { grid-area: cloth; position: relative; align-self: stretch; justify-self: stretch; width: 100%; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: flex-end; }
.cloth { position: relative; aspect-ratio: var(--cloth-ar, 1.25); height: 100%; max-width: 100%; }
.photo { position: absolute; left: 0; right: 0; top: 0; overflow: clip; background: var(--surface); }
.room { position: absolute; inset: 0; transform-origin: 50% 46%; }   /* the camera push moves this layer */
.room img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.peak-side { grid-area: side; align-self: start; }
.peak-p { font-size: 19px; line-height: 30px; color: var(--soft); }
/* the five elements: each still whole, its element word directly under it; a 4:3 window, the focus set per picture */
.elements { padding: var(--s3) var(--gut) var(--s8); }
.ledger { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
.ledger img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ledger li[data-k="0"] img { object-position: 42% 50%; }   /* the two women, the stars, the lake */
.ledger li[data-k="1"] img { object-position: 62% 50%; }   /* the brook between stones and snow */
.ledger li[data-k="2"] img { object-position: 46% 50%; }   /* both hands round the plant */
.ledger li[data-k="3"] img { object-position: 50% 50%; }   /* the birches and the spruce */
.ledger li[data-k="4"] img { object-position: 100% 50%; }  /* the log going into the stove */
.ledger p { margin-top: var(--s3); font: 400 17px/24px var(--f-text); color: var(--text); }
.ledger b { display: block; margin-bottom: 2px; font: italic 500 24px/30px var(--f-display); color: var(--lamp); }

/* ---------------- author: her print lying on the cloth ---------------- */
.author { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); align-items: center; padding: var(--s9) var(--gut); background: var(--surface); }
.author-print { position: relative; height: 560px; }
.swatch { position: absolute; left: 4%; right: 8%; top: 8%; bottom: 4%; transform: rotate(1.5deg);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, #4F5B3A 0 9px, #46512f 9px 12px, #8E3F28 12px 15px, #4F5B3A 15px 24px, #B8AA8C 24px 26px, #4F5B3A 26px 36px);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.8); }
.print { position: absolute; left: 18%; top: 0; width: 340px; padding: 14px 14px 12px; background: var(--paper-hi); color: var(--ink); transform: rotate(-2.5deg); box-shadow: 0 2px 1px rgba(0,0,0,.25), 0 24px 34px -16px rgba(0,0,0,.75); will-change: transform; }
.print img { width: 100%; height: auto; }
.print figcaption { margin-top: 10px; font: 500 13px/18px var(--f-chrome); letter-spacing: .02em; color: var(--ink-soft); }
.author-copy { max-width: 36em; }
.author-copy blockquote { margin-top: var(--s5); }
.author-copy blockquote footer { margin-top: var(--s3); }
.author-p { margin-top: var(--s5); }
.author-copy > p:last-child { margin-top: var(--s4); }

/* ---------------- close: the label sewn into the finished cloth ---------------- */
.close { position: relative; padding: 0 0 var(--s9); background: var(--canvas); }
.finished { position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 150px); }
.fin-weave { position: absolute; inset: 0 0 56px 0;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(0deg,
      #3d4630 0 14px, #4F5B3A 14px 30px, #6b5a3e 30px 33px, #8E3F28 33px 41px, #4F5B3A 41px 58px,
      #b8aa8c 58px 61px, #2f3a3f 61px 70px, #4F5B3A 70px 92px, #a9583b 92px 96px, #3d4630 96px 112px);
  box-shadow: inset 0 14px 18px -10px rgba(0,0,0,.6); }
.fringe { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 64px; display: block; overflow: hidden; }
.close-in { position: relative; z-index: 2; display: flex; gap: var(--s8); align-items: center; justify-content: center; padding: var(--s9) var(--gut) 0; }
.close-cover { width: 300px; flex: 0 0 auto; transform: rotate(-1.5deg); }
.close-cover img { box-shadow: 0 2px 1px rgba(0,0,0,.35), 0 30px 40px -18px rgba(0,0,0,.85); }
.big-label { position: relative; background: var(--red); color: var(--paper-hi); border-radius: 2px; padding: 52px 60px 44px; max-width: 540px; box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 26px 40px -20px rgba(0,0,0,.8); }
.stitch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.big-label > :not(.stitch) { position: relative; z-index: 1; }   /* the label's words sit above its stitch outline */
/* the stitch svg paints only a ring at the label's edge (path 10 px in): its hit surface is that ring, never the words */
.stitch { clip-path: polygon(evenodd, -4px -4px, calc(100% + 4px) -4px, calc(100% + 4px) calc(100% + 4px), -4px calc(100% + 4px), -4px -4px,
  20px 20px, 20px calc(100% - 20px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20px) 20px, 20px 20px); }
.stitch path { stroke: var(--paper-hi); stroke-width: 1.8; stroke-linecap: round; }
.big-label h2 { font-size: 50px; line-height: 1.02; }
.bl-sub { font: italic 500 27px/1.2 var(--f-display); margin-top: var(--s1); }
.bl-p { margin-top: var(--s5); font-size: 18px; line-height: 28px; color: #f6e7df; }
.bl-price { font: 500 32px/1.1 var(--f-display); margin-top: var(--s5); }
.bl-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 30px; margin-top: var(--s4); background: var(--paper-hi); color: var(--red); text-decoration: none; font: 600 15px/1 var(--f-chrome); letter-spacing: .02em; border-radius: 2px; }
.bl-btn:hover { background: #fff; } .bl-btn:active { background: var(--paper-2); }
.bl-btn:focus-visible, .bl-also:focus-visible { outline-color: var(--paper-hi); }
.bl-also { display: block; width: max-content; margin-top: var(--s3); padding: 14px 0 9px; color: var(--paper-hi); font: 500 14px/20px var(--f-chrome); letter-spacing: .02em; text-decoration: none; border-bottom: 1.5px dashed rgba(246,239,226,.7); }
.bl-date { margin-top: var(--s4); font: 500 12px/17px var(--f-chrome); letter-spacing: .02em; color: #f1dcd2; }

/* ---------------- phone ---------------- */
@media (max-width: 760px) {
  .hero { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; }
  .scene { position: relative; inset: auto; height: 530px; flex: 0 0 auto; overflow: clip; }
  .pl { top: 128px; bottom: auto; height: 420px; }
  .pl img { object-position: 50% 0; }
  .pl.far img, .pl.focal img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
  .far img { transform: none; }
  .th.near .strand { width: 12px; margin-left: -6px; }
  .hero-h1 { left: var(--gut); right: var(--gut); top: 14px; max-width: 5.4em; }
  .hero-copy { position: relative; left: auto; right: auto; top: auto; z-index: 7; margin-top: 4px; padding: 0 var(--gut) var(--s5); }
  .hero-sub { font-size: 26px; }
  .hero-lead { margin-top: var(--s2); font-size: 17px; line-height: 25px; }
  .hero-buy { margin-top: var(--s3); gap: var(--s2) var(--s4); }
  .hero-price { font-size: 28px; }
  .hero-also { padding-top: 13px; font-size: 16px; line-height: 22px; }
  /* top right, beside the H1, over the dark room right of her face: everything above it and below stays where it was */
  .hero-book { --cw: clamp(84px, calc(100vw - 274px), 116px); left: auto; right: 18px; bottom: auto; top: 12px; }
  .hb-cover::before { box-shadow: 0 1px 2px rgba(6,10,8,.45), 0 3px 5px -3px rgba(6,10,8,.4); }

  .bridge { grid-template-columns: 1fr; padding-top: var(--s8); gap: var(--s6); }
  .bridge-covers { height: 230px; }
  .lc { width: 130px; }
  .lc1 { left: 4%; } .lc2 { left: calc(4% + 120px); }
  .bc1 { left: calc(4% + 30px); } .bc2 { left: calc(4% + 222px); }
  .walk { height: 104vw; margin-top: var(--s5); }
  .wk1 { left: 6%; } .wk2 { left: 90%; }

  .grief { height: 190vh; }
  .grief-pic img { transform-origin: 50% 0%; transform: scale(1.18); }
  .grief-q { right: var(--gut); top: 7%; bottom: auto; width: auto; }
  .grief-q::before { inset: -140px -40px -34% -40px;
    background: linear-gradient(180deg, rgba(5,10,16,.86) 0%, rgba(5,10,16,.82) 66%, rgba(5,10,16,.45) 84%, rgba(5,10,16,0) 100%);
    -webkit-mask-image: none; mask-image: none; }
  .grief-q .t-quote { font-size: 26px; line-height: 1.22; }

  .stage { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "head" "cloth" "side"; align-content: center; row-gap: var(--s5); padding: var(--s4) 0; }
  .peak-head { align-self: auto; }
  .cloth-wrap { justify-content: flex-start; }
  .peak-head { padding: 0 var(--gut); }
  .peak-h2 { font-size: 28px; line-height: 1.12; }
  .peak-src { display: none; }
  .cloth-wrap { height: auto; }
  .cloth { width: 100%; height: auto; margin-top: 0; }
  .peak-side { padding: 0 var(--gut); }
  .peak-pin { height: 360vh; }
  .peak-p { display: none; }
  .elements .peak-p { display: block; margin-bottom: var(--s5); }   /* p-home.js moves it here: the stage has no room for it on a phone */
  /* one column: each still at the full 350 px, far above the 160 px floor, in a wider 3:2 window */
  .elements { padding: var(--s5) var(--gut) var(--s6); }
  .ledger { grid-template-columns: 1fr; gap: var(--s6); }
  .ledger img { aspect-ratio: 3 / 2; }

  .author { grid-template-columns: 1fr; padding: var(--s8) var(--gut); gap: var(--s6); }
  .author-print { height: 400px; order: 2; }
  .print { width: 62vw; left: 14%; }
  .close-in { flex-direction: column; gap: var(--s6); padding: var(--s8) var(--gut) 0; align-items: stretch; }
  .close-cover { width: 46%; align-self: center; }
  .big-label { padding: 30px 24px 26px; }
  .bl-p { margin-top: var(--s4); font-size: 17px; line-height: 25px; }
  .bl-price { margin-top: var(--s4); }
  .big-label h2 { font-size: 38px; }
  .bl-sub { font-size: 23px; }
  .finished { height: calc(100% - 120px); }
  .close { padding-bottom: 20px; }
}

/* ---------------- reduced motion: rest states, nothing pinned ---------------- */
@media (prefers-reduced-motion: reduce) {
  .grief { height: auto; }
  .grief-stage { position: relative; top: 0; height: 88svh; min-height: 520px; }
  .peak-pin { height: auto; }
  .stage { position: relative; top: 0; height: auto; min-height: 0; }
  .cloth { height: min(70svh, 640px); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .cloth { height: auto; }
}

/* 761-1000: a narrower text column; the five elements in three + two */
@media (max-width: 1000px) and (min-width: 761px) {
  .stage { grid-template-columns: minmax(0, 1fr) 300px; column-gap: var(--s6); }
  .peak-h2 { font-size: 36px; }
  .ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 761-1100: the author print stays inside its own column (it covered the heading at 768) */
@media (max-width: 1100px) and (min-width: 761px) { .print { width: min(300px, 82%); left: 6%; } .author-print { height: 480px; } }