/* Flip through: the Journal one entry at a time (build-journal.py,
   flip_page(); journal-flip.js). One card in the middle; the entries before
   it to the left, the later ones to the right, each further out smaller and
   further receded. The site's own colours (shell.css), so a palette or dark
   mode chosen in Appearance carries here. Every name starts fl- because the
   site already has a .card, .kicker and .play of its own. */

:root{
  --fl-veil:var(--paper);
  --fl-print:#fbfaf6; --fl-shadow:rgba(20,30,40,.14); --fl-scrim:rgba(12,16,18,.55);
  /* Shadows on paper: a thin close one for the edge and a faint short one
     for lift. One deep shadow, right on a dark page, sat under every card
     and button as a grey cloud on a light one (Carl, Nov 2). */
  --fl-sh-photo:0 1px 2px rgba(20,30,40,.12), 0 6px 16px rgba(20,30,40,.10);
  --fl-sh-back:0 1px 2px rgba(20,30,40,.10), 0 3px 8px rgba(20,30,40,.06);
  --fl-sh-label:0 1px 2px rgba(20,30,40,.10), 0 5px 14px rgba(20,30,40,.10);
  --fl-sh-ctrl:0 1px 2px rgba(20,30,40,.10), 0 3px 8px rgba(20,30,40,.08);
  /* The year is a place marker, so it's quiet: about 3.7 : 1 on the paper
     in each mode, above the 3 : 1 large text needs (Carl, Nov 2, 2026). */
  --fl-year:color-mix(in srgb, var(--heading) 70%, var(--paper));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fl-print:#ece9e2; --fl-shadow:rgba(0,0,0,.5); --fl-scrim:rgba(0,0,0,.65); --fl-veil:#000;
    --fl-sh-photo:0 20px 44px rgba(0,0,0,.5); --fl-sh-back:0 8px 20px rgba(0,0,0,.4); --fl-sh-label:0 14px 34px rgba(0,0,0,.5); --fl-sh-ctrl:0 6px 18px rgba(0,0,0,.5);
    --fl-year:color-mix(in srgb, var(--heading) 50%, var(--paper));
  }
}
:root[data-theme="dark"]{
  --fl-print:#ece9e2; --fl-shadow:rgba(0,0,0,.5); --fl-scrim:rgba(0,0,0,.65); --fl-veil:#000;
  --fl-sh-photo:0 20px 44px rgba(0,0,0,.5); --fl-sh-back:0 8px 20px rgba(0,0,0,.4); --fl-sh-label:0 14px 34px rgba(0,0,0,.5); --fl-sh-ctrl:0 6px 18px rgba(0,0,0,.5);
  --fl-year:color-mix(in srgb, var(--heading) 50%, var(--paper));
}

/* Without the script the page is a list of the entries, newest last. */
.fl-js body{ margin:0; height:100%; overflow:hidden; background:var(--paper) }
.fl-js{ height:100%; overflow:hidden }
.fl-js .fl-list{ display:none }
html:not(.fl-js) .fl-ui{ display:none }
.fl-list{ max-width:40rem; margin:2rem auto; padding:0 20px }

.fl-ui, .fl-ui button, .fl-ui select{ font-family:var(--body) }
#fl-stage{ position:fixed; inset:0; touch-action:none }

/* An entry, as one card: its photo, the date and title on a label. Placed by
   script, centred on its point. Its other photos (up to three) wait squared
   up behind it and fan out once it settles in the middle. */
.fl-card{ position:absolute; left:0; top:0; margin:0; transform-origin:0 0; will-change:transform,opacity; cursor:pointer }
.fl-in{ transform:translate(-50%,-50%); width:640px }
.fl-stack{ position:relative; height:420px }
.fl-stack img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; display:block;
  background:var(--fl-print); border:12px solid var(--fl-print); border-bottom-width:15px; border-radius:3px;
  box-shadow:var(--fl-sh-photo) }
/* The veil a side card recedes under: the paper's colour on a light page,
   black on a dark one; journal-flip.js sets how much (its opacity). Over the
   photo (the ones behind it are hidden until the card is in the middle)
   and over the label. */
.fl-veil{ position:absolute; inset:0; pointer-events:none; border-radius:3px; background:var(--fl-veil); opacity:0; z-index:2 }
.fl-card figcaption .fl-veil{ border-radius:inherit }
/* A slide: the browser animates each card to where the script has put it
   (journal-flip.js, slideTo()), with the timeline's marker alongside. */
.fl-slide .fl-card{ transition:transform var(--fl-move) var(--fl-ease), opacity var(--fl-move) var(--fl-ease),
  z-index var(--fl-move) var(--fl-ease), filter var(--fl-move) var(--fl-ease) }
.fl-slide .fl-veil{ transition:opacity var(--fl-move) var(--fl-ease) }
.fl-slide #fl-head{ transition:left var(--fl-move) var(--fl-ease) }
/* A swipe: the finger moves the cards, each of its steps a tenth of a
   second's browser animation, so the phone's uneven touch reports come
   out as an even glide, without Safari redrawing the cards at each one. */
.fl-drag .fl-card{ transition:transform .1s linear, opacity .1s linear, z-index .1s linear }
.fl-drag .fl-veil{ transition:opacity .1s linear }
.fl-stack img.b1, .fl-stack img.b2, .fl-stack img.b3{ transform:none; transition:transform .18s ease-in; box-shadow:none }
.fl-card.fanned .fl-stack img{ transition:transform .5s cubic-bezier(.25,.8,.3,1.05) }
/* Only the main photo casts the card's shadow: the ones squared up behind
   it cast none, or four shadows pile up as one heavy one (Carl, Nov 2), and
   fanned out each has a small one of its own. */
.fl-card.fanned .fl-stack img.b1, .fl-card.fanned .fl-stack img.b2, .fl-card.fanned .fl-stack img.b3{ box-shadow:var(--fl-sh-back) }
.fl-card.fanned .fl-stack img.b1{ transform:rotate(-3.5deg) translate(-30px,8px); transition-delay:.05s }
.fl-card.fanned .fl-stack img.b2{ transform:rotate(3deg) translate(28px,4px); transition-delay:.15s }
.fl-card.fanned .fl-stack img.b3{ transform:rotate(-1.2deg) translate(6px,-14px); transition-delay:.25s }
[data-motion="off"] .fl-stack img{ transition:none !important }
/* The label's text is set for the screen, not the card: the script turns
   screen sizes into the card's own units (--fl-cap-*), so a big screen
   doesn't get headline-sized titles nor a phone 9 px lines. */
.fl-card figcaption{ position:relative; width:84%; margin:calc(var(--fl-cap-pull, 40px) * -1) auto 0;
  padding:var(--fl-cap-pad, 14px 24px 16px); text-align:center;
  background:var(--raised); color:var(--ink); border-radius:12px; box-shadow:var(--fl-sh-label) }
.fl-card figcaption b{ display:block; font:500 var(--fl-cap-kicker, 18px)/1.4 var(--body); letter-spacing:.05em; text-transform:uppercase; color:var(--accent) }
.fl-card figcaption span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font:400 var(--fl-cap-title, 38px)/1.18 var(--serif); color:var(--heading); margin-top:2px }
.fl-card figcaption i{ display:block; font:400 var(--fl-cap-meta, 17px)/1.4 var(--body); font-style:normal; color:var(--ink-3); margin-top:.2em }

/* The year is the header: large, never behind a card, rolling to the next
   year as you cross into it. A new year arrives at full strength and
   settles over a second and a half, so crossing into it is noticed. */
#fl-hud{ position:fixed; top:14px; left:50%; transform:translateX(-50%); text-align:center; pointer-events:none }
#fl-year{ position:relative; height:1.08em; width:2.7em; margin:0 auto;
  font:400 clamp(44px,6.4vw,92px)/1.08 var(--serif); font-variant-numeric:lining-nums }
#fl-year span{ position:absolute; left:50%; top:0; transform:translate(-50%,0); color:var(--fl-year);
  transition:transform .6s ease, opacity .6s ease, color 1.5s ease }
#fl-year span.fresh{ color:var(--heading) }
#fl-year span.enter{ opacity:0; transform:translate(-50%,.4em) }
#fl-year span.leave{ opacity:0; transform:translate(-50%,-.4em) }
#fl-year.back span.enter{ transform:translate(-50%,-.4em) }
#fl-year.back span.leave{ transform:translate(-50%,.4em) }

/* Under the year when a trip begins or time has passed: the card labels' surface. */
.fl-sign{ position:fixed; left:50%; transform:translateX(-50%); z-index:4; text-align:center; white-space:nowrap;
  padding:8px 20px 10px; background:var(--raised); color:var(--ink); border-radius:12px; pointer-events:none;
  box-shadow:var(--fl-sh-label); transition:opacity .5s ease }
.fl-sign[hidden]{ display:block; opacity:0 }
.fl-sign .t{ font:400 22px/1.2 var(--serif); color:var(--heading) }
.fl-sign .s{ font:500 13px/1.4 var(--body); color:var(--ink-3) }
.fl-sign .s:empty{ display:none }

/* Every control sits on the card labels' surface, with their soft shadow. */
.fl-corner{ position:fixed; top:14px; display:flex; gap:6px; align-items:center; z-index:5 }
.fl-corner.r{ right:16px; gap:8px }
/* Showing a search's results: the search, the count, and Show all. */
.fl-corner.l{ left:16px }
.fl-note{ max-width:calc(100vw - 140px); padding:5px 5px 5px 14px; border-radius:999px; background:var(--raised);
  box-shadow:var(--fl-sh-ctrl); font:450 13px/1.2 var(--body); color:var(--ink-3) }
.fl-note span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.fl-note button{ flex:none; font:500 13px/1 var(--body); color:var(--accent); background:none; border:0; padding:6px 9px; cursor:pointer }
.bare .fl-corner.l{ opacity:0; pointer-events:none; transition:opacity .35s ease }
.bare.peek .fl-corner.l{ opacity:1; pointer-events:auto }
.fl-ctrls > button, .fl-ctrls select{
  font:500 14px/1 var(--body); color:var(--ink); background:var(--raised); border:0;
  border-radius:999px; padding:10px 14px; text-decoration:none; cursor:pointer; margin:0 }
.fl-ctrls > button, .fl-ctrls select, .fl-speed, #fl-strip{ box-shadow:var(--fl-sh-ctrl) }
.fl-bar{ position:fixed; left:0; right:0; bottom:0; padding:10px 16px 14px; z-index:5; display:grid; gap:10px; color:var(--ink);
  transition:opacity .35s ease, transform .35s ease }
.fl-ctrls{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center }
.fl-ctrls > button.fl-play{ min-width:84px; background:var(--accent); color:var(--paper) }
.fl-ctrls select{ appearance:none; -webkit-appearance:none }
/* Newest first / Oldest first: which way Play goes (Carl, Nov 14). One
   pill, the chosen half shaded, so it reads as a setting beside Play. */
.fl-order{ display:flex; padding:3px; gap:2px; background:var(--raised); border-radius:999px; box-shadow:var(--fl-sh-ctrl) }
.fl-order button{ font:500 14px/1 var(--body); color:var(--ink-3); background:none; border:0; border-radius:999px;
  padding:7px 12px; cursor:pointer; margin:0 }
.fl-order button:hover{ color:var(--ink) }
.fl-order button[aria-pressed="true"]{ color:var(--ink); background:color-mix(in srgb, var(--ink) 11%, var(--raised)) }
.fl-speed{ display:flex; align-items:center; gap:10px; background:var(--raised); border-radius:999px; padding:5px 16px; font:500 13px/1 var(--body) }
.fl-speed input{ width:170px; accent-color:var(--accent); margin:0 }
.fl-speed output{ min-width:8.6em; color:var(--ink-3); font-variant-numeric:tabular-nums }
#fl-strip{ position:relative; height:34px; border-radius:8px; background:var(--raised); cursor:pointer; touch-action:none }
#fl-strip .trip{ position:absolute; top:6px; height:8px; border-radius:4px; background:var(--accent); opacity:.5 }
#fl-strip .tick{ position:absolute; top:5px; width:2px; height:10px; background:var(--ink); opacity:.45 }
#fl-strip .yr{ position:absolute; bottom:3px; transform:translateX(-50%); font:500 11px/1 var(--body); color:var(--ink-3) }
#fl-strip .gap{ position:absolute; top:7px; height:6px; border-top:2px dotted var(--ink-3); opacity:.5 }
#fl-head{ position:absolute; top:0; bottom:0; width:3px; margin-left:-1px; background:var(--ink); border-radius:2px }
.fl-keys{ margin:0; text-align:center; font:400 12px/1.3 var(--body); color:var(--ink-3) }

/* Clear view and Close, top right as in the photo viewer: its buttons
   (shell.css, button.cx: 36 px, the ✕ turning on hover), on the card labels'
   surface with their shadow (on the button, not the SVG shape, which Safari
   shadows badly). Clear view hides the controls and, where the browser
   allows, fills the screen; the controls peek back when wanted. */
button.cx.fl-cx{ color:var(--ink); border-radius:8px; box-shadow:var(--fl-sh-ctrl) }
button.cx.fl-cx .o{ fill:var(--raised) }
button.cx.fl-cx:is(:hover,:focus-visible) .o{ fill:color-mix(in srgb, var(--ink) 8%, var(--raised)) }
.fl-cx .g{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.fl-cx .in, .bare .fl-cx .out{ display:none }
.bare .fl-cx .in{ display:inline }
.fl-sign{ transition:opacity .35s ease }
.bare .fl-bar{ opacity:0; pointer-events:none }
.bare .fl-bar{ background:var(--paper); box-shadow:0 -10px 30px var(--fl-shadow); transform:translateY(14px) }
.bare.peek .fl-bar{ opacity:1; pointer-events:auto; transform:none }
.bare .fl-corner.r{ opacity:.55 }
.bare .fl-corner.r:hover{ opacity:1 }

/* An entry opened: its photos, its opening lines and the way to it. */
#fl-open{ position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:16px; background:var(--fl-scrim) }
#fl-open[hidden]{ display:none }
.fl-sheet{ background:var(--paper); color:var(--ink); border-radius:14px; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); width:min(980px,100%);
  max-height:calc(100vh - 32px); box-shadow:0 30px 80px var(--fl-shadow) }
/* The photo sits in a frame of one height, as in the photo viewer, so the
   sheet holds still while its photos are stepped through: sized to each
   photo, it grew and shrank with every click (Carl, Nov 2). */
.fl-sheet .ph{ position:relative; background:var(--raised); min-height:0; height:min(70vh, 600px) }
.fl-sheet .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block }
.fl-tx{ padding:26px 28px; overflow:auto; display:flex; flex-direction:column; gap:10px }
.fl-tx p{ margin:0 }
.fl-tx .k{ font:500 13px/1.4 var(--body); color:var(--accent); letter-spacing:.02em }
.fl-tx h2{ margin:0; font:400 30px/1.15 var(--serif); color:var(--heading) }
.fl-tx .w{ font:400 14px/1.4 var(--body); color:var(--ink-3) }
.fl-tx .x{ font:400 17px/1.55 var(--serif); color:var(--ink-2) }
.fl-tx .c{ font:italic 400 14px/1.4 var(--body); color:var(--ink-3); min-height:2.8em }
.fl-thumbs{ display:flex; gap:8px; flex-wrap:wrap }
.fl-thumbs button{ padding:0; border:2px solid transparent; border-radius:6px; overflow:hidden; cursor:pointer; background:none }
.fl-thumbs button[aria-pressed="true"]{ border-color:var(--accent) }
.fl-thumbs img{ display:block; width:64px; height:48px; object-fit:cover }
.fl-acts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:8px }
.fl-acts a, .fl-acts button{ font:500 15px/1 var(--body); border-radius:999px; padding:12px 18px; cursor:pointer; text-decoration:none }
.fl-acts a{ background:var(--deep); color:var(--paper) }
.fl-acts button{ background:none; color:var(--ink-2); border:1px solid var(--rule) }

/* A short screen, a phone on its side: a smaller year and sign, no hint
   line, a slimmer toolbar, so the cards have room between them. */
@media (max-height:520px){
  #fl-hud{ top:6px }
  #fl-year{ font-size:34px }
  .fl-corner{ top:8px }
  .fl-sign{ padding:4px 14px 6px }
  .fl-sign .t{ font-size:16px }
  .fl-sign .s{ font-size:11px }
  .fl-keys{ display:none }
  .fl-bar{ padding:4px 12px 6px; gap:6px }
  .fl-ctrls > button, .fl-ctrls select{ padding:7px 12px }
  .fl-speed{ padding:3px 14px }
  .fl-order button{ padding:4px 11px }
  #fl-strip{ height:26px }
  #fl-strip .yr{ bottom:2px; font-size:10px }
}
@media (max-width:760px){
  .fl-sheet{ grid-template-columns:1fr; overflow:auto }
  .fl-sheet .ph{ height:42vh }
  .fl-tx{ padding:18px }
  .fl-tx h2{ font-size:24px }
  .fl-keys, .fl-wide{ display:none }
  #fl-hud{ top:60px }
  .fl-corner{ top:10px }
  .fl-bar{ padding:8px 10px 10px; gap:8px }
  .fl-ctrls{ gap:6px }
  /* Two rows: the buttons, then the time on each entry with the year. */
  .fl-speed{ order:5; flex:1 1 60%; justify-content:center }
  .fl-ctrls select{ order:6 }
  .fl-order button{ padding:6px 10px }
  .fl-speed input{ flex:1; width:auto }
  .fl-speed output{ min-width:0 }
  .fl-ctrls > button, .fl-ctrls select{ padding:9px 11px }
}