/* app/dst.css — the page's stylesheet, out of index.html (lines 11–286; refactor step R2, 2026-10-18), verbatim. */
  :root{
    --bg:#f1e9d8;
    --ink:#2b2416;
    --ink-soft:#6f6247;
    --gold:#a97c22;
    --gold-dim:#8a6f3f;
    --line:rgba(54,44,24,.4);
  }
  *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  html,body{ height:100%; }
  body{
    background:#0a0f26;
    color:var(--ink);
    font-family:"Adobe Garamond Pro","EB Garamond","Garamond","ITC Garamond","Cormorant Garamond","Palatino Linotype",Palatino,Georgia,serif;
    font-weight:500;   /* Garamond Medium throughout */
    min-height:100dvh; overflow:hidden; position:relative;
    -webkit-font-smoothing:antialiased;
  }

  /* the sky fills the whole screen — the Earth floats inside it */
  #stage{ position:fixed; inset:0; width:100vw; height:100dvh; }   /* default arrow — pointer belongs to real controls only */
  canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }


  /* the header stack — the PLACE up top, then "Now", then the scrubbed clock &
     the now-hand line below it. Three tunables (CSS vars, driven by sliders):
     the place's TYPE SIZE, the header's distance from the TOP of the screen, and
     the GAP from "Now" down to the clock/line. Gradient/clip is per-line. */
  #title{
    position:fixed; top:var(--titleTop,22px); left:0; right:0; z-index:6;
    display:flex; flex-direction:column; align-items:center;
    font-size:16px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
    pointer-events:none;
  }
  @keyframes titleShimmer{ 0%{background-position:140% 0;} 100%{background-position:-40% 0;} }
  /* the PLACE, written at the foot of the sky exactly as the title is written at its
     head — same gold, same voice, same 25px from its edge. Clickable (set a custom
     lat/lon) but wearing no button chrome at all. */
  /* THE TIME STEPS — the foot of the page, written in the voice of its head: one line of type, no chrome
     (Evan, 2026-10-02: "more unified, in line with the aesthetics of the rest, elegant, clear" — they were nine
     boxed pills in another typeface). The past lies to the left of NOW and the future to its right, the steps
     growing outward (hour · 12 hours · day · month); a hairline chevron points the way each one goes. NOW sits
     on the axis of the now-hand, in the title's gold: quiet while the clock IS at the present, lit as the way
     home once it is not. The row follows the chosen typeface, and its ink is adaptive like the labels'
     (inkFoot). It fades with the overlay (tap the sky to reveal it). */
  #loc-title{
    position:fixed; bottom:11px; left:0; right:0; z-index:8;   /* (11 px: Evan's, from a one-off dial, 2026-10-02) */   /* (z 8, was 6: the placing handles and name tags stand at 7 and had been taking the clicks meant for the time buttons -- Evan, 2026-10-21: 'when I try and click a time button, e.g. month, often it's clicking a label underneath by mistake'; the row's wings keep pointer-events:none, so only the buttons win) */
    display:flex; align-items:center; pointer-events:none;
    font-size:calc(10.5px*var(--tfk,1)); font-weight:400; letter-spacing:.24em; text-transform:uppercase; line-height:1;
  }
  /* the two wings: equal shares of the row, so NOW is on the centre line whatever the words measure */
  .loc-side{ flex:1 1 0; min-width:0; display:flex; align-items:center; transition:opacity .5s ease; }
  .loc-side:first-child{ justify-content:flex-end; }
  body:not(.ui) .loc-side{ opacity:0; }
  body:not(.ui) #loc-title button{ pointer-events:none; }
  /* the gradient + clip live on the SPAN itself (not the parent): a self-painting
     element survives a :hover filter without collapsing to transparent text */
  /* the chrome lives on a WRAPPER so it can never collide with the name's
     gradient text-clip (a background on #loc-name would replace the gold that
     paints the glyphs) */
  /* the PLACE — hidden until the labels are up (then it appears BELOW the clock,
     the --nowGap sitting above it); always just clickable GOLD TEXT, no chrome */
  #loc-btn{ display:none; pointer-events:auto; cursor:pointer;
    font-size:calc(var(--locSize,12.8px)*var(--tfk,1)); letter-spacing:.18em; margin-top:var(--nowGap,5px);
    padding:2px 6px; }
  body.ui #loc-btn{ display:inline-block; }
  #loc-name{
    color:#ecd79a;
    background:linear-gradient(100deg,
      #ddc57e 0%, #e8d296 44%, #f4e8c2 50%, #e8d296 56%, #ddc57e 100%);
    background-size:260% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:titleShimmer 24s linear infinite;
    transition:filter .2s ease;
  }
  /* (the place no longer brightens under the pointer: no type changes on hover — Evan, 2026-10-01; it is still a link) */
  /* the place MENU — opens upward from the location title; a sibling element so it
     never inherits the gradient text-clip that would blank its labels */
  #loc-pop{ position:fixed; left:50%; transform:translateX(-50%); top:76px; z-index:9;
    display:flex; flex-direction:column; gap:3px; white-space:nowrap;
    background:rgba(20,18,30,.82); border:1px solid rgba(240,228,198,.34); border-radius:9px;
    padding:6px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    font-family:"Avenir Next","Helvetica Neue","Segoe UI",system-ui,-apple-system,Arial,sans-serif; }
  #loc-pop[hidden]{ display:none; }
  #loc-pop button{ background:none; border:0; color:#e7ddc3; font:inherit; font-size:11px;
    letter-spacing:.08em; text-align:center; padding:5px 14px; border-radius:6px; cursor:pointer;
    white-space:nowrap; transition:.15s; }
  #loc-pop button:hover{ background:rgba(240,228,198,.12); color:#fff6df; }
  #loc-pop button.on{ color:#ffe6a6; }
  #loc-pop hr{ border:0; border-top:1px solid rgba(240,228,198,.18); margin:3px 6px; }
  @media (prefers-reduced-motion:reduce){ #title{ animation:none; } }
  /* with the overlay up, the title becomes THE moment itself: the time over the date,
     in the same gold — the two states live stacked in one grid cell and CROSSFADE,
     drifting a few px past each other; the now-hand eases its top to match.
     Each clock line carries its own gradient clip: clip-to-text on the parent does
     not reach text inside a nested flex box, which left the date invisible. */
  /* each gold line carries a shadow SCALED to its own size — the soft aesthetic of
     the old title shadow, tightened so small type isn't swallowed by a 10px blur */
  #title-brand{
    transition:filter .25s ease;
    background:linear-gradient(100deg,
      #ddc57e 0%, #e8d296 44%, #f4e8c2 50%, #e8d296 56%, #ddc57e 100%);
    background-size:260% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:titleShimmer 24s linear infinite; }
  /* while time is scrubbed away, "Now" itself is a quiet control home to the present */
  body:not(.ui).offnow #title-brand{ pointer-events:auto; cursor:pointer; }
  body:not(.ui).offnow #title-brand:hover{ filter:brightness(1.16); }
  /* the clock TAKES "Now"'s place at the top of the header; the place drops beneath
     it (with --nowGap between them). Shown only with the overlay up — the now-hand
     line eases to meet whichever foot is showing */
  #title-clock{ display:none; flex-direction:column; gap:4px; align-items:center;
    margin-top:0; pointer-events:none; }
  body.ui #title-clock{ display:inline-flex; }
  /* labels up → "Now" steps aside and the moment (time / date) takes its place */
  #title-brand{ display:none; }   /* the word "Now" is retired — the clock still appears with the controls */
  #loc-title button{ font:inherit; letter-spacing:inherit; text-transform:inherit; line-height:1;
    color:rgb(238,233,220); -webkit-text-fill-color:currentColor;        /* the cream of the ring's labels */
    background:none; border:0; border-radius:0; margin:0; padding:6px 15px 8px; cursor:pointer; white-space:nowrap; pointer-events:auto;
    display:inline-flex; align-items:center; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
    transition:color .3s ease, transform .22s cubic-bezier(.2,.7,.2,1); }
  #loc-title button > span{ margin-right:-.24em; }                         /* (the tracking's trailing space, taken back: the word is centred in its own box) */
  #loc-title .ts{ display:none; }                                          /* the short words, for a narrow window */
  #loc-title .fr{ font-weight:600; letter-spacing:0; margin-right:.54em; }   /* the ½: its small figures are drawn heavier, so their strokes weigh what the capitals' do — and it sits a short word-space from DAY, not a tracked space and a half */
  /* under the pointer a step comes a little CLOSER (it grows); pressed, it goes a little farther AWAY (Evan, 2026-10-02) */
  @media (hover:hover){ #loc-title button:hover:not(:disabled){ transform:scale(1.043); } }
  #loc-title button:active:not(:disabled){ transform:scale(.97); transition-duration:.3s, .07s; }
  #loc-title button:focus{ outline:none; }
  #loc-title button:focus-visible > span{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.45em; }
  /* THE ARROWS: a hairline chevron (the weight of the dial's ticks) on the outer side of each step, and behind it a
     shaft that is LONGER the longer the step — none for the hour, then the half day, the day, the month: the farther
     from NOW, the farther it goes. (--sh: the shaft's length.) */
  #loc-title .ar{ flex:0 0 auto; position:relative; top:-.02em; height:.7em; width:calc(.32em + var(--sh,0em)); }
  #loc-title .ar::before{ content:''; position:absolute; top:50%; box-sizing:border-box; width:.44em; height:.44em; border:solid currentColor; border-width:0 0 1px 1px; }
  #loc-title .ar::after{ content:''; position:absolute; top:50%; left:0; right:0; height:1px; margin-top:-.5px; background:currentColor; }
  #loc-title button[data-span="1"]{ --sh:0em; } #loc-title button[data-span="1"] .ar::after{ display:none; }
  #loc-title button[data-span="2"]{ --sh:.48em; } #loc-title button[data-span="3"]{ --sh:.87em; } #loc-title button[data-span="4"]{ --sh:1.38em; }   /* (Evan's: 0.60 of the first lengths, from a one-off dial, 2026-10-02) */
  #loc-title .loc-side:first-child .ar{ margin-right:.66em; }
  #loc-title .loc-side:first-child .ar::before{ left:.09em; transform:translateY(-50%) rotate(45deg); }      /* (its point on the arrow's outer end) */
  #loc-title .loc-side:last-child .ar{ margin-left:.66em; }
  #loc-title .loc-side:last-child .ar::before{ right:.09em; transform:translateY(-50%) rotate(-135deg); }
  /* NOW — on the centre line. At the present it is a quiet statement (dim, not a control); scrubbed away,
     it lights in the title's gold as the way home. */
  #loc-title #scrub-now{ padding:6px 24px 8px; color:rgb(232,210,150); opacity:1;
    transition:opacity .5s ease, color .3s ease, transform .22s cubic-bezier(.2,.7,.2,1); }
  #loc-title #scrub-now:active:not(:disabled){ transition-duration:.5s, .3s, .07s; }
  #loc-title #scrub-now > span{ transition:opacity .3s ease; }
  #loc-title #scrub-now:disabled{ cursor:default; color:rgb(238,233,220); }
  #loc-title #scrub-now:disabled > span{ opacity:.42; }
  body:not(.ui) #loc-title #scrub-now{ opacity:0; pointer-events:none; }
  @media (max-width:1000px){ #loc-title .tw{ display:none; } #loc-title .ts{ display:inline; } #loc-title button{ padding-left:11px; padding-right:11px; }
    #loc-title button[data-span="2"]{ --sh:.33em; } #loc-title button[data-span="3"]{ --sh:.6em; } #loc-title button[data-span="4"]{ --sh:.93em; } }
  #tc-time, #tc-date, #tc-stack > span{
    background:linear-gradient(100deg,
      #ddc57e 0%, #e8d296 44%, #f4e8c2 50%, #e8d296 56%, #ddc57e 100%);
    background-size:260% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:titleShimmer 24s linear infinite;
  }
  #tc-time{ font-size:calc(18px*var(--tfk,1)); letter-spacing:.14em; }
  #tc-date{ font-size:calc(10.5px*var(--tfk,1)); letter-spacing:.2em; font-weight:500; }
  /* THE STACKED TITLE (Show › Stacked title; Evan, 2026-10-16): at the head the time, then the day, the month and date, the year, one under the other in the clock's own
     sizes; the PLACE leaves the head and sits just under the centre of the planet in large type — the same gold, the same voice, a soft shadow so it reads over the land */
  #tc-stack{ display:none; }
  body.stacked #tc-date{ display:none; }
  body.stacked #tc-stack{ display:flex; flex-direction:column; align-items:center; gap:7px; font-size:calc(10.5px*var(--tfk,1)); letter-spacing:.2em; font-weight:500; line-height:1; margin-top:2px; }
  body.stacked #tc-yr{ opacity:.8; }
  body.stacked #tc-md{ display:none; }
  body.stacked #loc-btn{ position:fixed; left:var(--pcx,50%); top:calc(var(--pcy,50%) + var(--prb,300px)*-0.07); transform:translate(-50%,0); transform-origin:50% 0; margin:0; padding:2px 8px; white-space:nowrap;   /* (hangs JUST UNDER the centre — its top at the crossing of the hand and the season lines, not its middle: Evan's screenshot of 2026-10-19, the small line lost in the crossing) */
    filter:drop-shadow(0 .4px .4px rgba(0,0,0,.4)) drop-shadow(0 1px 7px rgba(0,0,0,.6)); }   /* (scaled by a transform, not a font-size: the typeface system writes the place's size inline, which no stylesheet rule outranks; --locBig is the enlargement) */
  /* the PLACE's two parts under the stacked title (Evan, 2026-10-19: "the main location in the large type, under the secondary location", in the time's own style): the secondary
     small above, tracked like the date lines; the main large beneath, tracked like the time — one block, one gold, one shadow (the gradient stays on #loc-name and paints both) */
  body.stacked #loc-name{ display:flex; flex-direction:column; align-items:center; gap:7px; line-height:1; }
  body.stacked #loc-name .loc-sep{ display:none; }
  body.stacked #loc-name .loc-sub{ order:0; font-size:calc(10.5px*var(--tfk,1)); letter-spacing:.22em; font-weight:500; }
  body.stacked #loc-name .loc-main{ order:1; font-size:calc(18px*var(--tfk,1)); letter-spacing:.14em; font-weight:500; }   /* (Evan's values, 2026-10-19: A 18/500, B 10.5/500, the block's top 0.07 radii above the centre) */
  /* THE STACKED TITLE'S TYPE — Evan's values from the temporary dials of 2026-10-19, baked (the dials and their panel are gone; the title is always stacked now):
     time 18/500, date 10.5/500, year 10.5/500, the place's main line 18/500, its secondary 10.5/500, the block's top 0.07 radii above the centre */
  body.stacked #tc-time{ font-size:calc(18px*var(--tfk,1)) !important; font-weight:500 !important; }   /* (!important: the typeface system lays the time's size and weight INLINE on #tc-time; stacked, Evan's 18/500 is the time's — and the dial's variable still steers it) */
  body.stacked #tc-wd{ font-size:calc(10.5px*var(--tfk,1)); font-weight:500; }
  body.stacked #tc-yr{ font-size:calc(10.5px*var(--tfk,1)); font-weight:500; }
  /* THE TYPEFACE OPTIONS (setTypeface; body[data-tf]): each face's family, optical size (--tfk), weights and tracking */
  body[data-tf="jost"]{ font-family:"Jost","Futura","Avenir Next","Helvetica Neue",sans-serif; --tfk:1.04; }
  body[data-tf="jost"] #title{ font-weight:300; letter-spacing:.26em; }
  body[data-tf="jost"] #tc-time{ font-weight:200; letter-spacing:.22em; }
  body[data-tf="jost"] #tc-date{ font-weight:300; letter-spacing:.3em; }
  body[data-tf="jost"] #loc-btn{ letter-spacing:.26em; }
  /* the time explorer — a bare, wide timeline across the bottom, no container */
  /* PLACE picker, upper right — quiet, reads as the location itself */
  /* (the LAYERS button/popover is retired — nighttime + constellations are always on;
      console: window.__nightMode / window.__constLabels) */
  #fps{ position:fixed; right:3px; bottom:2px; z-index:50; pointer-events:none;
    font:10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:rgba(196,204,216,.45);
    letter-spacing:.02em; font-variant-numeric:tabular-nums; }
  /* CONTROLS toggle — a discreet show/hide for the editing panels (currently the temp
     Weather panel), bottom-right. The fps readout tucks in just to its left. */
  #ctl-toggle{ position:fixed; right:5px; bottom:3px; z-index:51; display:none;
    width:18px; height:18px; align-items:center; justify-content:center; box-sizing:border-box;
    padding:0; border:none; background:none; cursor:pointer; line-height:1;
    font:13px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:rgba(196,204,216,.4);
    transition:color .2s, transform .2s; -webkit-tap-highlight-color:transparent; }
  #ctl-toggle:hover{ color:rgba(220,228,240,.85); transform:scale(1.12); }
  #ctl-toggle::after{ content:'\2699'; }              /* ⚙ — click to reveal the editing panels */
  body.panels #ctl-toggle::after{ content:'\2715'; } /* ✕ — click to hide them again */
  body.panels #ctl-toggle{ color:rgba(220,228,240,.6); }
  #ctl-toggle{ display:flex; }                        /* visible on every location */
  /* an experiment's own floating tick (shown with the panels): above them, top left — and on a phone, where the Sky and Type panels live there, they step down to leave it room */
  #hf-exp{ position:fixed; left:14px; top:12px; z-index:32; padding:6px 10px 6px 8px; background:rgba(8,12,20,0.58); border:1px solid rgba(212,183,106,0.30); border-radius:10px;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-family:Georgia,serif; font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:#d9c489; cursor:pointer; user-select:none; white-space:nowrap; }
  @media (pointer:coarse),(max-width:640px){ #hf-exp{ left:max(10px,env(safe-area-inset-left)); top:max(10px,env(safe-area-inset-top)); font-size:12px; padding:8px 12px 8px 10px; } }
  #fps{ right:26px; }                                 /* sit the fps just left of the button */

  /* ================= MOBILE — controls adapted for touch =================
     One coherent phone layer: safe-area aware, thumb-sized targets, the scrub
     row spread edge-to-edge, popovers enlarged. */
  html{ -webkit-text-size-adjust:100%; }
  body{ overscroll-behavior:none; }
  #stage, canvas{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
  button, select, input[type=checkbox]{ touch-action:manipulation; }
  #hf-mob-sheet{ display:none; }   /* the sheet exists only inside the mobile layer below */
  @media (pointer:coarse), (max-width:640px){
    /* the header clears the notch */
    #title{ top:max(var(--titleTop,22px), calc(env(safe-area-inset-top) + 10px)); }
    #tc-time{ font-size:calc(21px*var(--tfk,1)); }
    #tc-date{ font-size:calc(12px*var(--tfk,1)); }
    #loc-btn{ padding:6px 12px; font-size:calc(max(var(--locSize,12.8px), 13px)*var(--tfk,1)); }
    /* the TIME ROW — full width, the short words, each step a thumb-sized target over the home bar. On a phone the
       dial's own lettering runs through the foot of the screen, so here (only) the row stands on a soft floor of night */
    #loc-title{ left:6px; right:6px; bottom:max(8px, calc(env(safe-area-inset-bottom) + 4px));
      font-size:calc(10.5px*var(--tfk,1)); letter-spacing:.06em; }
    #loc-title::before{ content:''; position:fixed; left:0; right:0; bottom:0; height:calc(env(safe-area-inset-bottom) + 84px); z-index:-1; pointer-events:none;
      background:linear-gradient(to top, rgba(8,10,24,.82) 0%, rgba(8,10,24,.66) 52%, rgba(8,10,24,0) 100%); opacity:1; transition:opacity .5s ease; }
    body:not(.ui) #loc-title::before{ opacity:0; }
    #loc-title .tw{ display:none; } #loc-title .ts{ display:inline; }
    #loc-title button > span{ margin-right:-.06em; }
    #loc-title .loc-side button{ flex:1 1 0; min-width:0; padding:17px 0; justify-content:center; }
    #loc-title button[data-span="2"]{ --sh:.12em; } #loc-title button[data-span="3"]{ --sh:.24em; } #loc-title button[data-span="4"]{ --sh:.36em; }
    #loc-title .loc-side:first-child .ar{ margin-right:.34em; }
    #loc-title .loc-side:last-child .ar{ margin-left:.34em; }
    #loc-title #scrub-now{ flex:0 0 auto; padding:17px 13px; }
    /* the place MENU — roomier rows under the title */
    #loc-pop{ top:max(76px, calc(env(safe-area-inset-top) + 64px)); padding:8px; gap:4px; }
    #loc-pop button{ font-size:14px; padding:11px 22px; border-radius:8px; }
    /* the ⚙ — a real 42px touch target, riding the safe area */
    #ctl-toggle{ width:42px; height:42px; font-size:17px;
      right:max(4px, env(safe-area-inset-right)); bottom:calc(max(8px, env(safe-area-inset-bottom) + 4px) + 48px); }   /* ABOVE the time row: at the foot it lay on the last step and took its taps */
    #fps{ right:8px; bottom:max(3px, env(safe-area-inset-bottom)); }   /* in the corner, under the row's last step */
    /* ---- the tabbed BOTTOM SHEET that adopts the three editing panels ---- */
    #hf-mob-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:none;
      flex-direction:column; max-height:58dvh;
      background:rgba(8,12,20,0.88); border-top:1px solid rgba(212,183,106,0.35);
      border-radius:14px 14px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,0.45);
      -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
      padding:8px 12px calc(env(safe-area-inset-bottom) + 10px);
      font-family:Georgia,serif; }
    body.panels.loc-cots #hf-mob-sheet{ display:flex; }
    #hf-mob-tabs{ display:flex; gap:8px; padding:2px 2px 9px; flex:0 0 auto; }
    #hf-mob-tabs button{ flex:1; background:rgba(201,165,87,0.10); border:1px solid rgba(212,183,106,0.30);
      border-radius:9px; color:#cdb87f; font-family:Georgia,serif; font-size:12px; letter-spacing:0.12em;
      text-transform:uppercase; padding:10px 0; cursor:pointer; transition:.15s; }
    #hf-mob-tabs button.on{ background:rgba(201,165,87,0.24); border-color:rgba(228,200,124,0.65); color:#f2e3b2; }
    #hf-mob-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto; min-height:0; }
    /* the adopted panels shed their desktop chrome & sizing inside the sheet */
    #hf-mob-body .hf-mobpanel{ position:static !important; transform:none !important;
      width:auto !important; max-height:none !important; background:none !important;
      border:none !important; box-shadow:none !important; padding:0 2px !important;
      -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
      font-size:12px !important; overflow:visible !important; }
    #hf-mob-body .hf-mobpanel:not(.mob-on){ display:none !important; }
    #hf-mob-body input[type=range]{ width:46vw !important; height:26px; }
    #hf-mob-body button{ padding-top:6px !important; padding-bottom:6px !important; font-size:11px !important; }
    #hf-mob-body select{ font-size:12px !important; padding:6px 8px !important; }
  }

/* ZOOMED (2026-10-21): while the planet is drawn bigger (body.zoomed, set by the frame) the clock stack and the location words are hidden; the time step buttons beside the location stay and work */
body.zoomed #tc-stack, body.zoomed #loc-name{ visibility:hidden; }