/* Lifted unchanged from mockups/final-LOCKED-2026-09-30/long-note.html (includes the consistency layer). Do not edit by hand. */

  /* Hedgerow, the same values as every other page */
  [data-palette="hedgerow"],[data-palette="hedgerow-night"]{--ink:#2a2a20;--soft:#62604f;--accent:#b4532a;--hi:#f0d99a;
    --n1:#d9e4cc;--n2:#f3d9b8;--n3:#e7e8c7;--n4:#f0d99a;--lines:#e5e4d8;
    --ta:rgba(80,115,70,.4);--tb:rgba(214,120,55,.44);--tc:rgba(212,165,50,.48)}
  [data-palette="hedgerow"]{--paper:#f7f5ee;--dot:#dcdccf}
  [data-palette="hedgerow-night"]{--paper:#18211a;--dot:rgba(240,200,130,.2);--card:#f5f0e4;--lines:#e8e2d3;
    --page-ink:#efe9da;--page-soft:#b3b6a2;--page-accent:#e5a45c;--btn:#223024;--btn-line:#e5a45c;--btn-ink:#efe9da}
  [data-palette="hedgerow-night"] .piece{--lift:0 1px 2px rgba(0,0,0,.3),0 6px 14px rgba(0,0,0,.3),0 18px 30px -10px rgba(0,0,0,.5);--lift-hover:0 2px 3px rgba(0,0,0,.3),0 10px 20px rgba(0,0,0,.35),0 26px 40px -12px rgba(0,0,0,.55)}

  :root{
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --lift:0 1px 1px rgba(40,30,20,.06),0 3px 6px rgba(40,30,20,.06),0 14px 24px -10px rgba(40,30,20,.2);
    --lift-hover:0 1px 1px rgba(40,30,20,.06),0 6px 12px rgba(40,30,20,.08),0 22px 34px -12px rgba(40,30,20,.26);
  }
  *{box-sizing:border-box}
  html,body{max-width:100%;overflow-x:clip}
  body{margin:0;color:var(--page-ink,var(--ink));font-family:'Nunito',system-ui,sans-serif;font-size:17px;line-height:1.6;
    background-color:var(--paper);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);
    background-size:24px 24px;-webkit-font-smoothing:antialiased;transition:background-color .35s}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  p{margin:0}
  figure{margin:0}
  button{font:inherit}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
  .label{background:#2b2622;color:#f3ede2;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:10px 24px}
  .picker{position:sticky;top:0;z-index:50;background:rgba(43,38,34,.95);color:#f3ede2;font-size:14px;
    display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:8px 24px}
  .picker span{opacity:.7;margin-right:4px}
  .picker button{font-weight:600;border:1.5px solid rgba(243,237,226,.7);background:transparent;color:#f3ede2;border-radius:999px;padding:4px 14px;cursor:pointer}
  .picker button[aria-pressed="true"]{background:#f3ede2;color:#2b2622;border-color:#f3ede2}

  .wrap{max-width:1140px;margin:0 auto;padding:0 20px 88px}
  .bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:28px 0 8px}
  .bar .name{font-family:'Fraunces',serif;font-weight:600;font-size:24px;letter-spacing:-.02em}
  .btns{display:flex;flex-wrap:wrap;gap:10px}
  .btn{background:var(--btn,#fff);color:var(--btn-ink,var(--ink));border:1.5px solid var(--btn-line,var(--ink));border-radius:999px;
    padding:6px 18px;font-weight:700;font-size:14.5px;box-shadow:0 2px 0 var(--btn-line,var(--ink));transition:transform .15s,box-shadow .15s;display:inline-block;cursor:pointer}
  .btn:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--btn-line,var(--ink))}

  .piece{color:var(--ink);--rot:0deg;transform:rotate(var(--rot));box-shadow:var(--lift);transition:transform .25s ease,box-shadow .25s ease,background-color .35s}
  a.piece:hover,.piece.lifts:hover{transform:rotate(var(--rot)) translateY(-3px);box-shadow:var(--lift-hover)}
  .r1{--rot:-1deg} .r2{--rot:.8deg} .r3{--rot:-.4deg} .r4{--rot:1.2deg}
  .tape{position:relative}
  .tape::before{content:"";position:absolute;top:-12px;left:50%;width:92px;height:24px;margin-left:-46px;
    background-color:var(--ta);transform:rotate(-4deg);z-index:3;
    background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.38) 0 6px,transparent 6px 12px);box-shadow:0 1px 1px rgba(40,30,20,.05)}
  .tape.g::before{background-color:var(--tb);transform:rotate(3deg)}
  .tape.b::before{background-color:var(--tc);transform:rotate(-2deg)}
  .n1{background-color:var(--n1)} .n2{background-color:var(--n2)} .n3{background-color:var(--n3)} .n4{background-color:var(--n4)}

  .meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px;font-family:'Caveat',cursive;font-size:23px;line-height:1}
  .meta .d{color:var(--accent);font-weight:700}
  .meta .t{color:var(--soft);font-weight:500;font-size:21px}
  .cap{font-family:'Caveat',cursive;font-size:22px;line-height:1.25}

  .view{display:none}
  [data-view="feed"] .v-feed,[data-view="long"] .v-long,[data-view="gallery"] .v-gallery,[data-view="video"] .v-video,[data-view="link"] .v-link{display:block}
  .intro{text-align:center;margin:44px auto 34px;max-width:40em}
  .intro .kick{font-family:'Caveat',cursive;font-size:26px;font-weight:700;color:var(--page-accent,var(--accent))}
  .intro p{color:var(--page-soft,var(--soft));font-size:15.5px;margin-top:4px}

  /* ---------- the feed: the same packed board as the homepage ---------- */
  .board{columns:1;column-gap:30px}
  .board > *{break-inside:avoid;margin:0 0 38px;display:block}
  .board.packed{columns:auto;display:flex;gap:30px;align-items:flex-start}
  .board.packed > .col{flex:1 1 0;min-width:0;margin:0}
  .board.packed .col > *{display:block;margin:0 0 38px}
  .tag{display:inline-block;margin-bottom:12px;font-family:'Caveat',cursive;font-size:20px;color:var(--page-soft,var(--soft))}

  /* 1. long note: first few lines, then "read the rest" */
  .note{padding:24px 24px 22px;background-image:var(--grain)}
  .note p{font-size:16.5px;line-height:1.62}
  .long .clip{position:relative;max-height:calc(1.62em * 6);overflow:hidden}
  .long .clip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.2em;background:linear-gradient(transparent,var(--n3))}
  .long .clip p + p{margin-top:.8em}
  .rest{display:inline-block;margin-top:12px;font-weight:700;font-size:15px;color:var(--accent)}

  /* 2. gallery: a little stack of polaroids with a count */
  .stack{display:block;position:relative;padding:18px 18px 0}
  .stack .pile{position:relative;aspect-ratio:1/1.08}
  .stack .p{position:absolute;inset:0;background:var(--card,#fff);background-image:var(--grain);padding:9px 9px 34px;box-shadow:var(--lift)}
  .stack .p img{width:100%;height:100%;object-fit:cover}
  .stack .pile{margin:0 14px}
  .stack .p1{transform:rotate(-9deg) translate(-22px,12px)} .stack .p2{transform:rotate(8deg) translate(24px,4px)} .stack .p3{transform:rotate(-1deg)}
  .stack:hover .p1{transform:rotate(-12deg) translate(-30px,14px)} .stack:hover .p2{transform:rotate(11deg) translate(32px,4px)}
  .stack .p{transition:transform .3s ease}
  .count{position:absolute;right:4px;top:4px;z-index:4;background:var(--accent);color:#fff;font-weight:700;font-size:14px;border-radius:999px;padding:4px 11px;
    box-shadow:0 2px 6px rgba(0,0,0,.2);transform:rotate(6deg)}
  .stack .under{margin-top:34px;position:relative;z-index:5}

  /* 3. video: a polaroid with a play button */
  .vid{background-color:var(--card,#fff);background-image:var(--grain);padding:10px 10px 14px}
  .vid .frame{position:relative}
  .vid .frame img{width:100%;aspect-ratio:9/12;object-fit:cover}
  .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.92);
    box-shadow:0 4px 14px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center}
  .play::after{content:"";border-left:20px solid var(--accent);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
  .dur{position:absolute;right:10px;bottom:10px;background:rgba(20,20,15,.75);color:#fff;font-size:13px;font-weight:700;border-radius:4px;padding:2px 7px}
  .vid .meta{margin:12px 4px 4px}
  .vid .cap{margin:0 4px}

  /* 4. link: a luggage tag with the site on it */
  .link{padding:22px 22px 20px 36px;background-color:var(--card,#fff);background-image:var(--grain);position:relative;
    clip-path:polygon(18px 0,100% 0,100% 100%,18px 100%,0 50%)}
  .link::after{content:"";position:absolute;left:12px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
  .link .site{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
  .link .site i{width:18px;height:18px;border-radius:4px;background:#e8e4d8;display:inline-block}
  .link h3{font-family:'Fraunces',serif;font-weight:600;font-size:20px;line-height:1.25;margin:8px 0 10px}
  .link .said{font-family:'Caveat',cursive;font-size:22px;line-height:1.25;color:var(--ink)}
  .link .go{display:inline-block;margin-top:10px;font-weight:700;font-size:15px;color:var(--accent)}
  .linkwrap{filter:drop-shadow(0 3px 5px rgba(40,30,20,.12)) drop-shadow(0 12px 16px rgba(40,30,20,.12))}

  /* ---------- the single pages ---------- */
  .stage{display:flex;flex-direction:column;align-items:center}
  .full{margin-top:22px;font-size:14.5px;color:var(--page-soft,var(--soft))}
  .back{display:flex;justify-content:center;margin-top:48px}

  /* long note: lined notebook paper, torn off the pad */
  .sheet{width:100%;max-width:680px;background-color:#fffdf7;padding:46px 44px 44px 72px;--rot:-.6deg;position:relative;
    background-image:linear-gradient(90deg,transparent 52px,rgba(214,120,110,.55) 52px 53.5px,transparent 53.5px),
      repeating-linear-gradient(transparent 0 33px,#d4e0ea 33px 34px);background-position:0 0,0 70px;
    -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%;
    mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%}
  [data-palette="hedgerow-night"] .sheet{background-color:#f7f2e6}
  .sheetwrap{width:100%;max-width:680px;filter:drop-shadow(0 3px 5px rgba(40,30,20,.14)) drop-shadow(0 14px 18px rgba(40,30,20,.14))}
  .sheet .meta{font-size:27px;margin-bottom:12px}
  .sheet p{font-size:18.5px;line-height:34px;color:var(--ink)}
  .sheet p + p{margin-top:34px}

  /* gallery: every photo pinned up, click to see it big */
  .gnote{max-width:560px;width:100%;padding:28px 30px 24px;background-image:var(--grain);--rot:-.8deg}
  .gnote p{font-size:19px;line-height:1.6}
  .grid{columns:1;column-gap:26px;margin-top:56px}
  .grid figure{break-inside:avoid;margin:0 0 30px;background-color:var(--card,#fff);background-image:var(--grain);padding:10px 10px 12px;cursor:zoom-in}
  .grid figure img{width:100%;height:auto}
  .grid figure:nth-child(3n+1){--rot:-1.2deg} .grid figure:nth-child(3n+2){--rot:.9deg} .grid figure:nth-child(3n){--rot:-.3deg}
  .box{position:fixed;inset:0;z-index:100;background:rgba(15,18,14,.88);display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
  .box.on{display:flex}
  .box figure{background:#fff;padding:12px 12px 16px;max-width:min(1000px,100%);max-height:100%;box-shadow:0 20px 60px rgba(0,0,0,.5)}
  .box img{max-height:calc(100vh - 110px);width:auto;margin:0 auto}
  .box .x{position:absolute;top:18px;right:22px;color:#fff;font-size:15px;font-weight:700;background:none;border:1.5px solid #fff;border-radius:999px;padding:4px 14px;cursor:pointer}

  /* video: the video itself in a big frame */
  .bigvid{width:100%;max-width:760px;background-color:var(--card,#fff);background-image:var(--grain);padding:14px 14px 22px;--rot:.6deg}
  .bigvid .frame{position:relative;background:#111}
  .bigvid .frame img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.9}
  .bigvid .play{width:84px;height:84px;margin:-42px 0 0 -42px}
  .bigvid .play::after{border-left-width:26px;border-top-width:16px;border-bottom-width:16px}
  .bigvid .meta{margin:18px 6px 8px;font-size:27px}
  .bigvid .cap{margin:0 6px;font-size:26px}
  .where{margin-top:16px;font-size:14.5px;color:var(--page-soft,var(--soft));text-align:center}

  /* link: the tag, bigger, with a proper button */
  .biglink{width:100%;max-width:600px}
  .biglink .link{padding:34px 34px 30px 52px;clip-path:polygon(26px 0,100% 0,100% 100%,26px 100%,0 50%)}
  .biglink .link::after{left:18px;width:14px;height:14px;margin-top:-7px}
  .biglink .link h3{font-size:26px}
  .biglink .link .said{font-size:26px}
  .biglink .btn{margin-top:18px}

  footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--page-soft,var(--soft));font-size:14.5px;margin-top:72px;
    padding-top:18px;border-top:1px solid color-mix(in srgb,var(--page-soft,var(--soft)) 30%,transparent)}
  footer .soc{display:flex;gap:18px;flex-wrap:wrap}
  footer .dev{font-family:'Caveat',cursive;font-size:20px;color:var(--page-accent,var(--accent))}

  @media(min-width:700px){ .board{columns:2} .grid{columns:2} }
  @media(min-width:1040px){ .board{columns:3} .grid{columns:3} }
  @media(max-width:520px){ .sheet{padding:40px 22px 36px 56px;background-image:linear-gradient(90deg,transparent 40px,rgba(214,120,110,.55) 40px 41.5px,transparent 41.5px),repeating-linear-gradient(transparent 0 33px,#d4e0ea 33px 34px)} .sheet p{font-size:17px} }
  @media(prefers-reduced-motion:reduce){*{transition:none!important}}
  /* neighbours: the notes either side, as small notes */
  .around{max-width:760px;margin:72px auto 0;display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}
  .around > *{min-width:0}
  .mini{display:block;background-image:var(--grain);padding:18px 20px 16px}
  .mini .k{font-family:'Caveat',cursive;font-size:21px;font-weight:700;color:var(--accent);line-height:1;display:flex;justify-content:space-between;gap:8px}
  .mini .k span{color:var(--soft);font-weight:500}
  .mini p{margin-top:8px;font-size:15px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mini.empty{background:transparent;box-shadow:none;border:1.5px dashed color-mix(in srgb,var(--page-soft,var(--soft)) 50%,transparent);
    color:var(--page-soft,var(--soft));font-family:'Caveat',cursive;font-size:22px;text-align:center;padding:26px 20px}
  .home{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:40px}

  .home{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:40px}
  .meta a.t{color:var(--soft);font-weight:500;border-bottom:1px dashed currentColor}

  /* day and night: a sun and moon switch in the menu. Starts on the visitor's device setting */
  .lamp{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:68px;height:35px;padding:0 9px;
    border-radius:999px;border:1.5px solid var(--btn-line,var(--ink));background:var(--btn,#fff);box-shadow:0 2px 0 var(--btn-line,var(--ink));
    cursor:pointer;font-size:14px;line-height:1;color:var(--btn-ink,var(--ink));flex:0 0 auto;transition:transform .15s,box-shadow .15s}
  .lamp:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--btn-line,var(--ink))}
  .lamp .ic{position:relative;z-index:2;width:16px;text-align:center;opacity:.55;transition:opacity .25s}
  .lamp .knob{position:absolute;z-index:1;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--hi);
    box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s ease}
  .lamp[aria-checked="false"] .sun,.lamp[aria-checked="true"] .moon{opacity:1}
  .lamp[aria-checked="true"] .knob{transform:translateX(33px)}
  .lamp[aria-checked="true"] .moon{color:#18211a}
  @media(prefers-reduced-motion:reduce){.lamp .knob,.lamp .ic{transition:none}}

  /* ---- consistency layer: one size per role on every page (audited 2026-09-30) ---- */
  .lamp{font-family:'Nunito',system-ui,sans-serif}
  .wrap > .bar{padding:28px 0 8px}
  .older a,.home .btn{padding:6px 18px;font-size:14.5px;font-weight:700}
  footer{margin-top:72px}
  .kick,.kicker,.intro .kick{font-size:26px;line-height:1}
  .hero .eyebrow{font-size:30px}
  .hero h1{font-size:clamp(2.5rem,7vw,4.1rem);letter-spacing:-.025em;margin:8px 0 16px}
  .stage .meta .d,.sheet .meta .d,.bigvid .meta .d{font-size:27px}
  .stage .meta .t,.sheet .meta .t,.bigvid .meta .t{font-size:24px}
  .gnote p{font-size:23px;line-height:1.55}
  .stage .cap,.bigvid .cap{font-size:27px;line-height:1.25}
  header p.intro,.hero .lede{font-size:18px}
  .stage > .kick{margin-bottom:34px}
  .stage{margin-top:48px} div.intro{margin-top:48px}
  /* the About portrait is the homepage portrait: same size, crop, frame and tilt */
  .hero .me{width:212px;padding:11px 11px 38px;transform:rotate(2.5deg)}
  .hero .me img{aspect-ratio:1}
  .hero .me span{bottom:7px;font-size:22px}
  @media(min-width:700px){.hero{grid-template-columns:minmax(0,1fr) auto;gap:28px}} article.sheet.piece{margin-top:48px} .hero{margin-top:48px}