/* Two materials. The hood: the dark, where you choose. The glass: the light, where you look.
   Exactly one thing is ever on the glass; it arrives by coming into focus and the glass takes its shape. */
:root {
  --hood: #0d0c0a;
  --hood-raised: #151411;
  --etch: #2a2824;
  --glass: #dcd8cd;
  --ink: #191a17;
  --ink-soft: #4c4b45;
  --text: #e6e2d8;
  --soft: #a9a59b;
  --dim: #8f8b82;
  --face: "Familjen Grotesk", system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;
  --G: clamp(16px, 4vw, 64px);
  --bar: 56px;
  --rail: 128px;
  --rail-gap: 32px;
  --ease-focus: cubic-bezier(.2, .7, .2, 1);
  --ease-shape: cubic-bezier(.3, 0, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--hood); scrollbar-width: thin; scrollbar-color: var(--etch) transparent; scrollbar-gutter: stable; }
::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
::-webkit-scrollbar-thumb { background: var(--etch); border-radius: 3px; }
body { margin: 0; min-height: 100dvh; background: var(--hood); color: var(--text); font: 400 17px/1.55 var(--face);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--glass); outline-offset: 4px; }
.mono { font: 400 13px/1.5 var(--mono); letter-spacing: .02em; color: var(--dim); }

/* Chrome: identical on every page. One left edge (G) for bars and content. */
.bar { position: relative; z-index: 6; height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-left: max(var(--G), env(safe-area-inset-left, 0px)); padding-right: max(var(--G), env(safe-area-inset-right, 0px));
  font: 400 13px/1.5 var(--mono); letter-spacing: .02em; color: var(--dim); }
.bar a, .bar button { display: inline-flex; align-items: center; min-height: 44px; color: var(--dim); transition: color 180ms; }
.bar a:hover, .bar button:hover, .bar a:focus-visible, .bar button:focus-visible, .bar [aria-current] { color: var(--text); }
.bar nav { display: flex; gap: 22px; }
.bar.bottom { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bar) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
.inner .bar.bottom { background: var(--hood-raised); }
.inner .bar.bottom::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 32px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(21, 20, 17, 0), var(--hood-raised)); }

/* The glass. Size comes from script (--gw, --gh): a line gets a square, a photo gets its own ratio. */
.glass { position: absolute; left: 50%; top: var(--cy, 46%); width: var(--gw, 300px); height: var(--gh, 300px); transform: translate(-50%, -50%);
  --ch: clamp(10px, calc(min(var(--gw, 300px), var(--gh, 300px)) * .026), 20px);
  container-type: size; }
.glass::before { content: ""; position: absolute; inset: -8px; background: linear-gradient(160deg, #2e2d29, #121210 62%);
  clip-path: polygon(calc(var(--ch) + 4px) 0, calc(100% - var(--ch) - 4px) 0, 100% calc(var(--ch) + 4px), 100% calc(100% - var(--ch) - 4px), calc(100% - var(--ch) - 4px) 100%, calc(var(--ch) + 4px) 100%, 0 calc(100% - var(--ch) - 4px), 0 calc(var(--ch) + 4px)); }
.pane { position: absolute; inset: 0; overflow: hidden; background: var(--glass);
  clip-path: polygon(var(--ch) 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 calc(100% - var(--ch)), 0 var(--ch)); }
.content { position: absolute; inset: 0; display: block; color: var(--ink);
  transition: filter 1200ms var(--ease-focus), opacity 1200ms var(--ease-focus), transform 1200ms var(--ease-focus); }
.content p { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; padding: 0 9%;
  font: 500 clamp(22px, 6.2cqi, 46px)/1.14 var(--face); letter-spacing: -.018em; text-wrap: balance; }
.content img { display: block; width: 100%; height: 100%; object-fit: cover; }
.soft .content { filter: blur(10px); opacity: .35; transition: filter 450ms ease-in, opacity 450ms ease-in, transform 450ms ease-in; }
.soft .content.is-photo { filter: blur(18px); }
.glass.still, .glass.still + .spill, .spill.still { transition: none; }

/* Front door only: it is a focusing screen, so the etched marks and the matte stay on. */
/* A non-square photo on the square finder: shown whole; the unused glass is covered by a format mask,
   a flat plate with a crisp edge, sitting above the glass so no light or glow falls on it. */
.finder .content img { object-fit: contain; }
.finder.has-photo .pane { background: #24231f; }
.finder::before { background: linear-gradient(160deg, #46443e, #1d1c19 62%); }
.mask { position: absolute; pointer-events: none; background: #24231f; display: none; }
.finder.has-photo .mask { display: block; }
.mask.a { left: 0; right: 0; top: 0; height: var(--band-y, 0%); box-shadow: inset 0 -1px 0 rgba(236, 232, 223, .14); }
.mask.b { left: 0; right: 0; bottom: 0; height: var(--band-y, 0%); box-shadow: inset 0 1px 0 rgba(236, 232, 223, .14); }
.mask.c { top: 0; bottom: 0; left: 0; width: var(--band-x, 0%); box-shadow: inset -1px 0 0 rgba(236, 232, 223, .14); }
.mask.d { top: 0; bottom: 0; right: 0; width: var(--band-x, 0%); box-shadow: inset 1px 0 0 rgba(236, 232, 223, .14); }
.finder.has-photo .light { background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(25, 22, 18, .25) 100%); }
.etch, .ring { position: absolute; pointer-events: none; }
.etch { inset: 0; }
.etch i { position: absolute; background: rgba(20, 20, 16, .22); }
.etch .v1 { left: 33.333%; top: 0; bottom: 0; width: 1px; }
.etch .v2 { left: 66.666%; top: 0; bottom: 0; width: 1px; }
.etch .h1 { top: 33.333%; left: 0; right: 0; height: 1px; }
.etch .h2 { top: 66.666%; left: 0; right: 0; height: 1px; }
.ring { left: 50%; top: 50%; width: min(22%, 22cqh); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(20, 20, 16, .28);
  background: repeating-conic-gradient(rgba(255, 255, 255, .06) 0 4deg, rgba(0, 0, 0, .06) 4deg 8deg); }
.ring::before { content: ""; position: absolute; left: 30%; right: 30%; top: 50%; height: 1px; background: rgba(20, 20, 16, .3); }
.ring::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; border: 1px solid rgba(20, 20, 16, .28); }
.finder .fresnel { background: repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 8px, rgba(0, 0, 0, .022) 8px 9px); }
.finder .grain { opacity: .42; }
.fresnel, .light, .grain { position: absolute; inset: 0; pointer-events: none; }
.fresnel { background: repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 9px, rgba(0, 0, 0, .012) 9px 10px); }
.light { background: radial-gradient(circle at 50% 46%, rgba(255, 252, 242, .42), rgba(255, 252, 242, 0) 55%), radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 48%, rgba(25, 22, 18, .45) 100%); }
.view .has-photo .light { background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(10, 9, 8, .32) 100%); }
.grain { mix-blend-mode: multiply; opacity: .3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .54  0 0 0 0 .5  0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.glass .meta { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); width: max(100%, min(340px, 92vw)); display: flex; justify-content: space-between; gap: 12px;
  font: 400 13px/1.5 var(--mono); letter-spacing: .02em; color: var(--dim); transition: opacity 600ms ease; }
.glass.soft .when { opacity: 0; }
.meta .ctrl { display: flex; gap: 16px; }
.meta button { min-height: 44px; margin-top: -12px; color: var(--dim); transition: color 180ms; }
.meta button:hover, .meta button:focus-visible { color: var(--text); }
.spill { position: absolute; left: 50%; top: var(--cy, 46%); width: calc(var(--gw, 300px) * 1.7); height: calc(var(--gh, 300px) * 1.7); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(220, 216, 205, .07), rgba(220, 216, 205, 0)); pointer-events: none; }

/* Front door */
.door { overflow: hidden; height: 100dvh; }
.door .stage { position: fixed; inset: 0; }

/* Item view: one overlay for lines and photos, used by the list pages. */
.view { position: fixed; inset: 0; z-index: 20; background: rgba(21, 20, 17, .96); opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s 200ms; }
.view.open { opacity: 1; visibility: visible; transition: opacity 240ms ease, visibility 0s; }
.view:focus { outline: none; }

/* Inner pages: a date rail, then content. Rows fill with glass on hover and focus. */
main.list { padding: 24px var(--G) calc(var(--bar) + 96px); padding-left: max(var(--G), env(safe-area-inset-left, 0px)); padding-right: max(var(--G), env(safe-area-inset-right, 0px)); }
/* Reading columns sit centred on wide screens; text inside stays left-aligned. */
main.list.col { max-width: calc(1000px + 2 * var(--G)); margin-inline: auto; }
main.list.col-wide { max-width: calc(1440px + 2 * var(--G)); margin-inline: auto; }
.intro { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 var(--rail-gap); margin: 0 0 32px; }
.intro p { grid-column: 2; margin: 0; color: var(--soft); max-width: 44ch; }
.row { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 6px var(--rail-gap); align-items: baseline;
  padding: 24px 16px; margin: 0 -16px; border-top: 1px solid var(--etch); color: var(--text); transition: background-color 180ms, color 180ms; }
.row:last-child { border-bottom: 1px solid var(--etch); }
.rail { font: 400 13px/1.5 var(--mono); letter-spacing: .02em; color: var(--dim); white-space: nowrap; transition: color 180ms; }
.row .line { margin: 0; font: 400 clamp(22px, calc(19px + .81vw), 34px)/1.2 var(--face); letter-spacing: -.012em; max-width: 38ch; text-wrap: pretty; }
.row .name { margin: 0; font: 500 clamp(28px, calc(22px + 1.6vw), 48px)/1.04 var(--face); letter-spacing: -.02em; }
.row .say { margin: 10px 0 0; color: var(--soft); max-width: 52ch; transition: color 180ms; }
.row .meta-line { margin: 10px 0 0; font: 400 13px/1.5 var(--mono); letter-spacing: .02em; color: var(--dim); transition: color 180ms; }
.row:hover, .row:focus-visible, .row.lit { background: var(--glass); color: var(--ink); outline: none; }
.row:hover .rail, .row:focus-visible .rail, .row.lit .rail,
.row:hover .say, .row:focus-visible .say, .row.lit .say,
.row:hover .meta-line, .row:focus-visible .meta-line, .row.lit .meta-line { color: var(--ink-soft); }
.row.fading, .row.fading .rail { transition: background-color 1200ms ease, color 1200ms ease; }
.empty { color: var(--soft); }

/* Building: a system chart. Four modules of one photo system, on one screen; a module lights up as glass. */
.system { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(16px, 3vh, 32px); height: calc(100dvh - var(--bar)); padding-bottom: calc(var(--bar) + clamp(16px, 3vh, 32px)); }
.system .intro { margin: 0; }
.modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--etch); border: 1px solid var(--etch); }
.module .spec { flex-wrap: wrap; }
.module .go { white-space: nowrap; margin-left: auto; }
.module { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: clamp(18px, 2.4vw, 36px); background: var(--hood); color: var(--text); transition: background-color 180ms, color 180ms; }
.module .top, .module .spec { display: flex; justify-content: space-between; gap: 16px; font: 400 13px/1.5 var(--mono); letter-spacing: .02em; color: var(--dim); transition: color 180ms; }
.module .name { margin: 0; align-self: end; font: 500 clamp(32px, calc(20px + 2.2vw), 60px)/1 var(--face); letter-spacing: -.025em; }
.module .say { margin: 10px 0 0; color: var(--soft); max-width: 46ch; transition: color 180ms; }
.module:hover, .module:focus-visible { background: var(--glass); color: var(--ink); outline: none; }
.module:hover .top, .module:focus-visible .top, .module:hover .spec, .module:focus-visible .spec,
.module:hover .say, .module:focus-visible .say { color: var(--ink-soft); }
@media (max-width: 760px) {
  .modules { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .system { height: auto; }
}

/* Photos: rows at their own ratio, grouped by month. */
.month { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 6px var(--rail-gap); padding: 24px 0; border-top: 1px solid var(--etch); }
.month .rail { padding-top: 2px; }
.jrow { display: flex; gap: 12px; }
.jrow + .jrow { margin-top: 28px; }
.shot { margin: 0; flex: none; }
.shot button { display: block; width: 100%; cursor: zoom-in; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--hood-raised); }
.shot figcaption { margin-top: 8px; font: 400 13px/1.5 var(--mono); letter-spacing: .02em; color: var(--dim); }

@media (max-width: 520px) {
  :root { --bar: 52px; }
  .bar, .glass .meta, .rail, .row .meta-line, .shot figcaption, .mono { font-size: 12px; }
  .bar nav { gap: 16px; }
  .intro, .row, .month { grid-template-columns: minmax(0, 1fr); }
  .intro p { grid-column: 1; }
  .row { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .glass, .spill { transition: none; }
  .content, .soft .content, .soft .content.is-photo { filter: none; transform: none; transition: opacity 200ms ease; }
  .soft .content { opacity: 0; }
  .row.fading, .row.fading .rail { transition: none; }
}