/* About page: Winkle's letter on the supplied wide tabletop artwork (1774 x 887, 2:1).
   Loaded after site.css; shared navigation and footer styles come from there.

   Desktop: the page itself doesn't scroll. The artwork, parchment, painted greeting and
   signature stay still; only the letter body scrolls, inside a box over the parchment's writing
   area, with a brass-styled native scrollbar on its left (direction: rtl on the box puts the
   scrollbar on the left; every paragraph is set back to ltr).

   Artwork landmarks (artwork pixels): greeting ink x 478-698, y 129-190; wax seal from y ~650
   (x 1305-1450); signature ink x 1012-1298 from y ~680; clean parchment interior x ~420-1300 at
   the top, widening below. The scroll box is x 440-1275, y 222-640; text runs x ~480-1265.

   Phones keep the earlier (approved) 16:9 letter artwork for their painted greeting, signature
   and parchment crops; see the portrait section. */

.page-about {
  --ink: #3b2113;
  --parchment: #e7c28c;
  --letter-art: url("/assets/img/letter-desk-1672.jpg");
  --letter-art: image-set(url("/assets/img/letter-desk-1672.webp") type("image/webp"), url("/assets/img/letter-desk-1672.jpg") type("image/jpeg"));
  --letter-wide: url("/assets/img/letter-wide-1774.jpg");
  --letter-wide: image-set(url("/assets/img/letter-wide-1774.webp") type("image/webp"), url("/assets/img/letter-wide-1774.jpg") type("image/jpeg"));
}

/* ---------- Fixed artwork layers (desktop) ---------- */

.letter-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--walnut-950);
}

/* Height-first like the homepage: the scene always fills the visible viewport height, so the
   greeting and signature are never cropped. Narrower windows crop the side props; wider
   windows centre the scene on solid walnut. The artwork is never blurred or feathered. */
.letter-stage {
  --w: calc(var(--vh) * 2);
  --x: calc((100% - var(--w)) / 2);
  position: absolute;
  left: var(--x);
  top: 0;
  width: var(--w);
  aspect-ratio: 1774 / 887;
}
.letter-scene .letter-stage {
  /* Parchment-coloured stand-in if the artwork fails to load, so the ink stays readable. */
  background: linear-gradient(90deg, transparent 22.5%, var(--parchment) 22.5%, var(--parchment) 81.7%, transparent 81.7%);
}
.letter-stage picture,
.letter-stage img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- The letter (desktop: a scrolling journal page) ---------- */

/* No page scroll on desktop: one scrollbar only, the letter's own. */
.page-about { height: var(--vh); overflow: hidden; }

.letter {
  position: fixed;
  inset: 0;
  z-index: 2;
  container-type: inline-size;
  pointer-events: none;
}

.letter__sheet {
  /* Same geometry as .letter-stage. */
  --w: calc(var(--vh) * 2);
  --x: calc((100cqw - var(--w)) / 2);
  --bar: 14px;
}

.letter__body {
  position: absolute;
  left: calc(var(--x) + var(--w) * .248);
  top: calc(var(--vh) * .2503);
  width: calc(var(--w) * .4707);
  height: calc(var(--vh) * .4713);
  box-sizing: border-box;
  padding: calc(var(--vh) * .022) calc(var(--w) * .0055) calc(var(--vh) * .022) max(16px, calc(var(--w) * .0145));
  overflow-y: auto;
  overscroll-behavior: contain;
  direction: rtl;
  pointer-events: auto;
  font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  font-size: clamp(21px, calc(var(--w) * .014), 34px);
  font-weight: 500;
  line-height: 1.38;
  color: var(--ink);
  text-shadow: 0 0 .6px rgba(59, 33, 19, .35);
  /* Lines fade softly in and out at the top and bottom of the writing area; the scrollbar
     strip on the left stays fully visible. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 calc(var(--vh) * .02), #000 calc(100% - var(--vh) * .02), transparent), linear-gradient(#000, #000);
  mask-image: linear-gradient(180deg, transparent, #000 calc(var(--vh) * .02), #000 calc(100% - var(--vh) * .02), transparent), linear-gradient(#000, #000);
  -webkit-mask-size: 100% 100%, var(--bar) 100%;
  mask-size: 100% 100%, var(--bar) 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.letter__body > * { direction: ltr; }
.letter__body p { margin: 0 0 .5em; }
.letter__body p:last-child { margin-bottom: 0; }
.letter__body ::selection { background: rgba(176, 107, 28, .3); }
.letter__body:focus-visible {
  outline: 2px solid rgba(139, 84, 22, .8);
  outline-offset: 6px;
  border-radius: 6px;
}

/* Fantasy scrollbar: aged-brass thumb with a rivet, a dark walnut groove, brass finials. */
.letter__body::-webkit-scrollbar { width: var(--bar); }
.letter__body::-webkit-scrollbar-track {
  border: 1px solid rgba(120, 72, 28, .55);
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(58, 31, 13, .55), rgba(92, 55, 26, .32) 50%, rgba(58, 31, 13, .55));
  box-shadow: inset 0 0 4px rgba(30, 14, 4, .45);
}
.letter__body::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 50%, #fff3c8 0 1.5px, #6e4210 2.2px 3.2px, transparent 3.8px) padding-box,
    linear-gradient(90deg, #6f4413, #d9a446 30%, #ffe1a0 50%, #cf973b 70%, #6f4413) padding-box;
  box-shadow: 0 0 0 1px rgba(70, 38, 10, .7);
}
.letter__body::-webkit-scrollbar-thumb:hover {
  background:
    radial-gradient(circle at 50% 50%, #fffbe6 0 1.5px, #6e4210 2.2px 3.2px, transparent 3.8px) padding-box,
    linear-gradient(90deg, #7d4f17, #ecbb5c 30%, #fff0c4 50%, #e2ad4e 70%, #7d4f17) padding-box;
}
.letter__body::-webkit-scrollbar-button:single-button {
  display: block;
  height: 16px;
  background: no-repeat center / 10px 10px;
}
.letter__body::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1 9 7H1z' fill='%23b8822f' stroke='%235a3410' stroke-width='.8'/%3E%3C/svg%3E");
}
.letter__body::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 9 9 3H1z' fill='%23b8822f' stroke='%235a3410' stroke-width='.8'/%3E%3C/svg%3E");
}
.letter__body::-webkit-scrollbar-button:vertical:start:increment,
.letter__body::-webkit-scrollbar-button:vertical:end:decrement { display: none; }
/* Browsers without the styleable scrollbar (Firefox): brass thumb on a walnut track. */
@supports not selector(::-webkit-scrollbar) {
  .letter__body { scrollbar-color: #c38f3c rgba(70, 40, 18, .35); }
}

.letter__painted { display: none; }

/* When the sides must be cropped, centre on the parchment and wax seal (artwork x ~920)
   rather than the painting's midpoint, so the greeting and seal both survive on squarer windows. */
@media (max-aspect-ratio: 2/1) {
  .letter-stage { --x: clamp(calc(100% - var(--w)), calc(50% - var(--w) * .5186), 0px); }
  .letter__sheet { --x: clamp(calc(100cqw - var(--w)), calc(50cqw - var(--w) * .5186), 0px); }
}

/* ---------- Portrait and phone ----------
   The wide scene would be far too small here, so the reading surface becomes the painting's
   own parchment: a fixed crop of the plain parchment behind the text, with the painted greeting
   at the top of the letter and the painted signature and seal at the end. Same condition as
   the homepage layout switch. */

@media (max-aspect-ratio: 7/5), (max-width: 760px) {
  .page-about { height: auto; overflow: visible; }
  .letter { position: relative; inset: auto; pointer-events: auto; container-type: normal; }

  /* Only the clean parchment between the greeting and signature (artwork y 170-760) is used
     here: scaled so 590 artwork px fill the screen height, starting at y 170, centred near x 800. */
  .letter-scene {
    bottom: auto;
    height: 100lvh;
    background-color: var(--parchment);
    background-image: var(--letter-art);
    background-repeat: no-repeat;
    background-size: auto 159.5lvh;
    background-position: 47.8% -28.8lvh;
  }
  .letter-scene .letter-stage { display: none; }

  .letter__sheet {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 0;
  }

  .letter__painted {
    display: block;
    background-image: var(--letter-art);
    background-repeat: no-repeat;
  }
  /* Artwork x 320-840, y 20-170: "Hello friend," */
  .letter__painted--greeting {
    aspect-ratio: 520 / 150;
    background-size: 321.54% auto;
    background-position: 27.78% 2.53%;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
    mask-image: linear-gradient(180deg, #000 72%, transparent);
  }
  /* Artwork x 960-1495, y 760-941: "- Winkle", doodle and wax seal */
  .letter__painted--signature {
    aspect-ratio: 535 / 181;
    background-size: 312.52% auto;
    background-position: 84.43% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%);
    mask-image: linear-gradient(180deg, transparent, #000 30%);
  }

  .letter__body {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    direction: ltr;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 2px 22px 0 5%;
    font-size: clamp(21px, 5.7vw, 28px);
    line-height: 1.4;
  }

  .page-about .site-footer { position: relative; }
  .page-about .site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -28px;
    height: 28px;
    background: linear-gradient(180deg, transparent, var(--walnut-950));
    pointer-events: none;
  }
}