:root { --ink:#15382c; --ink-deep:#0a221a; --cream:#f3efe3; --paper:#fffdf7; --line:#d8d6c9; --acid:#d8ef70; --terra:#ef8a65; --muted:#68766e; --radius:20px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink-deep); font-family:"Andale Mono","Courier New",monospace; font-size:14px; line-height:1.45; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.3; background-image:radial-gradient(#15382c 0.55px,transparent .7px); background-size:7px 7px; mask-image:linear-gradient(#0004,#0000 70%); }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(100%,720px); margin:0 auto; padding:0 17px calc(38px + env(safe-area-inset-bottom)); }
.hero { color:var(--paper); background:var(--ink); margin:0 -17px; padding:calc(35px + env(safe-area-inset-top)) 24px 37px; border-radius:0 0 38px 38px; position:relative; overflow:hidden; }
.hero::after { content:"✦"; position:absolute; right:22px; top:30px; color:var(--acid); font-size:52px; transform:rotate(12deg); }
.eyebrow { margin:0 0 5px; color:var(--muted); font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.hero .eyebrow { color:#b9cab7; }.hero-row { display:flex; align-items:center; justify-content:space-between; padding-right:48px; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:"Iowan Old Style","Palatino Linotype",Palatino,serif; line-height:1; letter-spacing:-.045em; }
h1 { margin:0; font-size:clamp(43px,13vw,68px); font-weight:600; }h1 span { color:var(--acid); }.hero-copy { margin:12px 0 0; max-width:330px; color:#d8e0d6; font-size:13px; }
.icon-button { background:var(--acid); color:var(--ink); width:35px; height:35px; border:0; border-radius:50%; font-size:21px; font-weight:bold; }.summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:-17px 2px 28px; position:relative; }.summary article { padding:13px 10px 12px; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:0 5px 10px #15382c10; }.summary strong,.summary span { display:block; }.summary strong { font-family:"Iowan Old Style","Palatino Linotype",Palatino,serif; font-size:22px; letter-spacing:-.05em; }.summary span { color:var(--muted); font-size:9px; letter-spacing:.05em; text-transform:uppercase; }
.ios-install-hint { display:flex; align-items:flex-start; gap:10px; margin:-13px 2px 27px; padding:10px; color:var(--ink); background:#e7efd0; border:1px solid #c8d897; border-radius:13px; }.ios-install-hint > span { display:grid; place-items:center; width:27px; height:27px; flex:0 0 auto; color:var(--paper); background:var(--ink); border-radius:8px; font-size:14px; }.ios-install-hint p { margin:0; font-size:10px; line-height:1.45; }.ios-install-hint b,.ios-install-hint em { display:block; font-style:normal; font-weight:500; }.ios-install-hint em { margin-top:2px; color:#4a5e45; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:21px 16px 16px; box-shadow:0 9px 20px #15382c0b; }.section-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; }.section-heading h2,.archive h2 { margin:0; font-size:28px; font-weight:600; } label { display:block; margin:0 0 6px; color:var(--ink); font-size:11px; font-weight:500; letter-spacing:.035em; }label span { color:var(--terra); }
input[type="text"],input[type="number"],textarea,select { width:100%; appearance:none; color:var(--ink-deep); border:1px solid var(--line); border-radius:10px; background:#faf8f0; outline:none; padding:11px 12px; transition:.15s border-color,.15s box-shadow; } input:focus,textarea:focus,select:focus { border-color:var(--ink); box-shadow:0 0 0 3px #d8ef7066; }textarea { resize:vertical; min-height:76px; }.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0; }.photo-field { margin:15px 0 0; }.photo-field > input { width:1px; height:1px; position:absolute; opacity:0; }.photo-picker { display:flex; align-items:center; gap:10px; padding:10px; color:var(--ink); border:1px dashed #9ba89f; border-radius:12px; cursor:pointer; }.photo-picker b,.photo-picker small { display:block; }.photo-picker b { font-size:12px; }.photo-picker small { margin-top:2px; color:var(--muted); font-size:9px; letter-spacing:0; }.photo-mark { display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; background:var(--acid); border-radius:9px; color:var(--ink); font-size:23px; font-weight:400; }.photo-preview { display:flex; position:relative; height:140px; margin:10px 0 0; overflow:hidden; border-radius:12px; }.photo-preview img { width:100%; object-fit:cover; }.photo-preview button,.dialog-close { position:absolute; top:7px; right:7px; display:grid; place-items:center; width:28px; height:28px; padding:0; color:var(--ink); background:var(--paper); border:0; border-radius:50%; font-size:21px; }.form-message { min-height:18px; margin:10px 0 0; color:#9c3820; font-size:11px; }.form-message.success { color:#23613e; }.form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }.button { display:inline-flex; justify-content:center; align-items:center; min-height:42px; padding:0 15px; border:1px solid transparent; border-radius:11px; font-weight:500; text-decoration:none; }.primary { color:var(--ink-deep); background:var(--acid); }.primary:hover { background:#cde75a; }.secondary { color:var(--ink); background:transparent; border-color:var(--ink); }.secondary:hover { background:#e9e7dc; }
.archive { margin-top:34px; }.archive-top { display:flex; align-items:end; justify-content:space-between; margin-bottom:15px; }.text-button,.edit-button,.delete-button { padding:0; color:var(--ink); background:transparent; border:0; text-decoration:underline; text-underline-offset:3px; font-size:11px; }.tools { display:grid; grid-template-columns:minmax(0,1fr) 128px; gap:8px; margin-bottom:13px; }.search-label { display:flex; align-items:center; gap:6px; margin:0; padding:0 10px; background:var(--paper); border:1px solid var(--line); border-radius:10px; font-size:17px; }.search-label input { min-width:0; padding:10px 0; border:0; background:transparent; box-shadow:none; }.tools select { padding:10px 7px; font-size:10px; }.entries { display:grid; gap:10px; }.entry-card { display:grid; grid-template-columns:83px minmax(0,1fr); overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:15px; box-shadow:0 4px 12px #15382c08; }.entry-image { min-height:125px; background:linear-gradient(145deg,#d8ef70,#a6c36d); background-size:cover; background-position:center; }.entry-image.no-photo::after { content:"✳"; display:grid; place-items:center; height:100%; color:var(--ink); font-family:Fraunces,serif; font-size:33px; }.entry-main { min-width:0; padding:13px 12px 10px; }.entry-title-row { display:flex; gap:8px; justify-content:space-between; align-items:baseline; }.entry-title-row h3 { max-width:70%; margin:0; overflow:hidden; font-size:20px; white-space:nowrap; text-overflow:ellipsis; }.entry-title-row time { color:var(--muted); font-size:9px; white-space:nowrap; }.tags { display:flex; flex-wrap:wrap; gap:5px; margin:7px 0; }.tag { padding:3px 5px; color:var(--ink); background:#e7efd0; border-radius:5px; font-size:10px; }.tag.cbd { background:#f8dacb; }.entry-notes { display:-webkit-box; max-width:100%; margin:0; overflow:hidden; color:#53635a; font-size:10px; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.entry-notes:empty { display:none; }.entry-actions { display:flex; gap:12px; margin-top:8px; }.delete-button { color:#9c3820; }.empty-state { padding:42px 20px; border:1px dashed #a7b0a7; border-radius:16px; color:var(--muted); text-align:center; }.empty-state span { display:block; color:var(--ink); font-size:32px; }.empty-state h3 { margin:8px 0; color:var(--ink); font-size:22px; }.empty-state p { margin:0; font-size:11px; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
dialog { width:min(92vw,410px); padding:0; color:var(--ink-deep); background:transparent; border:0; }dialog::backdrop { background:#0a221a99; }.dialog-content { position:relative; padding:28px 20px 20px; background:var(--paper); border:1px solid var(--line); border-radius:20px; }.dialog-content h2 { margin:0 25px 11px 0; font-size:31px; }.dialog-content > p:not(.eyebrow):not(.form-message) { color:var(--muted); font-size:12px; }.dialog-content .button { width:100%; margin-top:9px; }.import-button { cursor:pointer; }.dialog-close { border:1px solid var(--line); }.toast { position:fixed; z-index:10; left:50%; bottom:20px; padding:10px 14px; color:var(--paper); background:var(--ink-deep); border-radius:20px; font-size:11px; transform:translateX(-50%); box-shadow:0 6px 20px #0004; }
@media (min-width:650px) { .app-shell { padding-left:24px; padding-right:24px; }.hero { margin:0 -24px; padding-left:42px; padding-right:42px; }.panel { padding:25px; }.entry-card { grid-template-columns:125px minmax(0,1fr); }.entry-image { min-height:140px; } }