/* The panels (D204; Situations.astro, sheet.js): the site's white sheet over the page under the dialogs' scrim, inset
   from the window's sides as the grid's second column is from its edge, its top a little below the window's; it scrolls
   over the page and its bar stays at its top. The dialog itself is the window-sized scroller; the darkness round the
   panel closes it. Its frame and controls are the system's (D204, amended): the scrim, the sheet's corners, the
   dialogs' close button, the tabs as labels with the state in ink. */
:root{--sheet-top:2.5rem;--sheet-side:calc(var(--gx) + (100vw - 2 * var(--gx) + 1.5rem) / 12);--sheet-pad:var(--s-6);--sheet-bar:5.5rem}
@media (max-width:991px){:root{--sheet-side:var(--gs);--sheet-pad:var(--s-5)}}
@media (max-width:767px){:root{--sheet-top:var(--s-4);--sheet-side:var(--s-2);--sheet-pad:var(--s-4);--sheet-bar:7.5rem}}

.sheet{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:none;color:var(--text);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.sheet::-webkit-scrollbar{display:none}
.sheet[open]{animation:none}
/* the page under it behind the scrim every dialog has; it comes in as the menu's scrim does and goes as the panel
   folds away */
.sheet::backdrop{background:var(--scrim);-webkit-backdrop-filter:var(--blur-scrim);backdrop-filter:var(--blur-scrim)}
html:not(.reduce) .sheet[open]::backdrop{animation:sheet-dim var(--motion-page) both}
html:not(.reduce) .sheet.is-closing::backdrop{animation:sheet-undim var(--motion-fold) both}
@keyframes sheet-dim{from{opacity:0}}
@keyframes sheet-undim{to{opacity:0}}
/* under reduced motion the darkness fades in and out as the panel does (sheet.js, REDUCED_FADE), a short fade, not a cut */
html.reduce .sheet[open]::backdrop{animation:sheet-dim .18s linear both}
html.reduce .sheet.is-closing::backdrop{animation:sheet-undim .18s linear both}
html.reduce .sheet.is-swapped:not(.is-closing)[open]::backdrop{animation:none}
/* a panel shown in place of another, when a connection is followed or Back is used (D211), keeps the darkness as it
   was: no fading in, only out when it closes */
html:not(.reduce) .sheet.is-swapped:not(.is-closing)[open]::backdrop{animation:none}

.sheet_panel{position:relative;min-height:calc(100% - var(--sheet-top));margin:var(--sheet-top) var(--sheet-side) 0;border-radius:var(--r-sheet) var(--r-sheet) 0 0;background:var(--surface)}

/* ---- The bar: where the reader is (the name comes in once the title has gone under the bar), the tabs in the middle,
   the close button on the right; a hairline under it once the panel has scrolled ---- */
/* the bar sticks a pixel above the window's edge: at a fractional scroll a sliver of the page showed above it, and its
   top corners follow the sheet's own as they leave (sheet.js, --bar-r; 25 October 2026) */
.sheet_bar{position:sticky;top:-1px;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--s-5);min-height:var(--sheet-bar);padding:0 var(--sheet-pad);border-radius:var(--bar-r,var(--r-sheet)) var(--bar-r,var(--r-sheet)) 0 0;background:var(--surface)}
.sheet_bar::after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:var(--stroke-hair) solid var(--hairline);opacity:0;transition:opacity var(--motion-respond)}
.sheet.is-scrolled .sheet_bar::after{opacity:1}
.sheet_where{display:flex;gap:var(--s-3);margin:0;white-space:nowrap}
.sheet_where-name{color:var(--text);opacity:0;transform:translateY(.5em);transition:opacity var(--motion-respond),transform var(--motion-respond)}
.sheet.is-past-title .sheet_where-name{opacity:1;transform:none}
/* the tabs: the aspects' names as the system's labels (capitals, as the map's tabs and the buttons), the chosen one in
   ink with an ink line under it, the line moving to the other over the respond motion */
.sheet_tabs{position:relative;display:flex;gap:var(--s-6)}
.sheet_tab{position:relative;padding:var(--s-4) 0;border:0;background:none;font:inherit;font-size:var(--fs-label);font-weight:var(--w-regular);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-3);white-space:nowrap;cursor:pointer;transition:color var(--motion-respond)}
.sheet_tab[aria-selected="true"]{color:var(--text);cursor:default}
.sheet_tab[aria-selected="false"]:hover{color:var(--text)}
/* 100px wide, moved and stretched to the chosen tab by transform (sheet.js and pages.js: placeLine, place) */
.sheet_tab-line{position:absolute;left:0;bottom:0;width:100px;height:0;border-top:var(--stroke-icon) solid var(--accent);transform:translateX(0px) scaleX(0);transform-origin:0 0;transition:transform var(--motion-respond)}
/* the close button: the dialogs' own (Dialogs.astro) */
.sheet_bar .close-button{justify-self:end}
/* Back (D211): the close button's label with the arrow drawn left, shown once a connection has been followed (or, on a
   panel opened from a shared address, leading to the five areas), naming where it returns to; the arrow steps back
   when pointed at */
.sheet_start{display:flex;align-items:center;gap:var(--s-5);min-width:0}
.sheet_back{flex:none;white-space:nowrap}
/* its words in the label's size: the template's close button set a span in it large, for the cross it once typed */
.sheet_back span{font-size:inherit;font-weight:inherit;line-height:inherit}
.sheet_back[hidden]{display:none}
.sheet_back:hover .icon{transform:translateX(-3px)}
/* where Back names the place, the counter gives way */
.sheet_start:has(.sheet_back:not([hidden])) .sheet_where>span:first-child:not(.sheet_where-name){display:none}

/* ---- The body: the parts on twelve columns across the panel, each under a rule ---- */
.sheet_body{padding:var(--s-6) var(--sheet-pad) var(--s-9)}
.sheet.has-opening .sheet_body{padding-bottom:var(--s-8)}
.sheet_part{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-5);row-gap:var(--s-6);padding:var(--s-8) 0;border-top:var(--stroke-hair) solid var(--divider);scroll-margin-top:var(--sheet-bar)}
/* Background: the title large with its statement, the facts beside it under hairlines, the one
   photograph wide, and a short title and the text under it */
.sheet_title{margin:0}
.sheet_lead{margin:var(--s-6) 0 0}
/* the parts' titles on the left; Approach's rows, Methodology's accordion and Next step's text on the right */
.sheet_part-title{grid-column:1/span 4;margin:0;text-wrap:balance}
.sheet_items{display:grid;gap:var(--s-4);margin:0;padding:0;list-style:none}
.sheet_item-title{margin:0;font-size:var(--fs-body);font-weight:var(--w-regular);line-height:var(--lh-body);color:var(--text)}
.sheet_item-text{margin:var(--s-1) 0 0;color:var(--text-3)}

/* ---- The area's opening and its topics (D211; Capital first, as a trial), since D215 one long sheet designed as a
   piece (route B of O12; Zana, 19 October 2026: "we need option B. and the tabs is actually crucial. one
   is non-dilutive fund and the other is traditional vc/investor fund raise"). Five type sizes: the display for the
   headline, the statement for a topic's first line, the title for the headline's text, the tabs, the parts' titles
   and the names that lead on, the body for all other text, the label for the controls. Revised the same day after an
   independent review: the form beside the headline instead of in a band under it, so the tabs and a topic's first
   line are in the first window on a laptop; one design of button; the text fading under the tabs once they stay ---- */
.sheet.has-opening{--sheet-tabs:calc(2 * var(--s-4) + var(--fs-title-s) * var(--lh-title-s))}
/* the frame: the site's night round the sheet, as the curiosity card, Section 2 and the footer stand on it, where the
   scrim over the white ecosystem made a flat grey */
/* the night round the sheet at nearly its full strength, so it reads as night over a white page too and the page's
   white edge does not show through at the foot (D216) */
.sheet.has-opening::backdrop{background-color:color-mix(in srgb,var(--surface-prussian) 96%,transparent);background-image:var(--depth-prussian)}
/* the night comes in on the panel's own rise, the lift, so the two arrive together */
html:not(.reduce) .sheet.has-opening[open]::backdrop{animation:sheet-dim var(--motion-lift) both}
/* the bar: the phase's place among the five and its name, in the body size; Contact as the main action's pair beside
   Close */
.sheet.has-opening .sheet_bar{grid-template-columns:minmax(0,1fr) auto}
.sheet.has-opening .sheet_where{font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text);opacity:0;transform:translateY(.4em);transition:opacity var(--motion-respond),transform var(--motion-respond)}
.sheet.has-opening .sheet_where-name{opacity:1;transform:none}
/* the place comes into the bar once the sheet's own title has gone under it, so the two never show at once (D216) */
.sheet.has-opening.is-past-title .sheet_where{opacity:1;transform:none}
.sheet_actions{display:flex;align-items:center;gap:var(--s-6);justify-self:end}
/* the bar's hairline gives way to the tabs' once they have reached it */
.sheet.is-docked .sheet_bar::after{opacity:0}
/* the head (D216, after Zana's "the modal header that is sticky does not look complete"): one compact row from a
   tablet up, the place on the left at the title size, Contact and Close on the right; from 1280 wide the tabs dock into
   that row on the 40% line, over the text's column, so the head is one ruled row instead of two loose ones */
@media (min-width:768px){.sheet.has-opening{--sheet-bar:4.5rem}}
/* the opening: the headline, its text in the title size and light, as paragraphs are, the route under them; and
   beside them, as tall as they are, the phase's own form on the night (sheet-form.js), the panel's one picture; under
   them on smaller screens */
.sheet_opening{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-5);padding:var(--s-5) 0 var(--s-7)}
.sheet_opening-main{grid-column:1/span 8}
.sheet.has-opening .sheet_title{outline:none}
.sheet.has-opening .sheet_lead{max-width:var(--measure-statement);margin:var(--s-5) 0 0;font-size:var(--fs-title-s);font-weight:var(--w-light);line-height:1.4;letter-spacing:0;color:var(--text)}
/* the tabs (Zana: "the tabs is actually crucial"): the two kinds of capital at the title size, each with its note
   after it; the chosen one in ink with the accent's line under it, the other in grey, plain to see; under the opening,
   then under the bar; their hairline under them */
/* a pixel under the bar, so no line of the text shows between the two where a screen's pixels split them */
.sheet_topics{position:sticky;top:calc(var(--sheet-bar) - 1px);z-index:1;background:var(--surface)}
.sheet_topics::after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:var(--stroke-hair) solid var(--hairline)}
/* once they stay under the bar, the text going under them fades out over a step of the scale, so no line is cut */
.sheet.has-opening .sheet_topics::before{content:"";position:absolute;left:0;right:0;top:100%;height:var(--s-4);background:linear-gradient(var(--surface),color-mix(in srgb,var(--surface) 0%,transparent));pointer-events:none;opacity:0;transition:opacity var(--motion-respond)}
.sheet.has-opening.is-docked .sheet_topics::before{opacity:1}
/* the fade under docked tabs belongs to a white bar; under the night's folder tabs it washed out the photos */
.sheet.has-cover .sheet_topics::before{display:none}
.sheet_topics .sheet_tab-line{z-index:1}
.sheet_topics-where{display:none}
.sheet.has-opening .sheet_tabs{gap:var(--s-7)}
.sheet.has-opening .sheet_tab{display:flex;align-items:baseline;gap:var(--s-3);font-size:var(--fs-title-s);line-height:var(--lh-title-s);letter-spacing:var(--ls-title-s);text-transform:none}
.sheet_tab-note{font-size:var(--fs-body-s);font-weight:var(--w-light);line-height:var(--lh-body);letter-spacing:0;color:var(--text-3)}
/* Folder tabs (D260, 25 October 2026, Zana: the tabs did not read as "two distinct content ... almost like two different
   pages", nor as something to toggle): the topics stand as tabs on the cover's lower edge, the chosen one white and
   running into the white page under it, so the page reads as that topic's; the others tinted on the night, the pages
   behind, brightening when pointed at. Scrolled past the cover the head stays the night, the bar and the tabs a
   compact cover, the tabs along its lower edge and the chosen one still running into the page. The tabs always stand
   on the night, so their colours never change; a tab holds its name alone (Funding's notes are the sheet's). */
.sheet.has-opening{--folder-h:3.5rem}
.sheet.has-cover .sheet_topics{margin-top:calc(-1 * var(--folder-h));background:none}
.sheet.has-tabs .sheet_cover{padding-bottom:calc(var(--s-7) + var(--folder-h))}
.sheet.has-cover .sheet_topics::after,.sheet.has-cover .sheet_tab-line,.sheet.has-cover .sheet_tab-note{display:none}
.sheet.has-cover .sheet_tabs{align-items:flex-end;gap:var(--s-1)}
.sheet.has-cover .sheet_tab{align-items:center;height:var(--folder-h);padding:0 var(--s-6);border-radius:var(--r-card-hover) var(--r-card-hover) 0 0;background-color:var(--tab-night);color:var(--text-inverse-2);transition:background-color var(--motion-respond),color var(--motion-respond)}
.sheet.has-cover .sheet_tab[aria-selected="false"]:hover{background-color:var(--tab-night-hover);color:var(--text-inverse)}
.sheet.has-cover .sheet_tab[aria-selected="true"]{background-color:var(--surface);color:var(--text)}
.sheet.has-cover .sheet_tab:focus-visible{outline:var(--focus-width) solid var(--focus-inverse);outline-offset:calc(-2 * var(--focus-width))}
.sheet.has-cover .sheet_tab[aria-selected="true"]:focus-visible{outline-color:var(--focus)}
/* docked under the bar, the tabs' row is the night across the sheet (its two solid extensions, not shadows) */
.sheet.has-cover.is-docked .sheet_topics{background:var(--surface-prussian);box-shadow:calc(-1 * var(--sheet-pad) - 1px) 0 0 0 var(--surface-prussian),calc(var(--sheet-pad) + 1px) 0 0 0 var(--surface-prussian)}
.sheet_topic[hidden]{display:none}
/* a topic fills the window under the bar and the tabs, the panel's foot below it counted, so it can always be shown
   from its beginning with the tabs staying where they are; since D215 it ends with the phases before and after, so
   any room it needs falls after them */
.sheet_topic{min-height:calc(100svh - var(--sheet-bar) - var(--sheet-tabs) - var(--s-8))}
/* The parts follow the system's own rules (D213): one split, at the page's 40% line (layout.css: the statement, the
   footer); a part's line heading it, as the section intro's does, the larger space above the line and a step of the
   scale under it; its title at the size the system gives subheads in dialogs (title-s). Since D215 a topic opens as
   every part does, its title on the left and its text on the 40% line, under the tabs' line with no line of its own,
   its title a step larger, in the statement size; text runs to about seventy characters a line (--measure-text). */
.sheet.has-opening .sheet_part{grid-template-columns:40% minmax(0,1fr);column-gap:0;padding:var(--s-5) 0 var(--s-8);scroll-margin-top:calc(var(--sheet-bar) + var(--sheet-tabs))}
.sheet.has-opening .sheet_part-title{grid-column:1;padding-right:var(--s-6)}
.sheet.has-opening .sheet_topic>.sheet_part:first-child{padding-top:var(--s-7);border-top:0}
.sheet_part-main{grid-column:2;min-width:0;max-width:var(--measure-text)}
.sheet_part-text{margin:0}
.sheet_scope{margin:0;padding-left:1.15em;list-style:disc}
.sheet_scope li+li{margin-top:var(--s-3)}
.sheet_part-text+.sheet_scope{margin-top:var(--s-4)}
.sheet.has-opening .sheet_intro{border-top:0;padding-top:var(--s-7);padding-bottom:var(--s-5)}
[data-sheet-section-title]{outline:none}
.sheet_part-main .sheet_items{gap:var(--s-6);margin-top:var(--s-6)}
/* the main action on the 40% line, after the last part's text, as the system's larger button (the enquiry form's) */
.sheet.has-opening .sheet_action{grid-column:2;justify-self:start}

@media (max-width:991px){
  .sheet_part-title{grid-column:1/-1}
  /* one column: the system's statement leaves the 40% line here too */
  .sheet.has-opening .sheet_part{grid-template-columns:minmax(0,1fr)}
  .sheet_opening-main,.sheet_part-main,.sheet.has-opening .sheet_action{grid-column:1/-1}
  .sheet_action{justify-self:start}
  /* Back names the place on its own */
  .sheet_start:has(.sheet_back:not([hidden])) .sheet_where{display:none}
}
@media (max-width:767px){
  .sheet_bar{grid-template-columns:minmax(0,1fr) auto;row-gap:0;align-content:center}
  .sheet_tabs{grid-column:1/-1;grid-row:2;gap:var(--s-5)}
  .sheet_part{padding:var(--s-7) 0}
  /* the area's bar is one row: the name, then Contact and Close; Back drops its first words, and the return to the five
     areas leaves it to Close */
  .sheet.has-opening{--sheet-bar:4.25rem}
  /* where a closing link leads goes under its name, whole; a sheet's tab notes go (Capital's), and only a sheet's: the
     News page's tabs keep their counts on phones, as on every other screen (21 October 2026) */
  .sheet.has-opening .sheet_where>span:first-child:not(.sheet_where-name),.sheet .sheet_tab-note{display:none}
  /* the return to the five areas gives way to Close here, so the name stays */
  .sheet.has-opening .sheet_start:has(.sheet_back.is-explore) .sheet_where{display:flex}
  .sheet.has-opening .sheet_part{padding-bottom:var(--s-7)}
  .sheet_actions{gap:var(--s-5)}
  .sheet_back.is-explore{display:none}
  .sheet_opening{padding:var(--s-4) 0 var(--s-7)}
}
/* The tabs where they do not dock in the bar (under 1280 wide): one row that scrolls sideways when the names are wider
   than the sheet (the ecosystem's three on a phone; the copy integration of 21 October 2026), reaching to the sheet's
   edges and fading there, so a name that runs on reads as running on, not as cut off at the text's edge ("Teams" stood
   cut through at the right margin); the chosen one is kept in view (sheet.js: placeLine) */
@media (max-width:1279px){
  .sheet_tabs{margin-inline:calc(-1 * var(--sheet-pad));padding-inline:var(--sheet-pad);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--sheet-pad),#000 calc(100% - var(--sheet-pad)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--sheet-pad),#000 calc(100% - var(--sheet-pad)),transparent)}
  .sheet_tabs::-webkit-scrollbar{display:none}
  .sheet_tabs .sheet_tab{flex:0 0 auto}
}

/* ---- Every sheet on route B (D216): the five areas, the ecosystem, the article, the company profile and contact ----
   One frame, one bar, one opening and the same parts. A sheet without tabs has no tabs' height to keep clear. */
.sheet.has-opening:not(.has-tabs){--sheet-tabs:0px}
.sheet_where-count{margin-right:var(--s-1)}
/* the place's name gives way before the bar's actions do */
.sheet.has-opening .sheet_start{overflow:hidden}
.sheet.has-opening .sheet_where{min-width:0}
.sheet.has-opening .sheet_where-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the picture beside the opening, where an area has its form: a photograph of Zana's in the same card */
.sheet_picture{position:relative;grid-column:9/-1;align-self:stretch;min-height:14rem;margin:0;overflow:hidden;border-radius:var(--r-card);background:var(--surface-prussian)}
.sheet_picture img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
/* the article's and the company's opening: the line under the title, the title wider, the photograph across the sheet */
.sheet_opening.is-text .sheet_opening-main{grid-column:1/span 10}
.sheet_meta{display:flex;flex-wrap:wrap;gap:0 var(--s-5);margin:0 0 var(--s-5);color:var(--text-3)}
/* a part's paragraphs, a step of the scale apart; the article's turn at the statement size */
.sheet_part-main>.sheet_part-text+.sheet_part-text{margin-top:var(--s-4)}
.sheet_turn{margin:var(--s-6) 0;color:var(--text);text-wrap:balance}
.sheet_turn:last-child{margin-bottom:0}
/* Illustrated research news: existing type, grid, surfaces and line roles (D264). */
.article_facts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-6);margin:0;padding:var(--s-7) 0;border-bottom:var(--stroke-hair) solid var(--divider)}
.article_fact{grid-column:span 4;min-width:0}
.article_fact dt{font-size:var(--fs-body-s);line-height:var(--lh-body-s);font-weight:var(--w-regular);color:var(--text-3)}
.article_fact dd{margin:var(--s-3) 0 0;font-size:var(--fs-title-s);line-height:var(--lh-title-s);font-weight:var(--w-regular);letter-spacing:var(--ls-title-s)}
.article_fact:first-child dd{font-size:var(--fs-statement);line-height:var(--lh-statement);letter-spacing:var(--ls-statement)}
.sheet.has-opening .article_intro{border-top:0;padding:var(--s-7) 0 var(--s-8)}
.article_options{margin:0 0 var(--s-8);padding:var(--s-7);border-radius:var(--r-card);background:var(--depth-prussian),var(--surface-prussian);color:var(--text-inverse)}
.article_origin{display:flex;align-items:center;justify-content:center;gap:var(--s-5)}
.article_origin h4{margin:0;color:inherit}
.article_branches{display:block;width:100%;height:var(--s-8);fill:none;stroke:var(--line-art);stroke-width:var(--stroke-hair)}
.article_branches path{vector-effect:non-scaling-stroke}
.article_options-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5);list-style:none;margin:0;padding:0}
.article_option{grid-column:span 4;min-width:0;padding:var(--s-5);border:var(--stroke-hair) solid var(--border-inverse);border-radius:var(--r-card)}
.article_option h4{margin:0;color:inherit}
.article_option p{margin:var(--s-4) 0 0;color:var(--text-inverse)}
.article_options figcaption{margin:var(--s-6) 0 0;color:var(--text-inverse);font-weight:var(--w-regular)}
.article_questions{list-style:none;margin:0;padding:0}
.article_feature .sheet_part-text+.article_questions{margin-top:var(--s-6)}
.article_questions li+li{margin-top:var(--s-6);padding-top:var(--s-6);border-top:var(--stroke-hair) solid var(--divider)}
.article_questions h4{margin:0}
.article_questions p{margin:var(--s-4) 0 0}
.article_statement{grid-column:1/-1;max-width:var(--measure-statement);margin:0;text-wrap:balance}
.article_feature .sheet_action .team_button{gap:var(--s-1)}
.article_feature .sheet_action .team_button-text{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--w-regular);letter-spacing:var(--ls-body);text-transform:none;min-height:var(--s-7);padding:var(--s-3) var(--s-5)}
.article_feature .sheet_action .team_button-arrow{width:var(--s-7);height:var(--s-7);margin-left:0}
.article_feature .sheet_action :is(.team_button-text,.team_button-arrow){border-radius:var(--r-card)}
@media (max-width:767px){
  .article_facts{gap:var(--s-5);padding:var(--s-6) 0}
  .article_fact{grid-column:span 6}
  .article_fact:first-child{grid-column:1/-1}
  .article_options{padding:var(--s-5);margin-bottom:var(--s-7)}
  .article_origin{justify-content:flex-start;gap:var(--s-4);margin-bottom:var(--s-6)}
  .article_branches{display:none}
  .article_options-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-4);border-left:var(--stroke-hair) solid var(--border-inverse);padding-left:var(--s-5)}
  .article_option{position:relative;grid-column:1;padding:var(--s-4)}
  .article_option::before{content:"";position:absolute;top:var(--s-6);right:100%;width:var(--s-5);border-top:var(--stroke-hair) solid var(--border-inverse)}
}
.sheet_part-main>.sheet_items{margin:var(--s-6) 0}
.sheet_part-main>.sheet_items:first-child{margin-top:0}
.sheet_part-main>.sheet_items:last-child{margin-bottom:0}
/* the main action after the last part's text, on the 40% line; a pair and a link side by side where there are two */
.sheet_action{margin-top:var(--s-6);max-width:100%;min-width:0}
.sheet_action .team_button{max-width:100%;min-width:0}
.sheet_action .team_button-text{min-width:0;height:auto;min-height:1.9rem;padding-block:.3rem;white-space:normal;text-align:left}
.sheet_action .team_button-arrow{flex-shrink:0}
.sheet_action.is-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6)}
/* on a touch screen a pair and a link wrapped one over the other (OmegaNova's inquiry and its site on a phone) stand a
   step further apart, so their tap areas (theme.css: Touch targets) do not meet (21 October 2026) */
@media (pointer:coarse){.sheet_action.is-row{row-gap:var(--s-5)}}
.sheet_opening .sheet_action{margin-top:var(--s-6)}
/* where a name files, after it, as a tag (D225; Go.astro's note) */
.go-note{margin-left:var(--s-3)}
/* contact: the two people, a portrait and the name and role beside it */
.sheet.has-opening .sheet_people{display:block}
.sheet_people-list{display:grid;grid-template-columns:40% minmax(0,1fr);gap:var(--s-6) 0;margin:0;padding:0;list-style:none}
.sheet_person{display:flex;align-items:flex-end;gap:var(--s-5)}
.sheet_person-photo{flex:none;width:7.5rem;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-card);background:var(--surface-2)}
.sheet_person-photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 18%;filter:grayscale(1) contrast(1.04)}
.sheet_person-text{display:flex;flex-direction:column;gap:var(--s-1)}
.sheet_person-role{color:var(--text-3)}
/* a person's LinkedIn profile (21 October 2026): the mark in the quiet grey under the role, the accent when pointed at,
   as a link's state takes it on white (D214); its target 24px square, 44px on a touch screen */
.sheet_person-in{position:relative;display:inline-flex;align-items:center;justify-content:center;width:max(1.5rem,24px);height:max(1.5rem,24px);margin:var(--s-2) 0 0 -.125rem;color:var(--text-3);transition:color var(--motion-respond)}
.sheet_person-in .icon{width:1.25rem;height:1.25rem}
@media (hover:hover){.sheet_person-in:hover{color:var(--accent)}}
@media (pointer:coarse){.sheet_person-in::after{content:'';position:absolute;inset:-.625rem}}
.sheet.is-contact .sheet_topic{min-height:0}
/* contact holds a screen's worth or less: its sheet ends where its words do, its foot rounded as its top, the night
   under it, rather than a window of empty white on a large screen (D216) */
.sheet.is-contact .sheet_panel{min-height:0;margin-bottom:var(--sheet-top);border-radius:var(--r-sheet)}
.sheet.is-contact .sheet_body{padding-bottom:var(--s-4)}
/* a variant's part (OmegaNova, working together) follows the opening with its own line */
.sheet.is-contact [data-contact-variant]:not([hidden]){border-top:var(--stroke-hair) solid var(--divider)}

/* ---- The figures (D216; Figure.astro, data/figures.js): a method from the framework bank in the site's ticks ----
   Its words on the left, as a part's title: the method's name, what it shows, how to read it, its sources; the drawing
   on the 40% line, as wide as the column, on the lightest panel. */
.sheet.has-opening .sheet_fig{padding-bottom:var(--s-8)}
.sheet_fig-text{display:flex;flex-direction:column;gap:var(--s-3);max-width:24rem}
.sheet_fig-kicker{margin:0;color:var(--text-3)}
.sheet_fig-title{margin:0}
.sheet_fig-caption{margin:var(--s-2) 0 0;color:var(--text-3)}
.sheet_fig-main{grid-column:2;min-width:0}
.fig{margin:0;padding:var(--s-6) var(--s-6) var(--s-5);border-radius:var(--r-card);background:var(--surface-1)}
.fig_plot{position:relative;width:100%}
.fig_svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fig_tick,.fig_rule,.fig_path{fill:none;stroke-linecap:butt;vector-effect:non-scaling-stroke}
.fig_tick{stroke-width:var(--stroke-icon);transform-box:fill-box}
.fig_rule{stroke-width:var(--stroke-hair)}
.fig_rule.is-dashed{stroke-dasharray:3 4}
.fig_path{stroke-width:var(--stroke-icon)}
:is(.fig_tick,.fig_rule,.fig_path).is-ink{stroke:var(--text)}
:is(.fig_tick,.fig_rule,.fig_path).is-mid{stroke:var(--line-mid)}
:is(.fig_tick,.fig_rule,.fig_path).is-faint{stroke:var(--line-faint)}
:is(.fig_tick,.fig_rule,.fig_path).is-accent{stroke:var(--accent)}
:is(.fig_tick,.fig_rule,.fig_path).is-drawn{stroke:var(--line-drawn)}
.fig_dot{stroke:none}
.fig_dot.is-ink{fill:var(--text)}
.fig_dot.is-accent{fill:var(--accent)}
.fig_dot.is-drawn{fill:var(--line-drawn)}
.fig_dot.is-mid{fill:var(--line-mid)}
.fig_dot.is-faint{fill:var(--line-faint)}
.fig_label{position:absolute;transform:translate(var(--ax),var(--ay));margin:0;font-size:var(--fs-body-s);font-weight:var(--w-regular);line-height:1.25;letter-spacing:0;white-space:nowrap;pointer-events:none}
/* each label on the panel's own grey, a little beyond its words, so a line it meets passes behind it (the distance
   rings, the home market) without moving the label from its anchor */
.fig_label{border-radius:var(--r-inset);background:var(--surface-1);box-shadow:0 0 0 .2em var(--surface-1)}
.fig_label.is-wrap{white-space:normal;width:max-content;max-width:var(--wrap);text-wrap:balance}
.fig_label.is-small{font-size:var(--fs-caption);line-height:1.35;color:var(--text-3)}
.fig_plot.is-narrow{display:none}
.fig_label.is-m{font-size:var(--fs-body)}
.fig_label.is-minor{font-size:var(--fs-caption);line-height:1.35}
.fig_label.is-grey{color:var(--text-3)}
.fig_label.is-ink{color:var(--text)}
.fig_label.is-accent{color:var(--accent)}
.fig_label.is-drawn{color:var(--line-drawn)}
.fig_label.is-faint{color:var(--text-3)}
/* traced in: each tick grows from its base, one after another; the lines draw across; then the labels */
.fig_tick[data-dir="u"]{transform-origin:50% 100%}
.fig_tick[data-dir="d"]{transform-origin:50% 0}
.fig_tick[data-dir="r"]{transform-origin:0 50%}
.fig_tick[data-dir="l"]{transform-origin:100% 50%}
html:not(.reduce) .fig.is-waiting .fig_tick{transform:scale(1,0);transition:transform .9s var(--ease-arrive) calc(min(var(--i),120) * 9ms)}
html:not(.reduce) .fig.is-waiting .fig_tick:is([data-dir="r"],[data-dir="l"]){transform:scale(0,1)}
html:not(.reduce) .fig.is-waiting :is(.fig_rule,.fig_dot,.fig_path){opacity:0;transition:opacity var(--motion-reveal) .2s}
html:not(.reduce) .fig.is-waiting .fig_path{clip-path:inset(0 100% 0 0);transition:clip-path var(--motion-trace) .3s,opacity .3s .3s}
html:not(.reduce) .fig.is-waiting .fig_label{opacity:0;transition:opacity var(--motion-respond) .7s}
html:not(.reduce) .fig.is-waiting.is-in .fig_tick{transform:none}
html:not(.reduce) .fig.is-waiting.is-in :is(.fig_rule,.fig_dot,.fig_path,.fig_label){opacity:1}
html:not(.reduce) .fig.is-waiting.is-in .fig_path{clip-path:inset(0 0 0 0)}

/* from a tablet across to a small laptop the column right of the 40% line is too narrow for a drawing's labels: the
   drawing goes under its words, across the sheet, at the width it has on a laptop */
@media (min-width:992px) and (max-width:1365px){
  .sheet.has-opening .sheet_fig-main{grid-column:1/-1}
  .fig_plot{max-width:40rem;margin-inline:auto}
}
@media (max-width:991px){
  .sheet_picture{grid-column:1/-1;min-height:0;margin-top:var(--s-6);aspect-ratio:2/1}
  .sheet_opening.is-text .sheet_opening-main{grid-column:1/-1}
  .sheet_fig-main{grid-column:1/-1}
  .sheet_fig-text{max-width:none}
}
@media (max-width:767px){
  /* the tabs at the body size, so both topics' names stay in the width */
  .sheet.has-opening .sheet_tab{font-size:var(--fs-body);letter-spacing:0}
  .sheet.has-opening .sheet_tabs{gap:var(--s-5)}
  /* the tables as a phone holds them (data/figures.js: narrow), labels on more lines */
  .fig_plot.is-wide{display:none}
  .fig_plot.is-narrow{display:block}
  .fig_label.is-wrap{max-width:var(--wrap-s,var(--wrap))}
  .sheet_picture{aspect-ratio:4/3}
  .sheet_people-list{grid-template-columns:minmax(0,1fr)}
  .fig{padding:var(--s-4) var(--s-3) var(--s-4)}
  .fig_label{font-size:var(--fs-caption)}
  .fig_label.is-m{font-size:var(--fs-body-s)}
  .fig_label.is-minor{display:none}
}
/* on a phone Close is its cross alone (its name stays its label), so the bar keeps the place's name whole */
@media (max-width:767px){
  .sheet_actions .close-button{gap:0;font-size:0}
  .sheet_actions .close-button .icon{width:1rem;height:1rem}
}
/* and whole on a phone's width too (21 October 2026): "Investment opportunity", and on the narrowest phones
   "Commercialization", ran out under an ellipsis beside Contact and Close. The bar's gaps a step closer there, a name of
   two words on two lines, and on the narrowest phones its capitals a little closer */
@media (max-width:479px){
  .sheet.has-opening .sheet_bar{column-gap:var(--s-4)}
  .sheet_actions{gap:var(--s-4)}
  .sheet.has-opening .sheet_where-name{white-space:normal;line-height:1.35;text-wrap:balance}
}
@media (max-width:379px){.sheet.has-opening .sheet_where{letter-spacing:.08em}}
/* the head's row from 1280 wide (see the bar above): last, so it overrides the tabs' own rules */
@media (min-width:1280px){
  .sheet.has-opening.has-tabs:not(.is-tabs-low){--sheet-tabs:0px}
  /* the row is the bar's width and lets the bar's own buttons through; the tabs stand on the 40% line, its hairline the
     bar's once docked */
  .sheet.has-opening:not(.is-tabs-low) .sheet_topics{top:0;z-index:3;padding-left:40%;background:none;pointer-events:none}
  .sheet.has-cover:not(.is-tabs-low) .sheet_topics{top:calc(var(--sheet-bar) - var(--folder-h))}
  .sheet.has-cover.is-docked:not(.is-tabs-low) .sheet_topics{background:none;box-shadow:none}
  .sheet.has-opening:not(.is-tabs-low) .sheet_topics::before{display:none}
  .sheet.has-opening:not(.is-tabs-low) .sheet_tabs{width:fit-content;height:var(--sheet-bar);gap:var(--s-6);pointer-events:auto}
  .sheet.has-cover:not(.is-tabs-low) .sheet_tabs{height:auto;gap:var(--s-1)}
  /* each topic's name on the bar's middle line, as the place's and the buttons' are; Capital's notes hang under them */
  .sheet.has-opening:not(.is-tabs-low) .sheet_tab{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:0;padding:calc((var(--sheet-bar) - var(--fs-title-s) * var(--lh-title-s)) / 2) 0 0}
  .sheet.has-opening:not(.is-tabs-low) .sheet_tab-note{font-size:var(--fs-body-s);line-height:var(--lh-body-s)}
  .sheet.has-cover:not(.is-tabs-low) .sheet_tab{flex-direction:row;align-items:center;padding:0 var(--s-6)}
  .sheet.is-docked:not(.is-tabs-low):not(.has-cover) .sheet_bar::after{opacity:1}
  /* the bar's left part ends a step short of the 40% line where the tabs begin, so a long Back ("Back to Vinnova
     funding for early commercialization") or the place's name never runs under them; with Back showing, the place's
     name gives way (21 October 2026) */
  .sheet.has-opening.has-tabs:not(.is-tabs-low) .sheet_bar{grid-template-columns:minmax(0,calc(40% - var(--s-6))) minmax(0,1fr) auto}
  .sheet.has-opening.has-tabs:not(.is-tabs-low) .sheet_actions{grid-column:3}
  .sheet.has-opening.has-tabs:not(.is-tabs-low) .sheet_start:has(.sheet_back:not([hidden])) .sheet_where{display:none}
  /* tabs too wide for the bar stand centred on their own row under it (Growth's three; Validation's two up to 1440) */
  .sheet.has-opening.is-tabs-low .sheet_tabs{justify-content:center}
  /* an area's place among the five stands at the tab row's left rather than over the cover's title, and goes at once as
     the row reaches the bar, where Back or the bar's own place name takes over, coming back as it leaves (24 October
     2026); under 1280 the row is the tabs' alone */
  .sheet.is-area .sheet_cover-count{display:none}
  .sheet_topics-where{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;gap:var(--s-4);margin:0;color:var(--text-inverse);transition:opacity var(--motion-respond)}
  .sheet.is-tabs-under .sheet_topics-where{opacity:0;transition:none}
}
/* a long Back shortens with an ellipsis, as the place's name does, at every size (21 October 2026) */
.sheet_start{overflow:hidden}
.sheet_back{flex:0 1 auto;min-width:0}
.sheet_back [data-sheet-back-label]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet_where{min-width:0}
.sheet_where-name{overflow:hidden;text-overflow:ellipsis}

/* ---- D224, the elevation of 20 October 2026 (working/elevation-2026-10-20.md) ----
   A cover
   across the top with the title large on it, then reading in the two columns alternating with full-width moments (the
   topic's figure, its photograph), and the way on as the strongest thing at the end. */

/* the cover: the night across the sheet's top and under its bar, the area's own form (sheet-form.js) large on its right,
   the count, the name at half again the display size and the line at its foot; two thirds of a window at most, so on a
   laptop the tabs and a topic's first line still show under it */
.sheet_cover{position:relative;z-index:0;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(62svh,46rem);margin:calc(-1 * (var(--sheet-bar) + var(--s-6))) calc(-1 * var(--sheet-pad)) 0;padding:calc(var(--sheet-bar) + var(--s-7)) var(--sheet-pad) var(--s-7);border-radius:var(--r-sheet) var(--r-sheet) 0 0;overflow:hidden;background-color:var(--surface-prussian);background-image:var(--depth-prussian);color:var(--text-inverse)}
.sheet_cover-form{position:absolute;top:0;right:0;bottom:0;z-index:-1;width:60%;margin:0}
.sheet_cover-form canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity var(--motion-reveal)}
.sheet_cover-form.is-drawn canvas{opacity:1}
.sheet_cover-main{max-width:min(72%,62rem)}
/* the area's number among the five and its name, in the type and colour of the bar's Back (21 October 2026, Zana: "make
   it like this and add growth and other in that font too, minus the backward arrow"); it was the number alone, in grey */
.sheet_cover-count{display:flex;gap:var(--s-4);margin:0 0 var(--s-5);color:var(--text-inverse)}
.sheet.has-opening .sheet_cover-title{margin:0;font-size:calc(var(--fs-display) * 1.55);font-weight:var(--w-regular);line-height:.94;letter-spacing:-.045em;color:var(--text-inverse);text-wrap:balance}
.sheet.has-opening .sheet_cover-lead{max-width:34rem;margin:var(--s-5) 0 0;font-size:var(--fs-title-s);font-weight:var(--w-light);line-height:1.4;color:var(--text-inverse-2)}
/* the bar over the cover: no ground of its own, its words and buttons light (the system's light pair, D162); white
   again, with its hairline, once the cover has gone under it (sheet.js: is-on-cover) */
.sheet_bar{transition:background-color var(--motion-respond),color var(--motion-respond)}
.sheet.is-on-cover .sheet_bar{background-color:transparent;color:var(--text-inverse)}
.sheet.is-on-cover.is-scrolled .sheet_bar{background-color:var(--surface-prussian)}
.sheet.is-on-cover .sheet_bar::after{opacity:0}
.sheet.is-on-cover .sheet_where,.sheet.is-on-cover .sheet_where-name{color:var(--text-inverse)}
.sheet.is-on-cover .sheet_contact .team_button-text,.sheet.is-on-cover .sheet_contact .team_button-arrow{background:var(--surface);color:var(--text)}
.sheet.is-on-cover .sheet_contact:hover .team_button-text,.sheet.is-on-cover .sheet_contact:hover .team_button-arrow{background:var(--accent);color:var(--text-inverse)}

/* a topic's figure as a full-width moment: its name and title on the left, what it shows on the 40% line, the drawing
   across the sheet under them on the lightest panel, centred at a width its labels read at */
.sheet.has-opening .sheet_fig{row-gap:var(--s-6)}
.sheet_fig-note{grid-column:2;min-width:0;max-width:var(--measure-text)}
.sheet_fig-note .sheet_fig-caption{margin:0;color:var(--text)}
.sheet.has-opening .sheet_fig-main{grid-column:1/-1}
.sheet.has-opening .fig{padding:var(--s-8) var(--s-7) var(--s-7)}
.sheet.has-opening .fig_plot.is-wide{max-width:58rem;margin-inline:auto}

/* the topic's photograph (one of Zana's, data/media.js: topics), across the sheet before its last part; it opens from
   its middle as it comes into view and settles from a little larger, as the site's frames do (D148) */
.sheet_photo{margin:0 0 var(--s-8);aspect-ratio:21/9;overflow:hidden;border-radius:var(--r-card);background:var(--surface-prussian)}
.sheet_photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
html:not(.reduce) .sheet_photo{clip-path:inset(7% 9% round .5rem);transition:clip-path var(--motion-open)}
html:not(.reduce) .sheet_photo img{transform:scale(1.08);transition:transform var(--motion-settle)}
html:not(.reduce) .sheet_photo.is-in{clip-path:inset(0% 0% round .5rem)}
html:not(.reduce) .sheet_photo.is-in img{transform:none}

@media (max-width:991px){
  .sheet_cover{min-height:min(72svh,42rem)}
  /* the name inside the cover's margins: at 768 "Commercialization" at its full size ran past the cover's edge, which
     cut its last letter (25 October 2026) */
  .sheet.has-opening .sheet_cover-title{font-size:min(calc(var(--fs-display) * 1.55),10vw)}
  .sheet_cover-form{width:100%;bottom:auto;height:60%}
  .sheet_cover-main{max-width:none}
  .sheet_fig-note{grid-column:1/-1}
}
@media (max-width:767px){
  .sheet.has-opening .sheet_cover-title{font-size:min(var(--fs-display),10vw)}
  .sheet_cover{min-height:min(76svh,34rem);padding-bottom:var(--s-6)}
  .sheet.has-tabs .sheet_cover{padding-bottom:calc(var(--s-6) + var(--folder-h))}
  .sheet.has-opening{--folder-h:3rem}
  .sheet.has-cover .sheet_tab{padding:0 var(--s-4)}
  /* folder tabs share the width on a phone, a long name on two lines in its tab: in a sideways row Growth's third tab
     sat wholly past the edge, with nothing to show it was there (25 October 2026) */
  .sheet.has-cover .sheet_tabs{gap:var(--s-1);margin-inline:0;padding-inline:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .sheet.has-cover .sheet_tabs .sheet_tab{flex:1 1 0;min-width:0;justify-content:center;padding:0 var(--s-2);white-space:normal;text-align:center;line-height:1.15}
  .sheet_cover-count{margin-bottom:var(--s-4)}
  .sheet.has-opening .fig{padding:var(--s-5) var(--s-3) var(--s-4)}
  .sheet_photo{aspect-ratio:4/3;margin-bottom:var(--s-7)}
}
/* a sheet whose picture is a photograph (the article, the company profile, the ecosystem): the photograph across the
   cover, settling from a little larger as the sheet rises, shaded at the foot and left where the words stand */
.sheet_cover.is-photo{background:var(--surface-prussian)}
.sheet_cover-photo{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.sheet_cover.is-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--shade-band)}
html:not(.reduce) .sheet[open] .sheet_cover-photo{animation:sheet-cover-settle var(--motion-settle) both}
@keyframes sheet-cover-settle{from{transform:scale(1.08)}}
.sheet.has-opening .sheet_cover.is-photo .sheet_cover-title{font-size:calc(var(--fs-display) * 1.2);line-height:var(--lh-display)}
.sheet_cover .sheet_meta{margin:0 0 var(--s-5);color:var(--text-inverse-2)}
/* the area's form as large as the cover is high, its middle a little below the cover's and a fifth of its own size in
   from the sheet's right edge, which cuts it; it comes in from its left, so a long name never meets its lines (the
   review of the same day: "a small emblem in an empty navy field"; it had sat in the upper right, clear of the name) */
.sheet_cover-form{top:55%;right:0;bottom:auto;width:auto;height:150%;aspect-ratio:1;transform:translate(calc(28% + var(--push,0px)),-50%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 32%);mask-image:linear-gradient(90deg,transparent,#000 32%)}
/* on a phone or a tablet the same, in the cover's upper part, clear of the name at its foot (it had stood whole and
   small in the upper half: the second review's "a whole emblem"); a sixth smaller and higher than it was, since at
   96% with its middle at 34% the words had grown under it: Funding's node lay on its line's first word, Expansion's
   third ring and Growth's field came to the line's end, and on a tablet Commercialization's ring met its name
   (measured over the forms' cycles, 25 October 2026) */
@media (max-width:991px){.sheet_cover-form{top:26%;height:82%;transform:translate(30%,-50%)}}
@media (max-width:767px){.sheet.has-opening .sheet_cover.is-photo .sheet_cover-title{font-size:var(--fs-statement);line-height:var(--lh-statement)}}

/* ---- the review of the same day (working/elevation-2026-10-20.md: Status) ----
   The covers' line in white, a step larger and balanced; a figure's drawing as wide as the panel lets it be within a
   window's reading height, its labels a little larger where it is large, the panel's room even on every side. */
.sheet.has-opening .sheet_cover-lead{max-width:40rem;font-size:var(--fs-title-m);line-height:1.3;color:var(--text-inverse);text-wrap:balance}
@media (max-width:767px){.sheet.has-opening .sheet_cover-lead{font-size:var(--fs-title-s);line-height:1.4}}
/* since the second review: the figure in the text's column again, its panel from the 40% line to the sheet's right
   edge, its drawing filling it within 64% of the window's height (across the whole sheet the panel was a grey field round
   a drawing that could not fill it, and its empty top stood at the foot of the first screen) */
@media (min-width:1366px){.sheet.has-opening .sheet_fig-main{grid-column:2}}
/* from a tablet to a small laptop the column is too narrow for a drawing's labels: across the sheet under its words, at
   most the width it has on a laptop, as before this work (figcheck at 1280 and 1024) */
@media (min-width:992px) and (max-width:1365px){.sheet.has-opening .fig_plot.is-wide{max-width:min(100%,calc(64svh * var(--ar,2)),40rem)}}
@media (min-width:768px){.sheet.has-opening .fig{padding:var(--s-6)}}
@media (min-width:1600px){.sheet.has-opening .fig{padding:var(--s-7)}}
.sheet.has-opening .fig_plot.is-wide{max-width:min(100%,calc(64svh * var(--ar,2)));container-type:inline-size}
.sheet.has-opening .fig_plot.is-wide .fig_label{font-size:clamp(var(--fs-body-s),1.4cqi,var(--fs-body))}
.sheet.has-opening .fig_plot.is-wide .fig_label:is(.is-minor,.is-small){font-size:clamp(var(--fs-caption),1.2cqi,var(--fs-body-s))}
.sheet.has-opening .fig_plot.is-wide .fig_label.is-m{font-size:clamp(var(--fs-body),1.6cqi,var(--fs-title-s))}
/* over a photograph under its shade the tag is full white, edge and word (D225) */
.sheet_cover .tag.is-inverse{color:var(--text-inverse)}

/* D234: the curtain a topic changes behind (sheet.js places it over what is in view under the tabs and wipes it across):
   the night as the cover has it, the chosen topic's name on it at the display size, in light */
.sheet_curtain{position:fixed;z-index:4;display:flex;align-items:center;justify-content:center;padding:0 var(--sheet-pad);overflow:hidden;background-color:var(--surface-prussian);background-image:var(--depth-prussian);color:var(--text-inverse)}
.sheet_curtain-name{margin:0;font-size:var(--fs-display);font-weight:var(--w-regular);line-height:var(--lh-display);letter-spacing:var(--ls-display);text-align:center;text-wrap:balance}

/* ---- D236: the way on at a sheet's foot (SheetFoot.astro; Go.astro as card; 21 October 2026) ----
   Zana: "i like the small line cards especially when the bg is blue and the lines are blue". The sheet closes on the
   night as its cover opens it: one band after the last part's action, from the sheet's side to side and to its end.
   Each place is one card drawn by a hairline in the drawings' blue, no fill, no shadow: its kind and tag at the top, the
   copy's line for what it is, the name at its foot with its mark right after it. The next topic leads on the 40% line
   with its photograph; the others take the text's column by their number: four two by two, three the first across and
   two under it, two across one above the other; no card but the lead runs down both rows. Pointed at (Motion's hover,
   sheet.js: is-on) or focused, the card's line turns white and the picture of where it leads comes up under the night
   inside it; its words stay as they are; the plus turns, a page's arrow steps on. */
.sheet_way{position:relative;z-index:0;margin:0 calc(-1 * var(--sheet-pad)) calc(-1 * var(--s-8));padding:var(--s-7) var(--sheet-pad) var(--s-8);background-color:var(--surface-prussian);background-image:var(--depth-prussian);color:var(--text-inverse)}
.sheet_way-head{margin:0 0 var(--s-4);color:var(--text-inverse-2)}
.sheet_way-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(var(--way-equal-min),auto);gap:var(--s-3);margin:0;padding:0;list-style:none}
.sheet_way-grid[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.sheet_way-grid:is([data-n="2"],[data-n="4"]){grid-template-columns:repeat(2,minmax(0,1fr))}
.sheet_way-item{display:flex;min-width:0}
.sheet_way-more{display:flex;margin-top:var(--s-6)}
.sheet_way-more:first-child{margin-top:0}
@media (min-width:1200px){
  .sheet_way-grid.has-lead{grid-template-columns:calc(40% - var(--s-3)) repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(var(--way-card-min),auto));grid-auto-rows:minmax(var(--way-card-min),auto)}
  .sheet_way-grid.has-lead>.is-lead{grid-column:1;grid-row:1/span 2}
  .sheet_way-grid.has-lead:is([data-n="1"],[data-n="2"])>.sheet_way-item:not(.is-lead),.sheet_way-grid.has-lead[data-n="3"]>.sheet_way-item:nth-child(2){grid-column:2/-1}
  .sheet_way-grid.has-lead[data-n="1"]{grid-template-rows:minmax(var(--way-card-min),auto)}
  .sheet_way-grid.has-lead[data-n="1"]>.is-lead{grid-row:1}
  .sheet_way-grid.has-lead[data-n="0"]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
}

/* the card: one link; its boundary a layer under its words, its answer to the pointer another, so only opacity moves */
.way-card{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;align-items:flex-start;min-width:0;margin:0;padding:var(--s-5);border:0;border-radius:var(--r-card);background:none;color:var(--text-inverse);font:inherit;text-align:left;text-decoration:none;cursor:pointer;scroll-margin-top:calc(var(--sheet-bar) + var(--sheet-tabs) + var(--s-4))}
.way-card::before{content:"";position:absolute;inset:0;z-index:-2;border:var(--stroke-hair) solid var(--line-night);border-radius:inherit;pointer-events:none}
.way-card_lit{position:absolute;inset:0;z-index:-1;overflow:hidden;border:var(--stroke-hair) solid var(--line-night-active);border-radius:inherit;background:var(--plate-night);opacity:0;transition:opacity var(--motion-hover);pointer-events:none}
/* the picture of where it leads, with the night's shade over it, one layer above the plate and under every word; it
   comes up on the card's motion only once it has loaded whole (sheet.js: has-pic) and only while the card is pointed at
   or focused, so a picture that arrives late never shows after the pointer has gone */
.way-card_pic{position:absolute;inset:0;opacity:0;transition:opacity var(--motion-hover)}
.way-card_pic img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.way-card_pic::after{content:"";position:absolute;inset:0;background:var(--shade-card)}
.way-card_top{display:flex;flex-direction:column;gap:var(--s-3);width:100%}
.way-card_head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-4);min-height:calc(var(--fs-kicker) * 2 + var(--stroke-icon) * 2)}
.way-card_kind{color:var(--text-inverse-2)}
.way-card_tag{margin-left:auto}
.way-card_line{display:block;max-width:var(--measure-text);font-size:var(--fs-body);font-weight:var(--w-light);line-height:var(--lh-body);letter-spacing:0;color:var(--text-inverse);text-wrap:pretty}
/* the name and its mark: the mark right after the name, after its last line when it wraps */
.way-card_go{display:block;max-width:100%;margin-top:auto;text-wrap:balance;padding-top:var(--s-6);font-size:var(--fs-title-s);font-weight:var(--w-regular);line-height:var(--lh-title-s);letter-spacing:var(--ls-title-s)}
.way-card_name{overflow-wrap:break-word}
.way-card_end{white-space:nowrap}
/* the card's mark, since 21 October 2026 the arrow alone after the name, as the site's buttons and links carry it, in
   place of the plus on its square (Zana: "all our cta buttons with + i feel like are bad looking. and very confusing") */
.way-card_icon{display:inline-flex;align-items:center;margin-left:.45em;vertical-align:-.05em;color:var(--text-inverse)}
.way-card_icon .icon{width:min(.7em,1rem);height:min(.7em,1rem);transition:transform var(--motion-nudge)}
/* the next topic: its photograph above its words, inset; its line at the title size in light, its name a step larger */
.way-card.is-lead{padding:var(--s-3)}
.way-card.is-lead>.way-card_top,.way-card.is-lead>.way-card_go{padding-inline:var(--s-3)}
.way-card.is-lead>.way-card_top{padding-top:var(--s-5)}
.way-card.is-lead>.way-card_go{padding-bottom:var(--s-3);font-size:var(--fs-title-m);line-height:var(--lh-title-m);letter-spacing:var(--ls-title-m)}
.way-card.is-lead .way-card_line{font-size:var(--fs-title-s);line-height:1.4}
.way-card_photo{position:relative;display:block;flex:1 1 auto;align-self:stretch;min-height:10rem;aspect-ratio:2/1;overflow:hidden;border-radius:var(--r-inset);background:var(--surface-deep)}
.way-card_photo img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
/* the way on to more of a kind: as tall as its words */
.way-card.is-compact .way-card_go{margin-top:0}
/* the line at the body's regular weight where the body is smaller than 16px */
@media (max-width:1439px){.way-card_line{font-weight:var(--w-regular)}}
.way-card.is-lead .way-card_line{font-weight:var(--w-light)}

/* pointed at, by a pointer that hovers, or focused from the keyboard: the line white, the picture or the plate inside,
   the square white with its mark in ink at once (a tween of the two would lose the mark half way), the plus turning */
@media (hover:hover){
  .way-card.is-on .way-card_lit,.way-card.is-on.has-pic .way-card_pic{opacity:1}
  .way-card.is-on.is-page .way-card_icon .icon{transform:translateX(.25rem)}
  /* D274: a sheet's expand mark grows a little, where a page's arrow steps on */
  .way-card.is-on:not(.is-page):not(.is-external) .way-card_icon .icon{transform:scale(1.25)}
}
.way-card:focus-visible{outline:var(--focus-width) solid var(--focus-inverse);outline-offset:var(--focus-offset)}
.way-card:focus-visible .way-card_lit,.way-card.has-pic:focus-visible .way-card_pic{opacity:1}
.way-card.is-page:focus-visible .way-card_icon .icon{transform:translateX(.25rem)}
.way-card:focus-visible:not(.is-page):not(.is-external) .way-card_icon .icon{transform:scale(1.25)}

/* from a tablet to a small laptop: the next topic across, its photograph on the left and its words on the right, the
   others two to a row under it, three with the first across; three equals, the first across and two under it */
@media (min-width:768px) and (max-width:1199px){
  .sheet_way-grid.has-lead{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(var(--way-equal-min),auto)}
  .sheet_way-grid.has-lead>.is-lead,.sheet_way-grid.has-lead:is([data-n="1"],[data-n="3"])>.sheet_way-item:nth-child(2){grid-column:1/-1}
  .sheet_way-grid:not(.has-lead)[data-n="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sheet_way-grid:not(.has-lead)[data-n="3"]>.sheet_way-item:first-child{grid-column:1/-1}
  .way-card.is-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--s-5);align-items:start}
  .way-card.is-lead>.way-card_top,.way-card.is-lead>.way-card_go{grid-column:2;padding-inline:0 var(--s-3)}
  .way-card.is-lead>.way-card_top{padding-top:var(--s-3)}
  .way-card.is-lead>.way-card_go{align-self:end}
}
/* a phone: one card under another, the next topic first, each as tall as its words */
@media (max-width:767px){
  .sheet_way{padding:var(--s-7) var(--sheet-pad)}
  .sheet_way-grid,.sheet_way-grid.has-lead{display:flex;flex-direction:column;gap:var(--s-3)}
  .way-card{padding:var(--s-4)}
  .way-card_go{padding-top:var(--s-4)}
  .way-card.is-lead>.way-card_top,.way-card.is-lead>.way-card_go{padding-inline:var(--s-1)}
  .way-card.is-lead>.way-card_top{padding-top:var(--s-4)}
  .way-card.is-lead>.way-card_go{padding-bottom:var(--s-1);font-size:var(--fs-statement);line-height:var(--lh-statement);letter-spacing:var(--ls-statement)}
  .way-card_photo{flex:none;min-height:0}
  /* one card under another, the empty row of a card without a kind or tag goes */
  .way-card_head:empty{display:none}
}
/* a read sheet holds no tabs to keep in place, so it ends where its foot does, not a window of white or night later */
.sheet.is-read .sheet_topic,.sheet.is-read .sheet_panel{min-height:0}

/* the bar and the tabs over the foot's night (sheet.js: is-on-foot): the night's own ground under them, their words and
   the line under the chosen tab white, the others the quiet white, Contact the light pair; the change at once, with no
   frame between (is-bar-switch) */
.sheet:is(.is-on-foot,.has-cover.is-docked) .sheet_bar{background-color:var(--surface-prussian);color:var(--text-inverse)}
.sheet:is(.is-on-foot,.has-cover.is-docked) .sheet_bar::after{opacity:0}
.sheet:is(.is-on-foot,.has-cover.is-docked) :is(.sheet_where,.sheet_where-name){color:var(--text-inverse)}
/* Contact as over the cover: the light pair, the accent when pointed at (D214), one behaviour on either night; there
   its colours change at once, only its arrow moving (a tween from ink on white to white on the accent passes a frame
   where label and chip are one shade) */
.sheet:is(.is-on-foot,.has-cover.is-docked) .sheet_contact :is(.team_button-text,.team_button-arrow){background:var(--surface);color:var(--text)}
.sheet:is(.is-on-foot,.has-cover.is-docked) .sheet_contact:hover :is(.team_button-text,.team_button-arrow){background:var(--accent);color:var(--text-inverse)}
.sheet:is(.is-on-cover,.is-on-foot,.has-cover.is-docked) .sheet_contact :is(.team_button-text,.team_button-arrow){transition:transform var(--motion-nudge)}
/* focus on the night's head, over the cover or the foot: the white ring, as on every dark ground; Back's ring inside its
   own box, so the place's row, which hides what runs past it, does not cut it */
.sheet:is(.is-on-cover,.is-on-foot,.has-cover.is-docked) .sheet_bar :focus-visible,.sheet.is-on-foot .sheet_topics :focus-visible{outline-color:var(--focus-inverse)}
.sheet_back:focus-visible{outline-offset:-2px}
/* the tabs' ground to the sheet's sides (its two solid extensions, not shadows), its fade under it in the night */
.sheet.is-on-foot .sheet_topics{background:var(--surface-prussian);box-shadow:calc(-1 * var(--sheet-pad)) 0 0 0 var(--surface-prussian),var(--sheet-pad) 0 0 0 var(--surface-prussian)}
.sheet.is-on-foot .sheet_topics::after{left:calc(-1 * var(--sheet-pad));right:calc(-1 * var(--sheet-pad));border-bottom-color:var(--hairline-inverse)}
.sheet.has-opening.is-on-foot .sheet_topics::before{background:linear-gradient(var(--surface-prussian),color-mix(in srgb,var(--surface-prussian) 0%,transparent))}
.sheet:not(.has-cover).is-on-foot .sheet_tab,.sheet:not(.has-cover).is-on-foot .sheet_tab-note{color:var(--text-inverse-2)}
.sheet:not(.has-cover).is-on-foot .sheet_tab[aria-selected="true"],.sheet:not(.has-cover).is-on-foot .sheet_tab[aria-selected="false"]:hover{color:var(--text-inverse)}
.sheet.is-on-foot .sheet_tab-line{border-top-color:var(--accent-inverse)}
@media (min-width:1280px){.sheet.has-opening.is-on-foot:not(.is-tabs-low) .sheet_topics{background:none;box-shadow:none}}
.sheet.is-bar-switch :is(.sheet_bar,.sheet_bar *,.sheet_topics,.sheet_topics *),.sheet.is-bar-switch .sheet_bar::after,.sheet.is-bar-switch .sheet_topics::before{transition:none}