/* Martín Gabisson — bento portfolio */
:root{
  --bg:#FFFFFF; --card:#F4F4F6; --inset:#FFFFFF; --raised:#FFFFFF; --ink:#111111; --soft:#55555E;
  --line:rgba(0,0,0,.09); --hair:rgba(0,0,0,.15); --accent:#2D4F6C; --blue:#007AFF;
  --green:#34C759; --amber:#FF9F0A; --r:22px; --rs:14px;
  --shadow:0 1px 2px rgba(0,0,0,.03), 0 6px 20px rgba(0,0,0,.05);
  --dots:rgba(0,0,0,.14);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --card:#1C1C1E; --inset:#2C2C2E; --raised:#1C1C1E; --ink:#F5F5F7; --soft:#98989D;
    --line:rgba(255,255,255,.10); --hair:rgba(255,255,255,.18); --accent:#8FB6D6;
    --blue:#0A84FF; --green:#30D158; --amber:#FFD60A;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
    --dots:rgba(255,255,255,.16);
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --card:#1C1C1E; --inset:#2C2C2E; --raised:#1C1C1E; --ink:#F5F5F7; --soft:#98989D;
  --line:rgba(255,255,255,.10); --hair:rgba(255,255,255,.18); --accent:#8FB6D6;
  --blue:#0A84FF; --green:#30D158; --amber:#FFD60A;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  --dots:rgba(255,255,255,.16);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  letter-spacing:normal;
}
a{color:inherit}
.wrap{max-width:1180px; margin:0 auto; padding:0 16px 72px}

/* ---- nav ---- */
.topbar{position:sticky; top:0; z-index:50; padding:14px 16px 10px; display:flex; justify-content:center; background:linear-gradient(var(--bg) 65%, transparent)}
.nav{display:flex; gap:2px; padding:5px; border-radius:999px; background:var(--raised); box-shadow:var(--shadow); border:1px solid var(--line)}
.nav a{display:block; padding:8px 15px; border-radius:999px; text-decoration:none; font-size:12px; font-weight:600; color:var(--soft)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{background:var(--card); color:var(--ink); font-weight:600}
.themer{position:fixed; left:18px; top:18px; z-index:60; width:38px; height:38px; border-radius:999px;
  border:1px solid var(--line); background:var(--raised); color:var(--soft); cursor:pointer; box-shadow:var(--shadow);
  display:grid; place-items:center; font-size:15px}
.themer:hover{color:var(--ink)}

/* ---- bento ---- */
.bento{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px}
.w{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; position:relative; display:flex; flex-direction:column}
.c2{grid-column:span 2} .c3{grid-column:span 3}
.pad{padding:22px}
.wtitle{display:flex; align-items:center; gap:8px; padding:14px 18px 0; font-size:12.5px; font-weight:600; color:var(--soft)}
.wtitle .ico{width:20px; height:20px; border-radius:6px; display:grid; place-items:center; color:#fff; flex:none}
.chrome{display:flex; align-items:center; gap:7px; padding:12px 14px; border-bottom:1px solid var(--line)}
.dot{width:11px;height:11px;border-radius:50%}
.d1{background:#FF5F57}.d2{background:#FEBC2E}.d3{background:#28C840}
.chrome .label{margin-left:6px; font-size:12.5px; color:var(--soft); font-weight:500}

h1,h2,h3{letter-spacing:-0.01em; margin:0; font-weight:700}
.lede{font-size:22px; line-height:1.3; font-weight:600; letter-spacing:-0.01em; margin:0 0 14px}
.lede span{color:var(--soft); font-weight:500}
.p{margin:0 0 12px; color:var(--soft); font-size:14.5px; line-height:1.6; max-width:62ch}
.p:last-child{margin-bottom:0}
.p b{color:var(--ink); font-weight:600}

/* ---- product shelf ---- */
.shelf{display:grid; gap:10px; padding:14px}
.app{display:flex; gap:14px; align-items:center; padding:12px; border-radius:var(--rs); text-decoration:none; background:var(--inset); border:1px solid transparent}
.app:hover{border-color:var(--hair)}
.appicon{width:52px; height:52px; border-radius:13px; flex:none; display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.app .nm{font-weight:600; font-size:15.5px; display:flex; align-items:center; gap:7px}
.app .ds{font-size:13.3px; color:var(--soft); margin-top:2px; line-height:1.4}
.app .go{margin-left:auto; color:var(--soft); flex:none; font-size:17px}
.live{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; color:var(--green);
  background:color-mix(in srgb, var(--green) 14%, transparent); padding:2px 7px; border-radius:999px; letter-spacing:0}
.live i{width:5px;height:5px;border-radius:50%;background:var(--green); display:block}

/* ---- numbers ---- */
.rows{padding:6px 18px 18px}
.row{display:flex; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .k{font-size:13.5px; color:var(--soft); flex:1; min-width:0}
.row .v{font-size:17px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap}
.row .v em{font-style:normal; color:var(--soft); font-weight:500}
.tag{font-size:11px; color:var(--soft); background:var(--inset); padding:2px 8px; border-radius:999px; white-space:nowrap}

/* ---- calendar ---- */
.cal .day{font-size:11px; font-weight:700; color:#FF3B30; letter-spacing:.08em; text-transform:uppercase}
.cal .num{font-size:44px; font-weight:800; line-height:1; letter-spacing:-0.04em; margin:2px 0 14px}
.slot{border-left:3px solid var(--hair); padding:5px 0 5px 10px; margin-bottom:9px}
.slot .t{font-size:13.5px; font-weight:600} .slot .s{font-size:12.5px; color:var(--soft)}
.slot.open{border-left-color:var(--green); background:color-mix(in srgb, var(--green) 10%, transparent); border-radius:0 8px 8px 0; padding:7px 10px 7px 10px}
.slot.open .s{color:var(--green)}
.calfoot{font-size:12px; color:var(--soft); margin-top:12px; border-top:1px solid var(--line); padding-top:11px}
.corner{position:absolute; right:16px; top:16px; width:30px;height:30px;border-radius:999px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--soft); text-decoration:none; font-size:14px}
.corner:hover{color:var(--ink)}

/* ---- freeform canvas ---- */
.canvas{position:relative; height:420px; background-image:radial-gradient(var(--dots) 1px, transparent 1px);
  background-size:18px 18px; overflow-x:auto; overflow-y:hidden}
.board{position:relative; min-width:980px; height:100%}
.axis{position:absolute; left:0; right:0; bottom:46px; height:1px; background:var(--hair)}
.tick{position:absolute; bottom:24px; transform:translateX(-50%); font-size:11px; color:var(--soft); font-variant-numeric:tabular-nums}
.tick::after{content:""; position:absolute; left:50%; bottom:-16px; width:1px; height:9px; background:var(--hair)}
.band{position:absolute; height:7px; border-radius:999px; bottom:60px}
.note{position:absolute; width:168px; padding:10px 11px; border-radius:10px; background:var(--raised);
  border:1px solid var(--hair); box-shadow:0 4px 14px rgba(0,0,0,.09); cursor:grab; touch-action:none; user-select:none}
.note:active{cursor:grabbing}
.note .co{font-size:11px; font-weight:700; letter-spacing:.02em}
.note .ro{font-size:12.5px; font-weight:600; margin:3px 0 4px; line-height:1.25}
.note .dt{font-size:10.5px; color:var(--soft); line-height:1.35; font-variant-numeric:tabular-nums}
.note.pin{width:auto; padding:7px 11px; border-radius:999px}
.note.pin .ro{margin:0; font-size:12px}
.toolbar{display:flex; align-items:center; gap:14px; padding:10px 16px; border-bottom:1px solid var(--line); color:var(--soft); font-size:13px}
.toolbar .sp{margin-left:auto}
.reset{border:1px solid var(--line); background:transparent; color:var(--soft); font:inherit; font-size:12px;
  padding:4px 11px; border-radius:999px; cursor:pointer}
.reset:hover{color:var(--ink)}
.hint{padding:11px 18px; font-size:12px; color:var(--soft); border-top:1px solid var(--line)}

/* ---- playlist ---- */
.pl{padding:16px 18px}
.plhead{display:flex; gap:14px; align-items:flex-end; margin-bottom:14px}
.art{width:74px;height:74px;border-radius:9px;flex:none; background:linear-gradient(140deg,#4A6FA5,#2D4F6C 55%,#8C5A3C)}
.plhead .nm{font-size:28px; font-weight:800; letter-spacing:-0.04em; line-height:1.05}
.plhead .mt{font-size:12px; color:var(--soft); margin-top:3px}
.tr{display:flex; align-items:center; gap:11px; padding:7px 0; font-size:13.5px; border-bottom:1px solid var(--line)}
.tr:last-child{border-bottom:0}
.tr .n{color:var(--soft); font-size:12px; width:13px; font-variant-numeric:tabular-nums}
.tr .ti{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tr .du{color:var(--soft); font-size:12px; font-variant-numeric:tabular-nums}

/* ---- notes / misc ---- */
.notelist li{margin:0 0 10px; font-size:13.5px; color:var(--soft); line-height:1.5}
.notelist{margin:0; padding-left:18px}
.notelist b{color:var(--ink); font-weight:600}
.contact{padding:20px 18px}
.avatar{width:62px;height:62px;border-radius:999px; margin:0 auto 10px; background:var(--inset); border:1px solid var(--line);
  display:grid; place-items:center; font-size:21px; font-weight:650; color:var(--soft); letter-spacing:0}
.btns{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0 12px}
.btn{display:grid; place-items:center; gap:5px; padding:11px 6px; border-radius:12px; background:var(--inset);
  text-decoration:none; font-size:11.5px; color:var(--soft); border:1px solid transparent}
.btn:hover{border-color:var(--hair); color:var(--ink)}
.mailrow{display:flex; align-items:center; gap:8px; justify-content:space-between; padding:10px 12px;
  border:1px solid var(--line); border-radius:11px; font-size:13px}
.mailrow a{text-decoration:none; color:var(--blue)}
.map{height:100%; min-height:250px; position:relative; overflow:hidden; background:
  linear-gradient(transparent 49.6%, var(--line) 49.6%, var(--line) 50.4%, transparent 50.4%) 0 0/100% 38px,
  linear-gradient(90deg, transparent 49.6%, var(--line) 49.6%, var(--line) 50.4%, transparent 50.4%) 0 0/52px 100%,
  var(--inset)}
.map .water{position:absolute; right:-8%; bottom:-14%; width:62%; height:46%;
  background:color-mix(in srgb, var(--blue) 17%, transparent); transform:rotate(-14deg); border-radius:28px 0 0 0}
.map .park{position:absolute; left:9%; top:12%; width:26%; height:24%; border-radius:10px;
  background:color-mix(in srgb, var(--green) 20%, transparent)}
.map .road{position:absolute; background:var(--raised); opacity:.9}
.map .r1{left:0; right:0; top:44%; height:7px; transform:rotate(-5deg)}
.map .r2{top:0; bottom:0; left:38%; width:6px; transform:rotate(9deg)}
.map .r3{left:-10%; right:-10%; top:72%; height:5px; transform:rotate(7deg)}
.pin2{position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:30px;height:30px;border-radius:999px;
  background:var(--blue); border:3px solid var(--card); box-shadow:0 3px 10px rgba(0,0,0,.25)}
.maplabel{position:absolute; left:14px; bottom:14px; background:var(--raised); border:1px solid var(--line);
  border-radius:11px; padding:8px 12px; font-size:12.5px; box-shadow:var(--shadow)}
.maplabel b{display:block; font-size:13px}
.maplabel span{color:var(--soft)}

/* ---- article pages ---- */
.page{max-width:720px; margin:0 auto}
.page h1{font-size:40px; font-weight:800; margin:26px 0 18px; letter-spacing:-0.04em}
.page h2{font-size:19px; margin:34px 0 10px}
.page h3{font-size:15.5px; margin:0 0 3px}
.page p{color:var(--soft); font-size:15px; line-height:1.65; margin:0 0 14px; max-width:68ch}
.page p b{color:var(--ink); font-weight:600}
.page .sec, .wide-page .sec{margin-top:40px}
.sechead{font-size:12.5px; font-weight:600; color:var(--soft); padding-bottom:9px; border-bottom:1px solid var(--line); margin-bottom:16px}
.entry{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line)}
.entry:last-child{border-bottom:0}
.logo{width:46px;height:46px;border-radius:12px;flex:none; display:grid; place-items:center; font-weight:700; font-size:15px; color:#fff}
.entry .body{flex:1; min-width:0}
.entry .meta{font-size:12.5px; color:var(--soft); margin:2px 0 7px}
.entry .desc{font-size:14px; color:var(--soft); line-height:1.55; margin:0}
.entry .desc b{color:var(--ink); font-weight:600}
.entry .out{font-size:13px; color:var(--blue); text-decoration:none; white-space:nowrap; align-self:center}
.foot{margin:56px 0 0; padding-top:20px; border-top:1px solid var(--line); font-size:13px; color:var(--soft); text-align:center}

@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .c2,.c3{grid-column:span 2}
  .lede{font-size:22px}
}
@media (max-width:620px){
  .bento{grid-template-columns:1fr; gap:14px}
  .c2,.c3{grid-column:span 1}
  .wrap{padding:0 16px 56px}
  .themer{left:12px; top:12px}
  .nav a{padding:7px 12px; font-size:13.5px}
  .page h1{font-size:28px}
  .entry{gap:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px}

/* ===== Projects index ===== */
.phead{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin:26px 0 24px}
.phead .eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--soft)}
.phead h1{font-size:40px; font-weight:800; letter-spacing:-0.04em; margin:6px 0 0}
.phead .me{width:62px;height:62px;border-radius:999px;background:var(--card); display:block; flex:none; transition:transform .18s ease;border:1px solid var(--line);
  display:grid;place-items:center;font-weight:650;color:var(--soft);font-size:15px;flex:none}
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.pcard{grid-column:span 1; border-radius:var(--r); overflow:hidden; background:var(--raised); border:1px solid var(--line);
  box-shadow:var(--shadow); display:flex; flex-direction:column; text-decoration:none}
.pcard.wide{grid-column:span 2}
.pcard .top{padding:26px 26px 0; flex:1; display:flex; flex-direction:column; min-height:300px; position:relative; overflow:hidden}
.pcard .eb{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(0,0,0,.52)}
.pcard h2{font-size:28px; font-weight:800; line-height:1.05; letter-spacing:-0.04em; margin:12px 0 0; color:#14181C; max-width:14ch}
.pcard.wide h2{max-width:18ch}
.pcard .shot{margin-top:auto; border-radius:10px 10px 0 0; overflow:hidden; box-shadow:0 10px 28px rgba(0,0,0,.16)}
.pcard .shot img{display:block; width:100%; height:auto}
.pcard .bar{display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--raised); border-top:1px solid var(--line)}
.pcard .bar .ic{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px}
.pcard .bar .nm{font-weight:650; font-size:14.5px; display:block}
.pcard .bar .sub{font-size:12.5px; color:var(--soft); margin-top:1px; display:block}
.viewpill{margin-left:auto; flex:none; font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--blue);
  background:color-mix(in srgb, var(--blue) 10%, transparent); padding:7px 14px; border-radius:999px}
.pcard:hover .viewpill{background:color-mix(in srgb, var(--blue) 12%, transparent)}
.minilist{padding:22px 24px; align-self:start}
.minilist h2{font-size:22px; font-weight:700; letter-spacing:-0.01em; margin:0 0 14px}
.minirow{display:flex; gap:11px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line)}
.minirow:last-child{border-bottom:0}
.minirow .ic{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#fff}
.minirow .nm{font-size:13.5px; font-weight:600; display:block}
.minirow .sub{font-size:12px; color:var(--soft); display:block}
.coheads{font-size:22px; font-weight:700; letter-spacing:-0.01em; margin:52px 0 16px; padding-top:30px; border-top:1px solid var(--line)}
.cogrid{display:grid; grid-template-columns:repeat(3,1fr); gap:0 36px}
.corow{display:flex; align-items:center; gap:13px; padding:15px 0; border-bottom:1px solid var(--line)}
.corow .ic{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px}
.corow .nm{font-weight:650; font-size:14.5px; display:block}
.corow .sub{font-size:12.5px; color:var(--soft); margin-top:1px; display:block}
.corow .pill{margin-left:auto; flex:none; font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--blue);
  background:color-mix(in srgb, var(--blue) 10%, transparent); padding:6px 13px; border-radius:999px; text-decoration:none}

/* ===== Case study ===== */
.back{display:inline-flex; align-items:center; gap:5px; font-size:13.5px; color:var(--blue); text-decoration:none; margin:24px 0 20px}
.cshead{display:flex; gap:24px; align-items:flex-start; margin-bottom:34px}
.cshead .bigic{width:112px;height:112px;border-radius:26px;flex:none;display:grid;place-items:center;color:#fff;
  font-weight:700; font-size:40px; letter-spacing:-0.03em; box-shadow:inset 0 2px 0 rgba(255,255,255,.22)}
.cshead h1{font-size:40px; font-weight:800; letter-spacing:-0.04em; margin:0}
.cshead .sub{font-size:17px; color:var(--ink); margin-top:3px}
.cshead .meta{font-size:13px; color:var(--soft); margin-top:7px}
.ctas{display:flex; align-items:stretch; gap:9px; margin-top:16px; flex-wrap:wrap}
.cta{display:inline-flex; align-items:center; justify-content:center; flex:none; white-space:nowrap;
  height:38px; padding:0 19px; border-radius:999px; font-size:13.5px; font-weight:600; line-height:1;
  text-decoration:none; border:1px solid transparent}
.cta.pri{background:var(--blue); color:#fff; border-color:var(--blue)}
.cta.ghost{background:var(--card); color:var(--ink); border-color:var(--hair)}
.stats{display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-bottom:44px}
.stat{padding:18px 14px; text-align:center; border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat .l{font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--soft)}
.stat .v{font-size:26px; font-weight:800; letter-spacing:-0.04em; margin:5px 0 4px; line-height:1.1}
.stat .c{font-size:11.5px; color:var(--soft); line-height:1.35}
.csh2{font-size:22px; font-weight:700; letter-spacing:-0.01em; margin:0 0 15px}
.preview{display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:16px; margin-bottom:46px}
.pv{border-radius:16px; overflow:hidden; border:1px solid var(--line); min-height:215px; display:flex; flex-direction:column}
.pv.shotbox{background:var(--card); padding:22px; justify-content:center}
.pv.shotbox img{width:100%; border-radius:7px; box-shadow:0 8px 24px rgba(0,0,0,.16); display:block}
.pv .eb{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase}
.pv .pad2{padding:20px; display:flex; flex-direction:column; height:100%}
.pv .hex{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:27px; font-weight:700; letter-spacing:-0.02em; margin-top:auto}
.pv .note2{font-size:13px; margin-top:7px; line-height:1.45}
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start}
.vh{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line)}
.vh:last-child{border-bottom:0}
.vh .t{font-size:14px; font-weight:650}
.vh .d{font-size:12.5px; color:var(--soft); white-space:nowrap}
.vh .s{font-size:13.5px; color:var(--soft); margin-top:2px}
.notecard{background:var(--card); border-radius:14px; padding:16px 18px; margin-bottom:13px}
.notecard .h{display:flex; justify-content:space-between; gap:14px; align-items:baseline}
.notecard .t{font-size:14.5px; font-weight:650}
.notecard .by{font-size:11.5px; color:var(--soft); white-space:nowrap}
.notecard .b{font-size:13.5px; color:var(--soft); line-height:1.55; margin-top:6px}
.todo{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.05em; color:var(--amber);
  background:color-mix(in srgb, var(--amber) 16%, transparent); padding:3px 9px; border-radius:999px; margin-bottom:7px}
.alsohead{font-size:22px; font-weight:700; letter-spacing:-0.01em; margin:52px 0 16px; padding-top:30px; border-top:1px solid var(--line)}
.also{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px}
.alsocard{display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--card); border-radius:14px; text-decoration:none}
.alsocard .ic{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px}
.alsocard .nm{font-weight:650; font-size:14px; display:block}
.alsocard .sub{font-size:12px; color:var(--soft); margin-top:1px; display:block}
.alsocard .viewpill{margin-left:auto}
.wide-page{max-width:1100px; margin:0 auto}

@media (max-width:900px){
  .pgrid{grid-template-columns:repeat(2,1fr)} .pcard.wide{grid-column:span 2}
  .cogrid{grid-template-columns:repeat(2,1fr); gap:0 28px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(4){border-left:0}
  .stat:nth-child(1),.stat:nth-child(2),.stat:nth-child(3){border-bottom:1px solid var(--line)}
  .preview{grid-template-columns:1fr 1fr} .pv.shotbox{grid-column:span 2}
  .twocol{grid-template-columns:1fr; gap:36px}
  .also{grid-template-columns:1fr}
}
@media (max-width:620px){
  .pgrid{grid-template-columns:1fr} .pcard.wide{grid-column:span 1}
  .pcard h2, .pcard.wide h2{font-size:22px; max-width:none}
  .cogrid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:0 !important; border-bottom:1px solid var(--line)}
  .preview{grid-template-columns:1fr} .pv.shotbox{grid-column:span 1}
  .cshead{flex-direction:column; gap:16px}
  .cshead .bigic{width:84px;height:84px;border-radius:20px;font-size:30px}
  .cshead h1{font-size:29px}
  .phead h1{font-size:30px}
}

/* ===== Portrait + Photo Booth ===== */
.portrait{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--inset)}
.portrait img{width:100%; height:100%; object-fit:cover; display:block;
  transition:filter .35s ease, transform .35s ease}
@media (prefers-reduced-motion:reduce){.portrait img{transition:none}}
.portrait img.fx1{filter:sepia(.92) contrast(1.05)}
.portrait img.fx2{filter:grayscale(1) contrast(1.25)}
.portrait img.fx3{filter:invert(1) grayscale(1) contrast(1.15)}
.portrait img.fx4{filter:saturate(4.2) hue-rotate(-18deg) contrast(1.3)}
.portrait img.fx5{transform:scaleX(-1)}
.portrait img.fx6{filter:hue-rotate(185deg) saturate(3.4) contrast(1.45)}
.portrait img.fx7{filter:contrast(2.5) saturate(2.4) brightness(1.06)}
.shutter{position:absolute; right:13px; bottom:13px; width:38px; height:38px; border-radius:999px;
  border:0; cursor:pointer; background:rgba(28,28,30,.72); backdrop-filter:blur(8px);
  display:grid; place-items:center; color:#fff}
.shutter:hover{background:rgba(28,28,30,.88)}
.fxname{position:absolute; left:13px; bottom:15px; font-size:11.5px; font-weight:600; color:#fff;
  background:rgba(28,28,30,.6); backdrop-filter:blur(8px); padding:5px 11px; border-radius:999px;
  opacity:0; transition:opacity .25s ease; pointer-events:none}
.fxname.on{opacity:1}
.flash{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none}
.flash.go{animation:pop .42s ease-out}
@keyframes pop{0%{opacity:.92}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.flash.go{animation:none}}
.pb{padding:16px 18px 18px; display:flex; flex-direction:column; justify-content:center; gap:14px; flex:1; min-height:0}
.pbtile{margin:0 auto; width:96px; height:96px; border-radius:23px; display:grid; place-items:center;
  background:linear-gradient(160deg,#F05A4F,#C8392F); box-shadow:0 12px 30px rgba(200,57,47,.3), inset 0 2px 0 rgba(255,255,255,.3);
  border:0; cursor:pointer; transition:transform .18s ease}
.pbtile:hover{transform:scale(1.045)}
.pbtile:active{transform:scale(.97)}
.pbfoot{display:flex; align-items:center; justify-content:center; gap:9px}
.pbfoot .hint{font-size:12px; background:var(--inset); border:1px solid var(--line); padding:6px 11px; border-radius:999px; color:var(--soft)}

/* ===== Stack ===== */
.tools{display:flex; flex-wrap:wrap; gap:9px; padding:14px 18px 18px}
.tool{width:44px; height:44px; border-radius:13px; background:var(--inset); border:1px solid var(--line);
  display:grid; place-items:center; transition:transform .16s ease}
.tool:hover{transform:translateY(-2px)}
:root[data-theme="dark"] .tool svg[aria-label="Notion"] path,
:root[data-theme="dark"] .tool svg[aria-label="Python"] path{fill:#fff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tool svg[aria-label="Notion"] path{fill:#fff}}

/* ===== Notes app (About) ===== */
.notesapp{max-width:1080px; margin:18px auto 0; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 2px 6px rgba(0,0,0,.05), 0 24px 60px rgba(0,0,0,.10); background:var(--raised)}
.nbar{display:flex; align-items:center; gap:8px; padding:11px 14px; background:var(--card); border-bottom:1px solid var(--line)}
.nbar .title{flex:1; text-align:center; font-size:13px; font-weight:600; color:var(--soft)}
.nbar .ic{color:var(--soft); display:grid; place-items:center}
.ncols{display:grid; grid-template-columns:200px 236px 1fr; min-height:620px}
.nside{background:var(--card); border-right:1px solid var(--line); padding:12px 10px; display:flex; flex-direction:column}
.nside .grp{font-size:11px; font-weight:600; color:var(--soft); padding:9px 8px 5px}
.nfolder{display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:7px; font-size:13.5px}
.nfolder.sel{background:#FFD56B; color:#3A2D06; font-weight:600}
.nfolder .cnt{margin-left:auto; font-size:12px; opacity:.72}
.nuser{margin-top:auto; display:flex; align-items:center; gap:9px; padding:10px 8px 2px; border-top:1px solid var(--line)}
.nuser .av{width:28px;height:28px;border-radius:999px;overflow:hidden;background:var(--inset);flex:none}
.nuser .av img{width:100%;height:100%;object-fit:cover;display:block}
.nuser .nm{font-size:12.5px; font-weight:600}
.nuser .sb{font-size:11px; color:var(--soft)}
.nlist{border-right:1px solid var(--line); padding:14px 10px; background:var(--raised)}
.nlhead{display:flex; align-items:baseline; justify-content:space-between; padding:0 8px 10px}
.nlhead b{font-size:19px; font-weight:600; letter-spacing:-0.01em}
.nlhead span{font-size:11.5px; color:var(--soft)}
.nitem{display:block; width:100%; text-align:left; border:0; background:transparent; font:inherit; cursor:pointer;
  padding:10px 10px; border-radius:9px; border-bottom:1px solid var(--line)}
.nitem:last-child{border-bottom:0}
.nitem .t{font-size:13.5px; font-weight:600; color:var(--ink)}
.nitem .p{font-size:12.5px; color:var(--soft); margin:2px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nitem.sel{background:#FFD56B; border-bottom-color:transparent}
.nitem.sel .t,.nitem.sel .p{color:#3A2D06}
.ndoc{padding:20px 52px 60px; max-width:none; overflow-y:auto; max-height:760px; scroll-behavior:smooth}
.ndoc .crumb{text-align:center; font-size:11.5px; color:var(--soft); margin-bottom:22px}
.nhead{display:flex; gap:18px; align-items:center; margin-bottom:20px}
.nhead .pic{width:78px;height:78px;border-radius:18px;overflow:hidden;flex:none;background:var(--inset);border:1px solid var(--line)}
.nhead .pic img{width:100%;height:100%;object-fit:cover;display:block}
.nhead .eb{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--soft)}
.nhead h1{font-size:34px; font-weight:800; letter-spacing:-0.04em; margin:3px 0 0}
.ndoc h2{font-size:22px; font-weight:700; letter-spacing:-0.01em; margin:0 0 14px}
.ndoc p{font-size:15px; line-height:1.68; color:var(--ink); margin:0 0 16px; max-width:58ch}
.ndoc p.dim{color:var(--soft)}
.ndoc a{color:#8A6D2F; text-decoration:underline; text-underline-offset:2px}
.nsec{padding-top:36px; margin-top:36px; border-top:1px solid var(--line)}
.nsec:first-of-type{border-top:0; margin-top:0; padding-top:0}
.ndoc ul{margin:0 0 15px; padding-left:19px}
.ndoc li{font-size:15px; line-height:1.62; margin:0 0 7px}
@media (max-width:900px){
  .ncols{grid-template-columns:1fr}
  .nside{display:none}
  .nlist{border-right:0; border-bottom:1px solid var(--line)}
  .ndoc{padding:18px 20px 44px; max-height:none}
}
@media (prefers-reduced-motion:reduce){.ndoc{scroll-behavior:auto}}

/* ===== Leaflet 1.9.4 (inlined: artifacts only accept stylesheets from Google Fonts) ===== */
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */



/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

/* map widget */
.mapwrap{position:relative; height:100%; min-height:270px}
#map{position:absolute; inset:0; background:var(--inset)}
.leaflet-container{font:inherit; background:var(--inset)}
.leaflet-control-attribution{font-size:9.5px !important; background:rgba(255,255,255,.78) !important;
  padding:1px 5px !important; border-radius:5px 0 0 0}
.leaflet-control-attribution a{color:var(--soft) !important}
.leaflet-control-zoom{border:1px solid var(--line) !important; border-radius:9px !important; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.14) !important}
.leaflet-control-zoom a{width:27px !important; height:27px !important; line-height:27px !important;
  font-size:16px !important; color:var(--ink) !important; background:var(--raised) !important; border-color:var(--line) !important}
.leaflet-bar a:hover{background:var(--card) !important}
.mepin{width:42px; height:42px; border-radius:999px; overflow:hidden; border:3px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.3); background:#fff}
.mepin img{width:100%; height:100%; object-fit:cover; display:block}
.compass{position:absolute; right:11px; bottom:58px; z-index:500; width:29px; height:29px; border-radius:999px;
  background:var(--raised); border:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.14);
  display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--soft)}
.maplabel{position:absolute; left:12px; bottom:12px; z-index:500; display:flex; align-items:center; gap:9px;
  background:var(--raised); border:1px solid var(--line); border-radius:11px; padding:7px 12px 7px 8px;
  box-shadow:0 3px 12px rgba(0,0,0,.12)}
.maplabel .av{width:26px;height:26px;border-radius:999px;overflow:hidden;flex:none}
.maplabel .av img{width:100%;height:100%;object-fit:cover;display:block}
.maplabel b{display:block; font-size:12.5px}
.maplabel span{display:block; font-size:11.5px; color:var(--soft)}
:root[data-theme="dark"] .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9)}}

/* map fallback: drawn Barcelona if the tile host is unreachable */
.mapfallback{position:absolute; inset:0; display:none; background:
  linear-gradient(transparent 49.6%, var(--line) 49.6%, var(--line) 50.4%, transparent 50.4%) 0 0/100% 38px,
  linear-gradient(90deg, transparent 49.6%, var(--line) 49.6%, var(--line) 50.4%, transparent 50.4%) 0 0/52px 100%,
  var(--inset)}
.mapwrap.fallback .mapfallback{display:block}
.mapwrap.fallback #map, .mapwrap.fallback .compass{display:none}
.mapfallback .water{position:absolute; right:-8%; bottom:-14%; width:62%; height:46%;
  background:color-mix(in srgb, var(--blue) 17%, transparent); transform:rotate(-14deg); border-radius:28px 0 0 0}
.mapfallback .park{position:absolute; left:9%; top:12%; width:26%; height:24%; border-radius:10px;
  background:color-mix(in srgb, var(--green) 20%, transparent)}
.mapfallback .road{position:absolute; background:var(--raised); opacity:.9}
.mapfallback .r1{left:0; right:0; top:44%; height:7px; transform:rotate(-5deg)}
.mapfallback .r2{top:0; bottom:0; left:38%; width:6px; transform:rotate(9deg)}
.mapfallback .r3{left:-10%; right:-10%; top:72%; height:5px; transform:rotate(7deg)}
.mapfallback .pin2{position:absolute; left:48%; top:46%; transform:translate(-50%,-50%); width:42px;height:42px;
  border-radius:999px; overflow:hidden; border:3px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.3)}
.mapfallback .pin2 img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Freeform board v2: pan, add, edit, delete, undo ===== */
.board2{position:relative}
.vp{position:relative; height:420px; overflow:hidden; cursor:grab;
  background-image:radial-gradient(var(--dots) 1px, transparent 1px); background-size:18px 18px}
.vp.panning{cursor:grabbing}
.cv{position:absolute; left:0; top:0; width:1400px; height:420px; transform-origin:0 0}
.tb{display:flex; align-items:center; gap:3px; padding:9px 14px; border-bottom:1px solid var(--line)}
.tb button{width:30px; height:30px; border-radius:8px; border:0; background:transparent; color:var(--soft);
  cursor:pointer; display:grid; place-items:center}
.tb button:hover:not(:disabled){background:var(--inset); color:var(--ink)}
.tb button:disabled{opacity:.33; cursor:default}
.tb .sep{width:1px; height:18px; background:var(--line); margin:0 7px}
.tb .sp{flex:1}
.tb .lbl{font-size:13px; font-weight:600; color:var(--ink); margin-right:10px}
.card{position:absolute; width:168px; padding:10px 11px; border-radius:10px; background:var(--raised);
  border:1px solid var(--hair); box-shadow:0 4px 14px rgba(0,0,0,.09); cursor:grab; touch-action:none; user-select:none}
.card:active{cursor:grabbing}
.card.sel{box-shadow:0 0 0 2px var(--blue), 0 6px 18px rgba(0,0,0,.14)}
.card .co{font-size:11px; font-weight:700; letter-spacing:.02em}
.card .ro{font-size:12.5px; font-weight:600; margin:3px 0 4px; line-height:1.25}
.card .dt{font-size:10.5px; color:var(--soft); line-height:1.35; font-variant-numeric:tabular-nums; white-space:pre-line}
.card [contenteditable]{outline:none; cursor:text}
.card [contenteditable]:focus{background:color-mix(in srgb, var(--blue) 9%, transparent); border-radius:4px}
.card.pin{width:auto; padding:7px 11px; border-radius:999px}
.card.pin .ro{margin:0; font-size:12px}
.kill{position:absolute; right:-9px; top:-9px; width:21px; height:21px; border-radius:999px; border:0;
  background:#FF453A; color:#fff; font-size:13px; line-height:1; cursor:pointer; display:none; place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25)}
.card.sel .kill{display:grid}
.axis2{position:absolute; left:0; right:0; bottom:46px; height:1px; background:var(--hair)}
.tick2{position:absolute; bottom:24px; transform:translateX(-50%); font-size:11px; color:var(--soft); font-variant-numeric:tabular-nums}
.tick2::after{content:""; position:absolute; left:50%; bottom:-16px; width:1px; height:9px; background:var(--hair)}
.band2{position:absolute; height:7px; border-radius:999px; bottom:60px}
.w.full{position:fixed; inset:14px; z-index:999; margin:0; border-radius:18px}
.w.full .vp{height:calc(100vh - 128px)}
.w.full .cv{height:100%}
body.boardopen{overflow:hidden}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:998; display:none}
body.boardopen .scrim{display:block}
@media (max-width:620px){.vp{height:360px}}

/* projects index: the three products are equal cards, the tools strip runs full width */
.pcard.c3{grid-column:span 3}
@media (max-width:900px){.pcard.c3{grid-column:span 2}}
@media (max-width:620px){.pcard.c3{grid-column:span 1}}
.minilist.wide3 .rows3{display:grid; grid-template-columns:repeat(3,1fr); gap:0 30px}
.minilist.wide3 .minirow{border-bottom:1px solid var(--line)}
@media (max-width:620px){.minilist.wide3 .rows3{grid-template-columns:1fr; gap:0}}

/* ===== About: "Right now I'm into" tags and the Skills checklist ===== */
.intro-line{font-size:15px; color:var(--ink); margin:0 0 12px}
.tags{display:flex; flex-wrap:wrap; gap:9px; margin:0 0 18px}
.tag2{padding:9px 14px; border-radius:9px; font-size:14.5px; font-weight:600; line-height:1.2}
.t-blue{background:#E4EDFB; color:#2A5DA8}
.t-purple{background:#ECE0FB; color:#6B3FB5}
.t-green{background:#DEF1E4; color:#2F7A42}
.t-amber{background:#FBEFD3; color:#92661A}
.t-rose{background:#FBE2E4; color:#A63D4C}
.t-teal{background:#D9EFF0; color:#1F6E74}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tag2{filter:brightness(.78) saturate(1.25)}}
:root[data-theme="dark"] .tag2{filter:brightness(.78) saturate(1.25)}
.skills2{list-style:none; margin:0; padding:0}
.skills2 li{display:flex; align-items:center; gap:12px; padding:9px 0; font-size:15px}
.skills2 .ck{width:22px; height:22px; border-radius:999px; background:#F0B429; flex:none; display:grid; place-items:center}
.closing{margin-top:40px; padding-top:30px; border-top:1px solid var(--line); text-align:center}
.closing .spark{color:#E8B33C; font-size:17px; display:block; margin-bottom:12px}
.closing p{color:var(--soft); margin:0 0 5px; font-size:15px; max-width:none}
.closing a{color:#8A6D2F; text-decoration:underline; text-underline-offset:2px}

/* ===== Map: live-location pulse under the pin ===== */
.mepin{position:relative}
.ping{position:absolute; left:50%; top:50%; width:42px; height:42px; margin:-21px 0 0 -21px;
  border-radius:999px; background:var(--blue); opacity:.32; z-index:-1; animation:ping 2.8s ease-out infinite}
.ping.b{animation-delay:1.4s}
@keyframes ping{0%{transform:scale(.55); opacity:.4} 70%{opacity:0} 100%{transform:scale(2.9); opacity:0}}
@media (prefers-reduced-motion:reduce){.ping{animation:none; opacity:.18; transform:scale(1.5)}}
.leaflet-marker-icon{overflow:visible !important}

/* ===== Photos widget ===== */
.photos{position:relative; height:100%; min-height:270px; overflow:hidden; background:var(--inset)}
.photos .frame{position:absolute; inset:0}
.photos .frame img{width:100%; height:100%; object-fit:cover; display:block}
.photos .slide{position:absolute; inset:0; opacity:0; transition:opacity .6s ease}
.photos .slide.on{opacity:1}
@media (prefers-reduced-motion:reduce){.photos .slide{transition:none}}
.phdots{position:absolute; left:14px; top:13px; z-index:3; display:flex; gap:5px; align-items:center;
  background:rgba(28,28,30,.42); backdrop-filter:blur(8px); padding:6px 9px; border-radius:999px}
.phdots i{width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.5); display:block; cursor:pointer}
.phdots i.on{background:#fff}
.phicon{position:absolute; right:13px; top:13px; z-index:3; width:30px; height:30px; border-radius:8px;
  background:conic-gradient(from 210deg,#F5C33B,#EE5A5A,#C45BD4,#4C86F0,#3FC77F,#F5C33B);
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.phplace{position:absolute; left:14px; bottom:14px; z-index:3; display:flex; align-items:center; gap:6px;
  background:rgba(28,28,30,.52); backdrop-filter:blur(10px); color:#fff; font-size:12.5px; font-weight:600;
  padding:7px 13px; border-radius:999px}
.phinfo{position:absolute; right:13px; bottom:14px; z-index:3; width:29px; height:29px; border-radius:999px; border:0;
  background:rgba(28,28,30,.52); backdrop-filter:blur(10px); color:#fff; cursor:pointer; display:grid; place-items:center;
  font-size:13px; font-weight:700}
.phcap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:54px 14px 56px;
  background:linear-gradient(transparent, rgba(0,0,0,.78)); color:#fff;
  opacity:0; transition:opacity .28s ease; pointer-events:none}
.ph-date{margin:0 0 9px; font-size:13px; font-weight:600; text-align:center}
.ph-card{background:rgba(255,255,255,.13); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:10px 13px; text-align:center}
.ph-card p{margin:0}
.ph-dev{font-size:13px; font-weight:600}
.ph-lens{font-size:12px; opacity:.82; margin-top:2px !important}
.ph-mp{font-size:12px; opacity:.6; margin-top:2px !important}
.phcap.on{opacity:1}
.phempty{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:24px;
  color:var(--soft); font-size:13px; line-height:1.5}

/* ===== About: compose a throwaway note ===== */
.nbar button{border:0; background:transparent; padding:0; cursor:pointer; color:var(--soft); display:grid; place-items:center}
.nbar button:hover{color:var(--ink)}
.scratchbar{display:flex; align-items:center; gap:8px; font-size:12px; color:#92661A;
  background:#FBEFD3; border-radius:9px; padding:8px 12px; margin-bottom:16px}
.scratchbar button{border:0; background:transparent; color:#92661A; font:inherit; font-weight:700;
  text-decoration:underline; cursor:pointer; margin-left:auto}
.scratch [contenteditable]{outline:none; min-height:220px; font-size:15px; line-height:1.68; color:var(--ink)}
.scratch [contenteditable]:empty::before{content:attr(data-ph); color:var(--soft)}

/* ===== Project logos: drop a file in and it replaces the letter ===== */
.pcard .bar .ic img, .corow .ic img, .alsocard .ic img, .cshead .bigic img, .entry .logo img{
  width:100%; height:100%; object-fit:contain; display:block; border-radius:inherit}
.pcard .bar .ic.plain, .corow .ic.plain, .alsocard .ic.plain, .cshead .bigic.plain{
  background:var(--raised) !important; border:1px solid var(--line); padding:5px}
.cshead .bigic.plain{padding:14px}

/* dark featured card */
.pcard .top.dark .eb{color:rgba(255,255,255,.62)}
.pcard .top.dark h2{color:#F2F5F9}

/* ===== About: compose opens the note full screen ===== */
.notesapp.composing{position:fixed; inset:16px; z-index:999; margin:0; max-width:none; display:flex; flex-direction:column}
.notesapp.composing .ncols{grid-template-columns:1fr; flex:1; min-height:0}
.notesapp.composing .nside, .notesapp.composing .nlist{display:none}
.notesapp.composing .nsec:not(.scratch){display:none}
.notesapp.composing .ndoc{max-height:none; height:100%; padding:26px 8vw 48px}
.notesapp.composing .crumb{display:none}
body.noteopen{overflow:hidden}
.notescrim{position:fixed; inset:0; background:rgba(0,0,0,.34); z-index:998; display:none}
body.noteopen .notescrim{display:block}
.nbar .back{display:none; align-items:center; gap:3px; font-size:13.5px; font-weight:500; color:var(--blue); width:auto}
.notesapp.composing .nbar .back{display:flex}
.notesapp.composing .nbar .dot, .notesapp.composing .nbar .ic:not(.back){visibility:hidden}
@media (max-width:620px){.notesapp.composing{inset:0; border-radius:0} .notesapp.composing .ndoc{padding:20px 20px 40px}}

/* featured grid is 2-up now that there are four projects */
.pgrid{grid-template-columns:repeat(2,1fr)}
.pcard.c3{grid-column:span 2}
.pcard .top{min-height:330px}
.pcard h2{max-width:17ch}
@media (max-width:620px){.pgrid{grid-template-columns:1fr} .pcard.c3{grid-column:span 1}}
/* logo tiles */
.ic.full{background:none !important; overflow:hidden}
.ic.full img{width:100%; height:100%; object-fit:cover; display:block}
.ic.plain{background:var(--raised) !important; border:1px solid var(--line); padding:6px; overflow:hidden}
.ic.plain img{width:100%; height:100%; object-fit:contain; display:block}
.bigic.full{background:none !important; overflow:hidden; box-shadow:none}
.bigic.full img{width:100%; height:100%; object-fit:cover; display:block; border-radius:26px}
.bigic.plain{background:var(--raised) !important; border:1px solid var(--line); padding:18px; box-shadow:none; overflow:hidden}
.bigic.plain img{width:100%; height:100%; object-fit:contain; display:block}
/* home shelf uses the same two treatments */
.appicon.full{background:none !important; overflow:hidden; box-shadow:none}
.appicon.full img{width:100%; height:100%; object-fit:cover; display:block}
.appicon.plain{background:var(--raised) !important; border:1px solid var(--line); padding:8px; overflow:hidden; box-shadow:none}
.appicon.plain img{width:100%; height:100%; object-fit:contain; display:block}
/* dark mode flips the one-colour marks, but never a coloured one */
:root[data-theme="dark"] .ic.plain img:not([src*="minerva"]),
:root[data-theme="dark"] .bigic.plain img:not([src*="minerva"]),
:root[data-theme="dark"] .appicon.plain img:not([src*="minerva"]){filter:invert(1)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ic.plain img:not([src*="minerva"]),
  :root:not([data-theme="light"]) .bigic.plain img:not([src*="minerva"]),
  :root:not([data-theme="light"]) .appicon.plain img:not([src*="minerva"]){filter:invert(1)}}

/* ===== Laptop frame for product shots ===== */
.device{display:block; position:relative; padding:10px 10px 16px; background:#1B1D21; border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.26)}
.device::before{content:""; position:absolute; left:50%; top:4.5px; width:4px; height:4px; margin-left:-2px;
  border-radius:999px; background:#41454C}
.device::after{content:""; position:absolute; left:50%; bottom:6px; width:46px; height:3px; margin-left:-23px;
  border-radius:999px; background:#41454C}
.device img{display:block; width:100%; border-radius:4px}
.pcard .shot{overflow:visible; box-shadow:none; border-radius:0; padding:0 16px 22px}
.pv.shotbox{padding:26px 26px 32px; justify-content:center}

/* projects header rule + photo avatar */
.phead{border-bottom:1px solid var(--line); padding-bottom:22px}
.phead .me{overflow:hidden; padding:0}
.phead .me img{width:100%; height:100%; object-fit:cover; display:block}

/* notes count, like his */
.noteshead{display:flex; align-items:baseline; justify-content:space-between; gap:14px}
.noteshead .cnt2{font-size:12.5px; color:var(--soft)}

/* "And the ones that didn't work" */
.flops{padding:22px 24px; align-self:start}
.flops h2{font-size:22px; font-weight:700; letter-spacing:-0.01em; margin:0 0 4px}
.flops .sub2{font-size:13px; color:var(--soft); margin:0 0 14px}
/* B2: in dark, these two titles inherited .pcard h2 #14181C on a #1C1C1E card */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .flops h2, :root:not([data-theme="light"]) .minilist h2{color:var(--ink)}}
:root[data-theme="dark"] .flops h2, :root[data-theme="dark"] .minilist h2{color:var(--ink)}
.floprow{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
.floprow .yr{font-size:11.5px; font-weight:700; color:var(--soft); flex:none; width:62px;
  font-variant-numeric:tabular-nums; padding-top:2px}
.floprow .t{font-size:14px; font-weight:650; display:block}
.floprow .b{font-size:13.5px; color:var(--soft); line-height:1.5; margin-top:2px; display:block}
.flopgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:0 34px}
@media (max-width:620px){.flopgrid{grid-template-columns:1fr; gap:0}}

/* ===== Edit layout ===== */
.ra-controls{display:flex; justify-content:center; margin:28px 0 0}
.ra-edit{display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:12px; font-weight:600;
  color:var(--soft); background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; cursor:pointer}
.ra-edit:hover{color:var(--ink)}
.ra-edit svg{width:14px; height:14px; fill:currentColor}
body.is-rearranging .ra-controls{visibility:hidden}
.ra-bar{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:900; display:none;
  align-items:center; gap:8px; background:var(--raised); border:1px solid var(--line); border-radius:999px;
  padding:8px 10px; box-shadow:0 8px 28px rgba(0,0,0,.18)}
body.is-rearranging .ra-bar{display:flex}
.ra-bar button{font:inherit; font-size:12.5px; font-weight:600; border-radius:999px; padding:8px 16px;
  cursor:pointer; border:1px solid var(--line); background:var(--card); color:var(--ink)}
.ra-bar .ra-done{background:var(--blue); border-color:var(--blue); color:#fff}
.ra-bar .ra-hint{font-size:12px; color:var(--soft); padding:0 8px 0 6px}
body.is-rearranging .w{cursor:grab; user-select:none}
body.is-rearranging .w::after{content:""; position:absolute; inset:0; z-index:5; border-radius:inherit;
  border:1.5px dashed var(--hair); background:color-mix(in srgb, var(--blue) 4%, transparent)}
body.is-rearranging .w:focus-visible::after{border-color:var(--blue); border-style:solid}
body.is-rearranging .w.lifting{cursor:grabbing; opacity:.55}
body.is-rearranging .w.lifting::after{border-color:var(--blue); border-style:solid}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
@media (prefers-reduced-motion:no-preference){
  body.is-rearranging .w{transition:transform .16s ease}
}

/* ===== Contact block, laid out like his ===== */
.contact{display:flex; flex-direction:column; align-items:center; text-align:center}
.cav{width:58px; height:58px; border-radius:999px; overflow:hidden; margin-bottom:10px; flex:none}
.cav img{width:100%; height:100%; object-fit:cover; display:block}
.cname{font-size:19px; font-weight:600; letter-spacing:-0.01em}
.cline{font-size:13.5px; color:var(--soft); margin-top:3px}
.contact .btns{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%; margin:16px 0 12px}
.contact .btn{display:grid; place-items:center; gap:5px; padding:11px 4px; border-radius:11px;
  background:var(--inset); border:1px solid var(--line); text-decoration:none; color:var(--blue);
  font:inherit; font-size:11px; font-weight:500; cursor:pointer}
.contact .btn span:last-child{color:var(--soft)}
.contact .btn:hover{border-color:var(--hair)}
.contact .btn:hover span:last-child{color:var(--ink)}
.inmark{font-size:15px; font-weight:700; line-height:17px; color:var(--blue)}
.mailrow{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px 9px 13px;
  border:1px solid var(--line); border-radius:11px; font-size:13px; background:var(--inset)}
.mailrow .lbl2{color:var(--soft); flex:none}
.mailrow .val{flex:1; text-align:right; color:var(--blue); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mailrow .copy{flex:none; border:0; background:transparent; color:var(--soft); cursor:pointer;
  display:grid; place-items:center; padding:2px}
.mailrow .copy:hover{color:var(--ink)}

/* Spotify header */
.sptitle{align-items:center}
.sptitle .ico.sp{background:none !important; width:20px; height:20px}
.spout{margin-left:auto; font-size:12px; font-weight:500; color:var(--soft); text-decoration:none}
.spout:hover{color:var(--ink)}
.phicon{display:grid; place-items:center; background:rgba(28,28,30,.5) !important; backdrop-filter:blur(10px)}

/* ===== Liquid Glass =====
   Off unless the visitor turns it on, which puts data-glass="on" on <html>.
   Two layers: tiles stay solid (content), and only the floating controls get
   glass - a refracting SVG lens plus the white inset edge. */
:root[data-glass="on"]{ --page-tint:#E4E9F5; }
:root[data-glass="on"] body{ background:var(--page-tint); }
.glassbg{position:fixed; inset:0; z-index:-1; opacity:0; pointer-events:none;
  transition:opacity .4s ease;
  background:
    radial-gradient(60vmax 50vmax at 8% -6%,  rgba(150,180,255,.55), transparent 60%),
    radial-gradient(55vmax 45vmax at 104% 4%, rgba(255,175,215,.45), transparent 60%),
    radial-gradient(58vmax 50vmax at 92% 102%,rgba(255,215,150,.45), transparent 60%),
    radial-gradient(52vmax 46vmax at -4% 96%, rgba(150,235,210,.45), transparent 60%)}
:root[data-glass="on"] .glassbg{opacity:1}
@media (prefers-reduced-motion:reduce){.glassbg{transition:none}}
:root[data-glass="on"] .nav,
:root[data-glass="on"] .themer,
:root[data-glass="on"] .glassbtn,
:root[data-glass="on"] .ra-bar,
:root[data-glass="on"] .ra-edit{
  background:rgba(255,255,255,.5);
  border:0.6px solid transparent;
  -webkit-backdrop-filter:url(#lg-lens) saturate(1.8) brightness(1.06);
  backdrop-filter:url(#lg-lens) saturate(1.8) brightness(1.06);
  box-shadow:
    rgba(255,255,255,.9)  1px  1px 0 0 inset,
    rgba(255,255,255,.45) -1px -1px 0 0 inset,
    rgba(255,255,255,.5)  0 0 0 .5px inset,
    rgba(255,255,255,.35) 0 0 14px 0 inset,
    rgba(30,40,80,.14) 0 8px 24px -8px}
:root[data-glass="on"] .topbar{background:none}
:root[data-glass="on"] .nav a[aria-current="page"]{background:rgba(255,255,255,.62)}
:root[data-glass="on"] .w,
:root[data-glass="on"] .pcard,
:root[data-glass="on"] .notesapp{box-shadow:rgba(30,40,80,.18) 0 8px 24px -10px}
@media (prefers-color-scheme: dark){
  :root[data-glass="on"]:not([data-theme="light"]){--page-tint:#0E1118}
  :root[data-glass="on"]:not([data-theme="light"]) .glassbg{opacity:.4}
  :root[data-glass="on"]:not([data-theme="light"]) .nav,
  :root[data-glass="on"]:not([data-theme="light"]) .themer,
  :root[data-glass="on"]:not([data-theme="light"]) .glassbtn,
  :root[data-glass="on"]:not([data-theme="light"]) .ra-bar,
  :root[data-glass="on"]:not([data-theme="light"]) .ra-edit{
    background:rgba(40,46,60,.46);
    box-shadow:
      rgba(255,255,255,.26) 1px 1px 0 0 inset,
      rgba(255,255,255,.10) -1px -1px 0 0 inset,
      rgba(255,255,255,.16) 0 0 0 .5px inset,
      rgba(255,255,255,.10) 0 0 14px 0 inset,
      rgba(0,0,0,.5) 0 8px 24px -8px}
}
:root[data-theme="dark"][data-glass="on"]{--page-tint:#0E1118}
:root[data-theme="dark"][data-glass="on"] .glassbg{opacity:.4}
.glassbtn{position:fixed; left:18px; top:64px; z-index:60; width:38px; height:38px; border-radius:999px;
  border:1px solid var(--line); background:var(--raised); color:var(--soft); cursor:pointer;
  box-shadow:var(--shadow); display:grid; place-items:center}
.glassbtn:hover{color:var(--ink)}
:root[data-glass="on"] .glassbtn{color:var(--ink)}
@media (max-width:620px){.glassbtn{left:12px; top:56px}}

.phead .me{box-shadow:0 2px 10px rgba(0,0,0,.12)}
.phead .me:hover{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.me{transition:none}}
/* playlist rows carry the artist too */
.tr .ti{display:flex; flex-direction:column; line-height:1.25}
.tr .ti em{font-style:normal; font-size:11.5px; color:var(--soft); margin-top:1px}
.tr{align-items:center; padding:8px 0}
.plhead .art{display:block; text-decoration:none; cursor:pointer; transition:transform .16s ease}
.plhead .art:hover{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.plhead .art{transition:none}}
/* the playlist cover is the real Spotify mosaic; the gradient is the fallback */
.plhead .art{width:74px; height:74px; border-radius:9px; overflow:hidden; background:none}
.plhead .art img{width:100%; height:100%; object-fit:cover; display:block}
.plhead .art.noart{background:linear-gradient(140deg,#4A6FA5,#2D4F6C 55%,#8C5A3C)}