/* 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. */
/* the sheet's own padding: since 9 November 2026 every sheet has the Vinnova sheet's, half as wide again as it was
   (Zana, 2 November 2026, of that sheet: "the main modal right/left padding should be increased here also by 50% of its
   current value"): 48px for 32, 36 for 24 on a tablet, 24 for 16 on a phone */
:root{--sheet-top:2.5rem;--sheet-side:calc(var(--gx) + (100vw - 2 * var(--gx) + 1.5rem) / 12);--sheet-pad:var(--s-7);--sheet-bar:5.5rem}
@media (max-width:991px){:root{--sheet-side:var(--gs);--sheet-pad:calc(var(--s-5) + var(--s-3))}}
@media (max-width:767px){:root{--sheet-top:var(--s-4);--sheet-side:var(--s-2);--sheet-pad:var(--s-5);--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-kicker);line-height:var(--lh-kicker);letter-spacing:0;text-transform:none;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 */


/* ---- 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:calc(40% - var(--tabs-shift,0px));background:none;pointer-events:none}
  /* a pixel higher than the bar's height, as the bar itself sticks a pixel above the sheet's top: a tab not chosen
     ended a pixel under the bar, a dark line on the white page (9 November 2026) */
  .sheet.has-cover:not(.is-tabs-low) .sheet_topics{top:calc(var(--sheet-bar) - var(--folder-h) - 1px)}
  .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(--tabs-shift,0px) - 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}

/* ==================== The sheets' family (9 November 2026, D287) ====================
   Every sheet in the layout Zana shaped on the Vinnova article (D273 to D283), which until now stood in the sheet
   study's own stylesheet and drew that article alone. One bar, one padding and two lines: the left column for what a
   reader looks for first (a part's statement or title, the facts, a panel's title and line, the main action), the right
   one from the 40% line for the reading. The night and the light grey stand as panels where the sheet changes subject,
   in place of rules across the sheet; the way on is a panel of the night inside the sheet, its places white cards with
   the picture of where they lead. What only the Vinnova article has stays in sandbox/sheet-study/study.css. */
:root{--read-wait:.3}                               /* D273: a statement's word before it fills in (read.js) */

/* ---- The bar's controls (D275, now on every sheet): a word at the small text's size and its mark in a circle drawn
   by a hairline. Pointed at or focused, the circle fills with the accent from its middle and the mark turns white once
   the fill is under it: the colour switches without a transition, a little after the fill starts to come and to go, so
   the mark is never white on white or ink on the accent. Focus is marked by the filled circle, not the browser's ring
   (as D272). On the night (over a cover, over the docked tabs) the line is the night's, the fill white, the mark ink.
   Contact left the bar (Zana, 2 November 2026, of the Vinnova sheet's: "i think you can remove this also from the
   modal"): each sheet's main action stands in its text. ---- */
.sheet_actions .close-button,.sheet_back{position:relative;isolation:isolate;gap:var(--s-3);padding:0;color:var(--text)}
:is(.sheet_actions .close-button,.sheet_back) .icon{box-sizing:border-box;flex:none;width:var(--s-6);height:var(--s-6);padding:var(--s-2);border:var(--stroke-hair) solid var(--divider);border-radius:var(--r-round);color:var(--text);transform:none;transition:color 0s linear .15s,border-color 0s linear .15s}
:is(.sheet_actions .close-button,.sheet_back)::after{content:"";position:absolute;top:50%;z-index:-1;width:var(--s-6);height:var(--s-6);margin-top:calc(var(--s-6) / -2);border-radius:var(--r-round);background:var(--accent);transform:scale(0);transition:transform var(--d-respond) var(--ease-arrive);pointer-events:none}
.sheet_actions .close-button::after{right:0}
.sheet_back::after{left:0}
@media (hover:hover){
  :is(.sheet_actions .close-button,.sheet_back):hover::after{transform:none}
  :is(.sheet_actions .close-button,.sheet_back):hover .icon{color:var(--text-inverse);border-color:var(--accent);transform:none;transition:color 0s linear .1s,border-color 0s linear .1s}
}
:is(.sheet_actions .close-button,.sheet_back):focus-visible{outline:none}
:is(.sheet_actions .close-button,.sheet_back):focus-visible::after{transform:none}
:is(.sheet_actions .close-button,.sheet_back):focus-visible .icon{color:var(--text-inverse);border-color:var(--accent);transition:color 0s linear .1s,border-color 0s linear .1s}
.sheet:is(.is-on-cover,.is-on-foot,.has-cover.is-docked) :is(.sheet_actions .close-button,.sheet_back){color:var(--text-inverse)}
.sheet:is(.is-on-cover,.is-on-foot,.has-cover.is-docked) :is(.sheet_actions .close-button,.sheet_back) .icon{color:var(--text-inverse);border-color:var(--border-inverse)}
.sheet:is(.is-on-cover,.is-on-foot,.has-cover.is-docked) :is(.sheet_actions .close-button,.sheet_back)::after{background:var(--accent-inverse)}
@media (hover:hover){.sheet:is(.is-on-cover,.is-on-foot,.has-cover.is-docked) :is(.sheet_actions .close-button,.sheet_back):hover .icon{color:var(--text);border-color:var(--accent-inverse)}}
.sheet:is(.is-on-cover,.is-on-foot,.has-cover.is-docked) :is(.sheet_actions .close-button,.sheet_back):focus-visible .icon{color:var(--text);border-color:var(--accent-inverse)}
/* a phone: the circle alone, its word still its name */
@media (max-width:767px){.sheet_actions .close-button{gap:0;font-size:0}}

/* ---- The two lines. The parts of text stand in from both sides by the panels' padding, so their words start where the
   panels' words do (Zana, 2 November 2026: "text content elements like this... should have an indent from left and
   right"); the photograph and the panels keep the full width ---- */
.read{--panel-pad:var(--s-7)}
.read_intro,.read_part,.read_close,.read_panel{display:grid;grid-template-columns:calc(40% - .2 * var(--panel-pad)) minmax(0,1fr)}
.read :is(.read_intro,.read_part,.read_close){padding-inline:var(--panel-pad)}
.read_side{grid-column:1;min-width:0;padding-right:var(--s-6)}
.read_main{grid-column:2;min-width:0}

/* ---- A read sheet's opening: the title at the long titles' size and its line, and under them its kind (and its date,
   or its labels) on one line, all from the sheet's left edge (Zana, 2 November 2026: the title stacked over the date
   rather than two columns); the photograph framed under them, opening as the topics' do ---- */
.read_opening{padding:var(--s-6) 0 var(--s-7)}
.read_head{min-width:0}
.read_meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin:var(--s-7) 0 0}
.read_kind{color:var(--text)}
.read_date{color:var(--text-3)}
.sheet.has-opening .read_title{margin:0;max-width:var(--measure-statement)}
.read_photo.sheet_photo{margin:0}
.read>*+.read_photo.sheet_photo{margin-top:var(--s-8)}

/* ---- The facts beside the first statement ---- */
.read_intro{padding:var(--s-8) 0 0}
/* each value straight under its label, the facts a step apart (Zana, 2 November 2026, of a case study's facts: "all 3
   should have a closer gap like this. mine have to much gap") */
.read_facts{grid-column:1;display:grid;align-content:start;gap:var(--s-4);margin:0;padding-right:var(--s-6)}
.read_fact{max-width:calc(var(--s-9) + var(--s-7))}
/* the label in ink and its value in the quiet grey (Zana, the same day: "the muted text is actually the value and the
   attribute is the one with ink") */
.read_fact dt{font-size:var(--fs-kicker);line-height:var(--lh-kicker);color:var(--text)}
.read_fact dd{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-3)}
.read_statement{grid-column:2;margin:0;color:var(--text);text-wrap:pretty}
/* a word with a hyphen in it keeps to one line of a statement ("scale-ups" broke after its hyphen) */
.read_word{white-space:nowrap}
/* waiting to fill in: the words at a third of the ink, until the statement comes into view (read.js) */
html:not(.reduce) .read_statement.is-waiting .read_word{opacity:var(--read-wait)}
.read_more{margin:var(--s-6) 0 0}

/* ---- A reading part: its title alone on the left, the paragraphs or the list on the 40% line ---- */
.read_part{padding:var(--s-8) 0 0}
.read_part-title{margin:0;text-wrap:balance}
.read_main>.read_text{margin:0;max-width:var(--measure-text)}
.read_main>.read_text+.read_text{margin-top:var(--s-4)}
/* an article's first statement and the rest of its opening section under it */
.read_main>.read_statement+.read_text{margin-top:var(--s-6)}
.read_main>.sheet_turn{max-width:var(--measure-text)}
/* the points under small titles: the Vinnova article's (article_questions), after the part's paragraph */
.read_main>.read_text+.article_questions{margin-top:var(--s-6)}
.read_main>.sheet_action{margin-top:var(--s-6)}
/* an article's questions under small titles, between its paragraphs */
.read_main>.sheet_items{max-width:var(--measure-text);margin:var(--s-6) 0;gap:var(--s-5)}
.read_main>.sheet_items:first-child{margin-top:0}
.read_main>.sheet_items:last-child{margin-bottom:0}

/* ---- A topic's lead part (the areas, the ecosystem, the company profile): on the left its statement and, at the
   column's foot, level with the last line beside it, the main action (as Zana placed it in the Vinnova sheet's grey
   panel, 3 November 2026); on the right its text at the small titles' size in light, then what it covers as points,
   each under a small title and a hairline, as the Vinnova article's are. A point holds a paragraph, a list or items ---- */
.read_part.is-lead .read_side{display:flex;flex-direction:column;align-items:flex-start}
.read_part.is-lead .read_side>.sheet_action{margin-top:auto;padding-top:var(--s-6)}
.sheet.has-tabs .read>.read_part:first-child{padding-top:var(--s-7)}
.read_standfirst{margin:0;max-width:var(--measure-text);font-size:var(--fs-title-s);font-weight:var(--w-light);line-height:1.4;letter-spacing:0;text-wrap:pretty}
.read_standfirst+.read_standfirst{margin-top:var(--s-4)}
.read_points{margin:0;padding:0;list-style:none}
.read_main>*+.read_points{margin-top:var(--s-7)}
.read_point{padding-top:var(--s-6);border-top:var(--stroke-hair) solid var(--divider)}
.read_point+.read_point{margin-top:var(--s-6)}
.read_points:first-child>.read_point:first-child{padding-top:0;border-top:0}
.read_point-title{margin:0}
.read_point>*+*{margin-top:var(--s-4)}
.read_point>:is(.sheet_part-text,.sheet_scope){max-width:var(--measure-text)}
.read_point>.sheet_part-text+.sheet_part-text{margin-top:var(--s-3)}
.read_point .sheet_items{gap:var(--s-5);max-width:var(--measure-text)}

/* ---- The panels: the night and the light grey in place of a hairline where the sheet changes subject. The text
   column starts on the sheet's own 40% line: 40% of the panel's inner width less a fifth of its padding ---- */
.read_panel{row-gap:var(--s-7);margin:var(--s-8) 0 0;padding:var(--s-8) var(--panel-pad);border-radius:var(--r-card)}
.read_panel.is-night{background-color:var(--surface-prussian);background-image:var(--depth-prussian);color:var(--text-inverse)}
.read_panel.is-light{background:var(--surface-1)}
.read_panel-title{margin:0;color:inherit;text-wrap:balance}
/* a panel's line under its title on the left; only a part that is just text has its title alone there (Zana,
   2 November 2026: "The top paragraph for elements like this should be under the title") */
.read_panel-text{margin:var(--s-5) 0 0;max-width:var(--measure-body)}
/* the line no wider than its title (Zana, the same day: "the paragraph should be indented more so that it doesn't...
   get wider than its title"): the title alone sets the left column's width, and the line fills it without adding to it */
.read_panel .read_side{width:fit-content}
.read_panel .read_panel-text{contain:inline-size}
.read_panel.is-night .read_panel-text{color:var(--text-inverse-2)}
.read_panel .read_main>.read_text{max-width:var(--measure-text)}
/* a panel that closes a sheet's subject with its action (the ecosystem's Working with AxeliQ, the company profile's
   investment opportunity): the action at the foot of the left column, as the lead part's is */
.read_panel.is-close .read_side{display:flex;flex-direction:column;align-items:flex-start}
.read_panel.is-close .read_side>.sheet_action{margin-top:auto;padding-top:var(--s-6)}
.read_panel.is-close .read_main>*+.sheet_items{margin-top:var(--s-6)}
.read_panel.is-close .read_main>.sheet_items{max-width:var(--measure-text)}
.read_panel.is-close .read_main>.go-text{margin-top:var(--s-6)}

/* ---- A topic's figure as a panel (Figure.astro, panel): the method's name, its title and what it shows on the left,
   the drawing on the 40% line on the panel's own grey, with no plate of its own ---- */
.read_fig .read_side{width:auto}
.read_fig .read_panel-text{contain:none}
.read_fig-kicker{margin:0 0 var(--s-4);color:var(--text-3)}
.read_fig .read_main{align-self:center}
.sheet.has-opening .read_fig .fig{margin:0;padding:0;border-radius:0;background:none}

/* ---- The parts at a glance: two to a row, each a card drawn by the night's line, its drawing on the left and its
   name running into its sentence ---- */
.glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin:0;padding:0;list-style:none}
.glance_item{display:flex;align-items:flex-start;gap:var(--s-5);min-width:0;padding:var(--s-5);border:var(--stroke-hair) solid var(--line-night);border-radius:var(--r-card)}
.glance_text{margin:0;font-size:var(--fs-body);font-weight:var(--w-light);line-height:var(--lh-body);color:var(--text-inverse-2);text-wrap:pretty}
.glance_name{font-weight:var(--w-regular);color:var(--text-inverse)}
/* the drawing: its lines on one layer, its point on another over them */
.glance_drawing{position:relative;flex:none;display:block;width:var(--s-8);aspect-ratio:4/3}
.glance_layer{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.glance_layer *{vector-effect:non-scaling-stroke}
.glance_layer :is(line,rect,circle,path){fill:none;stroke:var(--line-art);stroke-width:var(--stroke-hair)}
.glance_layer .is-tick{stroke-width:var(--stroke-icon)}
.glance_layer .is-dash{stroke-dasharray:3 3}
.glance_layer .is-frame{stroke:var(--line-night)}
.glance_layer .is-faint{stroke:var(--border-inverse)}
.glance_layer .is-fill{fill:var(--line-art);stroke:none}
.glance_layer .is-fill.is-faint{fill:var(--border-inverse)}
.glance_layer.is-key :is(line,rect,circle,path){stroke:var(--accent-inverse)}
.glance_layer.is-key .is-fill{fill:var(--accent-inverse);stroke:none}
/* waiting to come up as the panel comes into view, each part's point lighting last (read.js) */
html:not(.reduce) .glance.is-waiting :is(.glance_item,.glance_layer.is-key){opacity:0}

/* ---- The figures: few and large, in the accent, each with the line that says what it counts ---- */
.figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7) var(--s-6);margin:0;padding:0;list-style:none}
.figure{min-width:0}
.figure_value{margin:0;font-size:var(--fs-display);font-weight:var(--w-regular);line-height:var(--lh-display);letter-spacing:var(--ls-display);color:var(--accent)}
.figure_line{margin:var(--s-3) 0 0;max-width:var(--measure-body);color:var(--text);text-wrap:pretty}
html:not(.reduce) .figures.is-waiting .figure{opacity:0}

/* ---- The close: its statement, a line and the main action ---- */
.read_close{padding:var(--s-8) 0 0}
.read_close-statement{margin:0;text-wrap:balance}
.read_close .read_main>.read_text{margin-top:var(--s-4)}
/* the list under the statement, in the area topics' bullets (sheet_scope), the main action under it */
.read_close .read_list{margin:var(--s-5) 0 0}
.read_close .sheet_action{margin-top:var(--s-6)}

/* ---- The way on: a panel of the night inside the sheet, as the parts' panel is, with the sheet's white round it, so
   it reads as the sheet's own end; as a band to the sheet's edges it met the night round the sheet, and the cards on
   it looked outside the sheet (Zana, 2 November 2026: "I don't like that the cards are just floating"). Each place a
   white card (Zana, the same day: "can you try make these cards white"), its photograph inset at the top with its tag
   on it, its name in ink and its line in grey, and at its foot, at the same height on every card, the site's text
   link. Pointed at (Motion's hover, read.js: is-on) or focused, the card's link answers as the map's entries' do
   (theme.css): the ring goes, the name steps into its place and the accent's circle comes with the expand mark (D274).
   Two places stand side by side with wider pictures; four stand in one row from a laptop up ---- */
.read_way{margin:var(--s-8) 0 0;padding:var(--s-7);border-radius:var(--r-card);background-color:var(--surface-prussian);background-image:var(--depth-prussian);color:var(--text-inverse)}
.read_way-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-3) var(--s-6);margin:0 0 var(--s-6)}
.read_way-title{margin:0;color:var(--text-inverse)}
/* a sheet's one way on, where it names no other place (the company profile): a text link on the 40% line */
.read_way-alone{display:grid;grid-template-columns:calc(40% - .2 * var(--panel-pad)) minmax(0,1fr);margin:var(--s-7) 0 0;padding-inline:var(--panel-pad)}
.read_way-alone>*{grid-column:2;justify-self:start}
.places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin:0;padding:0;list-style:none}
.places[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.places[data-n="2"] .place-card_photo{aspect-ratio:2/1}
.places[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.places_item{display:flex;min-width:0}
.place-card{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;padding:var(--s-1);border-radius:var(--r-card);background:var(--surface);color:var(--text);text-decoration:none;scroll-margin-top:calc(var(--sheet-bar) + var(--sheet-tabs,0px) + var(--s-4))}
.place-card_photo{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-inset);background:var(--surface-2)}
.place-card_photo img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.place-card_text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);padding:var(--s-4) var(--s-4) 0}
/* a tag longer than its card's picture ends in an ellipsis inside its capsule: on a tablet "Startups and innovation
   teams" ran out of the capsule, over the picture and under the next card (found 9 November 2026) */
.place-card_tag{position:absolute;z-index:1;top:calc(var(--s-1) + var(--s-4));left:calc(var(--s-1) + var(--s-4));display:block;max-width:calc(100% - var(--s-6) - var(--s-2));margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--surface);color:var(--text)}
.place-card_title{font-size:var(--fs-title-s);line-height:var(--lh-title-s);letter-spacing:var(--ls-title-s);text-wrap:balance}
.place-card_line{font-size:var(--fs-body);font-weight:var(--w-light);line-height:var(--lh-body);color:var(--text-3);text-wrap:pretty}
.place-card_go{display:inline-flex;align-self:flex-start;align-items:center;margin-top:auto;padding:var(--s-5) var(--s-4) var(--s-4);font-size:var(--fs-body);line-height:1.2;white-space:nowrap;color:var(--text)}
/* a link that names its place ("Explore Business model") keeps to one line: in a card too narrow for the name (four in
   a row; three on a small laptop) it reads "Explore", the name standing right above it as the card's title */
.place-card{container-type:inline-size}
@container (max-width:21rem){.place-card_go-name{display:none}}
@media (hover:hover){
  .place-card.is-on .go-ring{opacity:0;transform:scale(0)}
  .place-card.is-on .go-label{transform:translateX(-.92em)}
  .place-card.is-on .go-label::after{transform:scaleX(0)}
  .place-card.is-on .go-dot::before{transform:scale(1)}
  .place-card.is-on .go-dot .icon{opacity:1;transform:none;transition:transform var(--motion-unfold),opacity .25s linear .15s}
}
.place-card:focus-visible{outline:var(--focus-width) solid var(--focus-inverse);outline-offset:var(--focus-offset)}
.place-card:focus-visible .go-ring{opacity:0;transform:scale(0)}
.place-card:focus-visible .go-label{transform:translateX(-.92em)}
.place-card:focus-visible .go-label::after{transform:scaleX(0)}
.place-card:focus-visible .go-dot::before{transform:scale(1)}
.place-card:focus-visible .go-dot .icon{opacity:1;transform:none;transition:transform var(--motion-unfold),opacity .25s linear .15s}

/* ---- Contact in the family: a variant's part on the two lines after the opening; the two people on a light grey
   panel, the first at its left edge and the second on the 40% line (it was a rule across the sheet and the people
   under it); the panel as far from the sheet's foot as from its sides ---- */
.contact_variant.read_part{padding-top:0;padding-bottom:var(--s-7)}
.contact_people.read_panel{margin-top:0;padding-block:var(--s-7)}
.contact_people .sheet_people-list{grid-column:1/-1;grid-template-columns:calc(40% - .2 * var(--panel-pad)) minmax(0,1fr)}
.contact_people .sheet_person-photo{width:9rem}
.sheet.is-contact .sheet_body{padding-bottom:var(--sheet-pad)}
@media (max-width:991px){.contact_people .sheet_people-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-5)}}
@media (max-width:767px){
  .contact_people .sheet_people-list{grid-template-columns:minmax(0,1fr)}
  .contact_people .sheet_person-photo{width:7.5rem}
}

/* ---- The covers of the sheets with topics: the line under the name at the small titles' size, so the name alone is
   large there and a topic's statement is the first large line under the tabs (it was 30px, a step under that statement
   and directly over it); the area's place among the five in sentence case ---- */
.sheet.has-opening .sheet_cover-lead{max-width:34rem;font-size:var(--fs-title-s);line-height:1.4;color:var(--text-inverse);text-wrap:balance}
.sheet_cover-count,.sheet_topics-where{color:var(--text-inverse)}

/* ---- Narrower windows ---- */
/* the parts' cards too narrow for a drawing beside the words: the drawing above them */
@media (min-width:992px) and (max-width:1599px){
  .glance_item{flex-direction:column;gap:var(--s-4)}
}
/* a figure's drawing needs more than the right column gives under a wide laptop: under its words, across the panel */
@media (max-width:1365px){
  .read_fig{grid-template-columns:minmax(0,1fr)}
  .read_fig :is(.read_side,.read_main){grid-column:1}
  .read_fig .read_side{padding-right:0}
  .sheet.has-opening .read_fig .fig_plot.is-wide{margin-inline:auto}
  .places[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* the right column holds one card to a row */
@media (min-width:992px) and (max-width:1199px){
  .glance{grid-template-columns:minmax(0,1fr)}
  .glance_item{flex-direction:row;gap:var(--s-5)}
}
/* on a small laptop or a tablet on its side the left column is too narrow for the main action beside the text (a long
   one ran to three lines): it follows the text on the 40% line, the statement or title staying on the left */
@media (min-width:992px) and (max-width:1199px){
  :is(.read_part.is-lead,.read_panel.is-close) .read_side{display:contents}
  :is(.read_part.is-lead,.read_panel.is-close) .read_side>:is(.read_part-title,.read_panel-title){grid-column:1;padding-right:var(--s-6)}
  :is(.read_part.is-lead,.read_panel.is-close) .read_side>.sheet_action{grid-column:2;margin-top:var(--s-6);padding-top:0;justify-self:start}
  .read_panel.is-close{row-gap:0}
}
/* one column: the left column above the text it belongs to; the facts two to a row; a lead part's and a closing
   panel's action after the text */
@media (max-width:991px){
  .read_intro,.read_part,.read_close,.read_panel{grid-template-columns:minmax(0,1fr)}
  .read_side,.read_main,.read_facts,.read_statement{grid-column:1}
  .read_side{padding-right:0}
  .read_meta{margin-top:var(--s-6)}
  .read_facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-6);margin-bottom:var(--s-6);padding-right:0}
  /* a fact alone in its row has the row, up to the facts' width */
  .read_fact:last-child:nth-child(odd){grid-column:1/-1}
  .read_part .read_side,.read_close .read_side{margin-bottom:var(--s-5)}
  :is(.read_part.is-lead,.read_panel.is-close) .read_side{display:contents}
  :is(.read_part.is-lead,.read_panel.is-close) .read_side>:is(.read_part-title,.read_panel-title){order:0}
  .read_part.is-lead .read_part-title{margin-bottom:var(--s-5)}
  :is(.read_part.is-lead,.read_panel.is-close) .read_main{order:1}
  :is(.read_part.is-lead,.read_panel.is-close) .read_side>.sheet_action{order:2;margin-top:var(--s-6);padding-top:0;justify-self:start}
  .read_panel.is-close{row-gap:0}
  .read_panel.is-close .read_panel-title{margin-bottom:var(--s-6)}
  .read{--panel-pad:var(--s-5)}
  .read_panel{row-gap:var(--s-6);padding:var(--s-7) var(--panel-pad)}
  .read_way{padding:var(--s-6) var(--s-5)}
  .places,.places[data-n="2"],.places[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .read_way-alone{grid-template-columns:minmax(0,1fr)}
  .read_way-alone>*{grid-column:1}
}
/* a phone: the parts and the cards one under another */
@media (max-width:767px){
  .read_opening{padding:var(--s-5) 0 var(--s-6)}
  .read_intro,.read_part{padding-top:var(--s-7)}
  .read{--panel-pad:var(--s-4)}
  .read_panel{margin-top:var(--s-7);padding:var(--s-6) var(--panel-pad)}
  .read_close{padding:var(--s-7) 0 0}
  .read>*+.read_photo.sheet_photo{margin-top:var(--s-7)}
  .read_way{margin-top:var(--s-7);padding:var(--s-5) var(--s-4)}
  .glance{grid-template-columns:minmax(0,1fr)}
  .glance_item{gap:var(--s-4);padding:var(--s-4)}
  .glance_drawing{width:var(--s-7)}
  .figures{gap:var(--s-6) var(--s-5)}
  .places,.places[data-n="2"],.places[data-n="4"]{grid-template-columns:minmax(0,1fr)}
  .places[data-n="2"] .place-card_photo{aspect-ratio:3/2}
  .read_photo.sheet_photo{aspect-ratio:4/3}
}