/* ─────────────────────────────────────────────────────────────
   Eray Mercan — site component layer.

   The design system ships its primitives as React (`components/**`). This file
   is the same set expressed as plain CSS classes so the static PHP/HTML site can
   use them. Every value comes from a token; no raw hex outside tokens/colors.css.
   ───────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg-void);
  color:var(--text-body);
  font:var(--type-ui);
  font-size:var(--fs-md);
  -webkit-font-smoothing:antialiased;
}

main{flex:1 0 auto}

h1,h2,h3,h4,h5{margin:0;color:var(--text-primary);letter-spacing:var(--ls-heading)}
p{margin:0}
sup{font-size:.66em;line-height:0}

a{color:var(--text-accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--r-sm)}

::selection{background:var(--accent-wash);color:var(--text-primary)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-void)}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ── Layout ────────────────────────────────────────────────── */
.em-container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--sp-6)}
.em-container--narrow{max-width:var(--container-narrow)}
.em-stack{display:flex;flex-direction:column;gap:var(--sp-6)}
.em-stack--lg{gap:var(--sp-9)}
.em-page{padding-block:var(--sp-9) var(--sp-11)}
.em-prose{font:var(--type-body);color:var(--text-body);max-width:var(--measure-prose)}
.em-prose-sm{font:var(--type-body-sm);color:var(--text-body)}

/* Asymmetric grids — 4/8 and 5/7, never centred equal columns. */
.em-split{display:grid;grid-template-columns:1fr 2fr;gap:var(--sp-6);align-items:start}
.em-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.em-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}

/* ── Mono micro-label ──────────────────────────────────────── */
.em-meta{
  font-family:var(--font-mono);
  font-size:var(--fs-2xs);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-meta);
  text-transform:uppercase;
  color:var(--text-muted);
}
.em-data{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);color:var(--text-body)}

/* ── Graticule ─────────────────────────────────────────────── */
.em-graticule{position:relative;overflow:hidden;background:var(--bg-void)}
.em-graticule::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--graticule-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--graticule-line) 1px,transparent 1px),
    linear-gradient(var(--graticule-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--graticule-major) 1px,transparent 1px);
  background-size:
    var(--graticule-size) var(--graticule-size),
    var(--graticule-size) var(--graticule-size),
    calc(var(--graticule-size) * 4) calc(var(--graticule-size) * 4),
    calc(var(--graticule-size) * 4) calc(var(--graticule-size) * 4);
}
/* Protection gradient — the only decorative gradient the system allows. */
.em-graticule--fade::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--bg-void),transparent 22%,transparent 78%,var(--bg-void));
}
.em-graticule > *{position:relative}

/* The one expressive animation: an amber trace drawn left to right, once. */
.em-sweep{
  position:absolute;top:0;bottom:0;width:120px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent-wash));
  border-right:var(--bw-hair) solid var(--accent);
  animation:em-sweep var(--dur-sweep) var(--ease-signal) forwards;
}
@keyframes em-sweep{from{left:-120px;opacity:1}to{left:100%;opacity:0}}

/* Entrance: a 4px rise plus fade. Nothing scales, nothing bounces. */
.em-enter{animation:em-rise var(--dur-base) var(--ease-signal) both}
@keyframes em-rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── NavBar ────────────────────────────────────────────────── */
.em-nav{
  position:sticky;top:0;z-index:20;
  height:56px;display:flex;align-items:center;gap:var(--sp-6);
  padding:0 var(--sp-6);
  background:color-mix(in oklab,var(--surface-base) 80%,transparent);
  -webkit-backdrop-filter:var(--blur-veil);
  backdrop-filter:var(--blur-veil);
  border-bottom:var(--bw-hair) solid var(--border-hairline);
}
.em-nav__brand{
  flex:none;display:flex;align-items:center;text-decoration:none;
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-lg);
  letter-spacing:.01em;color:var(--text-primary);
}
.em-nav__brand:hover{text-decoration:none}
.em-nav__links{display:flex;align-items:center;gap:var(--sp-1);margin-left:auto}
.em-nav__link{
  display:inline-flex;align-items:center;height:30px;padding:0 10px;
  font:var(--type-ui);color:var(--text-muted);
  background:transparent;border:var(--bw-hair) solid transparent;border-radius:var(--r-md);
  text-decoration:none;transition:var(--transition-control);cursor:pointer;
}
.em-nav__link:hover{color:var(--text-primary);background:var(--surface-hover);text-decoration:none}
.em-nav__link.is-active{color:var(--text-primary);background:var(--accent-wash);border-color:var(--border-accent)}
.em-nav__right{
  display:flex;align-items:center;gap:var(--sp-2);
  padding-left:var(--sp-4);border-left:var(--bw-hair) solid var(--border-hairline);height:24px;
}
.em-nav__toggle{display:none}
.em-nav__menu{display:none}

/* ── Button ────────────────────────────────────────────────── */
.em-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--control-h-md);padding:0 14px;
  font-family:var(--font-ui);font-weight:var(--fw-medium);font-size:var(--fs-sm);
  letter-spacing:var(--ls-normal);white-space:nowrap;
  background:var(--accent);color:var(--text-inverse);
  border:var(--bw-hair) solid transparent;border-radius:var(--r-md);
  text-decoration:none;cursor:pointer;
  transition:var(--transition-control),transform var(--dur-instant) var(--ease-signal);
}
.em-btn:hover{background:var(--accent-hover);text-decoration:none}
.em-btn:active{background:var(--accent-press);transform:translateY(1px)}
.em-btn[disabled],.em-btn.is-disabled{opacity:.4;cursor:not-allowed}

.em-btn--secondary{background:var(--surface-panel);color:var(--text-primary);border-color:var(--border-default)}
.em-btn--secondary:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.em-btn--secondary:active{background:var(--surface-hover)}

.em-btn--ghost{background:transparent;color:var(--text-body)}
.em-btn--ghost:hover{background:var(--accent-wash);color:var(--text-accent)}
.em-btn--ghost:active{background:var(--accent-wash)}

.em-btn--emphasis{background:var(--accent-2);color:var(--paper-100)}
.em-btn--emphasis:hover{background:var(--accent-2-hover)}
.em-btn--emphasis:active{background:var(--accent-2-press)}

.em-btn--danger{background:transparent;color:var(--state-fault);border-color:var(--state-fault)}
.em-btn--danger:hover{background:var(--state-fault-wash)}

.em-btn--sm{height:var(--control-h-sm);padding:0 10px;font-size:var(--fs-xs);gap:6px}
.em-btn--lg{height:var(--control-h-lg);padding:0 20px;font-size:var(--fs-md);gap:10px}
.em-btn svg{width:16px;height:16px;flex:none}
.em-btn--lg svg{width:18px;height:18px}

/* IconButton */
.em-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--control-h-md);height:var(--control-h-md);padding:0;
  background:transparent;color:var(--text-muted);
  border:var(--bw-hair) solid transparent;border-radius:var(--r-md);
  cursor:pointer;transition:var(--transition-control);
}
.em-icon-btn:hover{background:var(--surface-hover);color:var(--text-primary);border-color:var(--border-strong)}
.em-icon-btn svg{width:18px;height:18px}

/* ── Panel ─────────────────────────────────────────────────── */
.em-panel{
  background:var(--surface-panel);
  border:var(--bw-hair) solid var(--border-hairline);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lip);
  overflow:hidden;
}
.em-panel--inset{background:var(--surface-inset)}
.em-panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:12px var(--sp-6);
  border-bottom:var(--bw-hair) solid var(--border-hairline);
}
.em-panel__titles{display:flex;align-items:baseline;gap:var(--sp-3);min-width:0}
.em-panel__title{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:var(--fw-medium);
  letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--text-body);
}
.em-panel__meta{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);color:var(--text-faint)}
.em-panel__actions{display:flex;align-items:center;gap:var(--sp-2);flex:none}
.em-panel__body{padding:var(--sp-6)}
.em-panel--dense .em-panel__head{padding:10px var(--sp-4)}
.em-panel--dense .em-panel__body{padding:var(--sp-4)}

/* ── Tag / Badge ───────────────────────────────────────────── */
.em-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:var(--r-pill);
  background:var(--surface-inset);border:var(--bw-hair) solid var(--border-default);
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);
  color:var(--text-body);
}
.em-badge{
  display:inline-flex;align-items:center;
  padding:3px 8px;border-radius:var(--r-sm);
  background:var(--surface-inset);border:var(--bw-hair) solid var(--border-default);
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap;
}
.em-badge--accent{background:var(--accent-wash);border-color:var(--border-accent);color:var(--text-accent)}
.em-badge--award{
  background:var(--state-warn-wash);border-color:var(--state-warn);color:var(--state-warn-text);
  gap:8px;padding:4px 10px;
}
.em-badge--award svg{width:14px;height:14px}

/* ── StatusDot — shape-coded, never colour alone ───────────── */
.em-status{display:inline-flex;align-items:center;gap:8px}
.em-status__dot{width:6px;height:6px;flex:none;border-radius:var(--r-pill);background:var(--text-faint)}
.em-status__label{
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-muted);
}
.em-status--nominal .em-status__dot{background:var(--state-nominal)}
.em-status--nominal .em-status__label{color:var(--state-nominal-text)}
.em-status--live .em-status__dot{background:var(--accent-emit);box-shadow:0 0 0 3px var(--accent-wash)}
.em-status--live .em-status__label{color:var(--text-accent)}
.em-status--warn .em-status__dot{background:var(--state-warn);border-radius:var(--r-hair)}
.em-status--warn .em-status__label{color:var(--state-warn-text)}
.em-status--fault .em-status__dot{background:var(--state-fault);border-radius:var(--r-hair);transform:rotate(45deg)}
.em-status--fault .em-status__label{color:var(--state-fault-text)}
.em-status--idle .em-status__dot{background:transparent;border:var(--bw-hair) solid var(--text-faint)}

/* ── SectionHeader ─────────────────────────────────────────── */
.em-section{display:flex;flex-direction:column;gap:var(--sp-4)}
.em-section__top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap}
.em-section__eyebrow{display:flex;align-items:center;gap:var(--sp-3)}
.em-section__index{
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-meta);
  color:var(--text-faint);
}
.em-section__title{font:var(--type-h1);font-size:clamp(28px,4vw,var(--fs-4xl));letter-spacing:var(--ls-display)}
.em-section__intro{font:var(--type-body-sm);color:var(--text-muted);max-width:var(--measure-prose)}
.em-section__rule{height:1px;background:var(--border-hairline)}

/* ── Hero ──────────────────────────────────────────────────── */
.em-hero{border-bottom:var(--bw-hair) solid var(--border-hairline)}
.em-hero__inner{max-width:var(--container-max);margin:0 auto;padding:var(--sp-10) var(--sp-6)}
.em-hero__title{
  font:var(--type-h1);font-size:clamp(34px,5vw,62px);letter-spacing:var(--ls-display);
  max-width:24ch;width:min(100%,66%);text-wrap:pretty;
}
.em-hero__intro{margin-top:var(--sp-6);font:var(--type-body);color:var(--text-body);max-width:72ch;width:min(100%,62%)}
.em-hero__actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-7);flex-wrap:wrap}

/* ── Tile (expertise) ──────────────────────────────────────── */
.em-tile{
  display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);
  background:var(--surface-panel);border:var(--bw-hair) solid var(--border-hairline);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lip);
  transition:var(--transition-control);
}
.em-tile svg{width:20px;height:20px;color:var(--accent-emit)}
.em-tile__label{font:var(--type-ui);font-size:var(--fs-md);color:var(--text-primary)}

/* ── Tabs (work filters) ───────────────────────────────────── */
.em-tabs{display:flex;gap:var(--sp-6);border-bottom:var(--bw-hair) solid var(--border-hairline);flex-wrap:wrap}
.em-tabs__tab{
  all:unset;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  padding:0 0 10px;margin-bottom:-1px;
  border-bottom:2px solid transparent;
  font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--text-muted);transition:var(--transition-control);
}
.em-tabs__tab:hover{color:var(--text-primary)}
.em-tabs__tab[aria-selected="true"]{color:var(--text-primary);border-bottom-color:var(--accent)}
.em-tabs__count{font-family:var(--font-mono);font-size:var(--fs-3xs);color:var(--text-faint)}

/* ── Project card (work grid) ──────────────────────────────── */
.em-card{
  display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-6);
  background:var(--surface-panel);border:var(--bw-hair) solid var(--border-hairline);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lip);
  text-decoration:none;color:inherit;transition:var(--transition-control);
}
a.em-card:hover{background:var(--surface-hover);border-color:var(--border-strong);text-decoration:none}
a.em-card:hover .em-card__site{text-decoration:underline;text-underline-offset:3px}
.em-card[hidden]{display:none}
.em-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.em-card__eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-meta);
  text-transform:uppercase;color:var(--text-muted);
}
.em-card__title{
  margin:0;font:var(--type-h3);letter-spacing:var(--ls-heading);
  color:var(--text-primary);transition:var(--transition-control);
}
a.em-card:hover .em-card__title{color:var(--text-accent)}
.em-card__desc{margin:var(--sp-2) 0 0;font:var(--type-body-sm);color:var(--text-body)}
.em-card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-top:auto;padding-top:var(--sp-3);border-top:var(--bw-hair) solid var(--border-hairline);
}
.em-card__site{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);
  color:var(--text-accent);transition:var(--transition-control);
}
a.em-card:hover .em-card__site{color:var(--accent-emit)}
.em-card__meta{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-faint);flex:none}

/* ── Row (link / certificate list item) ────────────────────── */
.em-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  width:100%;text-align:left;padding:var(--sp-4);
  background:var(--surface-inset);border:var(--bw-hair) solid var(--border-hairline);
  border-radius:var(--r-md);text-decoration:none;color:inherit;
  font:inherit;cursor:pointer;transition:var(--transition-control);
}
.em-row:hover{background:var(--surface-hover);border-color:var(--border-strong);text-decoration:none}
.em-row__main{display:flex;flex-direction:column;gap:4px;min-width:0}
.em-row__title{font:var(--type-ui);color:var(--text-primary)}
.em-row__lead{display:flex;align-items:center;gap:var(--sp-3);color:var(--text-primary);font:var(--type-ui)}
.em-row__lead svg{width:16px;height:16px;flex:none}
.em-row__aside{
  display:flex;align-items:center;gap:8px;flex:none;
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-accent);
}
.em-row__aside svg{width:14px;height:14px}

/* ── TimelineEntry (experience / education) ────────────────── */
.em-entries{display:flex;flex-direction:column}
.em-entry{display:flex;flex-direction:column;gap:var(--sp-2);padding-bottom:var(--sp-5)}
.em-entry + .em-entry{padding-top:var(--sp-5);border-top:var(--bw-hair) solid var(--border-hairline)}
.em-entry:last-child{padding-bottom:0}
.em-entry__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.em-entry__org{font:var(--type-h3);font-size:var(--fs-xl);color:var(--text-primary)}
.em-entry__role{font:var(--type-ui);color:var(--text-accent)}
.em-entry__desc{font:var(--type-body-sm);color:var(--text-body)}
.em-entry__award{align-self:flex-start;margin-top:var(--sp-2)}

/* ── Definition rows (languages) ───────────────────────────── */
.em-deflist{display:flex;flex-direction:column}
.em-defrow{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0}
.em-defrow:first-child{padding-top:0}
.em-defrow:last-child{padding-bottom:0}
.em-defrow + .em-defrow{border-top:var(--bw-hair) solid var(--border-hairline)}
.em-defrow__term{font:var(--type-ui);color:var(--text-body)}
.em-defrow__value{
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-body);
}
.em-defrow__value--accent{color:var(--text-accent)}

/* ── Contact cards ─────────────────────────────────────────── */
.em-mailcard{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-6);
  background:var(--surface-panel);border:var(--bw-hair) solid var(--border-hairline);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lip);text-decoration:none;
  transition:var(--transition-control);
}
.em-mailcard:hover{background:var(--surface-hover);border-color:var(--border-strong);text-decoration:none}
.em-mailcard--primary{border-color:var(--border-accent-2)}
.em-mailcard__main{display:flex;flex-direction:column;gap:6px;min-width:0}
.em-mailcard__value{font-family:var(--font-mono);font-size:var(--fs-xl);color:var(--text-primary);word-break:break-all}
.em-mailcard--primary .em-mailcard__value{color:var(--accent-2-emit)}
.em-mailcard svg{width:20px;height:20px;color:var(--text-faint);flex:none}

.em-social{
  display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);
  background:var(--surface-panel);border:var(--bw-hair) solid var(--border-hairline);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lip);text-decoration:none;
  transition:var(--transition-control);
}
.em-social:hover{background:var(--surface-hover);border-color:var(--border-strong);text-decoration:none}
.em-social svg{width:20px;height:20px;color:var(--accent)}
.em-social__label{font:var(--type-h3);color:var(--text-primary)}
.em-social__handle{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);color:var(--text-body)}

/* ── Dialog ────────────────────────────────────────────────── */
.em-scrim{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:var(--sp-6);
  background:rgba(8,9,11,.7);
  -webkit-backdrop-filter:var(--blur-veil);
  backdrop-filter:var(--blur-veil);
}
.em-scrim[hidden]{display:none}
.em-dialog{
  display:flex;flex-direction:column;
  width:100%;max-width:960px;height:min(85vh,900px);
  background:var(--surface-panel);border-radius:var(--r-xl);
  box-shadow:var(--shadow-overlay);overflow:hidden;
}
.em-dialog__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:12px var(--sp-6);border-bottom:var(--bw-hair) solid var(--border-hairline);
}
.em-dialog__body{flex:1;min-height:0;background:var(--surface-inset)}
.em-dialog__body iframe{display:block;width:100%;height:100%;border:0;background:var(--paper-100)}

/* ── Loading / toast ───────────────────────────────────────── */
.em-loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);
  min-height:320px;
}
.em-loading__bar{
  position:relative;width:180px;height:2px;overflow:hidden;
  background:var(--border-hairline);border-radius:var(--r-pill);
}
.em-loading__bar::after{
  content:"";position:absolute;top:0;bottom:0;width:60px;
  background:linear-gradient(90deg,transparent,var(--accent-emit));
  animation:em-scan 1100ms var(--ease-signal) infinite;
}
@keyframes em-scan{from{left:-60px}to{left:100%}}

.em-toast{
  position:fixed;left:50%;bottom:var(--sp-6);z-index:200;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5);
  background:var(--surface-panel);
  border:var(--bw-hair) solid var(--state-fault);
  border-radius:var(--r-md);box-shadow:var(--shadow-overlay);
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);
  color:var(--state-fault-text);
}
.em-toast[hidden]{display:none}

/* ── Footer ────────────────────────────────────────────────── */
.em-footer{
  flex:none;border-top:var(--bw-hair) solid var(--border-hairline);
  background:var(--surface-base);
}
.em-footer__inner{
  max-width:var(--container-max);margin:0 auto;
  padding:var(--sp-6);display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;
}

/* ── Error state ───────────────────────────────────────────── */
.em-error{
  padding:var(--sp-8);text-align:center;
  background:var(--state-fault-wash);border:var(--bw-hair) solid var(--state-fault);
  border-radius:var(--r-lg);color:var(--state-fault-text);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (min-width:900px){
  .em-container{padding-inline:var(--sp-8)}
  .em-hero__inner{padding-inline:var(--sp-8)}
}
@media (max-width:899px){
  .em-split{grid-template-columns:1fr}
  .em-grid-4{grid-template-columns:repeat(2,1fr)}
  .em-grid-3{grid-template-columns:repeat(2,1fr)}
  .em-hero__title,.em-hero__intro{width:100%}
}
@media (max-width:640px){
  .em-nav__links{display:none}
  .em-nav__toggle{display:inline-flex}
  .em-nav__right{margin-left:auto}
  .em-nav__menu{
    display:block;position:absolute;top:56px;left:0;right:0;
    background:var(--surface-base);
    border-bottom:var(--bw-hair) solid var(--border-hairline);
    padding:var(--sp-2);
  }
  .em-nav__menu[hidden]{display:none}
  .em-nav__menu .em-nav__link{display:flex;width:100%;height:var(--touch-min)}
  .em-grid-3,.em-grid-4{grid-template-columns:1fr}
  .em-mailcard__value{font-size:var(--fs-md)}
  .em-hero__inner{padding-block:var(--sp-9)}
}