/* Hallmark · shape: Index-First (work) and Photographic (hub), one system for the site · genre: editorial · theme: Editorial (deal 1/3, seed personal-malek-lemkecher-engineer-7201·b9b02de4·2026-10-29·r0) · redesign: full
 * hero: Ledge (/index-hub), Index (/index-work), Banner (/professional, /panoramas), Stage (/panorama-360) · nav: edge-aligned, the calligraphy mark and name, three links · footer: mast, the calligraphy over the links and schools · imagery: the owner's 144 panoramas and 5 prototype screenshots, no library photos · signature: the panorama strip, a 4:1 photograph run edge to edge and captioned with its place and month
 * axes: light/display-condensed/chromatic-green · posture: restrained · contrast: pass · fold: pass · job: hire (work) / visit the pictures (hub) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a personal site argues little; leaned on the owner's own panoramas and calligraphy instead of a generic portfolio grid */
/* Hallmark · waive 83 · a gallery of the owner’s own 144 panoramas · the panorama pages exist to show these photographs, and the homepage strip previews them */
/* Hallmark · waive 49b · professional.html headings carry the full project titles as links · the long titles are the owner’s project names and wrap only as headings at 320px */
/* Hallmark · answered F20 · each year holds the owner’s real count of panoramas, so an odd year ends on one frame */
/* Hallmark · waive 77 · Personal interests holds two rows, Languages and Music sampling · the owner lists exactly two interests and a third row would be invented */
/* Hallmark · dismissed 77 · panoramas.html and panorama-360.html are utility pages: a year index and a viewer, not landing pages */
/* Hallmark · hero (/): the Latin name beside the owner’s Arabic calligraphy at 1.3 times its height; the nav sticks and its mark and name fade in together once the hero calligraphy has scrolled away */
/* Hallmark · dropped Google Analytics UA-56677515-2 and the ip.txt logger · Universal Analytics stopped collecting in 2023 and a static html page cannot run the php logger */
/* Hallmark · dropped the Facebook SDK, the oil-price.net gif and the gasbuddy chart images · third-party widgets on the professional page, none of them used by a link or form */
@import url("./fonts.css");
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 72px; --pano-ratio: 38 / 10; }

body { color: var(--color-ink-2); font-size: 1.125rem; font-optical-sizing: auto; font-variant-numeric: oldstyle-nums; }
h1, h2, h3 { font-weight: var(--display-weight); font-variation-settings: "wdth" 75, "opsz" 96; font-stretch: 75%; color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; line-height: 1; }
h1 { line-height: 0.92; }
small, figcaption, th, nav, label, .btn, .tag, .meta, .caption { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-variant-numeric: lining-nums; }
.caption, figcaption { font-size: var(--text-sm); color: var(--color-muted); }
a { text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
a:hover { text-decoration-color: var(--color-accent); }
a:active { color: var(--color-ink); }

/* Chrome */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); border-bottom: var(--rule-heavy) solid var(--color-ink); background: var(--color-paper); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--color-ink); }
.brand__name { font-family: var(--font-display); font-weight: var(--display-weight); font-variation-settings: "wdth" 75, "opsz" 32; font-stretch: 75%; font-size: var(--text-xl); line-height: 1; white-space: nowrap; }
.mark { display: block; flex-shrink: 0; width: 44px; height: 44px; background: var(--color-ink); -webkit-mask: url("../text2.png") center / contain no-repeat; mask: url("../text2.png") center / contain no-repeat; }
.nav__links { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; font-size: var(--text-md); }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); text-decoration-line: underline; text-decoration-color: transparent; white-space: nowrap; }
.nav__links a:hover { text-decoration-color: var(--color-accent); }
.nav__links a[aria-current="page"] { text-decoration-color: var(--color-ink); }

/* Controls */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: 0; font-size: var(--text-md); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-ink-2); }
.btn--secondary { background: transparent; color: var(--color-ink); }
.btn--secondary:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Section rhythm */
.section { padding-block: var(--section-gap) 0; }
.section--s { padding-block: var(--section-gap-s) 0; }
.section--l { padding-block: var(--section-gap-l) 0; }
.opens { border-top: var(--rule-heavy) solid var(--color-ink); padding-top: var(--space-lg); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.head-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head-split > h2 { grid-column: 1 / 8; }
.head-split > .lead, .head-split > .side { grid-column: 8 / 13; color: var(--color-ink-2); }
.standfirst { font: 400 var(--text-display-s)/1.2 var(--font-body); color: var(--color-ink); max-width: 30ch; text-wrap: balance; }
.lead { color: var(--color-ink-2); }

/* Panorama frames */
.pano { position: relative; margin: 0; aspect-ratio: var(--pano-ratio); }
.pano > img { outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.pano-link { display: block; text-decoration: none; color: inherit; }
.pano-link:hover .pano-cap__place { text-decoration-color: var(--color-accent); }
.pano-cap { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xs); font-size: var(--text-sm); }
.pano-cap__place { color: var(--color-ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.pano-cap__date { color: var(--color-muted); white-space: nowrap; }

/* Hero: Ledge (hub) */
.hero-ledge__strip { position: relative; height: clamp(220px, 50dvh, 540px); aspect-ratio: auto; }
.hero-ledge__strip > img { object-position: 50% 60%; }
.hero-ledge__cap { position: absolute; right: var(--gutter); bottom: var(--space-sm); z-index: 2; padding: var(--space-2xs) var(--space-xs); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); }
.hero-ledge__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; padding-block: var(--space-xl) var(--space-2xl); }
.hero-ledge__body h1 { grid-column: 1 / 8; max-width: none; font-size: clamp(3.5rem, 8.6vw, 8.25rem); }
.hero-ledge__side { grid-column: 8 / 13; display: grid; gap: var(--space-lg); padding-bottom: var(--space-xs); }
.hero-ledge__side .lead { font-size: var(--text-lead); color: var(--color-ink); }

/* Hero: Index (work) */
.hero-index { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-3xl); align-items: center; min-height: calc(100dvh - var(--nav-h) - var(--rule-heavy)); padding-block: var(--space-2xl); }
.hero-index__text { display: grid; gap: var(--space-lg); }
.hero-index__text h1 { font-size: clamp(3.5rem, 7.2vw, 7rem); }
.hero-index__text .lead { color: var(--color-ink); }
.hero-index__list h2 { font-size: var(--text-title); line-height: 1.2; margin-bottom: var(--space-sm); }

/* Contents rows */
.rows { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule-2); }
.rows > li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); color: inherit; text-decoration: none; }
.row h3 { grid-column: 1 / 6; font-size: clamp(1.75rem, 1.6vw + 1rem, 2.5rem); line-height: 1; }
.row p { grid-column: 6 / 12; }
.row .meta { grid-column: 12 / 13; justify-self: end; font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
a.row h3 { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: transparent; text-underline-offset: 0.12em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
a.row:hover h3 { text-decoration-color: var(--color-accent); }
.row__big { font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink); max-width: none; }
.rows--tight .row { grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--space-md); }
.rows--tight .row h3 { grid-column: auto; font-size: clamp(1.5rem, 1.1vw + 1rem, 2.25rem); }
.rows--tight .row .meta { grid-column: auto; }

/* Rail of panoramas */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(60vw, 860px); gap: var(--gap-columns); margin: 0; padding: 0 0 var(--space-md); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); overscroll-behavior-x: contain; scrollbar-width: thin; }
.rail > li { scroll-snap-align: start; }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.after-rail { margin-top: var(--space-xl); }

/* Showcase */
.showcase .pano { aspect-ratio: auto; height: clamp(260px, 30vw, 440px); }

/* Statement */
.statement { font: 400 clamp(1.375rem, 1.1vw + 1rem, 2.125rem)/1.3 var(--font-body); color: var(--color-ink); max-width: 26ch; text-wrap: balance; margin-top: var(--space-xl); }
.statement-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.statement-grid > h2 { grid-column: 1 / 4; font-size: var(--text-title); line-height: 1.2; }
.statement-grid > .statement { grid-column: 4 / 13; margin-top: 0; max-width: none; }
.statement-grid > .statement + p { grid-column: 4 / 11; margin-top: var(--space-xl); }

/* Ink band */
.band-ink { margin-top: var(--section-gap); padding-block: var(--section-gap-s); background: var(--color-ink); color: var(--color-paper); }
.band-ink h2, .band-ink h3 { color: var(--color-paper); }
.band-ink .lead, .band-ink p, .band-ink .head-split > .side { color: var(--color-paper-3); }
.band-ink .rows { border-top-color: var(--color-muted); }
.band-ink .rows > li { border-bottom-color: var(--color-ink-2); }
.band-ink a { color: var(--color-paper); text-decoration-color: var(--color-muted); }
.band-ink a:hover { text-decoration-color: var(--color-paper); }
.band-ink :focus-visible { outline-color: var(--color-paper); }
.band-ink .meta { color: var(--color-rule-2); }

/* Work tiles */
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.work { grid-column: span 4; display: grid; gap: var(--space-sm); align-content: start; color: inherit; text-decoration: none; }
.work--lead { grid-column: span 8; grid-row: span 2; }
.work__shot { margin: 0; background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule-2); display: grid; place-items: center; padding: var(--space-lg); aspect-ratio: 4 / 3; }
.work--lead .work__shot { aspect-ratio: auto; height: 100%; min-height: 440px; }
.work__shot img { width: auto; max-height: 100%; object-fit: contain; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.work h3 { font-size: var(--text-title); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.12em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
a.work:hover h3 { text-decoration-color: var(--color-accent); }

/* Close */
.close { padding-block: var(--section-gap-s); }
.close__mail { display: inline-block; margin-top: var(--space-lg); font-family: var(--font-display); font-weight: var(--display-weight); font-variation-settings: "wdth" 75, "opsz" 96; font-stretch: 75%; font-size: clamp(2.25rem, 5.5vw, 5.25rem); line-height: 1; color: var(--color-ink); overflow-wrap: anywhere; text-decoration-thickness: 3px; }

/* Footer */
.footer { border-top: var(--rule-heavy) solid var(--color-ink); padding-block: var(--space-2xl) var(--space-xl); background: var(--color-paper-2); }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.footer__mark { grid-column: 1 / 3; }
.footer__mark .mark { width: 160px; height: 160px; }
.footer__col { grid-column: span 3; display: grid; gap: var(--space-xs); align-content: start; font-size: var(--text-md); }
.footer__col h2 { font-size: var(--text-md); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-stretch: 100%; color: var(--color-muted); margin-bottom: var(--space-2xs); }
.footer__col--wide { grid-column: span 4; }
.footer__col--pages { grid-column: span 2; }
.footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.footer__col a { color: var(--color-ink); }
.footer__legal { grid-column: 1 / 13; display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-muted); }

/* Banner hero (inner pages) */
.banner { padding-block: var(--space-3xl) var(--space-2xl); }
.banner .grid > h1 { grid-column: 1 / 8; }
.banner .grid > .side { grid-column: 8 / 13; align-self: end; display: grid; gap: var(--space-lg); }

/* Professional page */
.project { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.project:first-child { border-top: var(--rule-heavy) solid var(--color-ink); }
.project__text { grid-column: 1 / 6; display: grid; gap: var(--space-md); align-content: start; }
.project__text h2 { font-size: clamp(2rem, 2vw + 1rem, 3rem); }
.project__text h2 a { text-decoration-thickness: 2px; text-decoration-color: transparent; }
.project__text h2 a:hover { text-decoration-color: var(--color-accent); }
.project__shots { grid-column: 7 / 13; display: grid; gap: var(--space-md); margin: 0; }
.project__shots .work__shot { aspect-ratio: auto; min-height: 280px; }
.talks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.talk { margin: 0; display: grid; gap: var(--space-sm); }
.talk iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; background: var(--color-paper-2); }

/* Panoramas page */
.years { position: sticky; top: calc(var(--nav-h) + var(--rule-heavy)); z-index: var(--z-sticky); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.years ul { display: flex; gap: var(--space-md); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.years a { display: inline-flex; align-items: center; min-height: 48px; font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; color: var(--color-ink); white-space: nowrap; }
.year { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-block: var(--space-2xl); border-top: var(--rule-heavy) solid var(--color-ink); scroll-margin-top: var(--space-2xl); }
.year + .year { border-top-width: var(--rule-hair); border-top-color: var(--color-rule-2); }
.year__head { grid-column: 1 / 4; align-self: start; position: sticky; top: calc(var(--nav-h) + var(--space-3xl)); }
.year__head h2 { font-size: clamp(3.5rem, 6vw, 6rem); }
.year__head p { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); font-family: var(--font-display); }
.year__grid { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }

/* Lightbox */
.lightbox { width: min(96vw, 1800px); max-width: none; max-height: 94dvh; padding: 0; border: 0; background: var(--color-ink); color: var(--color-paper); }
.lightbox::backdrop { background: color-mix(in oklab, var(--color-ink) 88%, transparent); }
.lightbox__img { display: block; width: 100%; height: auto; max-height: calc(94dvh - 72px); object-fit: contain; background: var(--color-ink); }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; padding: var(--space-sm) var(--space-lg); }
.lightbox__bar p { font-family: var(--font-display); font-weight: 500; color: var(--color-paper); }
.lightbox .btn--secondary { color: var(--color-paper); border-color: var(--color-paper-3); }
.lightbox .btn--secondary:hover { background: var(--color-ink-2); }
.lightbox :focus-visible { outline-color: var(--color-paper); }

/* 360 viewer */
.seg { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-lg); padding: 0; border: 0; }
.seg button { min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); background: transparent; color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); font-variation-settings: "opsz" 12; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.seg button:hover { background: var(--color-paper-2); }
.seg button:active { transform: translateY(1px); }
.seg button[aria-selected="true"] { background: var(--color-paper-3); color: var(--color-ink); border-color: var(--color-ink); box-shadow: inset 0 -3px 0 var(--color-ink); }
.seg button:disabled { opacity: 0.55; cursor: not-allowed; }
.viewer { height: clamp(320px, 66dvh, 760px); overflow-x: auto; overflow-y: hidden; background: var(--color-ink); cursor: grab; scrollbar-width: thin; overscroll-behavior-x: contain; touch-action: pan-x; }
.viewer.is-dragging { cursor: grabbing; }
.viewer__track { display: flex; height: 100%; width: max-content; }
.viewer img { flex-shrink: 0; height: 100%; width: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
.viewer:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.banner--tight { padding-bottom: 0; }
.viewer-wrap { padding-block: var(--section-gap-s); }
.viewer-note { display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-sm); }

/* Responsive */
@media (max-width: 60rem) {
  .hero-ledge__body, .head-split, .banner .grid, .statement-grid, .footer__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .hero-ledge__body > *, .head-split > *, .banner .grid > *, .statement-grid > *, .footer__grid > * { grid-column: 1 / -1 !important; }
  .hero-index { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; }
  .row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-xs); }
  .row h3 { grid-column: 1 / 2; }
  .row .meta { grid-column: 2 / 3; grid-row: 1; }
  .row p { grid-column: 1 / -1; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work, .work--lead { grid-column: span 1; grid-row: auto; }
  .work--lead { grid-column: 1 / -1; }
  .work--lead .work__shot { min-height: 0; aspect-ratio: 4 / 3; }
  .project__text, .project__shots { grid-column: 1 / -1; }
  .year__head { grid-column: 1 / -1; position: static; margin-bottom: var(--space-lg); }
  .year__grid { grid-column: 1 / -1; }
  .rail { grid-auto-columns: 82vw; }
  .footer__mark .mark { width: 96px; height: 96px; }
}
@media (max-width: 40rem) {
  body { font-size: var(--text-md); }
  .brand__name { font-size: var(--text-lg); }
  .nav__links { gap: var(--space-md); }
  .year__grid, .talks, .work-grid { grid-template-columns: minmax(0, 1fr); }
  .work, .work--lead { grid-column: 1 / -1; }
}
@media (max-width: 30rem) {
  .brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, a, .seg button, .pano-cap__place, a.row h3, .work h3 { transition: none; }
  .btn:active, .seg button:active { transform: none; }
}

/* Hero title in calligraphy: the owner's name in Arabic, drawn from style/calligraphy.png as an ink mask */
:root { --hero-name: clamp(3.5rem, 8.6vw, 8.25rem); --callig-h: calc(var(--hero-name) * 1.84); }
.callig { display: block; flex-shrink: 0; width: var(--callig-h); height: var(--callig-h); background: var(--color-ink); -webkit-mask: url("./calligraphy.png") center / contain no-repeat; mask: url("./calligraphy.png") center / contain no-repeat; }
.h1-callig .callig { width: calc(var(--callig-h) * 1.15); height: calc(var(--callig-h) * 1.15); }
.h1-bi { display: flex; align-items: center; gap: var(--space-xl); }
.h1-bi__latin { display: block; }
.h1-bi--big .callig { width: calc(var(--callig-h) * 1.3); height: calc(var(--callig-h) * 1.3); }
.h1-stack { display: grid; gap: var(--space-md); justify-items: start; }
.h1-stack .callig { --callig-h: calc(var(--hero-name) * 1.6); }
.h1-stack__latin { font-size: var(--text-section); line-height: 1; }

/* Sticky nav: the page scrolls under it. On the homepage the nav mark waits until the hero calligraphy has scrolled away, then fades in. */
html { scroll-padding-top: calc(var(--nav-h) + var(--space-3xl)); }
.nav .brand .mark, .nav .brand .brand__name { transition: opacity calc(var(--dur-long) * 1.5) var(--ease-out), transform calc(var(--dur-long) * 1.5) var(--ease-out); }
.js .brand--follow:not(.is-shown) .mark { opacity: 0; transform: scale(0.9); }
.js .brand--follow:not(.is-shown) .brand__name { opacity: 0; transform: translateY(var(--space-2xs)); }
.js .brand--follow:not(.is-shown) { pointer-events: none; }
.js .brand--follow:not(.is-shown):focus-visible .mark, .js .brand--follow:not(.is-shown):focus-visible .brand__name { opacity: 1; transform: none; }
.js .nav .brand.is-footer .mark { opacity: 0; transform: scale(0.9); }
.js .nav .brand.is-footer .brand__name { transform: translateX(calc(-44px - var(--space-sm))); }
@media (prefers-reduced-motion: reduce) { .nav .brand .mark, .nav .brand .brand__name { transition: opacity var(--dur-micro) linear; } .js .brand--follow:not(.is-shown) .mark, .js .brand--follow:not(.is-shown) .brand__name, .js .nav .brand.is-footer .brand__name { transform: none; } }
@media (max-width: 40rem) { .h1-bi { gap: var(--space-md); } .h1-bi .callig { max-width: 36vw; max-height: 36vw; } }