/* Lifted unchanged from mockups/final-LOCKED-2026-09-30/note-ripley.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}
  :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:inherit;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}
  .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{transform:rotate(var(--rot)) translateY(-3px);box-shadow:var(--lift-hover)}
  .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)}
  .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)}

  /* one kind of note shows at a time (mockup toggle) */

  [data-note="text"] .v-text,[data-note="photo"] .v-photo{display:block}

  .stage{display:flex;flex-direction:column;align-items:center;margin-top:64px}
  .kick{font-family:'Caveat',cursive;font-size:25px;font-weight:700;color:var(--page-accent,var(--accent));margin-bottom:26px}

  /* the note itself, pinned up a little larger than on the homepage */
  .big{width:100%;max-width:620px;background-image:var(--grain);padding:42px 44px 38px;--rot:-1deg}
  .meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:14px;font-family:'Caveat',cursive;font-size:27px;line-height:1}
  .meta .d{color:var(--accent);font-weight:700}
  .meta a.t{color:var(--soft);font-weight:500;font-size:24px;border-bottom:1px dashed currentColor}
  .meta a.t:hover{color:var(--accent)}
  .big p{font-size:23px;line-height:1.55}

  .snap{width:100%;max-width:600px;background-color:var(--card,#fff);background-image:var(--grain);padding:14px 14px 22px;--rot:1deg}
  .snap img{width:100%;aspect-ratio:1;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
  .snap .meta{margin:18px 6px 8px}
  .snap .cap{font-family:'Caveat',cursive;font-size:27px;line-height:1.25;margin:0 6px}

  .full{margin-top:22px;font-size:14.5px;color:var(--page-soft,var(--soft))}

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

  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){ .around{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media(max-width:520px){ .big{padding:30px 26px 26px} .big p{font-size:19px} .snap .cap{font-size:24px} }
  @media(prefers-reduced-motion:reduce){*{transition:none!important}}

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