/* ====================================================================
   THE EARLY STAGE DEALROOM — THE PHONE.

   This sheet loads LAST, after rdy-noir.css (the components), app.css
   (page layout) and esd.css (the event's skin). Every rule in it is
   inside a media query bar one line — §0, which hides the three controls
   that only a phone has — so on a desk this file does not exist: the
   product above 760px is what it was before it was written.

   WHY A SHEET OF ITS OWN RATHER THAN A QUERY PER COMPONENT. The three
   sheets under this one already carry a dozen small `max-width` rules,
   and each of them answers one question — does this row still fit? What
   they cannot answer is the question a phone actually asks, which is
   about the WHOLE screen: a bar, a page and a footer competing for 844
   points of height, where every component giving way politely still adds
   up to a product you cannot use. The room was the proof. Six dropdowns,
   a countdown and a deadline all shrank correctly and the result was a
   fixed band whose header was 1100px tall, with the founder list — the
   entire point of the page — pushed below a viewport that does not
   scroll. Nothing in it was broken. It was unusable.

   SO THE PHONE GETS DECISIONS, NOT REDUCTIONS:
     · the bar becomes one button and a drawer, and every door comes back
       — three of them used to be dropped at a width, which is how an
       organiser on a phone lost the way to the back office
     · the room's header collapses to two lines, with the filters behind
       a toggle, so the list starts inside the first screen
     · the footer becomes one line that cannot wrap, because it is fixed
       and everything it wraps onto covers the page
     · anything that was two columns because a desk has room is one
     · every control anybody has to hit is at least 44px of target

   THE HOUSE GRAMMAR IS UNCHANGED. Hairlines, no boxes, one accent, an
   input is an underline. The drawer is built out of the door's own
   `.sidecard` — a rule, a heavy word, an arrow — because it is the same
   object: a list of ways through.

   760px IS THE LINE and it is not arbitrary — it is the width at which
   esd.css used to start taking the bar apart, which is the point the bar
   stopped fitting. Above it, esd.css still drops the identity chip at
   1040 and log out at 820; below it that whole approach is replaced
   rather than continued, and esd.css says so where those rules were.
   ==================================================================== */

/* --------------------------------------------------------------------
   0. THE THREE THINGS THAT ONLY EXIST DOWN HERE.

   The bar's button, the drawer it opens and the room's filter toggle are
   drawn into the markup at every width — one list of doors rendered twice
   is what keeps the bar and the drawer from ever disagreeing (see
   doorList() in app.js) — so above the line they are simply not shown.
   These are the only declarations in this file outside a media query, and
   they are all the same declaration.
   -------------------------------------------------------------------- */
.navtoggle,.mobnav,.fbtn{display:none}

/* --------------------------------------------------------------------
   0b. A SHORT SCREEN, AT ANY WIDTH — the one rule that is about height.

   The room is a fixed band: its header does not scroll and the list is
   given whatever is left, which is the arrangement that made the phone
   version show nothing. A phone on its side is 390 points tall and 844
   wide, so it takes the DESK header — the widest layout, in the shortest
   viewport — and lands in exactly the same place by the other route.
   This is not a second layout for it; it is a floor under the list. The
   header keeps whatever shape its width earns and starts scrolling
   inside itself once it would take more than half the band.
   -------------------------------------------------------------------- */
@media (max-height:620px){
  .dr-ask{max-height:56svh;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:none}
  .dr-ask::-webkit-scrollbar{display:none}
}


@media (max-width:760px){

/* --------------------------------------------------------------------
   1. THE BAR — one mark, one button.

   IT USED TO DROP DOORS AT WIDTHS. The identity chip went at 1040, log
   out at 820, the organiser's hat at 520, and what was left still
   overflowed 390px: the founder list ran off the right edge of the
   screen with nothing to say it was there. Three of those are doors to
   pages with no other route to them, so on a phone the product quietly
   lost a third of itself.

   The bar now carries the lockup and one control. Everything that was
   being dropped is in the drawer below, at full size, with room to say
   what it is.
   -------------------------------------------------------------------- */
:root{--bar-h:62px}
header.topbar{padding:0 16px;gap:12px}
header.topbar.scrolled{height:var(--bar-h)}
/* the pills are the desk's navigation; on a phone they are all in the
   drawer, so none of them is in the bar */
.actions>*{display:none}
.actions .navtoggle{display:inline-flex}

/* THE BUTTON SAYS THE WORD. There is no icon language in this house —
   one circled arrow and nothing else — so a hamburger would be the only
   glyph in the product that has to be learnt. `menu` is two syllables
   and needs no legend; the three rules beside it are what makes it read
   as a control at a glance rather than a link. */
.navtoggle{align-items:center;gap:9px;flex:0 0 auto;
  border:1px solid var(--pill-line);border-radius:var(--pill-radius);background:none;
  padding:8px 14px;font:inherit;font-size:13px;font-weight:700;letter-spacing:.02em;
  text-transform:lowercase;color:var(--ink);min-height:38px;
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.nt-bars{display:grid;gap:3px;width:15px}
.nt-bars i{display:block;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
/* a dot in the accent when the drawer holds something that is not just
   navigation — an organiser's second hat. Nothing else earns one. */
.navtoggle .nt-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
body.navopen .navtoggle{border-color:var(--ink);color:#fff}
body.navopen .nt-bars i:first-child{transform:translateY(4.5px) rotate(45deg)}
body.navopen .nt-bars i:nth-child(2){opacity:0}
body.navopen .nt-bars i:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* --------------------------------------------------------------------
   2. THE DRAWER — every door, at the size of a thumb.

   It hangs under the bar rather than over it, so the button that opened
   it is still the button that closes it and never moves. The sky stays
   where it is behind a blur: this is chrome over the product, not a
   second page.
   -------------------------------------------------------------------- */
.mobnav{position:fixed;inset:var(--bar-h) 0 0;z-index:190;
  display:none;overflow-y:auto;overscroll-behavior:contain;
  background:rgba(4,3,12,.86);
  backdrop-filter:blur(22px) saturate(1.1);-webkit-backdrop-filter:blur(22px) saturate(1.1);
  padding:clamp(18px,4vw,26px) 16px calc(28px + env(safe-area-inset-bottom))}
body.navopen .mobnav{display:block;animation:mn-in .28s var(--ease) both}
/* the page under it holds still. body.deal is already overflow:hidden and
   loses nothing by being told twice. */
body.navopen{overflow:hidden}
@keyframes mn-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* who is signed in, at the head of it — the one thing the bar dropped
   first and the one thing a drawer has room to say properly. It is a
   button because it opens the profile, and the house does not reset a
   bare one: without this it draws as the platform's own grey slab, which
   is the one surface this product has nowhere else. */
.mn-who{display:block;width:100%;margin:0 0 clamp(16px,3vw,22px);
  background:none;border:0;padding:2px 2px 0;font:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.mn-nm{display:block;font-size:clamp(24px,6.4vw,30px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.05;color:#fff}
.mn-sub{display:block;margin-top:5px;font-size:13px;font-weight:400;color:var(--muted2);
  text-transform:lowercase}

/* A DOOR IS THE DOOR'S OWN COMPONENT. Same shape as the two sides on the
   front page: a hairline, a heavy word, an arrow that says it opens. The
   padding is what makes it a phone control — 58px of row, so the target
   is the whole line and not the six characters in it. */
.mn-link{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:58px;padding:15px 2px;
  background:none;border:0;border-top:1px solid var(--divider);
  font:inherit;text-align:left;cursor:pointer;color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  transition:padding-left .3s var(--ease),color .25s var(--ease)}
.mn-link:last-of-type{border-bottom:1px solid var(--divider)}
.mn-link:active{padding-left:8px;color:#fff}
.mn-t{font-size:clamp(19px,5vw,23px);font-weight:700;text-transform:uppercase;letter-spacing:-.012em;
  line-height:1.1}
.mn-link .circ{flex:0 0 auto;color:var(--muted2)}
/* the page you are already on: named, not offered */
.mn-link.on .mn-t{color:var(--accent-bright)}
.mn-link.on .circ{opacity:.35}
/* the hat is not a tab — it crosses between two products behind one
   login, and takes the violet it has in the bar for exactly that reason */
.mn-link.hat .mn-t{color:#cfc2ff}
/* the way out is not a door and does not look like one */
.mn-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:clamp(20px,4vw,28px)}
.mn-foot .pill{min-height:44px}

/* --------------------------------------------------------------------
   3. THE FOOTER — one line, and it may not wrap.

   It is fixed, so every line it grows is a line laid over the bottom of
   the page: on a phone it was three of them, and the last row of a
   timetable was underneath the word "brussels". Now it is two addresses and
   they cannot make a second line on any width.
   -------------------------------------------------------------------- */
:root{--footer-h:40px}
.site-footer{padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:12px;
  font-size:11px;flex-wrap:nowrap;align-items:baseline}
/* the event's line and the arithmetic of the day are both gone from the row
   on every screen now, so there is nothing left to truncate or hide down
   here — the two addresses fit a phone on their own */
.site-footer .foot-links{gap:14px;flex-wrap:nowrap;flex:0 0 auto;font-size:11px}
/* and the scrim under it leans harder, because what is behind it now is
   body copy rather than a poster's empty half */
.site-footer::before{background:linear-gradient(to top,rgba(4,3,12,.94) 0,rgba(4,3,12,.72) 45%,rgba(4,3,12,0) 100%)}

/* --------------------------------------------------------------------
   4. THE ROOM — the header gives way so the list can start.

   THE PAGE DOES NOT SCROLL; THE LIST DOES. That is the whole design of
   this screen and it is what made the phone version unusable: the ask
   is `flex:0 0 auto` inside a fixed band, so every row it grew came
   straight out of the founders. Stacked, the deadline block, six
   dropdowns and two counters came to about 1100px — more than the
   viewport — and the list under them had zero height. Not clipped. Zero.

   So on a phone the ask is two lines and a button:
     · the deadline and the count share a small grid instead of two
       columns that stack
     · the six filters are behind one toggle, shut by default, and the
       toggle says how many are on so a narrowed list is never a mystery
     · the meter goes, because the selbar above it is already saying the
       same two numbers
   -------------------------------------------------------------------- */
.dr-ask{width:auto;align-self:stretch;padding:0 16px clamp(6px,1.4vh,12px)}
.dr.found .dr-ask{padding-top:12px}
.d-scroll{width:auto;align-self:stretch;padding:10px 16px calc(8px + env(safe-area-inset-bottom))}

/* ---- the deadline strip. `display:contents` on the right-hand column is
   what lets its two children take their own cells: the state line sits
   under the clock and the button keeps the corner, which is a two-line
   block instead of a four-line stack. ---- */
.selbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:8px 14px;padding:0 0 12px;margin:0 0 12px}
.sb-clock{grid-column:1/-1;display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
.sb-l{margin:0;font-size:9.5px;letter-spacing:.16em}
.sb-when{margin:0}
.sb-state{font-size:13.5px}
/* the sentence explaining what the order decides is on the selection
   screen itself, one tap away, and is 3 lines of a phone here */
.sb-hint{display:none}

/* ---- THE WAY ON, ON A PHONE. `display:contents` on the wrapper is what
   keeps the filter row's two children as direct children of the ask: the
   filters are a scrolling column inside a fixed band when the toggle is
   open, and a box in between would take that height away from them. So the
   dropdowns keep their behaviour and the call to action becomes a block of
   its own, full width, where a thumb expects a primary button. ---- */
.frow{display:contents}
.selcta{max-width:none;align-items:stretch;text-align:left;gap:6px;padding:12px 0 0}
.selcta .sb-state{font-size:13px}
.pill.cta-sel{justify-content:center;min-height:44px;width:100%}
/* while the filters are the screen, the way off it is `done`, and nothing
   else on that screen is a way somewhere else */
#dr.filters .selcta{display:none}
/* ---- the search line. 16px is not a taste: below it, iOS zooms the page
   on focus and leaves it zoomed, which on a fixed full-viewport band
   means the list is off the side of the screen afterwards. ---- */
#q{font-size:16px;padding:10px 0 12px}

/* ---- THE FILTERS, BEHIND A TOGGLE. The row's own note in app.css says
   a filter you cannot see is one you cannot remember setting, and it is
   right — which is why the toggle carries the count. Shut, it is one
   line; open, it is the same two-column grid the desk falls back to. ---- */
.fbar{display:none;padding:14px 0 2px;gap:14px 18px}
.fbar .fsel{flex:1 1 130px}
.fbar select.uline{width:100%;max-width:none;font-size:16px}
.fbtn{display:inline-flex;margin-left:auto;min-height:34px}
.fbtn .fb-open{display:none}

/* ---- OPEN, IT IS THE SCREEN — not a panel squeezed in over the list.
   Six dropdowns is 300px however they are arranged, and this block is
   `flex:0 0 auto` inside a band that does not scroll: sharing the height
   would do to the founders exactly what the stacked header used to do to
   them. So narrowing is a mode. The count line stays pinned at the foot
   of it with the live total in it, which is the whole reason it can be a
   mode at all — you watch "31 founders" become "4" while you set them,
   and `done` is the same button that opened it, in the same place. ---- */
#dr.filters .dr-ask{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  overflow:hidden;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
#dr.filters .fbar{display:flex;flex:1 1 auto;min-height:0;align-content:flex-start;
  overflow-y:auto;overscroll-behavior:contain;padding-bottom:12px}
#dr.filters .d-bar{flex:0 0 auto;border-top:1px solid var(--divider);padding-top:12px}
#dr.filters .fbtn .fb-shut{display:none}
#dr.filters .fbtn .fb-open{display:inline}
#dr.filters .d-scroll{display:none}
.d-bar{padding:10px 0 0;gap:10px}
.dr.browse .d-bar{padding:10px 0 0}
/* the meter says "14 asked for · only 9 fit"; the strip at the top of the
   same screen already says "14 asked for · 9 in order". One of them. */
.d-bar .pickmeter{display:none}
.d-bar .count{flex:0 1 auto;font-size:12.5px}

/* one card per row, and the sentence at the foot gets its full two lines
   back because there is no third column squeezing it */
.pgrid{grid-template-columns:minmax(0,1fr);gap:10px}
.pcard{min-height:0}
/* the one control on a card is a button somebody presses with a thumb */
.pickbtn{min-height:38px;padding:8px 15px}

/* --------------------------------------------------------------------
   5. PUTTING THEM IN ORDER — the row breaks in two.

   The desk row is number, mark, who, heat, moves. On a phone the moves
   are what matter — this screen exists to be operated — so they get a
   line of their own with real targets, and the hairline that marks the
   cut-off wraps instead of running off the side of the screen.
   -------------------------------------------------------------------- */
.rk-row,.fo-row{grid-template-columns:2em 34px minmax(0,1fr);gap:8px 12px;
  padding:13px 0}
.rk-heat{grid-column:2/span 2;text-align:left;font-size:12px}
.rk-act,.fo-act,.fo-mark{grid-column:1/-1;justify-content:flex-start;gap:8px;margin-top:2px}
/* THE SELECTION'S ROW KEEPS ITS SHAPE. The grip and the bin are the two
   things a thumb aims at, so they stay on the first line at the right edge
   with real targets, and the sector goes under the name. A row of controls
   on a line of its own doubles the height of a list of twenty-five. */
.ranklist .rk-row{grid-template-columns:2em 34px minmax(0,1fr) auto}
.ranklist .rk-act{grid-column:4;grid-row:1;justify-content:flex-end;margin:0;gap:2px}
.ranklist .rk-sector{grid-column:3;grid-row:2}
.ranklist .rk-grip,.ranklist .rk-del{width:40px;height:40px}
.rk-how{font-size:12px}
/* THE MOVES ARE THE SCREEN. Up, down and to-the-top were 15px words in a
   row of five; here the two arrows are square targets and the three
   words are pills of the same height, so nothing on the line is a
   different size from anything else on it. */
.rk-act .tog{min-width:44px;min-height:40px;justify-content:center;font-size:15px}
.rk-act .tlink,.fo-act .tlink{display:inline-flex;align-items:center;min-height:40px;
  padding:0 4px;font-size:13.5px}
/* the line across the list at the slot count. `flex:0 0 auto` on the
   label plus a phone's width is a sentence that runs off the page and
   takes the whole layout sideways with it — the label wraps now, and the
   rule that follows it takes what is left of the last line. */
.rk-line{flex-wrap:wrap;gap:8px;padding:16px 0 10px}
.rk-line span{flex:1 1 100%;font-size:10px;line-height:1.5;letter-spacing:.12em}
.rk-line::after{flex:1 1 auto;min-width:40px}

/* --------------------------------------------------------------------
   6. YOUR AFTERNOON — the slot reads down, not across.

   Five columns became three at 640px with the clock tucked under the
   name, which put the two answers this page exists for — when, and who
   — on different lines in the wrong order. The number and the clock lead
   as one block on the left, the person takes the rest, and the chip goes
   under them rather than fighting the name for the right edge.
   -------------------------------------------------------------------- */
.slot{grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:14px 0}
.sl-n{grid-row:1;align-self:start;font-size:12px}
.sl-t{grid-row:2;grid-column:1;font-size:12px;align-self:start}
.sl-mark{display:none}
.sl-who{grid-column:2;grid-row:1/span 2}
.sl-end{grid-column:2;justify-content:flex-start;margin-top:2px}
.sl-end .rarrow{display:none}
.slot:not(.free):active{padding-left:8px;background:rgba(255,255,255,.03)}

/* --------------------------------------------------------------------
   7. THE BACK OFFICE — eleven tabs are a strip you swipe, not four rows
   you read.

   This is the one place a sideways scroll is the right answer and the
   filter row was not: a tab strip has an order, you are always on one of
   them, and the one you are on is drawn. Wrapped, the eleven took four
   rows and 200px off the top of every screen in the office — and the
   separator between the people and the machinery landed mid-row, where
   it reads as a rendering fault rather than as a gap somebody meant.
   -------------------------------------------------------------------- */
.admin .panelnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  gap:18px;margin:16px 0 22px;padding-bottom:0;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 92%,transparent 100%);
          mask-image:linear-gradient(to right,#000 0,#000 92%,transparent 100%)}
.admin .panelnav::-webkit-scrollbar{display:none}
.admin .panelnav button{flex:0 0 auto;white-space:nowrap;padding-bottom:11px;font-size:14.5px}
.pn-gap{align-self:auto;height:14px;margin:0 2px}
/* the phase line, given room to wrap rather than pushed to the end of a
   row that has no end left */
.aphase{gap:6px 14px;padding:10px 0}
.ap-next{font-size:12px}
/* a request is read and then decided, so the two verdicts are a row of
   real buttons under it rather than three links beside a name */
.reqcard{padding:16px 14px}
.rq-head{gap:12px}
.rq-id{min-width:0;flex:1 1 100%}
.rq-act{width:100%;gap:8px}
.rq-act .pill{flex:1 1 auto;justify-content:center;min-height:42px}
.rq-facts{gap:14px 22px;margin-top:18px}
.admin .rows .row{grid-template-columns:minmax(0,1fr) auto}
.admin .scrollpane{max-height:none;overflow:visible;overscroll-behavior:auto}
.ahead{gap:12px}
.ahead-side{gap:8px}
/* a moment, typed: four boxes and a time on a 358px column */
.dtrow{gap:8px 10px}
.dtrow .dt-m{min-width:7.4em}
.dtrow .dt-t{width:8em}
/* the letter renders in its own document at its own width — on a phone
   the frame has to be allowed to scroll rather than be squeezed */
.mp-frame{height:min(70vh,560px)}

/* --------------------------------------------------------------------
   8. FIELDS AND FORMS — 16px, and one column.

   16px IS A BUG FIX, NOT A TYPE CHOICE. Mobile Safari zooms into any
   field whose text is under 16px the moment it is focused, and it does
   not zoom back out — so a 15.5px underline turned the profile into a
   page you had to pan sideways to read after touching one input.
   -------------------------------------------------------------------- */
:root{--field-size:16px;--field-pad:10px 2px}
.form-grid{grid-template-columns:minmax(0,1fr);gap:20px}
.fld textarea,.qblock textarea{font-size:16px}
.qblock>label{font-size:16px}
/* the house's own file picker, and the photo it replaces */
.logo-fld{flex-direction:column;gap:14px}
.file-pill{min-height:42px}
.avatar-plate{width:60px;height:60px;font-size:18px}
/* the save dock rides above the footer, and needs its own floor: the
   footer's scrim is transparent, so a dock with no fill let a row of
   fields show through the one control that says whether they saved */
.dock{bottom:var(--footer-h);padding:12px 0 14px;
  background:linear-gradient(to top,#04030c 60%,rgba(4,3,12,.82))}
.dock .pill{min-height:42px}
/* three panels of a profile: a strip, not a wrapped block */
.pcol .panelnav,.pwrap .panelnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:18px}
.pcol .panelnav::-webkit-scrollbar{display:none}
.pcol .panelnav button{flex:0 0 auto;white-space:nowrap}

/* --------------------------------------------------------------------
   9. THE FRONT PAGE — the same scroll, at a thumb's scale.

   Signed in or out the door is one centred column of sections at every
   width, so there are no tracks to undo here any more. What is left is
   type: a fund's name wrapping inside its cell instead of being cut off
   with an ellipsis, and the two ways in at the size of a thumb.
   -------------------------------------------------------------------- */
.iw-word{white-space:normal;font-size:13.5px;line-height:1.25}
/* the title owns the first screen on a phone too, and 9.6vw of 390 is not
   enough of it — but the qualifier line above it has to keep fitting */
.door-h{font-size:clamp(42px,13.5vw,64px)}
/* the two ways in, on the door itself */
.sidecard{padding:16px 0;gap:12px}
.sc-t{font-size:clamp(18px,5vw,22px)}
.sd-ring{width:42px;height:42px}

/* --------------------------------------------------------------------
   10. THE THINGS EVERY PAGE HAS.
   -------------------------------------------------------------------- */
/* a page's title is the biggest thing on a phone and does not need to be
   the tallest as well */
h1.big,h2.big{font-size:clamp(28px,8.4vw,36px)}
.rdy-page{padding-left:0;padding-right:0}
.wrap{padding-left:16px;padding-right:16px;padding-bottom:96px}
/* nothing in this product is hover-first, and on a touch screen a hover
   state that sticks after a tap reads as a selection nobody made */
.row:hover .rname,.slot:hover .sl-nm,.pcard.click:hover{transform:none}
.pill:hover{transform:none}
/* the one true overlay, on a small screen */
.modal-overlay{padding:14px 12px calc(14px + env(safe-area-inset-bottom))}
.toast{left:16px;right:16px;transform:none;bottom:calc(var(--footer-h) + 18px);
  text-align:center}
.toast.show{transform:none}
/* a detail page's two buttons are a row of two, not two thirds of one */
.dhead{gap:14px;margin-top:18px}
.dhead-main{min-width:0;flex:1 1 100%}
.dhead-side{width:100%;gap:8px}
.dhead-side .pill{flex:1 1 auto;justify-content:center;min-height:42px}
.detail .dhead .avatar{width:52px;height:52px;font-size:17px}
.btn-row .pill{min-height:42px}
/* the questionnaire's own answer blocks, read rather than filled */
.detail .roq p{padding-left:13px}

}   /* end 760px */


/* ====================================================================
   THE NARROW HALF — 440px and under, which is most phones held upright.
   Only the things that still do not fit at 390px are here; everything
   above stands.
   ==================================================================== */
@media (max-width:440px){
  .navtoggle{padding:8px 12px}
  .navtoggle .nt-lbl{display:none}       /* the three rules carry it alone */
  .cobrand{gap:8px}
  /* two 175px cells is a fund's name on two lines with room to spare; the
     wall stays two columns because one is a list, not a wall */
  .iw-word{font-size:12.5px}
}