/* Layout: a cartoon travel scrapbook. Chunky ink outlines, hard offset shadows, stickers that bounce, polaroids that tilt, passport stamps for trips. */
:root{
  --bg:#e8f2ff; --dots:#cfe1fa; --surface:#ffffff; --surface-2:#f4f8ff;
  --ink:#1d2346; --muted:#5a6288; --line:#1d2346; --shadow:#1d2346; --on-color:#1d2346;
  --sun:#ffc93c; --tomato:#ff6b57; --mint:#3ccf9a; --sky:#6cb8ff; --grape:#a283ff;
  --sea:#bfe2ff; --land:#eef1fb; --land-hi:#dfe5f6; --visited:#ffc93c; --visited-hi:#ffb703;
  --wave:#8fc6f2; --cab:#161a35; --cab-2:#22274a; --cab-line:#3b4170; --cab-text:#ffd23f; --cab-hi:#ffffff;
  --f-display:"Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --f-ui:"Fredoka", "Nunito", "Segoe UI", system-ui, sans-serif;
  --f-read:"Nunito", "Segoe UI", system-ui, sans-serif;
  --f-hand:"Gaegu", "Comic Sans MS", cursive;
  --f-mono:"Space Mono", ui-monospace, Menlo, monospace;
  --f-pixel:"Press Start 2P", "Space Mono", ui-monospace, monospace;
  --f-type:"Special Elite", "Courier New", Courier, monospace;
  --f-sign:"Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-marquee:"Bungee", "Lilita One", Impact, sans-serif;
  --f-script:"Caveat", "Gaegu", "Comic Sans MS", cursive;
  --bw:2.5px; --r:18px; --pop:4px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121633; --dots:#1d2350; --surface:#232a57; --surface-2:#1b2148;
  --ink:#eef0ff; --muted:#aab0d8; --line:#05071a; --shadow:#05071a; --on-color:#1d2346;
  --sun:#ffcf4d; --tomato:#ff806e; --mint:#4fe0aa; --sky:#7cc2ff; --grape:#b499ff;
  --sea:#1a3566; --land:#3a4277; --land-hi:#4a538f; --visited:#ffcf4d; --visited-hi:#ffdc78; --wave:#2c4d86; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121633; --dots:#1d2350; --surface:#232a57; --surface-2:#1b2148;
  --ink:#eef0ff; --muted:#aab0d8; --line:#05071a; --shadow:#05071a; --on-color:#1d2346;
  --sun:#ffcf4d; --tomato:#ff806e; --mint:#4fe0aa; --sky:#7cc2ff; --grape:#b499ff;
  --sea:#1a3566; --land:#3a4277; --land-hi:#4a538f; --visited:#ffcf4d; --visited-hi:#ffdc78; --wave:#2c4d86; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
body{background:var(--bg);background-image:radial-gradient(var(--dots) 1.6px, transparent 1.7px);background-size:22px 22px;color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.wrap{max-width:1100px;margin:0 auto;padding-inline:16px}

/* chunky object */
.pop{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--pop) var(--pop) 0 var(--shadow)}
.bouncy{transition:transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .18s}
.bouncy:hover{transform:translate(-2px,-3px) rotate(var(--tilt-h,0deg));box-shadow:calc(var(--pop) + 3px) calc(var(--pop) + 4px) 0 var(--shadow)}
.bouncy:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-block:10px}
.top .bar{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;min-width:0}
.logo .globe{width:38px;height:38px;flex:none}
.logo:hover .globe{animation:spin 1.2s cubic-bezier(.3,1.4,.5,1)}
.logo h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:1.45rem;letter-spacing:.01em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo small{display:block;font-family:var(--f-mono);font-size:.62rem;color:var(--muted);letter-spacing:.02em;margin-top:3px}
nav.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-left:auto;padding:4px 4px 6px;max-width:100%}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{display:inline-flex;align-items:center;gap:6px;border:var(--bw) solid var(--line);background:var(--surface-2);border-radius:999px;padding:6px 12px 6px 8px;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:2px 2px 0 var(--shadow);transition:transform .15s cubic-bezier(.3,1.6,.5,1)}
nav.tabs button:hover{transform:translateY(-2px) rotate(-2deg)}
nav.tabs button .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);font-size:.8rem}
nav.tabs button[aria-current="true"]{background:var(--sun);color:var(--on-color)}
@media (max-width:640px){nav.tabs{margin-left:0;width:100%}}

main{padding-block:14px 90px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-block:8px 18px}
.sec-head h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,6vw,2.8rem);line-height:1;letter-spacing:.01em;text-wrap:balance}
.sec-head p{margin:6px 0 0;color:var(--muted);max-width:52ch}
.sticker{display:inline-block;font-family:var(--f-hand);font-weight:700;font-size:1.15rem;line-height:1;background:var(--sun);color:var(--on-color);border:2px solid var(--line);border-radius:8px;padding:3px 9px 2px;transform:rotate(-3deg);box-shadow:2px 2px 0 var(--shadow);margin-bottom:8px}
.sticker.mint{background:var(--mint)}.sticker.sky{background:var(--sky)}.sticker.grape{background:var(--grape)}.sticker.tomato{background:var(--tomato)}

.btn{display:inline-flex;align-items:center;gap:6px;border:var(--bw) solid var(--line);background:var(--surface);padding:8px 16px;border-radius:999px;font-weight:600;cursor:pointer;box-shadow:3px 3px 0 var(--shadow);transition:transform .15s cubic-bezier(.3,1.6,.5,1),box-shadow .15s}
.btn:hover{transform:translate(-1px,-2px);box-shadow:4px 5px 0 var(--shadow)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
.btn.primary{background:var(--tomato);color:var(--on-color)}
.btn.sun{background:var(--sun);color:var(--on-color)}
.btn.mint{background:var(--mint);color:var(--on-color)}
.btn.small{padding:5px 12px;font-size:.88rem;box-shadow:2px 2px 0 var(--shadow)}
.btn.ghost{background:none;box-shadow:none;border-color:transparent}
.btn.danger{color:var(--tomato)}
.btn:disabled{opacity:.6;cursor:wait}
.btn svg{width:16px;height:16px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:18px;align-items:stretch;margin-bottom:22px}
@media (max-width:820px){.hero{grid-template-columns:minmax(0,1fr)}}
.mapcard{padding:10px;position:relative;min-width:0}
.mapbox{position:relative;background:var(--sea);border:var(--bw) solid var(--line);border-radius:12px;overflow:hidden;height:min(54vh,440px);min-height:280px}
.mapbox.mini{height:270px;min-height:220px}
.mapbox > div{width:100%;height:100%}
.mapbox::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 38px,color-mix(in srgb,var(--surface) 22%,transparent) 38px 39px),repeating-linear-gradient(90deg,transparent 0 38px,color-mix(in srgb,var(--surface) 22%,transparent) 38px 39px)}
.map-fallback{display:grid;place-items:center;height:100%;color:var(--muted);padding:16px;text-align:center}
.jvm-container{width:100%;height:100%;position:relative;overflow:hidden;touch-action:none}
.jvm-zoom-btn{position:absolute;left:10px;width:32px;height:32px;display:grid;place-items:center;background:var(--sun);color:var(--on-color);border:2px solid var(--line);border-radius:10px;cursor:pointer;font-weight:700;font-size:1.1rem;user-select:none;line-height:1;box-shadow:2px 2px 0 var(--shadow);z-index:2}
.jvm-zoom-btn.jvm-zoomin{top:10px}.jvm-zoom-btn.jvm-zoomout{top:50px}
.jvm-tooltip{position:absolute;display:none;background:var(--surface);color:var(--ink);border:2px solid var(--line);font-family:var(--f-ui);font-weight:600;font-size:.85rem;padding:4px 10px;border-radius:10px;pointer-events:none;z-index:50;white-space:nowrap;box-shadow:2px 2px 0 var(--shadow)}
.jvm-tooltip.active{display:block}
.jvm-marker{transition:r .15s}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;padding:10px 4px 2px;font-size:.88rem;color:var(--muted);font-weight:500}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dot{width:13px;height:13px;border-radius:50%;display:inline-block;border:2px solid var(--line)}
.dvd{position:fixed;left:0;top:0;width:54px;height:38px;padding:0;border:0;background:none;cursor:pointer;z-index:30;will-change:transform;-webkit-tap-highlight-color:transparent}
.dvd svg{width:100%;height:100%;display:block;overflow:visible;transition:transform .2s}
.dvd .bob{animation:bob 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(5deg)}}
.dvd .prop{animation:prop .14s linear infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes prop{50%{transform:scaleY(.15)}}
.dvd .pupil{animation:goggle 1.7s ease-in-out infinite;transform-box:view-box}
.dvd .p2{animation-duration:1.3s;animation-direction:reverse}
@keyframes goggle{0%,100%{transform:translate(0,0)}30%{transform:translate(-1.5px,1.2px)}60%{transform:translate(1px,-1.3px)}}
.dvd:hover .bob{animation-duration:.35s}
.dvd.loop svg{animation:loop .9s cubic-bezier(.4,0,.3,1)}
@keyframes loop{0%{transform:rotate(0) scale(1)}40%{transform:rotate(-200deg) scale(1.5)}100%{transform:rotate(-360deg) scale(1)}}
.trail{position:fixed;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line);pointer-events:none;z-index:29;animation:puff .9s ease-out forwards}
@keyframes puff{to{transform:scale(2.4);opacity:0}}
.pass{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:75;width:min(380px,calc(100vw - 32px));transform:translateX(-50%);display:grid;grid-template-columns:minmax(0,1fr) 88px;background:var(--surface);border:var(--bw) solid var(--line);border-radius:16px;box-shadow:5px 5px 0 var(--shadow);overflow:hidden;animation:passin .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes passin{from{transform:translate(-50%,140%) rotate(-6deg)}}
.pass .main{padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.pass .hdr{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;color:var(--muted)}
.pass .route{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:1.5rem;line-height:1.05;min-width:0}
.pass .route span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pass .route svg{width:20px;height:20px;flex:none;color:var(--tomato)}
.pass .row2{display:flex;gap:14px;font-family:var(--f-mono);font-size:.7rem;color:var(--muted);flex-wrap:wrap}
.pass .row2 b{display:block;color:var(--ink);font-size:.82rem}
.pass .stub{background:var(--sun);color:var(--on-color);border-left:2.5px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;text-align:center}
.pass .stub b{font-family:var(--f-display);font-size:1.6rem;line-height:1}
.pass .stub small{font-family:var(--f-mono);font-size:.6rem}
.pass .acts{display:flex;gap:8px;margin-top:2px;flex-wrap:wrap}
.corner-flash{position:fixed;inset:0;z-index:28;pointer-events:none;display:grid;place-items:center}
.corner-flash span{font-family:var(--f-display);font-size:clamp(2.4rem,10vw,5rem);color:var(--sun);-webkit-text-stroke:3px var(--line);paint-order:stroke;transform:rotate(-8deg);animation:pop 1.6s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes pop{0%{transform:scale(.2) rotate(-20deg);opacity:0}20%{transform:scale(1.1) rotate(-8deg);opacity:1}80%{opacity:1}100%{transform:scale(1) rotate(-8deg);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* about card + admin */
.about{padding:20px;display:flex;flex-direction:column;gap:12px;background:var(--grape);color:var(--on-color);min-width:0}
.about .mono{width:64px;height:64px;border-radius:50%;background:var(--surface);color:var(--ink);border:var(--bw) solid var(--line);display:grid;place-items:center;font-family:var(--f-display);font-size:1.6rem;box-shadow:3px 3px 0 var(--shadow);transform:rotate(-6deg)}
.about h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1;overflow-wrap:break-word}
.about .links button{gap:8px}
.about .links small{white-space:nowrap}
.about p{margin:0;font-size:1rem;line-height:1.45}
.about .links{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.about .links button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:12px;padding:7px 12px;font-weight:600;cursor:pointer;box-shadow:2px 2px 0 var(--shadow);transition:transform .15s cubic-bezier(.3,1.6,.5,1)}
.about .links button:hover{transform:translateX(3px)}
.about .links small{font-family:var(--f-mono);font-size:.7rem;color:var(--muted)}
.admin-pill{display:none;font-family:var(--f-mono);font-size:.62rem;background:var(--tomato);color:var(--on-color);border:2px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:middle}
body.is-admin .admin-pill{display:inline-block}
.site-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding-block:18px 28px;color:var(--muted);font-size:.85rem;border-top:var(--bw) dashed var(--line);margin-top:10px}
.site-foot .btn{font-size:.82rem}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:30px}
.stat{padding:12px 14px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;color:var(--on-color)}
.stat .blob{width:42px;height:42px;border-radius:50%;background:var(--surface);border:2px solid var(--line);display:grid;place-items:center;flex:none}
.stat .blob svg{width:24px;height:24px;color:var(--ink)}
.stat b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.8rem;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:.85rem;font-weight:600}
.stat:nth-child(1){background:var(--sun)}.stat:nth-child(2){background:var(--mint)}.stat:nth-child(3){background:var(--sky)}.stat:nth-child(4){background:var(--tomato)}.stat:nth-child(5){background:var(--grape)}

/* passport stamps */
.passport{padding:18px;margin-bottom:30px;background:var(--surface-2);position:relative;overflow:hidden}
.passport .stamps{display:flex;flex-wrap:wrap;gap:18px 22px;align-items:center}
.stamp{--c:var(--tomato);width:118px;height:118px;border-radius:50%;border:3px dashed var(--c);color:var(--c);display:grid;place-items:center;text-align:center;padding:12px;background:color-mix(in srgb,var(--c) 10%,transparent);cursor:pointer;transform:rotate(var(--rot,0deg));transition:transform .25s cubic-bezier(.3,1.6,.5,1);font-family:var(--f-display);font-size:.95rem;line-height:1.05;outline:3px solid color-mix(in srgb,var(--c) 70%,transparent);outline-offset:-12px}
.stamp:hover{transform:rotate(0deg) scale(1.08)}
.stamp small{display:block;font-family:var(--f-mono);font-size:.6rem;margin-top:4px;letter-spacing:.04em}
.stamp.add{--c:var(--muted);font-family:var(--f-ui);font-weight:600;font-size:.9rem;outline:none}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.polaroid{padding:10px 10px 12px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:8px;transform:rotate(var(--tilt,0deg));min-width:0;color:var(--ink)}
.polaroid .cover{aspect-ratio:4/3;max-width:100%;border:2px solid var(--line);border-radius:10px;background:var(--c,var(--sky));background-size:cover;background-position:center;position:relative;display:grid;place-items:center;overflow:hidden}
.polaroid .cover .nophoto{font-family:var(--f-display);font-size:2.6rem;color:var(--on-color);opacity:.85;text-align:center;line-height:1;padding:8px}
.polaroid .cover .nophoto small{display:block;font-family:var(--f-mono);font-size:.68rem;margin-top:8px;opacity:.9}
.polaroid h3{margin:2px 2px 0;font-family:var(--f-hand);font-weight:700;font-size:1.5rem;line-height:1.05;text-wrap:balance}
.polaroid .meta{padding-inline:2px}
.polaroid p{margin:0 2px;color:var(--muted);font-size:.95rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tape{position:absolute;top:-10px;left:50%;width:70px;height:20px;background:color-mix(in srgb,var(--sun) 70%,transparent);border:1.5px solid color-mix(in srgb,var(--line) 30%,transparent);transform:translateX(-50%) rotate(-4deg);z-index:2}
.meta{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px}
.badge{display:inline-block;font-family:var(--f-ui);font-weight:600;font-size:.75rem;padding:2px 9px;border-radius:999px;border:2px solid var(--line);background:var(--mint);color:var(--on-color)}
.badge.sun{background:var(--sun)}.badge.plain{background:var(--surface);color:var(--ink)}
.cover .badge{position:absolute;top:8px;left:8px}

.empty{border:var(--bw) dashed var(--line);border-radius:var(--r);padding:30px 20px;text-align:center;background:var(--surface-2)}
.empty h3{margin:0 0 6px;font-family:var(--f-display);font-weight:400;font-size:1.6rem}
.empty p{margin:0 auto 16px;max-width:44ch;color:var(--muted)}
.empty .doodle{width:80px;margin:0 auto 6px;display:block}

/* lists */
.rows{display:flex;flex-direction:column;gap:12px}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;cursor:pointer;text-align:left;width:100%;color:var(--ink)}
.row .when{width:56px;height:56px;border-radius:14px;border:2px solid var(--line);background:var(--sun);color:var(--on-color);display:grid;place-items:center;text-align:center;font-family:var(--f-display);font-size:1.35rem;line-height:.95}
.row .when small{display:block;font-family:var(--f-ui);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.row h4{margin:0;font-size:1.1rem;font-weight:600}
.row .sub{color:var(--muted);font-size:.95rem;margin-top:2px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.row .right{font-size:.78rem;color:var(--muted);text-align:right;font-weight:500}
.kind-Trip .when{background:var(--tomato)}.kind-Journal .when{background:var(--grape)}.kind-Blog .when{background:var(--sky)}.kind-Writing .when,.kind-Poem .when{background:var(--mint)}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{border:2px solid var(--line);background:var(--surface);padding:5px 13px;border-radius:999px;font-size:.9rem;font-weight:600;cursor:pointer;box-shadow:2px 2px 0 var(--shadow);transition:transform .15s cubic-bezier(.3,1.6,.5,1)}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface)}

/* writing desk */
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}
.note-card{position:relative;padding:20px 16px 14px;cursor:pointer;text-align:left;min-height:190px;display:flex;flex-direction:column;gap:6px;transform:rotate(var(--tilt,0deg));background:var(--c,var(--sun));color:var(--on-color);min-width:0}
.note-card h3{margin:0;font-family:var(--f-hand);font-weight:700;font-size:1.55rem;line-height:1.05}
.note-card .excerpt{font-family:var(--f-hand);font-size:1.12rem;line-height:1.2;flex:1;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.note-card .foot{display:flex;justify-content:space-between;font-size:.75rem;font-weight:600}

/* detail */
.back{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:5px 12px 5px 8px;cursor:pointer;font-weight:600;margin-bottom:14px;box-shadow:2px 2px 0 var(--shadow)}
.detail-head{padding:20px;margin-bottom:22px;position:relative}
.detail-head h2{font-family:var(--f-display);font-weight:400;font-size:clamp(2.1rem,6vw,3.2rem);margin:2px 0 8px;line-height:1;letter-spacing:.01em;text-wrap:balance}
.detail-head .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.prose{font-family:var(--f-read);font-size:1.1rem;line-height:1.7;max-width:65ch}
.prose p{margin:0 0 .9em}
.prose h3{font-family:var(--f-display);font-weight:400;font-size:1.4rem;margin:1.1em 0 .4em}
.paper{padding:24px 22px;background:var(--surface);background-image:repeating-linear-gradient(transparent 0 calc(1.7em - 1px),color-mix(in srgb,var(--sky) 35%,transparent) calc(1.7em - 1px) 1.7em);background-position:0 22px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-bottom:26px}
@media (max-width:760px){.two{grid-template-columns:minmax(0,1fr)}}
.stops{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:s}
.stops li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;counter-increment:s}
.stops li::before{content:counter(s);width:28px;height:28px;border-radius:50%;background:var(--sun);color:var(--on-color);border:2px solid var(--line);display:grid;place-items:center;font-family:var(--f-display);font-size:.95rem}
.stops li span:last-child{font-family:var(--f-mono);font-size:.68rem;color:var(--muted);white-space:nowrap}
.panel{padding:16px;min-width:0}

.timeline{display:flex;flex-direction:column;gap:22px;position:relative;padding-left:0}
.day{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:start}
.day .num{position:sticky;top:96px;width:72px;padding:8px 4px;text-align:center;background:var(--tomato);color:var(--on-color);border:var(--bw) solid var(--line);border-radius:14px;box-shadow:3px 3px 0 var(--shadow);font-size:.7rem;font-weight:600;line-height:1.2;transform:rotate(-4deg)}
.day .num b{display:block;font-family:var(--f-display);font-weight:400;font-size:2rem;line-height:1}
.day .card{padding:16px 18px;min-width:0}
.day h3{margin:0 0 6px;font-family:var(--f-hand);font-weight:700;font-size:1.65rem;line-height:1.05}
.day .prose{font-size:1.04rem}
@media (max-width:520px){.day{grid-template-columns:minmax(0,1fr);gap:0}.day .num{position:static;width:auto;display:inline-flex;gap:8px;align-items:center;justify-self:start;margin:0 0 -10px 10px;z-index:1;padding:5px 12px}.day .num b{font-size:1.3rem}}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:12px;margin-block:12px}
.gallery button{padding:5px 5px 14px;border:2px solid var(--line);background:var(--surface);border-radius:6px;cursor:zoom-in;max-width:100%;box-shadow:2px 2px 0 var(--shadow);transform:rotate(var(--tilt,0deg));transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.gallery button:hover{transform:rotate(0) scale(1.06);z-index:2;position:relative}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:3px}

/* sheet */
.scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--line) 55%,transparent);z-index:40;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
@media (min-width:700px){.scrim{align-items:center;padding:24px}}
@keyframes fade{from{opacity:0}}
.sheet{background:var(--surface);width:100%;max-width:640px;max-height:92vh;border:var(--bw) solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;display:flex;flex-direction:column;animation:rise .35s cubic-bezier(.3,1.4,.5,1)}
@media (min-width:700px){.sheet{border-radius:22px;border-bottom:var(--bw) solid var(--line);box-shadow:6px 6px 0 var(--shadow)}}
@keyframes rise{from{transform:translateY(40px) scale(.97);opacity:0}}
.sheet header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:var(--bw) solid var(--line);background:var(--sun);color:var(--on-color);border-radius:19px 19px 0 0}
.sheet header h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:1.4rem}
.sheet header .btn{color:var(--on-color)}
.sheet .content{padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.sheet footer{display:flex;gap:8px;justify-content:space-between;align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:var(--bw) solid var(--line);flex-wrap:wrap}
.sheet footer .r{display:flex;gap:8px;margin-left:auto}
label.f,.f{display:flex;flex-direction:column;gap:5px;font-size:.88rem;font-weight:600;color:var(--ink)}
.f input,.f select,.f textarea,.place input{border:2px solid var(--line);background:var(--surface-2);border-radius:12px;padding:9px 12px;font-weight:400;color:var(--ink);width:100%;min-width:0}
.f input:focus,.f textarea:focus,.f select:focus,.place input:focus{outline:none;box-shadow:0 0 0 3px var(--sky)}
.f textarea{font-family:var(--f-read);font-size:1.05rem;line-height:1.55;min-height:170px;resize:vertical}
.f textarea.tall{min-height:320px}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.place{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto auto;gap:6px;align-items:center}
@media (max-width:520px){.place{grid-template-columns:minmax(0,1fr) auto auto}.place .pc{grid-column:1/-1;grid-row:2}}
.place input.pc{font-family:var(--f-mono);font-size:.8rem}
.hint{font-size:.82rem;color:var(--muted);font-weight:400}
.photos-edit{display:flex;flex-wrap:wrap;gap:8px}
.photos-edit .ph{position:relative;width:78px;height:78px;border-radius:10px;overflow:hidden;background:var(--sea);border:2px solid var(--line)}
.photos-edit .ph img{width:100%;height:100%;object-fit:cover}
.photos-edit .ph button{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;line-height:1;font-size:.7rem;padding:0}
.photos-edit .ph .star{left:3px;right:auto}
.photos-edit .ph.cover-pick{outline:3px solid var(--sun);outline-offset:-3px}
.photos-edit label.add{width:78px;height:78px;border:2px dashed var(--line);border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--muted);font-size:.78rem;text-align:center;background:var(--surface-2)}
.photos-edit input{display:none}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgb(10 12 30 / .9);z-index:60;display:flex;align-items:center;justify-content:center;animation:fade .2s}
.lightbox .frame{background:#fff;padding:10px 10px 34px;border-radius:6px;transform:rotate(-1.5deg);box-shadow:6px 6px 0 #05071a;animation:rise .3s cubic-bezier(.3,1.4,.5,1);max-width:94vw}
.lightbox img{max-width:calc(94vw - 20px);max-height:76vh;object-fit:contain;display:block}
.lightbox button{position:absolute;background:var(--sun);color:#1d2346;border:2.5px solid #05071a;width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:1.3rem;font-weight:700;box-shadow:3px 3px 0 #05071a}
.lightbox .x{top:calc(14px + env(safe-area-inset-top,0px));right:14px}
.lightbox .pv{left:10px;top:50%}.lightbox .nx{right:10px;top:50%}
.lightbox .cnt{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom,0px));color:#e6e9ff;font-family:var(--f-mono);font-size:.8rem}

.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--sun);color:var(--on-color);border:var(--bw) solid var(--line);box-shadow:3px 3px 0 var(--shadow);padding:9px 18px;border-radius:999px;font-weight:600;z-index:70;max-width:calc(100vw - 32px);animation:rise .3s cubic-bezier(.3,1.6,.5,1)}
.seg{display:inline-flex;border:var(--bw) solid var(--line);border-radius:999px;padding:4px;background:var(--surface);gap:4px;box-shadow:3px 3px 0 var(--shadow)}
.seg button{border:0;background:none;padding:6px 16px;border-radius:999px;cursor:pointer;font-weight:600;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.seg button[aria-pressed="true"]{background:var(--grape);color:var(--on-color)}
.seg svg{width:15px;height:15px}
.note{font-size:.9rem;color:var(--muted);margin:14px 0 18px;display:flex;gap:6px;align-items:center}
.note svg{width:15px;height:15px;flex:none}
.examples-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--sky);color:var(--on-color);padding:10px 14px;margin-bottom:18px;font-size:.92rem;font-weight:500}
.examples-bar .btn{margin-left:auto}
.readonly-bar{padding:10px 14px;margin-bottom:16px;color:var(--muted);font-size:.92rem}

.confetti{position:fixed;pointer-events:none;z-index:80;width:10px;height:14px;border:1.5px solid var(--line);border-radius:2px;animation:conf 1s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes conf{to{transform:translate(var(--dx),var(--dy)) rotate(var(--dr));opacity:0}}


/* ===== new features ===== */
nav.tabs button.search-btn{padding:6px 10px}
nav.tabs button.search-btn svg{width:18px;height:18px}
.preview-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--sky);color:var(--on-color);padding:10px 14px;margin-bottom:18px;font-size:.92rem;font-weight:500}
.admin-strip{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;margin-bottom:18px;background:var(--surface-2)}
.admin-strip b{font-family:var(--f-display);font-weight:400;font-size:1.1rem;margin-right:4px}
.new-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--tomato);color:var(--on-color);padding:10px 14px;margin-bottom:18px;font-weight:600}
.badge.new{background:var(--tomato);animation:wiggle 2.4s ease-in-out infinite}
.badge.draft{background:var(--surface);color:var(--ink);border-style:dashed}
@keyframes wiggle{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-8deg)}95%{transform:rotate(8deg)}}

/* tags */
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{font-family:var(--f-mono);font-size:.74rem;border:2px solid var(--line);border-radius:999px;padding:2px 9px;background:var(--surface-2);color:var(--ink);cursor:pointer;transition:transform .15s cubic-bezier(.3,1.6,.5,1)}
.tag:hover{transform:translateY(-2px) rotate(-3deg);background:var(--sun);color:var(--on-color)}

/* reactions */
.react{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 24px}
.rbtn{display:inline-flex;align-items:center;gap:8px;border:var(--bw) solid var(--line);background:var(--surface);border-radius:999px;padding:7px 16px 7px 12px;font-weight:600;cursor:pointer;box-shadow:3px 3px 0 var(--shadow);transition:transform .15s cubic-bezier(.3,1.6,.5,1)}
.rbtn svg{width:20px;height:20px}
.rbtn b{font-family:var(--f-display);font-weight:400;font-size:1.15rem;min-width:1ch}
.rbtn[aria-pressed="true"].heart{background:var(--tomato);color:var(--on-color)}
.rbtn[aria-pressed="true"].want{background:var(--sky);color:var(--on-color)}
.rbtn.boing svg{animation:boing .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes boing{0%{transform:scale(1)}40%{transform:scale(1.7) rotate(-12deg)}100%{transform:scale(1)}}

/* departures board (single dark look in both themes) */
.board{background:var(--cab);color:var(--cab-text);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--pop) var(--pop) 0 var(--shadow);padding:14px 16px 8px;margin-bottom:30px;font-family:var(--f-mono)}
.board .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.board .hd h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:1.6rem;color:var(--cab-hi);display:flex;align-items:center;gap:10px}
.board .hd h3 svg{width:26px;height:26px;color:var(--cab-text)}
.board .clock{font-size:.8rem;color:var(--cab-text);background:var(--cab-2);border-radius:6px;padding:3px 8px}
.board .cols,.brow{display:grid;grid-template-columns:78px minmax(0,1fr) 112px 150px;gap:10px;align-items:center}
.board .cols{font-size:.62rem;letter-spacing:.12em;color:#9aa1d6;padding:4px 0}
.brow{width:100%;text-align:left;background:none;border:0;border-top:1px dashed var(--cab-line);padding:9px 0;color:inherit;cursor:pointer;font:inherit}
.brow:hover .flap{background:#2e3463}
.flap{display:inline-block;max-width:100%;background:var(--cab-2);border-radius:4px;padding:3px 7px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem;box-shadow:inset 0 -1px 0 #0d1028,inset 0 50% 0 rgb(255 255 255 / .03)}
.flap.dest{font-size:.95rem;color:var(--cab-hi)}
.st{font-weight:700}.st.go{color:#4fe0aa}.st.soon{color:#ffd23f;animation:blinkst 1s steps(2) infinite}.st.air{color:#7cc2ff}
@keyframes blinkst{50%{opacity:.35}}
.board .empty-row{padding:14px 0;border-top:1px dashed var(--cab-line);color:#9aa1d6;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media (max-width:600px){.board .cols{display:none}.brow{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}.brow .bf,.brow .bd{display:none}.brow .bdest small{display:block;color:#9aa1d6;font-size:.68rem;margin-top:3px}}
@media (min-width:601px){.brow .bdest small{display:none}}
.countdown{display:inline-flex;align-items:baseline;gap:8px;background:var(--cab);color:var(--cab-text);border:var(--bw) solid var(--line);border-radius:12px;padding:6px 14px;box-shadow:3px 3px 0 var(--shadow);font-family:var(--f-mono);transform:rotate(-2deg)}
.countdown b{font-family:var(--f-display);font-weight:400;font-size:2rem;color:var(--cab-hi)}

/* passport stats + countries */
.pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:18px}
.pstat{border:2px solid var(--line);border-radius:12px;background:var(--surface);padding:8px 12px}
.pstat b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1.1;font-variant-numeric:tabular-nums}
.pstat span{font-size:.78rem;color:var(--muted);font-weight:600}
.ccs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.cc{display:inline-flex;align-items:center;gap:7px;border:2px solid var(--line);border-radius:10px;padding:4px 11px;background:var(--visited);color:var(--on-color);font-weight:600;font-size:.9rem;transform:rotate(var(--rot,0deg));box-shadow:2px 2px 0 var(--shadow)}
.cc .fl{font-size:1.1rem;line-height:1}
.subhead{font-family:var(--f-display);font-weight:400;font-size:1.25rem;margin:4px 0 10px}
.map-edit{position:absolute;inset:auto 16px 16px auto;z-index:3}
.map-banner{position:absolute;top:12px;left:52px;right:12px;z-index:3;background:var(--sun);color:var(--on-color);border:2px solid var(--line);border-radius:12px;padding:6px 12px;font-weight:600;font-size:.88rem;box-shadow:2px 2px 0 var(--shadow)}

/* bucket list postcards */
.postcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.postcard{position:relative;padding:16px 16px 14px;min-height:150px;display:flex;flex-direction:column;gap:6px;transform:rotate(var(--tilt,0deg));background:var(--surface);background-image:linear-gradient(90deg,transparent calc(62% - 1px),color-mix(in srgb,var(--line) 25%,transparent) calc(62% - 1px) 62%,transparent 62%);min-width:0}
.postcard h3{margin:0;font-family:var(--f-hand);font-weight:700;font-size:1.6rem;line-height:1;max-width:60%}
.postcard p{margin:0;color:var(--muted);font-size:.92rem;max-width:60%}
.postcard .pstamp{position:absolute;top:12px;right:12px;width:52px;height:62px;border:2px dashed var(--line);border-radius:4px;background:var(--c,var(--sky));display:grid;place-items:center;font-family:var(--f-display);color:var(--on-color);font-size:1.1rem}
.postcard .acts{display:flex;gap:6px;margin-top:auto;flex-wrap:wrap}
.postcard.done .ink{position:absolute;right:16px;bottom:22px;border:3px solid var(--tomato);color:var(--tomato);font-family:var(--f-display);font-size:1.1rem;padding:2px 8px;border-radius:8px;transform:rotate(-14deg);opacity:.9}

/* writer's loft */
.loft-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;margin-bottom:26px;align-items:stretch}
@media (max-width:640px){.loft-top{grid-template-columns:minmax(0,1fr)}}
.prompt{padding:18px 20px;background:var(--sky);color:var(--on-color);display:flex;flex-direction:column;gap:10px;min-width:0}
.prompt q{font-family:var(--f-hand);font-weight:700;font-size:1.7rem;line-height:1.1;quotes:"“" "”"}
.prompt .acts{display:flex;gap:8px;flex-wrap:wrap}
.streak{padding:16px 20px;background:var(--sun);color:var(--on-color);display:flex;align-items:center;gap:12px;min-width:200px}
.streak svg{width:46px;height:46px;flex:none}
.streak b{display:block;font-family:var(--f-display);font-weight:400;font-size:2.2rem;line-height:1}
.streak span{font-size:.85rem;font-weight:600}
.streak.cold svg{filter:grayscale(1);opacity:.6}

/* the arcade (fixed dark cabinet look) */
.arcade-head{background:var(--cab);color:var(--cab-hi);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--pop) var(--pop) 0 var(--shadow);padding:18px 20px;margin-bottom:22px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;position:relative;overflow:hidden}
.arcade-head::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgb(0 0 0 / .22) 0 2px,transparent 2px 4px)}
.arcade-head h2{margin:0;font-family:var(--f-pixel);font-weight:400;font-size:clamp(1.1rem,4vw,1.7rem);line-height:1.3;color:var(--cab-text);text-shadow:3px 3px 0 #ff6b57}
.arcade-head p{margin:6px 0 0;color:#c9cdf2;font-size:.95rem;max-width:46ch}
.arcade-head .coin{font-family:var(--f-pixel);font-size:.7rem;color:#4fe0aa;animation:blinkst 1.1s steps(2) infinite}
.arcade-head .hs{font-family:var(--f-pixel);font-size:.62rem;color:#c9cdf2;text-align:right;line-height:1.8}
.arcade-head .hs b{display:block;color:var(--cab-hi);font-size:1rem;font-weight:400}
.carts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.cart{padding:10px 10px 12px;display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer;color:var(--ink);min-width:0}
.screen{aspect-ratio:16/9;max-width:100%;border:3px solid var(--line);border-radius:10px;background:var(--cab) center/cover no-repeat;position:relative;overflow:hidden;display:grid;place-items:center}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgb(0 0 0 / .16) 0 2px,transparent 2px 4px),radial-gradient(ellipse at center,transparent 60%,rgb(0 0 0 / .35))}
.screen .nosig{font-family:var(--f-pixel);font-size:.65rem;color:var(--cab-text);text-align:center;line-height:1.8;padding:8px}
.screen .badge{position:absolute;top:8px;left:8px;z-index:1}
.cart h3{margin:2px 2px 0;font-family:var(--f-display);font-weight:400;font-size:1.3rem;line-height:1.1}
.cart .gm{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-inline:2px}
.gchip{font-family:var(--f-pixel);font-size:.55rem;background:var(--grape);color:var(--on-color);border:2px solid var(--line);border-radius:6px;padding:4px 6px;line-height:1.3;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hearts{display:inline-flex;gap:2px}
.hearts svg{width:14px;height:14px}
.trophy{display:inline-flex;align-items:center;gap:8px;background:var(--sun);color:var(--on-color);border:2px solid var(--line);border-radius:10px;padding:5px 12px;font-weight:600;box-shadow:2px 2px 0 var(--shadow);transform:rotate(-2deg)}
.trophy svg{width:18px;height:18px}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:22px}
.shots button{padding:0;border:0;background:none;cursor:zoom-in;max-width:100%}
.shots .screen{transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.shots button:hover .screen{transform:scale(1.03) rotate(-1deg)}

/* search */
.searchbox{display:flex;align-items:center;gap:10px;padding:8px 14px;margin-bottom:16px}
.searchbox svg{width:24px;height:24px;flex:none;color:var(--muted)}
.searchbox input{border:0;background:none;font-family:var(--f-display);font-size:1.5rem;width:100%;min-width:0;color:var(--ink);padding:6px 0}
.searchbox input:focus{outline:none}
.searchbox:focus-within{box-shadow:var(--pop) var(--pop) 0 var(--sky)}
.kind-Arcade .when{background:var(--grape)}.kind-Dayout .when{background:var(--mint)}.kind-Day .when{background:var(--tomato)}.kind-Wishlist .when{background:var(--sky)}

/* follow */
.follow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copyline{display:flex;gap:6px;align-items:center;background:var(--surface-2);border:2px solid var(--line);border-radius:10px;padding:5px 6px 5px 10px;font-family:var(--f-mono);font-size:.8rem;min-width:0;max-width:100%}
.copyline span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}



.postcard .react{margin:4px 0 0;max-width:100%}
.postcard .rbtn{padding:4px 12px 4px 9px;font-size:.85rem;box-shadow:2px 2px 0 var(--shadow)}
.postcard .rbtn svg{width:16px;height:16px}
.postcard .rbtn b{font-size:1rem}

/* ===== map switch + UK county map ===== */
.mapswitch{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.mapswitch .seg{box-shadow:2px 2px 0 var(--shadow)}
.mapswitch .seg button{padding:5px 12px;font-size:.88rem}
.mapswitch .seg button[aria-pressed="true"]{background:var(--sun)}
.ukwrap{position:relative;width:100%;height:100%;background:var(--sea);touch-action:none;cursor:grab}
.ukwrap:active{cursor:grabbing}
.ukmap{display:block;width:100%;height:100%}
.ukmap .county{fill:var(--land);stroke:none;cursor:pointer;transition:fill .15s}
.ukmap .county:hover{fill:var(--land-hi)}
.ukmap .county.on{fill:var(--visited)}
.ukmap .county.on:hover{fill:var(--visited-hi)}
.ukmap .inner{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.55;pointer-events:none}
.ukmap .coast{stroke:var(--line);stroke-width:2.6;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.ukmap .sea-label{font-family:var(--f-script);font-weight:700;fill:var(--muted);opacity:.85;pointer-events:none;letter-spacing:.04em}
.ukmap .ukpin{cursor:pointer}
.ukmap .ukpin:hover path{fill:var(--sun)}
.ukzoom{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:8px;z-index:2}
.ukback{position:absolute;right:10px;top:10px;z-index:2}
.uk-tip{position:absolute;transform:translate(-50%,-100%);background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:10px;padding:4px 10px;font-weight:600;font-size:.85rem;white-space:nowrap;box-shadow:2px 2px 0 var(--shadow);pointer-events:none;z-index:4}
.cc.county{background:var(--mint)}

/* ===== themed sections ===== */
/* Travel Agency: airport wayfinding signs (fixed look in both themes) */
.sign-hero{background:#22262d;color:#ffcc00;border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--pop) var(--pop) 0 var(--shadow);padding:18px 20px;margin-bottom:24px;display:flex;flex-direction:column;gap:14px}
.sign-top{display:flex;align-items:center;gap:14px}
.sign-top .pict{width:58px;height:58px;flex:none;border-radius:8px;background:#ffcc00;color:#22262d;display:grid;place-items:center}
.sign-top .pict svg{width:36px;height:36px}
.sign-hero h2{margin:0;font-family:var(--f-sign);font-weight:800;font-size:clamp(2rem,7vw,3.2rem);line-height:.95;text-transform:uppercase;letter-spacing:.02em}
.sign-links{display:flex;flex-wrap:wrap;gap:8px}
.sign-links button{display:inline-flex;align-items:center;gap:8px;background:#111317;color:#ffcc00;border:2px solid #ffcc00;border-radius:6px;padding:6px 14px 6px 6px;font-family:var(--f-sign);font-weight:600;font-size:1.15rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:transform .15s cubic-bezier(.3,1.6,.5,1)}
.sign-links button span{display:grid;place-items:center;width:28px;height:28px;background:#ffcc00;color:#111317;border-radius:4px;font-weight:800}
.sign-links button:hover{transform:translateY(-2px)}
.sign-hero p{margin:0;color:#e9e3c7;max-width:60ch}
.sign-acts{display:flex;gap:8px;flex-wrap:wrap}
.gate-sign{display:flex;align-items:center;gap:10px;background:#22262d;color:#ffcc00;border:var(--bw) solid var(--line);border-radius:10px;padding:6px 14px 6px 6px;font-family:var(--f-sign);font-weight:800;font-size:1.5rem;text-transform:uppercase;letter-spacing:.03em;margin:8px 0 18px;box-shadow:3px 3px 0 var(--shadow);width:fit-content;max-width:100%}
.gate-sign .gate{display:grid;place-items:center;width:34px;height:34px;background:#ffcc00;color:#22262d;border-radius:6px;flex:none}
body[data-sec="trips"] .polaroid h3{font-family:var(--f-sign);font-weight:800;text-transform:uppercase;font-size:1.45rem;letter-spacing:.01em}
body[data-sec="trips"] .detail-head h2{font-family:var(--f-sign);font-weight:800;text-transform:uppercase;letter-spacing:.01em}
body[data-sec="trips"] .tape{background:repeating-linear-gradient(45deg,#ffcc00 0 8px,#22262d 8px 16px);opacity:.9}

/* Photo Booth: red curtain + marquee lights (fixed look) */
.booth-hero{background:repeating-linear-gradient(90deg,#a3192b 0 16px,#7d0f1f 16px 26px,#c0283a 26px 40px,#8c1424 40px 50px);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--pop) var(--pop) 0 var(--shadow);padding:16px;margin-bottom:24px;position:relative;overflow:hidden}
.booth-hero::before{content:"";position:absolute;inset:0 0 auto;height:22px;background:repeating-radial-gradient(circle at 12px -6px,#5c0a16 0 14px,transparent 15px 24px);pointer-events:none}
.booth-inner{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;position:relative}
@media (max-width:640px){.booth-inner{grid-template-columns:minmax(0,1fr)}}
.marquee{background:#18120f;border-radius:14px;padding:14px 22px;border:3px solid var(--line);box-shadow:inset 0 0 0 6px #18120f,inset 0 0 0 9px #ffd23f;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;left:14px;right:14px;height:8px;background:radial-gradient(circle,#fff6c2 0 3px,#ffd23f 3.5px 4px,transparent 4.5px) 0 0/16px 8px repeat-x;animation:bulbs 1.2s steps(2) infinite}
.marquee::before{top:4px}.marquee::after{bottom:4px;animation-delay:.6s}
@keyframes bulbs{50%{filter:brightness(.55)}}
.marquee h2{margin:6px 0;font-family:var(--f-marquee);font-weight:400;font-size:clamp(1.8rem,6vw,2.8rem);color:#fff4d6;text-shadow:0 0 10px #ffb703,3px 3px 0 #a3192b;line-height:1;white-space:nowrap}
.booth-side{display:flex;flex-direction:column;gap:10px;align-items:flex-start;color:#fff1f1;min-width:0}
.booth-side p{margin:0;max-width:52ch}
.booth-sign{font-family:var(--f-marquee);font-size:.9rem;background:#ffd23f;color:#18120f;border:2px solid var(--line);border-radius:6px;padding:3px 10px;transform:rotate(-2deg)}
body[data-sec="outings"] .polaroid{background:#fbfbf8;color:#1d2346}
body[data-sec="outings"] .polaroid .meta,body[data-sec="outings"] .polaroid p{color:#5a6288}
body[data-sec="outings"] .polaroid .cover{border-width:6px;border-color:#1a1a1a;border-radius:4px}
body[data-sec="outings"] .polaroid .cover::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
body[data-sec="outings"] .polaroid:hover .cover::after{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
body[data-sec="outings"] .polaroid h3{font-family:var(--f-script);font-size:1.75rem}
body[data-sec="outings"] .tape{display:none}
body[data-sec="outings"] .chip[aria-pressed="true"]{background:#a3192b;color:#fff4d6}

/* Writer's Loft: a sheet in the typewriter on a wooden desk (fixed look) */
.loft-hero{background:repeating-linear-gradient(176deg,#8a5a3b 0 14px,#7c4f33 14px 22px,#94633f 22px 40px);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--pop) var(--pop) 0 var(--shadow);padding:22px 20px 0;margin-bottom:24px;position:relative;overflow:hidden}
.loft-hero .roller{position:absolute;left:8%;right:8%;top:8px;height:16px;background:linear-gradient(#3a3a3a,#111 60%,#2b2b2b);border:2px solid var(--line);border-radius:10px}
.sheet-paper{position:relative;margin:4px auto 0;max-width:640px;background:#fbfaf4;color:#2a2622;border:2px solid var(--line);border-bottom:0;padding:22px 26px 22px;box-shadow:0 -2px 0 #e9e4d4 inset}
.sheet-paper h2{margin:0;font-family:var(--f-type);font-weight:400;font-size:clamp(1.6rem,5vw,2.4rem);letter-spacing:.02em}
.sheet-paper .typed{font-family:var(--f-type);margin:10px 0 0;font-size:1.02rem;line-height:1.5}
.caret{display:inline-block;width:.55em;height:1em;margin-left:4px;background:#2a2622;vertical-align:-2px;animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
body[data-sec="writing"] .note-card{background:#fffef8;color:#2a2622;background-image:linear-gradient(transparent 38px,#e8746a 38px 40px,transparent 40px),repeating-linear-gradient(transparent 0 23px,#bcd6f0 23px 24px);background-position:0 0,0 40px;transform:rotate(var(--tilt,0deg))}
body[data-sec="writing"] .note-card h3{font-family:var(--f-type);font-weight:400;font-size:1.3rem;margin-top:2px}
body[data-sec="writing"] .note-card .excerpt{font-family:var(--f-type);font-size:.92rem;line-height:24px}
body[data-sec="writing"] .note-card .meta{color:#8a5a3b!important;opacity:1!important}
body[data-sec="writing"] .note-card .tape{background:color-mix(in srgb,#e8746a 55%,transparent)}
body[data-sec="writing"] .prompt{background:#fbfaf4;color:#2a2622;position:relative;transform:rotate(-1deg)}
body[data-sec="writing"] .prompt q{font-family:var(--f-type);font-weight:400;font-size:1.35rem;line-height:1.3}
.prompt .pin{position:absolute;top:-10px;left:50%;width:22px;height:22px;border-radius:50%;background:var(--tomato);border:2.5px solid var(--line);box-shadow:2px 2px 0 var(--shadow)}
body[data-sec="writing"] .detail-head h2{font-family:var(--f-type);font-weight:400}
body[data-sec="writing"] .paper.prose{font-family:var(--f-type);font-size:1.05rem}

/* Diary House: spiral notebook for the blog, locked leather diary for the journal */
.note-hero{position:relative;background:#fffdf6;color:#2b2a3a;border:var(--bw) solid var(--line);border-radius:6px var(--r) var(--r) 6px;box-shadow:var(--pop) var(--pop) 0 var(--shadow);padding:26px 22px 20px 66px;margin-bottom:22px;background-image:linear-gradient(90deg,transparent 52px,#ef8a8a 52px 54px,transparent 54px),repeating-linear-gradient(transparent 0 31px,#c5dcf2 31px 32px);background-position:0 0,0 18px;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.note-hero .spiral{position:absolute;left:12px;top:0;bottom:0;width:26px;background:radial-gradient(circle at 13px 50%,#fff 0 6px,#2b2a3a 6.5px 8.5px,transparent 9px) 0 6px/26px 28px repeat-y}
.note-hero .nh-kicker{font-family:var(--f-script);font-weight:700;font-size:1.3rem;color:#8a5cd6}
.note-hero h2{margin:0;font-family:var(--f-script);font-weight:700;font-size:clamp(2.4rem,8vw,3.6rem);line-height:.9}
.note-hero p{margin:0 0 6px;font-family:var(--f-script);font-size:1.35rem;line-height:1.1}
.washi{position:absolute;top:10px;right:24px;width:110px;height:24px;background:repeating-linear-gradient(45deg,#a283ff 0 8px,#c7b5ff 8px 16px);opacity:.85;transform:rotate(6deg);border:1.5px solid rgb(29 35 70 / .3)}
.washi.w2{top:auto;bottom:14px;right:60px;width:80px;background:repeating-linear-gradient(-45deg,#3ccf9a 0 6px,#a6efd3 6px 12px);transform:rotate(-8deg)}
.note-hero.locked{background:#4b2a6e;color:#f6e7c1;background-image:radial-gradient(circle at 20% 20%,rgb(255 255 255 / .08),transparent 50%),repeating-linear-gradient(135deg,rgb(0 0 0 / .08) 0 2px,transparent 2px 6px)}
.note-hero.locked .spiral{background:linear-gradient(90deg,#2d1745,#3b1f5a);width:30px;left:0;border-right:2.5px solid var(--line)}
.note-hero.locked .nh-kicker{color:#e6c46b}
.note-hero.locked h2{color:#f2d98e}
.clasp{position:absolute;right:-2px;top:50%;transform:translateY(-50%);width:62px;height:70px;background:linear-gradient(#e6c46b,#b88d2c);border:2.5px solid var(--line);border-radius:12px 0 0 12px;display:grid;place-items:center;color:#4b2a6e}
.clasp svg{width:28px;height:28px}
body[data-sec="journal"] .row{background:#fffdf6;color:#2b2a3a;background-image:linear-gradient(90deg,transparent 84px,#ef8a8a 84px 86px,transparent 86px)}
body[data-sec="journal"] .row h4{font-family:var(--f-script);font-weight:700;font-size:1.55rem;line-height:1}
body[data-sec="journal"] .row .sub,body[data-sec="journal"] .row .right{color:#6a6880}
body[data-sec="journal"] .row .when{background:none!important;border:2.5px solid #8a5cd6;border-radius:50%;color:#8a5cd6;font-family:var(--f-script);transform:rotate(-6deg)}
body[data-sec="journal"] .detail-head h2{font-family:var(--f-script);font-weight:700;font-size:clamp(2.4rem,7vw,3.4rem)}
body[data-sec="journal"] .paper.prose{font-family:var(--f-script);font-size:1.45rem;line-height:1.7em}

/* Lost Property (search): station-style sign and a luggage-tag search box */
.lost-hero{background:#1f5e46;color:#fff;border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--pop) var(--pop) 0 var(--shadow);padding:16px 20px;margin-bottom:20px}
.lp-sign{display:flex;align-items:center;gap:12px}
.lp-i{width:46px;height:46px;flex:none;border-radius:50%;background:#fff;color:#1f5e46;display:grid;place-items:center;font-family:var(--f-sign);font-weight:800;font-size:1.8rem;border:2.5px solid var(--line)}
.lost-hero h2{margin:0;font-family:var(--f-sign);font-weight:800;font-size:clamp(1.8rem,6vw,2.6rem);text-transform:uppercase;letter-spacing:.02em;line-height:1}
.lost-hero p{margin:8px 0 0;color:#d6efe4}
body[data-sec="search"] .searchbox{background:#f3d9a4;color:#2b2a3a;border-radius:10px 40px 40px 10px;position:relative;padding-right:56px}
body[data-sec="search"] .searchbox input{color:#2b2a3a;font-family:var(--f-sign);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
body[data-sec="search"] .searchbox::after{content:"";position:absolute;right:20px;top:50%;width:18px;height:18px;border-radius:50%;background:var(--bg);border:2.5px solid var(--line);transform:translateY(-50%)}
body[data-sec="search"] .searchbox svg{color:#7a5a24}



/* ===== The Mainstreet Post (blog): post box, airmail envelopes, letters (fixed paper look) ===== */
.post-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:end;background:#2f6b4f;background-image:repeating-linear-gradient(90deg,rgb(255 255 255 / .04) 0 2px,transparent 2px 60px),linear-gradient(transparent 82%,#24563f 82%);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--pop) var(--pop) 0 var(--shadow);padding:18px 22px 0;margin-bottom:22px;overflow:hidden}
.postbox{width:110px;height:auto;display:block;margin-bottom:-2px}
.postbox .letter-in{animation:posting 3.5s ease-in-out infinite}
@keyframes posting{0%,55%{transform:translateY(-14px);opacity:0}65%{opacity:1;transform:translateY(-14px)}85%{transform:translateY(12px);opacity:1}100%{transform:translateY(16px);opacity:0}}
.ph-text{padding-bottom:22px;color:#f4f1e6;display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.ph-kicker{font-family:var(--f-script);font-weight:700;font-size:1.35rem;color:#ffd23f}
.post-hero h2{margin:0;font-family:var(--f-marquee);font-weight:400;font-size:clamp(1.8rem,6vw,3rem);line-height:1;color:#fff6e0;text-shadow:3px 3px 0 #d6332b}
.post-hero p{margin:0;font-size:1.05rem}
.plate{display:inline-flex;flex-direction:column;background:#fff6e0;color:#2a1a1a;border:2.5px solid var(--line);border-radius:6px;padding:4px 10px;font-family:var(--f-sign);font-weight:600;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;line-height:1.15}
.plate b{font-size:.7rem;color:#d6332b;letter-spacing:.1em}
@media (max-width:560px){.post-hero{grid-template-columns:minmax(0,1fr)}.postbox{width:76px;order:2;justify-self:end;margin-top:-60px}}
.mat{margin:10px 0 30px;padding:18px;border-radius:var(--r);background:repeating-linear-gradient(90deg,#a0703f 0 6px,#8f6236 6px 12px);border:var(--bw) solid var(--line);box-shadow:var(--pop) var(--pop) 0 var(--shadow);position:relative}
.mat-label{position:absolute;top:-14px;left:18px;font-family:var(--f-script);font-weight:700;font-size:1.3rem;background:#ffd23f;color:#2a1a1a;border:2px solid var(--line);border-radius:8px;padding:0 10px;transform:rotate(-3deg)}
.mailbag-head{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;font-family:var(--f-marquee);font-size:1.4rem}
.mailbag-head small{font-family:var(--f-ui);font-size:.85rem;color:var(--muted)}
.envelopes{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.postmark{width:110px;height:auto;display:block}
.stamp2{--c:var(--tomato);width:56px;height:66px;flex:none;padding:5px;transform:rotate(4deg);background:radial-gradient(circle,transparent 2.6px,#fff 3px) -4px -4px/8px 8px;filter:drop-shadow(1.5px 1.5px 0 rgb(29 35 70 / .55))}
.stamp2 .st-in{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:var(--c);border:1.5px solid #2a2340;color:#2a2340}
.stamp2 b{font-family:var(--f-display);font-weight:400;font-size:1.3rem;line-height:1}
.stamp2 small{font-family:var(--f-mono);font-size:.5rem;text-transform:uppercase;max-width:100%;overflow:hidden}
.letter-wrap{perspective:900px;margin-bottom:20px}
.letter{--paper:#fffdf7;color:#2a2340;border:7px solid transparent;border-radius:6px;padding:26px clamp(18px,5vw,48px) 28px;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,repeating-linear-gradient(-45deg,#d6332b 0 12px,var(--paper) 12px 20px,#2f5fa7 20px 32px,var(--paper) 32px 40px) border-box;
  box-shadow:0 0 0 2.5px var(--line),6px 6px 0 2.5px var(--shadow);animation:unfold .6s cubic-bezier(.3,1.3,.5,1)}
@keyframes unfold{from{transform:translateY(40px) rotateX(18deg);opacity:0}}
.lh{display:flex;align-items:flex-start;gap:12px;border-bottom:2px solid #2a2340;padding-bottom:12px;margin-bottom:12px}
.lh > div{flex:1;min-width:0}
.lh-name{display:block;font-family:var(--f-marquee);font-size:1.3rem;color:#d6332b}
.lh-addr{display:block;font-family:var(--f-mono);font-size:.72rem;color:#7a6a8a;letter-spacing:.06em;text-transform:uppercase}
.lh .pm{color:#3a3a6a;opacity:.7;transform:rotate(-6deg)}
@media (max-width:520px){.lh .pm{display:none}}
.lh-date{margin:0;font-family:var(--f-script);font-size:1.25rem;color:#7a6a8a;text-align:right}
.letter h2{font-family:var(--f-script);font-weight:700;font-size:clamp(2.4rem,7vw,3.4rem);line-height:1;margin:6px 0 10px}
.letter .prose{color:#2a2340;margin-top:14px}
.letter .sign{font-family:var(--f-script);font-size:1.4rem;margin:18px 0 0;line-height:1.2}
.letter .sign span{font-size:2rem;font-weight:700;color:#d6332b;display:inline-block;transform:rotate(-4deg)}
.letter .gallery button{background:#fff}

/* ===== The Workshop (projects): blueprint drawing (fixed look) ===== */
.bp-hero{--bp:#1f4f8f;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;background-color:var(--bp);
  background-image:linear-gradient(rgb(255 255 255 / .16) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .16) 1px,transparent 1px),linear-gradient(rgb(255 255 255 / .07) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .07) 1px,transparent 1px);
  background-size:60px 60px,60px 60px,12px 12px,12px 12px;color:#eaf3ff;border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--pop) var(--pop) 0 var(--shadow);padding:22px;margin-bottom:22px;position:relative;outline:2px solid rgb(255 255 255 / .5);outline-offset:-10px}
@media (max-width:700px){.bp-hero{grid-template-columns:minmax(0,1fr)}}
.bp-main{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.bp-kicker{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#a9cdfa}
.bp-hero h2{margin:0;font-family:var(--f-sign);font-weight:800;font-size:clamp(2.2rem,8vw,3.6rem);line-height:.95;text-transform:uppercase;letter-spacing:.06em;color:#fff;text-shadow:0 0 1px #fff}
.bp-hero p{margin:0;max-width:56ch;color:#d5e6fb}
.bp-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.bp-acts a{text-decoration:none}
.titleblock{border-collapse:collapse;font-family:var(--f-mono);font-size:.75rem;color:#eaf3ff;min-width:220px;background:rgb(10 30 70 / .35)}
.titleblock th,.titleblock td{border:1.5px solid rgb(255 255 255 / .7);padding:5px 9px;text-align:left;vertical-align:middle}
.titleblock th{font-weight:400;color:#a9cdfa;text-transform:uppercase;letter-spacing:.08em;font-size:.65rem;white-space:nowrap}
.titleblock td{font-weight:700}
.bp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.bp-card{--bp:#1f4f8f;background-color:var(--bp);background-image:linear-gradient(rgb(255 255 255 / .1) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .1) 1px,transparent 1px);background-size:16px 16px;color:#eaf3ff;border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--pop) var(--pop) 0 var(--shadow);display:flex;flex-direction:column;overflow:hidden;min-width:0;transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.bp-card:hover{transform:translate(-2px,-3px) rotate(var(--tilt-h,0deg))}
.bp-open{display:flex;flex-direction:column;gap:8px;padding:12px 12px 10px;background:none;border:0;color:inherit;text-align:left;cursor:pointer;position:relative;font:inherit}
.bp-shot{display:grid;place-items:center;aspect-ratio:16/10;max-width:100%;border:2px dashed rgb(255 255 255 / .7);border-radius:8px;background:rgb(10 30 70 / .4) center/cover no-repeat}
.bp-shot.has{border:3px solid #fff;position:relative;overflow:hidden}
.bp-ph{font-family:var(--f-sign);font-weight:800;font-size:2.6rem;color:#cfe3ff;text-align:center;line-height:1}
.bp-ph small{display:block;font-family:var(--f-mono);font-weight:400;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;margin-top:6px;color:#a9cdfa}
.bp-stamp{position:absolute;top:22px;right:20px;font-family:var(--f-sign);font-weight:800;font-size:1.05rem;letter-spacing:.08em;color:var(--c);border:3px solid var(--c);border-radius:6px;padding:1px 8px;transform:rotate(8deg);background:rgb(10 30 70 / .75);text-shadow:0 0 1px var(--c)}
.bp-stamp.inline{position:static;display:inline-block;transform:rotate(-3deg);font-size:.9rem}
.bp-title{font-family:var(--f-sign);font-weight:800;font-size:1.7rem;text-transform:uppercase;letter-spacing:.04em;line-height:1;color:#fff}
.bp-tag{color:#d5e6fb;font-size:.92rem;line-height:1.35}
.bp-progress{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.7rem;color:#a9cdfa;letter-spacing:.08em}
.bp-progress .bar{flex:1;min-width:60px;height:12px;border:2px solid #fff;border-radius:3px;background:rgb(10 30 70 / .5);overflow:hidden}
.bp-progress .bar i{display:block;height:100%;background:repeating-linear-gradient(-45deg,#ffd23f 0 6px,#1d2346 6px 12px)}
.bp-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 12px 12px;border-top:1.5px dashed rgb(255 255 255 / .45)}
.bp-foot a{text-decoration:none}
.bp-chip{font-family:var(--f-mono);font-size:.68rem;background:none;color:#eaf3ff;border:1.5px solid rgb(255 255 255 / .7);border-radius:4px;padding:2px 7px;cursor:pointer}
.bp-chip:hover{background:#fff;color:#1f4f8f}
.bp-soon{font-family:var(--f-mono);font-size:.68rem;color:#a9cdfa}
.screen.bp-frame{background-color:#1f4f8f;border-color:#fff;outline:2.5px solid var(--line)}
body[data-sec="projects"] .chip[aria-pressed="true"]{background:#1f4f8f;color:#fff}



/* letter-out-of-envelope cards */
.mail{--paper:#fbf4e4;position:relative;display:block;width:100%;min-width:0;text-align:left;background:none;border:0;padding:96px 0 0;cursor:pointer;font:inherit;color:#2a2340;transform:rotate(var(--tilt,0deg));transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.mail{padding-top:101px}
.mail.big{padding-top:168px}
.env-back{position:absolute;left:0;right:0;top:66px;height:90px;background:#d9c8a3;border:2.5px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0}
.mail.big .env-back{top:132px}
.paper-out{position:absolute;left:7%;right:7%;top:0;height:190px;z-index:1;background:#fffef9;color:#2a2340;border:2px solid var(--line);border-radius:4px 4px 0 0;padding:12px 16px;display:flex;flex-direction:column;gap:2px;overflow:hidden;
  background-image:repeating-linear-gradient(transparent 0 21px,#c5dcf2 21px 22px);background-position:0 12px;box-shadow:0 -2px 6px rgb(0 0 0 / .08);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.mail.big .paper-out{height:250px;left:5%;right:5%;padding:14px 22px}
.mail:hover .paper-out,.mail:focus-visible .paper-out{transform:translateY(-22px) rotate(-1deg)}
.po-date{font-family:var(--f-script);font-size:1rem;color:#7a6a8a;text-align:right;line-height:22px}
.po-hi{font-family:var(--f-script);font-weight:700;font-size:1.15rem;line-height:22px}
.mail:not(.big) .po-hi{display:none}
.po-text{font-family:var(--f-script);font-size:1.1rem;line-height:22px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mail.big .po-text{-webkit-line-clamp:5;font-size:1.2rem}
.po-more{font-family:var(--f-ui);font-weight:600;font-size:.8rem;color:#d6332b;margin-top:auto;opacity:0;transition:opacity .25s}
.mail:hover .po-more{opacity:1}
.env-front{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px;padding:14px 16px 12px;border:7px solid transparent;border-radius:12px;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,repeating-linear-gradient(-45deg,#d6332b 0 12px,var(--paper) 12px 20px,#2f5fa7 20px 32px,var(--paper) 32px 40px) border-box;
  box-shadow:0 0 0 2.5px var(--line),var(--pop) var(--pop) 0 2.5px var(--shadow)}
.env-front::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:6px;background:linear-gradient(to bottom right,transparent calc(50% - 1px),rgb(42 35 64 / .12) 50%,transparent calc(50% + 1px)) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent calc(50% - 1px),rgb(42 35 64 / .12) 50%,transparent calc(50% + 1px)) right/50% 100% no-repeat}
.env-top{position:relative;display:flex;align-items:flex-start;gap:6px;min-height:60px}
.env-top .pm{color:#3a3a6a;opacity:.75;transform:rotate(-8deg);margin-right:-26px;margin-top:4px}
.env-top .to{font-family:var(--f-script);font-size:1.05rem;color:#7a6a8a;margin-top:4px}
.env-title{position:relative;font-family:var(--f-script);font-weight:700;font-size:2rem;line-height:1;color:#2a2340;text-wrap:balance;padding:4px 0 2px 6%}
.mail.big .env-title{font-size:clamp(2.3rem,6vw,3.1rem);padding-left:10%}
.env-badges{padding-left:6%}
.env-foot{position:relative;display:flex;justify-content:space-between;gap:8px;font-family:var(--f-mono);font-size:.7rem;color:#7a6a8a;border-top:1.5px dashed #cbbfa5;padding-top:6px}
.mail.big .stamp2{width:70px;height:82px}
.mail.big .postmark{width:140px}
@media (max-width:560px){.env-title,.mail.big .env-title,.env-badges{padding-left:0}.env-top .pm{display:none}}

/* collections: sorting office pigeonholes */
.coll-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-sign);font-weight:600;font-size:.95rem;text-transform:uppercase;letter-spacing:.05em;background:#fffef9;color:#2a2340;border:2px solid var(--line);border-left:10px solid var(--c,var(--sun));border-radius:4px;padding:2px 9px;line-height:1.2;transform:rotate(-1.5deg);box-shadow:2px 2px 0 rgb(29 35 70 / .35);cursor:pointer}
.sorting{background:#7c5434;background-image:repeating-linear-gradient(176deg,rgb(255 255 255 / .05) 0 3px,transparent 3px 14px);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--pop) var(--pop) 0 var(--shadow);padding:14px;margin:4px 0 26px}
.sorting-head{display:flex;align-items:baseline;gap:10px;color:#fff1d6;margin:0 2px 10px}
.sorting-head span{font-family:var(--f-marquee);font-size:1.2rem}
.sorting-head small{font-size:.85rem;opacity:.85}
.holes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.hole{display:flex;flex-direction:column;gap:6px;align-items:stretch;background:#3d2817;border:2.5px solid var(--line);border-radius:6px;padding:8px;cursor:pointer;box-shadow:inset 0 8px 12px rgb(0 0 0 / .45);transition:transform .15s cubic-bezier(.3,1.6,.5,1);font:inherit;text-align:left}
.hole:hover{transform:translateY(-2px)}
.hole .slot{align-self:flex-start;min-width:32px;text-align:center;background:#fbf4e4;color:#2a2340;border:2px solid var(--line);border-radius:3px;font-family:var(--f-mono);font-weight:700;font-size:.8rem;padding:1px 6px;transform:rotate(-3deg)}
.hole .hl{background:#efe0bd;color:#2a2340;border:2px solid var(--line);border-left:8px solid var(--c,var(--sun));border-radius:3px;font-family:var(--f-sign);font-weight:600;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;overflow-wrap:anywhere;line-height:1.15}
.hole[aria-pressed="true"]{background:#ffd23f;box-shadow:inset 0 0 0 3px #fff6e0}
.coll-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-10px 0 24px;font-weight:600}
.coll-banner .btn{margin-left:auto}
.lh-date{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}
.coll-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;padding:12px 14px;background:#fbf4e4;color:#2a2340;border:var(--bw) solid var(--line);border-radius:12px;box-shadow:3px 3px 0 var(--shadow)}
.cn-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--f-script);font-weight:700;font-size:1.25rem}
.cn-btns{display:flex;gap:8px;flex-wrap:wrap}


/* opened letter resting on its envelope */
.opened{position:relative;margin:4px 0 22px;padding-inline:clamp(0px,2vw,18px)}
.env-open{--paper:#fbf4e4;position:relative;color:#2a2340;padding:30px 22px 74px;border:7px solid transparent;border-top:0;border-radius:0 0 12px 12px;transform:rotate(-2deg);
  background:linear-gradient(var(--paper),var(--paper)) padding-box,repeating-linear-gradient(-45deg,#d6332b 0 12px,var(--paper) 12px 20px,#2f5fa7 20px 32px,var(--paper) 32px 40px) border-box;
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/18px 10px repeat-x,linear-gradient(#000 0 0) 0 9px/100% calc(100% - 9px) no-repeat;
          mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/18px 10px repeat-x,linear-gradient(#000 0 0) 0 9px/100% calc(100% - 9px) no-repeat;
  filter:drop-shadow(0 0 1.5px var(--line)) drop-shadow(4px 4px 0 var(--shadow))}
.env-open::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top right,transparent calc(50% - 1px),rgb(42 35 64 / .12) 50%,transparent calc(50% + 1px)) left bottom/50% 70% no-repeat,linear-gradient(to top left,transparent calc(50% - 1px),rgb(42 35 64 / .12) 50%,transparent calc(50% + 1px)) right bottom/50% 70% no-repeat}
.eo-top{position:relative;display:flex;align-items:flex-start;gap:6px}
.eo-top .to{font-family:var(--f-script);font-size:1.2rem;color:#7a6a8a}
.eo-top .pm{color:#3a3a6a;opacity:.75;transform:rotate(-8deg);margin-right:-30px}
.eo-top .postmark{width:140px}
.eo-top .stamp2{width:70px;height:82px}
.eo-title{position:relative;margin:10px 0 4px;padding-left:8%;font-family:var(--f-script);font-weight:700;font-size:clamp(2.4rem,7vw,3.6rem);line-height:1;color:#2a2340;text-wrap:balance}
.eo-badges{position:relative;padding-left:8%}
.opened .letter{border:2.5px solid var(--line);border-radius:3px;background:#fffdf7;background-image:repeating-linear-gradient(transparent 0 31px,#e3eef9 31px 32px);background-position:0 140px;box-shadow:6px 6px 0 var(--shadow),0 10px 24px rgb(0 0 0 / .12);position:relative;z-index:1;margin:-58px clamp(8px,3vw,40px) 0;transform:rotate(1deg);animation:outofenvelope .7s cubic-bezier(.3,1.3,.5,1)}
@keyframes outofenvelope{from{transform:translateY(-70px) rotate(-1deg);opacity:0}}
.opened .lh{align-items:flex-end}
.opened .lh-date{margin:0;font-size:1.2rem}
.dear{font-family:var(--f-script);font-weight:700;font-size:1.6rem;margin:6px 0 10px;color:#2a2340}
@media (max-width:560px){.eo-top .pm{display:none}.eo-title,.eo-badges{padding-left:0}.env-open{padding:24px 16px 66px}.opened .letter{margin:-50px 6px 0}.opened .lh{flex-direction:column;align-items:flex-start}}


.site-tag{display:flex;align-items:center;gap:6px;margin-top:4px;font-family:var(--f-hand);font-weight:700;font-size:1.05rem;line-height:1;color:var(--ink)}
.site-tag #siteTag{background:var(--sun);color:var(--on-color);border:2px solid var(--line);border-radius:6px;padding:2px 8px 1px;transform:rotate(-2deg);box-shadow:2px 2px 0 var(--shadow);white-space:nowrap}
.site-tag .admin-pill{margin-left:2px}
@media (max-width:420px){.site-tag{font-size:.92rem}}


/* lazy cover images */
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.polaroid .cover,.screen,.bp-shot{position:relative;overflow:hidden}
.screen .cover-img{z-index:0}
.gallery img,.photos-edit .ph img{background:var(--sea)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.dvd,.trail,.confetti{display:none}}