/* The menu (decision D141): since D199 the menu card (theme.css, the footer's, D147), placed at the top right so it
   grows out of the menu button. Zana, 14 October 2026, of the menu as the night over the whole screen: "i dont like the
   full menu. since we wont have many pages only specific modals"; before that, of the drawer: "looks cheap and sloppy".
   The card stands a little out from the button on every side, so the button sits in its top right corner, and its
   label stands level with the button. It opens as the footer's does, from the corner the button is in: the card grows
   on the unfold motion, its label and action fade in .3s later and its links rise into place, .02s apart; it folds back
   the same way (site.js). The page is not dimmed; a click beside the card closes it.
   The drawer and the full-screen versions are in working/archive (menu-drawer-2026-10-14, menu-full-2026-10-14). */
:root{--menu-inset:var(--s-2)}

/* The scrim stays clear: it only catches a click beside the card, which closes the menu */
.menu-scrim{position:fixed;inset:0;z-index:89;background:none;pointer-events:none}
body.menu-open .menu-scrim{pointer-events:auto}

.menu.menu-card{position:fixed;top:calc(var(--nav-top) - var(--menu-inset));right:calc(var(--gs) - var(--menu-inset));z-index:90;
  width:min(29rem,calc(100vw - 2 * (var(--gs) - var(--menu-inset))));max-height:calc(100svh - 2 * (var(--nav-top) - var(--menu-inset)));
  padding-top:var(--menu-inset);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;color:var(--text-inverse);visibility:hidden}
.menu::-webkit-scrollbar{display:none}
body.menu-open .menu,.menu.is-folding{visibility:visible}
.menu :focus-visible{outline-color:var(--focus-inverse)}
/* Over the page the card is a piece of the night, Prussian with its depth, as the hero and the footer are: the footer's
   glass (navy at 80%) turns slate grey over white, so this placement holds its colour at 94% */
.menu .menu-card_background{background-color:color-mix(in srgb,var(--c-prussian) 94%,transparent);background-image:var(--depth-prussian)}
/* the label level with the button, in the button's height */
.menu .menu-card_title{display:flex;align-items:center;height:var(--nav-h);margin-bottom:var(--s-4)}
/* the page the visitor is on keeps its line drawn under it */
.menu .menu-card_link[aria-current]::after{transform:scaleX(1)}
.menu .menu-card_link[aria-current]:not(.is-main){color:var(--text-inverse)}

/* Closed, the card waits shrunk into its corner, its words below their masks and its label and action faded out;
   site.js opens it on the unfold motions. The masks clip until the card has settled open, so a focus ring shows in
   full once it is still. Under reduced motion it simply shows and hides. */
@media (prefers-reduced-motion:no-preference){
  html.js .menu:not(.is-open) .menu-card_background{transform:scale(0)}
  html.js .menu:not(.is-open) .menu-card_link{transform:translateY(150%)}
  html.js .menu:not(.is-open) :is(.menu-card_title,.menu-card_button,.menu-card_sublabel){opacity:0}
  html.js .menu:not(.is-settled) .menu-card_mask{overflow:hidden}
}
/* The pages beside the home page (D216): About, Insights, Privacy and the not-found page. Built from the system's own
   rules and values: the opening as a section's (the small label, the title at the display size), the page's one split
   at the 40% line (D213: a part's line heading it, the larger space above the line, a step of the scale below it; text
   to about seventy characters a line), frames that open from the middle (D148), and the sheets' tabs (D215). */

/* ---- The opening: the label, the title, and its text at the title size in light on the 40% line ---- */
.page-opening{position:relative;z-index:1;padding:calc(var(--nav-top) + var(--nav-h) + var(--s-9)) 0 var(--s-8);background:var(--surface)}
.page-opening_kicker{margin:0 0 var(--s-5);color:var(--text-3)}
.page-opening_title{margin:0;max-width:12em}
.page-opening_lead{margin:var(--s-7) 0 0;max-width:var(--measure-statement);font-size:var(--fs-title-s);font-weight:var(--w-light);line-height:1.4;letter-spacing:0;color:var(--text);text-wrap:pretty}
.page-opening_lead.is-on-line{margin-left:40%}
.page-opening_action{margin-top:var(--s-7)}
.page-opening.is-short{min-height:min(70svh,44rem)}

/* ---- A frame across the page, opening from its middle as it comes in (pages.js) ---- */
.page-band{position:relative;z-index:1;padding:0 0 var(--s-9);background:var(--surface)}
.page-band_frame{margin:0;aspect-ratio:21/9;overflow:hidden;border-radius:var(--r-card);background:var(--surface-prussian)}
/* since D232 the road through the forest: the frame's band a little above its middle, so the road comes in at the left
   edge and leaves at the foot */
.page-band_frame img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%}

/* ---- A part on the 40% line ---- */
.page-part{position:relative;z-index:1;padding:0 0 var(--s-9);background:var(--surface)}
.page-part_grid{display:grid;grid-template-columns:40% minmax(0,1fr);row-gap:var(--s-5)}
.page-part_rule{grid-column:1/-1}
.page-part_title{grid-column:1;margin:0;padding-right:var(--s-6);text-wrap:balance}
.page-part_main{grid-column:2;min-width:0;max-width:var(--measure-text)}
.page-part_main>p{margin:0}
.page-part_main>p+p{margin-top:var(--s-4)}
.page-part.is-text .page-part_grid{row-gap:0}

/* ---- About: Interests of our own, on the curiosity card (D142) ---- */
.about_interests{padding-bottom:var(--s-9)}
.about_interests .home-team_component{gap:var(--s-6)}
.about_interests-title{margin:0;color:var(--text-inverse);max-width:10em}
.about_interests .intro_component{gap:var(--s-5)}
.about_interests-text{position:relative;z-index:3;max-width:30rem}
.about_interests-p{margin:0;font-size:var(--fs-title-s);font-weight:var(--w-light);line-height:1.4;color:var(--text-inverse)}

/* ---- About: the people; their portraits in black and white, in colour when
   pointed at ---- */
.about_people .page-part_grid{row-gap:var(--s-5)}
.people{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-5);margin:0;padding:0;list-style:none}
.person{display:flex;flex-direction:column;min-width:0}
.person_photo{margin:0 0 var(--s-5);aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-card);background:var(--surface-2)}
.person_photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 16%;filter:grayscale(1) contrast(1.04);transition:filter var(--motion-hover)}
.person:hover .person_photo img{filter:none}
.person_name{margin:0}
.person_role{margin:var(--s-2) 0 0;color:var(--text-3)}
.person_bio{margin:var(--s-4) 0 0;max-width:var(--measure-text);text-wrap:pretty}

/* ---- Insights: the two views as tabs, each entry shown large ---- */
.collection{position:relative;z-index:1;padding:0 0 var(--s-9);background:var(--surface)}
.page-tabs{position:relative;display:flex;gap:var(--s-7);border-bottom:var(--stroke-hair) solid var(--hairline)}
.page-tab{display:flex;align-items:baseline;gap:var(--s-3);padding:var(--s-4) 0;border:0;background:none;font:inherit;font-size:var(--fs-title-s);font-weight:var(--w-regular);line-height:var(--lh-title-s);letter-spacing:var(--ls-title-s);text-transform:none;white-space:nowrap;color:var(--text-3);cursor:pointer;transition:color var(--motion-respond)}
.page-tab[aria-selected="true"]{color:var(--text);cursor:default}
.page-tab[aria-selected="false"]:hover{color:var(--text)}
.page-tab .sheet_tab-note{font-size:var(--fs-body-s)}
.collection_view{padding-top:var(--s-7)}
/* a view's entries in two columns, each its photograph over its words (21 October 2026, Zana: "the current layout does
   not work ... grid/2column might be better here"; the two-column arrangement only); until then one
   after another, the photograph on seven columns and the words on the last four (D235). One column on phones */
.collection_view:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7) var(--s-5);align-items:start}
.entry{display:flex;flex-direction:column}
.entry_photo{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-card);background:var(--surface-prussian)}
.entry_photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform var(--motion-settle)}
.entry:hover .entry_photo img{transform:scale(1.03)}
.entry_text{padding-top:var(--s-5)}
.entry_kind{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-5);margin:0}
.entry_meta{color:var(--text-3)}
.entry_title{margin:var(--s-4) 0 0;font-size:var(--fs-title-m);line-height:var(--lh-title-m);letter-spacing:var(--ls-title-m);text-wrap:balance}
.entry_line{margin:var(--s-3) 0 0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-3);text-wrap:pretty;max-width:36em}
.entry_link{margin:var(--s-5) 0 0}
.entry.is-empty{grid-column:1/-1}
.entry.is-empty .entry_title{font-size:var(--fs-statement);line-height:var(--lh-statement);letter-spacing:var(--ls-statement)}

@media (max-width:991px){
  .page-opening_lead.is-on-line{margin-left:0}
  .page-part_grid{grid-template-columns:minmax(0,1fr)}
  .page-part_title,.page-part_main{grid-column:1}
  .people{grid-column:1;margin-top:var(--s-4)}
}
@media (max-width:767px){
  .collection_view:not([hidden]){grid-template-columns:minmax(0,1fr)}
  .page-opening{padding-top:calc(var(--nav-top) + var(--nav-h) + var(--s-8))}
  .page-band_frame{aspect-ratio:4/3}
  .people{grid-template-columns:minmax(0,1fr);row-gap:var(--s-7)}
  .page-tabs{gap:var(--s-5)}
}

/* ---- D224, the elevation of 20 October 2026 ----
   The pages open at the sheets' covers' scale; the frame goes across the window; a part's first paragraph is its lead on
   the 40% line, at the opening's lead's size and weight, the body after it; the people's names on their portraits. */
.page-opening_title{max-width:13em;font-size:calc(var(--fs-display) * 1.55);line-height:.94;letter-spacing:-.045em}
.page-band .padding-global{padding-left:0;padding-right:0}
.page-band_frame{--r-card:0px;aspect-ratio:16/7;border-radius:0}
.page-part_main.is-led{max-width:var(--measure-statement)}
.page-part_main>.page-part_lead{margin:0 0 var(--s-6);font-size:var(--fs-title-s);font-weight:var(--w-light);line-height:1.4;letter-spacing:0;color:var(--text);text-wrap:pretty}
.page-part_main.is-led>.page-part_text{max-width:var(--measure-text)}
.page-part_main.is-led>.page-part_lead+.page-part_text{margin-top:0}
.person_photo{position:relative;isolation:isolate}
.person_photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(5,14,26,.55),rgba(5,14,26,0) 42%);pointer-events:none}
.person_tag{position:absolute;left:var(--s-5);right:var(--s-5);bottom:var(--s-5);z-index:2;color:var(--text-inverse)}
.person_tag .person_name{margin:0;color:var(--text-inverse)}
.person_tag .person_role{margin:var(--s-2) 0 0;color:var(--text-inverse-2)}
@media (max-width:767px){
  /* two lines at this size: below 1 the descenders of the first met the ascenders of the second (25 October 2026) */
  .page-opening_title{font-size:var(--fs-display);line-height:1.04}
  .page-band_frame{aspect-ratio:4/5}
}
/* the opening's parts wait for their entrance (site.js, on every page), so they never show and then come up again */
.js:not(.reduce) :is(.page-opening_kicker,.page-opening_title,.page-opening_lead,.page-opening_action){opacity:0}

/* Interests of our own, since the second review of 20 October 2026: a part of the page in the night, as the others are
   in the day: the name at the statement size, the words beside it on the 40% line, the circle in the middle of the
   room under them; at most a laptop's window high, so on a large screen it is not a screen of night */
.about_interests-head{display:grid;grid-template-columns:40% minmax(0,1fr);row-gap:var(--s-5)}
.about_interests-head>.divider_horizontal{grid-column:1/-1}
.about_interests-head .about_interests-title{grid-column:1;padding-right:var(--s-6);max-width:none}
.about_interests-head .about_interests-text{grid-column:2;max-width:var(--measure-text)}
.about_interests .home-team_component{justify-content:flex-start}
/* D230: the Composing form where the circle was and at its size (28vw, 75vw on tablets, 70vw on phones, across the
   band), its box larger by the room its edge strokes need (the band is .86 of the box's smaller side, sheet-form.js);
   on wide screens it takes the room between the words and the night's foot, so a short window makes it smaller */
.about_interests-form{position:relative;z-index:2;flex:1 1 auto;align-self:center;width:calc(var(--page) * .32);min-height:0;margin:0;pointer-events:none}
.about_interests-form canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity var(--motion-reveal)}
.about_interests-form.is-drawn canvas{opacity:1}
/* the part's body (21 October 2026, Zana's sketch): the technology's name on the left and its sentence on the right,
   both level with the form's middle, the form between them at its size; on tablets and phones the name, the sentence
   and the form one under another */
.about_interests-body{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) calc(var(--page) * .32) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;column-gap:var(--s-6)}
.about_interests-name{grid-column:1;margin:0;color:var(--text-inverse);max-width:12em}
.about_interests-body .about_interests-form{grid-column:2;align-self:stretch;width:auto}
.about_interests-body .about_interests-text{grid-column:3;justify-self:end;max-width:min(26rem,100%)}
@media (max-width:991px){
  .about_interests-body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-5)}
  .about_interests-body .about_interests-text{order:2}
  .about_interests-body .about_interests-form{order:3;align-self:center;flex:none;width:87vw;aspect-ratio:1;margin-top:var(--s-5)}
}
@media (max-width:767px){.about_interests-body .about_interests-form{width:82vw}.about_interests-name{font-size:var(--fs-title-s);line-height:var(--lh-title-s);letter-spacing:var(--ls-title-s)}}
@media (min-width:992px){.about_interests .home-team_component{height:min(100vh,56rem);min-height:44rem}}
/* one column on phones and tablets, the name over the words, as the page's other parts: as strong as the rules above that
   set the name and words in their two columns (the field's margin had hidden that they met, D230) */
@media (max-width:991px){.about_interests-head{grid-template-columns:minmax(0,1fr)}.about_interests-head>*,.about_interests-head .about_interests-title,.about_interests-head .about_interests-text{grid-column:1/-1}}
/* the role legible on a dark jacket: the shade deeper at the portrait's foot, the role white at most of its strength */
.person_photo::after{background:linear-gradient(0deg,rgba(5,14,26,.72),rgba(5,14,26,0) 46%)}
.person_tag .person_role{color:var(--text-inverse);opacity:.85}
.about_interests .about_interests-head{column-gap:0}