@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(fonts/space-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-weight:400;font-display:swap;src:url(fonts/dm-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-weight:500;font-display:swap;src:url(fonts/dm-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --paper:#F5F3EE; --paper2:#E1DDD2; --paper3:#D2CEC2;
  --ink:#111; --ink2:#444;
  --red:#D93216;
  --sans:"Space Grotesk",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-text-size-adjust:100%}
body{overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,p,ol{margin:0;padding:0}
ol{list-style:none}

.app{max-width:520px;margin:0 auto;height:100%;display:flex;flex-direction:column}
#views{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(20px,env(safe-area-inset-top)) 24px 24px}

.mono{font-family:var(--mono)}
.small{font-size:12px;color:var(--ink2);letter-spacing:.02em}

/* Masthead */
.masthead .meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--ink2);padding-top:14px}
.masthead h1{font-size:clamp(40px,12.4vw,56px);line-height:.95;letter-spacing:-.035em;font-weight:700;margin-top:10px;white-space:nowrap}
.masthead .for{font-family:var(--mono);font-size:14px;margin-top:10px}
.masthead .together{font-family:var(--mono);font-size:12px;color:var(--ink2);margin-top:4px}

/* Blocks */
.block{margin-top:22px}
.block-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:6px}
.block-head h2{font-size:16px;font-weight:700}
.link{background:none;border:0;padding:8px 0 8px 12px;font-family:var(--mono);font-size:12px;color:var(--ink2)}

.rows li{border-bottom:1px solid var(--ink)}
.row{width:100%;display:flex;align-items:baseline;gap:14px;padding:12px 0;min-height:48px;background:none;border:0;text-align:left}
.row .d{font-family:var(--mono);font-size:12px;width:72px;flex:none;color:var(--ink2)}
.row .t{font-size:17px;font-weight:500}
.row .c{display:block;font-size:13px;color:var(--ink2);margin-top:2px;font-weight:500}
.rows.full .row{padding:16px 0}
.rows.full .t{font-size:20px}

/* Photos */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tile{position:relative;aspect-ratio:1/1;background:var(--paper2);border:0;padding:0;overflow:hidden;display:flex;align-items:flex-end;font-family:var(--mono);font-size:11px;color:var(--ink)}
.tile:nth-child(even){background:var(--paper3)}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .lbl{position:relative;padding:4px}
.tile.more{background:var(--ink);color:var(--paper)}
.tile .vid{position:absolute;top:6px;right:6px;width:22px;height:22px;background:var(--ink);display:flex;align-items:center;justify-content:center}
.seg{display:flex;border:2px solid var(--ink);margin:14px 0 12px}
.seg button{flex:1;min-height:44px;border:0;background:transparent;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink);padding:0 4px}
.seg button+button{border-left:2px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.empty-note{grid-column:1/-1;font-family:var(--mono);font-size:12px;color:var(--ink2);padding:8px 0}

/* Player card */
.player{margin-top:18px;width:100%;display:flex;align-items:stretch;background:var(--ink);color:var(--paper);border:0;padding:0;text-align:left;min-height:64px}
.player .play{width:64px;background:var(--red);display:flex;align-items:center;justify-content:center;flex:none}
.player-text{padding:10px 14px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.player-text .small{color:#BDB9AE}
.player-title{font-size:17px;font-weight:500}

/* Jar card */
.jarcard{margin-top:12px;border:2px solid var(--ink);display:flex;align-items:center;gap:12px;padding:8px 14px}
.jar-mini{flex:none}
.jarcard-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.big{font-size:26px;line-height:1;letter-spacing:-.02em;font-weight:700}
.btn{align-self:flex-start;min-height:48px;border:0;background:var(--red);color:#fff;font-weight:700;font-size:15px;padding:0 20px}
.btn:active{transform:translateY(1px)}

/* Pages */
.page-head{padding-top:14px;padding-bottom:14px;margin-bottom:6px;border-bottom:2px solid var(--ink)}
.page-title{font-size:38px;line-height:1;letter-spacing:-.03em;font-weight:700;margin-top:6px}
.page-head+.rows,.page-head+.grid3{margin-top:0}

/* Music */
.music-frame{width:100%;border:0;border-radius:0;margin-top:14px;min-height:450px;background:var(--paper2)}
.music-note{font-size:15px;line-height:1.4;margin-top:16px}
.btn-block{display:flex;align-items:center;justify-content:center;margin-top:14px;min-height:52px;background:var(--ink);color:var(--paper);font-weight:700;font-size:16px;text-decoration:none;padding:0 20px}

/* Jar view */
.jar-stage{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:12px}
.jar-button{background:none;border:0;padding:4px;position:relative}
.jar-button svg{display:block;overflow:visible}
.jar-button.shake svg{animation:shake .5s}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}45%{transform:rotate(4deg)}70%{transform:rotate(-2deg)}}
.note-slip{width:100%;background:#fff;border:2px solid var(--ink);padding:18px 18px 20px;min-height:132px;box-shadow:6px 6px 0 var(--ink);transition:transform .35s ease,opacity .35s ease}
.note-slip.in{animation:pull .45s ease-out}
@keyframes pull{from{transform:translateY(28px) rotate(-1.5deg);opacity:0}to{transform:none;opacity:1}}
.note-text{font-size:24px;line-height:1.2;font-weight:500;letter-spacing:-.01em;margin-top:8px;white-space:pre-line}
#jar-again{align-self:stretch;width:100%}

/* Tabs */
.tabs{flex:none;display:flex;border-top:2px solid var(--ink);background:var(--paper);padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;min-height:56px;border:0;background:transparent;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;padding:0 2px}
.tab[aria-current="page"]{background:var(--ink);color:var(--paper)}

/* Sheet */
.sheet{position:fixed;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:center}
.sheet-scrim{position:absolute;inset:0;background:rgba(17,17,17,.55)}
.sheet-card{position:relative;width:100%;max-width:520px;max-height:92%;overflow:auto;background:var(--paper);border-top:2px solid var(--ink);padding:20px 24px calc(28px + env(safe-area-inset-bottom));animation:rise .25s ease-out}
@keyframes rise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-close{position:absolute;top:10px;right:10px;min-height:44px;min-width:64px;background:var(--ink);color:var(--paper);border:0;font-family:var(--mono);font-size:12px;z-index:2}
#sheet-media img,#sheet-media video{display:block;width:100%;max-height:60vh;object-fit:contain;background:var(--paper2);margin-bottom:14px}
#sheet-media:empty{display:none}
.sheet-card .big{margin-top:6px}
.sheet-caption{margin-top:10px;font-size:16px;line-height:1.4;color:var(--ink2)}
.sheet-caption:empty{display:none}
.sheet-card>.mono{padding-top:2px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}