/* The paper letter on the home page. Copied from the paper editor (~/Developer/parchment,
   src/style.css): the paper and letter rules only, not its toolbar or page layout. The page
   around it (hero, "See my work", the Work section sliding up over it) is in index.astro. */

/* SF Mono for the letter, where it's installed (Macs); elsewhere ui-monospace or Menlo */
@font-face { font-family:'SF Mono'; font-weight:400;
  src:local('SF Mono Regular'), local('SFMono-Regular'); }
@font-face { font-family:'SF Mono'; font-weight:500;
  src:local('SF Mono Medium'), local('SFMono-Medium'); }

/* Tokens from the hero design. On body.page-home, not :root, so no other page sees them. */
body.page-home { --paper:#FFFFFF; --ink:#1C1C18; --ink-muted:#5E5D56; --ink-nav:#55554E;
  --block-1:#F5A14A; --block-3:#E97FA0;
  --s:480px; --letter-font:'SF Mono', ui-monospace, Menlo, monospace; --letter-track:-.05em; --serif:"Iowan Old Style","Palatino",Georgia,serif; }
/* Dark mode: a dark table under the same translucent sheet. The letter is printed ink, so
   .note keeps the light-mode ink. */
:root[data-theme="dark"] body.page-home { --paper:#141412; --ink:#ECEBE6; --ink-muted:#A3A29A; --ink-nav:#B5B4AC; }
.note { --ink:#1C1C18; --ink-muted:#5E5D56; }

/* #slot only reserves the letter's space; the sheet itself lives in #stage. One fixed size on
   every desktop browser, whatever the window height (it only narrows to fit a small screen). */
#slot { width:min(545px, calc(100vw - 32px)); visibility:hidden; }
#slot .note { position:static; }

#blocks { position:fixed; inset:0; pointer-events:none; transition:opacity .3s ease; }
body.no-blocks #blocks { opacity:0; }
/* Soft glows, not boxes: each block is blurred so it melts into the background on every side */
.block { position:absolute; border-radius:999px; filter:blur(12px); }

/* Paper pieces */
#stage { position:fixed; inset:0; opacity:0; transition:opacity .6s ease; pointer-events:none; }
#stage.ready { opacity:1; }
.piece { position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; pointer-events:auto; }
.layer { position:absolute; left:0; top:0; }
/* The paper's own body tone: like the original seen over its underlay, so the beige and the
   light fiber scratches read on a white page too */
.tex { background-color:var(--tone, rgb(204 197 185 / .62)); background-blend-mode:var(--tone-blend, normal);
  background-size:var(--s) var(--s);
  -webkit-backdrop-filter:blur(var(--frost, 5px)) contrast(.82) brightness(1.04) saturate(.75);
          backdrop-filter:blur(var(--frost, 5px)) contrast(.82) brightness(1.04) saturate(.75); }
.sheen { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(var(--ang,115deg), transparent 25%, rgb(255 255 255 / .28) 48%, transparent 72%); }
/* The fold's clip-path sits on a wrapper (.clipw), not the paper layer: Chrome drops a layer's
   mask (the punched holes and cut letters) while that layer also has a clip-path. Firefox is the
   exception, see sheetClipEl() in main.js. */
.flapw { transform-origin:0 0; }
.flap { display:none; overflow:hidden; }
.flapShade { position:absolute; transform-origin:0 50%;
  background:linear-gradient(to right, rgb(255 255 255 / .7) 0, rgb(255 255 255 / .25) 14%,
    transparent 42%, rgb(110 88 52 / .07) 100%); }
.shadow-wrap { position:absolute; inset:0; pointer-events:none; }
.shadow { background:rgb(52 40 20 / .12); transform-origin:0 0; }
/* The paper's thickness: its cut edge, a thin darker band along the edges facing down and right,
   and a rounded fold where a corner is peeled (render() in main.js draws these) */
.thick { position:absolute; left:0; top:0; width:1px; height:1px; overflow:visible; pointer-events:none; }
.thick .edge { fill:rgb(184 175 158); }
.tflap .edge { fill:rgb(200 192 176); }
.tflap .rim { fill:none; stroke:rgb(188 179 162); stroke-width:2; stroke-linejoin:round; }
.crease-light { stroke:rgb(255 255 255 / .9); stroke-width:2.4; stroke-linecap:round; }
.crease-shade { stroke:rgb(90 70 40 / .16); stroke-width:2.4; stroke-linecap:round; filter:blur(.6px); }
/* Light catches the top edge; the bottom edge turns away */
.sheet { box-shadow:inset 0 1px 0 rgb(255 255 255 / .7), inset 1px 0 0 rgb(255 255 255 / .35),
  inset 0 -1px 0 rgb(90 70 40 / .14), inset -1px 0 0 rgb(90 70 40 / .1); }
.fsw, .strip, .sts { display:none; }
.strip { transform-origin:0 0; }

/* Rotate handles, just outside each corner */
.rot { position:absolute; width:0; height:0; opacity:0; transition:opacity .2s ease; pointer-events:none; }
.rot svg { position:absolute; left:-21px; top:-21px; overflow:visible; }
.rot .halo { fill:none; stroke:#fff; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.rot .ink { fill:none; stroke:var(--ink); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }

/* Punched holes */
.holed { -webkit-mask-size:100% 100%; mask-size:100% 100%; }
.rims { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.rims circle { fill:none; stroke:var(--cut-rim); stroke-width:1.6; filter:blur(.6px); }
#chads { position:fixed; inset:0; pointer-events:none; }
.chad { position:absolute; left:0; top:0; border-radius:50%;
  box-shadow:0 .5px 1.5px rgb(52 40 20 / .14); will-change:transform;
  -webkit-backdrop-filter:blur(3px) contrast(.85) brightness(1.03);
          backdrop-filter:blur(3px) contrast(.85) brightness(1.03); }
body.punching { cursor:var(--punch-cursor), crosshair; }

/* Printed text, the text editor, and punched-out letters */
/* No mix-blend-mode on ink: in WebKit a blended child stops the frosted paper texture from drawing */
.ink { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.ink text { fill:var(--ink); }
.flap .ink { opacity:.4; }
body.typing { cursor:text; }
.editor { position:absolute; min-width:4px; white-space:pre; font-family:var(--serif); line-height:1.2; color:var(--ink);
  outline:1px dashed rgb(0 0 0 / .28); outline-offset:5px; caret-color:var(--ink); cursor:text;
  user-select:text; -webkit-user-select:text; }
.letter { position:absolute; left:0; top:0; will-change:transform; filter:drop-shadow(0 1px 1.2px rgb(60 45 20 / .4)); }
.letter svg { display:block; overflow:visible; }
/* The 'cubes' fall: lit on top and left, shaded underneath */
.cube { position:absolute; left:0; top:0; will-change:transform; background:rgb(238 232 217);
  box-shadow:inset .6px .6px 0 rgb(255 255 255 / .7), inset -.6px -.6px 0 rgb(150 128 92 / .45), 0 1px 1px rgb(60 45 20 / .3); }
.letter .slice { position:absolute; left:0; top:0; width:100%; height:100%; }
.glyph { color:rgb(238 232 217); -webkit-text-stroke:.5px rgb(150 128 92 / .35); white-space:pre; }
.sigCut { fill:rgb(238 232 217); }
/* Once punched out, the cut words carry no ink at all, so nothing dark can show in the holes
   whatever the browser does with the mask (WebKit, and Chrome mid-peel, let ink through). */
.piece.cut .note [data-block]:not([data-mark="in"], [data-mark="out"]) { color:transparent; }
.piece.cut .note svg[data-block] { fill:transparent; }
.cutRim { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; filter:blur(.4px);
  background:var(--cut-rim); -webkit-mask-size:100% 100%; mask-size:100% 100%; }
.letter text { fill:rgb(238 232 217); stroke:rgb(150 128 92 / .35); stroke-width:.5; white-space:pre; }

/* The letter, printed into the parchment. The folded-back flap shows it faintly from behind. */
.note { --pad-y:40px; --pad-x:34px; --pad-l:var(--pad-x); position:absolute; left:0; top:0; width:100%; padding:var(--pad-y) var(--pad-x) var(--pad-y) var(--pad-l); display:flex; flex-direction:column;
  font-family:var(--letter-font); }
/* The letter's text, cut-out words included, can be selected like any page text */
.sheet .note { user-select:text; -webkit-user-select:text; cursor:text; }
.sheet .note a { cursor:pointer; }
.note ::selection { background:rgb(110 155 234 / .35); }
.flap .note { opacity:.4; }
.note p { margin:0; font-size:18px; line-height:29px; }
/* SF Mono set a little tighter than its default spacing */
.note p, .links { letter-spacing:var(--letter-track); }
.greeting { color:var(--ink-muted); }
/* Today's date, top right, like the head of a letter */
.date { position:absolute; top:calc(var(--pad-y) * .6); right:var(--pad-x); font-size:14px; letter-spacing:-.02em; color:var(--ink-muted); }
.note .body { margin-top:16px; color:var(--ink-muted); }
.note .em { color:var(--ink); }
.thesis { display:block; margin-top:29px; }
/* Indent switch: a tab before each paragraph (not the greeting or the sign-off) */
body.indent .note .body { text-indent:4ch; }
.signoff { margin-top:22px !important; color:var(--ink-muted); }
/* Pixel signature: Pearl on its 10-unit grid. Whole pixels per unit only (6, 5 or 4), never fluid. */
.sig { --sig-h:36px; position:relative; display:block; width:max-content; margin-top:12px; }
.signature { display:block; fill:var(--ink); width:calc(var(--sig-h) * 73 / 9); height:var(--sig-h); }
/* Invisible real text over the pixel name, so it can be selected and copied like the rest */
.sig-text { position:absolute; inset:0; color:transparent; white-space:nowrap; font-size:calc(var(--sig-h) * .8);
  line-height:var(--sig-h); text-align:justify; text-align-last:justify; }
/* The bottom of the sheet, under a perforated rule, is four tear-off tabs, one per link, split
   by vertical perforations (all punched through the sheet by updateMask in main.js). The strip
   runs edge to edge and down to the bottom edge. */
.links { margin:24px calc(-1 * var(--pad-x)) calc(-1 * var(--pad-y)) calc(-1 * var(--pad-l)); display:grid; grid-template-columns:repeat(4, 1fr);
  font-size:13px; }
.links a { display:flex; align-items:center; justify-content:center; min-height:72px; }
/* Dithered (checkerboard) underline: the one pixel-grid echo outside the name */
.dither { padding-bottom:6px; background-image:conic-gradient(var(--ink) 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0);
  background-size:4px 4px; background-repeat:repeat-x; background-position:0 100%; }


@media (max-width:640px) {
  .note { --pad-y:40px; --pad-x:24px; }
  .note p { font-size:22px; line-height:34px; }
  .thesis { margin-top:34px; }
}
@media (max-width:517px) { .sig { --sig-h:45px; } }
@media (max-width:444px) { .sig { --sig-h:36px; } }
/* Dark paper prints in light ink */
body.paper-dark .note { --ink:#F2EDE3; --ink-muted:#CBC5BA; }

/* Pressed-in and raised marks: the words carry no ink, only the paper's own light and shadow.
   Pressed in, the top edge of each stroke falls into shadow and the bottom catches the light;
   raised, the other way round. The faint fill sits over the two offsets so only rims show. */
body:not(.editing, .effects-off) .sheet .note [data-mark="in"] { color:rgb(60 45 20 / .07);
  text-shadow:0 -1px 0 rgb(60 45 20 / .38), 0 1px 0 rgb(255 252 244 / .75), 0 0 2px rgb(60 45 20 / .12); }
body:not(.editing, .effects-off) .sheet .note [data-mark="out"] { color:rgb(255 252 244 / .22);
  text-shadow:0 -1px 0 rgb(255 252 244 / .8), 0 1px 0 rgb(60 45 20 / .38), 0 2px 3px rgb(60 45 20 / .2); }
body:not(.editing) .flap .note [data-mark] { color:transparent; text-shadow:none; }

/* Thick switch off: a flat sheet, no edge band, edge lighting or fold rim */
body.thin .thick { display:none; }
body.thin .sheet { box-shadow:none; }
/* Link tabs switch off: no strip of links (or its perforations) at the bottom of the letter */
body.no-links .links { display:none; }
/* Construction paper is matte: no gloss */
body.matte .sheen { display:none; }
/* Metallic paper: broad bands of light and shadow, as on foil, blended into the paper's own
   color (overlay) so gold stays gold. The bands slide with the pointer (--glint) and swing with
   the sheet's angle (--ang). */
body.metal .sheen { mix-blend-mode:overlay;
  background:linear-gradient(var(--ang,115deg), rgb(0 0 0 / .35) 0%, rgb(255 255 255 / .75) 22%,
    rgb(0 0 0 / .2) 40%, rgb(255 255 255 / .9) 55%, rgb(0 0 0 / .3) 72%, rgb(255 255 255 / .5) 88%, rgb(0 0 0 / .35) 100%);
  background-size:260% 260%; background-position:calc(var(--glint, .5) * 100%) 50%;
  transition:background-position .4s ease-out; }
@media (prefers-reduced-motion: reduce) { body.metal .sheen { transition:none; } }