/* Palette sampled from logo.png: the icon's coral→periwinkle gradient, its cream
   page and the indigo book spine. The saturated gradient is decoration only —
   white text over its coral end lands at 2.3:1, so type sits on tints instead. */
:root { --ink:#2c2a44; --muted:#67637f; --paper:#fef4f2; --line:#f0dfdc; --accent:#4f57bc; --accent-soft:#eceefc; --brand:linear-gradient(135deg,#ff8a85 0%,#d58ead 48%,#7582d4 100%); }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.65 ui-serif, Georgia, serif; }
.masthead { position:relative; display:flex; justify-content:space-between; gap:2rem; padding:3.5rem max(5vw, 2rem) 2rem; background:linear-gradient(135deg,#fff0ee 0%,#fbecf2 45%,#edeffb 100%); }
/* The logo's full-strength gradient, carried as a rule rather than a fill. */
.masthead::after { content:""; position:absolute; inset:auto 0 0; height:3px; background:var(--brand); }
.brand { display:flex; align-items:center; gap:1.15rem; }.mark { flex:0 0 auto; width:64px; height:64px; border-radius:15px; box-shadow:0 6px 18px #7d7ec73d; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:.2rem; font-size:clamp(2rem,5vw,3.5rem); line-height:1.05; } h2 { font-size:1.5rem; line-height:1.25; }
.eyebrow { margin-bottom:.35rem; color:var(--accent); font:700 .75rem/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase; }
#summary { color:var(--muted); margin-bottom:0; }.actions { display:flex; align-items:flex-start; flex-wrap:wrap; gap:.6rem; }
.button { appearance:none; display:inline-block; border:1px solid var(--accent); border-radius:.35rem; padding:.55rem .8rem; background:transparent; color:var(--accent); cursor:pointer; font:600 .86rem/1.2 ui-sans-serif,system-ui,sans-serif; }.button.primary { background:var(--accent); color:white; }.button:disabled { opacity:.45; cursor:not-allowed; }.small { padding:.36rem .55rem; font-size:.75rem; }
main { width:min(100% - 2.5rem, 900px); margin:2rem auto 6rem; }.drop-zone { display:grid; gap:.35rem; place-content:center; min-height:170px; padding:2rem; text-align:center; border:2px dashed #d7c9d8; border-radius:.7rem; color:var(--muted); }.drop-zone strong { color:var(--ink); }.drop-zone.dragging { background:var(--accent-soft); border-color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.controls { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin:2rem 0; }.search { display:flex; align-items:center; gap:.65rem; font:600 .8rem ui-sans-serif,system-ui,sans-serif; }.search input { width:min(60vw,340px); padding:.55rem .7rem; border:1px solid var(--line); border-radius:.35rem; font:inherit; }
.export-panel { position:relative; display:block; overflow:hidden; margin:0 0 2.5rem; padding:1.5rem 1.5rem 1.5rem 1.75rem; border:1px solid #e6e2f4; border-radius:.8rem; background:#f7f4fb; }.export-panel::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--brand); }.export-panel h2 { margin-bottom:.25rem; font-size:1.3rem; }.export-panel p:last-child { margin-bottom:0; color:var(--muted); font-size:.9rem; }.export-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); align-items:end; gap:.85rem; width:100%; margin-top:1.35rem; }.export-options label { display:grid; gap:.25rem; color:var(--muted); font:600 .72rem/1.2 ui-sans-serif,system-ui,sans-serif; }.export-options input:not([type="checkbox"]),.export-options select { width:100%; min-height:2.25rem; padding:.35rem .45rem; border:1px solid #d5cfe6; border-radius:.35rem; background:white; color:var(--ink); font:500 .84rem ui-sans-serif,system-ui,sans-serif; }.export-options .toggle { display:flex; align-items:center; gap:.38rem; min-height:2.25rem; color:var(--ink); font-size:.8rem; }.export-options .button { min-height:2.25rem; }
#year-nav { display:flex; flex-wrap:wrap; gap:.4rem; }#year-nav button { border:0; background:none; color:var(--accent); cursor:pointer; padding:.25rem .4rem; font:600 .85rem ui-sans-serif,system-ui,sans-serif; }#year-nav button.active { background:var(--accent-soft); border-radius:.3rem; }
.toc { position:fixed; right:2rem; bottom:2rem; max-width:215px; padding:.7rem; background:#fffbfae8; border:1px solid var(--line); border-radius:.4rem; box-shadow:0 3px 16px #4a427026; font:.75rem/1.4 ui-sans-serif,system-ui,sans-serif; }.toc a { display:block; overflow:hidden; padding:.18rem; color:var(--accent); text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.entry { padding:2.5rem 0; border-top:1px solid var(--line); }.entry header { position:relative; padding-right:7rem; }.entry time { display:block; margin-bottom:.4rem; color:var(--accent); font:600 .8rem ui-sans-serif,system-ui,sans-serif; letter-spacing:.04em; }.entry h2:empty { display:none; }.copy-entry { position:absolute; right:0; top:0; }.entry-content { overflow-wrap:anywhere; }/* Cap the height so a portrait photo does not run past a screenful. width/height
   stay auto, so the browser fits the image inside both limits and keeps its
   aspect ratio. Released on small screens, where full width is the natural size. */
.entry-content img,.entry-content video { display:block; max-width:100%; max-height:440px; width:auto; height:auto; margin:1rem 0; border-radius:.35rem; }.entry-content audio { width:100%; margin:1rem 0; }.entry-content a { color:var(--accent); }.map-card { position:relative; display:flex; align-items:center; gap:.85rem; margin:1rem 0; padding:.9rem 1.15rem; overflow:hidden; border:1px solid #ece0e3; border-radius:.55rem; background:#fbf5f4; }
/* A hint of street grid, so it still reads as a place rather than a plain row. */
.map-card::before { content:""; position:absolute; inset:0; background-image:linear-gradient(#4a42700d 1px,transparent 1px),linear-gradient(90deg,#4a42700d 1px,transparent 1px); background-size:24px 24px; }
.map-card > * { position:relative; }
.map-pin { flex:0 0 auto; width:24px; height:24px; }
.map-pin::before { content:""; position:absolute; inset:0; border-radius:50% 50% 50% 0; background:#f2635f; box-shadow:0 4px 8px #4a427029; transform:rotate(-45deg); }
.map-pin::after { content:""; position:absolute; left:8px; top:8px; width:8px; height:8px; border-radius:50%; background:#fbf5f4; }
.map-label { color:var(--ink); font:600 .92rem/1.35 ui-sans-serif,system-ui,sans-serif; }
.asset-placeholder { display:grid; gap:.3rem; margin:1rem 0; padding:1.1rem 1.25rem; border:1px dashed #d7c9d8; border-radius:.35rem; background:#fbf3f1; color:var(--muted); font:.85rem/1.45 ui-sans-serif,system-ui,sans-serif; }.asset-placeholder strong { color:var(--ink); font-size:.9rem; }
.metadata { margin-top:1.5rem; color:var(--muted); font:.78rem/1.5 ui-monospace,SFMono-Regular,monospace; }.metadata summary { cursor:pointer; }.metadata pre { overflow:auto; white-space:pre-wrap; }
/* A soft, layered treatment inspired by Journal's State of Mind cards. */
.mood-card { position:relative; display:flex; align-items:center; gap:1.05rem; min-height:128px; margin:0 0 1.75rem; padding:1.25rem 1.4rem; overflow:hidden; border:1px solid #fff9; border-radius:1.4rem; background:linear-gradient(135deg,#dcd8f2 0%,#c8c5e4 48%,#b9b5d7 100%); box-shadow:inset 0 1px #fff9, 0 10px 28px #5a55731a; color:#454258; font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif; }
/* Scoped away from the native card: there the ::after is the float clearfix, and
   leaving these positioning rules in place both broke the clear and put a stray
   bloom behind the flower. */
.mood-card:not(.mood-card--native)::after { content:""; position:absolute; width:14rem; height:14rem; right:-6rem; top:-9rem; border-radius:50%; background:#fff4; filter:blur(3px); }.mood-icon { position:relative; z-index:1; display:grid; flex:0 0 76px; width:76px; height:76px; place-items:center; }.mood-icon img { width:76px; height:76px; margin:0; object-fit:contain; filter:drop-shadow(0 7px 8px #4f47704d); }.mood-icon span { position:absolute; width:27px; height:65px; border-radius:100% 0 100% 0; background:linear-gradient(145deg,#fff,var(--mood-edge,#8172ce)); box-shadow:inset 1px 1px #fff9, 0 2px 5px #51458240; transform:rotate(var(--petal-angle)); }.mood-icon span:nth-child(1) { --petal-angle:0deg; }.mood-icon span:nth-child(2) { --petal-angle:60deg; }.mood-icon span:nth-child(3) { --petal-angle:120deg; }.mood-icon i { position:relative; z-index:1; width:20px; height:20px; border:3px solid #fff; border-radius:50%; background:var(--mood-edge,#6351b7); box-shadow:0 2px 7px #40356c40; }
/* The flower sits behind the card as artwork rather than in the text flow. Its
   siblings all carry z-index:1 from `.mood-card--native > *`, so long labels run
   straight over it. The card's overflow:hidden keeps it inside the rounded edge. */
.mood-card--native .mood-icon { position:absolute; z-index:0; right:1.15rem; top:50%; width:104px; height:104px; margin:0; transform:translateY(-50%); }
.mood-card--native .mood-icon span { width:37px; height:89px; }
.mood-card--native .mood-icon i { width:26px; height:26px; }.mood-copy { position:relative; z-index:1; min-width:0; }.mood-copy p { margin:0; }.mood-kicker { margin-bottom:.24rem !important; color:#706c86; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.mood-title { color:#49455c; font-size:clamp(1.08rem,2.5vw,1.42rem); font-weight:700; letter-spacing:-.02em; line-height:1.2; }.mood-detail { margin-top:.18rem !important; color:#67637b; font-size:.98rem; line-height:1.35; }.mood-time { margin-top:.38rem !important; color:#817d95; font-size:.84rem; }
.mood-card--native { display:block; font-size:1rem; line-height:1.4; }.mood-card--native > * { position:relative; z-index:1; }.mood-card--native p { margin:.18rem 0; color:#59556d; }.mood-card--native img { float:right; width:76px; height:76px; margin:0 0 0 1.05rem; object-fit:contain; filter:drop-shadow(0 7px 8px #4f47704d); }.mood-card--native[data-mood]::before { content:"State of mind · " attr(data-mood); }.mood-card--native::before { content:"State of mind"; position:relative; z-index:1; display:block; margin-bottom:.45rem; color:#706c86; font:700 .72rem/1 ui-sans-serif,-apple-system,BlinkMacSystemFont,system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; }.mood-card--native::after { content:""; display:block; clear:both; }
/* Journal paints each valence step as a glow: near-white at the centre, the mood hue at the edge. */
.mood-very-pleasant,.mood-pleasant,.mood-slightly-pleasant,.mood-neutral,.mood-slightly-unpleasant,.mood-unpleasant,.mood-very-unpleasant { background:radial-gradient(115% 135% at 50% 38%, var(--mood-glow) 0%, var(--mood-mid) 46%, var(--mood-edge) 100%); }
.mood-card.mood-very-pleasant { --mood-glow:#fdf3e0; --mood-mid:#f7d193; --mood-edge:#efa947; }
.mood-card.mood-pleasant { --mood-glow:#f7f5d4; --mood-mid:#e3e097; --mood-edge:#cdc95d; }
.mood-card.mood-slightly-pleasant { --mood-glow:#eef5e2; --mood-mid:#ccdfac; --mood-edge:#a6c87a; }
.mood-card.mood-neutral { --mood-glow:#eef4f6; --mood-mid:#ccdbe2; --mood-edge:#aec4cf; }
.mood-card.mood-slightly-unpleasant { --mood-glow:#eaeffb; --mood-mid:#c6d2ee; --mood-edge:#a3b5e0; }
.mood-card.mood-unpleasant { --mood-glow:#e5e6f9; --mood-mid:#c1c3ec; --mood-edge:#a0a3df; }
.mood-card.mood-very-unpleasant { --mood-glow:#f0e8f8; --mood-mid:#d2c2e9; --mood-edge:#b29ed7; }
.mood-card.mood-card--native[class*="mood-"] { color:#2f2c39; }.mood-card.mood-card--native[class*="mood-"] p { color:#3b3746; }.mood-card.mood-card--native[class*="mood-"]::before { color:#5d596b; }@media(max-width:700px) { .masthead { padding-top:2.5rem; flex-direction:column; }.entry-content img,.entry-content video { max-height:none; }.mark { width:50px; height:50px; border-radius:12px; }.brand { gap:.85rem; }.toc { display:none; }.entry { padding:2rem 0; }.export-panel { grid-template-columns:1fr; padding:1.2rem; }.mood-card { min-height:112px; padding:1rem; gap:.8rem; border-radius:1.15rem; }.mood-icon,.mood-icon img { width:62px; height:62px; }.mood-icon { flex-basis:62px; }
/* Matching the two-class specificity of the desktop rules above, or these lose. */
.mood-card--native .mood-icon { width:78px; height:78px; right:.85rem; }.mood-card--native .mood-icon span { width:28px; height:67px; }.mood-card--native .mood-icon i { width:19px; height:19px; }
.map-card { padding:.8rem .95rem; } }