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

  /* ---------- colour options: each one swaps colours only, never the style ---------- */
  [data-palette="original"]{--paper:#fbf8f1;--dot:#e4dccb;--ink:#2b2622;--soft:#6e645a;--accent:#b8453a;--hi:#fbeec1;
    --n1:#fbeec1;--n2:#dfe8d3;--n3:#f6dcd3;--n4:#dbe7ee;--lines:#ebe4d6;
    --ta:rgba(184,69,58,.3);--tb:rgba(122,150,98,.36);--tc:rgba(92,130,160,.32)}
  [data-palette="woodland"]{--paper:#f5f5ef;--dot:#dcdfd3;--ink:#23291f;--soft:#5d6656;--accent:#3f6b45;--hi:#d8e4cf;
    --n1:#d8e4cf;--n2:#ebe3d5;--n3:#e4e8c4;--n4:#dfe1dc;--lines:#e3e6dc;
    --ta:rgba(63,107,69,.34);--tb:rgba(140,112,80,.36);--tc:rgba(150,170,90,.4)}
  [data-palette="seaside"]{--paper:#f6f6f1;--dot:#dde2df;--ink:#1f3242;--soft:#5b6b78;--accent:#2f6282;--hi:#d3e8e1;
    --n1:#d3e8e1;--n2:#f2e7cf;--n3:#dce7f1;--n4:#f5e1da;--lines:#e1e6e6;
    --ta:rgba(222,120,95,.36);--tb:rgba(70,150,140,.36);--tc:rgba(47,98,130,.32)}
  [data-palette="heather"]{--paper:#f9f6f4;--dot:#e5dde0;--ink:#2e2530;--soft:#6b6070;--accent:#7d3f6f;--hi:#e8e0f0;
    --n1:#e8e0f0;--n2:#f3dde3;--n3:#e0e8dc;--n4:#f6efd9;--lines:#ebe3e6;
    --ta:rgba(125,63,111,.3);--tb:rgba(200,130,160,.36);--tc:rgba(120,150,110,.36)}
  [data-palette="autumn"]{--paper:#fcf6ee;--dot:#eddcc6;--ink:#3a2218;--soft:#7a5a48;--accent:#c0562a;--hi:#f6cfa6;
    --n1:#f6cfa6;--n2:#f4dc98;--n3:#ecc6c8;--n4:#f3e3cf;--lines:#f0e1cf;
    --ta:rgba(214,110,50,.42);--tb:rgba(140,40,50,.34);--tc:rgba(222,170,40,.5)}

  [data-palette="night"] .piece,[data-palette="night"] .me{--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)}
  [data-palette="night"]{--paper:#1b2030;--dot:rgba(255,236,190,.2);--ink:#262231;--soft:#5d5868;--accent:#8a5a1c;--hi:#e2b865;
    --n1:#eadcae;--n2:#cfdac8;--n3:#e6cfd0;--n4:#d6d0e6;--lines:#e6dfd0;--card:#f6f0e4;
    --ta:rgba(226,184,101,.6);--tb:rgba(170,160,220,.55);--tc:rgba(220,150,160,.55);
    --page-ink:#efe8da;--page-soft:#b3adbf;--page-accent:#e2b865;--btn:#262c40;--btn-line:#e2b865;--btn-ink:#efe8da}

  /* Hedgerow: Woodland's crisp paper and greens with Autumn's warm oranges.
     Its night version keeps the same notes, tapes and accent; only the page and the light change. */
  [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,[data-palette="hedgerow-night"] .me{--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)}

  /* ---------- shared by every colour option ---------- */
  :root{
    /* fine paper grain, so the notes read as paper rather than flat colour */
    --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");
    /* three layers of shadow: contact, lift, and a soft spread */
    --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}
  :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}

  /* colour picker, mockup only */
  .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:inherit;font-weight:600;border:1.5px solid rgba(243,237,226,.7);background:transparent;color:#f3ede2;border-radius:999px;
    padding:4px 14px 4px 6px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
  .picker button i{display:inline-flex}
  .picker button i b{width:12px;height:12px;border-radius:50%;margin-right:-4px;box-shadow:0 0 0 1.5px #2b2622}
  .picker button[aria-pressed="true"]{background:#f3ede2;color:#2b2622;border-color:#f3ede2}

  .wrap{max-width:1140px;margin:0 auto;padding:0 20px 88px}

  /* header */
  header{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;padding:56px 0 44px}
  header > *{min-width:0}
  .hello{font-family:'Caveat',cursive;font-size:30px;color:var(--page-accent,var(--accent));font-weight:700;line-height:1}
  header h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2.5rem,7vw,4.1rem);line-height:1;margin:8px 0 16px;letter-spacing:-.025em}
  header p.intro{max-width:33em;color:var(--page-soft,var(--soft));font-size:17.5px}
  header nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
  header nav a{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,background-color .2s}
  header nav a:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--btn-line,var(--ink))}
  header nav a[aria-current]{background:var(--hi);color:var(--ink)}
  .me{justify-self:center;background-color:var(--card,#fff);background-image:var(--grain);padding:11px 11px 38px;box-shadow:var(--lift);
    transform:rotate(2.5deg);width:212px;position:relative}
  .me img{aspect-ratio:1;object-fit:cover;width:100%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
  .me span{position:absolute;left:0;right:0;bottom:7px;text-align:center;font-family:'Caveat',cursive;font-size:22px;color:var(--soft)}

  /* washi tape, the original stripes, in each palette's colours */
  .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:2;
    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);transition:background-color .35s}
  .tape.g::before{background-color:var(--tb);transform:rotate(3deg)}
  .tape.b::before{background-color:var(--tc);transform:rotate(-2deg)}

  /* the board: newest first, each item into the shortest column (script below) */
  .board{columns:1;column-gap:30px}
  .board > *{break-inside:avoid;margin:0 0 34px;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 34px}

  /* every piece of paper tilts a touch and lifts on hover */
  .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: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}

  .note{padding:24px 24px 22px;background-image:var(--grain)}
  .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}
  .note p{font-size:16.5px;line-height:1.62}
  .note p a{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:3px}
  .n1{background-color:var(--n1)} .n2{background-color:var(--n2)} .n3{background-color:var(--n3)} .n4{background-color:var(--n4)}

  .polaroid{background-color:var(--card,#fff);background-image:var(--grain);padding:11px 11px 16px;margin:0}
  .polaroid img{width:100%;aspect-ratio:1;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
  .polaroid.tall img{aspect-ratio:3/4}
  .polaroid .meta{margin:14px 4px 4px}
  .polaroid .cap{font-family:'Caveat',cursive;font-size:22px;line-height:1.25;margin:0 4px}

  /* essays: a stitched border, a nod to the cross stitch */
  .essay{background-color:var(--card,#fff);background-image:var(--grain);padding:30px 28px 28px;outline:1.5px dashed var(--accent);outline-offset:-11px}
  .essay .kind{font-family:'Caveat',cursive;font-size:23px;color:var(--accent);font-weight:700;line-height:1}
  .essay img{width:100%;aspect-ratio:16/10;object-fit:cover;margin:14px 0 18px}
  .essay h2{font-family:'Fraunces',serif;font-weight:600;font-size:26px;line-height:1.16;margin:10px 0 10px;letter-spacing:-.015em;text-wrap:balance}
  .essay img + h2{margin-top:0}
  .essay p{color:var(--soft);font-size:16px}
  .essay .go{display:inline-block;margin-top:14px;font-weight:700;font-size:15px;color:var(--accent)}
  .essay:hover h2{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:var(--accent)}

  /* Currently: ruled lines sit exactly under each line of text */
  .now{background-color:var(--card,#fff);background-image:var(--grain);padding:24px 24px 22px}
  .now h3{font-family:'Caveat',cursive;font-size:32px;margin:0 0 6px;color:var(--accent);line-height:1}
  .now ul{list-style:none;margin:0;padding:0;
    background-image:repeating-linear-gradient(transparent 0 33px,var(--lines) 33px 34px)}
  .now li{line-height:34px;font-size:15.5px;color:var(--soft)}
  .now li b{font-weight:700;color:var(--ink);margin-right:4px}

  .older{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:8px}
  .older a{background:var(--btn,#fff);color:var(--btn-ink,var(--ink));border:1.5px solid var(--btn-line,var(--ink));border-radius:999px;padding:8px 20px;font-weight:700;font-size:15px;
    box-shadow:0 2px 0 var(--btn-line,var(--ink));transition:transform .15s,box-shadow .15s}
  .older a:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--btn-line,var(--ink))}
  footer{text-align:center;color:var(--page-soft,var(--soft));font-size:14.5px;margin-top:48px}
  footer span{font-family:'Caveat',cursive;font-size:20px;color:var(--page-accent,var(--accent))}

  @media(min-width:700px){
    header{grid-template-columns:minmax(0,1fr) auto}
    .board{columns:2}
  }
  @media(min-width:1040px){
    .board{columns:3}
  }
  @media(prefers-reduced-motion:reduce){*{transition:none!important}}
  .cap{font-family:'Caveat',cursive;font-size:22px;line-height:1.25}
  /* 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))}


  header.list{padding:48px 0 30px;display:block}
  .wrap > .bar + header{padding-top:48px}
  footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;text-align:left;color:var(--page-soft,var(--soft));font-size:14.5px;
    padding-top:18px;border-top:1px solid color-mix(in srgb,var(--page-soft,var(--soft)) 30%,transparent)}
  footer span{font-family:inherit;font-size:inherit;color:inherit}
  footer .soc{display:flex;gap:18px;flex-wrap:wrap}
  footer .soc a:hover{color:var(--page-accent,var(--accent))}
  footer .dev{font-family:'Caveat',cursive;font-size:20px;color:var(--page-accent,var(--accent))}
  .bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
  .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));display:inline-block}
  .btn[aria-current]{background:var(--hi);color:var(--ink)}

  /* 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}