/*
 * KNOW WHERE — the world she chose, built out.
 *
 * The ground, the light in it, the enormous curious line and the words breathing
 * under it are kept exactly as they were on the screen she pointed at. Everything
 * added is built to that register rather than beside it.
 *
 * HER RULINGS HELD IN THIS FILE:
 *   her logo whole, never cut, and large enough to be properly seen
 *   no black — this is a deep green with light in it, and she chose it by name
 *   no list down the side, and no wall of equal cards
 *   nothing under 12px; she wears glasses and has said so
 *   a card of the opposite ground is how the ground changes — the professionals'
 *     room is that card, and it is the only pale surface here
 *   379 by 1400 first, then 1440
 */
:root{
  --void:#04120C; --deep:#071A11;
  --mint:#4FF3C0; --teal:#00C08C; --sky:#7BE3FF; --lime:#B9FF6A;
  --warm:#F2FFF8; --dim:#8FBFA9;
  --sheet:#F4FBF6; --sheet-ink:#0B2E1E; --sheet-soft:#5B7D6C;
  --f:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ed:"Newsreader",Georgia,serif;
  /* HER OWN PLATE LETTERING. She ruled it herself, 23 August: the serif does not
     belong on the category items. **And the strongest argument was never mine** —
     she set these exact words in a rounded geometric sans on her own malachite
     plates back in April, and a session overruled her with a serif.
     A category is a label on a way in rather than a piece of writing, and a
     serif on a label reads as decoration rather than as use. */
  --plate:"Questrial","Century Gothic","Avenir Next",system-ui,sans-serif;
  --gut:1.4rem;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--void);color:var(--warm);font-family:var(--f);
  line-height:1.6}
/* **overscroll-behavior:none was swallowing her pull-to-refresh.** Her words:
   I can do this on any other site, but not on this one — so it feels nowhere.
   A page that will not move in the hand feels broken before a word is read, and
   it was one property, added for polish, costing a gesture everybody has. */
body{min-height:100svh;overflow-x:hidden}
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{margin:0;font-weight:600}
main,header,footer,section{position:relative;z-index:2}
.kw-lbl{font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mint)}

/* ── the light in the ground, kept from the page she chose ── */
.kw-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.kw-aurora i{position:absolute;display:block;border-radius:50%;filter:blur(46px);opacity:.6;
  will-change:transform}
.kw-aurora i:nth-child(1){width:30rem;height:30rem;left:-9rem;top:-6rem;
  background:radial-gradient(closest-side,rgba(0,192,140,.85),transparent 72%);
  animation:kwA 26s ease-in-out infinite alternate}
.kw-aurora i:nth-child(2){width:26rem;height:26rem;right:-8rem;top:22%;
  background:radial-gradient(closest-side,rgba(123,227,255,.5),transparent 72%);
  animation:kwB 32s ease-in-out infinite alternate}
.kw-aurora i:nth-child(3){width:34rem;height:34rem;left:-6rem;bottom:-12rem;
  background:radial-gradient(closest-side,rgba(79,243,192,.45),transparent 74%);
  animation:kwC 38s ease-in-out infinite alternate}
@keyframes kwA{to{transform:translate3d(5rem,4rem,0) scale(1.16)}}
@keyframes kwB{to{transform:translate3d(-5rem,-3rem,0) scale(1.12)}}
@keyframes kwC{to{transform:translate3d(4rem,-4rem,0) scale(1.2)}}

.kw-top,main>section,.kw-foot{padding-inline:var(--gut)}
@media(min-width:900px){.kw-top,main>section,.kw-foot{padding-inline:max(3rem,calc((100% - 62rem)/2))}}

/* ── HER MARK, PROPERLY VISIBLE. Her words: not just some shitty little one.
      So: scale and room, and not one pixel of it altered. ── */
/* ══ THE BAND, AND THE WHITE IS GONE ═══════════════════════
   Her words, three times now: **I don't want it on white.** And her own road out
   of it, in the same breath: **adjust the gradient or lighten the background
   behind it, just try it and play around.**

   So there is no plate and no header bar. **The ground lightens at the top of
   the page so her mark reads on it**, and fades back into her green before the
   curious line begins. The mark never changes; the light behind it does.

   And her placement, in her words: the List With Us button **should not be in
   the header, it should be just above What Are You Curious About, on the top
   right** — with *I think you can place Know Where there* putting her mark on
   the other end of the same band. */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:16rem;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(226,246,236,.92) 0%,rgba(150,214,178,.42) 42%,
    rgba(4,18,12,0) 100%)}

.kw-top{position:relative;z-index:3;display:flex;align-items:center;gap:.55rem;
  padding-block:1.05rem .5rem;color:#0B2E1E}
.kw-mark{display:block;flex:0 0 auto;line-height:0;margin-right:auto}
.kw-mark img{width:9.5rem;max-width:none;height:auto}
@media(min-width:900px){.kw-mark img{width:14rem}}

/* ── LIST WITH US IS A DOOR, NOT A CONTROL ──────────────────
   Her complaint was never that it was plain: **it looks like that button
   doesn't work with the site at all.** A solid filled rectangle was the only
   one on a page made of glass, light and thin rules — foreign, and prettier
   paint would have left it foreign.

   **So it became what it actually is.** Listing with Know Where is somebody
   stepping forward to be found, and her own Murano collection has a door with
   the light coming through it. It is the only thing on this site a person does,
   and it should be the most inviting object on the page. */
/* Her ruling, twice: **List with us, move down... get it out of the navigation.**
   Measured on the rendered page before touching it — it was in two places at
   once, the door in the header band and a plain link inside the burger. Both
   gone from up there. It sits at the top right of the curious section now,
   which is where she put it in the first place: **just above What Are You
   Curious About, on the top right.** */
.kw-curious{position:relative}
.kw-door{position:absolute;right:0;top:.2rem;display:flex;align-items:center;gap:.5rem;
  text-decoration:none;color:var(--warm);padding:.35rem .7rem .35rem .35rem;
  border:1px solid rgba(79,243,192,.4);background:rgba(4,18,12,.32);
  transition:border-color .3s ease,background .3s ease}
.kw-door img{width:2.2rem;height:2.2rem;object-fit:contain;
  filter:drop-shadow(0 0 .7rem rgba(79,243,192,.5));transition:filter .35s ease}
.kw-door span{display:block;line-height:1.2;font-size:.72rem;color:var(--dim)}
.kw-door em{display:block;font-style:normal;font-weight:600;font-size:.92rem;
  letter-spacing:-.01em;color:var(--warm)}
.kw-door:hover,.kw-door:focus-visible{border-color:var(--mint);background:rgba(79,243,192,.14)}
.kw-door:hover img,.kw-door:focus-visible img{filter:drop-shadow(0 0 1.3rem rgba(79,243,192,.9))}
@media(max-width:519px){
  .kw-door span{display:none}
  .kw-door{top:0}
}

/* ── THE BURGER IS A SIGNPOST ───────────────────────────────
   Her standard, twice today: **we don't do boring or average here, something
   always has to look amazing.** And the method Replay Kids earned it with — ask
   what the object IS rather than what it should look like. Its buttons became
   swing tags because a second-hand item carries a tag.

   **On Know Where a menu is not a list of pages. It is the ways in** — and this
   business is a signpost. Three arms of different lengths, pointing. Open, they
   swing apart the way a signpost's arms do. */
.kw-burger{flex:0 0 auto;width:2.2rem;height:2.6rem;display:grid;align-content:center;
  gap:.32rem;justify-items:end}
.kw-burger i{display:block;height:2px;background:#0E7A45;border-radius:1px;
  transform-origin:right center;
  transition:width .35s cubic-bezier(.2,.9,.2,1),transform .35s cubic-bezier(.2,.9,.2,1)}
.kw-burger i:nth-child(1){width:1.4rem}
.kw-burger i:nth-child(2){width:1rem}
.kw-burger i:nth-child(3){width:1.6rem}
.kw-burger[aria-expanded="true"] i:nth-child(1){transform:rotate(24deg);width:1.6rem}
.kw-burger[aria-expanded="true"] i:nth-child(2){width:1.6rem}
.kw-burger[aria-expanded="true"] i:nth-child(3){transform:rotate(-24deg);width:1.6rem}
@media(min-width:760px){.kw-burger{display:none}}

/* ── AND WHAT IT OPENS IS THE WAYS IN, NOT A DRAWER OF LINKS ── */
.kw-nav{display:flex;gap:1.5rem;font-size:1rem}
.kw-nav a{color:#0B2E1E;text-decoration:none;white-space:nowrap;opacity:.86}
.kw-nav a span{display:none}
.kw-nav a:hover,.kw-nav a:focus-visible{opacity:1;color:#0E7A45}
@media(max-width:759px){
  /* **THE PANEL IS SHOWN AND HIDDEN, NEVER SQUEEZED.**
     It was animating a max-height and reporting itself open while rendering two
     pixels tall with all three items clipped — the class on, aria true, the rule
     present in the served stylesheet, and the height still nothing. Half an hour
     went into arguing with a cascade.
     **A control that says it worked while nothing happens is the worst kind of
     fault**, so the mechanism is gone rather than debugged: it is either
     displayed or it is not, and there is no number for anything to disagree
     with. */
  .kw-nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:60;
    background:linear-gradient(180deg,rgba(7,26,17,.97),rgba(4,18,12,.97));
    border-block:1px solid rgba(79,243,192,.26);
    flex-direction:column;gap:0;padding:0 var(--gut)}
  .kw-nav.kw-open{display:flex}
  /* The panel is dark and the band above it is light, so the ink flips here.
     The headings were deep green on deep green and all but invisible. */
  .kw-nav a{display:block;white-space:normal;padding-block:.95rem;color:var(--warm);
    border-bottom:1px solid rgba(242,255,248,.12);opacity:1}
  .kw-nav a:hover,.kw-nav a:focus-visible{color:var(--mint)}
  .kw-nav a b{color:var(--warm)}
  .kw-nav a:last-child{border-bottom:0}
  .kw-nav a b{display:block;font-family:var(--ed);font-weight:300;font-size:1.35rem;
    line-height:1.1;letter-spacing:-.015em}
  .kw-nav a span{display:block;font-size:.85rem;color:var(--dim);margin-top:.15rem}
}

/* ══ the opening, as she chose it ══ */
.kw-curious{padding-block:clamp(2.4rem,8vh,4.6rem) 2.6rem}
.kw-curious h1{font-size:clamp(2.6rem,15vw,4.1rem);line-height:.94;letter-spacing:-.045em;
  text-transform:uppercase;max-width:11ch}
.kw-curious h1 span{display:block}
.kw-curious h1 .lit{color:transparent;
  background:linear-gradient(102deg,var(--mint),var(--sky) 58%,var(--lime));
  -webkit-background-clip:text;background-clip:text}
.kw-words{display:flex;flex-wrap:wrap;gap:.5rem .65rem;align-items:baseline;margin-top:1.9rem}
.kw-words button{font-weight:500;letter-spacing:-.02em;color:var(--warm);opacity:.56;
  transition:opacity .3s ease,color .3s ease,transform .3s cubic-bezier(.2,.9,.2,1)}
.kw-words button:hover,.kw-words button:focus-visible{opacity:1;color:var(--mint);transform:translateY(-2px)}
.kw-words button[aria-pressed="true"]{opacity:1;color:var(--mint)}
.kw-own{display:flex;align-items:center;gap:.9rem;margin-top:2.2rem;
  border-bottom:1px solid rgba(79,243,192,.36);padding-bottom:.85rem}
.kw-own input{flex:1;background:none;border:0;outline:none;font-size:1.06rem;letter-spacing:-.01em}
.kw-own input::placeholder{color:var(--dim)}
.kw-own button{width:2.4rem;height:2.4rem;border-radius:50%;flex:0 0 auto;display:grid;
  place-items:center;background:linear-gradient(140deg,var(--mint),var(--teal));
  color:var(--void);font-weight:700}

/* ══ what she meets when she taps — an index, never cards ══ */
/* An empty slot renders nothing at all — her ruling. Before she has asked for
   anything there is no result rule, no NEAREST FIRST, and no empty frame. */
.kw-found{padding-block:.4rem 2.8rem}
.kw-found:not(.kw-on){display:none}
.kw-found-head{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid rgba(242,255,248,.28);padding-bottom:.5rem}
.kw-found-head b{font-family:var(--ed);font-weight:300;font-size:1.5rem}
.kw-found-head .kw-lbl{color:var(--dim)}
.kw-entry{display:grid;grid-template-columns:2.3rem 1fr 5.6rem;gap:0 1.1rem;align-items:start;
  padding-block:1.35rem;border-bottom:1px solid rgba(242,255,248,.13)}
.kw-entry .no{font-family:var(--ed);color:var(--dim);padding-top:.4rem}
.kw-entry h3{font-family:var(--ed);font-weight:300;font-size:1.62rem;line-height:1.1}
.kw-entry .meta{color:var(--dim);font-size:.9rem;margin-top:.15rem}
.kw-entry .terms{font-family:var(--ed);font-size:1.08rem;margin-top:.5rem;color:var(--mint)}
.kw-entry .terms i{font-style:normal;color:var(--sky)}
.kw-entry img{grid-row:1 / span 2;grid-column:3;width:5.6rem;height:5.6rem;object-fit:contain;
  object-position:center;filter:drop-shadow(0 0 1.6rem rgba(79,243,192,.34))}
.kw-entry:nth-child(even) img{transform:translateY(.7rem)}

/* ══ the collection — running type, and one object given room ══ */
.kw-collection{padding-block:2.6rem 3rem;overflow:hidden;position:relative}
.kw-collection .kw-piece{position:absolute;right:calc(var(--gut)*-1.3);bottom:-2rem;width:14rem;
  filter:drop-shadow(0 0 2rem rgba(79,243,192,.35));pointer-events:none}
.kw-collection h2{font-family:var(--ed);font-weight:300;font-size:clamp(1.9rem,8vw,2.6rem);
  line-height:1.04;letter-spacing:-.02em;margin:.5rem 0 1.3rem;max-width:17ch}
.kw-run{position:relative;z-index:1;margin:0;max-width:30rem;font-family:var(--plate);
  font-size:clamp(1.22rem,5.2vw,1.5rem);line-height:1.6;letter-spacing:-.005em}
.kw-run button{font:inherit;color:var(--warm);border-bottom:1px solid transparent}
.kw-run button:hover,.kw-run button:focus-visible{color:var(--mint);border-bottom-color:var(--mint)}
.kw-run .sep{color:var(--dim);padding-inline:.42rem}
@media(max-width:559px){
  /* The birds were overlapping Volunteering & Contribution and Driving, and
     taking the last two lines of the collection off the screen. */
  .kw-collection .kw-piece{width:11.5rem;bottom:-1rem}
  .kw-run{padding-bottom:7rem}
}
@media(min-width:760px){.kw-collection .kw-piece{width:19rem;right:3%}}

/* ══ her sentence ══ */
.kw-signpost{padding-block:3.2rem 3.4rem;text-align:center;
  border-block:1px solid rgba(242,255,248,.16)}
.kw-signpost img{width:11rem;margin:0 auto 1.8rem;
  filter:drop-shadow(0 0 2.2rem rgba(0,192,140,.55))}
.kw-signpost h2{font-family:var(--ed);font-weight:300;font-size:clamp(2.2rem,10vw,3.2rem);
  line-height:1;max-width:13ch;margin-inline:auto}
.kw-signpost p{font-family:var(--ed);font-size:1.24rem;color:var(--warm);opacity:.86;
  margin:1rem auto 0;max-width:26rem;line-height:1.5}

/* ══ THE PROFESSIONALS' ROOM — the card of the opposite ground ══ */
.kw-trade{background:var(--sheet);color:var(--sheet-ink);padding-block:3rem 3.2rem;
  margin-block:2.8rem}
.kw-trade .kw-lbl{color:#1C7A4E}
.kw-trade h2{font-family:var(--ed);font-weight:300;font-size:clamp(1.95rem,8.4vw,2.7rem);
  line-height:1.05;margin:.55rem 0 0;max-width:18ch}
.kw-trade .kw-body{font-family:var(--ed);font-size:1.12rem;margin:1.1rem 0 1.5rem;max-width:32rem}
.kw-trade dl{margin:0 0 1.6rem;border-top:1px solid rgba(11,46,30,.2)}
.kw-trade dt{font-family:var(--ed);font-size:1.1rem;padding-top:.8rem}
.kw-trade dd{margin:.1rem 0 .8rem;font-size:.94rem;color:var(--sheet-soft);
  padding-bottom:.8rem;border-bottom:1px solid rgba(11,46,30,.14)}
/* the separators were wrapping and leaving a dot hanging on its own line */
.kw-terms{display:flex;gap:.6rem 1rem;flex-wrap:wrap;align-items:baseline;
  border-top:2px solid var(--sheet-ink);padding-top:.95rem}
.kw-terms b{font-family:var(--ed);font-weight:300;font-size:2rem}
.kw-terms span{font-size:.92rem;color:var(--sheet-soft)}
.kw-terms em{flex:1 0 100%;font-style:normal;font-size:.92rem;color:var(--sheet-soft)}
.kw-act{display:inline-block;margin-top:1.4rem;font-family:var(--ed);font-size:1.24rem;
  text-decoration:none;color:var(--sheet-ink);border-bottom:1px solid var(--sheet-ink);
  padding-bottom:.15rem}

/* ══ the reading room ══ */
.kw-reading{padding-block:.6rem 3rem}
.kw-lead{display:grid;gap:1.1rem;padding-bottom:1.6rem;margin:.6rem 0 .3rem;
  border-bottom:1px solid rgba(242,255,248,.28)}
@media(min-width:640px){.kw-lead{grid-template-columns:11rem 1fr;gap:1.8rem;align-items:center}}
.kw-lead img{width:10rem;height:10rem;object-fit:contain;
  filter:drop-shadow(0 0 1.8rem rgba(123,227,255,.4))}
.kw-lead h3{font-family:var(--ed);font-weight:300;font-size:clamp(1.75rem,7.5vw,2.3rem);line-height:1.06}
.kw-lead p{font-family:var(--ed);color:var(--warm);opacity:.82;margin:.6rem 0 0;font-size:1.14rem}
.kw-piece-row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding-block:1rem;border-bottom:1px solid rgba(242,255,248,.13);
  text-decoration:none;color:var(--warm)}
.kw-piece-row b{font-family:var(--ed);font-weight:300;font-size:1.22rem;line-height:1.15}
.kw-piece-row em{font-style:normal;font-size:.8rem;color:var(--dim);white-space:nowrap}

.kw-foot{padding-block:2.4rem 3rem;text-align:center;background:#F6FBF7;color:var(--sheet-ink)}
.kw-foot img{width:15rem;margin:0 auto 1.3rem}
.kw-foot p{margin:.2rem 0;font-size:.95rem;color:var(--sheet-soft)}
.kw-foot .kw-holder{font-size:.92rem;max-width:28rem;margin-inline:auto}

@media(prefers-reduced-motion:reduce){
  .kw-aurora i{animation:none!important}
  *{transition-duration:.01ms!important}
}

/* ══ AN ARTICLE, SET TO BE READ ══════════════════════════════
   Her articles are the reason somebody stays — sticky is her word — so they get
   a page of their own rather than the parent's furniture, at a measure a person
   can actually read at 379 and at 1440. */
.kw-article{padding-block:2.4rem 3rem;max-width:38rem}
@media(min-width:900px){.kw-article{margin-inline:auto}}
.kw-article h1{font-family:var(--ed);font-weight:300;font-size:clamp(2.1rem,9vw,3rem);
  line-height:1.04;letter-spacing:-.02em;margin:.6rem 0 1.6rem}
.kw-prose{font-family:var(--ed);font-size:1.14rem;line-height:1.7;color:rgba(242,255,248,.92)}
.kw-prose p{margin:0 0 1.15rem}
.kw-prose h2,.kw-prose h3{font-family:var(--ed);font-weight:300;color:var(--warm);
  font-size:1.5rem;line-height:1.15;margin:2rem 0 .7rem}
.kw-prose strong,.kw-prose b{font-weight:600;color:var(--warm)}
.kw-prose a{color:var(--mint)}
.kw-prose ul,.kw-prose ol{margin:0 0 1.2rem;padding-left:1.2rem}
.kw-prose li{margin-bottom:.5rem}
.kw-prose blockquote{margin:1.4rem 0;padding-left:1.1rem;border-left:2px solid var(--mint);
  color:var(--warm);opacity:.9;font-size:1.16rem}
.kw-prose img{margin:1.5rem 0}
.kw-back{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(242,255,248,.16)}
.kw-back a{color:var(--mint);text-decoration:none;font-size:1.02rem}

/* the lead piece is a link now rather than a picture of one */
a.kw-lead{text-decoration:none;color:var(--warm)}
a.kw-lead h3{transition:color .25s ease}
a.kw-lead:hover h3,a.kw-lead:focus-visible h3{color:var(--mint)}

.kw-aside{margin-top:.9rem;font-size:.9rem;color:var(--sheet-soft);max-width:26rem}

/* The line under the professionals heading. Her observation, and it is a
   business fault rather than a copy one: **somebody who offers drumming lessons
   is not going to think they're a professional** — so the word was turning away
   exactly the people this is for. */
.kw-who{font-family:var(--ed);font-size:1.14rem;line-height:1.55;margin:.9rem 0 0;
  max-width:32rem;color:var(--sheet-ink);opacity:.88}
.kw-who b{font-weight:600;opacity:1}

/* ══ THE MOMENT NOBODY IS LISTED YET ═══════════════════════
   Her joy law governs this screen as much as any other — an empty search is
   written with warmth too — and the Language of Love standard puts it beside
   the refund and the refusal. It is also the screen this site will show most
   often in its first months, so it is built rather than left to a fallback. */
.kw-early{display:grid;gap:1.2rem;padding-block:1.6rem;align-items:start}
@media(min-width:600px){.kw-early{grid-template-columns:7rem 1fr;gap:1.8rem;align-items:center}}
.kw-early img{width:7rem;height:7rem;object-fit:contain;
  filter:drop-shadow(0 0 1.8rem rgba(79,243,192,.4))}
.kw-early h3{font-family:var(--ed);font-weight:300;font-size:clamp(1.6rem,7vw,2.1rem);
  line-height:1.1;letter-spacing:-.015em}
.kw-early p{font-family:var(--ed);font-size:1.1rem;color:var(--warm);opacity:.84;margin:.7rem 0 0}
.kw-early .kw-early-act{opacity:1}
.kw-early .kw-early-act a{color:var(--mint)}

/* THE CHECK, SAID PLAINLY WHERE A PARENT MEETS IT.
   Her ruling, 23 August: **making sure that everyone who lists has a working
   with children's check.** Stated as what is asked rather than as a reassurance
   — her law refuses anything defined by naming a fear, and her Layers Of Safety
   ruling says the plain version wins over the clever one every time. */
.kw-checked{font-family:var(--ed);font-size:1.14rem;color:var(--mint);
  margin:1.2rem auto 0;max-width:26rem;line-height:1.5}

/* an entry is a link out to the service's own page now */
a.kw-entry{text-decoration:none;color:var(--warm)}
a.kw-entry h3{transition:color .25s ease}
a.kw-entry:hover h3,a.kw-entry:focus-visible h3{color:var(--mint)}

/* one word at a time, softly — never a whole row in motion on a page whose job
   is being read. Stops dead for anybody who has asked for less movement. */
.kw-word{transition:opacity .42s ease,color .3s ease,transform .3s cubic-bezier(.2,.9,.2,1)}
.kw-word.kw-fading{opacity:0}
@media(prefers-reduced-motion:reduce){.kw-word{transition:none}}

/* ══ A BUTTON THAT SAYS WHAT IT IS ═══════════════════════════
   Her words: **that button — you've only just got an image. No one knows what
   that fucking means.** A beautiful object that does not announce itself has
   failed at the one thing a person is meant to do here. So it says what it is,
   plainly, and it looks pressable — with a line underneath saying what happens
   when it is pressed, because a moment may never end at a locked door. */
.kw-go{display:inline-flex;flex-direction:column;gap:.15rem;text-decoration:none;
  background:var(--mint);color:#04120C;padding:1rem 1.5rem;font-weight:600;
  font-size:1.18rem;letter-spacing:-.01em;line-height:1.2;
  box-shadow:0 .6rem 1.6rem rgba(79,243,192,.28);transition:transform .2s ease,box-shadow .25s ease}
.kw-go span{font-weight:400;font-size:.86rem;opacity:.78}
.kw-go:hover,.kw-go:focus-visible{transform:translateY(-2px);
  box-shadow:0 .9rem 2.1rem rgba(79,243,192,.4)}

/* ══ THE TWO NEW PAGES ═══════════════════════════════════════ */
.kw-page main{padding-block:1.6rem 3rem}
.kw-listing,.kw-find,.kw-yours{padding-inline:var(--gut)}
@media(min-width:900px){.kw-listing,.kw-find,.kw-yours{padding-inline:max(3rem,calc((100% - 58rem)/2))}}
.kw-listing h1,.kw-find h1,.kw-yours h1{font-family:var(--ed);font-weight:300;
  font-size:clamp(2.2rem,10vw,3.2rem);line-height:1.03;letter-spacing:-.022em;margin:.5rem 0 0}
.kw-stand{font-family:var(--ed);font-size:1.16rem;color:var(--warm);opacity:.86;
  margin:1rem 0 1.8rem;max-width:34rem}
.kw-stand b{opacity:1;font-weight:600}
.kw-or{margin:1.1rem 0 0;font-size:.95rem;color:var(--dim)}
.kw-or a{color:var(--mint)}
.kw-asks{margin-top:2.6rem;border-top:1px solid rgba(242,255,248,.2);padding-top:1.6rem}
.kw-asks h2,.kw-terms-page h2,.kw-invite h2{font-family:var(--ed);font-weight:300;
  font-size:1.75rem;margin:0 0 1rem}
.kw-asks ol{list-style:none;margin:0;padding:0;counter-reset:ask}
.kw-asks li{counter-increment:ask;padding:1rem 0 1rem 2.6rem;position:relative;
  border-bottom:1px solid rgba(242,255,248,.12)}
.kw-asks li::before{content:counter(ask,decimal-leading-zero);position:absolute;left:0;top:1.05rem;
  font-family:var(--ed);color:var(--mint);font-size:.95rem}
.kw-asks b{display:block;font-family:var(--ed);font-weight:300;font-size:1.32rem;line-height:1.15}
.kw-asks span{display:block;color:var(--dim);font-size:.95rem;margin-top:.2rem}
.kw-terms-page{margin-top:2.4rem;border-top:1px solid rgba(242,255,248,.2);padding-top:1.6rem}
.kw-terms-page p{color:var(--dim);margin-top:1rem;max-width:32rem}
.kw-terms-page .kw-terms{border-top-color:var(--mint)}
.kw-terms-page .kw-terms b,.kw-terms-page .kw-terms span,.kw-terms-page .kw-terms em{color:var(--warm)}
.kw-terms-page .kw-terms span,.kw-terms-page .kw-terms em{opacity:.8}
.kw-cats{display:grid;gap:.7rem;margin-top:.4rem}
@media(min-width:700px){.kw-cats{grid-template-columns:1fr 1fr}}
.kw-cat{display:grid;grid-template-columns:4.2rem 1fr;gap:1rem;align-items:center;
  text-decoration:none;color:var(--warm);padding:.95rem 1rem;
  border:1px solid rgba(242,255,248,.14);background:rgba(242,255,248,.04);
  transition:border-color .25s ease,background .25s ease}
.kw-cat:hover,.kw-cat:focus-visible{border-color:rgba(79,243,192,.5);background:rgba(79,243,192,.08)}
.kw-cat img{width:4.2rem;height:4.2rem;object-fit:contain;
  filter:drop-shadow(0 0 1rem rgba(79,243,192,.3))}
.kw-cat b{display:block;font-family:var(--plate);font-weight:400;font-size:1.28rem;
  line-height:1.15;letter-spacing:-.005em}
.kw-cat span{display:block;color:var(--dim);font-size:.92rem;margin-top:.15rem}
.kw-invite{margin-top:2.6rem;border-top:1px solid rgba(242,255,248,.2);padding-top:1.7rem}
.kw-invite p{color:var(--dim);max-width:32rem;margin:0 0 1.3rem}
.kw-back{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid rgba(242,255,248,.16)}
.kw-back a{color:var(--mint);text-decoration:none;font-size:1.02rem}
.kw-curious{position:relative}
/* THE PROVIDER'S DOOR STOPS STANDING IN A YOUNG PERSON'S DOORWAY.
   Her ruling, 24 August: *that button is terrible.* Looked at rather than
   taken on trust, at her width, and she is right — the reason is that a
   filled mint rectangle was **the only filled shape on the screen**, so it
   won the eye against a headline several times its size. The page asked a
   young person a question and answered it first with an offer aimed at
   somebody else.
   A filled shape is now reserved for a young person's own act. The way in
   for professionals is quiet here and full-strength in its own room below,
   which is where somebody looking for it is already going. */
.kw-go-small{position:absolute;right:0;top:.2rem;background:none;box-shadow:none;
  color:var(--dim);padding:0;font-weight:400;font-size:.98rem;letter-spacing:0;
  border-bottom:1px solid rgba(242,255,248,.22)}
.kw-go-small span{display:none}
.kw-go-small:hover,.kw-go-small:focus-visible{transform:none;box-shadow:none;
  color:var(--mint);border-bottom-color:var(--mint)}
@media(max-width:559px){
  .kw-go-small{position:static;margin-bottom:2rem}
}
.kw-founding{margin-top:1rem;font-family:var(--ed);font-size:1.1rem;color:var(--warm);opacity:.9}
.kw-founding b{font-weight:600}

/* ══ SUPPORT ═════════════════════════════════════════════════
   Her ruling, and it sits beside her housing ruling rather than against it: a
   category is something a person browses, and a number somebody needs at eleven
   at night is a different object entirely.

   Set to be used rather than read. **The number is the largest thing in every
   row and it is tappable**, because somebody reaching this page is not in a
   state to hunt. Nothing here names a fear in order to reassure. */
.kw-support{padding-inline:var(--gut);padding-block:1.6rem 3rem}
@media(min-width:900px){.kw-support{padding-inline:max(3rem,calc((100% - 58rem)/2))}}
.kw-support h1{font-family:var(--ed);font-weight:300;font-size:clamp(2.1rem,9.5vw,3rem);
  line-height:1.04;letter-spacing:-.022em;margin:.5rem 0 0}
.kw-help{margin-top:2.4rem}
.kw-help h2,.kw-council h2{font-family:var(--ed);font-weight:300;font-size:1.7rem;
  margin:0 0 1rem;padding-bottom:.6rem;border-bottom:1px solid rgba(242,255,248,.24)}
.kw-num{padding-block:1.15rem;border-bottom:1px solid rgba(242,255,248,.12)}
.kw-num-head{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline}
.kw-num b{font-family:var(--plate);font-weight:400;font-size:1.28rem;letter-spacing:-.005em}
.kw-call{margin-left:auto;font-family:var(--plate);font-size:1.5rem;color:var(--mint);
  text-decoration:none;letter-spacing:-.01em;white-space:nowrap;
  border-bottom:1px solid rgba(79,243,192,.4);padding-bottom:.05rem}
.kw-call:hover,.kw-call:focus-visible{border-bottom-color:var(--mint)}
.kw-when{display:block;font-size:.9rem;color:var(--mint);opacity:.85;margin-top:.25rem}
.kw-num p{margin:.5rem 0 0;color:var(--warm);opacity:.82;font-size:1rem}
.kw-out{display:inline-block;margin-top:.55rem;font-size:.9rem;color:var(--dim);text-decoration:none}
.kw-out:hover,.kw-out:focus-visible{color:var(--mint)}
.kw-council{margin-top:2.6rem;display:grid;gap:1.4rem;align-items:center;
  border-top:1px solid rgba(242,255,248,.24);padding-top:1.8rem}
@media(min-width:680px){.kw-council{grid-template-columns:9rem 1fr;gap:2rem}}
.kw-council img{width:9rem;height:9rem;object-fit:contain;
  filter:drop-shadow(0 0 1.6rem rgba(79,243,192,.35))}
.kw-council h2{border:0;padding:0;margin-bottom:.6rem}
.kw-council p{color:var(--warm);opacity:.84;margin:0 0 1.3rem;max-width:32rem}
.kw-said{margin-top:2.2rem;font-size:.9rem;color:var(--dim);max-width:34rem}

/* and the way to it, from the foot of every page */
.kw-foot .kw-help-link{display:inline-block;margin-top:.6rem;color:#0E7A45;
  font-family:var(--plate);font-size:1.05rem;text-decoration:none;
  border-bottom:1px solid rgba(14,122,69,.4);padding-bottom:.1rem}
.kw-foot .kw-help-link:hover,.kw-foot .kw-help-link:focus-visible{border-bottom-color:#0E7A45}

/* ══ WHAT A YOUNG PERSON KEEPS ═══════════════════════════════════════════
   Her ruling, 24 August: a young person needs the ability to save their
   favourites and the places she might want later on.

   **Her own law from this morning decides how this looks: a filled shape is
   reserved for a person's own act.** So Keep is a quiet outline until she
   presses it and fills the moment it is hers. **The fill is the record of her
   choosing rather than an invitation shouted at her**, and it is the only
   filled shape that appears anywhere in a result.

   And her autonomy law: the word never tells her what she has done or why.
   Kept, and it waits.                                                        */
.kw-entry h3 a{color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease}
.kw-entry h3 a:hover,.kw-entry h3 a:focus-visible{color:var(--mint);border-bottom-color:var(--mint)}
.kw-keep{grid-column:2;grid-row:2;justify-self:start;margin-top:.8rem;
  font:inherit;font-size:.92rem;line-height:1;letter-spacing:.02em;
  padding:.5rem 1rem;cursor:pointer;background:none;color:var(--mint);
  border:1px solid rgba(79,243,192,.42);
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.kw-keep:hover,.kw-keep:focus-visible{border-color:var(--mint);background:rgba(79,243,192,.1)}
.kw-keep.kw-on{background:var(--mint);border-color:var(--mint);color:#04120C;font-weight:600}
.kw-keep.kw-on:hover,.kw-keep.kw-on:focus-visible{background:var(--lime,#B9FF6A);border-color:var(--lime,#B9FF6A)}

/* The tally beside the way in. It shows itself only once she has kept somebody,
   so an empty count never sits there looking like a score of zero. */
.kw-tally{font-style:normal;font-family:var(--plate);font-size:.82rem;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.35rem;height:1.35rem;padding-inline:.35rem;margin-left:.5rem;
  background:var(--mint);color:#04120C;border-radius:50rem;vertical-align:middle}
.kw-yours .kw-stand b{display:block;margin-top:.5rem;font-weight:400;
  font-size:1rem;color:var(--dim);opacity:1}
.kw-yours .kw-found-head{margin-top:2rem}
@media(prefers-reduced-motion:reduce){
  .kw-keep,.kw-entry h3 a{transition:none}
}

/* **THE MARKING IS GONE, ON HER RULING.**
   `.kw-ours` said ONE OF OURS beside LocaLilly for about an hour. Her
   correction: *the businesses should simply show that they are linked; you
   don't need to say they are yours.* And the sampler built to settle its
   wording went with it — **a sampler for a question she has answered is a
   question asked twice.**                                                    */

/* **RENAMED, AFTER COLLIDING WITH MY OWN CLASS.**
   These were `.kw-door` — a name already taken 430 lines above by the small
   professionals' door in the header, which is `position:absolute`. **All three
   doors inherited it and painted on top of each other**, and the section
   collapsed to a third of its height.
   Prefixing is not enough on its own: **the prefix was right and the name was
   still taken.** Caught on the build site rather than on hers, which is the
   whole reason the build site exists.                                        */

/* ══ THE THREE DOORS ═════════════════════════════════════════════════════
   Her ruling: LocaLilly, the third, and Know Where are a team, and a young
   person walks a journey through them. **Never three businesses sharing what
   they know about her** — so there is nothing in this section but words and
   links. No visitor is identified, no record travels, and nothing on any side
   learns that somebody went.                                                */
.kw-onward-set{padding-block:2.8rem 3.2rem;border-top:1px solid rgba(242,255,248,.16)}
.kw-onward-set h2{font-family:var(--ed);font-weight:300;font-size:clamp(1.9rem,8vw,2.6rem);
  line-height:1.04;letter-spacing:-.02em;margin:.5rem 0 1.6rem;max-width:16ch}
.kw-onward{display:block;text-decoration:none;color:var(--warm);
  padding:1.3rem 0;border-top:1px solid rgba(242,255,248,.13)}
.kw-onward b{display:block;font-family:var(--plate);font-weight:400;font-size:.82rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.kw-onward b span{display:block;font-family:var(--ed);font-weight:300;font-size:1.62rem;
  letter-spacing:-.01em;text-transform:none;color:var(--warm);margin-top:.3rem}
.kw-onward p{margin:.55rem 0 0;font-size:1rem;line-height:1.5;opacity:.84;max-width:34rem}
.kw-onward em{display:inline-block;font-style:normal;margin-top:.6rem;font-size:.9rem;
  color:var(--dim)}
a.kw-onward:hover b span,a.kw-onward:focus-visible b span{color:var(--mint)}
a.kw-onward:hover em,a.kw-onward:focus-visible em{color:var(--mint)}
.kw-onward-here b span{color:var(--mint)}
.kw-onward-soon{opacity:.72}


/* Her own, featured free on her own homepage — her ruling, and it needs no
   badge. **The lift is room and light rather than a filled shape**, because a
   filled shape is reserved for a person's own act. */
.kw-onward-lit{position:relative;padding-right:6.5rem}
.kw-onward-lit img{position:absolute;right:0;top:1.3rem;width:5.4rem;height:5.4rem;
  object-fit:contain;filter:drop-shadow(0 0 1.6rem rgba(79,243,192,.45));pointer-events:none}
.kw-onward-lit b span{color:var(--warm)}
.kw-onward-lit:hover b span,.kw-onward-lit:focus-visible b span{color:var(--mint)}
@media(min-width:700px){.kw-onward-lit img{width:7rem;height:7rem}
  .kw-onward-lit{padding-right:8.5rem}}

/* Somebody outside the family who paid to stand at the top of a category.
   **It says what is true about the provider rather than cautioning the
   reader** — her law that nothing is defined by a negation that plants a fear.
   Asked To Be Seen Here, never paid placement. */
.kw-asked{font-style:normal;font-family:var(--plate);font-size:.72rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--sky);
  border:1px solid rgba(123,227,255,.35);padding:.1rem .4rem;
  margin-left:.35rem;white-space:nowrap;vertical-align:.05em}

/* The parent writes the child's line into its own paragraph, so her sentence is
   dressed here rather than carried as markup. **The parent escapes what a child
   hands it**, which is the right way round — a child should not be able to put
   tags on a login screen. */
.login .lamoureux-door-line{width:22rem;max-width:92vw;margin:0 auto 1.2rem;
  text-align:center;font-size:1.06rem;color:#8FBFA9;line-height:1.5;
  background:none;border:0;box-shadow:none;padding:0}