/* PRIMO look (brand sheet: skills/primo-writing/references/04-brand.md): ink on warm paper, the
   amber of the logo's roofline as the accent, Cambria for everything that reads. Caladea is the
   metric twin of Cambria and is served from this app, so phones without Cambria look the same. */
@font-face { font-family: "Caladea"; src: url("fonts/caladea-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Caladea"; src: url("fonts/caladea-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #F7F5F0;
  --paper2: #FAF8F4;
  --surface: #FFFFFF;
  --ink: #1A1A1A;
  --ink2: #3A3631;
  --muted: #6B655B;
  --faint: #9A9387;
  --line: #E3DED3;
  --line2: #EEEAE2;
  --amber: #E8AE5C;
  --amber-d: #9A6410;
  --amber-soft: #FBF4E8;
  --slate: #6A7C8E;
  --green: #4E7A55;
  --terra: #A9542C;
  --serif: Cambria, "Caladea", "Palatino Linotype", Georgia, serif;
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Tahoma, system-ui, sans-serif;
  --side: 288px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 16px/1.6 var(--serif); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.01em; }
.kick { font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--amber-d); }
.quiet { color: var(--faint); margin: 0; font-style: italic; }

/* ── sign in ───────────────────────────────────────────────────────────────────────────── */
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; background: radial-gradient(ellipse at top, #FFFFFF 0%, var(--paper) 70%); }
.login-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line2); border-radius: 18px; padding: 40px 32px 30px; text-align: center; box-shadow: 0 30px 60px -30px rgba(60, 44, 20, .22); border-top: 3px solid var(--amber); }
.login-logo { width: 200px; height: auto; margin: 0 auto 26px; display: block; }
.login h1 { font-size: 30px; margin: 10px 0 4px; }
.login p { color: var(--muted); margin: 0; }
.login form { display: flex; gap: 8px; margin: 22px 0 0; }
.login input { flex: 1; min-width: 0; font: 16px var(--sans); padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper2); }
.login input:focus { outline: 2px solid var(--amber); outline-offset: 1px; background: #fff; }
.login button { font: 600 15px var(--sans); padding: 13px 20px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; }
.err { color: var(--terra); min-height: 1.5em; font: 14px var(--sans); margin-top: 10px !important; }
.login .powered { margin-top: 28px; }

.powered { display: inline-flex; align-items: center; gap: 7px; font: 12px var(--sans); letter-spacing: .02em; color: var(--faint); }
.powered img { width: 16px; height: 16px; border-radius: 4px; }
.powered b { color: var(--ink2); font-weight: 600; }

/* ── shell: side panel + main ──────────────────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }
.side { flex: 0 0 var(--side); width: var(--side); height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); transition: margin-left .28s ease; z-index: 30; }
body.side-closed .side { margin-left: calc(-1 * var(--side)); }
.side-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 26px 22px 18px; border-bottom: 1px solid var(--line2); }
.side-logo { width: 150px; height: auto; display: block; }
.side-nav { flex: 1; overflow-y: auto; padding: 10px 0 18px; }
.nav-sec { font: 600 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); padding: 22px 22px 8px; }
.nav-a { position: relative; display: block; padding: 9px 22px; color: var(--ink2); font-size: 15.5px; transition: background .15s ease; }
.nav-a:hover { background: var(--paper2); }
.nav-p { display: grid; grid-template-columns: 30px 1fr; padding-top: 11px; padding-bottom: 11px; }
.nav-p .n { font: 500 12px/1.9 var(--sans); color: var(--faint); letter-spacing: .04em; }
.nav-p .t { display: block; font-size: 15.5px; line-height: 1.3; color: var(--ink); }
.nav-p .s { display: flex; align-items: center; gap: 6px; font: 12px/1.3 var(--sans); color: var(--muted); margin-top: 4px; }
.nav-a.on { background: var(--amber-soft); }
.nav-a.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--amber); }
.nav-a.on .t, .nav-a.on { font-weight: 700; color: var(--ink); }
.side-foot { padding: 14px 22px 20px; border-top: 1px solid var(--line2); }
.side-foot:empty, .side-foot:has(> [hidden]:only-child) { display: none; }
.earlier { display: flex; flex-direction: column; gap: 6px; font: 600 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.earlier select { font: 14px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper2); }
.scrim { display: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bar { position: sticky; top: 0; z-index: 20; height: 62px; display: flex; align-items: center; gap: 14px; padding: 0 28px; background: rgba(247, 245, 240, .88); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); border-bottom: 1px solid var(--line2); box-shadow: inset 0 2px 0 var(--amber); }
.bar-title { flex: 1; min-width: 0; font: 700 16px var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asat:empty { display: none; }
.asat { font: 500 12px/1 var(--sans); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; white-space: nowrap; }
.icon-btn { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; }
.icon-btn:hover { border-color: var(--amber); }
.burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); border-radius: 1px; }
.icon-btn.side-close { display: none; position: relative; }
.side-close span { position: absolute; width: 16px; height: 1.5px; background: var(--ink); }
.side-close span:first-child { transform: rotate(45deg); }
.side-close span:last-child { transform: rotate(-45deg); }

.wrap { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 40px 24px; flex: 1; }

/* ── page heads ────────────────────────────────────────────────────────────────────────── */
.hero { padding: 44px 0 10px; }
.hero h1 { font-size: 44px; line-height: 1.08; margin: 12px 0 8px; }
.sub { color: var(--muted); margin: 0; font-size: 17.5px; max-width: 68ch; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px var(--sans); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.btn:hover { border-color: var(--amber); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.only-narrow { display: none; }

/* status dots and chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; }
.chip { display: inline-flex; align-items: center; gap: 7px; font: 13px var(--sans); color: var(--muted); background: var(--surface); border: 1px solid var(--line2); border-radius: 999px; padding: 6px 12px 6px 10px; }
.chip b { color: var(--ink); font-weight: 600; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; background: var(--line); }
.d-under_way { background: var(--amber); }
.d-waiting { background: var(--slate); }
.d-past_bar { background: var(--terra); }
.d-done { background: var(--green); }
.d-not_due { background: #fff; box-shadow: inset 0 0 0 1.5px #CFC8BA; }
.d-unscheduled { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); }

/* overview figures */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); margin: 34px 0 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fig { padding: 20px 4px 18px 18px; border-left: 1px solid var(--line2); }
.fig:first-child { border-left: 0; padding-left: 0; }
.fig b { display: block; font: 700 40px/1 var(--serif); color: var(--ink); }
.fig span { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font: 600 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ── sections ──────────────────────────────────────────────────────────────────────────── */
.sec { margin: 34px 0 0; }
.sec-h { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; margin-bottom: 8px; }
.sec-h::before { content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 2px; background: var(--amber); }
.sec-h h2 { font-size: 22px; }
.sec-h .kick { color: var(--faint); letter-spacing: .16em; }
.duo { display: grid; grid-template-columns: 1fr; gap: 0 44px; }

.list { margin: 0; padding: 0; list-style: none; }
.list li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--line2); font-size: 16px; line-height: 1.5; }
.list li:first-child { border-top: 0; }
.list li::before { content: ""; position: absolute; left: 0; top: 21px; width: 10px; height: 2px; background: var(--amber); }
.list.pend li::before { background: var(--slate); }
.list.moved li::before { background: var(--green); }
.list li small { display: block; font: 12.5px var(--sans); color: var(--faint); margin-top: 2px; }

.dates { margin: 0; padding: 0; list-style: none; }
.dates li { border-top: 1px solid var(--line2); }
.dates li:first-child { border-top: 0; }
.dates li > a, .dates li > div { display: flex; align-items: center; gap: 16px; padding: 10px 0; }
.date { flex: 0 0 46px; text-align: center; border-right: 1px solid var(--line); padding-right: 14px; }
.date b { display: block; font: 700 23px/1 var(--serif); color: var(--ink); }
.date i { display: block; font: 600 10px/1.6 var(--sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-d); }
.what { font-size: 16px; line-height: 1.4; }
.what small { display: block; font: 12.5px var(--sans); color: var(--faint); margin-top: 2px; }

/* ── the timeline: his chart, column for column ────────────────────────────────────────── */
.gantt { display: flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); margin-top: 6px; }
.g-labels { flex: 0 0 168px; border-right: 1px solid var(--line); background: var(--surface); position: relative; z-index: 2; box-shadow: 6px 0 10px -8px rgba(60, 44, 20, .25); }
.g-hspace { height: 58px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-end; padding: 0 12px 8px; font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); background: var(--paper2); }
.g-lab { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border-bottom: 1px solid var(--line2); font: 12.5px/1.2 var(--sans); }
.g-lab .dot { width: 8px; height: 8px; flex: 0 0 8px; }
.g-id { font: 600 10px var(--sans); color: var(--faint); flex: 0 0 22px; }
.g-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); }
.g-lab.g-grp { height: 32px; background: var(--paper2); font: 700 13.5px var(--serif); color: var(--ink); }
.g-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; position: relative; }
.g-canvas { position: relative; }
.g-head { height: 58px; position: relative; border-bottom: 1px solid var(--line); background: var(--paper2); }
.g-months, .g-days, .g-wds { position: relative; }
.g-months { height: 23px; border-bottom: 1px solid var(--line2); }
.g-months span { position: absolute; top: 0; height: 23px; line-height: 23px; text-align: center; font: 700 12.5px var(--serif); color: var(--ink); border-left: 1px solid var(--line); }
.g-days { height: 19px; }
.g-days span { position: absolute; width: 26px; text-align: center; font: 600 10.5px/19px var(--sans); color: var(--ink2); }
.g-wds { height: 15px; }
.g-wds span { position: absolute; width: 26px; text-align: center; font: 600 8.5px/15px var(--sans); color: var(--faint); }
.g-body { position: relative; background-image: repeating-linear-gradient(to right, transparent 0, transparent 25px, var(--line2) 25px, var(--line2) 26px); }
.g-row { position: relative; height: 42px; border-bottom: 1px solid var(--line2); }
.g-row.g-grp { height: 32px; background: rgba(250, 248, 244, .75); }
.g-bar { position: absolute; top: 8px; height: 13px; border-radius: 2px; }
.g-grp .g-bar { top: 12px; height: 8px; }
.b-under_way { background: var(--amber); }
.b-waiting { background: var(--slate); }
.b-past_bar { background: var(--terra); }
.b-done { background: var(--green); }
.b-not_due { background: #DDD6C8; }
.b-unscheduled { background: var(--line2); }
.b-group { background: #C9BFAD; }
.g-tag { position: absolute; top: 23px; max-width: 250px; z-index: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10px/1 var(--sans); padding: 3px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); box-shadow: 0 1px 3px rgba(60, 44, 20, .1); }
.g-tag.t-under_way { border-color: var(--amber); color: var(--amber-d); }
.g-tag.t-waiting { border-color: var(--slate); color: #4A5A6B; }
.g-tag.t-past_bar { border-color: var(--terra); color: var(--terra); }
.g-tag.t-done { border-color: var(--green); color: var(--green); }
.g-today { position: absolute; top: 23px; bottom: 0; width: 1.5px; margin-left: -.75px; background: var(--ink); z-index: 1; }
.g-today span { position: absolute; top: -4px; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ink); font-size: 0; }
.g-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 12px var(--sans); color: var(--muted); margin-top: 12px; }
.g-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 18px; height: 8px; border-radius: 2px; display: inline-block; }
.sw-today { width: 1.5px; height: 13px; background: var(--ink); border-radius: 1px; }
.fine { font: 12.5px/1.5 var(--sans); color: var(--faint); margin: 10px 0 0; }

/* ── site photos: one album a day ──────────────────────────────────────────────────────── */
.album { border-top: 1px solid var(--line2); }
.album:first-child { border-top: 0; }
.album summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 13px 2px; cursor: pointer; }
.album summary::-webkit-details-marker { display: none; }
.a-day { flex: 1; font-size: 17px; }
.a-n { font: 12.5px var(--sans); color: var(--faint); }
.chev { width: 9px; height: 9px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); margin: -4px 6px 0 4px; transition: transform .2s ease; }
.album[open] .chev { transform: rotate(225deg); margin-top: 4px; }
.a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 2px 0 16px; }
.a-ph { padding: 0; border: 0; background: var(--line2); border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; cursor: zoom-in; }
.a-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.a-ph:hover img { transform: scale(1.03); }

.viewer { position: fixed; inset: 0; z-index: 50; background: rgba(18, 16, 12, .95); display: flex; align-items: center; justify-content: center; padding: 56px 16px; }
.viewer img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.v-btn { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; font: 300 28px/1 var(--sans); display: flex; align-items: center; justify-content: center; padding: 0 0 3px; }
.v-btn:hover { background: rgba(255, 255, 255, .16); }
.v-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.v-next { right: 16px; top: 50%; transform: translateY(-50%); }
.v-close { top: 14px; right: 16px; font-size: 26px; }
.v-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font: 12.5px var(--sans); letter-spacing: .1em; color: rgba(255, 255, 255, .7); }

/* ── pager + footer ────────────────────────────────────────────────────────────────────── */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 44px 0 8px; }
.pg { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; transition: border-color .15s ease; }
.pg:hover { border-color: var(--amber); }
.pg small { display: block; font: 600 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.pg span { display: block; font: 700 17px/1.3 var(--serif); color: var(--ink); margin-top: 4px; }
.pg.next { text-align: right; }
.foot { padding: 34px 16px calc(30px + env(safe-area-inset-bottom)); text-align: center; border-top: 1px solid var(--line2); margin-top: 30px; }
.foot > img { width: 120px; height: auto; display: block; margin: 0 auto; }
.foot p { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.foot .powered { margin-top: 14px; }

/* ── widths ────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1240px) {
  .duo { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 999px) {
  .side { position: fixed; left: 0; top: 0; bottom: 0; height: auto; width: min(86vw, 320px); transform: translateX(-102%); visibility: hidden; transition: transform .28s ease, visibility .28s; box-shadow: 20px 0 50px -20px rgba(40, 30, 10, .35); margin-left: 0 !important; }
  body.side-open .side { transform: none; visibility: visible; }
  .icon-btn.side-close { display: inline-flex; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(26, 22, 16, .32); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
  body.side-open .scrim { opacity: 1; pointer-events: auto; }
  body.side-open { overflow: hidden; }
  .bar { padding: 0 16px; height: 58px; }
  .wrap { padding: 0 18px 20px; }
  .btn.only-narrow { display: inline-flex; }
}
@media (max-width: 560px) {
  .hero { padding-top: 30px; }
  .hero h1 { font-size: 34px; }
  .sub { font-size: 16px; }
  .figures { grid-template-columns: 1fr 1fr; }
  .fig:nth-child(3) { border-left: 0; padding-left: 0; }
  .fig:nth-child(n + 3) { border-top: 1px solid var(--line2); }
  .fig b { font-size: 34px; }
  .g-labels { flex-basis: 128px; }
  .g-lab { font-size: 11.5px; padding: 0 7px; gap: 5px; }
  .g-id { flex-basis: 19px; }
  .a-grid { grid-template-columns: repeat(2, 1fr); }
  .v-prev, .v-next { top: auto; bottom: 10px; transform: none; }
  .v-count { bottom: 26px; }
  .asat { padding: 6px 10px; }
}