/* =====================================================================
   Kindred — dark, and the city kept back.

   The map is not wallpaper. It is Kindred Community, so it only appears
   when the page reaches Community: the scroll arrives in a city at
   night, pins lit on it, and until then it has been somewhere else.

   Each section is its own setting, lit differently, and the pins - who
   are the people; on Kindred a person *is* a pin - drift through all of
   them. Settings are a layer per section, crossfaded on the scroll, so
   nothing stacks against the root background or against style.css's own
   body wash. Both of those swallowed the map in the previous attempt.
   ===================================================================== */
:root{
  --bg:#242220; --bg-2:#2C2926; --ink:#FBF7F1;
  --ink-2:rgba(251,247,241,.70); --ink-3:rgba(251,247,241,.40);
  --gold:#D9BC86; --gold-2:#B9A079;
  --raise:-6px -6px 16px rgba(255,255,255,.055), 7px 7px 20px rgba(0,0,0,.6);
  --raise-s:-3px -3px 9px rgba(255,255,255,.05), 4px 4px 12px rgba(0,0,0,.55);
  --cut:inset 5px 5px 13px rgba(0,0,0,.6), inset -4px -4px 10px rgba(255,255,255,.05);
  --press:inset 6px 6px 15px rgba(0,0,0,.65), inset -3px -3px 9px rgba(255,255,255,.045);
  --r-l:40px; --pill:999px;
  --t:280ms; --pt:150ms; --ease:cubic-bezier(.16,.84,.44,1);
  --gap:clamp(72px,12vh,150px);
}
*,*::before,*::after{box-sizing:border-box}
/* The ground is on html as well as body. body stops at the end of the
   document; the rubber-band area a phone shows when you drag past the
   top or the bottom is painted from html, and an unset html is white -
   so overscrolling flashed white above the hero and below the footer,
   on exactly the two edges this is meant to reach. */
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;color:var(--ink);overflow-x:hidden;position:relative;
  font-family:"Source Serif 4",ui-serif,Georgia,serif;font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Transparent, and that is load-bearing rather than tidy.
     style.css paints a near-opaque wash on body, which has to go - but
     it cannot simply be replaced with the ground colour. The five .set
     backdrops are position:fixed at z-index:-1, and body is not a
     stacking context, so they paint into the root's. While html has no
     background of its own, body's propagates to the canvas and is
     painted behind them; the moment html is given one, propagation
     stops, body's fill becomes an ordinary element background, and it
     covers every one of them. The ground therefore lives on html (see
     above) and body carries nothing. Getting this the wrong way round
     turned the whole Community map into a charcoal rectangle while
     every measurement still said the layer was lit and opaque. */
  background:transparent}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.05;
  mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:#201E1B}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:5px}

/* ---- settings: one backdrop per section, fixed, crossfaded --------- */
.set{position:fixed;inset:0;z-index:-1;opacity:0;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat}
.set.on{opacity:1}
#s-door{background:radial-gradient(90% 70% at 14% -6%, rgba(255,255,255,.10), transparent 58%),
                   linear-gradient(168deg,#3A3732 0%, #242220 62%)}
#s-rule{background:radial-gradient(70% 50% at 50% 108%, rgba(217,188,134,.16), transparent 66%),
                   linear-gradient(185deg,#201E1C 0%, #2B2825 100%)}
#s-rooms{background:radial-gradient(38% 46% at 18% 32%, rgba(217,188,134,.12), transparent 70%),
                    radial-gradient(38% 46% at 52% 66%, rgba(255,255,255,.07), transparent 70%),
                    radial-gradient(38% 46% at 84% 30%, rgba(217,188,134,.10), transparent 70%),
                    linear-gradient(175deg,#272421 0%, #221F1D 100%)}
/* the payoff */
/* Community is where the lights come on. The rest of the page is a
   charcoal night; this one section is daylight over the real city. */
#s-city{background:linear-gradient(180deg, rgba(248,243,236,.74), rgba(244,237,228,.58) 40%, rgba(238,230,218,.80)),
                   url("/img/map-light.jpg") center/cover no-repeat}
#s-quiet{background:radial-gradient(80% 60% at 50% 120%, rgba(255,255,255,.05), transparent 64%),
                    linear-gradient(180deg,#1F1D1B 0%, #262321 100%)}

.wrap{width:min(1120px,100% - 48px);margin-inline:auto;position:relative;z-index:2}
.sec{padding-block:var(--gap);position:relative}
.d1,.d2,.d3{font-family:"Playfair Display",ui-serif,Georgia,serif;font-weight:500;
  letter-spacing:-.025em;line-height:.99;margin:0;text-wrap:balance}
.d1{font-size:clamp(40px,6.2vw,86px)}
.d2{font-size:clamp(29px,3.9vw,56px);line-height:1.04}
em{font-style:normal;color:var(--gold)}
.lab{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);margin:0}
.body{font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.62;color:var(--ink-2);max-width:56ch;margin:0}

.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;border:0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.15em;
  text-transform:uppercase;padding:18px 32px;border-radius:var(--pill);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),color var(--t) var(--ease)}
.btn .ar{transition:transform var(--t) var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.go{background:var(--ink);color:#211F1C;box-shadow:var(--raise)}
.go:hover{transform:translateY(-3px)}
.go:active{transform:translateY(0);box-shadow:var(--press);transition-duration:var(--pt)}
.ghost{background:var(--bg-2);color:var(--gold);box-shadow:var(--raise-s)}
.ghost:hover{transform:translateY(-3px);color:var(--ink)}
.ghost:active{transform:translateY(0);box-shadow:var(--press);transition-duration:var(--pt)}

.panel{background:rgba(44,41,38,.72);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border-radius:var(--r-l);box-shadow:var(--raise);padding:clamp(30px,4.2vw,56px)}
.well{background:rgba(32,30,28,.66);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border-radius:var(--r-l);box-shadow:var(--cut);padding:clamp(30px,4.2vw,56px)}

.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px);margin-top:34px}
.col .n{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.col h3{margin:0 0 8px;font-family:"Playfair Display",serif;font-weight:500;font-size:21px;line-height:1.16}
.col p{margin:0;color:var(--ink-2);font-size:15.8px;line-height:1.56}
.col .mk{width:46px;height:46px;border-radius:50%;background:var(--bg-2);box-shadow:var(--raise-s);
  display:grid;place-items:center;margin-bottom:15px;font-size:18px;color:var(--gold)}
@media(max-width:820px){.cols{grid-template-columns:1fr}}

/* ---- the people ---- */
.pins{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.pin{position:absolute;width:38px;height:50px}
.pin i{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:var(--bg-2);box-shadow:var(--raise-s);display:grid;place-items:center}
.pin i::after{content:attr(data-m);transform:rotate(45deg);font-family:"IBM Plex Mono",monospace;
  font-size:14px;line-height:1;color:var(--gold)}
.pin::after{content:'';position:absolute;left:13px;bottom:0;width:13px;height:5px;border-radius:50%;
  background:rgba(0,0,0,.45);filter:blur(2.5px)}

.foot{margin-top:42px;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3)}
.foot a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid rgba(251,247,241,.18)}
.foot a:hover{color:var(--gold)}

@media (prefers-reduced-motion:no-preference){
  .set{transition:opacity 900ms var(--ease)}
  @keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  .in>*{animation:up .9s var(--ease) both}

  /* The headline comes into focus rather than sliding in. Kindred's
     whole argument is that a face resolves on day three, so the page
     opens by doing it: each line arrives out of focus and sharpens,
     and the gold half lands last. Generic for any other product;
     the only right entrance for this one. */
  @keyframes focus-in{
    0%  {opacity:0; filter:blur(16px); transform:translateY(20px) scale(1.035); letter-spacing:.06em}
    60% {opacity:1}
    100%{opacity:1; filter:blur(0);    transform:none;                        letter-spacing:-.025em}
  }
  .d1 .ln{display:block;animation:focus-in 1.25s var(--ease) both}
  .d1 .ln:nth-child(1){animation-delay:.15s}
  .d1 .ln:nth-child(2){animation-delay:.45s}
  .d1 em{animation:focus-in 1.35s var(--ease) .78s both;display:inline-block}
  .in>:nth-child(1){animation-delay:.05s}.in>:nth-child(2){animation-delay:.17s}
  .in>:nth-child(3){animation-delay:.29s}.in>:nth-child(4){animation-delay:.41s}
  @keyframes drop{0%{opacity:0;transform:translateY(-32px) scale(.72)}
                  64%{opacity:1;transform:translateY(4px) scale(1.04)}100%{opacity:1;transform:none}}
  /* They wander. A pin that only bobs reads as a decoration; one that
     drifts across the ground reads as somebody moving around the city,
     which is what the map actually shows. */
  @keyframes wander{
    0%  {transform:translate(0,0)}
    25% {transform:translate(14px,-10px)}
    50% {transform:translate(4px,-18px)}
    75% {transform:translate(-12px,-7px)}
    100%{transform:translate(0,0)}
  }
  @keyframes ping{0%{box-shadow:var(--raise-s),0 0 0 0 rgba(217,188,134,.40)}
                  70%{box-shadow:var(--raise-s),0 0 0 19px rgba(217,188,134,0)}
                  100%{box-shadow:var(--raise-s),0 0 0 0 rgba(217,188,134,0)}}
  .pin{animation:drop .85s var(--ease) both, wander 19s ease-in-out infinite}
  .pin.live i{animation:ping 3.6s ease-out infinite}
  @supports (animation-timeline:view()){
    /* finishes inside `entry`; a range ending in `cover` cannot complete
       at the foot of a document and strands the element there */
    @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
    .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 8% entry 100%}
  }
}
@media (prefers-reduced-motion:reduce){.in>*,.pin,.pin.live i{animation:none}.set{transition:none}}


/* ---- the light room ------------------------------------------------
   One section inverts. Everything here is scoped to it, so the dark
   page is untouched either side. */
.sec.light{--ink:#33312E; --ink-2:#5A554D; --ink-3:#847C70;
           --gold:#6F5A2E;            /* 1.57:1 on paper is unreadable;
                                         this is the same metal at 5.69 */
           color:var(--ink)}
.sec.light .panel{background:rgba(247,242,235,.80);
  box-shadow:-5px -5px 15px rgba(255,255,255,.85), 6px 6px 20px rgba(74,62,43,.18)}
.sec.light .lab,.sec.light .col .n{color:var(--gold)}
.sec.light .body,.sec.light .col p{color:var(--ink-2)}
.sec.light .pin i{background:#F6F1EA;
  box-shadow:-3px -3px 9px rgba(255,255,255,.9), 3px 3px 10px rgba(74,62,43,.2)}
.sec.light .pin i::after{color:#6F5A2E}
.sec.light .pin::after{background:rgba(74,62,43,.2)}
.sec.light .pin.live i{animation:ping-light 3.6s ease-out infinite}
@keyframes ping-light{
  0%  {box-shadow:-3px -3px 9px rgba(255,255,255,.9), 3px 3px 10px rgba(74,62,43,.2), 0 0 0 0 rgba(111,90,46,.42)}
  70% {box-shadow:-3px -3px 9px rgba(255,255,255,.9), 3px 3px 10px rgba(74,62,43,.2), 0 0 0 20px rgba(111,90,46,0)}
  100%{box-shadow:-3px -3px 9px rgba(255,255,255,.9), 3px 3px 10px rgba(74,62,43,.2), 0 0 0 0 rgba(111,90,46,0)}}

/* ---- the people, crossing ------------------------------------------
   A band along the foot of the window carrying the artwork, repeated so
   it can travel without ever running out, and panned horizontally by
   the page's own vertical scroll: scroll down, the company walks past.

   It fades in once the hero is behind you - the door is type and one
   light, and putting a crowd in it would say the wrong thing first -
   and fades back out across Community, because that section's whole
   job is the map and two backgrounds competing is neither. */
.people{
  position:fixed; inset:0;                       /* the whole window now */
  z-index:-1; pointer-events:none; opacity:0;
  /* Sized to the window's height, so the artwork fills the screen and
     repeats sideways. At a 900px-tall window the 1584x416 panorama
     becomes about 3400px wide, which is a little over two screens per
     repeat - enough travel that the pan never reads as a loop. */
  background:url("/img/people.png") repeat-x left center / auto 100%;
  /* Still softened top and bottom. Full-bleed artwork straight behind
     body copy is the one way to make a page like this unreadable. */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    @keyframes walk{ from{ background-position-x:0 } to{ background-position-x:-5200px } }
    @keyframes showpeople{
      0%   { opacity:0 }
      13%  { opacity:.30 }
      100% { opacity:.30 }
    }
    .people{
      animation: walk linear both, showpeople linear both;
      animation-timeline: scroll(root), scroll(root);
    }
  }
}

/* Cut for the map, rejoined after it. The class is set by the same
   observer that lights the settings, so the seam is the section edge
   and not an estimate of where that edge falls in the scroll. */
.people.cut{opacity:0 !important}
.people{transition:opacity 620ms var(--ease)}

/* ---- the one action, breathing --------------------------------------
   A slow ring leaving the primary button. Slow on purpose: at a second
   or two it reads as a notification badge nagging you, and at four it
   reads as something alive in the corner of your eye, which is what a
   front door wants. It stops the moment you point at it - a control
   that keeps pulsing while you are already on it is just noise - and
   it never moves the button, so nothing reflows and nothing shifts
   under the cursor. */
@media (prefers-reduced-motion: no-preference){
  @keyframes cta-breathe{
    0%   { box-shadow: var(--raise), 0 0 0 0   rgba(217,188,134,.40) }
    62%  { box-shadow: var(--raise), 0 0 0 20px rgba(217,188,134,0)  }
    100% { box-shadow: var(--raise), 0 0 0 0   rgba(217,188,134,0)   }
  }
  .go{ animation: cta-breathe 4s cubic-bezier(.33,0,.2,1) 1.2s infinite }
  .go:hover,.go:focus-visible{ animation-play-state: paused }

  /* On paper the pale metal is invisible, so the ring is the deep one. */
  .sec.light .go{ animation-name: cta-breathe-light }
  @keyframes cta-breathe-light{
    0%   { box-shadow: var(--raise), 0 0 0 0   rgba(111,90,46,.38) }
    62%  { box-shadow: var(--raise), 0 0 0 20px rgba(111,90,46,0)  }
    100% { box-shadow: var(--raise), 0 0 0 0   rgba(111,90,46,0)   }
  }
}

/* ---- refinements ---------------------------------------------------- */

/* A hairline of light along the top of every raised thing. One pixel,
   and it is the difference between a panel sitting on the page and a
   panel floating above it. */
.panel,.go,.ghost{position:relative}
.panel::before,.go::before,.ghost::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.14), transparent 46%);
  mix-blend-mode:overlay}
.sec.light .panel::before{background:linear-gradient(180deg, rgba(255,255,255,.65), transparent 44%)}

/* The scroll cue. It leaves once you have scrolled, because a page that
   keeps telling you to scroll after you have is not listening. */
.cue{position:absolute;left:50%;bottom:34px;translate:-50% 0;display:grid;justify-items:center;gap:10px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);transition:opacity 500ms var(--ease)}
.cue i{display:block;width:1px;height:38px;background:currentColor;transform-origin:50% 0}
body.moved .cue{opacity:0}
@media (prefers-reduced-motion: no-preference){
  @keyframes cue{0%,100%{transform:scaleY(.28);opacity:.35}50%{transform:scaleY(1);opacity:.9}}
  .cue i{animation:cue 2.6s ease-in-out infinite}
}

/* Headings keep their descenders. Playfair at these sizes clips its
   own tails against a tight line-height otherwise. */
.d1,.d2{padding-bottom:.06em}

/* Link affordance in the footer, and a focus ring that clears the text. */
.foot a{padding-bottom:1px}
:focus-visible{outline-offset:4px}

/* ---- pins, on the map screen only ----------------------------------
   They arrive when you reach the city, not when the page loads, so the
   drop is something you see happen rather than something that already
   happened three screens ago. The observer that lights this setting
   adds .here, and that is what starts them.

   The pop overshoots twice - up past full size, under it, and settle.
   A single ease lands flat; the second, smaller bounce is what makes a
   thing feel like it has weight and has hit something. */
/* Sized and placed to be read past, not at.
   They began at 46px in a band straight across the middle, which put
   six of the eight behind the panel and made the two that cleared it
   the largest things on the screen - a row of markers with a panel in
   front of them rather than a city with a panel on it. The side gutter
   is 11% of the window at 1440 and 2% at 1024, so there is no column
   to stand them in; the room that exists at every width is the band of
   section padding above and below the panel, and that is where they
   are. Two more sit in the gutters and appear only once the window is
   wide enough to have gutters. */
.mappins{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.mp{position:absolute;left:var(--x);top:var(--y);width:28px;height:36px;opacity:0}
.mp i{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);display:grid;place-items:center;font-style:normal;
  background:#F9F5EF;box-shadow:-2px -2px 6px rgba(255,255,255,.9), 3px 3px 9px rgba(74,62,43,.26)}
/* Nothing to stand in at a narrow window, so they go rather than
   overlap the thing people came to read. */
.mp.gut{display:none}
@media (min-width:1240px){ .mp.gut{display:block} }
.mp i::before{content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(111,90,46,.45)}
/* The teardrop is a square turned 45 degrees, so anything inside it is
   turned too. The mark turns back. Without this every pin carried a
   glyph lying on its side. */
.mp i > b{display:block;transform:rotate(45deg);font-weight:400;
  font-size:11px;line-height:1;color:#6F5A2E}
/* the shadow it casts on the city */
.mp::after{content:'';position:absolute;left:9px;bottom:0;width:11px;height:4px;border-radius:50%;
  background:rgba(74,62,43,.26);filter:blur(2.5px);transform:scaleX(.4);opacity:0}

@media (prefers-reduced-motion:no-preference){
  @keyframes mp-pop{
    0%   {opacity:0; transform:translateY(-18px) scale(.3)}
    52%  {opacity:1; transform:translateY(0)     scale(1.16)}
    70%  {           transform:translateY(0)     scale(.94)}
    86%  {           transform:translateY(0)     scale(1.04)}
    100% {opacity:1; transform:translateY(0)     scale(1)}
  }
  @keyframes mp-shadow{
    0%{opacity:0;transform:scaleX(.3)} 52%{opacity:1;transform:scaleX(1.1)}
    100%{opacity:1;transform:scaleX(1)}
  }
  /* and then it keeps signalling, like a live pin on the real map */
  @keyframes mp-ping{
    0%  {box-shadow:0 0 0 0   rgba(111,90,46,.26)}
    70% {box-shadow:0 0 0 11px rgba(111,90,46,0)}
    100%{box-shadow:0 0 0 0   rgba(111,90,46,0)}
  }
  @keyframes mp-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
  .sec.light.here .mp{animation:mp-pop .72s cubic-bezier(.34,1.3,.5,1) var(--d) both,
                                mp-float 6.5s ease-in-out calc(var(--d) + 1s) infinite}
  .sec.light.here .mp::after{animation:mp-shadow .72s cubic-bezier(.34,1.3,.5,1) var(--d) both}
  .sec.light.here .mp i::before{animation:mp-ping 3.2s ease-out calc(var(--d) + .9s) infinite}
}
@media (prefers-reduced-motion:reduce){ .mp{opacity:1} .mp::after{opacity:1;transform:none} }

/* ---- a phone, edge to edge -----------------------------------------
   The hero is already min-height:100svh - the small viewport height,
   which is the height with the browser's toolbars showing, so the
   section is never taller than what you can actually see and the
   button never starts life under the address bar. What was missing is
   the safe areas: viewport-fit=cover lets the settings and the
   panorama run under the notch and the home indicator, which is what
   it is for, and in exchange nothing inset the content away from them.

   The backdrops are fixed to inset:0 and stay that way. Only the
   things carrying words move in. */
.wrap{
  padding-left:env(safe-area-inset-left, 0px);
  padding-right:env(safe-area-inset-right, 0px);
}
header.sec{
  padding-top:calc(var(--gap) * .5 + env(safe-area-inset-top, 0px));
  padding-bottom:calc(var(--gap) * .5 + env(safe-area-inset-bottom, 0px));
}
.sec:last-of-type{ padding-bottom:calc(var(--gap) + env(safe-area-inset-bottom, 0px)) }
/* The cue sits above the home indicator rather than behind it. */
.cue{ bottom:calc(34px + env(safe-area-inset-bottom, 0px)) }

@media (max-width:620px){
  /* The headline breaks where it was written to break on a laptop and
     that is too long for a phone, so the lines are allowed to find
     their own ends. The gap between them has to be real: as blocks the
     whitespace between the two spans collapses away and costs nothing,
     but the moment they are inline it is the only thing standing
     between "without" and "seeing". It read "withoutseeing". */
  .d1 .ln{ display:inline }
  .d1 .ln + .ln::before{ content:' '; white-space:pre }
  .d1{ font-size:clamp(34px,8.4vw,48px) }
  /* Two full-width buttons stacked beat two half-width ones side by
     side: a 12-character label in a pill does not survive 180px. */
  .btn{ width:100%; justify-content:center; padding:17px 22px }
  .wrap{
    width:100%;
    padding-left:calc(20px + env(safe-area-inset-left, 0px));
    padding-right:calc(20px + env(safe-area-inset-right, 0px));
  }
  .panel, .well{ border-radius:28px }
  /* The artwork is a single figure's worth of panorama behind the whole
     column at this width, so it drops back to being a texture. */
  .people{ opacity:0 }
  @media (prefers-reduced-motion:no-preference){
    @supports (animation-timeline:scroll()){
      @keyframes showpeople{ 0%{opacity:0} 13%{opacity:.16} 100%{opacity:.16} }
    }
  }
  .mp{ transform-origin:50% 100% }
  .mappins .mp:nth-child(n+6){ display:none }
}

/* ---- the find-out-more page ----------------------------------------
   Two components the home page does not have, in its language.

   The bar. The home page has no chrome at all - it is a front door and
   a door does not need a menu. A page somebody is reading through does
   need a way back and a way in, so it gets the smallest possible one:
   a name on the left, the action on the right, and nothing between
   them. It is fixed rather than sticky because the backdrops are
   fixed too; a bar that scrolls away over a still background reads as
   a piece coming loose. */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:calc(14px + env(safe-area-inset-top, 0px))
          calc(22px + env(safe-area-inset-right, 0px)) 14px
          calc(22px + env(safe-area-inset-left, 0px));
  /* A wash rather than a filled bar, so the room behind it still shows
     through and the page keeps running under the notch. */
  background:linear-gradient(180deg, rgba(36,34,32,.82), rgba(36,34,32,0));
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  mask-image:linear-gradient(180deg,#000 62%,transparent);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);
}
.bk{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-2); text-decoration:none;
  display:inline-flex; align-items:center; gap:10px; padding:10px 2px;
  transition:color var(--t) var(--ease);
}
.bk .ar{ transition:transform var(--t) var(--ease) }
.bk:hover{ color:var(--ink) }
.bk:hover .ar{ transform:translateX(-4px) }
/* The bar's own button is smaller than the one in the page; the same
   pill at full size would be the loudest thing on every screen. */
.btn.sm{ padding:12px 20px; font-size:11px; letter-spacing:.13em }
/* It does not breathe up here. The ring is the front door's gesture,
   and a bar that pulses for the length of a six minute read is a nag. */
.bar .go{ animation:none }
@media (max-width:620px){
  .bk{ font-size:11px; letter-spacing:.18em }
  .btn.sm{ padding:11px 15px; width:auto }
}

/* ---- the questions --------------------------------------------------
   Disclosures, because a wall of answers to questions somebody has not
   asked is just a longer page. Each one is a groove in the panel: shut
   it is a line of type, open it is a recess with the answer in it. */
.qs{ margin-top:30px; display:grid; gap:10px }
.q{
  border-radius:20px; background:rgba(32,30,28,.5);
  box-shadow:inset 3px 3px 9px rgba(0,0,0,.45), inset -2px -2px 7px rgba(255,255,255,.04);
  padding:2px 22px;
}
.q summary{
  list-style:none; cursor:pointer; padding:17px 0;
  font-family:"Playfair Display",ui-serif,Georgia,serif; font-weight:500; font-size:18.5px;
  letter-spacing:-.01em; line-height:1.3; color:var(--ink);
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  transition:color var(--t) var(--ease);
}
.q summary::-webkit-details-marker{ display:none }
.q summary:hover{ color:var(--gold) }
/* The marker is drawn rather than typed, so it can rotate. A glyph
   swapped for another glyph jumps; this one turns. */
.q summary::after{
  content:''; flex:none; width:11px; height:11px; margin-top:7px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg); transform-origin:60% 60%;
  transition:transform var(--t) var(--ease);
}
.q[open] summary::after{ transform:rotate(-135deg) }
.q p{
  margin:0 0 18px; color:var(--ink-2); font-size:16.2px; line-height:1.6; max-width:62ch;
}
@media (prefers-reduced-motion:no-preference){
  @keyframes q-open{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
  .q[open] p{ animation:q-open .32s var(--ease) both }
}
/* The bar sits over the top of the first screen, so the hero starts
   below it rather than under it. */
.bar ~ header.sec{ padding-top:calc(var(--gap) * .5 + 58px + env(safe-area-inset-top, 0px)) }

/* ---- a page you read, rather than a page you arrive at --------------
   Same design, different job. The home page is five short screens and
   one decision, so the company can be at .30 behind it and the panels
   can be translucent enough to feel like glass on a street.

   This page is a six minute read. At the same settings the artwork
   came through the panel and sat behind the body copy - faces and a
   park legible between the lines of an answer about pricing - which
   is the one reliable way to make a long page unreadable. The room is
   still there; it is just further away, and the glass has more milk
   in it. */
body.read .panel{ background:rgba(44,41,38,.90) }
body.read .well{ background:rgba(32,30,28,.86) }
body.read .q{ background:rgba(28,26,24,.62) }
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: scroll()){
    @keyframes showpeople-read{ 0%{opacity:0} 9%{opacity:.12} 100%{opacity:.12} }
    body.read .people{ animation-name: walk, showpeople-read }
  }
}