/* Journal – a maker's notebook. Navy and brick from Nicols, each project brings its own accent colour (--accent).
   Display: Bricolage Grotesque (as on nicols.pro). Body: Figtree. The timeline runs down the left of each project. */
:root {
  --bg: #f3f4f6; --paper: #ffffff; --ink: #1d2530; --muted: #5b6573; --rule: #dde1e7; --brick: #b3362f; --navy: #1d2530;
  --accent: #b3362f; --accent-ink: #1d2530; --shadow: 0 1px 2px rgba(29, 37, 48, .06), 0 6px 18px rgba(29, 37, 48, .06);
  --display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --body: 'Figtree', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --r: 14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #11151b; --paper: #181e26; --ink: #e9ecf0; --muted: #9aa4b1; --rule: #28303b; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #11151b; --paper: #181e26; --ink: #e9ecf0; --muted: #9aa4b1; --rule: #28303b; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  color-scheme: dark }

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--body); }
img { max-width: 100%; display: block }
a { color: inherit }
button, input, textarea, select { font: inherit; color: inherit }
[hidden] { display: none !important }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -.01em }
p { margin: 0 }
.wrap { max-width: 1040px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600 }

/* top bar */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule) }
.bar .wrap { display: flex; align-items: center; gap: 1rem; min-height: 58px }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.15rem }
.brand svg { width: 26px; height: 26px; flex: none }
.brand .book { fill: var(--ink) } .brand .spine { fill: var(--bg); opacity: .3 }
.bar .spacer { flex: 1 }
.who { font-size: .85rem; color: var(--muted) }
.btn { appearance: none; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 999px; padding: .5rem 1rem; font-weight: 600; font-size: .92rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px }
.btn:hover { border-color: var(--ink) }
.btn.primary { background: var(--navy); color: #fff; border-color: var(--navy) }
:root[data-theme="dark"] .btn.primary { background: #e9ecf0; color: #11151b; border-color: #e9ecf0 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { background: #e9ecf0; color: #11151b; border-color: #e9ecf0 } }
.btn.danger { color: var(--brick); border-color: color-mix(in srgb, var(--brick) 40%, var(--rule)) }
.btn.small { padding: .3rem .75rem; min-height: 32px; font-size: .84rem }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .photo:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }

/* home */
.home-head { padding-block: 3.2rem 2rem; display: grid; gap: .8rem }
.home-head h1 { font-size: clamp(2.2rem, 6vw, 3.6rem) }
.home-head p { color: var(--muted); max-width: 56ch; font-size: 1.12rem }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; padding-bottom: 4rem }
.card { background: var(--paper); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; display: grid; grid-template-rows: auto 1fr; border-top: 4px solid var(--accent) }
.card .cover { aspect-ratio: 16 / 9; background: var(--rule); overflow: hidden }
.card .cover img { width: 100%; height: 100%; object-fit: cover }
.card .body { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .45rem; align-content: start }
.card h2 { font-size: 1.45rem }
.card p { color: var(--muted); font-size: .95rem }
.meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: center; font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums }
.pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .18rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink) }
.pill.draft { background: color-mix(in srgb, var(--brick) 16%, transparent) }
.empty { color: var(--muted); padding: 2rem 0 }

/* project */
.hero { padding-block: 2.6rem 1.6rem; display: grid; gap: 1rem }
.back { font-size: .9rem; color: var(--muted); text-decoration: none }
.back:hover { color: var(--ink) }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4.4rem) }
.hero .sub { font-family: var(--display); font-size: clamp(1.1rem, 2.6vw, 1.45rem); color: var(--muted); font-weight: 500 }
.hero .summary { font-size: 1.12rem; max-width: 62ch }
.hero .rule { width: 72px; height: 4px; background: var(--accent); border-radius: 2px }
.cover-big { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); background: var(--paper); cursor: zoom-in }
.cover-big img { width: 100%; height: auto; max-height: min(70vh, 640px); object-fit: cover }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; margin-block: 1.6rem }
.stat { background: var(--paper); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--shadow); display: grid; gap: .1rem }
.stat b { font-family: var(--display); font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums }
.stat span { font-size: .85rem; color: var(--muted) }
.stat.time { background: var(--navy); color: #fff }
.stat.time span { color: rgba(255, 255, 255, .72) }
:root[data-theme="dark"] .stat.time { background: color-mix(in srgb, var(--accent) 24%, var(--paper)); color: var(--ink) }
:root[data-theme="dark"] .stat.time span { color: var(--muted) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stat.time { background: color-mix(in srgb, var(--accent) 24%, var(--paper)); color: var(--ink) }
  :root:not([data-theme="light"]) .stat.time span { color: var(--muted) } }
.links { display: flex; flex-wrap: wrap; gap: .6rem }
.intro { font-size: 1.12rem; max-width: 62ch; margin-block: .6rem 2.2rem }
.section-title { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-block: 2.6rem 1.2rem }
.section-title h2 { font-size: clamp(1.6rem, 4vw, 2.2rem) }
.section-title .note { color: var(--muted); font-size: .95rem }

/* timeline */
.timeline { position: relative; display: grid; gap: 1.6rem; padding-left: 2.2rem }
.timeline::before { content: ''; position: absolute; left: .62rem; top: .4rem; bottom: .4rem; width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 55%, var(--rule)) }
.day { position: relative; display: grid; gap: .9rem }
.day::before { content: ''; position: absolute; left: -2.04rem; top: .32rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg) }
.day-head { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline }
.day-head b { font-family: var(--display); font-size: 1.25rem }
.day-head span { color: var(--muted); font-size: .92rem; font-variant-numeric: tabular-nums }
.quiet { position: relative; color: var(--muted); font-size: .88rem; font-style: italic }
.quiet::before { content: ''; position: absolute; left: -1.84rem; top: .5rem; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--rule)); background: var(--bg) }
.entry { background: var(--paper); border-radius: var(--r); padding: 1.2rem 1.3rem; box-shadow: var(--shadow); display: grid; gap: .8rem; min-width: 0 }
.entry h3 { font-size: 1.3rem }
.text { display: grid; gap: .75rem; max-width: 68ch }
.text a { color: var(--brick); text-underline-offset: 2px }
.pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem }
.pics.one { grid-template-columns: minmax(0, 1fr) }
.photo { margin: 0; display: grid; gap: .35rem; cursor: zoom-in; border-radius: 10px; min-width: 0 }
.photo .frame { border-radius: 10px; overflow: hidden; background: var(--rule); aspect-ratio: var(--ar, 4 / 3) }
.pics:not(.one) .photo .frame { aspect-ratio: 4 / 3 }
.photo img { width: 100%; height: 100%; object-fit: cover }
.pics .photo.wide { grid-column: 1 / -1 }
.pics:not(.one) .photo.wide .frame { aspect-ratio: var(--ar) }
.pics .photo.wide img { object-fit: contain }
.pics.one .photo .frame { max-height: min(70vh, 560px) }
.pics.one .photo img { object-fit: contain; background: var(--paper) }
.photo figcaption { font-size: .85rem; color: var(--muted) }
.entry-tools, .gallery-tools { display: flex; flex-wrap: wrap; gap: .5rem }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem }
.gallery .photo .frame { aspect-ratio: 1 }
.gallery-empty { background: var(--paper); border: 2px dashed var(--rule); border-radius: var(--r); padding: 2.2rem 1.4rem; color: var(--muted); text-align: center }
.edit-photo { display: grid; gap: .4rem; background: var(--paper); border-radius: 12px; padding: .5rem; box-shadow: var(--shadow) }
.edit-photo .frame { border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: var(--rule) }
.edit-photo img { width: 100%; height: 100%; object-fit: cover }
.edit-photo input { width: 100%; border: 1px solid var(--rule); border-radius: 8px; padding: .4rem .55rem; background: var(--bg); font-size: .88rem }
.edit-photo .row { display: flex; gap: .3rem; justify-content: space-between }

footer.foot { border-top: 1px solid var(--rule); margin-top: 4rem; padding-block: 1.6rem 2.6rem; color: var(--muted); font-size: .88rem }
footer.foot .wrap { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between }

/* dialogs */
dialog { border: 0; border-radius: 18px; padding: 0; width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); background: var(--paper); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .35) }
dialog::backdrop { background: rgba(10, 14, 20, .55) }
.sheet { display: grid; gap: 1rem; padding: 1.3rem 1.3rem 1.1rem }
.sheet h2 { font-size: 1.4rem }
.field { display: grid; gap: .3rem; min-width: 0 }
.field label { font-size: .82rem; font-weight: 600; color: var(--muted) }
.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--rule); border-radius: 10px; padding: .6rem .7rem; background: var(--bg) }
.field input[type=color] { height: 2.75rem; padding: .3rem; cursor: pointer }
button.edit-photo { border: 0; cursor: pointer; font: inherit; color: inherit }
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.5 }
.field .hint { font-size: .8rem; color: var(--muted) }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem }
.rows { display: grid; gap: .5rem }
.rows .r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: .4rem; align-items: center }
.rows .r input { width: 100%; border: 1px solid var(--rule); border-radius: 10px; padding: .5rem .6rem; background: var(--bg) }
.photo-edit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; padding-top: .4rem; border-top: 1px solid var(--rule); position: sticky; bottom: 0; background: var(--paper); padding-bottom: .2rem }
.check { display: flex; align-items: center; gap: .55rem; font-weight: 600 }
.check input { width: 1.2rem; height: 1.2rem }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(8, 10, 14, .92); display: grid; grid-template-rows: 1fr auto; padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px) }
.lightbox img { max-width: 100%; max-height: 100%; min-height: 0; margin: auto; object-fit: contain; border-radius: 6px }
.lightbox .cap { color: #e9ecf0; text-align: center; padding: .6rem 3rem 0; font-size: .95rem }
.lightbox button { position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 50%; width: 46px; height: 46px; font-size: 1.4rem; cursor: pointer }
.lightbox .close { top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px }
.lightbox .prev { left: 12px; top: 50% } .lightbox .next { right: 12px; top: 50% }

.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); transform: translateX(-50%); background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: 12px; z-index: 60; box-shadow: var(--shadow); max-width: calc(100vw - 32px); font-size: .95rem }
.loading { color: var(--muted); padding: 3rem 0 }

@media (max-width: 560px) {
  .timeline { padding-left: 1.6rem }
  .timeline::before { left: .35rem }
  .day::before { left: -1.6rem; width: 1rem; height: 1rem }
  .quiet::before { left: -1.48rem }
  .entry { padding: 1rem }
  .rows .r { grid-template-columns: minmax(0, 1fr) auto; }
  .rows .r input:nth-child(2) { grid-column: 1 / -1; grid-row: 2 }
}
@media (prefers-reduced-motion: no-preference) { .card, .btn { transition: transform .15s, border-color .15s } .card:hover { transform: translateY(-2px) } }