@charset "UTF-8";

@font-face { font-family: "Reenie Beanie"; src: url("../fonts/reenie-beanie.woff2") format("woff2"); font-display: swap; size-adjust: 135%; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-vietnamese.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Abril Fatface"; src: url("../fonts/abril-fatface.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Alfa Slab One"; src: url("../fonts/alfa-slab-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Bowlby One"; src: url("../fonts/bowlby-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("../fonts/special-elite.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Rubik Mono One"; src: url("../fonts/rubik-mono-one.woff2") format("woff2"); font-display: swap; }

:root {
    --desk: #e47ba5;
    --paper: #eee8d8;
    --ink: #171717;
    --muted: #515151;
    --pink: #f27ed5;
    --acid: #e3ff3e;
    --line: #b6b6b3;
    --serif: var(--gh-font-heading, "Bricolage Grotesque", "Arial Narrow", "Arial Black", sans-serif);
    --sans: var(--gh-font-body, "Space Grotesk", Arial, Helvetica, sans-serif);
    --hand: "Reenie Beanie", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: radial-gradient(ellipse at 30% 10%, #fff8 0, #ffffff35 28%, transparent 70%), repeating-linear-gradient(0deg, #7d234016 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, #fff5 0 1px, transparent 1px 3px), var(--desk); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.65; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .09; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
a { color: inherit; text-underline-offset: 4px; }
button, summary { cursor: pointer; }
button { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #2835b8; outline-offset: 6px; }
.site-header :focus-visible, .site-footer :focus-visible { outline-color: #171717; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--paper); padding: 12px 20px; }
.skip-link:focus { top: 16px; }
.desk { max-width: 1390px; margin: 0 auto; padding: 24px 88px 24px 45px; }
.site-header { display: flex; align-items: center; gap: 25px; color: #171717; margin-bottom: 27px; }
.wordmark { font-family: "Arial Black", Arial, sans-serif; font-size: 37px; font-weight: 900; letter-spacing: -4px; text-decoration: none; line-height: 1; transform: rotate(-4deg); }
.wordmark > span[aria-hidden] { display: inline-block; font-size: 28px; color: #171717; margin-left: 6px; vertical-align: top; }
.header-note { font-family: "Courier New", monospace; font-size: 10px; letter-spacing: -.025em; font-weight: bold; }
.mode-toggle { margin-left: auto; border: 2px solid #171717; background: var(--acid); padding: 8px 13px; display: flex; align-items: center; gap: 12px; font-family: "Courier New", monospace; font-weight: bold; font-size: 11px; border-radius: 0; min-height: 44px; box-shadow: 3px 3px 0 #171717; transform: rotate(1deg); }
.mode-toggle:hover { background: white; }
.mode-icon { font-family: Georgia, serif; font-size: 18px; border-right: 1px solid #171717; padding-right: 12px; }
.plain-intro { display: none; }
.journal { position: relative; border: 13px solid #494b39; border-radius: 7px 12px 10px 5px; background: var(--paper); box-shadow: 0 1px 2px #fff5, 1px 4px 0 #b9b29f, 2px 6px 0 #ebe3cf, 3px 8px 0 #b9b29f, 4px 11px 0 #3c4030, 8px 16px 16px #39252d66, 18px 30px 45px #39252d45; }
.journal::before { content: ""; position: absolute; inset: -9px; border: 1px dashed #c9c19a99; border-radius: 3px 8px 6px 2px; pointer-events: none; }
.journal::after { content: ""; position: absolute; height: 53px; width: 25px; background: var(--acid); border-inline: 1px solid #171717; left: 48%; bottom: -54px; clip-path: polygon(0 0,100% 0,100% 100%,50% 77%,0 100%); z-index: -1; }
.binding { position: absolute; z-index: 5; top: 42px; bottom: 42px; left: 50%; width: 38px; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.binding i { position: relative; width: 38px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(110deg, #ae9b72 0 2px, #d6c6a1 2px 3px); box-shadow: 0 1px 1px #3a302a88; transform: rotate(-8deg); }
.binding i::before, .binding i::after { content: ""; position: absolute; top: -1px; width: 4px; height: 5px; background: #594d3a; border-radius: 50%; z-index: -1; }
.binding i::before { left: -1px; }
.binding i::after { right: -1px; }
.binding i:nth-child(even) { transform: rotate(12deg); }
main { min-width: 0; }
main:focus { outline: none; }
.spread { display: grid; grid-template-columns: 1fr 1fr; min-height: 740px; }
.paper-page { position: relative; min-width: 0; padding: 30px 38px 48px; background-color: var(--paper); background-image: radial-gradient(ellipse at 3% 50%, #93784b24, transparent 45%), radial-gradient(ellipse at 90% 95%, #ac875526, transparent 25%), repeating-linear-gradient(0deg, transparent, transparent 3px, #00000006 3px, #00000006 4px); }
.spread > .paper-page:first-child { border-right: 1px solid #8e8e89; box-shadow: inset -25px 0 20px -24px #0008; }
.spread > .paper-page:last-child { background-color: #e9e3d3; background-image: radial-gradient(ellipse at 95% 90%, #a28a5633, transparent 50%), linear-gradient(90deg, transparent 23px, #b0476e40 23px, #b0476e40 25px, transparent 25px), repeating-linear-gradient(0deg, transparent, transparent 27px, #586dd520 27px, #586dd520 28px); box-shadow: inset 25px 0 20px -24px #0008; }
.page-eyebrow { font-family: "Courier New", monospace; font-size: 9px; line-height: 1.5; letter-spacing: .015em; display: flex; justify-content: space-between; gap: 10px; font-weight: bold; border-bottom: 2px solid #171717; padding-bottom: 10px; }
.page-eyebrow > span[aria-hidden] { font-size: 22px; line-height: .65; }
.name-collage { display: flex; flex-direction: column; align-items: flex-start; margin: 24px 0 0; font-weight: normal; line-height: 1; text-transform: uppercase; position: relative; z-index: 1; }
.name-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.name-collage > span[aria-hidden] { display: flex; align-items: center; flex-wrap: nowrap; width: fit-content; position: relative; filter: drop-shadow(0 0 .6px #2a1d1299) drop-shadow(.6px 1px .4px #2a1d1240) drop-shadow(0 0 3px #8a6d3a40); }
.first-name { font-size: clamp(66px, 7.4vw, 104px); }
.middle-name { font-size: clamp(56px, 6.3vw, 88px); margin-top: -6px; }
.last-name { font-size: clamp(50px, 5.6vw, 78px); margin-top: -8px; }
.cut { display: inline-block; position: relative; padding: .06em .1em .04em; margin: 0 .015em; line-height: 1; color: #171717; background-color: #f6f2e6; box-shadow: inset 0 0 0 1px #ffffff4d, inset 0 -3px 4px #0000001c, inset 2px 0 3px #ffffff26; transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)); clip-path: polygon(3% 0, 97% 4%, 100% 92%, 94% 100%, 0 97%); }
.cut:nth-child(3n) { clip-path: polygon(0 5%, 92% 0, 100% 100%, 6% 95%); --y: .05em; }
.cut:nth-child(3n+1) { clip-path: polygon(6% 3%, 100% 0, 96% 96%, 0 100%); --y: -.04em; }
.cut::before, .cut::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.cut::before { z-index: 1; background: linear-gradient(var(--crease, 112deg), transparent 34%, #ffffff3d 44%, transparent 49%, #0000001a 53%, transparent 64%); }
.cut::after { z-index: 2; mix-blend-mode: multiply; opacity: .55; background-image: radial-gradient(#00000026 .55px, transparent .8px), url("data:image/svg+xml,%3Csvg viewBox=%270 0 120 120%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27g%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%271.1%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .55 0%27/%3E%3C/filter%3E%3Crect width=%27120%27 height=%27120%27 filter=%27url(%23g)%27/%3E%3C/svg%3E"); background-size: 3.5px 3.5px, 120px 120px; }
.cut:nth-child(2n) { --crease: 64deg; }
.cut:nth-child(4n+1)::before { background: linear-gradient(150deg, #ffffff30, transparent 30%), linear-gradient(28deg, transparent 52%, #00000017 55%, #ffffff33 58%, transparent 66%); }
.c1, .c4 { box-shadow: inset 0 0 0 2px #f4efe2, inset 0 0 0 3px #00000014, inset 0 -3px 4px #0000001c; }
.c1 { font-family: "Abril Fatface", Didot, "Bodoni 72", Georgia, serif; font-size: 1.04em; color: #f8f5ec; background-color: #171717; --r: -6deg; }
.c2 { font-family: "Bowlby One", "Arial Black", sans-serif; font-size: .78em; background-color: var(--acid); --r: 4deg; padding-block: .14em .1em; }
.c3 { font-family: "Special Elite", "American Typewriter", "Courier New", monospace; font-size: .92em; background-color: #f1ecdc; --r: -3deg; }
.c4 { font-family: "Alfa Slab One", Rockwell, Georgia, serif; font-size: .98em; background-color: #f06b9e; --r: 7deg; }
.c5 { font-family: "Rubik Mono One", "Arial Black", sans-serif; font-size: .72em; background-color: #c9a46a; --r: -8deg; padding-block: .18em .14em; }
.c6 { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: bold; font-size: 1em; color: #b3132f; background-color: #fffdf6; --r: 5deg; }
.c7 { font-family: "Arial Black", Arial, sans-serif; font-weight: 900; font-size: .84em; background-color: #69b4ed; --r: -4deg; padding-block: .1em .08em; }
.c8 { font-family: "Abril Fatface", Didot, Georgia, serif; font-size: .9em; background-color: #f2a13d; --r: 9deg; }
.handwritten { font-family: var(--hand); font-size: 20px; font-weight: normal; }
.name-note { display: block; transform: rotate(-3deg); margin: 18px 0 12px 12px; font-size: 14px; line-height: 1.3; }
.cover-collection { display: flex; align-items: flex-start; gap: 20px; margin: 30px 0 28px; }
.portrait-print { position: relative; display: block; width: 65%; background: linear-gradient(105deg, #fff8, transparent 30%, #a18b5c18), #f1ecde; padding: 10px 10px 19px; transform: rotate(-7deg); box-shadow: 1px 2px 3px #49372166, 5px 9px 10px #49372133; text-decoration: none; transition: transform .2s ease; border: 1px solid #b9ad96; border-bottom: 3px double #b9ad96; }
.portrait-print:hover, .portrait-print:focus-visible { transform: rotate(-3deg) translateY(-4px); }
.portrait-print img { width: 100%; display: block; filter: sepia(.18) saturate(.7) contrast(1.1); }
.photo-caption { display: block; font-family: "Courier New", monospace; font-weight: bold; font-size: 10px; margin-top: 10px; text-align: center; line-height: 1.4; }
.tape { position: absolute; z-index: 1; height: 35px; width: 112px; background: linear-gradient(90deg, #bca56a55, #f0e2b155 20% 75%, #ae945b55), repeating-linear-gradient(1deg, #b09a6333 0 1px, transparent 1px 3px), #ddcb95b8; box-shadow: inset 0 1px #fff5, inset 0 -1px #8e784d66; left: 50%; top: -14px; transform: translateX(-50%) rotate(-5deg); clip-path: polygon(4% 0,97% 5%,94% 20%,100% 38%,96% 55%,100% 76%,97% 97%,1% 100%,4% 70%,0 60%,5% 40%,1% 18%); }
.tape-top { transform: translateX(-50%) rotate(9deg); }
.hover-label { position: absolute; left: 5%; right: 5%; bottom: 17%; padding: 8px; background: var(--acid); font-size: 12px; font-weight: bold; text-align: center; opacity: 0; transform: translateY(3px); transition: opacity .2s, transform .2s; }
.portrait-print:is(:hover, :focus-visible) .hover-label { opacity: 1; transform: translateY(0); }
.small-collection { flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 4px; gap: 20px; }
.postage-stamp { display: flex; flex-direction: column; align-items: center; width: 106px; background: repeating-linear-gradient(0deg, #6e6c4020 0 1px, transparent 1px 3px), #d8d0b1; border: 3px double #65724f; outline: 2px dashed #c3b991; outline-offset: 2px; padding: 9px 5px 6px; font-family: "Courier New", monospace; font-weight: bold; font-size: 9px; line-height: 1.5; text-align: center; transform: rotate(10deg); letter-spacing: -.04em; box-shadow: 2px 4px 5px #48352044; }
.stamp-star { font-size: 31px; line-height: 1.2; color: #171717; }
.camp-patch { display: flex; flex-direction: column; align-items: center; width: 119px; text-align: center; text-decoration: none; transform: rotate(9deg); transition: transform .2s; }
.camp-patch img { display: block; width: 112px; filter: drop-shadow(2px 4px 2px #48352066); }
.camp-patch > span:not(.sr-only) { background: #eee1bb; padding: 3px 6px; margin-top: -6px; font: bold 10px/1.3 "Courier New", monospace; box-shadow: 1px 2px 3px #48352044; }
.camp-patch:is(:hover, :focus-visible) { transform: rotate(-4deg); }
.section-patch { width: 180px; align-self: center; margin: 30px 0; transform: rotate(-9deg); filter: drop-shadow(3px 6px 3px #48352066); }
.resume-scrap { background: #171717; color: #fff; padding: 4px 9px; font-family: "Courier New", monospace; font-size: 11px; white-space: nowrap; transform: rotate(-6deg); }
.arrow-note { font-size: 14px; transform: rotate(9deg); line-height: 1.2; text-align: center; }
.arrow-note > span { font-size: 39px; display: block; }
.page-bottom { display: flex; justify-content: space-between; position: absolute; bottom: 20px; left: 38px; right: 38px; font-family: "Courier New", monospace; font-size: 8px; letter-spacing: .02em; border-top: 2px solid #171717; padding-top: 10px; }
.welcome-note { margin: 26px 0; }
.tiny-heading { color: #171717; font-size: 19px; transform: rotate(-3deg); display: inline-block; margin-bottom: 4px; text-decoration: underline; text-decoration-color: #ed3bb6; text-decoration-thickness: 3px; }
h2 { font-family: var(--serif); font-weight: 900; font-size: 48px; line-height: 1.02; letter-spacing: -.025em; margin: 14px 0 22px; }
h2 em, .archive h1 em { font-weight: inherit; color: #171717; font-style: normal; background: var(--acid); padding-inline: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.welcome-note h2 { font-size: clamp(32px, 3.75vw, 52px); }
.welcome-note h2 > span:first-child { background: #171717; color: #fff; padding: 0 8px; }
.welcome-note h2 em { background: var(--pink); }
.welcome-note p { font-size: 14px; max-width: 390px; line-height: 1.75; }
.reno-introduction { display: flow-root; }
:is(.reno-video-trigger, .new-york-video-trigger) { padding: 0; border: 0; background: none; text-decoration: underline dotted 2px; text-underline-offset: 3px; }
:is(.reno-video-trigger, .new-york-video-trigger):is(:hover, :focus-visible) { background: var(--acid); text-decoration-style: solid; }
:is(.reno-video-panel, .new-york-video-panel) { width: min(100%, 390px); margin-bottom: 16px; padding: 10px; border: 2px solid #171717; background: #fffdf6; box-shadow: 4px 4px 0 #171717; }
.reno-video-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 14px; }
.reno-video-actions { display: flex; gap: 6px; }
.reno-video-play, .reno-video-close { min-width: 44px; min-height: 44px; padding: 6px 9px; border: 2px solid #171717; font-size: 12px; font-weight: bold; }
.reno-video-play { background: #fff; }
.reno-video-close { background: var(--acid); }
:is(.reno-video-frame, .new-york-video-frame) { display: block; width: 100%; min-height: 200px; aspect-ratio: 16 / 9; border: 0; background: #171717; }
:is(.reno-video-panel, .new-york-video-panel) .reno-video-help { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
.new-york-video-panel { position: relative; z-index: 21; }
.new-york-rain { position: fixed; inset: 0; z-index: 19; overflow: hidden; pointer-events: none; }
.new-york-rain span { position: absolute; top: -40px; font-size: 28px; animation: new-york-fall 4s linear infinite; }
@keyframes new-york-fall { to { transform: translateY(calc(100vh + 40px)); } }
.welcome-signoff { margin-top: 17px; color: var(--muted); }
.welcome-badges { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin: 22px 0 26px; }
.welcome-badges .camp-patch { width: 86px; transform: rotate(-7deg); }
.welcome-badges .camp-patch:nth-child(2) { transform: rotate(6deg); }
.welcome-badges .camp-patch:nth-child(3) { transform: rotate(-3deg); }
.welcome-badges .camp-patch img { width: 74px; }
.welcome-badges .camp-patch:is(:hover, :focus-visible) { transform: rotate(0) translateY(-3px); }
.pink-note { position: relative; display: block; padding: 26px 23px 24px; margin: 34px 4px 26px 8px; background: linear-gradient(120deg, #ffffff30, transparent 50%, #99813b22), repeating-linear-gradient(178deg, transparent 0 30px, #17171712 31px 32px), #d9dfa0; transform: rotate(3deg); box-shadow: 1px 2px 2px #49372155, 3px 8px 10px #49372133; text-decoration: none; border: 1px solid #aeb47b; border-bottom: 4px dashed var(--paper); }
.liftable { transition: transform .2s, box-shadow .2s; }
.liftable:hover, .liftable:focus-visible { transform: rotate(0) translateY(-4px); box-shadow: 3px 10px 12px #49372155; }
.note-label { font-family: "Courier New", monospace; font-size: 9px; letter-spacing: -.03em; font-weight: bold; }
.note-title { display: block; font-family: var(--serif); font-size: 38px; line-height: .95; letter-spacing: -.015em; margin: 12px 0 18px; font-weight: 900; }
.note-link { font-size: 11px; border-bottom: 1px solid #171717; padding-bottom: 4px; }
.note-link > span { margin-left: 5px; }
.note-doodle { position: absolute; right: 12px; top: -18px; font-family: Arial, sans-serif; font-size: 42px; line-height: 1; color: #171717; transform: rotate(-12deg); }
.bottom-scraps { display: flex; align-items: flex-start; gap: 20px; padding: 32px 0 37px; }
.secret-note { flex: 1; position: relative; z-index: 2; }
.secret-note summary { display: flex; flex-direction: column; align-items: center; list-style: none; min-height: 70px; padding: 5px; }
.secret-note summary::-webkit-details-marker { display: none; }
.lightbulb-doodle { display: block; width: 76px; height: 76px; color: var(--ink); transform: rotate(-8deg); }
.lightbulb-fill { fill: var(--acid); opacity: .7; }
.secret-note p { position: absolute; left: -12px; bottom: calc(100% - 6px); width: 230px; margin: 0; background: var(--acid); padding: 20px; box-shadow: 4px 4px 0 #171717; font-size: 13px; border: 2px solid #171717; }
.hello-ticket { position: relative; display: flex; flex-direction: column; width: 56%; background: #b9b6fc; border: 2px solid #171717; outline: 4px solid #b9b6fc; padding: 9px 10px; text-align: center; text-decoration: none; transform: rotate(-6deg); box-shadow: 5px 5px 0 #171717; }
.hello-ticket > span { font-family: "Courier New", monospace; font-size: 7px; letter-spacing: -.02em; font-weight: bold; }
.hello-ticket strong { font-family: var(--serif); font-size: 29px; font-weight: 900; padding: 4px 0 7px; border-bottom: 2px dashed #171717; margin-bottom: 6px; white-space: nowrap; }
.clippings { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 15px; }
.clippings a { padding: 7px 10px; background: #171717; color: #fff; font-family: "Courier New", monospace; font-size: 10px; font-weight: bold; text-decoration: none; }
.clippings a:nth-child(2) { background: var(--pink); color: #171717; transform: rotate(-3deg); }
.index-tabs { position: absolute; left: calc(100% - 3px); top: 30px; width: 58px; display: flex; flex-direction: column; gap: 7px; z-index: 3; }
.index-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 132px; padding: 12px 9px 10px 12px; border: 1px solid #82755d; border-left: 0; border-radius: 0 12px 12px 0; background: linear-gradient(90deg, #39352c50, transparent 12px), repeating-linear-gradient(0deg, #fff2 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, #2c261814 0 1px, transparent 1px 3px), var(--tab-color); box-shadow: 1px 3px 4px #352a264d, inset 0 1px #fff9, inset 0 -2px #4e3a2220; color: #171717; text-decoration: none; transition: box-shadow .15s; }
.index-tab::before { content: ""; position: absolute; inset: 5px 5px 5px 3px; border: 1px dashed #665a4375; border-left: 0; border-radius: 0 8px 8px 0; pointer-events: none; }
.index-tab::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 8px; background: linear-gradient(90deg, #322a2550, transparent); pointer-events: none; }
.index-tab > span:first-child { position: relative; writing-mode: vertical-rl; padding: 8px 4px; white-space: nowrap; background: repeating-linear-gradient(0deg, #83714712 0 1px, transparent 1px 3px), #f2e9ce; border: 1px solid #b1a17f; box-shadow: 0 1px 2px #352a2633; font: bold 11px/1.2 "Courier New", monospace; text-align: center; transform: rotate(var(--label-tilt)); }
.index-tab > .tab-number { position: relative; font: bold 10px/1 "Courier New", monospace; }
.index-tab:is(:hover, :focus-visible) { box-shadow: 1px 5px 7px #352a2666, inset 0 1px #fff9; }
.index-tab:is(:hover, :focus-visible) > span:first-child, .index-tab[aria-current] > span:first-child { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.index-tab[aria-current] { border-color: #554936; box-shadow: 1px 4px 5px #352a2666, inset 0 0 0 1px #675a4255; }
.tab-home { --tab-color: #d9ef40; --label-tilt: -1deg; }
.tab-about { --tab-color: #f06b9e; --label-tilt: 1deg; }
.tab-writing { --tab-color: #f2a13d; --label-tilt: -1deg; }
.tab-projects { --tab-color: #69b4ed; --label-tilt: 1deg; }
.tab-contact { --tab-color: #b98bea; --label-tilt: -1deg; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; font-family: "Courier New", monospace; font-size: 9px; color: #171717; margin-top: 46px; letter-spacing: -.02em; font-weight: bold; }
.site-footer a { text-decoration-color: currentColor; }
.inner-spread { min-height: 740px; }
.section-cover { display: flex; flex-direction: column; }
.section-cover > .handwritten { margin-top: 65px; font-size: 25px; transform: rotate(-4deg); }
.section-cover h2 { font-size: clamp(34px, 4vw, 56px); margin-top: 22px; overflow-wrap: anywhere; }
.section-cover p { max-width: 320px; font-size: 15px; }
.about-portrait { width: 70%; align-self: center; transform: rotate(-7deg); border: 10px solid #dedcd2; margin: 25px; box-shadow: 2px 3px 0 #171717; filter: grayscale(1) contrast(1.65); }
.section-content { padding-top: 85px; }
.section-content > h3, .empty-note h3, .contact-content h3 { font-family: var(--serif); font-size: 30px; font-weight: normal; line-height: 1.2; }
.section-content p { font-size: 15px; line-height: 1.85; }
.extra-links { border-top: 1px solid var(--line); margin-top: 35px; padding-top: 20px; }
.extra-links h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.nav { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 20px; }
.nav a { display: inline-block; padding: 6px 0; }
.big-asterisk { font-size: 190px; color: #171717; text-shadow: 6px 6px 0 #f27ed5; line-height: 1; transform: rotate(9deg); margin: 20px auto; }
.project-sticker { background: #171717; color: var(--acid); font-size: 22px; font-weight: bold; line-height: 1.1; padding: 25px; border: 2px dashed var(--acid); outline: 7px solid #171717; transform: rotate(-6deg); align-self: center; margin: 50px 0; text-align: center; }
.project-sticker em { font-family: var(--serif); font-size: 34px; font-weight: normal; }
.entry-card { border-bottom: 1px dashed #77766c; }
.entry-card > a { display: block; padding: 23px 0; text-decoration: none; }
.entry-card > a:hover h3 { text-decoration: underline; text-decoration-color: #b00078; text-decoration-thickness: 3px; }
.entry-meta { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.entry-card h3 { font-family: var(--serif); font-size: 24px; line-height: 1.2; font-weight: normal; margin: 7px 0; }
.entry-card h3 > span { font-size: 19px; }
.entry-card p { margin: 0; font-size: 13px; }
.text-link { display: inline-block; font-size: 13px; margin-top: 25px; padding: 7px 0; }
.empty-note { margin-top: 42px; background: var(--acid); padding: 23px; transform: rotate(-2deg); border: 2px solid #171717; box-shadow: 4px 4px 0 #171717; }
.empty-note h3 { margin-top: 0; }
.contact-heart { font-family: Georgia, serif; color: #171717; text-shadow: 5px 5px 0 #f27ed5; font-size: 160px; margin-left: 30px; line-height: 1.4; transform: rotate(-12deg); }
.contact-content { display: flex; flex-direction: column; justify-content: center; padding-top: 45px; padding-bottom: 65px; }
.contact-link { font-family: var(--serif); font-size: 29px; margin: 20px 0; }
.contact-pending { border-block: 1px solid var(--line); padding: 20px 0; }
.contact-content > .handwritten { margin-top: 40px; font-size: 16px; }
.archive, .article { padding: 65px 10%; min-height: 740px; }
.archive h1, .article h1 { font-family: var(--serif); font-weight: normal; font-size: clamp(36px, 5vw, 64px); letter-spacing: -.045em; line-height: 1.1; overflow-wrap: anywhere; }
.archive-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.pagination { display: flex; justify-content: space-between; gap: 20px; padding: 30px 0; font-size: 13px; }
.article { padding-inline: max(35px, 13%); }
.article-header { margin-bottom: 40px; }
.back-link { display: inline-block; margin-bottom: 25px; font-size: 12px; }
.article-excerpt { font-size: 20px; font-family: var(--serif); }
.byline { font-size: 12px; }
.feature-image { margin: 30px 0; }
.feature-image img { display: block; width: 100%; }
figcaption { font-size: 12px; color: var(--muted); text-align: center; margin-top: 10px; }
.gh-content { overflow-wrap: anywhere; font-size: 17px; line-height: 1.8; }
.gh-content > * { max-width: 100%; }
.gh-content h2 { margin-top: 45px; font-size: 36px; }
.gh-content h3 { font-family: var(--serif); font-size: 26px; line-height: 1.3; }
.gh-content pre { overflow: auto; background: #e7e2d4; padding: 20px; font-size: 13px; }
.gh-content code { font-size: .85em; }
.gh-content blockquote { margin: 30px 0; padding: 5px 25px; border-left: 3px solid #ac5a65; font-style: italic; font-family: var(--serif); font-size: 24px; }
.gh-content figure { margin: 30px 0; }
.gh-content iframe, .gh-content video { max-width: 100%; }
.gh-content table { display: block; overflow-x: auto; border-collapse: collapse; }
.gh-content td, .gh-content th { padding: 10px; border: 1px solid var(--line); }
.kg-width-wide { width: calc(100% + 50px); max-width: calc(100% + 50px); margin-left: -25px !important; }
.kg-width-full { width: calc(100% + 80px); max-width: calc(100% + 80px); margin-left: -40px !important; }
.kg-image { display: block; margin-inline: auto; }
.kg-gallery-container { display: flex; flex-direction: column; gap: 10px; }
.kg-gallery-row { display: flex; gap: 10px; }
.kg-gallery-image { flex: 1; min-width: 0; }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; }
.kg-bookmark-card { border: 1px solid var(--line); }
.kg-bookmark-container { display: flex; text-decoration: none; }
.kg-bookmark-content { padding: 20px; flex: 1; min-width: 0; }
.kg-bookmark-title { font-weight: bold; }
.kg-bookmark-description, .kg-bookmark-metadata { font-size: 12px; margin-top: 10px; }
.kg-bookmark-icon { width: 20px; vertical-align: middle; margin-right: 8px; }
.kg-bookmark-thumbnail { flex-basis: 30%; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.kg-callout-card { display: flex; gap: 15px; padding: 20px; }
.kg-button-card { margin-block: 24px; }
.kg-button-card a { display: inline-block; background: var(--ink); color: var(--paper); padding: 9px 20px; text-decoration: none; }
.kg-card-hascaption { margin-bottom: 35px; }
.article-tags { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; }
.article-comments { margin-top: 45px; }

@media (min-width: 1450px) {
    .desk { padding-top: 40px; }
    .site-header { margin-bottom: 35px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
    .desk { padding: 20px 80px 20px 25px; }
    .paper-page { padding-inline: 25px; }
    .first-name { font-size: 76px; }
    .middle-name { font-size: 62px; }
    .last-name { font-size: 54px; }
    .name-note { font-size: 12px; margin-left: 22px; }
    .round-sticker { width: 87px; height: 87px; font-size: 15px; }
    .round-sticker em { font-size: 13px; }
    .postage-stamp { width: 82px; font-size: 8px; }
    .welcome-note h2 { font-size: 31px; }
    .note-title { font-size: 31px; }
    .note-link { font-size: 10px; }
    .hello-ticket strong { font-size: 17px; }
    .bottom-scraps { gap: 10px; }
    .page-bottom { left: 25px; right: 25px; }
    .header-note { display: none; }
}
@media (max-width: 1100px) {
    .desk { padding: 18px 20px 22px; }
    .site-header { margin-bottom: 22px; gap: 12px; }
    .wordmark { font-size: 32px; white-space: nowrap; }
    .header-note { display: none; }
    .mode-toggle { font-size: 9px; gap: 8px; padding: 5px 8px; }
    .mode-icon { font-size: 15px; padding-right: 8px; }
    .journal { border-width: 6px; display: flex; flex-direction: column; }
    .binding { display: none; }
    .index-tabs { position: sticky; top: 0; left: auto; order: -1; width: 100%; flex-direction: row; gap: 2px; padding: 7px 3px 0; background: repeating-linear-gradient(90deg, #ffffff0d 0 1px, transparent 1px 3px), #494b39; }
    .index-tab { display: flex; flex: 1; min-width: 0; min-height: 68px; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 3px 7px; border: 1px solid #82755d; border-bottom: 0; border-radius: 8px 8px 0 0; }
    .index-tab::before { inset: 4px 3px 0; border: 1px dashed #665a4375; border-bottom: 0; border-radius: 5px 5px 0 0; }
    .index-tab::after { top: auto; right: 0; bottom: 0; width: auto; height: 5px; background: linear-gradient(0deg, #322a2538, transparent); }
    .index-tab > span:first-child { display: grid; writing-mode: horizontal-tb; white-space: normal; place-items: center; width: 100%; max-width: 140px; min-height: 28px; padding: 2px; font-size: 10px; transform: none; }
    .index-tab > .tab-number { font-size: 9px; }
    .spread { display: block; min-height: 0; }
    html:not([data-mode="plain"]) [data-journal-page] { scroll-margin-top: 88px; }
    .paper-page { padding: 25px 28px 50px; }
    .spread > .paper-page:first-child { border-right: 0; border-bottom: 1px solid var(--line); box-shadow: none; }
    .spread > .paper-page:last-child { box-shadow: none; }
    .cover-page { min-height: 720px; }
    .name-collage { max-width: 380px; margin: 30px 0 0; }
    .first-name { font-size: clamp(56px, 15vw, 104px); }
    .middle-name { font-size: clamp(46px, 12.5vw, 88px); }
    .last-name { font-size: clamp(40px, 11vw, 78px); }
    .name-note { font-size: 13px; margin-left: 5px; }
    .cover-collection { max-width: 370px; margin: 32px 0 20px; gap: 20px; }
    .portrait-print { width: 62%; }
    .small-collection { gap: 22px; }
    .postage-stamp { width: 83px; font-size: 8px; }
    .camp-patch { width: 96px; }
    .camp-patch img { width: 90px; }
    .page-bottom { left: 28px; right: 28px; }
    .welcome-note { margin: 20px 0 30px; }
    .welcome-note h2 { font-size: clamp(29px, 7.8vw, 44px); }
    .welcome-note p { font-size: 14px; max-width: 60ch; }
    .pink-note { margin-top: 40px; }
    .bottom-scraps { padding-top: 32px; padding-bottom: 25px; }
    .hello-ticket strong { font-size: 20px; }
    .section-cover > .handwritten { margin-top: 35px; }
    .section-cover h2 { font-size: 43px; }
    .about-portrait { max-width: 240px; }
    .section-content { padding-top: 30px; min-height: 300px; }
    .big-asterisk { font-size: 120px; margin: 10px auto 0; }
    .project-sticker { margin-bottom: 20px; font-size: 18px; padding: 20px; }
    .contact-heart { font-size: 100px; }
    .archive, .article { padding: 30px 26px; min-height: 500px; }
    .archive-grid { grid-template-columns: 1fr; }
    .kg-width-full, .kg-width-wide { width: 100%; max-width: 100%; margin-left: 0 !important; }
    .site-footer { flex-direction: column; align-items: center; text-align: center; gap: 8px; font-size: 8px; margin-top: 38px; }
}
@media (min-width: 700px) and (max-width: 1100px) {
    .cover-page, .welcome-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); column-gap: clamp(24px, 4vw, 44px); align-items: start; padding-bottom: 80px; }
    .cover-page { grid-template-areas: "eyebrow eyebrow" "name collection" "note collection"; grid-template-rows: auto auto 1fr; min-height: 0; }
    .cover-page > .page-eyebrow { grid-area: eyebrow; }
    .cover-page > .name-collage { grid-area: name; max-width: none; margin-top: 32px; }
    .cover-page > .name-note { grid-area: note; margin: 18px 0 0 5px; }
    .cover-page > .cover-collection { grid-area: collection; width: 100%; margin: 40px 0 0; justify-self: center; }
    .cover-page .first-name { font-size: clamp(62px, 8.9vw, 98px); }
    .cover-page .middle-name { font-size: clamp(54px, 7.6vw, 82px); }
    .cover-page .last-name { font-size: clamp(47px, 6.7vw, 72px); }
    .welcome-page { grid-template-areas: "eyebrow eyebrow" "welcome note" "welcome scraps" "clippings clippings"; }
    .welcome-page > .page-eyebrow { grid-area: eyebrow; }
    .welcome-page > .welcome-note { grid-area: welcome; min-width: 0; margin: 26px 0 20px; }
    .welcome-note h2 { font-size: clamp(31px, 4.7vw, 44px); }
    .welcome-page > .pink-note { grid-area: note; min-width: 0; margin: 40px 8px 20px; }
    .welcome-page .note-title { font-size: clamp(27px, 3.4vw, 34px); }
    .welcome-page > .bottom-scraps { grid-area: scraps; }
    .welcome-page > .clippings { grid-area: clippings; }
    .section-cover { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 30%); grid-template-rows: auto auto auto 1fr; column-gap: clamp(24px, 4vw, 44px); align-items: start; }
    .section-cover > .page-eyebrow { grid-column: 1 / -1; }
    .section-cover > .handwritten { grid-column: 1; grid-row: 2; }
    .section-cover > h2 { grid-column: 1; grid-row: 3; }
    .section-cover > p { grid-column: 1; grid-row: 4; }
    .section-cover > .about-portrait, .section-cover > .section-patch { grid-column: 2; grid-row: 2 / 5; justify-self: center; align-self: center; margin: 24px 0; }
    .section-cover > .about-portrait { width: min(100%, 240px); }
    .section-cover > .foil-writing { left: auto; right: 12px; bottom: 20px; }
    html:not([data-mode="plain"]) .section-content > :is(.gh-content, .extra-links, .empty-note),
    html:not([data-mode="plain"]) .section-content p { max-width: 70ch; }
    html:not([data-mode="plain"]) .entry-card h3 { text-wrap: pretty; }
}
@media (max-width: 370px) {
    .desk { padding-inline: 10px; }
    .paper-page { padding-inline: 20px; }
    .name-note { font-size: 12px; margin-left: 10px; }
    .first-name { font-size: 56px; }
    .middle-name { font-size: 46px; }
    .last-name { font-size: 40px; }
    .page-eyebrow { font-size: 7px; }
    .tiny-heading { font-size: clamp(16px, 5vw, 19px); }
    .hello-ticket strong { font-size: 17px; }
    .cover-collection { gap: 12px; }
    .postage-stamp { width: 72px; font-size: 7px; }
    .camp-patch { width: 80px; }
    .camp-patch img { width: 78px; }
    .camp-patch > span:not(.sr-only) { font-size: 9px; }
    .welcome-badges { gap: 8px; }
    .welcome-badges .camp-patch { width: 70px; }
    .welcome-badges .camp-patch img { width: 62px; }
    .resume-scrap { font-size: 9px; }
    .note-title { font-size: 32px; }
    .secret-note summary .handwritten { font-size: 13px; }
}
/* Metallic stickers: shared die-cut foil look for decoration and visitor stickers. */
.sticker-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.foil-sticker, .placed-sticker svg, .sticker-choice svg, .sticker-toggle svg { display: block; overflow: visible; filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(1px 3px 2px #3a2a1f66); }
.foil-sticker { position: absolute; z-index: 4; width: 62px; height: 62px; pointer-events: none; transform: rotate(var(--r, -8deg)); }
.foil-portrait { top: -14px; right: -18px; --r: 14deg; width: 58px; height: 58px; }
.foil-note { right: -20px; bottom: -28px; --r: -12deg; width: 48px; height: 48px; }
.foil-ticket { left: -30px; top: -23px; --r: 18deg; width: 42px; height: 42px; }
.foil-about { top: 120px; right: 42px; --r: 10deg; width: 70px; height: 70px; }
.foil-writing { bottom: 70px; left: 38px; --r: -18deg; }
.foil-contact { bottom: 80px; right: 50px; --r: 12deg; width: 74px; height: 74px; }
.sticker-toggle { margin-left: auto; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 7px 14px 7px 9px; border: 2px solid #171717; border-radius: 0; font-family: "Courier New", monospace; font-weight: bold; font-size: 11px; background: linear-gradient(115deg, #b9bec4, #f6f7f9 30%, #a7adb3 48%, #fff 62%, #c4c9ce); box-shadow: 3px 3px 0 #171717; transform: rotate(-1.5deg); }
.sticker-toggle svg { width: 26px; height: 26px; filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff) drop-shadow(0 1px 1px #0005); }
.sticker-toggle:hover, .sticker-toggle[aria-expanded="true"] { background: #fff; }
.sticker-toggle:not([hidden]) + .mode-toggle { margin-left: 0; }
.sticker-sheet { position: fixed; z-index: 40; right: 24px; bottom: 24px; width: min(330px, calc(100vw - 32px)); padding: 16px 18px 18px; color: #171717; background: radial-gradient(circle at 20% 0, #fff, transparent 60%), repeating-linear-gradient(0deg, transparent 0 17px, #9fb6d01f 17px 18px), repeating-linear-gradient(90deg, transparent 0 17px, #9fb6d01f 17px 18px), #f7f8fa; border: 1px solid #c3c7cc; border-radius: 10px; box-shadow: 0 2px 0 #dfe2e6, 0 3px 0 #b9bdc2, 6px 16px 30px #39252d55; transform: rotate(-1deg); }
.sticker-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sticker-sheet h2 { margin: 0; font-family: var(--hand); font-weight: normal; font-size: 30px; line-height: 1; transform: rotate(-2deg); }
.sticker-sheet p { margin: 8px 0 12px; font-size: 13px; line-height: 1.45; color: #3b3b3b; }
.sticker-close, .sticker-clear { min-height: 44px; padding: 6px 12px; border: 1.5px solid #171717; background: #fff; font-family: "Courier New", monospace; font-weight: bold; font-size: 12px; }
.sticker-clear { width: 100%; margin-top: 12px; background: transparent; border-style: dashed; }
.sticker-close:hover, .sticker-clear:hover { background: var(--acid); }
.sticker-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sticker-choice { display: grid; place-items: center; width: 100%; aspect-ratio: 1; min-height: 56px; padding: 9px; background: none; border: 1.5px dashed #b8bec6; border-radius: 12px; }
.sticker-choice svg { width: 100%; height: 100%; transition: transform .15s ease; }
.sticker-choice:hover svg, .sticker-choice:focus-visible svg { transform: rotate(-8deg) scale(1.12); }
.sticker-choice:focus-visible { outline-offset: 2px; }
.sticker-choice { touch-action: none; cursor: grab; }
.sticker-choice.is-peeled svg { opacity: .25; transform: scale(.9); }
.sticker-ghost { position: fixed; z-index: 60; width: 72px; height: 72px; margin: -36px 0 0 -36px; pointer-events: none; transform: rotate(-8deg) scale(1.1); }
.sticker-ghost svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(5px 14px 10px #3a2a1f55); }
.sticker-layer { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.placed-sticker { position: absolute; width: 64px; height: 64px; padding: 0; margin: -32px 0 0 -32px; background: none; border: 0; pointer-events: auto; touch-action: none; cursor: grab; transform: rotate(var(--r, 0deg)); }
.placed-sticker svg { width: 100%; height: 100%; transition: transform .15s ease, filter .15s ease; }
.placed-sticker:hover svg { transform: scale(1.06); }
.placed-sticker.is-dragging { cursor: grabbing; z-index: 2; }
.placed-sticker.is-dragging svg { transform: scale(1.14); filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(4px 12px 8px #3a2a1f55); }
.placed-sticker:focus-visible { outline-offset: 4px; border-radius: 50%; }
.placed-sticker.is-new svg { animation: stick-on .32s cubic-bezier(.2,1.6,.4,1); }
@keyframes stick-on { from { transform: scale(1.5); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 700px) {
    .sticker-toggle { font-size: 0; gap: 0; padding: 7px 9px; }
    .sticker-toggle svg { width: 26px; height: 26px; }
    .sticker-sheet { right: 16px; bottom: 16px; transform: none; }
    .foil-sticker { width: 42px; height: 42px; }
    .placed-sticker { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    .new-york-rain { display: none; }
}

/* Plain mode changes presentation, never the available content. */
html[data-mode="plain"] { --ink: #171717; --muted: #454545; --paper: #fff; --line: #bbb; --serif: var(--gh-font-heading, Impact, "Arial Narrow", "Arial Black", sans-serif); }
html[data-mode="plain"] body { background: #fff; font-family: Arial, sans-serif; font-size: 17px; line-height: 1.7; }
html[data-mode="plain"] body::before { display: none; }
html[data-mode="plain"] .desk { max-width: 850px; padding: 24px; }
html[data-mode="plain"] .site-header { color: #171717; flex-wrap: wrap; }
html[data-mode="plain"] .wordmark { font-family: Arial, sans-serif; font-size: 28px; letter-spacing: -1px; }
html[data-mode="plain"] .wordmark > span[aria-hidden], html[data-mode="plain"] .header-note, html[data-mode="plain"] .mode-icon { display: none; }
html[data-mode="plain"] .mode-toggle { border-color: #555; font-size: 12px; background: #fff; box-shadow: none; transform: none; }
html[data-mode="plain"] .plain-intro { display: block; font-weight: bold; margin-block: 24px; }
html[data-mode="plain"] .journal { display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; background: none; }
html[data-mode="plain"] .journal::before, html[data-mode="plain"] .journal::after, html[data-mode="plain"] .binding { display: none; }
html[data-mode="plain"] .index-tabs { position: static; order: -1; width: auto; flex-direction: row; flex-wrap: wrap; gap: 8px 22px; padding: 15px 0; border-block: 1px solid #aaa; background: none; margin-bottom: 24px; }
html[data-mode="plain"] .index-tab { display: block; min-height: 44px; flex: initial; background: none; border: 0; border-radius: 0; padding: 9px 0; box-shadow: none; font-size: 14px; text-decoration: underline; transform: none; }
html[data-mode="plain"] .index-tab > span { display: inline; writing-mode: horizontal-tb; white-space: normal; width: auto; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; font: inherit; transform: none; }
html[data-mode="plain"] .index-tab::before, html[data-mode="plain"] .index-tab::after, html[data-mode="plain"] .index-tab > .tab-number, html[data-mode="plain"] .section-patch { display: none; }
html[data-mode="plain"] .spread { display: block; min-height: 0; border-bottom: 1px solid #aaa; padding-bottom: 30px; margin-bottom: 30px; }
html[data-mode="plain"] .paper-page { display: block; padding: 0; background: none !important; box-shadow: none !important; border: 0 !important; min-height: 0; }
html[data-mode="plain"] .cover-collection, html[data-mode="plain"] .name-note, html[data-mode="plain"] .page-bottom,
html[data-mode="plain"] .page-eyebrow, html[data-mode="plain"] .tiny-heading, html[data-mode="plain"] .tape,
html[data-mode="plain"] .note-doodle, html[data-mode="plain"] .about-portrait, html[data-mode="plain"] .big-asterisk,
html[data-mode="plain"] .project-sticker, html[data-mode="plain"] .contact-heart, html[data-mode="plain"] .welcome-badges,
html[data-mode="plain"] .foil-sticker, html[data-mode="plain"] .sticker-toggle, html[data-mode="plain"] .sticker-sheet, html[data-mode="plain"] .sticker-layer { display: none; }
html[data-mode="plain"] .name-collage { margin: 25px 0; max-width: none; line-height: 1.2; letter-spacing: -.04em; }
html[data-mode="plain"] .name-collage > span[aria-hidden] { display: none; }
html[data-mode="plain"] .name-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font: bold 42px/1.2 Arial, sans-serif; text-transform: none; }
html[data-mode="plain"] h1, html[data-mode="plain"] h2, html[data-mode="plain"] h3 { font-family: Arial, sans-serif; letter-spacing: -.03em; line-height: 1.2; }
html[data-mode="plain"] h2, html[data-mode="plain"] .section-cover h2 { font-size: 30px; margin-block: 30px 20px; }
html[data-mode="plain"] h2 em, html[data-mode="plain"] .welcome-note h2 > span:first-child { color: inherit; background: none; padding: 0; }
html[data-mode="plain"] .welcome-note { margin: 0; }
html[data-mode="plain"] p, html[data-mode="plain"] .welcome-note p { font-size: 17px; max-width: none; }
html[data-mode="plain"] :is(.reno-video-panel, .new-york-video-panel) { background: #fff; box-shadow: none; }
html[data-mode="plain"] .new-york-rain { display: none; }
html[data-mode="plain"] .reno-video-close { background: #fff; }
html[data-mode="plain"] .pink-note { background: none; border: 0; padding: 12px 0; margin: 15px 0; transform: none; box-shadow: none; text-decoration: underline; }
html[data-mode="plain"] .note-label, html[data-mode="plain"] .note-title { display: none; }
html[data-mode="plain"] .note-link { font-size: 17px; border: 0; }
html[data-mode="plain"] .bottom-scraps { display: block; padding: 0; }
html[data-mode="plain"] .secret-note summary { display: list-item; list-style: disclosure-closed inside; min-height: 44px; padding: 10px 0; }
html[data-mode="plain"] .secret-note[open] summary { list-style-type: disclosure-open; }
html[data-mode="plain"] .secret-note summary::-webkit-details-marker { display: inline; }
html[data-mode="plain"] .lightbulb-doodle { display: none; }
html[data-mode="plain"] .secret-note summary .sr-only { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
html[data-mode="plain"] .handwritten { font: inherit; transform: none; margin: 15px 0; }
html[data-mode="plain"] .secret-note p { position: static; background: none; width: auto; margin: 1em 0; border: 0; box-shadow: none; padding: 0; }
html[data-mode="plain"] .hello-ticket { display: block; transform: none; background: none; border: 0; outline: 0; padding: 10px 0; text-align: left; width: auto; text-decoration: underline; box-shadow: none; }
html[data-mode="plain"] .hello-ticket > span { display: none; }
html[data-mode="plain"] .hello-ticket strong { font: inherit; border: 0; }
html[data-mode="plain"] .empty-note { background: none; padding: 0; border: 0; box-shadow: none; transform: none; margin: 20px 0; }
html[data-mode="plain"] .entry-card h3 { font-family: Arial, sans-serif; font-size: 22px; text-decoration: underline; }
html[data-mode="plain"] .entry-card { border-bottom: 1px solid var(--line); }
html[data-mode="plain"] .archive-grid { display: block; }
html[data-mode="plain"] .contact-link { font: inherit; }
html[data-mode="plain"] .contact-content > .handwritten { display: block; }
html[data-mode="plain"] .clippings a { padding: 8px 0; color: inherit; background: none; transform: none; text-decoration: underline; font: inherit; }
html[data-mode="plain"] .site-footer { color: #444; font-size: 11px; align-items: flex-start; flex-direction: column; text-align: left; }
html[data-mode="plain"] :focus-visible { outline-color: #174eaa; }

@media print {
    body { background: white; }
    body::before, .site-header, .index-tabs, .site-footer, .tape, .binding, .sticker-sheet { display: none; }
    .desk { max-width: none; padding: 0; }
    .journal { border: 0; box-shadow: none; }
    [data-journal-page][hidden] { display: block !important; }
    .spread { display: block; min-height: 0; break-after: page; }
    .paper-page { box-shadow: none !important; border: none !important; }
    .page-bottom { position: static; margin-top: 25px; }
    .secret-note p { position: static; width: auto; box-shadow: none; }
}