/* The one stylesheet of the public site (Decision MI-031): the homepage, and the pages behind it
   (about, careers, contact, legal, and the page for an address that is not there).
   The staff area has its own (app/app.css). In order: the homepage as it was ruled, the pages
   behind it, the foot they all share, and motion. */

/* Moyakhe Industries has a ruled mark (MI-N11) and no Canon yet (MI-N13). What this page holds is
   what the Founder ruled on it, 2026-10-03 (MI-N14, Decision MI-014): the mark at scale on a deep grey
   ground (black until MI-028, 2026-10-04: "we can modernise it with a deep grey"; a shade darker since MI-031);
   a top bar of glass; the mark travelling into that bar on scroll while the tagline grows into
   the place it leaves; the bar turning white, and the mark black, as it lands. The face is Poppins, the face of the ruled wordmark (SIL OFL 1.1;
   two weights, each cut down to Latin with its accents and the marks of prose, so no character on a page falls to another face, MI-032). Section copy is from 04-Marketing/Company_Profile_v0.1.html, true as at
   21 September 2026. The tagline is the Founder's, in his own lower case, which is also the wordmark's (MI-N16). */
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/poppins-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/poppins-700-latin.woff2") format("woff2"); }

/* Every colour, size and duration is a token. Below this block only ratios remain: line heights,
   letter-spacing in em, and the geometry of the mark. Type sizes are rem so text scales. */
:root {
  --ground: #1E1E1E;
  --type: #F2F2F0;
  --quiet: rgba(242, 242, 240, 0.68);
  --rule: rgba(242, 242, 240, 0.2);
  --accent: #E50914;
  --face: "Poppins", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --t-label: 0.75rem;
  --t-foot: 0.8125rem;
  --t-text: 1.0625rem;
  --t-lead: clamp(1.0625rem, 1.5vw, 1.375rem);
  --t-tag: clamp(1rem, 6.4vw, 2rem);
  --t-word: clamp(2.875rem, 8.4vw, 8rem);
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: clamp(56px, 9vw, 128px);
  --gutter: clamp(16px, 5vw, 72px);
  --hairline: 1px;
  --border: 1.5px;
  --corner: 2px;
  --tap: 44px;
  --rail-h: 77px;
  --menu-w: 280px;
  --bar-w: 24px;
  --bar-gap: 6px;
  --bar-shift: calc(var(--bar-gap) + var(--border));
  --focus: 2px;
  --focus-gap: 3px;
  --mark-h: min(68vh, 60vw);
  --lock-gap: clamp(12px, 3vw, 48px);
  --glass-blur: 18px;
  --glass-sat: 1.7;
  --glass-tint: 62%;
  --glass-tint-menu: 80%;
  --glass-edge: 26%;
  --wave: 46px;
  --wave-in: 160;
  --glass-fill: 5%;
  --cell: 117px;
  --t-price: 1rem;
  --t-fine: 0.75rem;
  --box-y: 7px;
  --box-x: 14px;
  --box-gap: 21px;
  --t-sector: clamp(1.75rem, 3.6vw, 3.25rem);
  --unveil: 900ms;
  --foot-logo: 64px;
  --t-h1: clamp(2.25rem, 6.2vw, 5.25rem);
  --t-mail: clamp(1.125rem, 4.6vw, 3rem);
  --measure: 62ch;
  --zoom: 1.12;
  --grey: grayscale(1) contrast(1.06);
  --blend: #FFFFFF;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --press: 120ms;
  --quick: 150ms;
  --menu-in: 180ms;
  --menu-out: 120ms;
  --morph: 200ms;
  --enter: 300ms;
  --plane: 300ms;
  --words: 500ms;
  --reveal: 600ms;
  --rise: 700ms;
  --stagger: 45ms;
  --stagger-list: 50ms;
  --lift: 8px;
  --from-scale: 0.96;
  --press-scale: 0.97;
  color-scheme: dark;
}
/* The panel turns. As the mark lands in the bar, the bar's glass goes from black to white and
   what stands on it from white to black; the page itself stays black. The bar's colours are
   registered so they turn together, on one clock, and turn back the same way. The mark is set
   in difference against whatever is behind it, so it is white over the black page and black
   over the white bar at every instant of the turn, and is never lost against either. */
@property --ground { syntax: "<color>"; inherits: true; initial-value: #1E1E1E; }
@property --type { syntax: "<color>"; inherits: true; initial-value: #F2F2F0; }
@property --quiet { syntax: "<color>"; inherits: true; initial-value: rgba(242, 242, 240, 0.68); }
@property --rule { syntax: "<color>"; inherits: true; initial-value: rgba(242, 242, 240, 0.2); }
@property --glass-tint { syntax: "<percentage>"; inherits: true; initial-value: 62%; }
@property --glass-tint-menu { syntax: "<percentage>"; inherits: true; initial-value: 80%; }
.rail { color: var(--type); transition: --ground var(--plane) ease, --type var(--plane) ease, --quiet var(--plane) ease, --rule var(--plane) ease, --glass-tint var(--plane) ease, --glass-tint-menu var(--plane) ease; }
:root[data-plane="white"] .rail { --ground: #F7F7F5; --type: #141414; --quiet: rgba(20, 20, 20, 0.66); --rule: rgba(20, 20, 20, 0.18); --glass-tint: 90%; --glass-tint-menu: 94%; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--type); font: 500 var(--t-text)/1.55 var(--face); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
a:focus-visible { outline: var(--focus) solid var(--type); outline-offset: var(--focus-gap); }
::selection { background: var(--type); color: var(--ground); }
[id] { scroll-margin-top: calc(var(--rail-h) + var(--s-3)); }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.skip { position: absolute; left: var(--gutter); top: var(--s-1); padding: var(--s-1) var(--s-2); background: var(--type); color: var(--ground); transform: translateY(-200%); z-index: 20; }
.skip:focus { transform: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nowrap { white-space: nowrap; }

.page { padding-inline: var(--gutter); position: relative; }
.top { position: absolute; top: 0; left: 0; width: 1px; height: var(--s-3); pointer-events: none; }

/* The bar stays, and it is glass: the page is seen through it, blurred, as it passes beneath.
   This is a frosted-glass approximation in CSS (a tinted, blurred backdrop with a lit edge), and
   where the browser cannot blur a backdrop the bar is simply solid. */
.rail { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-block: calc(var(--s-2) + env(safe-area-inset-top, 0px)) var(--s-2); background: var(--ground); border-bottom: var(--hairline) solid var(--rule); }
#menu { position: fixed; inset: calc(var(--rail-h) + var(--s-1) + env(safe-area-inset-top, 0px)) var(--gutter) auto auto; margin: 0; padding: var(--s-1) 0; width: min(var(--menu-w), calc(100vw - 2 * var(--gutter))); background: var(--ground); color: var(--type); border: var(--hairline) solid color-mix(in srgb, var(--type) var(--glass-edge), transparent); border-radius: var(--corner); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rail, #menu { -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); }
  .rail { background: color-mix(in srgb, var(--ground) var(--glass-tint), transparent); }
  #menu { background: color-mix(in srgb, var(--ground) var(--glass-tint-menu), transparent); box-shadow: inset 0 var(--hairline) 0 color-mix(in srgb, var(--type) var(--glass-edge), transparent); }
}

/* The lockup is 04-Marketing/Logo/moyakhe-logo-horizontal-small-v2.svg, inlined: one baseline, the
   word's x-height matched to the m, the word's own stem-to-round gap between m and o, INDUSTRIES
   in outlines from the m's left leg to the end of the word. The m is the small form: the letter
   and the six widest bars, squared to the letter's height (MI-N15). */
.logo { display: flex; align-items: center; min-height: var(--tap); border-radius: var(--corner); }
.logo svg { height: var(--tap); width: auto; aspect-ratio: 3765 / 1065; display: block; overflow: visible; }
.menu-btn { width: var(--tap); height: var(--tap); margin-right: calc(var(--s-1) * -1); padding: 0; border: 0; border-radius: var(--corner); background: none; color: inherit; cursor: pointer; display: grid; place-content: center; gap: var(--bar-gap); }
.menu-btn span { display: block; width: var(--bar-w); height: var(--border); background: currentColor; }
.menu-btn span:nth-child(2) { background: var(--accent); }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover { background: var(--rule); } }
.menu-btn:active { background: var(--rule); }
.menu-btn:focus-visible { outline: var(--focus) solid var(--type); outline-offset: var(--focus-gap); }
#menu a { display: flex; align-items: center; min-height: var(--tap); padding-inline: var(--s-2); text-decoration: none; }
#menu a + a { border-top: var(--hairline) solid var(--rule); }
@media (hover: hover) and (pointer: fine) { #menu a:hover { background: var(--type); color: var(--ground); } }
#menu a:active { background: var(--type); color: var(--ground); }
#menu a:focus-visible { outline-offset: calc(var(--focus-gap) * -1); }
/* Where the mark comes to rest in the bar. */
.dock { position: absolute; left: var(--gutter); top: calc(var(--s-2) + env(safe-area-inset-top, 0px)); height: var(--tap); aspect-ratio: 720 / 632; pointer-events: none; }

/* 1. The hero: the mark at scale on the right, and the tagline on the left, on the m's baseline. As the page
   scrolls the mark is lifted out of its slot and travels to the bar, where it is the logomark;
   the tagline stays, and grows where it stands until it runs the width of the page. */
.hero { min-height: calc(100vh - var(--rail-h)); min-height: calc(100svh - var(--rail-h)); display: grid; align-items: center; grid-template-columns: minmax(0, 1fr); padding-block: var(--s-4); }
/* Side by side where both fit, on the m's baseline; where they do not, the line wraps upward,
   so the mark stands above and the sentence beneath it. */
.hero-lock { display: flex; flex-wrap: wrap-reverse; align-items: flex-start; justify-content: space-between; gap: var(--lock-gap); min-width: 0; }
.mark-slot { position: relative; flex: none; height: var(--mark-h); aspect-ratio: 720 / 632; margin-left: auto; }
.mark { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The m's baseline is 90 of the mark's 632 units above its foot; the hairlines hang below it. */
.tag-slot { position: relative; flex: none; margin-bottom: calc(var(--mark-h) * 90 / 632 - 0.13 * var(--t-tag)); }
.tag { font-size: var(--t-tag); font-weight: 700; line-height: 0.96; letter-spacing: -0.035em; white-space: nowrap; }
.tag .line { display: block; }
/* Red is the one accent: the full stop, INDUSTRIES in the lockup, the sixth line of the mark, the
   middle bar of the menu button and its cross (Decisions MI-016, MI-018). In the lockup the m
   carries no red line: the line is the I of Industries, and there the word is written (MI-034). */
.tag .stop, .logo .ind { color: var(--accent); fill: var(--accent); }
/* The sixth line of the mark is red, and it is the I of Industries: the m and the I are one mark,
   a hidden MI (Decision MI-030). It is drawn as its own layer, because the rest of the mark is set
   in difference against the page and red set that way would turn cyan over the white bar. */
.mark-red { color: var(--accent); }
.docking .mark { position: fixed; inset: 0 auto auto 0; margin: 0; transform-origin: 0 0; z-index: 11; pointer-events: none; will-change: transform; color: var(--blend); mix-blend-mode: difference; }
.docking .mark-red { color: var(--accent); mix-blend-mode: normal; z-index: 12; }
/* Set at its full size and scaled down to start, so it is sharp when it arrives. */
.growing .tag { position: absolute; left: 0; bottom: 0; font-size: var(--t-word); transform-origin: 0 100%; will-change: transform; }

/* Sections share one rhythm: a rule, a label, the matter. */
section { border-top: var(--hairline) solid var(--rule); padding-block: var(--s-3) var(--s-5); display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
section.markets { gap: var(--s-2); padding-block: var(--s-2) var(--s-3); }
.label { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--quiet); }

/* 2. Market prices: one box of glass after the hero. What the mines the company serves are
   paid for, and what electric cars and data centres are built from, each by its symbol. It is filled by /api/prices
   and stays out of the page until that answers: a price that is not from a feed is not shown. */
.box { border: var(--hairline) solid color-mix(in srgb, var(--type) var(--glass-edge), transparent); border-radius: var(--corner); background: color-mix(in srgb, var(--type) var(--glass-fill), transparent); padding: var(--box-y) var(--box-x); display: grid; gap: var(--box-y); }
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cell)), 1fr)); gap: 0 var(--box-gap); margin: 0; }
.prices > div { border-bottom: var(--hairline) solid var(--rule); padding-block: var(--box-y); min-width: 0; }
/* Each price goes by its symbol, in its own case (Au, not AU); the name is on the symbol for whoever asks. */
.prices dt { font-size: var(--t-fine); font-weight: 700; letter-spacing: 0.04em; color: var(--quiet); }
.prices abbr { text-decoration: none; }
.prices dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-1); line-height: 1.3; }
.px { flex: 1 0 100%; font-size: var(--t-price); font-weight: 700; font-variant-numeric: tabular-nums; }
.unit, .chg, .asat { font-size: var(--t-fine); color: var(--quiet); font-variant-numeric: tabular-nums; }
.asat { line-height: 1.4; padding-bottom: var(--box-y); }
.chg { margin-left: auto; }

/* 3. Sectors: one to a line, a rule between them, the picture on one side and the words on the
   other, the sides changing with each line (Decisions MI-023, MI-025). The picture takes the
   wider share. The photographs are other people's, openly licensed (MI-021); each line says
   so, so none passes for the company's own work. They are set in grey and take their colour
   under the pointer. Only what the company does is here: the studies came off the page with
   MI-034, and Security is off it until it is added (MI-024). */
.sectors li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto 1fr; gap: var(--s-1) var(--s-4); padding-block: var(--s-4); }
.sectors li + li { border-top: var(--hairline) solid var(--rule); }
.sectors li:first-child { padding-top: 0; }
.sectors figure { margin: 0; grid-column: 1; grid-row: 1 / -1; overflow: hidden; border-radius: var(--corner); }
.sectors img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; filter: var(--grey); }
.sectors h3 { grid-column: 2; align-self: end; font-size: var(--t-sector); font-weight: 700; line-height: 1; letter-spacing: -0.035em; }
.sectors p { grid-column: 2; color: var(--quiet); font-size: var(--t-lead); line-height: 1.35; }
@media (hover: hover) and (pointer: fine) { .sectors li:hover img { filter: none; } }
/* Every second line is turned: the words at the left, the picture at the right. Only where
   there is room for two columns; on a phone every picture stands above its words. */
@media (min-width: 701px) {
  .sectors li:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .sectors li:nth-child(even) figure { grid-column: 2; }
  .sectors li:nth-child(even) :is(h3, p) { grid-column: 1; }
}

/* 4. The pages behind the homepage (Decision MI-031). Each opens with what it is: one sentence at
   scale and one paragraph. Then its matter, in the homepage's own rhythm of a rule, a label and
   the matter, the label standing at the left where there is room and staying in view while its
   matter is read. On these pages the bar is in the state the homepage's bar lands in: white, the
   lockup black on it. */
.logo img { height: var(--tap); width: auto; display: block; }
.doc .head { display: grid; gap: var(--s-3); padding-block: var(--s-5); }
.doc h1 { font-size: var(--t-h1); font-weight: 700; line-height: 0.98; letter-spacing: -0.04em; max-width: 13em; text-wrap: balance; }
.doc h1 .stop { color: var(--accent); }
.lead { font-size: var(--t-lead); line-height: 1.4; color: var(--quiet); max-width: var(--measure); }
.matter { display: grid; gap: var(--s-2); max-width: var(--measure); min-width: 0; }
.matter h3 { font-size: var(--t-lead); font-weight: 700; line-height: 1.25; }
.matter * + h3 { margin-top: var(--s-3); }
.matter h3 + p { margin-top: calc(var(--s-1) * -1); }
.matter p, .matter li { color: var(--quiet); }
.matter ul { list-style: disc; padding-left: 1.2em; display: grid; gap: var(--s-1); }
.matter a, .lead a, .sectors p a { color: var(--type); text-underline-offset: 0.2em; }
.matter .big { font-size: var(--t-sector); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; color: var(--type); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-1) var(--s-3); margin: 0; max-width: var(--measure); }
.facts dt { font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--quiet); padding-top: 0.35em; }
.facts dd { overflow-wrap: anywhere; }
.mail { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--t-mail); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; text-decoration: none; overflow-wrap: anywhere; }
/* A way on to another page: glass, like the price box, and turned over under the pointer, like the menu. */
.acts { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.btn { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--s-2); border: var(--hairline) solid color-mix(in srgb, var(--type) var(--glass-edge), transparent); border-radius: var(--corner); background: color-mix(in srgb, var(--type) var(--glass-fill), transparent); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--type); color: var(--ground); } .mail:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.16em; } }
.btn:active { background: var(--type); color: var(--ground); }
.btn.go { background: var(--type); color: var(--ground); border-color: var(--type); }
@media (hover: hover) and (pointer: fine) { .btn.go:hover { background: transparent; color: var(--type); } }
.btn.go:active { background: transparent; color: var(--type); }
@media (min-width: 701px) {
  .doc section, section.two { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-3) var(--s-4); }
  .doc section > .label { position: sticky; top: calc(var(--rail-h) + var(--s-3)); align-self: start; }
  .doc section.wide { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .doc section.wide > .label { position: static; }
}
@media (max-width: 520px) { .facts { grid-template-columns: minmax(0, 1fr); gap: 0; } .facts dd { margin-bottom: var(--s-1); } }

/* 5. The foot of every page. It names the company that publishes the page (its registration number
   stands on /legal/ alone since MI-038), and it is the way to every other page: the company's own,
   the staff sign-in under them, the terms, the privacy notice and the picture credits, and where to write. The logo stands
   first, the straight lockup with its red line (MI-020). Redrawn 2026-10-04 (MI-031): what it
   said before, set in columns under the logo and closed with a line of its own. */
footer { border-top: var(--hairline) solid var(--rule); padding-block: calc(var(--s-5) * 0.6) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 2fr)) minmax(0, 3fr); gap: var(--s-4); font-size: var(--t-foot); }
footer .foot-brand { display: grid; gap: var(--s-2); align-content: start; color: var(--quiet); }
footer .foot-logo { display: flex; min-height: var(--tap); }
footer .foot-logo img { height: var(--foot-logo); width: auto; display: block; }
footer nav, footer .foot-contact { display: grid; align-content: start; justify-items: start; }
footer .label { margin-bottom: var(--s-1); }
footer a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; overflow-wrap: anywhere; }
footer .foot-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--s-3); border-top: var(--hairline) solid var(--rule); padding-top: var(--s-2); color: var(--quiet); font-size: var(--t-label); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { footer a { min-height: 36px; } footer a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: var(--border); text-underline-offset: 0.3em; } }
@media (max-width: 900px) { footer { grid-template-columns: repeat(3, minmax(0, 1fr)); } footer .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { footer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } footer .foot-contact { grid-column: 1 / -1; } }

/* Motion. On arrival the strips of the mark rise, left to right, and become the letter, while its red
   line, the I, comes down into its place among them; then the
   tagline settles, line by line. On scroll the mark and the tagline travel to the bar (script,
   below). Below the hero each part is revealed once, as it is reached. The menu grows from its
   button and the bars become a cross while it is open. The resting state is always the finished
   page: every animation runs from a hidden state, and nothing waits on script unless script has
   said it is running (html.js). */
@keyframes rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fall { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { opacity: 0; transform: translateY(var(--lift)); } }
@keyframes appear { from { opacity: 0; } }

.menu-btn:active { transform: scale(var(--press-scale)); }
.rail:has(#menu:popover-open) .menu-btn span:nth-child(1) { transform: translateY(var(--bar-shift)) rotate(45deg); }
.rail:has(#menu:popover-open) .menu-btn span:nth-child(2) { opacity: 0; }
.rail:has(#menu:popover-open) .menu-btn span:nth-child(3) { transform: translateY(calc(var(--bar-shift) * -1)) rotate(-45deg); }
.rail:has(#menu:popover-open) .menu-btn span { background: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .mark path { animation: rise var(--rise) var(--ease-out) backwards; animation-delay: calc(var(--i) * var(--stagger)); }
  /* The m goes up; the I comes down to meet it, as the tagline settles. */
  .mark-red path { animation-name: fall; animation-delay: calc(var(--stagger) * 10); }
  .tag .line { animation: settle var(--words) var(--ease-out) backwards; animation-delay: calc(var(--stagger) * 10); }
  .sectors img { transition: transform var(--unveil) var(--ease-out), filter var(--enter) ease; }
  .js [data-reveal] figure { clip-path: inset(0 100% 0 0); transition: clip-path var(--unveil) var(--ease-in-out); }
  .js [data-reveal] img { transform: scale(var(--zoom)); }
  .js [data-reveal][data-visible] figure { clip-path: inset(0 0 0 0); }
  .js [data-reveal][data-visible] img { transform: none; }
  @media (min-width: 701px) { .js [data-reveal]:nth-child(even):not([data-visible]) figure { clip-path: inset(0 0 0 100%); } }

  .js [data-reveal] h3 { clip-path: inset(100% 0 -0.2em 0); transition: clip-path var(--reveal) var(--ease-in-out); }
  .js [data-reveal] p { opacity: 0; transform: translateY(var(--lift)); transition: opacity var(--enter) var(--ease-out), transform var(--enter) var(--ease-out); transition-delay: calc(var(--n, 0) * var(--stagger-list)); }
  .js [data-reveal][data-visible] h3 { clip-path: inset(-0.2em 0 -0.2em 0); }
  .js [data-reveal][data-visible] p { opacity: 1; transform: none; }

  .menu-btn { transition: transform var(--press) var(--ease-out), background-color var(--quick) ease; }
  .menu-btn span { transition: transform var(--morph) var(--ease-in-out), opacity var(--morph) var(--ease-in-out), background-color var(--morph) var(--ease-in-out); }
  #menu a, .btn { transition: background-color var(--quick) ease, color var(--quick) ease; }
  @supports selector(:popover-open) {
    #menu { opacity: 0; transform: scale(var(--from-scale)); transform-origin: top right; transition: opacity var(--menu-out) var(--ease-out), transform var(--menu-out) var(--ease-out), overlay var(--menu-out) allow-discrete, display var(--menu-out) allow-discrete; }
    #menu:popover-open { opacity: 1; transform: none; transition-duration: var(--menu-in); }
    @starting-style { #menu:popover-open { opacity: 0; transform: scale(var(--from-scale)); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mark, .tag { animation: appear var(--menu-in) ease backwards; }
}

@media (max-width: 700px) {
  .sectors li { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .sectors figure, .sectors h3, .sectors p { grid-column: 1; grid-row: auto; }
  .sectors h3 { padding-top: var(--s-1); align-self: auto; }
}