/* ------------------------------------------------------------------
     Sky above the
     clouds, boarding-pass cream, passport blue, and a deepened amber that
     still carries on a light ground. The departure board and the route
     chart stay dark, because a split-flap and a radar are lit panels in a
     bright terminal.

     Bricolage and DM are Google-hosted and the artifact CSP blocks font
     CDNs, so this runs on the fallback stacks that site itself declares.
     ------------------------------------------------------------------ */
  :root{
    /* The palette is the logo's. The mark runs teal -> violet -> magenta ->
       orange, and the site was navy and amber, which belonged to a different
       brand. Cooler, deeper and far more saturated now, with the warmth kept
       exactly where it earns its place: --fare, the stamps and the boarding
       passes are still printed on warm stock, because that is the passport
       rather than the interface.

       --accent is the interface colour. --amber is kept as an alias because
       a hundred rules already reference it and renaming every one would be
       churn for no gain. It is no longer amber. */
    --page:#eef0fb; --card:#ffffff; --sunk:#f2f3fd;
    --ink:#16182e; --dim:#3a3f63; --dim-2:#454b72;
    --line:#e2e4f5; --line-2:#cbcfec; --line-3:#a9afdb;
    --accent:#5b3fd6; --accent-2:#0e9fb4; --accent-3:#d63f96;
    /* text on an accent fill. The two themes want opposite ink: the day
       violet is dark (6.72:1 against white), the night lavender is light
       (6.62:1 against near-black). One value cannot serve both. */
    --on-accent:#ffffff;
    --amber:var(--accent);
    --coral:#d6395b; --cobalt:#2a5c9a;
    --green:#2f8f4e; --violet:#7a55c9;
    /* Three stops rather than four. Cyan to violet to orange keeps both ends
       of the mark's range; the magenta in the middle made the sweep busy and
       read as a rainbow rather than a gradient. */
    --glow:linear-gradient(120deg,#3fc9de,#8b4fd4 54%,#ff7a33);
    /* The same sweep, deepened, for the surfaces that carry lettering. White
       on --glow is 1.98:1 at the cyan end and 2.60:1 at the orange -- legible
       across the middle of a button and not at either end, which is how the
       primary buttons and the active nav pill have been reading. These three
       hues clear 4.5 for white the whole way along: 4.62, 8.41, 5.35.
       --glow itself is untouched, because meters, rings and clipped text use
       it where nothing has to be read off it. */
    --glow-ink:linear-gradient(120deg,#1b7f96,#5b34a6 54%,#b8471a);
    /* for text printed on the dark housings -- the flap boards and the nav
       display -- which stay dark whatever the page is doing */
    --board-ink:#3fe0f0;
    --passport:#cbd9e3; --passport-ink:#16202a; --fare:#f6efe1;
    --sky-top:#3f7cbe; --sky-mid:#93c2e4; --sky-low:#dfeaf5;
    --sun-col:#fff6d8; --sun-glow:rgba(255,238,190,.6);
    --wash:rgba(255,225,190,.4); --star-op:0; --sun-x:78%; --sun-y:18%;
    --scrim-1:rgba(238,244,251,.93); --scrim-2:rgba(238,244,251,.55);
    /* The floor the scrim fades to. This was defined on body.night only, and
       a var() with no value invalidates the whole background declaration --
       so the daylight gate was computing background:none and the copy was
       sitting on bare sky. It passed at noon and would not have at sunset. */
    --scrim-3:rgba(238,244,251,.42);
    --screen:#0b1622;

    --display:"Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

    --ink-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='160'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3.4 0 0 0 -0.62'/%3E%3C/filter%3E%3Crect width='220' height='160' filter='url(%23i)'/%3E%3C/svg%3E");
  }

  *,*::before,*::after{box-sizing:border-box}

  body{
    margin:0;color:var(--ink);min-height:100vh;
    font:16px/1.6 var(--sans);
    -webkit-font-smoothing:antialiased;
    background:
      radial-gradient(30rem 30rem at calc(var(--sun-x, 78%)) calc(var(--sun-y, 18%)),
                      var(--sun-glow), transparent 62%),
      radial-gradient(60rem 26rem at 50% 96%, var(--wash), transparent 60%),
      linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-low) 100%);
    background-attachment:fixed;
  }

  /* ------------------------------------------------------ the takeoff
     A one-point projection of a runway: both edges converge on a vanishing
     point and every stripe, bar and edge light sits at 1/depth, so the
     spacing foreshortens the way it actually does.

     The ground and the structures are painted in a fixed deep blue rather
     than in --ink, because --ink inverts at night and a runway that turns
     pale after dark reads as a mistake. Only the lights use the sky tokens,
     which is what changes between noon and midnight in the real thing. */
  .skydeck{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .skydeck svg{position:absolute;inset:0;width:100%;height:100%}
  .skydeck .rw-ground{opacity:.36}
  .skydeck .rw-tar{opacity:.5}
  .skydeck .rw-stripe{fill:#f2f6fc;opacity:.5}
  .skydeck .rw-built{fill:#0b1626;opacity:.28}
  .skydeck .rw-far{fill:#0b1626;opacity:.26}
  .skydeck .rw-jet{fill:#0b1626;opacity:.3}
  .skydeck .rw-wake{opacity:.5}
  .skydeck .rw-lights circle{fill:var(--sun-col);opacity:.6}
  .skydeck .rw-haze{opacity:.16}
  .skydeck .rw-beam{opacity:calc(var(--star-op) * .85)}

  /* Cloud. Painted in the sun colour rather than white so it warms at dawn
     and cools at noon along with everything else, and each band is slid by
     exactly one tile width so the two copies swap places seamlessly. The
     speeds are deliberately far apart -- 300s against 90s is what makes the
     high band read as distant rather than just slower. */
  .skydeck .rw-clouds ellipse{fill:var(--sun-col)}
  .skydeck .cl-hi{opacity:.5;animation:rw-drift 300s linear infinite}
  .skydeck .cl-mid{opacity:.62;animation:rw-drift 170s linear infinite}
  .skydeck .cl-low{opacity:.42;animation:rw-drift 90s linear infinite}
  @keyframes rw-drift{from{transform:translateX(0)}to{transform:translateX(-1440px)}}

  .skydeck .rw-trails .tr{
    fill:none;stroke:var(--sun-col);stroke-linecap:round;opacity:.3;
    stroke-dasharray:1400;
  }
  .skydeck .rw-trails .tr-1{stroke-width:3;animation:rw-trail 54s linear infinite}
  .skydeck .rw-trails .tr-2{stroke-width:2;opacity:.2;
    animation:rw-trail 78s linear infinite;animation-delay:-30s}
  /* drawn on from the head, then dispersing from the tail the way they do */
  @keyframes rw-trail{
    0%   {stroke-dashoffset:1400;opacity:0}
    12%  {opacity:.32}
    62%  {stroke-dashoffset:0;opacity:.32}
    100% {stroke-dashoffset:-1400;opacity:0}
  }

  /* At night the high cloud is only visible as a cool absence of stars, but
     the low deck sits in the light coming off the apron and glows warm from
     underneath. Painting all three the same blue is what made the night sky
     read as empty. */
  body.night .skydeck .cl-hi ellipse{fill:#1b2540}
  body.night .skydeck .cl-mid ellipse{fill:#2b3557}
  body.night .skydeck .cl-low ellipse{fill:#6d5a63}
  body.night .skydeck .cl-hi{opacity:.7}
  body.night .skydeck .cl-mid{opacity:.75}
  body.night .skydeck .cl-low{opacity:.8}
  body.night .skydeck .rw-trails .tr{stroke:#2c3a5c}

  /* the glow is a night thing entirely; by day it is just more haze */
  .skydeck .rw-glow{opacity:0;transition:opacity 1.2s ease}
  /* .skydeck .gl-city{...}: inline in index.html, see there */
  /* .skydeck .gl-apron{...}: inline in index.html */
  /* .skydeck .gl-thr{...}: inline in index.html */
  body.night .skydeck .rw-glow{opacity:1}
  /* apron floods do not sit still -- they flicker fractionally as aircraft
     and vehicles pass in front of them */
  body.night .skydeck .gl-apron{animation:rw-flood 11s ease-in-out infinite}
  body.night .skydeck .gl-city{animation:rw-flood 17s ease-in-out infinite reverse}
  @keyframes rw-flood{0%,100%{opacity:.86}40%{opacity:1}70%{opacity:.92}}

  /* The taxiway crosses in front of the runway. In daylight it is just a
     darker band of concrete; the blue edge lights that identify it only
     become legible after dark, which is true of the real ones too. */
  .skydeck .rw-taxi{fill:#0b1626;opacity:.14}
  .skydeck .rw-blue circle{fill:#3fa8ff;opacity:.18}
  .skydeck .rw-als circle{fill:var(--sun-col);opacity:.35}

  /* Atmospheric perspective. Distance eats contrast before it eats detail,
     so the far end of the scene is washed toward the sky colour rather than
     drawn with fewer lines. This one band does most of the work of depth. */
  .skydeck .rw-band{opacity:.55}

  /* Terminal windows are dark until the sun goes down. */
  .skydeck .rw-windows rect{fill:var(--sun-col);opacity:0}

  .skydeck .rw-sock .sock-pole{stroke:#0b1626;stroke-width:2.5;opacity:.3}
  .skydeck .rw-sock .sock-bag{fill:#e8703a;opacity:.34;transform-origin:0 10px;
    animation:rw-sock 7s ease-in-out infinite}
  @keyframes rw-sock{0%,100%{transform:rotate(-5deg) scaleX(.92)}
                     50%{transform:rotate(4deg) scaleX(1)}}

  /* The beacon: green, then white, one flash each per turn, forever. Real
     civil aerodrome beacons alternate exactly this way, and it is the single
     cheapest detail that makes a night skyline read as an airport. */
  .skydeck .rw-beacon .bc{opacity:0}
  .skydeck .rw-beacon .bc-g{fill:#38e08a}
  .skydeck .rw-beacon .bc-w{fill:#ffffff}

  /* After dark the ground goes solid and the edge lights carry the scene,
     running toward the threshold the way approach lighting does. */
  body.night .skydeck .rw-ground{opacity:.8}
  /* body.night .skydeck .rw-tar{...}: inline in index.html, see there */
  body.night .skydeck .rw-haze{opacity:.42}
  body.night .skydeck .rw-stripe{opacity:.42}
  body.night .skydeck .rw-built,
  body.night .skydeck .rw-far{opacity:.75}
  body.night .skydeck .rw-jet{opacity:.8}
  body.night .skydeck .rw-taxi{opacity:.5}
  body.night .skydeck .rw-band{opacity:.75}
  body.night .skydeck .rw-lights circle{
    opacity:1;
    filter:drop-shadow(0 0 6px var(--sun-glow)) drop-shadow(0 0 14px var(--sun-glow));
    animation:rw-run 2.6s linear infinite;
    animation-delay:calc(var(--i) * -.085s);
  }
  @keyframes rw-run{0%,70%{opacity:.55}78%{opacity:1}86%,100%{opacity:.55}}

  body.night .skydeck .rw-blue circle{
    opacity:.9;filter:drop-shadow(0 0 5px #3fa8ff);
    animation:rw-bl 4.5s ease-in-out infinite;
    animation-delay:calc(var(--i) * -.12s);
  }
  @keyframes rw-bl{0%,100%{opacity:.6}50%{opacity:1}}

  /* The approach lights are a sequenced flasher: a pulse that runs inward
     toward the threshold. Pilots call it the rabbit. */
  body.night .skydeck .rw-als circle{
    opacity:.5;filter:drop-shadow(0 0 7px var(--sun-glow));
    animation:rw-rabbit 1.6s linear infinite;
    animation-delay:calc(var(--j) * -.13s);
  }
  @keyframes rw-rabbit{0%{opacity:1}22%,100%{opacity:.28}}

  body.night .skydeck .rw-windows rect{
    opacity:.62;animation:rw-win 9s ease-in-out infinite;
    animation-delay:calc(var(--w) * -1.1s);
  }
  @keyframes rw-win{0%,100%{opacity:.34}50%{opacity:.78}}

  body.night .skydeck .rw-beacon .bc{filter:drop-shadow(0 0 9px currentColor)}
  body.night .skydeck .rw-beacon .bc-g{animation:rw-bcn 4s linear infinite}
  body.night .skydeck .rw-beacon .bc-w{animation:rw-bcn 4s linear infinite;
    animation-delay:2s}
  @keyframes rw-bcn{0%{opacity:0}4%{opacity:.95}14%{opacity:0}100%{opacity:0}}

  /* the climb: one long, slow rotation away from the threshold */
  .skydeck .rw-flight{animation:rw-climb 38s ease-in-out infinite}
  @keyframes rw-climb{
    0%   {transform:translate3d(-14%, 12%, 0) scale(.7);opacity:0}
    14%  {opacity:1}
    86%  {opacity:1}
    100% {transform:translate3d(12%, -18%, 0) scale(1.1);opacity:0}
  }

  /* One on final: descends along the approach path toward the threshold and
     is gone behind the near edge. Offset from the climb so the two are never
     doing the same thing at the same moment.

     The scaleY(-1) is load-bearing. This aircraft flies right to left, and
     the rotate near 180deg turns it to face that way -- but a half turn
     mirrors both axes, so it also rolled the thing onto its back and flew
     the whole approach inverted. Flipping Y again cancels that half and
     keeps the heading and the nose-down tilt exactly as they were. */
  .skydeck .rw-approach{fill:#0b1626;opacity:.3;
    animation:rw-final 46s cubic-bezier(.4,0,.75,.6) infinite}
  body.night .skydeck .rw-approach{opacity:.8}
  @keyframes rw-final{
    0%   {transform:translate(1330px,140px) scaleY(-1) rotate(184deg) scale(.42);opacity:0}
    8%   {opacity:1}
    72%  {opacity:1}
    82%  {transform:translate(830px,438px) scaleY(-1) rotate(179deg) scale(1);opacity:0}
    100% {transform:translate(830px,438px) scaleY(-1) rotate(179deg) scale(1);opacity:0}
  }
  .skydeck .rw-approach .landinglight{fill:var(--sun-col);opacity:.9;
    animation:rw-strobe 1.1s steps(1,end) infinite}
  .skydeck .strobe{fill:#fff;opacity:0;animation:rw-strobe 1.4s steps(1,end) infinite}
  @keyframes rw-strobe{0%{opacity:1}6%{opacity:.1}12%{opacity:1}18%,100%{opacity:.1}}

  /* And one crawling the taxiway at walking pace, right to left. Nothing at
     an airport moves at one speed, and that is most of why a still runway
     looks like a drawing and this does not. */
  .skydeck .rw-taxiing{fill:#0b1626;opacity:.26;
    animation:rw-taxi 62s linear infinite}
  body.night .skydeck .rw-taxiing{opacity:.7}
  @keyframes rw-taxi{
    0%   {transform:translate(1290px,742px) scale(1.05)}
    100% {transform:translate(-190px,742px) scale(1.05)}
  }

  @media (prefers-reduced-motion:reduce){
    .skydeck .rw-flight,.skydeck .rw-approach,.skydeck .rw-taxiing,
    .skydeck .rw-sock .sock-bag,.skydeck .strobe,
    .skydeck .cl-hi,.skydeck .cl-mid,.skydeck .cl-low,
    .skydeck .rw-trails .tr,.skydeck .gl-apron,.skydeck .gl-city,
    .skydeck .rw-approach .landinglight{animation:none}
    .skydeck .rw-trails .tr{stroke-dasharray:none;opacity:.24}
    .skydeck .rw-approach{transform:translate(1080px,300px) scaleY(-1) rotate(181deg) scale(.7)}
    .skydeck .rw-taxiing{transform:translate(560px,742px) scale(1.05)}
    .skydeck .strobe{opacity:.8}
    body.night .skydeck .rw-lights circle,
    body.night .skydeck .rw-blue circle,
    body.night .skydeck .rw-als circle,
    body.night .skydeck .rw-windows rect,
    body.night .skydeck .rw-beacon .bc{animation:none;opacity:.8}
  }

  /* Only the active screen is in the document at all. Without this the gate,
     the sign-in form, check-in and the whole signed-in app stack down the
     page and anyone can scroll straight into them. */
  .screen{display:none}
  .screen.on{display:block}
  .screen,.sheet{position:relative;z-index:1}

  .shell{width:min(100% - 2rem,1220px);margin-inline:auto}
  .mono{font-family:var(--mono)}
  .label{font-family:var(--mono);font-size:.7rem;font-weight:600;
         letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2)}
  .none{color:var(--dim);padding:1.25rem 0;font-size:.92rem}

  .sec{padding:3rem 0;border-top:1px solid var(--line)}
  .sec-h{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:baseline;margin-bottom:1.5rem}
  .sec-h h2{font-family:var(--display);font-weight:900;margin:0;
    font-size:clamp(1.5rem,3.6vw,2.3rem);letter-spacing:-.02em;line-height:1}
  .sec-h p{margin:0;color:var(--dim);flex:1 1 18rem;max-width:34rem;font-size:.92rem}

  /* --------------------------------------------------------------- rail */
  .rail{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.9rem 0;
    border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;
    background:rgba(255,255,255,.9);backdrop-filter:blur(10px)}
  .mark{font-family:var(--display);font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase}
  .mark b{color:var(--amber)}
  .live{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);
    font-size:.62rem;letter-spacing:.2em;color:var(--dim)}
  .live i{width:7px;height:7px;border-radius:50%;background:var(--amber);
    animation:pulse 2s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.25}}
  .find{margin-left:auto;display:flex;align-items:center;gap:.55rem;flex:1 1 15rem;max-width:23rem}
  /* Filters that sit above their own list line up with it, rather than
     floating off to the right of a full-width column. */
  .find-wide{margin-left:0;max-width:none}
  .find input{flex:1;min-width:0;background:#fff;color:var(--ink);border:1px solid var(--line-2);
    border-radius:99px;font-family:var(--mono);font-size:.78rem;padding:.55rem .85rem;outline:0}
  .find input:focus{border-color:var(--amber)}
  .hits{font-family:var(--mono);font-size:.64rem;color:var(--amber);white-space:nowrap}

  .hero{padding:2.5rem 0 1.5rem;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end}
  h1{font-family:var(--display);font-weight:900;margin:0;
    font-size:clamp(2.1rem,6vw,4rem);line-height:.95;letter-spacing:-.025em}
  h1 em{font-style:normal;color:var(--amber)}
  .hero p{margin:0;color:var(--dim);max-width:32rem;flex:1 1 20rem}

  /* ------------------------------------------------------------ buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
    padding:.65rem 1rem;border-radius:3px;cursor:pointer;font-weight:600;
    background:var(--amber);color:#241c10;border:1px solid var(--amber)}
  .btn:hover{background:#efa020;border-color:#efa020}
  .btn.ghost{background:transparent;color:var(--amber)}
  .btn.ghost:hover{background:rgba(217,135,4,.1)}
  .flowbtns{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.25rem}

  /* min-width:0 is doing real work here. A grid item defaults to
     min-width:auto, so a 1fr track cannot shrink below its content's
     min-content width -- and a text input's min-content width is its `size`
     attribute, about twenty characters. Two of those in a 1fr 1fr grid blow
     straight through the card: the second column was overhanging the right
     edge by a couple of hundred pixels, which is what pushed COUNTRY and
     DATE out of line with CITY and CODE. */
  .form-row{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.8rem;
    min-width:0}
  .form-row k{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--dim-2)}
  .form-row input,.form-row select{background:#fff;color:var(--ink);
    border:1px solid var(--line-2);border-radius:3px;
    font-family:var(--mono);font-size:.85rem;padding:.6rem .7rem;outline:0;
    width:100%;min-width:0;
    /* A date input carries an inner field container that a text input does
       not, so left alone it renders a few pixels taller than its neighbour.
       Pinning the line box makes every control the same height whatever it
       holds. */
    line-height:1.25;height:2.55rem}
  .form-row input[type=date]{-webkit-appearance:none;appearance:none}
  .form-row input:focus,.form-row select:focus{border-color:var(--amber)}
  .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}

  /* ------------------------------------------------- what is compulsory
     Check-in refused to go on without a name, a PIN and the age
     confirmation, but said so only after the button was pressed and the
     page had jumped back a stage. The form now says which three they are
     before anybody types, in the label rather than as a bare asterisk
     floating next to it -- an asterisk is a convention you have to already
     know, and this is the first form a traveller ever sees here. */
  .form-row k .req{color:var(--accent-3);letter-spacing:.14em;margin-left:.4em;
    display:inline-block}   /* wraps as one tag on a narrow column, not past it */
  .form-row.need input{border-color:var(--accent-3);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-3) 14%, transparent)}
  .form-row .why{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;
    color:var(--accent-3);min-height:.85rem}
  .agebox.need{outline:2px solid var(--accent-3);outline-offset:6px;
    border-radius:4px}
  /* Taken out of the layout rather than display:none, because a script
     that skips hidden inputs would skip the trap as well. */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  .shot{display:flex;align-items:center;justify-content:center;gap:.6rem;
    width:100%;min-height:5.2rem;background:#fff;border:1px dashed var(--line-2);
    border-radius:4px;color:var(--dim);font:inherit;font-size:.86rem;
    cursor:pointer;overflow:hidden;padding:.5rem}
  .shot:hover{border-color:var(--amber);color:var(--ink)}
  .shot img{width:56px;height:71px;object-fit:cover;border-radius:2px;
    border:1px solid var(--line-2);flex:0 0 auto}
  .form-row.need .shot{border-color:var(--accent-3);border-style:solid}

  .card{background:var(--card);border:1px solid var(--line);border-radius:5px;
    padding:1rem 1.1rem;box-shadow:0 2px 10px rgba(18,40,63,.06)}
  .stat-row{display:flex;justify-content:space-between;align-items:baseline;
    padding:.4rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
  .stat-row:last-child{border-bottom:0}
  .stat-row b{font-family:var(--mono);font-size:1rem;color:var(--amber)}

  /* ---------------------------------------------------------- the gate */
  .gate{min-height:88vh;display:flex;flex-direction:column;justify-content:center;padding:3rem 0}
  .gate h1{margin-bottom:1rem}
  .gate .strap{color:var(--dim);max-width:34rem;font-size:1.02rem}
  /* --------------------------------------------- what it does, in three lines
     The gate used to open on "Nobody signs up. You get issued.", which
     describes how you join rather than what you get -- so a first-time
     visitor had to infer the product from the passport furniture around it.
     This says it plainly, above the fold, before any of the metaphor. */
  .hiw{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.7rem;
    max-width:34rem;counter-reset:hiw}
  .hiw li{display:grid;grid-template-columns:1.7rem 1fr;gap:.75rem;
    align-items:start;row-gap:.1rem;counter-increment:hiw}
  .hiw li::before{content:counter(hiw);grid-row:span 2;font-size:.8rem;
    color:var(--amber);padding-top:.25rem}
  .hiw b{grid-column:2;display:block;font-size:.98rem}
  .hiw > li > span{grid-column:2;font-size:.86rem;color:var(--dim);
    line-height:1.55}
  #screen-gate .label{color:var(--dim)}
  .doors{display:grid;gap:1rem;margin-top:2.5rem}
  @media (min-width:44rem){ .doors{grid-template-columns:1fr 1fr} }
  /* ------------------------------------------------------ the information desk */
  .desk{margin-top:3.5rem;border-radius:12px;overflow:hidden;
    background:var(--card);border:1px solid var(--line);
    box-shadow:0 14px 40px rgba(18,40,63,.10)}
  .desk-tabs{display:flex;flex-wrap:wrap;gap:0;
    border-bottom:1px solid var(--line);background:var(--sunk)}
  .desk-tab{
    flex:1 1 auto;min-width:9rem;padding:.9rem 1rem;border:0;cursor:pointer;
    background:transparent;color:var(--dim);font:inherit;text-align:left;
    border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
  }
  .desk-tab b{display:block;font-size:.95rem;color:inherit}
  .desk-tab span{display:block;font-family:var(--mono);font-size:.5rem;
    letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin-bottom:.15rem}
  .desk-tab:hover{color:var(--ink)}
  .desk-tab.on{color:var(--ink);border-bottom-color:var(--accent);
    background:var(--card)}
  .desk-tab.on b{background:var(--glow);-webkit-background-clip:text;
    background-clip:text;-webkit-text-fill-color:transparent}

  .desk-body{padding:1.6rem 1.5rem 1.8rem}
  .desk-body h2{font-family:var(--display);font-size:1.5rem;letter-spacing:-.02em;
    margin:0 0 .4rem}
  .desk-lede{font-size:1rem;color:var(--dim);margin:0 0 1.4rem;max-width:44rem}
  /* the line under the porthole, explaining that the view is not a picture */
  .nbadge{position:absolute;top:-.35rem;right:-.4rem;min-width:1.15rem;height:1.15rem;
    padding:0 .28rem;border-radius:999px;background:var(--accent-3);color:#fff;
    font-family:var(--mono);font-size:.58rem;line-height:1.15rem;text-align:center;
    font-weight:700}
  .nrow{display:grid;grid-template-columns:2rem 1fr auto;gap:.65rem;align-items:center;
    padding:.6rem 0;border-top:1px solid var(--line)}
  .nrow:first-child{border-top:0}
  .nrow b{display:block;font-size:.92rem}
  .nrow span{display:block;font-family:var(--mono);font-size:.55rem;
    letter-spacing:.12em;color:var(--dim-2)}
  .nrow .mini{white-space:nowrap}
  .wnote{background:var(--card);border:1px solid var(--line);border-radius:9px;
    padding:.85rem 1rem;margin-bottom:.6rem;position:relative}
  .wnote k{display:block;font-family:var(--mono);font-size:.5rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--accent);margin-bottom:.2rem}
  .wnote.alert k{color:var(--coral)}
  .wnote b{display:block;font-size:1rem;margin-bottom:.25rem}
  .wnote p{margin:0;font-size:.92rem;color:var(--dim);line-height:1.55}
  .wnote a{color:var(--accent);text-decoration:none;font-weight:600;
    border-bottom:1px solid currentColor}
  .wnote .wwhen{font-family:var(--mono);font-size:.52rem;letter-spacing:.12em;
    color:var(--dim-2);margin-top:.45rem;display:block}
  .wnote .wdel{position:absolute;top:.6rem;right:.7rem;font-family:var(--mono);
    font-size:.52rem;letter-spacing:.1em;background:none;border:0;cursor:pointer;
    color:var(--dim-2)}
  .wr-box{background:var(--sunk);border:1px dashed var(--line-3);border-radius:9px;
    padding:.9rem 1rem;margin-top:.4rem}
  .bulk{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.8rem}
  .bulk-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
  .bulk-row{display:grid;grid-template-columns:1.6rem 1fr auto;gap:.6rem;
    align-items:center;padding:.45rem 0;border-top:1px solid var(--line)}
  .bulk-row:first-child{border-top:0}
  .bulk-row input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--accent)}
  .bulk-row b{display:block;font-size:.9rem}
  .bulk-row span{display:block;font-family:var(--mono);font-size:.55rem;
    letter-spacing:.12em;color:var(--dim-2)}
  .bulk-row i{font-style:normal;font-family:var(--mono);font-size:.6rem;
    color:var(--dim-2);white-space:nowrap}
  .bulk-skip{margin:.5rem 0 0;font-size:.78rem;color:var(--dim-2)}
  .movebar{height:6px;border-radius:3px;background:var(--sunk);
    border:1px solid var(--line-2);overflow:hidden;margin-top:.7rem}
  .movebar i{display:block;height:100%;width:0;background:var(--glow);
    transition:width .3s ease}
  .agebox{display:flex;gap:.6rem;align-items:flex-start;margin:1rem 0 .2rem;
    max-width:34rem;cursor:pointer}
  .agebox input{margin-top:.25rem;width:1.05rem;height:1.05rem;flex:none;
    accent-color:var(--accent)}
  .agebox span{font-size:.85rem;color:var(--dim);line-height:1.5}

  .pane-note{margin:.7rem .2rem 0;font-size:.78rem;line-height:1.55;
    color:var(--dim-2);max-width:26rem}
  .desk-body h3{font-size:.95rem;margin:1.6rem 0 .5rem}
  /* a recovery code is meant to be copied onto paper, so it is set large,
     monospaced and spaced out rather than tucked into a sentence */
  .set-sec.danger{border-left:2px solid var(--coral);padding-left:.9rem}
  .btn.ghost.danger{border-color:var(--coral);color:var(--coral)}
  .nlist{display:grid;gap:.6rem;margin-top:.7rem}
  .nnote{background:var(--sunk);border:1px solid var(--line-2);border-radius:8px;
    padding:.7rem .85rem}
  .nnote p{margin:.3rem 0 .5rem;font-size:.9rem;color:var(--ink)}
  .nnote .nwho{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--dim-2)}
  .nnote .nacts{display:flex;gap:.5rem}
  .nnote .nacts button{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;
    padding:.3rem .6rem;border-radius:4px;border:1px solid var(--line-2);
    background:var(--card);color:var(--dim);cursor:pointer}
  .nnote .nacts button.yes{border-color:var(--accent);color:var(--accent)}
  .nlive{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;
    color:var(--accent)}
  .reccode{margin:.8rem 0 0;padding:.85rem 1rem;border-radius:8px;
    background:var(--sunk);border:1px solid var(--line-2)}
  .reccode b{display:block;font-family:var(--mono);font-size:1.15rem;
    letter-spacing:.14em;color:var(--ink);margin:.25rem 0 .45rem;
    user-select:all;word-break:break-all}
  .reccode p{margin:0;font-size:.8rem;color:var(--dim);line-height:1.5}
  .desk-cta{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
    margin:1.3rem 0 .4rem}
  .desk-dm{text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
  /* the Instagram glyph, drawn rather than fetched: the page ships no
     third-party assets and a strict CSP would block them anyway */
  .desk-dm::before{content:"";width:15px;height:15px;border:2px solid currentColor;
    border-radius:5px;position:relative;flex:none;
    box-shadow:inset 0 0 0 1px transparent}
  .desk-handle{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
    color:var(--dim-2)}

  .desk-grid{display:grid;gap:.9rem}
  @media (min-width:44rem){ .desk-grid{grid-template-columns:1fr 1fr} }
  .desk-item{background:var(--sunk);border:1px solid var(--line);
    border-radius:8px;padding:.95rem 1.05rem}
  .desk-item k{display:block;font-family:var(--mono);font-size:.5rem;font-weight:700;
    letter-spacing:.2em;color:var(--accent);margin-bottom:.3rem}
  .desk-item b{display:block;font-size:.98rem;margin-bottom:.25rem}
  .desk-item p{margin:0;font-size:.88rem;color:var(--dim);line-height:1.6}

  /* the steps, numbered like a boarding sequence */
  .desk-steps{counter-reset:step;display:grid;gap:.75rem}
  .desk-step{display:grid;grid-template-columns:2.2rem 1fr;gap:.9rem;
    align-items:start}
  .desk-step::before{
    counter-increment:step;content:"0" counter(step);
    font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.1em;
    color:#fff;background:var(--glow-ink);border-radius:5px;
    padding:.35rem 0;text-align:center;
  }
  .desk-step b{display:block;font-size:.98rem}
  .desk-step p{margin:.15rem 0 0;font-size:.88rem;color:var(--dim);line-height:1.6}

  /* questions, as a real disclosure list */
  .desk-q{border-top:1px solid var(--line)}
  .desk-q:first-of-type{border-top:0}
  .desk-q summary{
    cursor:pointer;padding:.9rem 0;font-size:.98rem;font-weight:650;
    list-style:none;display:flex;gap:.75rem;align-items:baseline;
  }
  .desk-q summary::-webkit-details-marker{display:none}
  .desk-q summary::before{
    content:"+";font-family:var(--mono);color:var(--accent);font-weight:700;
    transition:transform .15s;display:inline-block;
  }
  .desk-q[open] summary::before{content:"\2212"}
  .desk-q p{margin:0 0 1rem 1.5rem;font-size:.9rem;color:var(--dim);
    line-height:1.7;max-width:44rem}

  /* ----------------------------------------------------- the search proof
     The product's whole claim, demonstrated rather than asserted. Small,
     live, and typeable -- a visitor can put their own word in it. */
  .proof{margin-top:1.6rem;max-width:34rem;background:var(--card);
    border:1px solid var(--line);border-radius:10px;overflow:hidden;
    box-shadow:0 12px 32px rgba(18,40,63,.10)}
  .pf-bar{display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;
    border-bottom:1px solid var(--line);background:var(--sunk)}
  .pf-ic{width:14px;height:14px;border:2px solid var(--dim-2);border-radius:50%;
    position:relative;flex:0 0 auto}
  .pf-ic::after{content:"";position:absolute;right:-5px;bottom:-3px;width:7px;
    height:2px;background:var(--dim-2);transform:rotate(45deg)}
  .pf-bar input{flex:1;border:0;background:transparent;font:inherit;
    font-size:.95rem;color:var(--ink);outline:none;min-width:0}
  /* The outline above is cancelled so the bar draws its own frame, but the
     global focus rule is a :where() and carries no specificity, so this
     input was the one control on the page a keyboard could reach without
     seeing where it had landed. */
  .pf-bar input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .pf-hits{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;
    color:var(--dim-2);white-space:nowrap}

  /* A fixed height, not a minimum. The demo cycles through queries that
     return between one and four rows, so a min-height let the box swing 149px
     as it typed -- the whole hero jumping every few seconds. The height fits
     the tallest state it can produce; anything longer scrolls inside itself
     rather than pushing the page around, so the layout never moves. */
  .pf-out{height:19.5rem;overflow-y:auto;overscroll-behavior:contain}
  .pf-row{display:grid;grid-template-columns:3.4rem 1fr auto;gap:.7rem;
    align-items:center;padding:.55rem .85rem;border-top:1px solid var(--line);
    animation:pf-in .28s ease-out both}
  .pf-row:first-child{border-top:0}
  @keyframes pf-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .pf-date{font-family:var(--mono);font-size:.58rem;letter-spacing:.04em;
    color:var(--dim-2);font-variant-numeric:tabular-nums}
  .pf-row b{display:block;font-size:.88rem;font-weight:600}
  .pf-row .pf-where{display:block;font-family:var(--mono);font-size:.5rem;
    letter-spacing:.16em;color:var(--dim-2);margin-top:.1rem}
  .pf-row mark{background:rgba(124,92,255,.24);color:inherit;border-radius:2px;
    padding:0 .12em}
  .pf-kind{font-family:var(--mono);font-size:.46rem;font-weight:700;
    letter-spacing:.14em;padding:.16rem .34rem;border-radius:3px;
    background:var(--sunk);color:var(--dim-2)}
  .pf-note{margin:0;padding:.6rem .85rem .7rem;font-size:.76rem;color:var(--dim-2);
    border-top:1px solid var(--line)}
  .pf-caret{display:inline-block;width:1px;height:1em;background:var(--accent);
    margin-left:1px;vertical-align:-2px;animation:pf-blink 1s steps(2) infinite}
  @keyframes pf-blink{to{opacity:0}}
  @media (prefers-reduced-motion:reduce){ .pf-row{animation:none} }

  /* the way in, above the fold */
  .hero-go{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1.5rem 0 0}
  .hero-go .btn{font-size:.74rem;padding:.8rem 1.3rem}
  .hero-go-n{flex-basis:100%;font-family:var(--mono);font-size:.56rem;
    letter-spacing:.12em;text-transform:uppercase;color:var(--dim-2);margin-top:.15rem}
  @media (max-width:30rem){
    .hero-go .btn{flex:1 1 100%;justify-content:center}
  }

  /* ------------------------------------------------- the claims in the hero */
  /* This block sits straight on the sky with no card under it, and the sky
     here is the lit end of a runway -- the brightest thing on the page. The
     hero column above already carries its own weather; this one had none, so
     three paragraphs of body copy were reading off wet tarmac.

     Same device as the hero: a pool of page colour blurred well past the type,
     which reads as haze rather than as a panel dropped on the scene. */
  .claims{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.65rem;
    max-width:34rem;position:relative;isolation:isolate}
  .claims::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    inset:-1.8rem -3rem;
    background:radial-gradient(105% 92% at 34% 50%,
      var(--scrim-1) 0%, var(--scrim-1) 52%, var(--scrim-2) 74%, transparent 100%);
    filter:blur(16px);
  }
  .claim{display:grid;grid-template-columns:2rem 1fr;gap:.75rem;
    align-items:start;row-gap:.1rem}
  .claim b{display:block;font-size:.98rem;grid-column:2}
  .claim > span:last-child{grid-column:2;font-size:.86rem;color:var(--dim);
    line-height:1.55}
  .cl-ic{grid-row:span 2;width:2rem;height:2rem;border-radius:7px;position:relative;
    background:var(--sunk);border:1px solid var(--line)}

  /* the offline one gets the signal-off mark and the accent, because it is
     the claim doing the work */
  .claim.on-air .cl-ic{background:var(--glow);border-color:transparent}
  .cl-ic::before,.cl-ic::after{content:"";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%)}
  .claim.on-air .cl-ic::before{
    width:13px;height:9px;border:2px solid #fff;border-bottom:0;
    border-radius:11px 11px 0 0;margin-top:-3px;
  }
  .claim.on-air .cl-ic::after{
    width:15px;height:2px;background:#fff;transform:translate(-50%,-50%) rotate(-42deg);
  }
  .ic-find::before{width:10px;height:10px;border:2px solid var(--dim-2);
    border-radius:50%;margin:-2px 0 0 -2px}
  .ic-find::after{width:7px;height:2px;background:var(--dim-2);
    transform:translate(-50%,-50%) rotate(45deg);margin:5px 0 0 5px}
  .ic-own::before{width:11px;height:2px;background:var(--dim-2);margin-top:5px}
  .ic-own::after{width:2px;height:11px;background:var(--dim-2);
    box-shadow:-3px -3px 0 -0.5px var(--dim-2),3px -3px 0 -0.5px var(--dim-2);
    margin-top:-2px}
  /* a message bubble with a tail, for the support claim */
  .ic-dm::before{width:14px;height:11px;border:2px solid var(--dim-2);
    border-radius:4px;margin-top:-2px}
  .ic-dm::after{width:0;height:0;border:3px solid transparent;
    border-top-color:var(--dim-2);border-right-color:var(--dim-2);
    margin:5px 0 0 -3px}
  /* three bars of equal length: a list with nothing promoted above anything
     else, which is the claim the card is making */
  .ic-flat::before{width:13px;height:2px;background:var(--dim-2);
    box-shadow:0 -5px 0 var(--dim-2),0 5px 0 var(--dim-2)}
  .ic-flat::after{display:none}

  /* ----------------------------------------------------- the two doors
     Both ways in are boarding passes, in the same fare stock as the one
     you are issued at the end of check-in. The stub is a real column with
     a perforation between: two half-circle notches punched out of the
     background, and a dashed rule down the middle. On hover the stub tears
     away a few pixels and the pass lifts, which is the whole invitation. */
  .door{
    position:relative;display:block;
    background:var(--fare);color:#1a1712;border:0;border-radius:8px;
    padding:0;text-align:left;cursor:pointer;font:inherit;overflow:hidden;
    box-shadow:0 10px 30px rgba(18,40,63,.16);
    transition:transform .22s cubic-bezier(.3,1,.4,1), box-shadow .22s;
  }
  .door:hover,.door:focus-visible{
    transform:translateY(-4px);
    box-shadow:0 18px 44px rgba(18,40,63,.24);
  }
  .door:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
  .door:active{transform:translateY(-1px)}

  /* The grid lives on an inner wrapper rather than on the <button> itself:
     Safari has a long history of ignoring display:grid on button elements,
     and a plain block button with a grid inside sidesteps it entirely. */
  .dr-wrap{display:grid;grid-template-columns:minmax(0,1fr) var(--stub,4.6rem);
    border-radius:8px;overflow:hidden}
  .dr-main{padding:1.15rem 1.25rem;display:flex;flex-direction:column;gap:.7rem}
  .dr-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
  .dr-tag{font-family:var(--mono);font-size:.58rem;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;color:rgba(26,23,18,.62)}
  .dr-seq{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
    color:rgba(26,23,18,.7)}

  .dr-route{display:flex;align-items:center;gap:.6rem}
  .dr-route b{font-family:var(--display);font-size:1.75rem;letter-spacing:-.02em;
    line-height:1}
  /* the little aircraft walks the arc on hover */
  .dr-arc{flex:1 1 auto;position:relative;height:1rem;min-width:3rem}
  .dr-arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .dr-arc path{fill:none;stroke:rgba(26,23,18,.35);stroke-width:1.5;
    stroke-dasharray:4 5}
  .dr-arc .pl{fill:#1a1712;transform-box:fill-box;transform-origin:center}
  .door:hover .dr-arc .pl{animation:dr-fly 1.5s ease-in-out}
  @keyframes dr-fly{
    0%{offset-distance:0%}
    100%{offset-distance:100%}
  }

  .dr-title{font-family:var(--display);font-size:1.45rem;letter-spacing:-.02em;
    margin:0;line-height:1.1}
  .dr-copy{color:rgba(26,23,18,.72);font-size:.9rem;margin:0}

  .dr-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;
    padding-top:.15rem}
  .dr-fields k{display:block;font-family:var(--mono);font-size:.5rem;
    letter-spacing:.16em;text-transform:uppercase;color:rgba(26,23,18,.75)}
  .dr-fields v{display:block;font-family:var(--mono);font-size:.76rem;
    font-weight:600;letter-spacing:.02em}

  .dr-go{display:inline-flex;align-items:center;gap:.45rem;
    font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.18em;
    color:#8a5300;margin-top:.15rem}
  .dr-go i{font-style:normal;transition:transform .22s}
  .door:hover .dr-go i{transform:translateX(5px)}

  /* the stub, and the perforation it tears along */
  .dr-stub{
    position:relative;display:flex;align-items:center;justify-content:center;
    background:rgba(26,23,18,.045);
    transition:transform .22s cubic-bezier(.3,1,.4,1);
  }
  .door:hover .dr-stub{transform:translateX(4px)}
  .dr-stub::before{                       /* the perforation */
    content:"";position:absolute;left:0;top:.5rem;bottom:.5rem;
    border-left:2px dashed rgba(26,23,18,.3);
  }
  .dr-stub span{font-family:var(--mono);font-size:.56rem;font-weight:600;
    letter-spacing:.26em;writing-mode:vertical-rl;transform:rotate(180deg);
    color:rgba(26,23,18,.66)}
  /* Real notches, punched where the stub tears away. Two masks, each opaque
     everywhere except one circle; intersecting them leaves the pass solid
     apart from both holes, so the runway shows through rather than a disc of
     page colour sitting on top of it. */
  .dr-wrap{
    --stub:4.6rem;
    -webkit-mask-image:
      radial-gradient(circle 9px at calc(100% - var(--stub)) 0,
                      transparent 97%, #000 100%),
      radial-gradient(circle 9px at calc(100% - var(--stub)) 100%,
                      transparent 97%, #000 100%);
    mask-image:
      radial-gradient(circle 9px at calc(100% - var(--stub)) 0,
                      transparent 97%, #000 100%),
      radial-gradient(circle 9px at calc(100% - var(--stub)) 100%,
                      transparent 97%, #000 100%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }

  .dr-code{display:flex;gap:1.5px;height:26px;align-items:stretch;margin-top:.35rem}
  .dr-code i{display:block;background:#1a1712;opacity:.85}

  @media (max-width:34rem){
    /* minmax(0,1fr): at 1fr the ticket's min-content won, and on a 320px
       phone it pushed the stub 37px out of the pass, where it was cut off */
    .dr-wrap{--stub:3.2rem;grid-template-columns:minmax(0,1fr) 3.2rem}
    .dr-fields{grid-template-columns:repeat(2,1fr)}
    .dr-route b{font-size:1.45rem}
  }
  /* HOME, the arc and WORLD need about 250px at that size; a 320px phone
     has under 200 inside the pass */
  @media (max-width:380px){
    .dr-main{padding:1.15rem 1rem}
    .dr-route b{font-size:1.15rem}
    .dr-arc{min-width:1.5rem}
  }
  @media (prefers-reduced-motion:reduce){
    .door,.dr-stub,.dr-go i{transition:none}
    .door:hover,.door:focus-visible{transform:none}
    .door:hover .dr-stub{transform:none}
    .door:hover .dr-arc .pl{animation:none}
  }

  /* ---------------------------------------------------- boarding flow */
  .stagebar{display:flex;overflow-x:auto;margin:1.25rem 0 2rem;scrollbar-width:none}
  .stagebar::-webkit-scrollbar{display:none}
  /* `flex:1` is `flex:1 1 0%`, so each step was free to shrink to its
     7.5rem floor -- and "Bag drop - optional" is wider than that with
     white-space:nowrap holding it on one line. The label did not shrink with
     the box, it just spilled out of it and printed over "Security". The bar
     already hides its own scrollbar, so the intent was always to scroll
     rather than squeeze: never shrink a step below its own text, and let the
     row overflow into that scroll when five of them will not fit. */
  /* Five steps, five equal segments, at every width. The earlier rule sized
     each step to its own text, so "Bag drop - optional" made segment three
     40% wider than the rest and the bar misreported how far along you were.
     Sizing them equally used to overprint the next label because the text was
     held on one line; letting it wrap is what makes equal widths safe, and it
     is what the phone rule below this already did. */
  .stg{flex:1 1 0%;min-width:0;padding:.55rem .7rem;
    border-top:2px solid var(--line-2);
    font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--dim-2);white-space:normal;overflow-wrap:anywhere;hyphens:auto}
  .stg i{white-space:normal}
  .stg.done{border-top-color:var(--green);color:var(--green)}
  .stg.now{border-top-color:var(--amber);color:var(--amber)}
  .stg i{display:block;font-style:normal;font-size:.86rem;letter-spacing:0;
    text-transform:none;margin-top:.15rem;color:var(--ink)}
  .stg.now i{color:var(--amber)}

  .stage{display:none}
  .stage.on{display:grid;gap:1.5rem}
  @media (min-width:56rem){ .stage.on{grid-template-columns:1fr 21rem;align-items:start} }
  .stage h3{font-family:var(--display);font-size:1.4rem;margin:0 0 .35rem}
  .stage .lead{color:var(--dim);font-size:.92rem;margin-bottom:1rem}

  .seats{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.5rem}
  .seat{background:#fff;border:1px solid var(--line-2);border-radius:4px;padding:.65rem .75rem;
    cursor:pointer;color:var(--ink);font:inherit;text-align:left}
  .seat:hover{border-color:var(--amber)}
  .seat.on{border-color:var(--amber);background:rgba(217,135,4,.09)}
  .seat k{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;color:var(--amber)}
  .seat span{display:block;font-size:.84rem;color:var(--dim);margin-top:.1rem}

  .drop{border:2px dashed var(--line-3);border-radius:5px;padding:1.75rem 1.25rem;
    text-align:center;transition:border-color .15s,background .15s}
  .drop.hot{border-color:var(--amber);background:rgba(217,135,4,.07)}
  .drop b{display:block;font-family:var(--display);font-size:1.05rem;margin-bottom:.3rem}
  .drop p{margin:0 0 1rem;color:var(--dim);font-size:.86rem}
  .parse{font-family:var(--mono);font-size:.72rem;color:var(--green);margin-top:.9rem;min-height:1.4rem}
  .parse.err{color:var(--coral)}

  .tripcards{display:flex;flex-direction:column;gap:.55rem;max-height:24rem;overflow-y:auto;padding-right:.25rem}
  .tc{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:.8rem .9rem;
    display:grid;grid-template-columns:1fr auto;gap:.7rem;align-items:center;
    transition:opacity .25s,transform .25s,border-color .15s}
  .tc.gone{opacity:0;transform:translateX(40px)}
  .tc.kept{border-color:var(--green)}
  .tc b{font-family:var(--display);font-size:.98rem}
  .tc .m{font-family:var(--mono);font-size:.62rem;color:var(--dim-2);margin-top:.12rem}
  .tc input{background:#fff;border:1px solid var(--line-2);color:var(--ink);border-radius:3px;
    font-family:var(--mono);font-size:.78rem;padding:.3rem .45rem;width:100%}
  .mini{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;padding:.35rem .5rem;
    border-radius:3px;cursor:pointer;background:#fff;border:1px solid var(--line-2);color:var(--ink)}
  .mini.yes:hover{border-color:var(--green);color:var(--green)}
  .mini.no:hover{border-color:var(--coral);color:var(--coral)}

  .boardingpass{background:var(--fare);color:#1a1712;border-radius:5px;overflow:hidden;
    display:grid;grid-template-columns:minmax(0,1fr) auto;box-shadow:0 6px 24px rgba(18,40,63,.12)}
  .bp-main{padding:.9rem 1rem;display:flex;flex-direction:column;gap:.7rem}
  .bp-route{display:flex;align-items:center;gap:.7rem}
  .bp-route b{font-family:var(--display);font-size:1.5rem}
  .bp-route span{color:rgba(26,23,18,.72)}
  .bp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
  .bp-grid k{display:block;font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;
    text-transform:uppercase;color:rgba(26,23,18,.72)}
  .bp-grid v{display:block;font-family:var(--mono);font-size:.76rem;font-weight:600;
    overflow-wrap:anywhere}
  /* the pass is 1fr beside its stub; on a 320px phone its min-content pushed
     the stub 22px out past the card */
  @media (max-width:380px){
    .bp-main{padding:.9rem .8rem}
    .bp-route b{font-size:1.25rem}
    .bp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  .bp-stub{border-left:2px dashed rgba(26,23,18,.28);padding:.9rem .7rem;
    display:flex;align-items:center;justify-content:center}
  .bp-stub span{font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;
    writing-mode:vertical-rl;transform:rotate(180deg);color:rgba(26,23,18,.62)}
  .barcode{display:flex;gap:1px;height:30px;align-items:stretch;margin-top:.5rem}
  .barcode i{display:block;background:#1a1712}
  .print{animation:print .85s cubic-bezier(.3,1,.4,1)}
  @keyframes print{from{clip-path:inset(0 0 100% 0);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}

  .issued{border:2px solid var(--green);color:var(--green);border-radius:3px;padding:.7rem 1rem;
    font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
    text-align:center;-webkit-mask-image:var(--ink-mask);mask-image:var(--ink-mask);
    -webkit-mask-size:cover;mask-size:cover;transform:rotate(-3deg);opacity:0}
  .issued.on{animation:thud .5s cubic-bezier(.2,1.4,.4,1) forwards}
  @keyframes thud{0%{opacity:0;transform:rotate(-3deg) scale(2.4)}
    70%{opacity:1;transform:rotate(-3deg) scale(.94)}100%{opacity:1;transform:rotate(-3deg) scale(1)}}

  .scanner{position:relative;background:var(--card);border:1px solid var(--line);border-radius:7px;
    padding:1.5rem;overflow:hidden;box-shadow:0 6px 24px rgba(18,40,63,.09)}
  .scanner::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--amber);
    box-shadow:0 0 12px var(--amber);animation:scan 2.6s ease-in-out infinite}
  @keyframes scan{0%,100%{top:6%}50%{top:94%}}

  /* -------------------------------------------------------------- views */
  .view{display:none}
  .view.on{display:block}
  .view > .sec:first-child{border-top:0}
  .viewnav{position:sticky;top:55px;z-index:30;display:flex;gap:.25rem;overflow-x:auto;
    padding:.6rem 0;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);scrollbar-width:none}
  .viewnav::-webkit-scrollbar{display:none}
  .vt{display:flex;align-items:center;gap:.45rem;white-space:nowrap;padding:.5rem .85rem;
    border-radius:99px;border:1px solid transparent;font-size:.86rem;font-weight:650;
    color:var(--dim);cursor:pointer;background:transparent;font-family:inherit}
  .vt:hover{background:var(--sunk);color:var(--ink)}
  .vt.on{background:var(--ink);color:#fff}
  .vt .n{font-family:var(--mono);font-size:.62rem;opacity:.7}

  /* ============================================================ on a phone
     The first traveller to use this said the mobile site was cluttered and
     too much to handle, and the measurement agreed: the home page stood at
     7,221 pixels -- nearly nine screens -- for somebody with one stamp, and
     thirty-four of its controls were under forty pixels tall.

     Nothing is removed here that a traveller put there. What goes is the
     product talking about itself, what shrinks is the space between things,
     and what grows is anything a thumb has to hit. */
    /* ---------------------------------------------------------- the shelf
       A shut row is one line and reads as a heading, not as a collapsed
       thing waiting to be fixed. The whole point is that the page ends
       within a screen or two of the passport, so these stay quiet. */
    .shelf{ margin:1.6rem 0 0; border-top:1px solid var(--rule); }
    .shf{ border-bottom:1px solid var(--rule); }
    .shf > summary{
      display:flex; align-items:baseline; gap:.7rem; cursor:pointer;
      padding:.85rem .2rem; min-height:44px; box-sizing:border-box;
      list-style:none; user-select:none;
    }
    .shf > summary::-webkit-details-marker{ display:none; }
    .shf > summary::after{
      content:"\203A"; margin-left:auto; font-size:1.25rem; line-height:1;
      color:var(--dim); transform:rotate(90deg); transition:transform .18s ease;
    }
    .shf[open] > summary::after{ transform:rotate(-90deg); }
    .shf > summary:hover{ background:var(--tint); }
    .shf > summary:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
    .shf-t{ font-weight:600; letter-spacing:.01em; }
    .shf-s{ color:var(--dim); font-size:.82rem; }
    .shf-n{
      font-variant-numeric:tabular-nums; font-size:.78rem; color:var(--dim);
      border:1px solid var(--rule); border-radius:999px; padding:.05rem .45rem;
    }
    .shf-n:empty{ display:none; }
    .shf-n.zero{ opacity:.45; }
    /* the section keeps its own spacing, but not the gap it used to need
       when it was standing alone in the stack */
    .shf > :not(summary){ margin:0 0 1.1rem; }
    @media (prefers-reduced-motion:reduce){
      .shf > summary::after{ transition:none; }
    }


    /* The rail menu control is a phone-only thing; a wide window has room
       for the four buttons and shows them. */
    .rail-more{ display:none; }
    .rail-more b.nbadge{ position:absolute; top:-.3rem; right:-.3rem; }

    /* ------------------------------------------------- colour and contrast
       Measured rather than judged by eye: every ratio below was computed
       against the colour actually behind the text, which on this page is a
       photographic wallpaper under a rgba(10,12,27,.84) veil, and on the
       passport is its own light paper. The figures are the worst realistic
       case -- the veil at its thinnest over a bright patch of wallpaper --
       so anything clearing the line here clears it everywhere. */

    /* Initials sat on the six generated avatar colours in --dim-2: 2.23:1 at
       worst, a light lavender on a mid-tone circle. `.ava` already asked for
       white and lost to `.hm-row span`, which is one point more specific.
       White clears 4.5 on all six hues -- 4.57 is the lowest. */
    .hm-row .ava{ color:#fff; }

    /* The coral says "warning" and should, but at 3.87:1 on the card it was
       under the line. Same hue, lifted until it clears: 4.93:1. */
    body.night .wnote.alert k{ color:#e35a75; }

    /* Small caps at half opacity read as a shape rather than a word. These
       two are the column headings on the board and the passport's own small
       print, at 4.10:1 and 2.94:1. */
    body.night .ldtop{ color:rgba(233,240,250,.78); }

    /* --accent is 4.49:1 as text on the card -- under 4.5 by a hair. It is
       left alone, because it is a background elsewhere and lightening it
       would cost more than it gains; these two use it as text, so they get
       a tone that clears the line without moving the palette. */
    body.night .myurl-a,
    body.night .dirlink,
    body.night .hboard-all{ color:#b3a3ff; }

    /* The stamp form was built for the light theme and never followed it into
       the dark one: `.more` is a 45%-white panel and `.agn` a white button,
       both carrying the night palette's light text. Light on light, 1.6:1 and
       1.9:1, on the screen people use most. Rather than darken the text on a
       panel that is mid-grey either way -- where neither ink clears 4.5 -- the
       surfaces become dark, which is what the rest of night mode does. */
    /* `.follow` is `background:var(--ink); color:#fff` -- a solid button meant
       to be dark ink under white text. In night mode --ink is #eceeff, so the
       unfollowed state was white text on a white button: 1.15:1, invisible.
       The button keeps its shape; the text inverts with the surface.

       Only the solid state. `.follow.on` is transparent with dim text, and
       inverting that one too put dark ink on the dark canvas at 1:1 -- worse
       than what it replaced, and caught only because the sweep was re-run. */
    /* `.vt.vt-go` is declared after `.vt.on` at equal specificity, so the
       "Add a stamp" tab kept its accent colour when it became the active
       pill: purple lettering on the deepened sweep, 1.59:1. One point more
       specific, so the active state wins wherever it is declared. */
    .vt.vt-go.on{ color:#fff; }

    /* the ghost button's amber came to 4.49:1 on the card -- under by a
       rounding error, and still under */
    body.night .btn.ghost{ color:#d99a4e; }

    body.night .follow:not(.on){ color:#14172c; }

    body.night .more{ background:rgba(255,255,255,.06); }
    body.night .agn{
      background:rgba(255,255,255,.09); color:var(--ink);
      border-color:rgba(255,255,255,.2);
    }

  @media (max-width:40rem){
    /* Alerts, Share, Settings and Disembark wrapped onto two rows here and
       cost 88px before any of the traveller's own page. They fold behind the
       control; opening lays them out as a block under the bar rather than
       squeezing them back onto the line they did not fit on. */
    .rail-more{ display:inline-flex; align-items:center; justify-content:center;
                font-size:1.1rem; line-height:1; }
    .rail .nav:not(.rail-more){ display:none; }
    .rail.open .nav:not(.rail-more){ display:inline-flex; }
    .rail.open{ flex-wrap:wrap; }
    .rail.open .nav:not(.rail-more){
      flex:1 1 44%; justify-content:center; margin-top:.45rem;
    }

    /* the subtitle is the first thing to go on a phone: the title
       alone is the whole line */
    .shf-s{ display:none; }
    .shelf{ margin-top:1.1rem; }


    /* The header was the real complaint, not the content. Five stacked rows
       of chrome -- wordmark, a PASSPORT CONTROL badge, the search box, the
       clock and weather, four buttons, then the navigation -- took six
       hundred of the eight hundred pixels on screen before a traveller saw
       anything of their own.

       The badge and the weather strip are the two that say nothing anybody
       came for. They go on a phone, the rail closes up, and the buttons stop
       taking a line each. Nothing is removed that does anything. */
    .rail{gap:.55rem;padding:.6rem 0}
    .rail .live,.rail .rail-now{display:none}
    .rail .nav{padding-inline:.7rem;font-size:.72rem}
    .rail .find{flex:1 1 100%;order:5}

    /* Anything tappable gets a thumb-sized target. Forty-four pixels is the
       figure both platform guidelines land on, and the small controls here
       were mostly nav chips and inline buttons at twenty-eight. */
    .btn,.mini,.vt,.tab,a.nav,button.nav,.nav,[data-view],
    .agn,.ldtab,.seat,.sh-app,.gal-more{
      min-height:44px}
    .mini,.vt,.ldtab{display:inline-flex;align-items:center}

    /* The rhythm. Every section carried desktop spacing, and eight of them
       stacked is most of a screen of nothing. */
    #v-home .sec-h{margin-top:1.15rem!important}
    #v-home .sec-h h2{font-size:1.28rem;line-height:1.15}
    #v-home .sec-h p{font-size:.9rem}
    .home-grid{gap:1rem}
    .home-hero{padding-bottom:.4rem}
    .ahead,.scrap,.hsearch,.gal-sec{margin-block:1rem}

    /* The promise -- real photographs, no filters, nothing generated -- is
       an argument for signing up. It belongs on the gate, where somebody is
       deciding, not on the home page of a traveller who already did. */
    #screen-app .raw{display:none}

    /* The gallery's empty state was six hundred and eighty pixels of shaded
       windows saying there are no photographs yet. It can say that in less. */
    .gal-sec .gal-grid:empty,.gal-sec .hm-empty{min-height:0}
    .gal-sec .gal-item{max-height:38vh}

    /* Rewynd's own column is worth reading and is not the traveller's own
       book, so it opens on request rather than by default. */
    #hm-world .sec-h{margin-top:1rem!important}

    /* An empty section should not cost what a full one costs. A traveller
       with one stamp was being shown a heading, a paragraph explaining the
       feature, and an empty state, for every part of the product they had
       not used yet -- the gallery alone was six hundred and eighty pixels of
       saying there are no photographs. The explanation goes; the empty state
       stays, because that is the line that tells them what to do. */
    #v-home section:has(.hm-empty) .sec-h p,
    #v-home section:has(.gal-empty) .sec-h p{display:none}
    #v-home section:has(.hm-empty) .sec-h{margin-top:.9rem!important}
    #v-home section:has(.hm-empty) .sec-h h2{font-size:1.1rem}

    /* Two blocks on the home page are whole sections that already exist as
       their own views, reachable from the menu: the gallery is v-collection
       and the standings board is v-standings. On a desktop, showing a
       preview of each costs nothing. On a phone it costs nearly nine hundred
       pixels of scrolling to arrive at two things the traveller can already
       tap through to -- and the gallery's share of it was six hundred and
       eighty pixels of shaded windows explaining that no photographs have
       been added yet. They are one place each here. */
    #screen-app #v-home .gal-sec,
    #screen-app #v-home .hboard{display:none}
  }

  /* --------------------------------------------------------------- book */
  .deck{display:grid;gap:1.25rem}
  /* Two columns only when a second child exists. The stamps view renders one,
     so the 20rem track was reserved and left empty -- its cards stopped 340px
     short of the section header above them and the board below. */
  @media (min-width:64rem){
    .deck:has(> * + *){grid-template-columns:1fr 20rem;align-items:start}
  }
  /* A shallower perspective puts the vanishing point nearer the reader, so a
     turning page sweeps toward them instead of pivoting flat on the screen.
     This is most of what made the old turn read as a slide rather than paper. */
  .bookwrap{perspective:1500px;perspective-origin:38% 46%}
  .book{position:relative;aspect-ratio:5/6.2;max-height:76vh;margin-inline:auto;
    width:100%;max-width:34rem;transform-style:preserve-3d;cursor:pointer}

  /* the block of paper under the top sheet: a stack of edges at the fore-edge
     and a bound spine down the left, so the thing has a thickness */
  .book::before{content:"";position:absolute;top:6px;bottom:6px;right:-7px;width:9px;
    border-radius:0 4px 4px 0;pointer-events:none;z-index:0;
    background:repeating-linear-gradient(180deg,
      rgba(255,255,255,.85) 0 2px, rgba(180,196,210,.85) 2px 4px);
    box-shadow:0 16px 30px rgba(18,40,63,.22)}
  .book::after{content:"";position:absolute;top:-4px;bottom:-4px;left:-6px;width:12px;
    border-radius:5px 0 0 5px;pointer-events:none;z-index:0;
    background:linear-gradient(90deg,#060c17,#16263f 60%,#0d1727);
    box-shadow:inset -2px 0 6px rgba(0,0,0,.55)}

  .page{position:absolute;inset:0;border-radius:3px 9px 9px 3px;transform-origin:left center;
    backface-visibility:hidden;overflow:hidden;transform-style:preserve-3d;
    box-shadow:0 20px 50px rgba(18,40,63,.28), 0 2px 0 rgba(255,255,255,.5) inset;
    /* The turn is the slow part and the fade is the fast part, and the fade
       waits until the sheet is past upright -- a page that dims while it is
       still facing you looks like it is being deleted, not turned. */
    transition:transform .82s cubic-bezier(.2,.66,.24,1),
               opacity .22s linear .52s,
               box-shadow .82s ease;
    will-change:transform}
  .page.past{transform:rotateY(-174deg) translateZ(2px);opacity:0;pointer-events:none;
    box-shadow:0 34px 60px rgba(18,40,63,.4)}
  /* the gutter shadow where the sheet meets the spine */
  .page::after{content:"";position:absolute;left:0;top:0;bottom:0;width:34px;
    background:linear-gradient(90deg,rgba(0,0,0,.22),transparent);pointer-events:none;
    z-index:3}
  /* Light rolling off the sheet as it lifts. It is one element with one
     transition rather than a keyframed animation, so it stays exactly in step
     with the turn however long the transition is. */
  .turnshade{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;
    background:linear-gradient(100deg,rgba(8,15,28,.55) 0%,rgba(8,15,28,.16) 38%,
      rgba(255,255,255,.16) 68%,rgba(255,255,255,0) 100%);
    transition:opacity .82s ease}
  .page.past .turnshade{opacity:1}

  /* Tapping the sheet turns it, and these are the hint that says so. They are
     hints only -- pointer-events:none -- because a stamp is a tap target too
     and half the book laid over it would eat every one of them. The tap is
     handled by a delegated listener that steps aside for anything clickable,
     and #prev / #next below the book stay the keyboard and screen-reader
     route, which is why nothing here needs to be a button. */
  .book-half{position:absolute;top:0;bottom:0;width:50%;z-index:5;border:0;padding:0;
    background:transparent;pointer-events:none;opacity:0;transition:opacity .25s}
  .book-half.back{left:0}
  .book-half.fwd{right:0}
  .book:hover .book-half:not(:disabled){opacity:1}
  .book-half::before{content:"";position:absolute;top:50%;width:34px;height:34px;
    margin-top:-17px;border-radius:50%;background:rgba(8,15,28,.5);
    backdrop-filter:blur(2px);box-shadow:0 2px 10px rgba(0,0,0,.3)}
  .book-half::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-6px;
    border:6px solid transparent}
  .book-half.back::before{left:10px}
  .book-half.fwd::before{right:10px}
  .book-half.back::after{left:22px;border-right-color:#fff}
  .book-half.fwd::after{right:22px;border-left-color:#fff}
  .book-half.off{opacity:0 !important}
  @media (hover:none){ .book-half{opacity:.5} }

  @media (prefers-reduced-motion:reduce){
    .page{transition:opacity .2s}
    .page.past{transform:none}
    .turnshade{display:none}
  }
  body.no-motion .page{transition:opacity .2s}
  body.no-motion .page.past{transform:none}

  /* The cover is board, not paper: a deep single colour with the arms blocked
     in gold foil. Every heritage passport on earth is some version of this,
     which is why it reads as one instantly. */
  .cover{
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.06), transparent 58%),
      var(--gl-mono-gold) 0 0/150px 150px repeat,
      linear-gradient(168deg,#16263f 0%,#0e1a2e 52%,#080f1c 100%);
    color:#c9ab6a;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:1.15rem;padding:2.2rem;text-align:center}
  /* Still no position, for the third time on this page. .page is already
     absolute, so ::before anchors to it without help -- and re-declaring
     position at equal specificity drops the page out of the stack, which is
     how the cover ended up half-height with the data page showing under it. */
  /* the engraved frame: a heavy rule and a hairline, the way a die is cut */
  .cover::before{
    content:"";position:absolute;inset:14px;pointer-events:none;
    border:1.5px solid rgba(201,171,106,.42);border-radius:2px;
    box-shadow:inset 0 0 0 3px rgba(8,15,28,.9), inset 0 0 0 4px rgba(201,171,106,.22);
  }
  .cover .crest{
    width:104px;height:104px;border-radius:50%;position:relative;
    border:1.5px solid rgba(201,171,106,.5);
    display:flex;align-items:center;justify-content:center;
    background:var(--gl-crest) center/contain no-repeat,
               radial-gradient(circle at 50% 34%,rgba(201,171,106,.16),transparent 68%);
  }
  .cover .crest-mark,.cover .crest .brand.mark{
    width:62px;height:62px;object-fit:contain;display:block;
  }
  .cover h2{font-family:var(--display);font-weight:900;margin:0;
    font-size:clamp(1.5rem,5vw,2.2rem);letter-spacing:.2em;line-height:1.1;
    /* foil: a shadow below and a highlight above, which is what stamped
       metal does to light */
    color:#e2cd97;
    text-shadow:0 1px 0 rgba(8,15,28,.85), 0 -1px 0 rgba(255,240,200,.28);
  }
  .cover .sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.34em;
    color:rgba(201,171,106,.72)}
  .cover .chip-e{width:34px;height:26px;border-radius:3px;border:1px solid rgba(201,171,106,.5);
    background:repeating-linear-gradient(90deg,rgba(201,171,106,.35) 0 3px,transparent 3px 6px)}

  /* Diagonal stripes were standing in for security print. This is the real
     article: a watermark rosette in the middle of the sheet, then two
     guilloche lattices in different inks over it, then the paper. Each layer
     is nearly invisible; together they read as a printed document. */
  .data{
    background:
      var(--gl-mark) center 47%/34% no-repeat,
      var(--gl-mono-faint) 0 0/132px 132px repeat,
      var(--gl-rose) 0 0/96px 96px repeat,
      var(--gl-indigo) 0 0/84px 84px repeat,
      linear-gradient(160deg,#eef3f6,var(--passport));
    color:var(--passport-ink);padding:1.35rem 1.25rem;display:flex;flex-direction:column;gap:.9rem}
  /* No position here. .page is already absolute and re-declaring position at
     equal specificity drops this page out of the stack -- the visa page
     underneath showed through alongside it. The same warning is on .visa
     below; I wrote it there and then walked into it here. */
  .data .head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
    padding-bottom:.5rem;border-bottom:1.5px double rgba(22,32,42,.3)}
  .data .head .t{font-family:var(--display);font-size:.95rem;letter-spacing:.1em}
  .bio{display:grid;grid-template-columns:auto 1fr;gap:1rem}
  /* The portrait is a button now: empty it shows the silhouette every blank
     passport has, filled it shows the photograph. Same box either way, so
     the identity page does not reflow when one is added. */
  .portrait{width:104px;height:132px;border-radius:2px;overflow:hidden;position:relative;
    background:linear-gradient(170deg,#8fa8bd,#54708a);border:1px solid rgba(22,32,42,.28);
    padding:0;cursor:pointer;display:block;flex:0 0 auto}
  .portrait:not(.has)::before{content:"";position:absolute;left:50%;top:26%;width:44px;height:44px;
    border-radius:50%;background:rgba(22,32,42,.32);transform:translateX(-50%)}
  .portrait:not(.has)::after{content:"";position:absolute;left:50%;bottom:-14%;width:86px;height:72px;
    border-radius:50% 50% 0 0;background:rgba(22,32,42,.32);transform:translateX(-50%)}
  /* This used to carry filter:saturate(.82) contrast(1.06) to make a snapshot
     sit inside the document like a printed passport photo. It was the only
     filter in the product, and the product now promises there are none, so it
     is gone -- a promise with one exception is not a promise. */
  .portrait img{width:100%;height:100%;object-fit:cover;display:block}
  .portrait .ph-hint{position:absolute;inset:auto 0 6px;font-family:var(--mono);
    font-size:.46rem;letter-spacing:.16em;color:rgba(255,255,255,.9);
    text-align:center;line-height:1.4;z-index:2}
  .portrait:hover{outline:2px solid var(--amber);outline-offset:1px}
  .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem .9rem;align-self:start}
  .f k{display:block;font-family:var(--mono);font-size:.52rem;letter-spacing:.16em;
    text-transform:uppercase;color:rgba(22,32,42,.72)}
  .f v{display:block;font-family:var(--mono);font-size:.8rem;font-weight:600}
  .f.wide{grid-column:span 2}
  /* minmax(0,1fr) so the fields column is never wider than what is left
     beside the portrait; at 320px it was, and NATIONALITY and TRAVELLER ran
     off the edge of the page. Below 400px the portrait gives some room back. */
  .bio{grid-template-columns:auto minmax(0,1fr)}
  .f v{overflow-wrap:anywhere}
  @media (max-width:400px){
    .bio{gap:.75rem}
    .bio .portrait{width:84px;height:107px}
    .fields{gap:.5rem .6rem}
    .f k{letter-spacing:.06em;overflow-wrap:anywhere}
    .f v{font-size:.74rem}
  }
  .mrz{margin-top:auto;padding-top:.7rem;border-top:1px solid rgba(22,32,42,.2);
    font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;line-height:1.7;
    color:rgba(22,32,42,.78);word-break:break-all}

  /* The visa pages take the same paper at half strength -- they have to carry
     stamps, and a stamp needs somewhere quiet to land. */
  .visa{background:
    radial-gradient(circle at 22% 18%,rgba(255,255,255,.45),transparent 46%),
    var(--gl-mono) 0 0/132px 132px repeat,
    var(--gl-indigo) 0 0/84px 84px repeat,
    linear-gradient(150deg,#e6eef3,var(--passport));
    color:var(--passport-ink);padding:1.15rem;
    /* no position here on purpose: .page is already absolute and an equal
       specificity re-declaration would drop the page out of the stack */
  }
  /* Engraved, which means stroke and no fill: an intaglio press cuts lines,
     it does not lay down areas. Sits under the stamps and over the paper. */
  .wonder{
    position:absolute;left:8%;right:8%;bottom:14%;height:44%;
    pointer-events:none;z-index:0;opacity:.62;
    fill:none;stroke:rgba(22,32,42,.42);stroke-width:1.1;
    stroke-linecap:round;stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
  }
  .wonder .w-hatch{stroke:rgba(22,32,42,.2);stroke-width:.7}
  .wonder-cap{
    position:absolute;left:0;right:0;bottom:7.5%;z-index:0;text-align:center;
    font-family:var(--mono);font-size:.5rem;letter-spacing:.28em;
    color:rgba(22,32,42,.42);pointer-events:none;
  }
  .wonder-cap i{display:block;font-style:normal;font-size:.42rem;
    letter-spacing:.2em;color:rgba(22,32,42,.3);margin-top:.25rem}
  /* the stamps land on top of the engraving, never under it */
  .visa .field{z-index:1}
  .visa .pagemark{position:absolute;bottom:.7rem;right:1rem;font-family:var(--mono);
    font-size:.56rem;letter-spacing:.2em;color:rgba(22,32,42,.42)}
  .visa .pagetitle{font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;
    text-transform:uppercase;color:rgba(22,32,42,.45)}
  .field{position:absolute;inset:2.4rem 1rem 2rem}

  .stamp{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;
    -webkit-mask-image:var(--ink-mask);mask-image:var(--ink-mask);
    -webkit-mask-size:cover;mask-size:cover;transition:transform .18s,filter .18s,opacity .25s}
  .stamp:hover,.stamp:focus-visible{transform:scale(1.055) rotate(var(--rot)) !important;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.28));outline:0}
  .stamp.dim{opacity:.13}
  .stamp.fresh{animation:thud .55s cubic-bezier(.2,1.4,.4,1)}
  .st-box{border:2.5px solid currentColor;border-radius:3px;padding:.42rem .6rem;
    display:flex;flex-direction:column;gap:.1rem;align-items:center;min-width:112px;
    background:rgba(255,255,255,.06)}
  .st-round{border:2.5px solid currentColor;border-radius:50%;width:112px;height:112px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.08rem;
    background:rgba(255,255,255,.06)}
  .st-round::before{content:"";position:absolute;inset:7px;border:1px solid currentColor;
    border-radius:50%;opacity:.55}
  .st-top{font-family:var(--mono);font-size:.46rem;letter-spacing:.2em;text-transform:uppercase}
  .st-city{font-family:var(--display);font-size:.88rem;letter-spacing:.04em;line-height:1.05;
    max-width:100%;overflow-wrap:anywhere}
  /* A stamp is a fixed die. Long names shrink to fit it rather than running
     over the border -- which is what a real one does too. */
  .st-city.long{font-size:.68rem;letter-spacing:.02em}
  .st-city.xlong{font-size:.54rem;letter-spacing:0;line-height:1.12}
  .st-date{font-family:var(--mono);font-size:.52rem;letter-spacing:.12em}
  .st-code{font-family:var(--mono);font-size:.46rem;letter-spacing:.18em;opacity:.8}

  .flip{display:flex;gap:.5rem;align-items:center;justify-content:center;padding-top:1rem}
  .nav{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
    background:var(--card);color:var(--ink);border:1px solid var(--line-2);border-radius:3px;
    padding:.6rem 1rem;cursor:pointer}
  .nav:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
  .nav:disabled{opacity:.35;cursor:default}
  .pageno{font-family:var(--mono);font-size:.68rem;color:var(--dim);min-width:7rem;text-align:center}

  /* ------------------------------------------------------ split-flap */
  .board{background:var(--screen);border:1px solid var(--screen);border-radius:5px;padding:.9rem;
    overflow-x:auto;box-shadow:0 18px 40px rgba(18,40,63,.18)}
  .board table{border-collapse:collapse;width:100%;min-width:38rem}
  .board th{font-family:var(--mono);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;
    color:#a3b6c9;text-align:left;padding:.3rem .5rem .6rem;font-weight:400}
  .board td{padding:.28rem .5rem;vertical-align:middle}
  /* the arrivals rows use the same mechanical cells as the gate board,
     just smaller and rolling through a few characters before they settle */
  .flapset{display:flex;gap:2px;align-items:center}
  .flapset .fcard{--fd:.055s;font-size:.8rem}
  .fcard.sep{width:.45rem}
  .fcard.sep i{background:transparent;box-shadow:none;color:#a3b6c9}
  .fcard.sep::after{display:none}
  .st-pill{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;padding:.15rem .45rem;
    border-radius:2px;background:rgba(122,214,150,.16);color:#7ad696}
  .st-pill.next{background:rgba(255,176,32,.16);color:#ffb020}

  /* ------------------------------------------------- the personal home
     Every signed-in traveller lands here, and nothing on it is shared: the
     greeting, the counts, the last stamp, the overlaps and the feed are all
     computed from their own book. */
  /* This block used to sit fourth on the page, under a headline that did the
     shouting. It is first now, so it has to carry the top of the page on its
     own: the name at display size, the line under it kept quiet. */
  /* no padding-top: the shell already insets this by 48px, and stacking a
     second one just pushed the name down the screen */
  /* This was sized to lead the page. The passport leads it now, so the
     greeting steps back to being a salutation above the document -- still
     the traveller's name, at a size that does not compete with the book
     directly underneath it. */
  .home-hero{display:grid;gap:1rem 2.5rem;align-items:end;margin-bottom:1.5rem}
  @media (min-width:52rem){ .home-hero{grid-template-columns:1fr auto} }
  .home-hero h2{margin:.15rem 0 .35rem;font-family:var(--display);font-weight:900;
    font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.02;letter-spacing:-.022em}
  .home-hero .lead{margin:0;color:var(--dim);font-size:.94rem;
    line-height:1.5;max-width:34rem}
  .home-pass{
    font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
    background:var(--card);border:1px solid var(--line);border-radius:6px;
    padding:.75rem .9rem;min-width:13rem;
    box-shadow:0 10px 24px rgba(18,40,63,.10);
  }
  .home-pass b{display:block;font-size:.95rem;letter-spacing:.06em;margin-top:.2rem}
  .home-pass .r{display:flex;justify-content:space-between;gap:1rem;
    padding:.2rem 0;color:var(--dim-2)}
  .home-pass .r i{font-style:normal;color:var(--ink)}

  /* The status card is the thing an airline sends you in the post: your
     name, your number, the tier you have reached and how far off the next
     one is. It is the same shape as an elite card because that is exactly
     what it is. */
  .statuscard{
    min-width:17rem;border-radius:10px;padding:1rem 1.1rem;color:#f4f8fd;
    background:linear-gradient(135deg,#16233a,#0e1726 55%,#1b2b45);
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 14px 34px rgba(10,20,36,.32);
  }
  .statuscard .sc-top{display:flex;justify-content:space-between;align-items:baseline;
    gap:1rem}
  .statuscard .sc-tier{font-family:var(--mono);font-size:.62rem;font-weight:700;
    letter-spacing:.2em;color:var(--amber)}
  .statuscard .sc-no{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
    color:rgba(244,248,253,.6)}
  .statuscard .sc-name{font-family:var(--display);font-size:1.25rem;letter-spacing:-.01em;
    margin:.35rem 0 .1rem}
  .statuscard .sc-km{font-family:var(--mono);font-size:.7rem;
    color:rgba(244,248,253,.75);font-variant-numeric:tabular-nums}
  .sc-meter{height:6px;border-radius:99px;background:rgba(255,255,255,.14);
    margin:.7rem 0 .35rem;overflow:hidden}
  .sc-meter i{display:block;height:100%;border-radius:99px;
    background:linear-gradient(90deg,var(--amber),#ffbe5a)}
  .statuscard .sc-next{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;
    color:rgba(244,248,253,.6)}

  /* where you sit on each board, without leaving home */
  .snapshot{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:-1rem 0 2rem}
  @media (min-width:46rem){ .snapshot{grid-template-columns:repeat(4,1fr)} }
  .snapshot button{
    text-align:left;background:var(--card);border:1px solid var(--line);border-radius:6px;
    padding:.7rem .8rem;cursor:pointer;font:inherit;color:var(--ink);
    transition:border-color .15s}
  .snapshot button:hover{border-color:var(--amber)}
  .snapshot b{display:block;font-family:var(--display);font-size:1.35rem;line-height:1.1}
  .snapshot b em{font-style:normal;font-size:.8rem;color:var(--dim-2);
    font-family:var(--mono)}
  .snapshot span{display:block;font-family:var(--mono);font-size:.53rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--dim-2);margin-top:.2rem}

  .home-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;
    margin-bottom:2rem}
  @media (min-width:46rem){ .home-stats{grid-template-columns:repeat(5,1fr)} }
  .home-stats div{background:var(--card);border:1px solid var(--line);
    border-radius:6px;padding:.85rem .95rem}
  .home-stats b{display:block;font-size:1.6rem;line-height:1.1;
    font-family:var(--display);letter-spacing:-.02em}
  .home-stats span{font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--dim-2)}

  .home-grid{display:grid;gap:2rem}
  @media (min-width:60rem){ .home-grid{grid-template-columns:1fr 20rem} }
  .hm-card{background:var(--card);border:1px solid var(--line);border-radius:6px;
    padding:1rem 1.1rem;margin-bottom:1rem}
  .hm-card .hm-sub{font-size:.8rem;color:var(--dim);margin:.35rem 0 .6rem}
  .hm-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
  .hm-tags i{font-style:normal;font-family:var(--mono);font-size:.6rem;
    letter-spacing:.12em;padding:.2rem .45rem;border-radius:3px;
    background:var(--sunk);color:var(--dim)}
  .hm-row{display:flex;gap:.7rem;align-items:center;padding:.55rem 0;
    border-top:1px solid var(--line)}
  .hm-row:first-child{border-top:0}
  .hm-row b{font-size:.86rem}
  .hm-row span{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;
    color:var(--dim-2);display:block}
  .hm-row .go{margin-left:auto}
  .hm-empty{color:var(--dim);font-size:.88rem;padding:.6rem 0}
  .here-now{margin:.2rem 0 .5rem;font-size:.95rem}
  .here-now b{color:var(--accent)}

  /* the motion preference, applied at the root so nothing has to check it */
  body.no-motion *,body.no-motion *::before,body.no-motion *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}

  /* a bar you cannot miss, because acting as though you are online when you
     are not is how work gets lost */
  body.is-offline .rail::after{
    content:"OFFLINE \2014 WORKING FROM THIS DEVICE";
    display:block;width:100%;order:99;margin-top:.5rem;
    font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.18em;
    color:#8a5300;background:rgba(217,135,4,.16);
    padding:.4rem .6rem;border-radius:4px;text-align:center;
  }
  body.night.is-offline .rail::after{color:#ffc861}

  .flash{display:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
    padding:.7rem 1rem;background:rgba(217,135,4,.14);color:var(--ink);
    border-bottom:1px solid rgba(217,135,4,.4);line-height:1.6}
  .flash.on{display:block}

  /* The recovery code is shown exactly once, in the response to /signup, and
     it was being shown in the line above: 10px mono, the same strip that
     carries every routine notice, no way to copy it and no acknowledgement.
     A one-time credential gets its own block, at a size somebody can read
     across a desk, and does not go away until it is dismissed on purpose. */
  .flash.keep{padding:1.15rem 1.25rem;background:rgba(217,135,4,.16);
    border-bottom:2px solid var(--amber);font-size:.9rem;letter-spacing:0;
    font-family:inherit;line-height:1.55}
  .rec{display:grid;gap:.85rem;max-width:1220px;margin-inline:auto;
    width:min(100% - 2rem,1220px)}
  @media (min-width:56rem){ .rec{grid-template-columns:1fr auto;align-items:center} }
  .rec p{margin:.25rem 0 0;color:var(--dim)}
  .rec-code{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
  .rec-code code{font-family:var(--mono);font-size:1.15rem;letter-spacing:.12em;
    font-weight:700;color:var(--ink);background:var(--card);
    border:1px solid var(--amber);border-radius:5px;padding:.5rem .8rem;
    user-select:all}
  .rec-code .btn{min-height:38px}

  /* ---------------------------------------------------------- the chart */
  /* The footer states what is actually real. It used to be a sentence
     somebody typed, and it went stale twice -- it still named a chart that
     had been replaced by a map, and it called everything sample data after
     a database was attached. It reports rather than asserts now. */
  #footnote .dot{display:inline-block;width:7px;height:7px;border-radius:50%;
    background:var(--dim-2);margin-right:.5rem;vertical-align:1px}
  #footnote .dot.live{background:var(--green);
    box-shadow:0 0 0 3px rgba(47,143,78,.18)}
  #footnote .dot.local{background:var(--amber);
    box-shadow:0 0 0 3px rgba(217,135,4,.18)}
  #footnote b{color:var(--ink)}

  .numcard,.numfind{background:var(--card);border:1px solid var(--line);
    border-radius:6px;padding:1rem 1.1rem;margin-top:.6rem}
  .numcard b{display:block;font-family:var(--mono);font-size:1.6rem;font-weight:700;
    letter-spacing:.08em;margin:.3rem 0 .4rem}
  .numcard p{margin:0 0 .75rem;font-size:.86rem;color:var(--dim)}
  .numfind .two{display:grid;grid-template-columns:1fr auto;gap:.5rem}

  /* ------------------------------------------------------------- trips */
  .tripsum{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1.5rem}
  @media (min-width:52rem){ .tripsum{grid-template-columns:repeat(4,1fr)} }
  .tripsum div{background:var(--card);border:1px solid var(--line);border-radius:6px;
    padding:.85rem .95rem}
  .tripsum b{display:block;font-family:var(--display);font-size:1.5rem;line-height:1.1}
  .tripsum span{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--dim-2);margin-top:.15rem}

  .trip{background:var(--card);border:1px solid var(--line);border-radius:7px;
    padding:1.1rem 1.25rem;margin-bottom:.85rem}
  .trip-top{display:flex;flex-wrap:wrap;gap:.75rem;align-items:baseline;
    justify-content:space-between}
  .trip h3{font-family:var(--display);font-size:1.3rem;letter-spacing:-.02em;margin:0}
  .trip .when{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
    color:var(--dim-2)}
  .trip-legs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.7rem 0 .6rem}
  .trip-legs i{font-style:normal;font-family:var(--mono);font-size:.62rem;font-weight:600;
    letter-spacing:.1em;padding:.2rem .45rem;border-radius:3px;
    background:rgba(217,135,4,.16);color:#8a5300;cursor:pointer}
  body.night .trip-legs i{color:#ffc861}
  .trip-legs s{text-decoration:none;color:var(--dim-2);font-size:.7rem}
  .trip-nums{display:flex;flex-wrap:wrap;gap:1.4rem;font-family:var(--mono);
    font-size:.58rem;letter-spacing:.12em;color:var(--dim-2)}
  .trip-nums b{color:var(--ink);font-weight:700}

  .costrow{display:grid;grid-template-columns:1fr 1fr auto;gap:.5rem;
    align-items:end;margin-top:.5rem}
  .costrow label{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--dim-2)}
  .costrow input,.costrow select{display:block;width:100%;margin-top:.25rem;font:inherit;
    font-size:.92rem;color:var(--ink);background:var(--sunk);
    border:1px solid var(--line-2);border-radius:5px;padding:.45rem .55rem}

  /* --------------------------------------------------------- documents */
  .doclist{display:grid;gap:.4rem;margin:.5rem 0 .8rem}
  .docrow{display:grid;grid-template-columns:1fr auto auto;gap:.7rem;align-items:center;
    background:var(--sunk);border:1px solid var(--line);border-radius:5px;
    padding:.5rem .65rem}
  .docrow b{font-size:.9rem}
  .docrow .until{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
    color:var(--dim-2)}
  .docrow.warn{border-color:var(--amber);box-shadow:inset 3px 0 0 var(--amber)}
  .docrow.dead{border-color:var(--coral);box-shadow:inset 3px 0 0 var(--coral)}
  .docrow.warn .until{color:#8a5300} .docrow.dead .until{color:var(--coral)}
  body.night .docrow.warn .until{color:#ffc861}
  .docrow button{border:0;background:transparent;color:var(--dim-2);cursor:pointer;
    font-size:1rem;line-height:1;padding:.1rem .3rem}
  .docstate{font-size:.84rem;margin-top:.6rem;padding:.55rem .7rem;border-radius:5px}
  .docstate.ok{background:rgba(47,143,78,.12);color:var(--green)}
  .docstate.warn{background:rgba(217,135,4,.14);color:#8a5300}
  .docstate.dead{background:rgba(214,57,91,.13);color:var(--coral)}
  body.night .docstate.warn{color:#ffc861}

  /* ------------------------------------------------------- stamp from a photo */
  .exifdrop{display:block;margin-top:.6rem;padding:1.1rem .9rem;text-align:center;
    border:1.5px dashed var(--line-2);border-radius:7px;cursor:pointer;
    transition:border-color .15s,background .15s}
  .exifdrop:hover,.exifdrop.over{border-color:var(--amber);
    background:rgba(217,135,4,.06)}
  .exifdrop b{display:block;font-size:.94rem}
  .exifdrop span{display:block;font-size:.8rem;color:var(--dim);margin-top:.15rem}
  .exifdrop.busy{opacity:.6;pointer-events:none}

  /* ------------------------------------------------------ the brand gradient
     The logo is a gradient and the interface was flat, so the two never
     looked related. These are the places where a sweep of it does work
     rather than decoration: the thing you are on, the thing you press, and
     the edge of the card that carries your status. */
  .vt.on,.ldtab.on,.tlf.on,.segbar button.on{
    background:var(--glow-ink);
    border-color:transparent;
    color:#fff;
  }
  .btn:not(.ghost){
    background:var(--glow-ink);
    border-color:transparent;
    color:#fff;
  }
  .btn:not(.ghost):hover{ filter:brightness(1.08) saturate(1.1) }

  .statuscard{
    background:
      linear-gradient(135deg, rgba(63,201,222,.16), rgba(179,69,198,.14) 55%,
                      rgba(255,122,51,.12)),
      linear-gradient(135deg,#151a33,#0d1024 60%,#1b1636);
    border-color:rgba(255,255,255,.14);
  }
  .statuscard::after{
    content:"";position:absolute;inset:0;border-radius:10px;padding:1px;
    background:var(--glow);opacity:.55;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  }
  .statuscard{position:relative}
  .sc-meter i{background:var(--glow)}

  /* the hero word picks up the sweep instead of a single flat colour */
  .hero h1 em,.gate h1 em{
    background:var(--glow);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }

  /* rank one, two and three earn the gradient; everyone else does not */
  .ldrow.top .ldrank{
    background:var(--glow);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }

  /* --------------------------------------------------------- the gallery */
  .gal-sec{margin:0 0 2.5rem}
  .galfilters{display:flex;flex-wrap:wrap;gap:.4rem;margin:.25rem 0 1rem}
  .galf{font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;padding:.42rem .8rem;border-radius:99px;cursor:pointer;
    background:var(--card);border:1px solid var(--line);color:var(--dim)}
  .galf.on{background:var(--glow);border-color:transparent;color:#fff}
  .galf i{font-style:normal;opacity:.65;margin-left:.3rem}

  /* --------------------------------------------------- the gallery
     A row of square tiles is a contact sheet, and this product is a cabin.
     Each photograph sits in a window instead: the same shape, housing and
     glare as the porthole on the gate, at a size that tiles. The caption
     moves off the glass and onto the wall underneath, where a placard
     belongs -- text over somebody's photograph was covering the thing they
     came to look at. */
  .gallery{
    display:grid;gap:1.15rem .95rem;
    grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));
    padding:1.5rem 1.25rem 1.3rem;border-radius:16px;
    border:1px solid var(--line);
    /* the cabin wall: a curve of light down the fuselage, and the seam line
       that runs above the windows on a real one */
    background:
      linear-gradient(180deg,rgba(255,255,255,.05) 0 2px,transparent 2px) 0 14px/100% 100%,
      linear-gradient(168deg,var(--card) 0%,var(--sunk) 62%,var(--card) 100%);
  }
  body.night .gallery{
    background:
      linear-gradient(180deg,rgba(255,255,255,.04) 0 2px,transparent 2px) 0 14px/100% 100%,
      linear-gradient(168deg,#1b2436 0%,#141b2a 62%,#1b2436 100%);
  }

  .gal-item{
    display:flex;flex-direction:column;gap:.5rem;align-items:stretch;
    background:none;border:0;padding:0;cursor:pointer;text-align:left;
    transition:transform .18s;
  }
  .gal-item:hover{transform:translateY(-3px)}

  /* the window itself, borrowed wholesale from .porthole */
  .gal-win{
    position:relative;display:block;width:100%;aspect-ratio:5/7;padding:8px;
    border-radius:46% 46% 46% 46% / 33% 33% 33% 33%;
    background:linear-gradient(160deg,#eef1f5,#d6dce4);
    box-shadow:0 6px 18px rgba(18,40,63,.20), inset 0 2px 3px #fff,
               inset 0 -2px 6px rgba(18,40,63,.16);
  }
  body.night .gal-win{
    background:linear-gradient(160deg,#26374d,#16222f);
    box-shadow:0 6px 18px rgba(3,6,16,.5), inset 0 2px 3px rgba(255,255,255,.16),
               inset 0 -2px 6px rgba(0,0,0,.4);
  }
  /* The size has to be stated. This was inset:8px with width and height auto,
     which reads as "fill the window inside its 8px frame" and is not what it
     does: an <img> has intrinsic dimensions, so auto resolves to the
     photograph's own pixel size, the box becomes over-constrained, and the
     right and bottom insets are dropped on the floor. A small photograph then
     sat at its natural size in the top-left of the porthole and a large one
     overflowed it, and object-fit had nothing to do either way because the
     box already matched the image. Measured: a 64x64 photograph in a 200x280
     window rendered 64x64 instead of filling 184x264.

     .pane, which this was copied from, never had the problem -- it is a plain
     block at width:100%;height:100% rather than an absolutely positioned one. */
  .gal-item img,.gal-item svg,.gal-item video{
    position:absolute;top:8px;left:8px;
    width:calc(100% - 16px);height:calc(100% - 16px);
    border-radius:46% 46% 46% 46% / 33% 33% 33% 33%;
    object-fit:cover;display:block;
    box-shadow:inset 0 0 24px rgba(6,12,30,.4);
  }
  /* the reflection on the glass, same angle as the gate's */
  .gal-glare{
    position:absolute;inset:8px;border-radius:inherit;pointer-events:none;
    background:linear-gradient(128deg,rgba(255,255,255,.34) 0 24%,transparent 44%);
  }
  /* the blind, pulled down. Used for the windows in an empty gallery. */
  .gal-shade{
    position:absolute;left:8px;right:8px;top:8px;bottom:8px;
    background:linear-gradient(180deg,#eaeef3,#c9d1db);
    border-radius:46% 46% 46% 46% / 33% 33% 33% 33%;
    box-shadow:inset 0 -3px 8px rgba(18,40,63,.18);
  }
  body.night .gal-shade{background:linear-gradient(180deg,#2a3b52,#1a2636)}
  /* the pull tab, so it reads as a blind rather than a blank */
  .gal-shade::after{
    content:"";position:absolute;left:50%;bottom:9%;width:26%;height:3px;
    border-radius:3px;transform:translateX(-50%);
    background:rgba(18,40,63,.22);
  }
  body.night .gal-shade::after{background:rgba(255,255,255,.22)}

  /* the sixth window: blinds down, with what is behind them */
  .gal-more{cursor:pointer}
  .gal-more .gal-more-n{
    position:absolute;inset:8px;display:flex;align-items:center;justify-content:center;
    z-index:2;font-family:var(--display);font-weight:800;font-size:1.5rem;
    color:rgba(22,32,42,.42);letter-spacing:-.02em;
  }
  body.night .gal-more .gal-more-n{color:rgba(233,240,250,.5)}
  .gal-more:hover .gal-more-n{color:var(--accent)}

  /* the placard under the window */
  .gal-meta{display:block;padding:0 .15rem}
  .gal-meta b{display:block;font-size:.74rem;line-height:1.25;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gal-meta span{display:block;font-family:var(--mono);font-size:.47rem;
    letter-spacing:.15em;color:var(--dim-2);margin-top:.15rem}
  .gal-kind{
    position:absolute;top:9%;right:11%;z-index:2;font-family:var(--mono);
    font-size:.42rem;font-weight:700;letter-spacing:.12em;padding:.16rem .32rem;
    border-radius:3px;background:rgba(6,8,20,.6);color:#fff;
  }
  .gal-play{position:absolute;inset:8px;display:flex;align-items:center;
    justify-content:center;pointer-events:none}
  .gal-play i{width:0;height:0;border-left:14px solid rgba(255,255,255,.92);
    border-top:10px solid transparent;border-bottom:10px solid transparent;
    margin-left:4px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}

  /* the lightbox */
  /* Share destinations. Each one is a real link with a real href, so it
     opens in a new tab, can be middle-clicked, and works with the keyboard
     -- the whole row is anchors, not click handlers on divs. */
  .sh-what{margin:0;color:var(--dim);font-size:.95rem}
  .sh-link{display:flex;gap:.6rem;align-items:center;margin:.9rem 0 1.1rem;
    padding:.55rem .6rem .55rem .85rem;border:1px solid var(--line);
    border-radius:10px;background:var(--ink-2)}
  .sh-link code{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-size:.88rem;color:var(--txt)}
  .sh-link .btn{flex:0 0 auto;padding:.4rem .9rem;font-size:.78rem}
  .sh-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr));
    gap:.55rem}
  .sh-app{display:flex;align-items:center;gap:.55rem;padding:.65rem .7rem;
    border:1px solid var(--line);border-radius:10px;background:var(--ink-2);
    color:var(--txt);text-decoration:none;font-size:.86rem;font-weight:600;
    transition:border-color .15s,transform .15s}
  .sh-app:hover,.sh-app:focus-visible{border-color:var(--accent);transform:translateY(-1px)}
  .sh-app svg{flex:0 0 auto;width:18px;height:18px;fill:currentColor}
  .sh-app.wa{color:#25D366} .sh-app.tg{color:#2AABEE} .sh-app.fb{color:#4267B2}
  .sh-app.li{color:#0A66C2} .sh-app.xx,.sh-app.em,.sh-app.more{color:var(--txt)}
  /* Instagram's mark is a gradient in the wild, but every other glyph here is
     a flat currentColor fill and a lone gradient would read as a mistake. It
     takes the magenta out of the middle of that gradient instead. */
  .sh-app.ig,.sh-app.igdm{color:#C13584}
  .sh-note{margin:1rem 0 0;color:var(--dim-2);font-size:.8rem;line-height:1.5}
  .lightbox{
    position:fixed;inset:0;z-index:80;display:none;
    background:rgba(4,6,16,.94);backdrop-filter:blur(6px);
    align-items:center;justify-content:center;padding:3.5rem 1rem;
  }
  .lightbox.open{display:flex}
  .lb-stage{margin:0;max-width:min(96vw,68rem);max-height:100%;
    display:flex;flex-direction:column;gap:.9rem}
  .lb-stage #lb-body{display:flex;align-items:center;justify-content:center;
    min-height:0}
  .lb-stage img{max-width:100%;max-height:74vh;border-radius:10px;display:block;
    box-shadow:0 30px 70px rgba(0,0,0,.5)}
  .lb-stage svg{width:min(92vw,52rem);height:auto;border-radius:10px}
  .lb-stage figcaption{color:#eceeff;text-align:center}
  .lb-stage figcaption b{display:block;font-size:1.05rem}
  .lb-stage figcaption span{display:block;font-family:var(--mono);font-size:.58rem;
    letter-spacing:.18em;color:rgba(236,238,255,.6);margin-top:.3rem}
  .lb-close,.lb-nav{
    position:absolute;border:0;background:rgba(255,255,255,.1);color:#fff;
    cursor:pointer;border-radius:50%;width:2.6rem;height:2.6rem;font-size:1.4rem;
    line-height:1;display:flex;align-items:center;justify-content:center;
  }
  .lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.2)}
  .lb-close{top:1.1rem;right:1.1rem}
  .lb-prev{left:1.1rem;top:50%;transform:translateY(-50%)}
  .lb-next{right:1.1rem;top:50%;transform:translateY(-50%)}
  @media (max-width:40rem){ .lb-prev{left:.4rem} .lb-next{right:.4rem} }

  /* --------------------------------------------------------- the horizon
     A slow band of everywhere you have been, across the top of home. It
     scrolls because a still strip is a header and a moving one is a window,
     and it holds because the content is yours rather than stock. */
  .horizon{
    position:relative;height:11rem;margin:0 0 2rem;border-radius:12px;
    overflow:hidden;border:1px solid var(--line);
    background:var(--sunk);
    /* 6% was about eighty pixels -- not enough to dissolve a 16rem card, so
       the first one read as sliced rather than passing out of view. A fade
       wider than the card itself is what makes it look like a window. */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  }
  .hz-track{display:flex;gap:.6rem;height:100%;width:max-content;
    animation:hz-roll 90s linear infinite}
  .horizon:hover .hz-track{animation-play-state:paused}
  .hz-card{
    position:relative;width:16rem;height:100%;flex:0 0 auto;border-radius:9px;
    overflow:hidden;background:var(--card);
  }
  /* object-fit does nothing to an inline SVG -- it letterboxes to its own
     viewBox instead, which was pushing the caption off the bottom of the
     card. Fill the card absolutely and let the SVG slice. */
  .hz-card svg,.hz-card img{
    position:absolute;inset:0;width:100%;height:100%;display:block;
    object-fit:cover;
  }
  .hz-card svg{preserveAspectRatio:none}
  .hz-card figcaption{
    position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.6rem .85rem .85rem;
    background:linear-gradient(180deg,transparent,rgba(6,8,20,.82));
    color:#fff;
  }
  .hz-card b{display:block;font-family:var(--display);font-size:1rem;
    letter-spacing:-.01em;line-height:1.1}
  .hz-card span{display:block;font-family:var(--mono);font-size:.5rem;
    letter-spacing:.18em;opacity:.8;margin-top:.15rem}
  .hz-empty{display:flex;align-items:center;justify-content:center;height:100%;
    color:var(--dim);font-size:.9rem;padding:0 1rem;text-align:center}
  @media (prefers-reduced-motion:reduce){ .hz-track{animation:none} }
  body.no-motion .hz-track{animation:none}
  @keyframes hz-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ------------------------------------------------------------ the cockpit
     The home page reads as an instrument panel, and the map is the
     navigation display -- which is what a cockpit actually has at the
     centre of it. Bezel, screen, and a strip of readouts underneath. */
  /* The bezel was black plastic around a green screen. The map inside is a
     map now, so the housing is a card: the chrome should not be louder than
     the thing it holds. */
  .nd{margin:0 0 2rem;border-radius:12px;overflow:hidden;
    background:var(--card);border:1px solid var(--line);
    box-shadow:0 10px 30px rgba(18,40,63,.14)}
  body.night .nd{box-shadow:0 14px 36px rgba(4,8,18,.4)}
  .nd-bez{display:flex;justify-content:space-between;align-items:center;
    padding:.6rem .9rem;font-family:var(--mono);font-size:.55rem;
    letter-spacing:.2em;color:var(--dim-2);
    border-bottom:1px solid var(--line)}
  .nd-mode{color:var(--accent)}
  .nd-screen{position:relative;background:var(--wm-sea)}
  .nd-screen #hm-map svg{display:block;width:100%;height:auto}
  .nd-foot{display:flex;flex-wrap:wrap;gap:1.4rem;padding:.75rem .9rem;
    font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;
    color:var(--dim-2);border-top:1px solid var(--line)}
  .nd-foot b{color:var(--ink);font-weight:700}

  /* the annunciator strip: things needing your attention, and nothing else */
  .annun{display:grid;gap:.5rem;margin:-1rem 0 2rem}
  @media (min-width:46rem){ .annun{grid-template-columns:repeat(3,1fr)} }
  .ann{display:flex;gap:.6rem;align-items:flex-start;text-align:left;
    background:var(--card);border:1px solid var(--line);border-left:3px solid var(--amber);
    border-radius:5px;padding:.65rem .8rem;cursor:pointer;font:inherit;color:var(--ink)}
  .ann:hover{border-color:var(--amber)}
  .ann i{font-style:normal;font-family:var(--mono);font-size:.5rem;font-weight:700;
    letter-spacing:.12em;color:var(--amber);padding-top:.15rem}
  .ann b{display:block;font-size:.86rem}
  .ann span{display:block;font-size:.78rem;color:var(--dim);margin-top:.1rem}

  /* -------------------------------------------------------------- settings */
  .set-head{display:flex;justify-content:space-between;align-items:flex-start;
    gap:1rem;padding:1.25rem 1.4rem 0}
  .set-head h3{font-family:var(--display);font-size:1.6rem;letter-spacing:-.02em;
    margin:.2rem 0 0}
  .set-body{padding:1.25rem 1.4rem 2rem;display:grid;gap:1.6rem;max-width:44rem}
  .set-sec{border-top:1px solid var(--line);padding-top:1.1rem}
  .set-sec:first-child{border-top:0;padding-top:0}
  .set-vis{display:grid;gap:.6rem;margin-top:.7rem}
  .visrow{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
    background:var(--sunk);border:1px solid var(--line);border-radius:7px;
    padding:.75rem .85rem;cursor:pointer;font-size:.86rem;color:var(--dim);
    line-height:1.6}
  .visrow input{margin-top:.25rem;accent-color:var(--accent);width:1rem;height:1rem}
  .visrow b{display:block;color:var(--ink);font-size:.94rem;margin-bottom:.15rem}
  .visrow.locked{cursor:default;opacity:.9;border-style:dashed}
  .lockmark{font-size:.9rem;line-height:1.4;opacity:.7}

  .profedit{display:grid;gap:1.1rem;margin-top:.7rem}
  @media (min-width:34rem){ .profedit{grid-template-columns:1fr auto;align-items:start} }
  .profedit .portrait{width:104px;height:132px}
  .profedit-fields .set-grid{margin-top:0}
  .wide-label{display:block;margin-top:.7rem;position:relative;
    font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--dim-2)}
  .wide-label input,.wide-label textarea{
    display:block;width:100%;margin-top:.25rem;font:inherit;font-size:.95rem;
    color:var(--ink);background:var(--sunk);border:1px solid var(--line-2);
    border-radius:5px;padding:.5rem .6rem;resize:vertical}
  .wide-label .cnt{position:absolute;right:.1rem;top:0;font-size:.5rem;
    color:var(--dim-2)}
  .linky{border:0;background:transparent;color:var(--accent);cursor:pointer;
    font:inherit;font-size:.78rem;text-decoration:underline;padding:0}

  .set-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:.6rem}
  .set-grid label{display:block;font-family:var(--mono);font-size:.55rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
  .set-grid input{display:block;width:100%;margin-top:.25rem;font:inherit;
    font-size:.95rem;color:var(--ink);background:var(--sunk);
    border:1px solid var(--line-2);border-radius:5px;padding:.5rem .6rem}
  .set-note{font-size:.82rem;color:var(--dim);margin:.6rem 0 0}
  .set-acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}

  /* a segmented control, the way a cabin switch reads */
  .segbar{display:inline-flex;margin-top:.6rem;border:1px solid var(--line-2);
    border-radius:99px;padding:2px;background:var(--sunk);flex-wrap:wrap}
  .segbar button{font-family:var(--mono);font-size:.58rem;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;padding:.45rem .85rem;
    border:0;border-radius:99px;background:transparent;color:var(--dim);
    cursor:pointer}
  .segbar button.on{background:var(--ink);color:var(--page)}

  /* ------------------------------------------------------------- dispatches */
  .jr{background:var(--card);border:1px solid var(--line);border-radius:7px;
    padding:1.25rem 1.4rem;margin-bottom:1rem;box-shadow:0 6px 20px rgba(18,40,63,.06)}
  .jr .jr-where{font-family:var(--mono);font-size:.58rem;font-weight:600;
    letter-spacing:.2em;color:var(--amber)}
  .jr h3{font-family:var(--display);font-size:1.5rem;letter-spacing:-.02em;
    margin:.3rem 0 .1rem;line-height:1.15}
  .jr .jr-sub{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;
    color:var(--dim-2);margin-bottom:.8rem}
  .jr .jr-body{font-size:1rem;line-height:1.75;color:var(--ink);max-width:38rem}
  .jr .jr-body p{margin:0 0 .9rem}
  .jr .jr-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));
    gap:.5rem;margin:1rem 0 .25rem}
  .jr .jr-shots img{width:100%;height:6rem;object-fit:cover;border-radius:5px;display:block}
  .jr .jr-act{display:flex;gap:.5rem;margin-top:1rem}

  .jr-write{background:var(--card);border:1px solid var(--line);border-radius:6px;
    padding:1rem 1.1rem;margin-top:.75rem}
  .jr-write input,.jr-write textarea{width:100%;font:inherit;color:var(--ink);
    background:var(--sunk);border:1px solid var(--line-2);border-radius:5px;
    padding:.6rem .7rem;margin-top:.35rem}
  .jr-write textarea{min-height:11rem;line-height:1.7;resize:vertical;
    font-size:.95rem}
  .jr-write input{font-family:var(--display);font-size:1.1rem}
  .jr-write .row{display:flex;gap:.5rem;align-items:center;margin-top:.7rem}
  .jr-write .count{margin-left:auto;font-family:var(--mono);font-size:.55rem;
    letter-spacing:.12em;color:var(--dim-2)}

  /* ------------------------------------------------------- media on a stamp */
  .mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:.5rem}
  .mitem{position:relative;margin:0;border-radius:5px;overflow:hidden;
    background:var(--sunk);border:1px solid var(--line)}
  .mitem img{width:100%;height:5.5rem;object-fit:cover;display:block}
  .mitem .mvid{display:flex;align-items:center;justify-content:center;height:5.5rem;
    background:linear-gradient(160deg,#22384f,#0e1c2b)}
  .mitem .mvid i{width:0;height:0;border-left:14px solid rgba(255,255,255,.9);
    border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px}
  .mitem figcaption{font-size:.7rem;color:var(--dim);padding:.35rem .45rem;
    line-height:1.35;min-height:1.9rem}
  .mdel{position:absolute;top:.25rem;right:.25rem;width:1.3rem;height:1.3rem;
    border-radius:50%;border:0;background:rgba(11,22,34,.72);color:#fff;
    font-size:.85rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s}
  .mitem:hover .mdel,.mdel:focus{opacity:1}
  .madd{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.2rem;height:7.4rem;border:1px dashed var(--line-2);border-radius:5px;
    background:transparent;cursor:pointer;color:var(--dim);font:inherit;
    transition:border-color .15s,color .15s}
  .madd:hover{border-color:var(--amber);color:var(--amber)}
  .madd b{font-size:1.3rem;line-height:1;font-weight:400}
  .madd span{font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;
    text-align:center;line-height:1.5}

  /* ---------------------------------------------------------- the timeline
     The claim the whole product rests on: one search across everything you
     ever put in, answered as a dated, located list. So it is a timeline
     first and a result list second -- the year rail is the point. */
  .tlfilters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem}
  .tlf{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;padding:.45rem .75rem;border-radius:99px;cursor:pointer;
    background:var(--card);border:1px solid var(--line);color:var(--dim)}
  .tlf.on{background:var(--ink);border-color:var(--ink);color:var(--page)}
  .tlf i{font-style:normal;opacity:.6;margin-left:.3rem}
  .tlsummary{font-size:.88rem;color:var(--dim);margin-bottom:1rem}
  .tlsummary b{color:var(--ink)}

  .timeline{position:relative;padding-left:5.5rem}
  .timeline::before{content:"";position:absolute;left:4.15rem;top:.4rem;bottom:.4rem;
    width:2px;background:var(--line)}
  .tlyear{position:relative;margin:1.5rem 0 .5rem;font-family:var(--mono);
    font-size:.72rem;font-weight:700;letter-spacing:.18em;color:var(--dim-2)}
  .tlyear::before{content:"";position:absolute;left:-1.55rem;top:.35rem;
    width:10px;height:10px;border-radius:50%;background:var(--dim-2);
    box-shadow:0 0 0 4px var(--page)}
  .tlrow{position:relative;background:var(--card);border:1px solid var(--line);
    border-radius:6px;padding:.7rem .9rem;margin-bottom:.5rem;cursor:pointer;
    display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:center;
    text-align:left;font:inherit;color:var(--ink);width:100%;
    transition:border-color .15s,transform .15s}
  .tlrow:hover{border-color:var(--amber);transform:translateX(2px)}
  .tlrow::before{content:"";position:absolute;left:-1.42rem;top:1.05rem;
    width:7px;height:7px;border-radius:50%;background:var(--amber);
    box-shadow:0 0 0 3px var(--page)}
  .tldate{position:absolute;left:-5.5rem;top:.75rem;width:3.8rem;text-align:right;
    font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;color:var(--dim-2);
    font-variant-numeric:tabular-nums}
  .tlrow b{display:block;font-size:.94rem}
  .tlrow .where{display:block;font-family:var(--mono);font-size:.56rem;
    letter-spacing:.14em;color:var(--dim-2);margin-top:.15rem}
  .tlrow .snip{display:block;font-size:.85rem;color:var(--dim);margin-top:.35rem}
  /* every hit in the row, not only the one in the snippet -- the title was
     falling through to the browser's own highlight, which is a flat yellow
     that belongs to no theme here */
  .tlrow mark{background:rgba(217,135,4,.28);color:inherit;border-radius:2px;
    padding:0 .1em}
  .tlkind{font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.14em;
    padding:.2rem .4rem;border-radius:3px;background:var(--sunk);color:var(--dim);
    white-space:nowrap}
  .tlkind.photo{background:rgba(42,92,154,.16);color:#2a5c9a}
  .tlkind.video{background:rgba(122,85,201,.16);color:#7a55c9}
  .tlkind.place{background:rgba(217,135,4,.18);color:#8a5300}
  body.night .tlkind.photo{color:#8fc0ff} body.night .tlkind.video{color:#c3a6ff}
  body.night .tlkind.place{color:#ffc861}
  .tlthumb{width:44px;height:44px;border-radius:4px;object-fit:cover;display:block}
  @media (max-width:40rem){
    .timeline{padding-left:0}
    .timeline::before{display:none}
    .tlrow::before{display:none}
    .tldate{position:static;width:auto;text-align:left;display:block;margin-bottom:.2rem}
    .tlyear::before{display:none}
  }

  /* ------------------------------------------------------- the standings */
  .ldtabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem}
  .ldtab{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;padding:.5rem .8rem;border-radius:99px;cursor:pointer;
    background:var(--card);border:1px solid var(--line);color:var(--dim)}
  .ldtab.on{background:var(--ink);border-color:var(--ink);color:var(--page)}
  .ldnote{font-size:.86rem;color:var(--dim);margin:0 0 1rem}
  /* the sample admission reads as a caveat, not as body copy */
  .ldnote--sample{color:var(--dim-2)}

  /* ------------------------------------------------------- trips ahead */
  .ahead{margin:1.5rem 0}
  .planrow{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
    padding:.75rem .85rem;border:1px solid var(--line);border-radius:5px;
    background:var(--card);margin-bottom:.5rem}
  .planrow .pl-when{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--dim-2)}
  .planrow b{font-size:1rem}
  .planrow .pl-state{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;
    text-transform:uppercase;padding:.2rem .5rem;border-radius:999px;
    border:1px solid var(--line-2);color:var(--dim-2)}
  .planrow .pl-state.now{color:var(--green);border-color:var(--green)}
  .planrow .pl-state.over{color:var(--amber);border-color:var(--amber)}
  .planrow .pl-who{font-size:.8rem;color:var(--dim)}
  .planrow .pl-act{margin-left:auto;display:flex;gap:.4rem;flex-wrap:wrap}
  .planadd{margin-top:.9rem;padding:.9rem;border:1px dashed var(--line-2);
    border-radius:5px}
  .askbox{flex:1 0 100%;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;
    margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--line)}
  .askbox .ask-who{flex:1 1 14rem;min-width:0;background:#fff;color:var(--ink);
    border:1px solid var(--line-2);border-radius:3px;font:inherit;
    font-size:.86rem;padding:.5rem .6rem}
  .askbox .ask-who:focus{outline:0;border-color:var(--amber)}
  .askbox .ask-msg{flex:1 0 100%;font-family:var(--mono);font-size:.62rem;
    letter-spacing:.06em;color:var(--dim-2)}
  /* three states, one tap, no dropdown -- it is the fastest question on
     the form and it should feel like it */
  /* the fold */
  .more{border:1px solid var(--line);border-radius:5px;margin:.2rem 0 .8rem;
    background:rgba(255,255,255,.45)}
  .more summary{cursor:pointer;padding:.65rem .8rem;font-size:.9rem;
    display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
    list-style:none;border-radius:5px}
  .more summary::-webkit-details-marker{display:none}
  .more summary::before{content:"+";font-family:var(--mono);color:var(--amber);
    font-weight:700;width:.9rem;flex:0 0 auto}
  .more[open] summary::before{content:"\2212"}
  .more summary span{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--dim-2)}
  .more summary:hover{background:rgba(0,0,0,.02)}
  .more-in{padding:.2rem .8rem .5rem}

  /* Deliberately quiet. A report control that competes with Follow invites
     people to press it to see what it does. */
  .reportb{background:none;border:0;padding:.35rem .5rem;cursor:pointer;
    font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--dim-2);align-self:flex-start}
  .reportb:hover{color:var(--accent-3);text-decoration:underline}
  .reportb[disabled]{color:var(--green);cursor:default;text-decoration:none}
  .lb-cap .reportb{color:rgba(255,255,255,.55)}
  .lb-cap .reportb:hover{color:#fff}

  .again{display:flex;gap:.4rem}
  .agn{flex:1;background:#fff;border:1px solid var(--line-2);border-radius:3px;
    font:inherit;font-size:.85rem;padding:.55rem;cursor:pointer;color:var(--dim)}
  .agn:hover{border-color:var(--amber)}
  .agn.on{background:var(--amber);border-color:var(--amber);color:#fff;font-weight:600}

  /* The standings are a departures board. Same mechanical cells as the gate
     readout, at board scale: a dark housing, a header strip, and rows that
     flutter into a new order when you change what is being ranked. */
  .ldwrap{
    border-radius:10px;overflow:hidden;
    background:linear-gradient(180deg,#12162a,#0a0d1b);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 44px rgba(6,10,22,.34),inset 0 1px 0 rgba(255,255,255,.06);
  }
  /* The header and the rows are separate grid containers, so an "auto" column
     in one cannot line up with an "auto" column in the other -- the header
     sized to the words STATUS and KM while the rows sized to their flap
     cells, and the two columns were out by nearly a hundred pixels. Both now
     take the same explicit widths, derived from the cells they have to hold:
     15 tier cells and 9 value cells, each cell .72em/.86em wide at its own
     font size, plus the 2px gaps between them. */
  .ldwrap{
    --tier-w:calc(15 * .72 * .62rem + 28px);
    --val-w:calc(9 * .86 * .78rem + 16px);
  }
  .ldtop{
    display:grid;grid-template-columns:3.2rem 1fr var(--tier-w) var(--val-w);gap:.9rem;
    padding:.65rem .9rem;border-bottom:1px solid rgba(255,255,255,.08);
    font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.22em;
    color:rgba(233,240,250,.5);
  }
  .ldtop span:last-child{text-align:right;color:var(--board-ink)}
  .ldboard{padding:.5rem .55rem .7rem}
  .ldrow{
    display:grid;grid-template-columns:3.2rem 1fr var(--tier-w) var(--val-w);gap:.9rem;
    align-items:center;padding:.28rem .35rem;border-radius:5px;
  }
  .ldrow.me{background:rgba(155,133,255,.14);
    box-shadow:inset 3px 0 0 var(--accent)}

  /* the cells themselves, sized for a board rather than a strip */
  .ldrow .flaps{gap:2px}
  .ldrow .fcard{font-size:.78rem;width:.86em;height:1.3em;--fd:.075s}
  .ldrow .ldf-rank .fcard i{color:#93a2c6}
  .ldrow.top .ldf-rank .fcard i{color:var(--board-ink)}
  .ldrow.me .ldf-name .fcard i{color:#fff}
  .ldrow .ldf-tier .fcard{font-size:.62rem;width:.72em;height:1.15em}
  .ldrow .ldf-tier .fcard i{color:#8f9bc0}
  .ldrow .ldf-val .fcard i{color:var(--board-ink)}
  .ldrow .ldf-tier,.ldrow .ldf-val{justify-content:flex-end}

  /* minmax(0,1fr): a long name's cells set the column's minimum, which
     pushed the score off the right of the board on a phone. The name is
     clipped instead; the score is the thing the board is for. */
  .ldrow .ldf-name{min-width:0;overflow:hidden}
  @media (max-width:46rem){
    .ldtop,.ldrow{grid-template-columns:2.4rem minmax(0,1fr) auto;gap:.5rem}
    .ldtop span:nth-child(3),.ldrow .ldf-tier{display:none}
    .ldrow .fcard{font-size:.66rem}
  }
  .tierpill{display:inline-block;font-family:var(--mono);font-size:.5rem;font-weight:600;
    letter-spacing:.16em;padding:.15rem .4rem;border-radius:3px;
    background:var(--sunk);color:var(--dim)}
  .tierpill.t4,.tierpill.t5,.tierpill.t6{background:rgba(217,135,4,.18);color:#8a5300}
  body.night .tierpill.t4,body.night .tierpill.t5,body.night .tierpill.t6{color:#ffc861}

  .tierbar{display:grid;gap:.5rem}
  @media (min-width:46rem){ .tierbar{grid-template-columns:repeat(7,1fr)} }
  .tiercell{background:var(--card);border:1px solid var(--line);border-radius:6px;
    padding:.7rem .75rem;text-align:center}
  .tiercell.on{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset}
  .tiercell b{display:block;font-family:var(--mono);font-size:.55rem;font-weight:700;
    letter-spacing:.1em}
  .tiercell span{display:block;font-family:var(--mono);font-size:.5rem;color:var(--dim-2);
    margin-top:.2rem}

  /* ---------------------------------------------------- passport control */
  .lanes{display:grid;gap:.6rem}
  /* There are four lanes. A fixed three-column track left "Document check"
     alone on a second row. */
  @media (min-width:46rem){
    .lanes{grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr))}
  }
  .lane{text-align:left;background:var(--card);border:1px solid var(--line);
    border-radius:6px;padding:.9rem 1rem;cursor:pointer;font:inherit;color:var(--ink);
    transition:border-color .15s,transform .15s}
  .lane:hover{border-color:var(--amber);transform:translateY(-2px)}
  .lane.on{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset}
  .lane b{display:block;font-size:.98rem;margin:.15rem 0 .2rem}
  .lane span{display:block;font-size:.82rem;color:var(--dim)}

  .pcrow{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;
    background:var(--card);border:1px solid var(--line);border-radius:6px;
    padding:.8rem .95rem;margin-top:.6rem}
  .pcrow .who b{display:block;font-size:.96rem}
  .pcrow .who span{display:block;font-size:.82rem;color:var(--dim)}
  .pcrow .who .m{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;
    color:var(--dim-2);margin-top:.25rem}
  /* the passport card and the countries, on somebody else's profile */
  .ppass{display:grid;gap:1rem;margin-top:1.2rem}
  @media (min-width:52rem){ .ppass{grid-template-columns:minmax(0,20rem) minmax(0,1fr)} }
  .ppass-card{background:var(--passport);color:var(--passport-ink);
    border-radius:8px;padding:.9rem 1rem;box-shadow:0 8px 24px rgba(10,14,30,.14)}
  .ppass-top{display:flex;justify-content:space-between;align-items:baseline;
    gap:.6rem;border-bottom:1px solid rgba(22,32,42,.22);padding-bottom:.5rem}
  .ppass-top span{font-weight:750;font-size:.95rem;letter-spacing:-.01em}
  .ppass-top i{font-style:normal;font-family:var(--mono);font-size:.5rem;
    letter-spacing:.22em;opacity:.6}
  .ppass-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .8rem;
    margin:.7rem 0 .6rem}
  .ppass-grid k{display:block;font-family:var(--mono);font-size:.48rem;
    letter-spacing:.18em;text-transform:uppercase;opacity:.62}
  .ppass-grid v{display:block;font-weight:700;font-size:.92rem}
  .ppass-mrz{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
    opacity:.5;word-break:break-all;border-top:1px solid rgba(22,32,42,.22);
    padding-top:.45rem}
  .ctry{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
  .ctry i{font-style:normal;font-size:.78rem;padding:.25rem .55rem;border-radius:999px;
    background:var(--sunk);border:1px solid var(--line-2);color:var(--dim)}
  .ctry i.both{border-color:var(--accent);color:var(--ink)}
  .ctry i b{font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;
    margin-left:.3rem;color:var(--accent);font-weight:700}
  .pcshared{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.35rem}
  .pcshared i{font-style:normal;font-family:var(--mono);font-size:.55rem;
    letter-spacing:.1em;padding:.1rem .35rem;border-radius:3px;
    background:rgba(217,135,4,.16);color:#8a5300}
  body.night .pcshared i{color:#ffc861}
  .pcact{display:flex;flex-direction:column;gap:.35rem;align-items:flex-end}

  /* ------------------------------------------------------------- the map */
  .mapwrap{position:relative;background:var(--screen);border:1px solid var(--screen);
    border-radius:6px;overflow:hidden;box-shadow:0 18px 40px rgba(18,40,63,.18)}
  #worldmap svg{display:block;width:100%;height:auto}
  /* The map read as a cockpit instrument: navy sea, steel land, a radar
     sweep. It is the page's one picture of the world, so it is drawn the way
     a modern web map is drawn instead -- warm paper land, soft blue water,
     hairline coasts, and a proper marker where you have been. Two styles,
     because a light map on a night page is a lamp in the face. */
  :root{
    --wm-sea:#aad3f0; --wm-sea-2:#c4e0f5;
    --wm-land:#f3f0e9; --wm-line:#ddd6c9;
    --wm-on:#e8c9a0; --wm-on-line:#c99a5c;
    --wm-label:rgba(60,64,67,.7);
  }
  body.night{
    --wm-sea:#17263c; --wm-sea-2:#1d3049;
    --wm-land:#2b2b2b; --wm-line:#3d3d3d;
    --wm-on:#5b4a33; --wm-on-line:#9b7b4d;
    --wm-label:rgba(233,240,250,.55);
  }
  .wm-sea{fill:var(--wm-sea)}
  /* the shallow shelf a real map shows around the coast */
  .wm-grid line{stroke:transparent}
  .wm-c{fill:var(--wm-land);stroke:var(--wm-line);stroke-width:.8;
    stroke-linejoin:round;transition:fill .3s}
  .wm-c.on{fill:var(--wm-on);stroke:var(--wm-on-line);stroke-width:1}
  /* the night side, and the sun's own glow where it is directly overhead */
  /* On a dark instrument this could be near-opaque. On a light map it would
     black out half the world, so it is a tint that reads as dusk instead. */
  /* Blurred, because the terminator is not a line. The polygon's straight
     top edge was invisible on the old dark instrument and read as a hard
     rule across a light map -- and dusk really is a gradient. */
  .wm-night{fill:rgba(24,42,74,.18);pointer-events:none}
  body.night .wm-night{fill:rgba(0,0,0,.38)}
  .wm-subsolar{pointer-events:none;mix-blend-mode:screen}

  .wm-leg{fill:none;stroke:var(--accent);stroke-width:2.2;opacity:.85;
    stroke-linecap:round;stroke-dasharray:var(--len) var(--len);
    stroke-dashoffset:var(--len);
    animation:wm-draw 1.1s ease-out var(--d,0s) forwards}
  @keyframes wm-draw{to{stroke-dashoffset:0}}

  /* the aircraft runs the most recent leg, over and over */
  .wm-jet path{fill:var(--accent);transform-box:fill-box;transform-origin:center;
    animation:wm-fly 6s linear infinite;offset-distance:0%}
  @keyframes wm-fly{
    0%{offset-distance:0%;opacity:0}
    8%{opacity:1} 92%{opacity:1}
    100%{offset-distance:100%;opacity:0}
  }

  /* The radar sweep is gone. It belonged to the instrument this used to be;
     on a map it is a green bar wiping across your countries. */
  .wm-beam{display:none}
  @keyframes wm-sweep{from{transform:translateX(-220px)}to{transform:translateX(2000px)}}

  .wm-pin .dot{animation:wm-land .5s cubic-bezier(.2,1.6,.4,1) var(--pd,0s) both}
  @keyframes wm-land{from{transform:scale(2.6);opacity:0}to{transform:scale(1);opacity:1}}
  .wm-pin.last .halo{animation:wm-ping 2.4s ease-out infinite}
  @keyframes wm-ping{
    0%{transform:scale(.5);opacity:.9} 70%{transform:scale(1.9);opacity:0}
    100%{opacity:0}
  }
  .wm-pin circle{transform-box:fill-box;transform-origin:center}

  @media (prefers-reduced-motion:reduce){
    .wm-leg{animation:none;stroke-dashoffset:0}
    .wm-jet path,.wm-beam,.wm-pin .dot,.wm-pin.last .halo{animation:none}
  }
  body.no-motion .wm-leg{animation:none;stroke-dashoffset:0}
  body.no-motion .wm-jet path,body.no-motion .wm-beam,
  body.no-motion .wm-pin .dot,body.no-motion .wm-pin.last .halo{animation:none}
  /* --------------------------------------------------------- home port
     Warm against the accent the stamps use, so the eye separates "where I
     live" from "where I went" without needing the legend. */
  .wm-home{pointer-events:none}
  .wm-home .ring{fill:none;stroke:var(--accent-3);stroke-width:3}
  .wm-home .ring-out{fill:none;stroke:var(--accent-3);stroke-width:1.6;opacity:.42;
    animation:wm-home-ping 3.2s ease-out infinite}
  .wm-home .roof,.wm-home .walls{fill:var(--accent-3)}
  .wm-home .tag{fill:var(--accent-3);font-family:var(--mono);font-size:26px;
    font-weight:700;letter-spacing:.12em;text-anchor:middle}
  @keyframes wm-home-ping{
    0%{transform:scale(.6);opacity:.5}
    70%{transform:scale(1.5);opacity:0}
    100%{transform:scale(1.5);opacity:0}}
  .wm-home .ring-out{transform-box:fill-box;transform-origin:center}
  @media (prefers-reduced-motion:reduce){.wm-home .ring-out{animation:none}}
  body.no-motion .wm-home .ring-out{animation:none}

  .wm-pin{cursor:pointer}
  .wm-pin .halo{fill:color-mix(in srgb, var(--accent) 18%, transparent)}
  .wm-pin:hover .halo{fill:color-mix(in srgb, var(--accent) 34%, transparent)}
  /* the teardrop, with a shadow under it so it sits on the map rather than
     in it -- which is the whole trick of a map marker */
  .wm-pin .pin{fill:var(--accent);stroke:#fff;stroke-width:1.4;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
  .wm-pin .pin-hole{fill:#fff}
  .wm-pin.last .pin{fill:var(--accent-3);stroke:#fff}
  .wm-pin .dot{display:none}

  .mapstats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:1.25rem}
  @media (min-width:52rem){ .mapstats{grid-template-columns:repeat(4,1fr)} }
  .mstat{background:var(--card);border:1px solid var(--line);border-radius:6px;
    padding:.85rem .95rem}
  .mstat b{display:block;font-family:var(--display);font-size:1.5rem;line-height:1.1;
    letter-spacing:-.02em}
  .mstat b i{font-style:normal;font-size:.9rem;color:var(--dim-2);font-family:var(--mono)}
  .mstat span{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--dim-2);margin-top:.15rem}
  .mstat em{display:block;font-style:normal;font-size:.8rem;color:var(--dim);margin-top:.3rem}
  .mstat.wide{grid-column:1/-1}
  .extremes{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:.5rem}
  .extremes span{font-size:.88rem}
  .extremes k{font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;
    color:var(--dim-2);margin-right:.4rem}


  /* ----------------------------------------------------------- counters */
  .counters{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
    border-radius:5px;overflow:hidden}
  @media (min-width:36rem){ .counters{grid-template-columns:repeat(2,1fr)} }
  @media (min-width:60rem){ .counters{grid-template-columns:repeat(4,1fr)} }
  .ct{background:var(--card);padding:1.1rem 1.2rem}
  .ct b{display:block;font-family:var(--display);font-size:2.1rem;line-height:1;
    color:var(--amber);font-variant-numeric:tabular-nums}
  .ct span{display:block;margin-top:.3rem;font-size:.86rem;color:var(--dim)}
  .ct small{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;
    color:var(--dim-2);margin-top:.4rem}
  .bars{display:flex;flex-direction:column;gap:.7rem;margin-top:1.25rem}
  .bar{display:grid;grid-template-columns:7rem 1fr 3rem;gap:.75rem;align-items:center;font-size:.86rem}
  .bar .track{height:8px;background:var(--sunk);border-radius:99px;overflow:hidden}
  .bar .track i{display:block;height:100%;background:var(--amber);border-radius:99px;width:0;
    transition:width 1.1s cubic-bezier(.2,.8,.3,1)}
  .bar .n{font-family:var(--mono);font-size:.76rem;color:var(--dim);text-align:right}

  .wish{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.7rem}
  .wc{border:2px dashed var(--line-3);border-radius:5px;padding:.8rem;text-align:center;
    color:var(--dim);background:rgba(255,255,255,.6)}
  .wc b{display:block;font-family:var(--display);font-size:.95rem;color:var(--ink)}
  .wc span{font-family:var(--mono);font-size:.54rem;letter-spacing:.1em}
  .wc button{margin-top:.5rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;
    background:transparent;border:1px solid var(--line-2);border-radius:3px;padding:.25rem .5rem;
    cursor:pointer;color:var(--dim)}
  .wc button:hover{border-color:var(--coral);color:var(--coral)}

  /* ------------------------------------------------------------ people */
  .ava{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:flex;
    align-items:center;justify-content:center;font-family:var(--display);
    font-size:.68rem;color:#fff;letter-spacing:.02em}
  .ava.lg{width:60px;height:60px;font-size:1.2rem}
  .ava.xl{width:88px;height:88px;font-size:1.8rem}
  .who-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .7rem .3rem .3rem;
    border-radius:99px;background:var(--sunk);border:1px solid var(--line);cursor:pointer;
    font:inherit;font-size:.82rem;color:var(--ink)}
  .who-chip:hover{border-color:var(--amber)}

  .feed{display:grid;gap:1.1rem}
  @media (min-width:56rem){ .feed{grid-template-columns:repeat(2,1fr)} }
  .fc{background:var(--card);border:1px solid var(--line);border-radius:7px;overflow:hidden;
    box-shadow:0 3px 14px rgba(18,40,63,.07);display:flex;flex-direction:column}
  .fc-img{position:relative;height:170px;overflow:hidden;cursor:pointer}
  .fc-tag{position:absolute;left:.75rem;top:.75rem;display:flex;gap:.35rem;align-items:center;
    background:rgba(11,22,34,.82);color:#fff;border-radius:99px;padding:.25rem .6rem;
    font-family:var(--mono);font-size:.58rem;letter-spacing:.12em}
  .fc-body{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
  .fc-head{display:flex;align-items:center;gap:.6rem}
  .fc-head b{font-size:.9rem}
  .fc-head .m{font-family:var(--mono);font-size:.6rem;color:var(--dim-2)}
  .fc-cap{margin:0;font-size:.92rem}
  .fc-acts{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:auto;padding-top:.6rem;
    border-top:1px solid var(--line)}
  .react{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border-radius:99px;
    border:1px solid var(--line-2);background:#fff;font:inherit;font-size:.76rem;
    color:var(--dim);cursor:pointer}
  .react:hover{border-color:var(--amber);color:var(--ink)}
  .react.on{background:var(--amber);border-color:var(--amber);color:#241c10;font-weight:650}
  .react.on.want{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
  .thread{display:flex;flex-direction:column;gap:.5rem}
  .cmt{display:flex;gap:.5rem;align-items:flex-start}
  .cmt .bub{background:var(--sunk);border-radius:10px;padding:.4rem .65rem;font-size:.84rem}
  .cmt .bub b{display:block;font-size:.7rem;color:var(--dim)}
  .cmtbox{display:flex;gap:.4rem}
  .cmtbox input{flex:1;min-width:0;background:#fff;border:1px solid var(--line-2);
    border-radius:99px;padding:.45rem .8rem;font:inherit;font-size:.84rem;color:var(--ink)}

  .dests{display:grid;gap:.9rem}
  @media (min-width:40rem){ .dests{grid-template-columns:repeat(2,1fr)} }
  @media (min-width:64rem){ .dests{grid-template-columns:repeat(4,1fr)} }
  .dest{position:relative;border-radius:7px;overflow:hidden;height:150px;cursor:pointer;
    border:1px solid var(--line);box-shadow:0 3px 14px rgba(18,40,63,.07)}
  .dest-cap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .8rem .7rem;
    background:linear-gradient(transparent,rgba(11,22,34,.9));color:#fff}
  .dest-cap b{font-family:var(--display);font-size:1.05rem;display:block}
  .dest-cap span{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;opacity:.85}

  .people{display:grid;gap:.9rem}
  @media (min-width:44rem){ .people{grid-template-columns:repeat(2,1fr)} }
  @media (min-width:68rem){ .people{grid-template-columns:repeat(3,1fr)} }
  .pcard{background:var(--card);border:1px solid var(--line);border-radius:7px;padding:1rem;
    display:flex;gap:.85rem;align-items:flex-start;box-shadow:0 3px 14px rgba(18,40,63,.07)}
  .pcard .meta{flex:1;min-width:0}
  .pcard b{display:block;font-size:.98rem}
  .pcard .m{font-family:var(--mono);font-size:.6rem;color:var(--dim-2);margin:.1rem 0 .5rem}
  .pcard .bio{font-size:.85rem;color:var(--dim);margin:0 0 .7rem}
  .codes{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.7rem}
  .code{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;border:1px solid var(--line-2);
    border-radius:3px;padding:.12rem .35rem;color:var(--dim)}
  .code.mut{border-color:var(--amber);color:var(--amber);background:rgba(217,135,4,.08)}
  .follow{padding:.4rem .8rem;border-radius:99px;border:1px solid var(--ink);background:var(--ink);
    color:#fff;font:inherit;font-size:.78rem;font-weight:650;cursor:pointer}
  .follow.on{background:transparent;color:var(--dim);border-color:var(--line-2)}

  .phero{background:var(--card);border:1px solid var(--line);border-radius:7px;overflow:hidden;
    box-shadow:0 3px 14px rgba(18,40,63,.07);margin-bottom:1.5rem}
  .phero-top{height:120px;position:relative}
  .phero-in{padding:0 1.25rem 1rem;display:flex;gap:1rem;align-items:flex-end;
    margin-top:-34px;flex-wrap:wrap}
  .phero .ava{border:3px solid #fff;box-shadow:0 3px 12px rgba(18,40,63,.18)}
  .phero .who{flex:1;min-width:12rem}
  .phero h3{font-family:var(--display);font-size:1.5rem;margin:0}
  .pstats{display:flex;gap:1.5rem;flex-wrap:wrap;padding:0 1.25rem 1.1rem}
  .pstats div{display:flex;flex-direction:column}
  .pstats b{font-family:var(--mono);font-size:1.15rem;color:var(--amber)}
  .stampwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.8rem}
  .sw{position:relative;border-radius:5px;overflow:hidden;height:120px;cursor:pointer;
    border:1px solid var(--line)}
  .sw-cap{position:absolute;left:0;right:0;bottom:0;padding:1rem .6rem .5rem;
    background:linear-gradient(transparent,rgba(11,22,34,.88));color:#fff}
  .sw-cap b{font-family:var(--display);font-size:.82rem;display:block}
  .sw-cap span{font-family:var(--mono);font-size:.52rem;opacity:.85}
  .sw.mut::after{content:"BOTH";position:absolute;top:.4rem;right:.4rem;font-family:var(--mono);
    font-size:.48rem;letter-spacing:.1em;background:var(--amber);color:#241c10;
    padding:.1rem .3rem;border-radius:2px}

  /* ------------------------------------------------------------- sheet */
  .sheet{position:fixed;inset:0;z-index:60;display:none;background:rgba(11,22,34,.7);
    backdrop-filter:blur(6px);padding:1rem;overflow-y:auto}
  .sheet.open{display:block}
  .sheet-in{width:min(100%,54rem);margin:2rem auto;background:var(--card);
    border:1px solid var(--line);border-radius:7px;overflow:hidden;
    box-shadow:0 30px 80px rgba(11,22,34,.35)}
  .sheet-hero{position:relative;height:210px;overflow:hidden}
  .sheet-cap{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1.25rem 1.1rem;
    background:linear-gradient(transparent,rgba(11,22,34,.62) 38%,rgba(11,22,34,.95));color:#fff}
  .sheet-cap h3{font-family:var(--display);font-size:1.7rem;margin:0}
  /* Absolute only over a photograph. The settings, alerts and share sheets put
     this button in a flex header, where `position:absolute` escaped to .sheet
     -- which is inset:0 -- and pinned it to the corner of the window, 300px
     away from the panel it closes. */
  .sheet-close{flex:0 0 auto;z-index:2;background:rgba(11,22,34,.65);
    color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:3px;font-family:var(--mono);
    font-size:.66rem;letter-spacing:.14em;padding:.45rem .7rem;cursor:pointer}
  .sheet-hero .sheet-close{position:absolute;top:.7rem;right:.7rem}
  .sheet-close:hover{border-color:var(--amber);color:var(--amber)}
  .sheet-body{padding:1.25rem;display:grid;gap:1.4rem}
  @media (min-width:44rem){ .sheet-body{grid-template-columns:1.15fr .85fr} }
  .frames{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
  .frame{position:relative;aspect-ratio:1;border-radius:4px;overflow:hidden;margin:0}
  .frame figcaption{position:absolute;left:0;right:0;bottom:0;padding:.35rem .45rem;color:#fff;
    font-family:var(--mono);font-size:.52rem;background:linear-gradient(transparent,rgba(11,22,34,.85))}
  .reel{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;margin-top:.5rem}
  .reel .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
  .reel .play i{width:52px;height:52px;border-radius:50%;background:rgba(11,22,34,.55);
    border:1.5px solid #fff;display:flex;align-items:center;justify-content:center}
  .reel .play i::after{content:"";border-left:13px solid #fff;border-top:8px solid transparent;
    border-bottom:8px solid transparent;margin-left:3px}
  .reel .dur{position:absolute;right:.5rem;bottom:.5rem;font-family:var(--mono);font-size:.56rem;
    background:rgba(11,22,34,.75);color:#fff;padding:.15rem .35rem;border-radius:2px}
  .itin{display:flex;flex-direction:column}
  .day{display:grid;grid-template-columns:2.6rem 1fr;gap:.7rem;padding:.5rem 0;
    border-bottom:1px solid var(--line)}
  .day:last-child{border-bottom:0}
  .day k{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--amber);padding-top:.15rem}
  .day p{margin:0;font-size:.88rem}
  .day small{color:var(--dim-2);font-family:var(--mono);font-size:.6rem}
  .meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .9rem;margin-bottom:1rem}
  .meta-grid k{display:block;font-family:var(--mono);font-size:.52rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--dim-2)}
  .meta-grid v{display:block;font-family:var(--mono);font-size:.8rem}
  .act{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
  .partners{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line)}
  .partner-note{margin:.7rem 0 0;font-size:.8rem;line-height:1.5;color:var(--dim-2)}
  .plan{margin-top:.9rem;padding:.8rem;background:var(--sunk);border-radius:4px;
    font-family:var(--mono);font-size:.7rem;color:var(--dim);white-space:pre-wrap;display:none}
  .plan.show{display:block}

  /* --------------------------------------------------------- postcards */
  .vt-more{opacity:.75}
  .vt-rest{display:contents}
  .hsearch{margin:1.4rem 0 2rem;padding:1.3rem 1.35rem 1.15rem;border-radius:14px;
    background:var(--card);border:1px solid var(--line);
    box-shadow:0 10px 30px rgba(18,40,63,.10)}
  .hsearch-h{margin:.25rem 0 .3rem;font-size:clamp(1.25rem,3.2vw,1.7rem);
    letter-spacing:-.02em}
  .hsearch-p{margin:0 0 .9rem;color:var(--dim);font-size:.93rem;max-width:40rem}
  .hsearch-bar{display:flex;align-items:center;gap:.6rem;padding:.15rem .9rem;
    border-radius:999px;background:var(--sunk);border:1px solid var(--line-2)}
  .hsearch-bar:focus-within{border-color:var(--accent)}
  .hsearch-ic{width:15px;height:15px;flex:none;border:2px solid var(--dim-2);
    border-radius:50%;position:relative}
  .hsearch-ic::after{content:"";position:absolute;right:-5px;bottom:-3px;width:7px;
    height:2px;background:var(--dim-2);transform:rotate(45deg)}
  .hsearch-bar input{flex:1;min-width:0;background:none;border:0;outline:0;
    color:var(--ink);font:inherit;font-size:1rem;padding:.75rem 0}
  .hsearch-n{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
    color:var(--dim-2);white-space:nowrap}
  /* the browser draws its own clear control on a type=search, which sat
     beside ours and gave the box two crosses that did the same thing */
  .hsearch-bar input::-webkit-search-cancel-button,
  .hsearch-bar input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
  /* the house convention for a hit: tint the ground, leave the ink alone */
  .hs-row mark{background:rgba(124,92,255,.26);color:inherit;border-radius:2px;
    padding:0 .1em}
  .hs-x{flex:none;background:none;border:0;color:var(--dim);font-size:1.15rem;
    line-height:1;cursor:pointer;padding:.1rem .2rem;border-radius:4px}
  .hs-x:hover{color:var(--ink)}
  /* the rewind dial */
  .hs-years{display:flex;flex-wrap:wrap;gap:.35rem;margin:.7rem 0 0}
  .tl-bar{margin:.2rem 0 0}
  #tl-years{margin-bottom:.2rem}
  .hs-yr{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
    padding:.32rem .55rem;border-radius:999px;cursor:pointer;
    border:1px solid var(--line);background:transparent;color:var(--dim);
    transition:border-color .15s,color .15s,background .15s}
  .hs-yr:hover{color:var(--ink);border-color:var(--dim-2)}
  .hs-yr.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .hs-yr b{font-weight:600}
  .hs-yr span{opacity:.62;margin-left:.3rem}
  .hs-span{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
    margin:.8rem 0 -.2rem;font-family:var(--mono);font-size:.6rem;
    letter-spacing:.11em;color:var(--dim)}
  .hs-order{font:inherit;letter-spacing:inherit;background:none;cursor:pointer;
    border:1px solid var(--line);color:var(--dim);border-radius:999px;
    padding:.28rem .6rem}
  .hs-order:hover{color:var(--ink);border-color:var(--dim-2)}
  /* the clock under the day rather than beside it -- the column is narrow
     and a wrapped time reads as a second date */
  .hs-time{display:block;font-family:var(--mono);opacity:.62;margin-top:.15rem}
  .hs-row{display:grid;grid-template-columns:5rem 1fr auto;gap:.7rem;
    align-items:baseline;padding:.6rem .2rem;border-top:1px solid var(--line)}
  .hs-row b{display:block;font-size:.92rem;font-weight:600}
  .hs-row .hs-where{display:block;font-family:var(--mono);font-size:.55rem;
    letter-spacing:.12em;color:var(--dim-2)}
  .hs-date{font-family:var(--mono);font-size:.6rem;color:var(--dim-2);
    font-variant-numeric:tabular-nums}
  .hs-kind{font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;
    color:var(--accent)}
  .hs-more{display:inline-block;margin-top:.7rem;font-family:var(--mono);
    font-size:.6rem;letter-spacing:.14em;color:var(--accent);background:none;
    border:0;cursor:pointer;padding:0}
  .hs-empty{margin:.9rem 0 0;color:var(--dim-2);font-size:.9rem}

  /* --------------------------------------------------------- the claim
     Three cards of explanation used to sit under this heading. They are the
     traveller's own photographs now: the shortest way to say "real
     photographs" is to show some. */
  .raw{margin:2.2rem 0 2rem}
  .raw-h{margin:.3rem 0 1.05rem;font-family:var(--display);font-weight:900;
    font-size:clamp(1.3rem,3.4vw,1.95rem);line-height:1.08;letter-spacing:-.02em}
  /* the strip carries its own bottom margin, which would stack on the
     section's and open a hole above the book */
  .raw .horizon{margin-bottom:0}
  .homebook{margin:0 0 2rem}
  .cards{display:grid;gap:1.6rem}
  @media (min-width:44rem){ .cards{grid-template-columns:repeat(2,1fr)} }
  @media (min-width:72rem){ .cards{grid-template-columns:repeat(3,1fr)} }

  /* A postcard is a photograph glued to card, so it is built that way: the
     picture sits in a white border with its own inner shadow, the message is
     on the stock below it, and the franking lands across the stamp the way a
     real cancellation does -- half on the stamp, half on the card. */
  .pc{position:relative;background:var(--fare);color:#241c10;border-radius:3px;
    padding:.55rem .55rem .95rem;
    box-shadow:0 1px 2px rgba(18,40,63,.18), 0 10px 28px rgba(18,40,63,.16),
               inset 0 0 0 1px rgba(255,255,255,.5);
    display:flex;flex-direction:column;gap:.7rem;
    transform:rotate(var(--tilt));transition:transform .25s ease, box-shadow .25s ease}
  .pc:hover{transform:rotate(0deg) translateY(-4px);
    box-shadow:0 2px 4px rgba(18,40,63,.2), 0 18px 40px rgba(18,40,63,.24),
               inset 0 0 0 1px rgba(255,255,255,.5)}
  /* the tooth of the card stock */
  .pc::after{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;
    background-image:var(--ink-mask);background-size:220px 160px;opacity:.5;
    mix-blend-mode:multiply}

  .pc-photo{position:relative;aspect-ratio:4/3;border-radius:2px;overflow:hidden;
    background:var(--shot) center/cover no-repeat;
    box-shadow:inset 0 0 0 1px rgba(36,28,16,.18),
               inset 0 2px 10px rgba(0,0,0,.28)}
  /* the sun-faded look of a card that has been in a drawer */
  .pc-photo::after{content:"";position:absolute;inset:0;
    background:linear-gradient(160deg,rgba(255,236,200,.16),transparent 55%,
      rgba(40,24,10,.14));mix-blend-mode:multiply}
  .pc-place{position:absolute;left:.6rem;bottom:.5rem;z-index:2;
    font-family:var(--display);font-size:1.05rem;letter-spacing:-.01em;color:#fff;
    text-shadow:0 1px 10px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.5)}
  .pc-place small{display:block;font-family:var(--mono);font-size:.44rem;
    letter-spacing:.24em;opacity:.9;font-weight:400}

  /* a real stamp: perforated edge, a picture in it, and a printed value */
  .pc-stamp{position:absolute;top:.95rem;right:.95rem;width:58px;height:70px;z-index:3;
    background:#fbf7ec;padding:7px 6px 5px;transform:rotate(5deg);
    filter:drop-shadow(0 2px 3px rgba(18,40,63,.3));
    /* Perforation is an edge, not a texture. A single tiled radial-gradient
       punched holes through the middle of the stamp as well, which read as a
       colander. Five mask layers instead: a solid centre inset past the teeth,
       and one row of holes along each side. They composite as a union, so the
       middle stays whole and only the border is bitten. */
    --perf:radial-gradient(circle 3px at 4px 4px, transparent 97%, #000 100%);
    -webkit-mask:
      linear-gradient(#000,#000) center / calc(100% - 9px) calc(100% - 9px) no-repeat,
      var(--perf) top left / 8px 8px repeat-x,
      var(--perf) bottom left / 8px 8px repeat-x,
      var(--perf) top left / 8px 8px repeat-y,
      var(--perf) top right / 8px 8px repeat-y;
    mask:
      linear-gradient(#000,#000) center / calc(100% - 9px) calc(100% - 9px) no-repeat,
      var(--perf) top left / 8px 8px repeat-x,
      var(--perf) bottom left / 8px 8px repeat-x,
      var(--perf) top left / 8px 8px repeat-y,
      var(--perf) top right / 8px 8px repeat-y}
  .pc-stamp i{display:block;height:38px;border-radius:1px;
    background:var(--stampshot) center/cover no-repeat;
    box-shadow:inset 0 0 0 1px rgba(36,28,16,.22)}
  .pc-stamp b{display:block;font-family:var(--display);font-size:.6rem;
    text-align:center;color:var(--st);line-height:1.5}
  .pc-stamp span{display:block;font-family:var(--mono);font-size:.34rem;
    letter-spacing:.14em;text-align:center;color:rgba(36,28,16,.6)}

  /* the cancellation, landing across the stamp and onto the card */
  .pc-mark{position:absolute;top:2.4rem;right:2.6rem;width:62px;height:62px;z-index:4;
    border:1.5px solid rgba(36,28,16,.42);border-radius:50%;
    display:flex;align-items:center;justify-content:center;text-align:center;
    transform:rotate(-14deg);font-family:var(--mono);font-size:.4rem;line-height:1.25;
    letter-spacing:.08em;color:rgba(36,28,16,.52);pointer-events:none;
    -webkit-mask-image:var(--ink-mask);mask-image:var(--ink-mask);
    -webkit-mask-size:120px 90px;mask-size:120px 90px}
  .pc-mark::before,.pc-mark::after{content:"";position:absolute;left:-10px;right:-10px;
    height:1.5px;background:rgba(36,28,16,.34)}
  .pc-mark::before{top:16px} .pc-mark::after{bottom:16px}

  .pc-q{font-size:.95rem;line-height:1.5;margin:0;padding:0 .5rem;
    font-family:Georgia,"Iowan Old Style",serif;font-style:italic;
    color:rgba(36,28,16,.9)}
  .pc-by{display:flex;align-items:center;gap:.6rem;padding:0 .5rem;
    border-top:1px dashed rgba(36,28,16,.26);padding-top:.6rem;margin-top:auto}
  .pc-by b{font-size:.88rem}
  .pc-by span{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;
    color:rgba(36,28,16,.6)}

  /* ================================================= day / night cycle
     The sky is computed from the viewer's own clock, so the view out of the
     window is roughly the sky they'd see if they looked up. At night the
     whole palette flips: the cabin dims and the type inverts. */
  body.night{
    --page:#0a0c1b; --card:#14172c; --sunk:#1a1e38;
    --scrim-1:rgba(6,8,20,.94); --scrim-2:rgba(6,8,20,.80);
    --scrim-3:rgba(6,8,20,.70);
    --ink:#eceeff; --dim:#c3c8ee; --dim-2:#aab1e0;
    --line:#242942; --line-2:#313857; --line-3:#454d75;
    /* the accent has to lift off a near-black page, not sink into it */
    --accent:#9b85ff; --accent-2:#3fe0f0; --accent-3:#ff7abf;
    --on-accent:#0b0e14;
    --fare:#efe6d4;
  }
  body.night .rail,body.night .viewnav{background:rgba(21,34,51,.92)}
  body.night footer{background:rgba(21,34,51,.7)}
  /* the connection status is an app detail; at the gate only the links show */
  /* footer is outside <main> now, so the sibling combinator this used
     no longer reaches it; :has on the body says the same thing. */
  body:has(#screen-gate.on) footer #footnote{display:none}
  body.night .react,body.night .mini,body.night .seat,body.night .wc,
  body.night .form-row input,body.night .form-row select,body.night .find input,
  body.night .tc input,body.night .cmtbox input{background:#0f1b2c;color:var(--ink)}
  body.night .nav{background:var(--card);color:var(--ink)}
  body.night .cabin{background:linear-gradient(160deg,#1b2a3e,#111c2b);
    box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06)}
  body.night .porthole{background:linear-gradient(160deg,#26374d,#16222f);
    box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 2px 4px rgba(255,255,255,.12),
               inset 0 -3px 8px rgba(0,0,0,.4)}
  body.night .shade{background:linear-gradient(180deg,#2a3b52,#1a2636)}
  body.night .visa,body.night .data{filter:brightness(.96)}

  /* the readout strip: clock, place, weather */
  .strip{
    display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center;align-items:flex-start;
    font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;color:var(--dim-2);
  }
  .strip div{text-align:center;min-width:4.5rem}
  .strip b{display:block;font-size:.95rem;letter-spacing:.03em;color:var(--ink);
    font-variant-numeric:tabular-nums;margin-top:.15rem}
  .strip .wx{display:flex;align-items:center;gap:.4rem;justify-content:center}
  .strip .wx svg{width:20px;height:20px;flex:0 0 auto}
  .sample{
    display:inline-block;margin-left:.35rem;padding:0 .3rem;border-radius:2px;
    background:var(--line-2);color:var(--dim);font-size:.5rem;letter-spacing:.14em;
    vertical-align:2px;
  }

  /* clock + weather in the app rail */
  .rail-now{
    display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.68rem;
    color:var(--dim);white-space:nowrap;
  }
  .rail-now b{color:var(--ink);font-variant-numeric:tabular-nums}
  .rail-now svg{width:17px;height:17px}

  /* ------------------------------------------------- the departures board
     A real split-flap: each character is a card whose top half falls away to
     reveal the next one. Two halves are painted per cell, so the fold line
     and the shadow across the lower half read the way the mechanical ones do. */
  .flapboard{
    margin-top:1rem;display:grid;grid-template-columns:auto 1fr;
    gap:.5rem .9rem;align-items:center;
    padding:.9rem 1rem;border-radius:12px;
    background:linear-gradient(180deg,rgba(9,14,26,.86),rgba(9,14,26,.72));
    border:1px solid rgba(255,255,255,.07);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(4,10,22,.35);
  }
  .flapboard .fk{
    font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;
    color:rgba(233,240,250,.86);white-space:nowrap;text-align:right;
  }
  /* min-height: a cell's height before the script has put any cells in.
     Empty rows were 0px tall, so the board grew by four rows' worth once it
     filled, and the cabin -- centred against the hero beside it -- slid up
     the page on every load. */
  .flaps{display:flex;gap:2px;flex-wrap:nowrap}
  .flapboard .flaps{min-height:1.44rem}
  .fcard{
    --fd:.17s;
    position:relative;display:block;width:.94em;height:1.44em;
    font-family:var(--mono);font-size:1rem;font-weight:700;
    perspective:140px;flex:0 0 auto;
  }
  .fcard i{
    position:absolute;left:0;right:0;height:50%;overflow:hidden;
    background:#1b2436;color:#f2f6fc;backface-visibility:hidden;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
  }
  .fcard .t,.fcard .ft{top:0;border-radius:3px 3px 0 0}
  .fcard .b,.fcard .fb{bottom:0;border-radius:0 0 3px 3px;
    background:#161e2e;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
  .fcard i span{display:block;height:1.44em;line-height:1.44em;text-align:center;
    font-style:normal}
  .fcard .b span,.fcard .fb span{margin-top:-.72em}
  .fcard::after{                       /* the fold */
    content:"";position:absolute;left:0;right:0;top:50%;height:1px;
    background:rgba(0,0,0,.55);z-index:6;pointer-events:none;
  }
  .fcard .ft{z-index:5;transform-origin:50% 100%;animation:fl-t var(--fd) ease-in forwards}
  .fcard .fb{z-index:4;transform-origin:50% 0;transform:rotateX(90deg);
    animation:fl-b var(--fd) var(--fd) ease-out forwards}
  @keyframes fl-t{to{transform:rotateX(-90deg)}}
  @keyframes fl-b{to{transform:rotateX(0)}}
  .fcard.amber i{color:var(--board-ink)}   /* same reason as .fsrc.live */
  .fsrc{font-family:var(--mono);font-size:.52rem;letter-spacing:.16em;
    color:rgba(233,240,250,.8);grid-column:2;margin-top:-.15rem}
  /* NOT var(--accent). The board housing is dark in both halves of the
     cycle, but the theme accent is not -- in daylight it is a deep violet,
     which put "LIVE - BENGALURU" at 2:1 against near black and made it
     effectively invisible. Anything printed on this board needs a colour
     chosen for the board, not for the page around it. */
  .fsrc.live{color:var(--board-ink)}
  @media (prefers-reduced-motion:reduce){
    .fcard .ft,.fcard .fb{animation:none}
    .fcard .ft{display:none}
    .fcard .fb{transform:none}
  }
  @media (max-width:520px){
    .flapboard{grid-template-columns:1fr;gap:.15rem}
    .flapboard .fk{text-align:left;margin-top:.5rem}
    .fsrc{grid-column:1}
    .fcard{font-size:.86rem}
    .flapboard .flaps{min-height:calc(1.44 * .86rem)}
  }

  /* ======================================================= window seat
     The main page is the view from 11A: a calm cabin interior with all the
     drama outside the glass. Keeping the room light and the sky loud is what
     stops a high-contrast background from eating the type. */
  /* The runway belongs to the way in. The gate and the boarding sequence sit
     on it behind a scrim -- heavy where the copy is, clearing toward the foot
     of the page. The signed-in app does not: it is a room, not a runway, and
     a moving background under a book of photographs is noise. */
  /* The scrim used to fade to fully transparent, which was fine at noon and
     at midnight and bad for the twenty minutes either side of them: at dawn
     and dusk the sky under the lower half of the page goes orange or violet
     at full strength, and the copy sitting on it lost its contrast.

     It floors at --scrim-3 now instead of running out, so there is always
     something between the text and the sky no matter what colour the sky
     has decided to be. */
  #screen-signin,#screen-checkin{
    background:linear-gradient(180deg,
      var(--scrim-1) 0%, var(--scrim-1) 62%, var(--scrim-2) 92%);
  }

  /* The gate no longer takes a screen-wide scrim, and the reason is a scale
     mismatch I had not noticed. That gradient was sized to the document while
     the scene it protects against is fixed to the viewport, so the two only
     agreed when the page was about one screen tall. Once the FAQ and feature
     tabs went in the page passed 2600px, the 0-30% band at 93% opacity
     stretched across the whole first screen, and the takeoff behind it was
     painted out almost completely.

     Contrast now travels with the text that needs it. Nearly everything on
     this page already sits on a card; only the hero column and one label are
     directly on the sky, and each carries its own weather -- a pool of page
     colour blurred well past the type, which reads as haze rather than as a
     panel. It scales with its own block, so no amount of new content further
     down can stretch the protection away from the thing it protects. */
  #screen-gate .gate-grid > div:first-child,
  #screen-gate .shell.gate > div:last-child > .label{
    position:relative;isolation:isolate;
  }
  #screen-gate .gate-grid > div:first-child::before,
  #screen-gate .shell.gate > div:last-child > .label::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    inset:-2.5rem -3.5rem;
    background:radial-gradient(115% 92% at 32% 46%,
      var(--scrim-1) 0%, var(--scrim-1) 46%, var(--scrim-2) 70%, transparent 100%);
    filter:blur(16px);
  }
  #screen-gate .shell.gate > div:last-child > .label::before{inset:-.9rem -2rem}
  /* That haze reaches 3.5rem past its column on purpose, and on a phone the
     column is the screen, so it reached 40px past the right edge -- and a
     mobile browser widens the layout viewport to fit whatever overflows: a
     390px phone laid the page out at 430px and every screen could be dragged
     sideways. Clipped at the screens' own edge, where it was invisible
     anyway. clip, not hidden: hidden would make this a scroll container and
     break every position:sticky inside it. */
  #decks{overflow-x:clip}
  /* The app used to sit on a flat slab. It sits on the sky now -- the same
     sky tokens the porthole and the gate use, so the room you are reading in
     is lit the way it is outside. The panel colour is still there underneath
     at high opacity, because photographs and long text need a calm ground. */
  #screen-app{
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--page) 88%, var(--sky-mid)) 0%,
        color-mix(in srgb, var(--sunk) 90%, var(--sky-low)) 45%,
        color-mix(in srgb, var(--page) 88%, var(--sky-low)) 100%);
  }
  @supports not (color: color-mix(in srgb, red 50%, blue)){
    #screen-app{background:linear-gradient(180deg,var(--page),var(--sunk) 45%,var(--page))}
  }

  /* Ken Burns is what makes a still photograph feel like it is breathing:
     a slow drift and a slow zoom, never resolving. The veil above it does
     the legibility work so the photograph itself is never flattened. */
  .wallpaper{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .wp-layer{
    position:absolute;inset:-6%;
    background-size:cover;background-position:center;
    opacity:0;transition:opacity 2.4s ease-in-out;
    /* blur only. It pushes the wallpaper behind the text so the page stays
       readable, which is structural. The saturate(1.05) that used to ride
       along with it was a colour grade on somebody's own photograph, and
       this product now says it does not do that. */
    filter:blur(2px);
    will-change:transform,opacity;
  }
  .wp-layer.on{opacity:1;animation:wp-burns 34s ease-in-out infinite alternate}
  @keyframes wp-burns{
    from{transform:scale(1.06) translate3d(-1.2%, -0.8%, 0)}
    to  {transform:scale(1.16) translate3d(1.2%, 0.8%, 0)}
  }
  /* the veil is what keeps text readable over a photograph, and it is tuned
     separately for each half of the cycle */
  .wp-veil{position:absolute;inset:0;
    background:linear-gradient(180deg,
      rgba(238,240,251,.90) 0%, rgba(238,240,251,.84) 45%, rgba(238,240,251,.92) 100%)}
  body.night .wp-veil{
    background:linear-gradient(180deg,
      rgba(10,12,27,.90) 0%, rgba(10,12,27,.84) 45%, rgba(10,12,27,.93) 100%)}
  /* with a photograph up, the app panel steps back so the picture reads */
  body.has-wallpaper #screen-app{background:transparent}
  body.has-wallpaper .sf-far,body.has-wallpaper .sf-near{opacity:.12}

  @media (prefers-reduced-motion:reduce){ .wp-layer.on{animation:none} }
  body.no-motion .wp-layer.on{animation:none}

  .skyfield{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  #screen-app{position:relative;z-index:1}
  #screen-app .shell,#screen-app .rail,#screen-app .hero{position:relative;z-index:2}

  /* The stars used to live inside #screen-app, so the .screen{display:none}
     that gates the signed-in pages was hiding the entire night sky from the
     gate -- eight dots that nobody outside the app could ever see. They are
     a property of the sky, not of one screen, so they sit alongside the
     runway now and every screen gets the same night. */
  .nightsky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .skyfield span,.nightsky span{position:absolute;inset:-10% -20%;display:block}

  /* two decks of cloud, different sizes and speeds -- that difference is the
     only thing that makes it read as depth rather than as texture */
  .sf-far{
    background:
      radial-gradient(38rem 9rem at 12% 22%, rgba(255,255,255,.5), transparent 70%),
      radial-gradient(30rem 7rem at 62% 14%, rgba(255,255,255,.42), transparent 72%),
      radial-gradient(44rem 10rem at 88% 34%, rgba(255,255,255,.38), transparent 70%);
    opacity:calc(.55 - var(--star-op, 0) * .42);
    animation:sf-drift 190s linear infinite;
  }
  .sf-near{
    background:
      radial-gradient(22rem 5rem at 28% 58%, rgba(255,255,255,.55), transparent 68%),
      radial-gradient(26rem 6rem at 74% 72%, rgba(255,255,255,.45), transparent 70%);
    opacity:calc(.5 - var(--star-op, 0) * .4);
    animation:sf-drift 96s linear infinite reverse;
  }
  @keyframes sf-drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}

  /* stars fade in exactly as the sky engine says it is getting dark */
  .sf-stars{
    opacity:var(--star-op, 0);
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201000%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20fill%3D%22%23fff%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22m%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23dfe6ff%22%20stop-opacity%3D%22.055%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22b%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2246%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cellipse%20cx%3D%22800%22%20cy%3D%22420%22%20rx%3D%22900%22%20ry%3D%22150%22%20fill%3D%22url%28%23m%29%22%20filter%3D%22url%28%23b%29%22%20transform%3D%22rotate%28-17%20800%20420%29%22%2F%3E%3Ccircle%20cx%3D%221380%22%20cy%3D%22416%22%20r%3D%220.8%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22440%22%20cy%3D%22516%22%20r%3D%220.8%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%22918%22%20cy%3D%22672%22%20r%3D%220.6%22%20opacity%3D%220.58%22%2F%3E%3Ccircle%20cx%3D%22288%22%20cy%3D%22121%22%20r%3D%221.1%22%20opacity%3D%220.61%22%2F%3E%3Ccircle%20cx%3D%221007%22%20cy%3D%22908%22%20r%3D%220.7%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%22510%22%20cy%3D%22168%22%20r%3D%220.7%22%20opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%22551%22%20cy%3D%22560%22%20r%3D%220.5%22%20opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%221158%22%20cy%3D%22478%22%20r%3D%220.9%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%22451%22%20cy%3D%22278%22%20r%3D%220.5%22%20opacity%3D%220.70%22%2F%3E%3Ccircle%20cx%3D%221323%22%20cy%3D%22666%22%20r%3D%220.6%22%20opacity%3D%220.57%22%2F%3E%3Ccircle%20cx%3D%22167%22%20cy%3D%22447%22%20r%3D%220.8%22%20opacity%3D%220.42%22%2F%3E%3Ccircle%20cx%3D%22135%22%20cy%3D%22310%22%20r%3D%220.9%22%20opacity%3D%220.42%22%2F%3E%3Ccircle%20cx%3D%22687%22%20cy%3D%22665%22%20r%3D%220.7%22%20opacity%3D%220.69%22%2F%3E%3Ccircle%20cx%3D%22676%22%20cy%3D%22501%22%20r%3D%220.8%22%20opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%221383%22%20cy%3D%22801%22%20r%3D%220.8%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22475%22%20cy%3D%22532%22%20r%3D%220.5%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%221458%22%20cy%3D%22856%22%20r%3D%220.8%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22357%22%20cy%3D%22370%22%20r%3D%220.5%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%221445%22%20cy%3D%22990%22%20r%3D%220.7%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%221069%22%20cy%3D%22674%22%20r%3D%220.6%22%20opacity%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%2241%22%20cy%3D%22438%22%20r%3D%220.8%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%221368%22%20cy%3D%22101%22%20r%3D%220.6%22%20opacity%3D%220.80%22%2F%3E%3Ccircle%20cx%3D%22421%22%20cy%3D%22400%22%20r%3D%220.7%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%22978%22%20cy%3D%22881%22%20r%3D%220.7%22%20opacity%3D%220.72%22%2F%3E%3Ccircle%20cx%3D%22531%22%20cy%3D%22464%22%20r%3D%220.6%22%20opacity%3D%220.82%22%2F%3E%3Ccircle%20cx%3D%22518%22%20cy%3D%22430%22%20r%3D%221.1%22%20opacity%3D%220.42%22%2F%3E%3Ccircle%20cx%3D%221081%22%20cy%3D%22836%22%20r%3D%220.6%22%20opacity%3D%220.71%22%2F%3E%3Ccircle%20cx%3D%221095%22%20cy%3D%2256%22%20r%3D%220.5%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%221150%22%20cy%3D%22716%22%20r%3D%220.5%22%20opacity%3D%220.84%22%2F%3E%3Ccircle%20cx%3D%221045%22%20cy%3D%22245%22%20r%3D%220.5%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%22901%22%20cy%3D%22578%22%20r%3D%220.8%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%221315%22%20cy%3D%22638%22%20r%3D%220.7%22%20opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%22923%22%20cy%3D%22676%22%20r%3D%220.5%22%20opacity%3D%220.32%22%2F%3E%3Ccircle%20cx%3D%22238%22%20cy%3D%22200%22%20r%3D%220.7%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22699%22%20cy%3D%22310%22%20r%3D%220.7%22%20opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%22715%22%20cy%3D%22340%22%20r%3D%220.7%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%22702%22%20cy%3D%2253%22%20r%3D%220.8%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%22221%22%20cy%3D%22892%22%20r%3D%221.1%22%20opacity%3D%220.67%22%2F%3E%3Ccircle%20cx%3D%22905%22%20cy%3D%22303%22%20r%3D%220.5%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22286%22%20cy%3D%22928%22%20r%3D%221.1%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%221024%22%20cy%3D%22693%22%20r%3D%220.8%22%20opacity%3D%220.84%22%2F%3E%3Ccircle%20cx%3D%221033%22%20cy%3D%22525%22%20r%3D%220.5%22%20opacity%3D%220.80%22%2F%3E%3Ccircle%20cx%3D%22393%22%20cy%3D%22954%22%20r%3D%221.1%22%20opacity%3D%220.50%22%2F%3E%3Ccircle%20cx%3D%22301%22%20cy%3D%22442%22%20r%3D%220.7%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%221364%22%20cy%3D%2296%22%20r%3D%220.5%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22721%22%20cy%3D%22966%22%20r%3D%220.7%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22550%22%20cy%3D%22348%22%20r%3D%220.7%22%20opacity%3D%220.84%22%2F%3E%3Ccircle%20cx%3D%22679%22%20cy%3D%22234%22%20r%3D%220.5%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%221041%22%20cy%3D%22435%22%20r%3D%220.7%22%20opacity%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%221480%22%20cy%3D%22677%22%20r%3D%220.8%22%20opacity%3D%220.66%22%2F%3E%3Ccircle%20cx%3D%221177%22%20cy%3D%22784%22%20r%3D%220.9%22%20opacity%3D%220.74%22%2F%3E%3Ccircle%20cx%3D%22570%22%20cy%3D%22109%22%20r%3D%220.8%22%20opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%221233%22%20cy%3D%22440%22%20r%3D%220.8%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%221166%22%20cy%3D%22661%22%20r%3D%220.7%22%20opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%221560%22%20cy%3D%22963%22%20r%3D%221.1%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%221532%22%20cy%3D%22480%22%20r%3D%220.9%22%20opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%22668%22%20r%3D%221.1%22%20opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%22799%22%20cy%3D%22218%22%20r%3D%220.6%22%20opacity%3D%220.74%22%2F%3E%3Ccircle%20cx%3D%22677%22%20cy%3D%22991%22%20r%3D%220.5%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%22657%22%20cy%3D%22892%22%20r%3D%220.9%22%20opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%22770%22%20cy%3D%22502%22%20r%3D%221.1%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%22976%22%20cy%3D%22347%22%20r%3D%221.1%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%2259%22%20cy%3D%22182%22%20r%3D%220.8%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%221562%22%20cy%3D%22738%22%20r%3D%220.8%22%20opacity%3D%220.44%22%2F%3E%3Ccircle%20cx%3D%221321%22%20cy%3D%22412%22%20r%3D%220.9%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%22644%22%20cy%3D%22122%22%20r%3D%220.5%22%20opacity%3D%220.83%22%2F%3E%3Ccircle%20cx%3D%221356%22%20cy%3D%22713%22%20r%3D%220.7%22%20opacity%3D%220.62%22%2F%3E%3Ccircle%20cx%3D%22451%22%20cy%3D%22335%22%20r%3D%220.8%22%20opacity%3D%220.72%22%2F%3E%3Ccircle%20cx%3D%221038%22%20cy%3D%22362%22%20r%3D%221.1%22%20opacity%3D%220.30%22%2F%3E%3Ccircle%20cx%3D%22157%22%20cy%3D%220%22%20r%3D%220.5%22%20opacity%3D%220.44%22%2F%3E%3Ccircle%20cx%3D%22377%22%20cy%3D%22731%22%20r%3D%221.1%22%20opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%22619%22%20cy%3D%22423%22%20r%3D%220.6%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%221377%22%20cy%3D%22661%22%20r%3D%220.9%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%22353%22%20cy%3D%2243%22%20r%3D%221.1%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%22266%22%20r%3D%220.8%22%20opacity%3D%220.66%22%2F%3E%3Ccircle%20cx%3D%221140%22%20cy%3D%22370%22%20r%3D%221.1%22%20opacity%3D%220.62%22%2F%3E%3Ccircle%20cx%3D%221326%22%20cy%3D%22298%22%20r%3D%220.8%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%22169%22%20cy%3D%22470%22%20r%3D%220.5%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%22109%22%20cy%3D%22570%22%20r%3D%220.5%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%22292%22%20cy%3D%22327%22%20r%3D%221.1%22%20opacity%3D%220.82%22%2F%3E%3Ccircle%20cx%3D%22510%22%20cy%3D%22408%22%20r%3D%221.1%22%20opacity%3D%220.76%22%2F%3E%3Ccircle%20cx%3D%22954%22%20cy%3D%22919%22%20r%3D%220.7%22%20opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%221528%22%20cy%3D%22533%22%20r%3D%221.1%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%221568%22%20cy%3D%22925%22%20r%3D%221.1%22%20opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%221467%22%20cy%3D%22752%22%20r%3D%220.7%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%221345%22%20cy%3D%22749%22%20r%3D%221.1%22%20opacity%3D%220.76%22%2F%3E%3Ccircle%20cx%3D%221324%22%20cy%3D%22618%22%20r%3D%220.6%22%20opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%221129%22%20cy%3D%2212%22%20r%3D%220.6%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%22237%22%20cy%3D%225%22%20r%3D%220.8%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%221423%22%20cy%3D%22284%22%20r%3D%220.8%22%20opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%221515%22%20cy%3D%22246%22%20r%3D%220.7%22%20opacity%3D%220.32%22%2F%3E%3Ccircle%20cx%3D%22726%22%20cy%3D%22624%22%20r%3D%221.1%22%20opacity%3D%220.56%22%2F%3E%3Ccircle%20cx%3D%22903%22%20cy%3D%22552%22%20r%3D%220.6%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%22119%22%20cy%3D%22199%22%20r%3D%220.5%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%221139%22%20cy%3D%22563%22%20r%3D%220.9%22%20opacity%3D%220.73%22%2F%3E%3Ccircle%20cx%3D%22356%22%20cy%3D%2282%22%20r%3D%220.5%22%20opacity%3D%220.72%22%2F%3E%3Ccircle%20cx%3D%22785%22%20cy%3D%22876%22%20r%3D%220.5%22%20opacity%3D%220.83%22%2F%3E%3Ccircle%20cx%3D%221197%22%20cy%3D%2218%22%20r%3D%220.8%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%22984%22%20cy%3D%22312%22%20r%3D%220.6%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%22199%22%20cy%3D%22991%22%20r%3D%220.8%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%221587%22%20cy%3D%22395%22%20r%3D%220.9%22%20opacity%3D%220.72%22%2F%3E%3Ccircle%20cx%3D%22465%22%20cy%3D%22332%22%20r%3D%220.6%22%20opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%221016%22%20cy%3D%22355%22%20r%3D%220.6%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%22646%22%20cy%3D%22381%22%20r%3D%220.9%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%221226%22%20cy%3D%22502%22%20r%3D%221.1%22%20opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%221372%22%20cy%3D%22565%22%20r%3D%220.6%22%20opacity%3D%220.33%22%2F%3E%3Ccircle%20cx%3D%221275%22%20cy%3D%22160%22%20r%3D%220.8%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%22760%22%20cy%3D%22546%22%20r%3D%220.6%22%20opacity%3D%220.61%22%2F%3E%3Ccircle%20cx%3D%22519%22%20cy%3D%22410%22%20r%3D%220.5%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22256%22%20cy%3D%22960%22%20r%3D%221.1%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%2269%22%20cy%3D%22249%22%20r%3D%221.1%22%20opacity%3D%220.50%22%2F%3E%3Ccircle%20cx%3D%221584%22%20cy%3D%22333%22%20r%3D%220.7%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%221051%22%20cy%3D%22337%22%20r%3D%220.9%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%22962%22%20cy%3D%22328%22%20r%3D%220.8%22%20opacity%3D%220.61%22%2F%3E%3Ccircle%20cx%3D%221102%22%20cy%3D%22613%22%20r%3D%220.9%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%22405%22%20cy%3D%22439%22%20r%3D%220.5%22%20opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%22467%22%20cy%3D%22135%22%20r%3D%220.6%22%20opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%2251%22%20cy%3D%22253%22%20r%3D%220.7%22%20opacity%3D%220.66%22%2F%3E%3Ccircle%20cx%3D%221212%22%20cy%3D%22641%22%20r%3D%220.9%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%221070%22%20cy%3D%22336%22%20r%3D%220.9%22%20opacity%3D%220.50%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22605%22%20r%3D%221.1%22%20opacity%3D%220.76%22%2F%3E%3Ccircle%20cx%3D%22262%22%20cy%3D%22484%22%20r%3D%221.1%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22984%22%20cy%3D%2275%22%20r%3D%220.7%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%221578%22%20cy%3D%22943%22%20r%3D%220.6%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%22416%22%20cy%3D%2242%22%20r%3D%220.8%22%20opacity%3D%220.60%22%2F%3E%3Ccircle%20cx%3D%221508%22%20cy%3D%22842%22%20r%3D%220.5%22%20opacity%3D%220.32%22%2F%3E%3Ccircle%20cx%3D%22676%22%20cy%3D%22235%22%20r%3D%221.1%22%20opacity%3D%220.62%22%2F%3E%3Ccircle%20cx%3D%221141%22%20cy%3D%22476%22%20r%3D%220.9%22%20opacity%3D%220.80%22%2F%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22596%22%20r%3D%220.8%22%20opacity%3D%220.33%22%2F%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22296%22%20r%3D%220.6%22%20opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%22625%22%20cy%3D%22639%22%20r%3D%221.1%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%221118%22%20cy%3D%22517%22%20r%3D%220.6%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%22855%22%20cy%3D%22541%22%20r%3D%220.6%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%221147%22%20cy%3D%22410%22%20r%3D%220.5%22%20opacity%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%22361%22%20cy%3D%22983%22%20r%3D%220.6%22%20opacity%3D%220.80%22%2F%3E%3Ccircle%20cx%3D%221405%22%20cy%3D%22744%22%20r%3D%220.6%22%20opacity%3D%220.61%22%2F%3E%3Ccircle%20cx%3D%22731%22%20cy%3D%22196%22%20r%3D%221.1%22%20opacity%3D%220.82%22%2F%3E%3Ccircle%20cx%3D%22607%22%20cy%3D%22487%22%20r%3D%220.7%22%20opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%22311%22%20cy%3D%22381%22%20r%3D%220.8%22%20opacity%3D%220.71%22%2F%3E%3Ccircle%20cx%3D%221105%22%20cy%3D%22442%22%20r%3D%220.7%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%22652%22%20cy%3D%22816%22%20r%3D%220.9%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%22311%22%20cy%3D%2265%22%20r%3D%220.9%22%20opacity%3D%220.71%22%2F%3E%3Ccircle%20cx%3D%221159%22%20cy%3D%22442%22%20r%3D%221.1%22%20opacity%3D%220.40%22%2F%3E%3Ccircle%20cx%3D%22341%22%20cy%3D%22155%22%20r%3D%220.6%22%20opacity%3D%220.74%22%2F%3E%3Ccircle%20cx%3D%22578%22%20cy%3D%22557%22%20r%3D%220.8%22%20opacity%3D%220.74%22%2F%3E%3Ccircle%20cx%3D%221370%22%20cy%3D%22989%22%20r%3D%220.7%22%20opacity%3D%220.67%22%2F%3E%3Ccircle%20cx%3D%22235%22%20cy%3D%22201%22%20r%3D%220.9%22%20opacity%3D%220.70%22%2F%3E%3Ccircle%20cx%3D%221138%22%20cy%3D%22763%22%20r%3D%220.8%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%221249%22%20cy%3D%22320%22%20r%3D%220.5%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%221106%22%20cy%3D%22749%22%20r%3D%220.8%22%20opacity%3D%220.83%22%2F%3E%3Ccircle%20cx%3D%22154%22%20cy%3D%22496%22%20r%3D%220.6%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%22192%22%20cy%3D%22524%22%20r%3D%220.7%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%22142%22%20cy%3D%22520%22%20r%3D%220.8%22%20opacity%3D%220.40%22%2F%3E%3Ccircle%20cx%3D%22714%22%20cy%3D%22888%22%20r%3D%220.7%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%22923%22%20cy%3D%22634%22%20r%3D%221.1%22%20opacity%3D%220.32%22%2F%3E%3Ccircle%20cx%3D%221248%22%20cy%3D%22876%22%20r%3D%220.9%22%20opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%221443%22%20cy%3D%22464%22%20r%3D%221.1%22%20opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%221217%22%20cy%3D%22660%22%20r%3D%220.9%22%20opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%22655%22%20cy%3D%22200%22%20r%3D%220.6%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%221220%22%20cy%3D%22162%22%20r%3D%221.1%22%20opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22387%22%20r%3D%220.5%22%20opacity%3D%220.84%22%2F%3E%3Ccircle%20cx%3D%22143%22%20cy%3D%22652%22%20r%3D%220.6%22%20opacity%3D%220.44%22%2F%3E%3Ccircle%20cx%3D%22288%22%20cy%3D%22459%22%20r%3D%220.7%22%20opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%221244%22%20cy%3D%22506%22%20r%3D%220.7%22%20opacity%3D%220.57%22%2F%3E%3Ccircle%20cx%3D%221383%22%20cy%3D%22512%22%20r%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22373%22%20cy%3D%22296%22%20r%3D%220.8%22%20opacity%3D%220.76%22%2F%3E%3Ccircle%20cx%3D%22736%22%20cy%3D%22575%22%20r%3D%221.1%22%20opacity%3D%220.66%22%2F%3E%3Ccircle%20cx%3D%22199%22%20cy%3D%22349%22%20r%3D%220.8%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%221290%22%20cy%3D%22454%22%20r%3D%220.8%22%20opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%221263%22%20cy%3D%22485%22%20r%3D%220.6%22%20opacity%3D%220.73%22%2F%3E%3Ccircle%20cx%3D%22535%22%20cy%3D%22142%22%20r%3D%221.1%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%221011%22%20cy%3D%2218%22%20r%3D%220.8%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%221096%22%20cy%3D%22581%22%20r%3D%220.6%22%20opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%22972%22%20cy%3D%22540%22%20r%3D%221.1%22%20opacity%3D%220.72%22%2F%3E%3Ccircle%20cx%3D%22826%22%20cy%3D%22873%22%20r%3D%220.7%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%22598%22%20cy%3D%22276%22%20r%3D%220.9%22%20opacity%3D%220.56%22%2F%3E%3Ccircle%20cx%3D%221347%22%20cy%3D%22283%22%20r%3D%221.1%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%22707%22%20cy%3D%22612%22%20r%3D%220.5%22%20opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%221227%22%20cy%3D%22305%22%20r%3D%220.6%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%22743%22%20cy%3D%22364%22%20r%3D%220.6%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22377%22%20cy%3D%22369%22%20r%3D%220.8%22%20opacity%3D%220.84%22%2F%3E%3Ccircle%20cx%3D%22870%22%20cy%3D%22133%22%20r%3D%220.9%22%20opacity%3D%220.44%22%2F%3E%3Ccircle%20cx%3D%22570%22%20cy%3D%22808%22%20r%3D%220.6%22%20opacity%3D%220.50%22%2F%3E%3Ccircle%20cx%3D%22528%22%20cy%3D%22230%22%20r%3D%220.9%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22831%22%20cy%3D%22638%22%20r%3D%220.5%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%22331%22%20cy%3D%22746%22%20r%3D%220.5%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%22523%22%20cy%3D%22957%22%20r%3D%220.8%22%20opacity%3D%220.40%22%2F%3E%3Ccircle%20cx%3D%22904%22%20cy%3D%22378%22%20r%3D%220.7%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%22398%22%20cy%3D%22348%22%20r%3D%220.9%22%20opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%22237%22%20cy%3D%22258%22%20r%3D%220.6%22%20opacity%3D%220.71%22%2F%3E%3Ccircle%20cx%3D%221221%22%20cy%3D%22921%22%20r%3D%220.8%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%221371%22%20cy%3D%22963%22%20r%3D%220.9%22%20opacity%3D%220.62%22%2F%3E%3Ccircle%20cx%3D%221037%22%20cy%3D%2244%22%20r%3D%220.6%22%20opacity%3D%220.84%22%2F%3E%3Ccircle%20cx%3D%22809%22%20cy%3D%22706%22%20r%3D%220.9%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%221292%22%20cy%3D%22675%22%20r%3D%220.7%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22151%22%20cy%3D%22896%22%20r%3D%220.9%22%20opacity%3D%220.50%22%2F%3E%3Ccircle%20cx%3D%221474%22%20cy%3D%22612%22%20r%3D%220.7%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22942%22%20cy%3D%22771%22%20r%3D%221.1%22%20opacity%3D%220.58%22%2F%3E%3Ccircle%20cx%3D%221090%22%20cy%3D%22177%22%20r%3D%220.7%22%20opacity%3D%220.66%22%2F%3E%3Ccircle%20cx%3D%22466%22%20cy%3D%2226%22%20r%3D%220.6%22%20opacity%3D%220.76%22%2F%3E%3Ccircle%20cx%3D%22277%22%20cy%3D%2274%22%20r%3D%220.5%22%20opacity%3D%220.74%22%2F%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%22284%22%20r%3D%221.1%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%221246%22%20cy%3D%22743%22%20r%3D%220.6%22%20opacity%3D%220.32%22%2F%3E%3Ccircle%20cx%3D%22521%22%20cy%3D%22256%22%20r%3D%221.1%22%20opacity%3D%220.60%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%22480%22%20r%3D%221.1%22%20opacity%3D%220.67%22%2F%3E%3Ccircle%20cx%3D%22690%22%20cy%3D%22137%22%20r%3D%220.5%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22451%22%20cy%3D%22271%22%20r%3D%220.7%22%20opacity%3D%220.74%22%2F%3E%3Ccircle%20cx%3D%2281%22%20cy%3D%22443%22%20r%3D%221.1%22%20opacity%3D%220.67%22%2F%3E%3Ccircle%20cx%3D%221016%22%20cy%3D%22832%22%20r%3D%220.9%22%20opacity%3D%220.81%22%2F%3E%3Ccircle%20cx%3D%22777%22%20cy%3D%22489%22%20r%3D%220.9%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22856%22%20cy%3D%22279%22%20r%3D%220.9%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%22929%22%20cy%3D%22629%22%20r%3D%220.5%22%20opacity%3D%220.56%22%2F%3E%3Ccircle%20cx%3D%22425%22%20cy%3D%22392%22%20r%3D%220.8%22%20opacity%3D%220.60%22%2F%3E%3Ccircle%20cx%3D%221236%22%20cy%3D%22201%22%20r%3D%220.6%22%20opacity%3D%220.71%22%2F%3E%3Ccircle%20cx%3D%22865%22%20cy%3D%22500%22%20r%3D%221.1%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%22426%22%20cy%3D%22315%22%20r%3D%220.6%22%20opacity%3D%220.58%22%2F%3E%3Ccircle%20cx%3D%221241%22%20cy%3D%22875%22%20r%3D%220.6%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%221319%22%20cy%3D%22492%22%20r%3D%220.9%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%221500%22%20cy%3D%22905%22%20r%3D%220.7%22%20opacity%3D%220.56%22%2F%3E%3Ccircle%20cx%3D%221116%22%20cy%3D%22103%22%20r%3D%220.8%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22493%22%20cy%3D%2256%22%20r%3D%221.1%22%20opacity%3D%220.66%22%2F%3E%3Ccircle%20cx%3D%22492%22%20cy%3D%22414%22%20r%3D%220.6%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%22575%22%20r%3D%220.9%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%22603%22%20cy%3D%22377%22%20r%3D%220.5%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%22326%22%20r%3D%220.5%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%22787%22%20cy%3D%22248%22%20r%3D%220.5%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%22422%22%20cy%3D%2234%22%20r%3D%220.5%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%22232%22%20cy%3D%22327%22%20r%3D%220.8%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%22931%22%20cy%3D%22930%22%20r%3D%220.7%22%20opacity%3D%220.56%22%2F%3E%3Ccircle%20cx%3D%22643%22%20cy%3D%22547%22%20r%3D%220.7%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22958%22%20cy%3D%22211%22%20r%3D%220.8%22%20opacity%3D%220.84%22%2F%3E%3Ccircle%20cx%3D%221396%22%20cy%3D%22340%22%20r%3D%220.5%22%20opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%22254%22%20cy%3D%22227%22%20r%3D%220.6%22%20opacity%3D%220.76%22%2F%3E%3Ccircle%20cx%3D%22478%22%20cy%3D%22971%22%20r%3D%220.5%22%20opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%2294%22%20cy%3D%22199%22%20r%3D%220.9%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22862%22%20cy%3D%22472%22%20r%3D%220.5%22%20opacity%3D%220.57%22%2F%3E%3Ccircle%20cx%3D%22775%22%20cy%3D%22215%22%20r%3D%220.5%22%20opacity%3D%220.76%22%2F%3E%3Ccircle%20cx%3D%22406%22%20cy%3D%22939%22%20r%3D%220.9%22%20opacity%3D%220.80%22%2F%3E%3Ccircle%20cx%3D%221341%22%20cy%3D%22604%22%20r%3D%220.9%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22814%22%20cy%3D%22481%22%20r%3D%220.5%22%20opacity%3D%220.33%22%2F%3E%3Ccircle%20cx%3D%221127%22%20cy%3D%2288%22%20r%3D%220.8%22%20opacity%3D%220.60%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%22915%22%20r%3D%220.8%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22770%22%20cy%3D%22309%22%20r%3D%220.7%22%20opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%221496%22%20cy%3D%22963%22%20r%3D%220.9%22%20opacity%3D%220.72%22%2F%3E%3Ccircle%20cx%3D%22480%22%20cy%3D%22164%22%20r%3D%220.9%22%20opacity%3D%220.67%22%2F%3E%3Ccircle%20cx%3D%221140%22%20cy%3D%22908%22%20r%3D%220.8%22%20opacity%3D%220.69%22%2F%3E%3Ccircle%20cx%3D%221196%22%20cy%3D%22590%22%20r%3D%220.7%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%22274%22%20cy%3D%22316%22%20r%3D%220.7%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%22287%22%20cy%3D%22491%22%20r%3D%220.8%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%22407%22%20cy%3D%22107%22%20r%3D%220.7%22%20opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%22217%22%20cy%3D%22350%22%20r%3D%220.7%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%22629%22%20cy%3D%22197%22%20r%3D%220.9%22%20opacity%3D%220.67%22%2F%3E%3Ccircle%20cx%3D%22298%22%20cy%3D%2255%22%20r%3D%220.8%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22740%22%20cy%3D%22230%22%20r%3D%220.5%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%221280%22%20cy%3D%22409%22%20r%3D%220.8%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22858%22%20cy%3D%22518%22%20r%3D%221.1%22%20opacity%3D%220.83%22%2F%3E%3Ccircle%20cx%3D%22475%22%20cy%3D%22637%22%20r%3D%220.8%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%221066%22%20cy%3D%22341%22%20r%3D%220.9%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%221375%22%20cy%3D%22513%22%20r%3D%220.6%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%22945%22%20cy%3D%22532%22%20r%3D%220.7%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%221197%22%20cy%3D%22603%22%20r%3D%220.5%22%20opacity%3D%220.80%22%2F%3E%3Ccircle%20cx%3D%22242%22%20cy%3D%22989%22%20r%3D%221.1%22%20opacity%3D%220.32%22%2F%3E%3Ccircle%20cx%3D%22785%22%20cy%3D%22312%22%20r%3D%221.1%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%22189%22%20cy%3D%22739%22%20r%3D%220.6%22%20opacity%3D%220.56%22%2F%3E%3Ccircle%20cx%3D%221308%22%20cy%3D%22721%22%20r%3D%221.1%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22951%22%20cy%3D%22818%22%20r%3D%220.7%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%22931%22%20cy%3D%22251%22%20r%3D%220.6%22%20opacity%3D%220.69%22%2F%3E%3Ccircle%20cx%3D%221000%22%20cy%3D%22314%22%20r%3D%220.9%22%20opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%22850%22%20r%3D%220.5%22%20opacity%3D%220.84%22%2F%3E%3Ccircle%20cx%3D%221519%22%20cy%3D%22888%22%20r%3D%221.1%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%22330%22%20cy%3D%22661%22%20r%3D%220.9%22%20opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%221263%22%20cy%3D%22766%22%20r%3D%220.7%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22454%22%20r%3D%220.8%22%20opacity%3D%220.66%22%2F%3E%3Ccircle%20cx%3D%22312%22%20cy%3D%22882%22%20r%3D%221.1%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%221297%22%20cy%3D%22386%22%20r%3D%220.8%22%20opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%221581%22%20cy%3D%22384%22%20r%3D%221.1%22%20opacity%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%22778%22%20cy%3D%22703%22%20r%3D%220.8%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%221272%22%20cy%3D%22567%22%20r%3D%220.8%22%20opacity%3D%220.76%22%2F%3E%3Ccircle%20cx%3D%22223%22%20cy%3D%22920%22%20r%3D%220.5%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%2299%22%20cy%3D%22507%22%20r%3D%220.9%22%20opacity%3D%220.32%22%2F%3E%3Ccircle%20cx%3D%221549%22%20cy%3D%22664%22%20r%3D%221.1%22%20opacity%3D%220.80%22%2F%3E%3Ccircle%20cx%3D%22207%22%20cy%3D%22342%22%20r%3D%220.7%22%20opacity%3D%220.32%22%2F%3E%3Ccircle%20cx%3D%22281%22%20cy%3D%2239%22%20r%3D%220.5%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%221377%22%20cy%3D%22570%22%20r%3D%220.6%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%22630%22%20cy%3D%22275%22%20r%3D%220.7%22%20opacity%3D%220.60%22%2F%3E%3Ccircle%20cx%3D%22434%22%20cy%3D%22520%22%20r%3D%220.9%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%22821%22%20cy%3D%22329%22%20r%3D%220.7%22%20opacity%3D%220.60%22%2F%3E%3Ccircle%20cx%3D%22148%22%20cy%3D%22752%22%20r%3D%220.7%22%20opacity%3D%220.33%22%2F%3E%3Ccircle%20cx%3D%22219%22%20cy%3D%22597%22%20r%3D%220.6%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22778%22%20cy%3D%22772%22%20r%3D%221.1%22%20opacity%3D%220.62%22%2F%3E%3Ccircle%20cx%3D%221553%22%20cy%3D%22281%22%20r%3D%220.8%22%20opacity%3D%220.76%22%2F%3E%3Ccircle%20cx%3D%221330%22%20cy%3D%22493%22%20r%3D%220.6%22%20opacity%3D%220.69%22%2F%3E%3Ccircle%20cx%3D%22606%22%20cy%3D%22460%22%20r%3D%220.5%22%20opacity%3D%220.40%22%2F%3E%3Ccircle%20cx%3D%22608%22%20cy%3D%22217%22%20r%3D%220.9%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%22780%22%20cy%3D%22224%22%20r%3D%220.5%22%20opacity%3D%220.66%22%2F%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22475%22%20r%3D%221.1%22%20opacity%3D%220.66%22%2F%3E%3Ccircle%20cx%3D%22198%22%20cy%3D%22324%22%20r%3D%220.5%22%20opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%221162%22%20cy%3D%22433%22%20r%3D%221.1%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%22479%22%20cy%3D%22327%22%20r%3D%220.9%22%20opacity%3D%220.44%22%2F%3E%3Ccircle%20cx%3D%22594%22%20cy%3D%22899%22%20r%3D%220.9%22%20opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%221437%22%20cy%3D%22946%22%20r%3D%220.8%22%20opacity%3D%220.61%22%2F%3E%3Ccircle%20cx%3D%221166%22%20cy%3D%22427%22%20r%3D%220.5%22%20opacity%3D%220.60%22%2F%3E%3Ccircle%20cx%3D%22369%22%20cy%3D%22441%22%20r%3D%220.9%22%20opacity%3D%220.58%22%2F%3E%3Ccircle%20cx%3D%22238%22%20cy%3D%22156%22%20r%3D%220.7%22%20opacity%3D%220.57%22%2F%3E%3Ccircle%20cx%3D%221448%22%20cy%3D%22143%22%20r%3D%221.1%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%221205%22%20cy%3D%22868%22%20r%3D%221.1%22%20opacity%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%22694%22%20cy%3D%22150%22%20r%3D%221.1%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%22379%22%20r%3D%220.8%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22684%22%20cy%3D%22515%22%20r%3D%220.5%22%20opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%2213%22%20r%3D%221.1%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%221189%22%20cy%3D%22606%22%20r%3D%220.5%22%20opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%22432%22%20cy%3D%22353%22%20r%3D%220.5%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2225%22%20r%3D%220.9%22%20opacity%3D%220.80%22%2F%3E%3Ccircle%20cx%3D%221379%22%20cy%3D%22445%22%20r%3D%220.7%22%20opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%221257%22%20cy%3D%22629%22%20r%3D%220.7%22%20opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%22580%22%20cy%3D%2288%22%20r%3D%220.6%22%20opacity%3D%220.58%22%2F%3E%3Ccircle%20cx%3D%22860%22%20cy%3D%22265%22%20r%3D%220.7%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22813%22%20cy%3D%22255%22%20r%3D%220.6%22%20opacity%3D%220.72%22%2F%3E%3Ccircle%20cx%3D%22753%22%20cy%3D%22559%22%20r%3D%220.8%22%20opacity%3D%220.73%22%2F%3E%3Ccircle%20cx%3D%221227%22%20cy%3D%22710%22%20r%3D%220.6%22%20opacity%3D%220.40%22%2F%3E%3Ccircle%20cx%3D%221366%22%20cy%3D%2270%22%20r%3D%220.9%22%20opacity%3D%220.82%22%2F%3E%3Ccircle%20cx%3D%221202%22%20cy%3D%22775%22%20r%3D%220.8%22%20opacity%3D%220.57%22%2F%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22234%22%20r%3D%221.1%22%20opacity%3D%220.74%22%2F%3E%3Ccircle%20cx%3D%221389%22%20cy%3D%22636%22%20r%3D%220.8%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%22793%22%20cy%3D%22119%22%20r%3D%220.7%22%20opacity%3D%220.81%22%2F%3E%3Ccircle%20cx%3D%22412%22%20cy%3D%22181%22%20r%3D%220.7%22%20opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%221341%22%20cy%3D%22675%22%20r%3D%220.9%22%20opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%22691%22%20cy%3D%2295%22%20r%3D%220.7%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%22651%22%20cy%3D%22335%22%20r%3D%220.8%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%221024%22%20cy%3D%22409%22%20r%3D%220.9%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22257%22%20cy%3D%22484%22%20r%3D%220.8%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%22900%22%20cy%3D%22255%22%20r%3D%220.6%22%20opacity%3D%220.67%22%2F%3E%3Ccircle%20cx%3D%22746%22%20cy%3D%22451%22%20r%3D%220.6%22%20opacity%3D%220.82%22%2F%3E%3Ccircle%20cx%3D%221567%22%20cy%3D%22251%22%20r%3D%221.1%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%221323%22%20cy%3D%22696%22%20r%3D%221.1%22%20opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%22143%22%20cy%3D%22507%22%20r%3D%220.8%22%20opacity%3D%220.82%22%2F%3E%3Ccircle%20cx%3D%22356%22%20cy%3D%22149%22%20r%3D%220.7%22%20opacity%3D%220.62%22%2F%3E%3Ccircle%20cx%3D%221435%22%20cy%3D%22425%22%20r%3D%220.9%22%20opacity%3D%220.83%22%2F%3E%3Ccircle%20cx%3D%22141%22%20cy%3D%22202%22%20r%3D%220.9%22%20opacity%3D%220.56%22%2F%3E%3Ccircle%20cx%3D%22255%22%20cy%3D%22102%22%20r%3D%220.7%22%20opacity%3D%220.69%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%22332%22%20r%3D%220.5%22%20opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22130%22%20r%3D%220.9%22%20opacity%3D%220.74%22%2F%3E%3Ccircle%20cx%3D%22954%22%20cy%3D%22445%22%20r%3D%220.6%22%20opacity%3D%220.81%22%2F%3E%3Ccircle%20cx%3D%221307%22%20cy%3D%22739%22%20r%3D%220.5%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22558%22%20cy%3D%22874%22%20r%3D%220.5%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%22851%22%20cy%3D%22335%22%20r%3D%221.1%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%221021%22%20cy%3D%22313%22%20r%3D%220.5%22%20opacity%3D%220.81%22%2F%3E%3Ccircle%20cx%3D%221592%22%20cy%3D%22993%22%20r%3D%220.7%22%20opacity%3D%220.67%22%2F%3E%3C%2Fsvg%3E");
    background-size:cover;background-position:center;
    animation:sf-twinkle 7s ease-in-out infinite alternate;
  }
  /* The bright stars are a separate layer for one reason: they have to
     twinkle out of step with the faint ones. A whole sky pulsing together
     reads as a flickering light, not as air moving in front of stars. */
  .sf-bright{
    opacity:var(--star-op, 0);
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201000%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20fill%3D%22%23fff%22%3E%3Ccircle%20cx%3D%221151%22%20cy%3D%22185%22%20r%3D%221.9%22%20opacity%3D%220.81%22%2F%3E%3Cpath%20d%3D%22M1141%20185%20h18.6%20M1151%20176%20v18.6%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20opacity%3D%220.40%22%2F%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22765%22%20r%3D%221.9%22%20opacity%3D%220.94%22%2F%3E%3Cpath%20d%3D%22M329%20765%20h18.7%20M338%20755%20v18.7%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%221167%22%20cy%3D%22437%22%20r%3D%221.8%22%20opacity%3D%220.97%22%2F%3E%3Cpath%20d%3D%22M1158%20437%20h17.9%20M1167%20428%20v17.9%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%22267%22%20cy%3D%22361%22%20r%3D%221.6%22%20opacity%3D%220.93%22%2F%3E%3Ccircle%20cx%3D%221033%22%20cy%3D%22178%22%20r%3D%221.8%22%20opacity%3D%220.84%22%2F%3E%3Cpath%20d%3D%22M1024%20178%20h18.0%20M1033%20169%20v18.0%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20opacity%3D%220.42%22%2F%3E%3Ccircle%20cx%3D%221454%22%20cy%3D%22192%22%20r%3D%222.0%22%20opacity%3D%220.89%22%2F%3E%3Cpath%20d%3D%22M1443%20192%20h20.3%20M1454%20182%20v20.3%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20opacity%3D%220.44%22%2F%3E%3Ccircle%20cx%3D%22460%22%20cy%3D%22504%22%20r%3D%221.4%22%20opacity%3D%220.96%22%2F%3E%3Ccircle%20cx%3D%22668%22%20cy%3D%22783%22%20r%3D%221.7%22%20opacity%3D%220.82%22%2F%3E%3Cpath%20d%3D%22M659%20783%20h17.2%20M668%20774%20v17.2%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22858%22%20cy%3D%22365%22%20r%3D%221.8%22%20opacity%3D%220.78%22%2F%3E%3Cpath%20d%3D%22M849%20365%20h17.8%20M858%20356%20v17.8%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%221063%22%20cy%3D%22303%22%20r%3D%221.4%22%20opacity%3D%220.91%22%2F%3E%3Ccircle%20cx%3D%22125%22%20cy%3D%22600%22%20r%3D%222.0%22%20opacity%3D%220.81%22%2F%3E%3Cpath%20d%3D%22M115%20600%20h20.0%20M125%20590%20v20.0%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20opacity%3D%220.40%22%2F%3E%3Ccircle%20cx%3D%221370%22%20cy%3D%22532%22%20r%3D%221.6%22%20opacity%3D%220.90%22%2F%3E%3Ccircle%20cx%3D%22864%22%20cy%3D%22662%22%20r%3D%221.6%22%20opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%22107%22%20cy%3D%22678%22%20r%3D%221.6%22%20opacity%3D%220.97%22%2F%3E%3Ccircle%20cx%3D%22365%22%20cy%3D%22306%22%20r%3D%221.4%22%20opacity%3D%220.88%22%2F%3E%3Ccircle%20cx%3D%22608%22%20cy%3D%22337%22%20r%3D%221.9%22%20opacity%3D%220.75%22%2F%3E%3Cpath%20d%3D%22M598%20337%20h19.0%20M608%20328%20v19.0%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22787%22%20cy%3D%22460%22%20r%3D%221.3%22%20opacity%3D%220.83%22%2F%3E%3Ccircle%20cx%3D%221245%22%20cy%3D%22461%22%20r%3D%221.8%22%20opacity%3D%220.88%22%2F%3E%3Cpath%20d%3D%22M1236%20461%20h18.2%20M1245%20451%20v18.2%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20opacity%3D%220.44%22%2F%3E%3Ccircle%20cx%3D%22620%22%20cy%3D%22485%22%20r%3D%221.5%22%20opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%22878%22%20cy%3D%22670%22%20r%3D%221.6%22%20opacity%3D%220.82%22%2F%3E%3Ccircle%20cx%3D%22915%22%20cy%3D%22867%22%20r%3D%221.7%22%20opacity%3D%220.94%22%2F%3E%3Ccircle%20cx%3D%221269%22%20cy%3D%22269%22%20r%3D%222.0%22%20opacity%3D%220.85%22%2F%3E%3Cpath%20d%3D%22M1258%20269%20h20.4%20M1269%20259%20v20.4%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%221447%22%20cy%3D%22583%22%20r%3D%221.4%22%20opacity%3D%220.92%22%2F%3E%3Ccircle%20cx%3D%22999%22%20cy%3D%22633%22%20r%3D%222.0%22%20opacity%3D%220.96%22%2F%3E%3Cpath%20d%3D%22M989%20633%20h19.5%20M999%20623%20v19.5%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%221273%22%20cy%3D%22221%22%20r%3D%221.8%22%20opacity%3D%220.89%22%2F%3E%3Cpath%20d%3D%22M1263%20221%20h18.4%20M1273%20212%20v18.4%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.6%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22221%22%20cy%3D%2262%22%20r%3D%221.5%22%20opacity%3D%220.79%22%2F%3E%3C%2Fsvg%3E");
    background-size:cover;background-position:center;
    animation:sf-twinkle-2 4.3s ease-in-out infinite alternate;
  }
  @keyframes sf-twinkle{from{filter:brightness(.75)}to{filter:brightness(1.25)}}
  @keyframes sf-twinkle-2{from{filter:brightness(.6)}to{filter:brightness(1.35)}}

  /* one aircraft, crossing every couple of minutes, dragging a contrail */
  .sf-jet{inset:auto 0 auto 0;height:0;top:16%}
  .sf-jet i{
    position:absolute;left:-14rem;width:11rem;height:2px;border-radius:2px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.55));
    animation:sf-cross 34s linear infinite;
    animation-delay:9s;
  }
  .sf-jet i::after{
    content:"";position:absolute;right:-7px;top:-3px;
    border-left:9px solid rgba(255,255,255,.85);
    border-top:4px solid transparent;border-bottom:4px solid transparent;
  }
  @keyframes sf-cross{
    0%{transform:translateX(0) translateY(0);opacity:0}
    6%{opacity:.85} 88%{opacity:.85}
    100%{transform:translateX(115vw) translateY(-5vh);opacity:0}
  }

  @media (prefers-reduced-motion:reduce){
    .sf-far,.sf-near,.sf-stars,.sf-bright,.sf-jet i{animation:none}
    .sf-jet{display:none}
  }
  body.no-motion .sf-far,body.no-motion .sf-near,
  body.no-motion .sf-stars,body.no-motion .sf-bright,
  body.no-motion .sf-jet i{animation:none}
  body.no-motion .sf-jet{display:none}
  /* minmax(0,1fr), not the implicit auto column: auto grows to the widest
     thing's min-content, and on a 320px phone the departures board made the
     whole hero column 349px wide inside a 288px shell. */
  .gate-grid{display:grid;gap:2.5rem;align-items:center;grid-template-columns:minmax(0,1fr)}
  @media (min-width:62rem){ .gate-grid{grid-template-columns:1fr auto} }

  .cabin{
    position:relative;padding:2rem 2.25rem;border-radius:2.5rem;
    background:linear-gradient(160deg,#fbfcfe,#e9edf3);
    box-shadow:0 20px 60px rgba(18,40,63,.14), inset 0 1px 0 #fff;
    display:flex;gap:1.25rem;flex-direction:column;align-items:center;
  }
  .cabin::before{                      /* the seam of the cabin liner */
    content:"";position:absolute;left:1rem;right:1rem;top:1rem;height:1px;
    background:linear-gradient(90deg,transparent,rgba(18,40,63,.12),transparent);
  }

  .porthole{
    width:min(74vw,270px);aspect-ratio:5/7;padding:13px;
    border-radius:46% 46% 46% 46% / 33% 33% 33% 33%;
    background:linear-gradient(160deg,#eef1f5,#d6dce4);
    box-shadow:0 10px 30px rgba(18,40,63,.18), inset 0 2px 4px #fff,
               inset 0 -3px 8px rgba(18,40,63,.16);
    position:relative;
  }
  .pane{
    position:relative;width:100%;height:100%;overflow:hidden;
    border-radius:46% 46% 46% 46% / 33% 33% 33% 33%;
    background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 52%,var(--sky-low) 100%);
    box-shadow:inset 0 0 40px rgba(6,12,30,.45);
    transition:background 1.2s linear;
  }
  .pane .sun{
    position:absolute;left:var(--sun-x,50%);bottom:var(--sun-y,26%);
    width:56px;height:56px;margin-left:-28px;border-radius:50%;
    opacity:var(--sun-op,1);
    background:var(--sun-col,#fff2cf);
    box-shadow:0 0 38px 16px var(--sun-glow,rgba(255,206,130,.7));
    transition:left 1.2s linear,bottom 1.2s linear;
  }

  /* The moon, at the shape it really is tonight. Same base size as the sun
     because they are nearly the same size in the sky -- 31.1 arcminutes
     against 31.99 -- and drawing it smaller made a thin crescent unreadable.

     It is never hidden and never asks where you are. That was the version that
     kept vanishing: correct, and indistinguishable from broken. */
  .pane .moon{
    position:absolute;left:var(--moon-x,68%);bottom:var(--moon-y,58%);
    width:56px;height:56px;margin-left:-28px;border-radius:50%;
    opacity:0;background:#eef1fb;
    box-shadow:0 0 26px 6px rgba(226,233,255,.34);
    transition:left 1.2s linear,bottom 1.2s linear;
    -webkit-mask-image:var(--moon-mask);mask-image:var(--moon-mask);
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
  }
  /* the old moon in the new moon's arms: the unlit limb, lit by earthlight.
     Without it a five per cent crescent is a two pixel sliver, which is the
     whole reason the disc looked missing. */
  .pane .earthshine{
    position:absolute;left:var(--moon-x,68%);bottom:var(--moon-y,58%);
    width:56px;height:56px;margin-left:-28px;border-radius:50%;
    background:#aab4d8;opacity:var(--shine-op,0);pointer-events:none;
    transition:left 1.2s linear,bottom 1.2s linear;
  }
  .pane .stars{
    position:absolute;inset:0;opacity:var(--star-op,0);transition:opacity 1.2s linear;
    background-image:
      radial-gradient(1.4px 1.4px at 18% 22%,#fff,transparent),
      radial-gradient(1.2px 1.2px at 62% 14%,#fff,transparent),
      radial-gradient(1.6px 1.6px at 78% 34%,#fff,transparent),
      radial-gradient(1.1px 1.1px at 34% 42%,#fff,transparent),
      radial-gradient(1.3px 1.3px at 50% 8%,#fff,transparent),
      radial-gradient(1.2px 1.2px at 88% 18%,#fff,transparent),
      radial-gradient(1px 1px at 26% 60%,#fff,transparent);
  }
  .pane .rain{
    position:absolute;inset:-20%;opacity:0;transition:opacity .6s;
    background:repeating-linear-gradient(74deg,
      rgba(255,255,255,.42) 0 1px, transparent 1px 9px);
    animation:pour .55s linear infinite;
  }
  .pane.wet .rain{opacity:.65}
  @keyframes pour{to{transform:translate3d(-9px,26px,0)}}
  .pane .deck{                          /* the cloud deck below */
    position:absolute;left:-10%;right:-10%;bottom:0;height:34%;
    background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,236,214,.92) 55%,#ffe6c6);
    border-radius:50% 50% 0 0 / 28% 28% 0 0;
  }
  .pane .puff{
    position:absolute;border-radius:50%;background:rgba(255,255,255,.55);
    filter:blur(6px);animation:drift 26s linear infinite;
  }
  .pane .p1{width:120px;height:34px;left:-20%;bottom:30%}
  .pane .p2{width:90px;height:26px;left:40%;bottom:41%;animation-duration:38s;opacity:.7}
  .pane .p3{width:150px;height:40px;left:10%;bottom:22%;animation-duration:31s;opacity:.8}
  @keyframes drift{from{transform:translateX(-40%)}to{transform:translateX(240%)}}
  .pane .wing{
    position:absolute;right:-34%;bottom:-8%;width:105%;height:42%;
    background:linear-gradient(160deg,#dfe4ea,#9aa5b3);
    clip-path:polygon(100% 40%,100% 62%,4% 100%,26% 62%);
    box-shadow:0 -2px 6px rgba(6,12,30,.25);
  }
  .porthole .glare{
    position:absolute;inset:13px;border-radius:inherit;pointer-events:none;
    background:linear-gradient(128deg,rgba(255,255,255,.42) 0 26%,transparent 46%);
  }
  .porthole .shade{                     /* the pull-down blind, parked */
    position:absolute;left:13px;right:13px;top:13px;height:11%;
    background:linear-gradient(180deg,#eaeef3,#cfd6df);
    border-radius:46% 46% 8px 8px / 60% 60% 8px 8px;
    box-shadow:0 3px 6px rgba(18,40,63,.2);
  }

  .readout{
    display:flex;gap:1.1rem;flex-wrap:wrap;justify-content:center;
    font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--dim-2);
  }
  .readout b{display:block;font-size:.9rem;letter-spacing:.04em;color:var(--ink);
    font-variant-numeric:tabular-nums}
  .readout div{text-align:center}

  @media (max-width:62rem){
    .cabin{padding:1.5rem}
    .porthole{width:min(70vw,220px)}
  }
  /* The board is eighteen fixed-width cells a row, which needs about 280px.
     Below 400px there is less than that inside the cabin, so the padding
     gives a little back and the cells shrink with the screen -- at 320px
     they are 11.6px type rather than spilling out of the cabin. */
  @media (max-width:400px){
    .cabin{padding:1.5rem 1rem}
    .flapboard{padding:.9rem .75rem}
    .flapboard .flaps{--fc:min(.86rem, calc((100vw - 88px) / 16.92 - 2.13px));
      min-height:calc(1.44 * var(--fc))}
    .flapboard .fcard{font-size:var(--fc)}
  }

  /* ============================================================== logo
     Rebuilt as vector from the brand sheet so one source serves every size
     on it: full (>=220px), medium (>=120px), small (>=80px) and the mark
     alone for the favicon and the passport crest. */
  .brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
  /* object-fit matters once .lm is a raster rather than the drawn svg:
     the existing .brand.full/.sm/.mark rules below set the box, and a logo
     that is not perfectly square should letterbox inside it, not stretch. */
  .brand{cursor:pointer}
  .lm-wrap{position:relative;display:block;flex:0 0 auto;line-height:0}
  .brand .lm{flex:0 0 auto;display:block;object-fit:contain}

  /* An aircraft crosses the mark now and then, dragging a contrail behind
     it. Drawn beside the logo rather than inside it, because the logo is a
     raster file the site does not own and should not be reaching into. */
  .lm-trail{
    position:absolute;left:-8%;top:14%;width:26%;height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.9));
    opacity:0;pointer-events:none;
    animation:lm-cross 9s ease-in-out infinite;
  }
  body:not(.night) .lm-trail{
    background:linear-gradient(90deg,transparent,rgba(91,63,214,.85));
  }
  .lm-trail::after{
    content:"";position:absolute;right:-5px;top:-2.5px;
    border-left:7px solid currentColor;
    border-top:3px solid transparent;border-bottom:3px solid transparent;
    color:rgba(255,255,255,.95);
  }
  body:not(.night) .lm-trail::after{color:#5b3fd6}
  @keyframes lm-cross{
    0%,62%{transform:translate(0,0) rotate(-8deg);opacity:0}
    68%{opacity:1}
    92%{opacity:1}
    100%{transform:translate(340%,-38%) rotate(-8deg);opacity:0}
  }

  /* the play triangle in the wordmark breathes, and lights up on hover */
  .brand:hover .lm{filter:drop-shadow(0 0 10px rgba(124,92,255,.5))}
  .brand .lm{transition:filter .25s, transform .25s}
  .brand:active .lm{transform:scale(.94)}

  @media (prefers-reduced-motion:reduce){ .lm-trail{animation:none;opacity:0} }
  body.no-motion .lm-trail{animation:none;opacity:0}
  .brand .lw{display:flex;flex-direction:column;gap:.15rem;min-width:0}
  .brand .lw-name{
    display:flex;align-items:center;gap:.32em;
    font-family:var(--display);font-weight:900;letter-spacing:-.035em;
    line-height:.9;color:var(--ink);
  }
  /* The play triangle that used to sit here is gone. The R glyph beside the
     wordmark is the mark; a second one in front of the name gave the lockup
     two of them competing at the same size. */
  .brand .lw-tag{
    font-family:var(--mono);font-weight:600;letter-spacing:.22em;white-space:nowrap;
  }
  .brand .lw-tag b{font-weight:600}
  /* The tagline is 10px, so it needs the full 4.5:1 and was nowhere near
     it -- cyan on the near-white page measured 2.34:1 and the orange 2.67.
     Same three hues, walked toward black by day and toward white by night
     until each one actually clears. */
  .brand .lw-tag .t1{color:#1c6c79}
  .brand .lw-tag .t2{color:#7248cc}
  .brand .lw-tag .t3{color:#9c4d15}
  body.night .brand .lw-tag .t1{color:#2ca9bd}
  body.night .brand .lw-tag .t2{color:#8d66e0}
  body.night .brand .lw-tag .t3{color:#e2701f}
  .brand .lw-dom{
    font-family:var(--mono);letter-spacing:.16em;color:var(--dim);
    display:flex;align-items:center;gap:.5em;
  }
  .brand .lw-dom::before,.brand .lw-dom::after{
    content:"";height:1px;background:var(--line-2);flex:1;min-width:.8rem;
  }

  /* 01 — full, website / desktop */
  .brand.full .lm{width:92px;height:92px}
  .brand.full .lw-name{font-size:44px}
  .brand.full .lw-tag{font-size:10px;margin-top:.35rem}
  .brand.full .lw-dom{font-size:10px;margin-top:.25rem}
  /* 03 — small, app rail / menu */
  .brand.sm .lm{width:38px;height:38px}
  .brand.sm .lw-name{font-size:21px}
  .brand.sm .lw-tag,.brand.sm .lw-dom{display:none}
  /* mark only — used on the passport cover and anywhere tiny */
  .brand.mark .lw{display:none}
  .brand.mark .lm{width:var(--m,48px);height:var(--m,48px)}

  @media (max-width:44rem){
    .brand.full .lm{width:64px;height:64px}
    .brand.full .lw-name{font-size:30px}
    .brand.full .lw-tag{font-size:8.5px;letter-spacing:.16em}
    .brand.full .lw-dom{display:none}
  }

  footer{border-top:1px solid var(--line);background:rgba(255,255,255,.7);
    padding:1.5rem 0 3rem;color:var(--dim-2);font-size:.82rem}
  .legal-links{margin-top:.4rem;display:flex;flex-wrap:wrap;gap:0 1.1rem}
  .dirlink{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
  .dirlink:hover{border-bottom-color:currentColor}
  .legal-links a{color:var(--dim-2);text-decoration:none;font-size:.82rem;
    border-bottom:1px solid transparent;
    /* 44px is the smallest target a thumb hits reliably; the links used to be
       21px tall and sat in a row, which made the wrong one easy to open. */
    display:inline-flex;align-items:center;min-height:44px;padding:0 .15rem}
  .legal-links a:hover{color:var(--ink);border-bottom-color:var(--line-3)}
  body.night footer{background:rgba(21,34,51,.7)}

  /* ------------------------------------------------ scrapbook, at home */
  .scrap{margin:0 0 2.5rem}
  .scrap-grid{display:grid;gap:.8rem;grid-template-columns:1fr}
  @media (min-width:50rem){ .scrap-grid{grid-template-columns:repeat(2,1fr)} }
  /* a written note, so it reads as handwriting on a card rather than a post */
  .scrapnote{position:relative;padding:1.15rem 1.2rem 1rem;border-radius:11px;
    background:var(--card);border:1px solid var(--line)}
  .scrapnote p{margin:0 0 .7rem;font-size:.96rem;line-height:1.6;color:var(--ink)}
  .scrapnote .by{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);
    font-size:.55rem;letter-spacing:.14em;color:var(--dim-2)}
  .scrapnote .by .ava{width:1.4rem;height:1.4rem;border-radius:50%;flex:0 0 auto;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:.5rem;color:#fff;letter-spacing:.02em}
  .scrapnote::before{content:"\201C";position:absolute;top:.1rem;right:.7rem;
    font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--line-3);
    pointer-events:none}
  /* the waiting ones come first and say so */
  .scrap-wait{margin:0 0 .9rem;padding:.75rem .95rem;border-radius:9px;
    background:var(--sunk);border:1px dashed var(--line-3);
    display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
    font-size:.88rem;color:var(--dim)}
  .scrap-wait b{color:var(--ink)}
  .scrap-go{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
    color:var(--accent);background:none;border:0;cursor:pointer;padding:0}
  .scrap-empty{margin:0;color:var(--dim-2);font-size:.9rem}

  /* the first thing to do, and only until it is done */
  .firstrun{display:grid;gap:1rem;align-items:center;margin:0 0 1.8rem;
    padding:1.3rem 1.4rem;border-radius:13px;
    background:linear-gradient(150deg,
      color-mix(in srgb,var(--accent) 16%,var(--card)),var(--card));
    border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line))}
  @media (min-width:44rem){ .firstrun{grid-template-columns:1fr auto} }
  .firstrun h2{margin:.25rem 0 .35rem;font-size:1.32rem;letter-spacing:-.02em}
  .firstrun p{margin:0;color:var(--dim);font-size:.94rem;max-width:34rem}
  .firstrun .btn{white-space:nowrap}

  /* ------------------------------------------------ your own address */
  .myurl{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.85rem}
  .myurl-k{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--dim-2)}
  /* "Your profile" and "Your passport" are two label/value rows stacked
     directly on top of each other on the home page, built from two different
     components. Their values started 50px apart, because each label column was
     only as wide as its own words and the two rows used different gaps. One
     column width and one gap; the type of each row is left alone. */
  .myurl-k,.homebook-h > .label{flex:0 0 auto;min-width:7.5rem}
  .homebook-h{column-gap:.5rem}
  /* On a phone the two rows wrap and no longer read as a pair, so the shared
     column is just 120px of a 390px screen spent on nothing. */
  @media (max-width:40rem){ .myurl-k,.homebook-h > .label{min-width:0} }
  .myurl-a{font-family:var(--mono);font-size:.78rem;color:var(--accent);
    text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
    word-break:normal;overflow-wrap:break-word}
  .myurl-a:hover{border-bottom-color:var(--accent)}
  .myurl-c{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;
    text-transform:uppercase;cursor:pointer;padding:.28rem .7rem;border-radius:999px;
    border:1px solid var(--line-2);background:var(--card);color:var(--dim);
    /* was 46x21, below the 24px minimum target size */
    min-height:32px;display:inline-flex;align-items:center}
  .myurl-c:hover{color:var(--ink);border-color:var(--dim-2)}
  .myurl-c.done{color:var(--ok,#1d7a4d);border-color:currentColor}

  /* --------------------------------------------------- board, at home
     No styles of its own for the rows: it reuses .ldwrap/.ldtop/.ldrow from
     the Standings page, so the two boards cannot drift apart. Only the
     heading around it and the gap marker are local. */
  /* A real bottom margin. The annunciator strip below carries margin-top:-16px
     to tuck under the rank cards it used to follow; with the board in between,
     that negative margin was pulling the strip over the board's last row. */
  .hboard{margin:1.6rem 0 2.2rem}
  .hboard-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
    gap:.6rem;margin-bottom:.6rem}
  .hboard-h .label b{color:var(--ink);font-weight:700}
  .hboard-all{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
    color:var(--accent);background:none;border:0;cursor:pointer;padding:0}
  /* "there are others between", in the board's own voice */
  .ldgap{padding:.15rem .35rem .3rem;text-align:center;font-family:var(--mono);
    font-size:.6rem;letter-spacing:.3em;color:rgba(233,240,250,.32)}

  /* ------------------------------------------------------- add a stamp */
  .addfab{
    position:fixed;z-index:60;right:1.35rem;bottom:1.35rem;
    bottom:calc(1.35rem + env(safe-area-inset-bottom,0px));
    display:inline-flex;align-items:center;gap:.6rem;
    padding:.95rem 1.5rem .95rem 1.15rem;border:0;border-radius:999px;cursor:pointer;
    font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:-.01em;
    background:var(--accent);color:var(--on-accent);
    box-shadow:0 10px 30px rgba(18,40,63,.32), 0 2px 6px rgba(18,40,63,.2);
    transition:transform .16s, box-shadow .16s, filter .16s;
  }
  .addfab[hidden]{display:none}
  .addfab:hover{transform:translateY(-2px);filter:brightness(1.06);
    box-shadow:0 16px 38px rgba(18,40,63,.36), 0 2px 6px rgba(18,40,63,.2)}
  .addfab:active{transform:translateY(0)}
  .addfab .addfab-p{
    display:inline-flex;align-items:center;justify-content:center;
    width:1.5rem;height:1.5rem;border-radius:50%;font-size:1.25rem;line-height:1;
    background:rgba(255,255,255,.22);
  }
  body.night .addfab .addfab-p{background:rgba(0,0,0,.2)}
  /* the label goes on a narrow screen, the target does not */
  @media (max-width:30rem){
    .addfab{padding:.9rem;gap:0;right:1rem}
    .addfab span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;
      clip:rect(0 0 0 0);white-space:nowrap}
    .addfab .addfab-p{width:1.7rem;height:1.7rem;font-size:1.45rem}
  }
  /* room at the end of every view for the button to float over, so the last
     row of a list is never the one you cannot reach */
  .view{padding-bottom:5.5rem}
  /* the nav still names it, and names it as the primary one */
  .vt.vt-go{color:var(--accent);font-weight:700}

  :where(button,input,select,a):focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  @media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

  /* ------------------------------------------------- the floor on a phone
     Rewynd is read outdoors, one-handed, on a screen the size of a passport.
     The mono micro-labels are the house voice and they stay small on a desk,
     but at 8px they stop being readable in daylight -- so on a narrow screen
     the whole label scale is lifted onto an ~11px floor, keeping its own
     hierarchy. Ornament drawn inside the postcards, stamps and passport
     furniture is deliberately left alone: it is picture, not text. */

  /* The page runs under the notch and the home indicator now that the
     viewport is cover-fit, so the furniture that sits at the edges has to
     hold itself clear of them. */
  @supports (padding:max(0px)){
    footer{padding-left:max(0px,env(safe-area-inset-left));
           padding-right:max(0px,env(safe-area-inset-right));
           padding-bottom:max(3rem,calc(3rem + env(safe-area-inset-bottom)))}
    /* .shell sizes itself with width:min(100% - 2rem,...) and auto margins,
       so padding here would be inset on top of inset and push the page wider
       than the screen. The inset belongs on the body, where it is exactly
       zero on a phone without a cutout and costs the layout nothing. */
    body{padding-left:env(safe-area-inset-left);
         padding-right:env(safe-area-inset-right)}
  }

  @media (max-width:44rem){
    /* A phone keyboard zooms any field it thinks is too small to read.
       16px is the threshold; below it iOS scales the whole page and leaves
       the traveller pinched out on a form they were halfway through. */
    input,select,textarea{font-size:max(16px,1rem)}
    /* Anything you tap gets a thumb-sized box, not a text-sized one. */
    a.btn,button,[role="button"],.tab,.chip{min-height:44px}
  }
  @media (max-width:44rem){
    .ann i,
    .bp-grid k,
    .ctry i b,
    .desk-item k,
    .desk-tab span,
    .dr-fields k,
    .gal-meta span,
    .hs-kind,
    .hz-card span,
    .madd span,
    .pf-kind,
    .pf-row .pf-where,
    .ppass-grid k,
    .ppass-top i,
    .sample,
    .tiercell span,
    .tierpill,
    .tlkind,
    .wide-label .cnt,
    .wnote k,
    /* the cancellation, landing across the stamp and onto the card */ .pc-mark{font-size:0.70rem}
    .board th,
    .bp-stub span,
    .bulk-row span,
    .costrow label,
    .ct small,
    .dr-stub span,
    .extremes k,
    .f k,
    .form-row k,
    .frame figcaption,
    .hero-go-n,
    .home-stats span,
    .hs-row .hs-where,
    .jr .jr-sub,
    .jr-write .count,
    .ldtop,
    .meta-grid k,
    .mstat span,
    .myurl-c,
    .myurl-k,
    .nd-bez,
    .nd-foot,
    .nlive,
    .nnote .nwho,
    .nrow span,
    .pc-by span,
    .pcrow .who .m,
    .pcshared i,
    .pf-hits,
    .planrow .pl-state,
    .reel .dur,
    .scrapnote .by,
    .seat k,
    .set-grid label,
    .snapshot span,
    .st-city.xlong,
    .st-date,
    .st-pill,
    .statuscard .sc-next,
    .sw-cap span,
    .tiercell b,
    .tlrow .where,
    .tripsum span,
    .visa .pagemark,
    .visa .pagetitle,
    .wc button,
    .wc span,
    .wide-label,
    .wnote .wdel,
    .wnote .wwhen,
    /* Deliberately quiet. A report control that competes with Follow invites people to press it to see what it does. */ .reportb,
    /* `flex:1` is `flex:1 1 0%`, so each step was free to shrink to its 7.5rem floor -- and "Bag drop - optional" is wider than that with white-space:nowrap holding it on one line. The label did not shrink with the box, it just spilled out of it and printed over "Security". The bar already hides its own scrollbar, so the intent was always to scroll rather than squeeze: never shrink a step below its own text, and let the row overflow into that scroll when five of them will not fit. */ /* Five steps, five equal segments, at every width. The earlier rule sized each step to its own text, so "Bag drop - optional" made segment three 40% wider than the rest and the bar misreported how far along you were. Sizing them equally used to overprint the next label because the text was held on one line; letting it wrap is what makes equal widths safe, and it is what the phone rule below this already did. */ .stg,
    /* a bar you cannot miss, because acting as though you are online when you are not is how work gets lost */ body.is-offline .rail::after,
    /* same reason as .fsrc.live */ .fsrc{font-size:0.72rem}
    .askbox .ask-msg,
    .bulk-row i,
    .cover .sub,
    .day k,
    .day small,
    .dest-cap span,
    .docrow .until,
    .dr-seq,
    .dr-tag,
    .fc-head .m,
    .fc-tag,
    .flash,
    .form-row .why,
    .galf,
    .hboard-all,
    .hm-row span,
    .hm-tags i,
    .home-pass,
    .hs-date,
    .hs-more,
    .hs-span,
    .hs-yr,
    .hsearch-n,
    .jr .jr-where,
    .lb-stage figcaption span,
    .ldtab,
    .live,
    .mini,
    .more summary span,
    .mrz,
    .nnote .nacts button,
    .pc-stamp b,
    .pcard .m,
    .pf-date,
    .planrow .pl-when,
    .ppass-mrz,
    .readout,
    .scrap-go,
    .segbar button,
    .statuscard .sc-no,
    .statuscard .sc-tier,
    .tc .m,
    .tldate,
    .tlf,
    .trip .when,
    .trip-legs i,
    .trip-nums,
    .vt .n,
    /* "there are others between", in the board's own voice */ .ldgap,
    /* the line under the porthole, explaining that the view is not a picture */ .nbadge,
    /* the readout strip: clock, place, weather */ .strip{font-size:0.74rem}
    .dr-go,
    .hits,
    /* Absolute only over a photograph. The settings, alerts and share sheets put this button in a flex header, where `position:absolute` escaped to .sheet -- which is inset:0 -- and pinned it to the corner of the window, 300px away from the panel it closes. */ .sheet-close{font-size:0.76rem}
  }