/* SIM New Zealand brand guidelines. Layout after a clean single-column brand guide: full-screen hero,
   sticky sidebar, one reading column, flat colour blocks. Type sizes are fluid clamps over 360-1600 px. */
@font-face { font-family: Aspekta; font-weight: 400; font-style: normal; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/ivodolenc/aspekta@cd08efde1a0484c3626818ac59a6933e59f71531/packages/fonts/webfonts/Aspekta-400.woff2") format("woff2"); }
@font-face { font-family: Aspekta; font-weight: 500; font-style: normal; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/ivodolenc/aspekta@cd08efde1a0484c3626818ac59a6933e59f71531/packages/fonts/webfonts/Aspekta-500.woff2") format("woff2"); }

:root {
  --red: #DA2B1F; --green: #14332D; --charcoal: #363636;
  --accent: #E0EC92; --accent-75: #EFFAA9; --accent-50: #F7FFC6; --accent-25: #FBFFE4;
  --sand: #EFECE5; --sand-25: #FCFBF8;
  --ink: #14332D; --text: #5B5B5B; --line: #E4E1DA;
  --ui: Aspekta, "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --serif: Literata, Georgia, serif; --sans: "Hanken Grotesk", Arial, sans-serif;
  --hero: clamp(3.5rem, 1.25rem + 7vw, 8rem);
  --h2: clamp(2.25rem, 1.85rem + 1.6vw, 3.25rem);
  --h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --body: clamp(0.975rem, 0.9rem + 0.2vw, 1.0625rem);
  --intro: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem);
  --small: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --side: clamp(22.5rem, 25vw, 25rem);
  --col: 42rem;
  --wide: 52rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: #fff; color: var(--text); font: 400 var(--body)/1.55 var(--ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--ui); font-weight: 500; margin: 0; }
h2 { font-size: var(--h2); line-height: 1; letter-spacing: -0.03em; }
h3 { font-size: var(--h3); line-height: 1.2; letter-spacing: -0.03em; margin-bottom: 1rem; }
h4 { font-size: var(--body); line-height: 1.3; margin: 2rem 0 .5rem; }
p { margin: 0 0 1rem; max-width: var(--col); }
/* body copy wraps without orphans or ragged last lines */
p, li, dd, dt, figcaption, td, th { text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 500; }
.intro { font-size: var(--intro); line-height: 1.45; color: var(--text); margin-top: 1.25rem; max-width: 36rem; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 50; background: #fff; padding: .75rem 1rem; }

/* hero */
.hero { position: relative; min-height: 100svh; background: var(--green); color: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem 3rem 3rem; }
.hero .brand { width: 8.5rem; position: relative; z-index: 1; }
.hero .mark { position: absolute; right: -6vw; top: -14vw; width: 58vw; max-width: 58rem; color: var(--accent); opacity: calc(.06 * var(--hero-fade, 1)); pointer-events: none; transform: translate3d(0, var(--hero-shift, 0px), 0); }
.hero .mark svg { width: 100%; height: auto; }
.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; position: relative; z-index: 1; padding-left: calc(var(--side) - 3rem); }
.hero h1 { font-size: var(--hero); line-height: .95; letter-spacing: -0.04em; color: #fff; }
.hero .scroll { font-size: var(--small); color: var(--sand); text-decoration: none; padding-bottom: .4rem; }

/* layout */
.layout { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); align-items: start; }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--sand); display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem 3rem; }
.sidebar .brand { width: 8.5rem; }
.sidebar .brand-link { display: block; align-self: flex-start; }
.sidebar .brand-link .brand { display: block; }
.sidebar nav ol { list-style: none; margin: 0; padding: 0; }
.sidebar nav { position: relative; flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 2rem 0; scrollbar-width: none; }
.sidebar nav::-webkit-scrollbar { display: none; }
.nav-group + .nav-group { margin-top: 1.35rem; }
.nav-kicker { font: 700 .6875rem/1.2 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--red); margin: 0 0 .35rem; }
.sidebar nav a { display: block; padding: .16rem 0; text-decoration: none; color: var(--ink); opacity: .75; transition: opacity .2s ease; font-size: var(--body); line-height: 1.35; }
.sidebar nav a:hover, .sidebar nav a[aria-current="true"] { opacity: 1; }
/* active link: one red marker moved by a spring (see script), with the link text easing over on a matching spring curve */
.nav-indicator { position: absolute; left: 0; top: 0; width: .9rem; height: 2px; border-radius: 2px; background: var(--red); opacity: 0; pointer-events: none; transform-origin: 0 50%; will-change: transform, opacity; }
.sidebar nav a { transition: opacity .2s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1); transition: opacity .2s ease, transform .7s linear(0.0 0%, 0.0257 4%, 0.0928 7%, 0.1878 11%, 0.299 14%, 0.417 18%, 0.5343 21%, 0.6453 25%, 0.7461 29%, 0.8343 32%, 0.9087 36%, 0.9692 39%, 1.0161 43%, 1.0505 46%, 1.0739 50%, 1.0879 54%, 1.0941 57%, 1.0941 61%, 1.0895 64%, 1.0817 68%, 1.0718 71%, 1.0608 75%, 1.0496 79%, 1.0387 82%, 1.0286 86%, 1.0197 89%, 1.012 93%, 1.0056 96%, 1 100%); }
.sidebar nav a[aria-current="true"] { transform: translateX(1.5rem); }
@media (prefers-reduced-motion: reduce) { .sidebar nav a { transition: opacity .2s ease; } }
.sidebar .copy { font-size: var(--small); color: var(--ink); opacity: .7; margin: 0; }
.menu-btn { display: none; }
main { padding: 0 3rem; }
main > .section { max-width: var(--wide); margin-inline: auto; }

/* sections */
.section { padding-block: 7.5rem 2rem; }
.section-head { margin-bottom: 6rem; }
.sub { margin-bottom: 6rem; max-width: var(--wide); }
.sub > p, .sub > ul { color: var(--text); }
.sub-lead { margin-bottom: 2rem; }
.rows { list-style: none; margin: 0; padding: 0; max-width: var(--col); }
.rows li { padding: .9rem 0; }
.rows li + li { border-top: 1px solid var(--line); }
.rows li:first-child { padding-top: 0; }
.rows li:last-child { padding-bottom: 0; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 1.25rem; }

/* statement card */
.statement { background: var(--green); color: #fff; padding: 1.75rem 1.75rem 1.5rem; aspect-ratio: 16 / 9; display: grid; grid-template-rows: auto 1fr auto; position: relative; overflow: hidden; }
.statement .labels { display: flex; gap: 8rem; font-size: var(--small); color: var(--sand); }
.statement p.big { align-self: end; font: 500 clamp(2rem, 1rem + 3.4vw, 4.25rem)/.98 var(--ui); letter-spacing: -0.04em; color: #fff; max-width: none; margin: 0; }
.statement .year { justify-self: end; font-size: var(--small); color: var(--sand); margin: .75rem 0 0; }
.statement .mark { position: absolute; right: -8%; top: -30%; width: 55%; color: var(--accent); opacity: .12; }

/* logo */
.stage { background: var(--sand); display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 12%; margin-bottom: 2rem; }
.stage--white { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.stage--green { background: var(--green); }
.stage--red { background: var(--red); }
.stage--black { background: #000; }
.variant h4 { margin-top: 0; }
.variant p { font-size: var(--small); }
.variant .stage { margin-bottom: 1rem; aspect-ratio: 4 / 3; padding: 14%; }
.diagram { width: 100%; margin: 1rem 0 2rem; }
/* logo construction film and clear space rendition, after the template's Construction and Safe Space panels */
.rendition { position: relative; margin: 0 0 1rem; background: var(--sand); aspect-ratio: 16 / 9; overflow: hidden; }
.rendition video, .rendition svg { display: block; width: 100%; height: 100%; }
.rendition video { object-fit: cover; }
.rendition .cs-line { vector-effect: non-scaling-stroke; stroke-linecap: round; }
.rendition .cs-guide { stroke: #A6A094; stroke-width: 1.4; stroke-dasharray: 0.001 4.2; }
.rendition .cs-box { stroke: #7D776B; stroke-width: 1.7; stroke-dasharray: 0.001 4.2; }
.rendition .cs-measure { stroke: #7D776B; stroke-width: 1; stroke-linecap: butt; }
.rendition-label { position: absolute; font: 500 var(--small)/1 var(--ui); color: var(--charcoal); pointer-events: none; }
.rendition-label--above { transform: translate(-50%, calc(-100% - .35rem)); }
.rendition-label--right { transform: translate(.45rem, -50%); }
.rendition-play { position: absolute; right: 1rem; bottom: 1rem; min-height: 2.5rem; padding: .55rem 1rem; }
.rendition-play[hidden] { display: none; }
.favicons { display: flex; align-items: flex-end; gap: 2.5rem; margin-top: 1.5rem; }
.favicons figure { margin: 0; font-size: var(--small); text-align: center; }
.favicons img { margin: 0 auto .5rem; }

/* downloads */
.tabset { margin-top: .5rem; }
.tabs { display: flex; gap: 2rem; box-shadow: inset 0 -1px 0 var(--line); margin-bottom: 2rem; max-width: var(--wide); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 .1rem .9rem; font: 500 var(--body)/1 var(--ui); color: var(--ink); opacity: .55; cursor: pointer; white-space: nowrap; transition: opacity .2s ease; }
.tab:hover { opacity: 1; }
.tabpanel { max-width: var(--wide); }
.tabpanel.fade { animation: tabfade .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes tabfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tab[aria-selected="true"] { opacity: 1; border-bottom-color: var(--red); }
.dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.25rem; max-width: var(--wide); }
.dl-grid h4 { margin: 0 0 1rem; }
.btn { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: .8rem 1.25rem; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 500 var(--small)/1.2 var(--ui); text-decoration: none; transition: border-color .2s ease, background .2s ease; }
.btn:hover { border-color: var(--ink); }
.btn + .btn { margin-top: .5rem; }
.btn svg { width: 1rem; height: 1rem; flex: none; }
.btn--wide { max-width: var(--wide); }
.btn--solid { background: var(--green); border-color: var(--green); color: #fff; }
.btn--solid:hover { background: #0e2621; }
[hidden] { display: none !important; }

/* application and imagery photos */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 2.25rem; max-width: var(--wide); }
.gallery--after { margin: 2rem 0 0; }
.shot { margin: 0; }
.shot .frame { aspect-ratio: 4 / 3; background: var(--sand); overflow: hidden; }
.shot picture { display: block; width: 100%; height: 100%; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--contain img { object-fit: contain; padding: 1.25rem; }
.shot--flush img { padding: 0; }
.shot--white .frame { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.shot--span { grid-column: 1 / -1; }
.shot--span .frame { aspect-ratio: 16 / 9; }
.shot figcaption { font-size: var(--small); color: var(--text); padding-top: .6rem; }

/* 100 years in mission */
.stage picture { display: contents; }
.diagram--mark { max-width: 34rem; }
.shot--169 .frame { aspect-ratio: 16 / 9; }

/* hero parallax and footer fade (Webflow source: hero scroll out, footer parallax) */
.hero .brand, .hero-foot { transform: translate3d(0, var(--hero-shift, 0px), 0); opacity: var(--hero-fade, 1); }
.footer > * { transform: translate3d(0, var(--foot-shift, 0%), 0); opacity: var(--foot-fade, 1); }

/* split columns: a short label beside one rule */
.pairs { margin: 0; max-width: var(--wide); }
.pairs > div { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: .35rem 2.5rem; padding: .9rem 0; }
.pairs > div + div { border-top: 1px solid var(--line); }
.pairs > div:first-child { padding-top: 0; }
.pairs > div:last-child { padding-bottom: 0; }
.pairs dt { color: var(--ink); font-weight: 500; }
.pairs dd { margin: 0; color: var(--text); max-width: var(--col); }
.pairs--wide > div { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
.pairs--half > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tabpanel > p + .pairs, .tabpanel > p + .rows, .acc-body > p + .pairs, .acc-body > p + .rows { margin-top: 1.5rem; }
.tabpanel > .pairs + p, .tabpanel > .rows + h4, .tabpanel > .pairs + h4, .acc-body > .rows + p { margin-top: 2rem; }

/* expanding sections */
.acc { max-width: var(--wide); }
.acc details + details { border-top: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.1rem 0; font: 500 var(--intro)/1.3 var(--ui); letter-spacing: -0.01em; color: var(--ink); }
.acc details:first-child summary { padding-top: .25rem; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; flex: none; width: 1rem; height: 1rem; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform .4s cubic-bezier(.165, .84, .44, 1); }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc summary:hover { color: var(--red); }
.acc-body { overflow: hidden; }
.acc-body > :first-child { margin-top: .25rem; }
.acc-body > :last-child { margin-bottom: 2rem; }

/* social media templates: shown at about phone-feed size */
.shot--34 .frame { aspect-ratio: 3 / 4; }
.gallery--social { margin-bottom: 2.5rem; row-gap: 3rem; }
.gallery--social figcaption strong { font-weight: 500; color: var(--ink); }
.shot-title { margin: 0; max-width: none; }
.caption-sample { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.caption-sample p { margin: 0 0 .6rem; max-width: none; font-size: var(--small); }
.caption-sample p:last-child { margin-bottom: 0; }
.caption-label { font-weight: 700; font-size: .6875rem !important; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }

/* fine print sources */
.sources { font-size: var(--small); color: var(--text); max-width: var(--wide); margin-top: 2rem; }
.sources a { color: var(--ink); }

/* email template: scroll the full design beside its anatomy */
.email-split { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; max-width: var(--wide); margin: 2rem 0 2.5rem; }
.email-preview { margin: 0; }
.email-preview .frame { height: 40rem; overflow-y: auto; background: #ecefef; box-shadow: inset 0 0 0 1px var(--line); scrollbar-width: thin; }
.email-preview img { width: 100%; height: auto; display: block; }
.email-preview figcaption { font-size: var(--small); padding-top: .6rem; }
.email-preview figcaption a { color: var(--ink); }
.email-notes { position: sticky; top: 2rem; }
.email-notes .pairs > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }

/* image library */
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.25rem; max-width: var(--wide); margin-top: 1.5rem; }
.lib-grid.fade { animation: tabfade .45s cubic-bezier(.2, .7, .2, 1); }
.lib-item { margin: 0; }
.lib-item .frame { aspect-ratio: 4 / 3; background: var(--sand); overflow: hidden; }
.lib-item img { width: 100%; height: 100%; object-fit: cover; }
.lib-item figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding-top: .6rem; font-size: var(--small); color: var(--text); }
.lib-item .dl { flex: none; color: var(--ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color .2s ease; }
.lib-item .dl:hover { border-color: var(--ink); }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: 2rem; max-width: var(--wide); }
.pager button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: .3rem .15rem; font: 500 var(--small)/1 var(--ui); color: var(--ink); opacity: .55; cursor: pointer; transition: opacity .2s ease; }
.pager button:hover:not(:disabled) { opacity: 1; }
.pager button[aria-current="page"] { opacity: 1; border-bottom-color: var(--red); }
.pager button:disabled { opacity: .2; cursor: default; }
.pager-step:first-child { margin-right: .5rem; }
.pager-step:last-child { margin-left: .5rem; }

/* type */
.specimen { border-top: 1px solid var(--line); padding: 2.5rem 0 2rem; }
.specimen .aa { font-size: clamp(5rem, 3rem + 7vw, 10rem); line-height: .9; color: var(--ink); margin: 0 0 1.5rem; font-optical-sizing: none; }
.specimen .glyphs { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.35; color: var(--ink); max-width: none; word-break: break-word; font-optical-sizing: none; }
.serif { font-family: var(--serif); }
.serif-i { font-family: var(--serif); font-style: italic; }
.sans { font-family: var(--sans); }
.weights { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; color: var(--ink); font-size: var(--intro); }
table { width: 100%; max-width: var(--wide); border-collapse: collapse; font-size: var(--small); }
th, td { text-align: left; padding: .75rem .5rem .75rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 500; color: var(--ink); }
td { color: var(--text); }
code { font: 400 .92em ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); }
.scroll-x { overflow-x: auto; }

/* colour */
.colours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--wide); }
.colour { aspect-ratio: 3 / 4.2; padding: 1.1rem; display: flex; flex-direction: column; justify-content: space-between; font-size: var(--small); line-height: 1.35; }
.colour .name { font-size: var(--body); font-weight: 500; margin: 0; }
.colour dl { margin: 0; display: grid; gap: .55rem; }
.colour dt { font-weight: 500; }
.colour dd { margin: 0; opacity: .8; }
.light-text { color: #fff; }
.dark-text { color: var(--ink); }
.ramp-label { margin: 2rem 0 .75rem; }
.ramp { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); max-width: var(--wide); }
.ramp div { padding: .9rem .75rem; min-height: 5.5rem; display: flex; flex-direction: column; justify-content: space-between; font-size: var(--small); color: var(--ink); }
.ramp b { font-weight: 500; }
.note { font-size: var(--small); color: var(--text); max-width: var(--wide); margin-top: 1.5rem; }

/* footer */
.footer { background: var(--green); color: var(--sand); padding: 5rem 3rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.footer img { width: 8.5rem; }
.footer p { margin: 0; font-size: var(--small); max-width: none; }
.footer a { color: var(--accent); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translate3d(0, 100px, 0); transition: opacity 1s cubic-bezier(.165, .84, .44, 1), transform 1s cubic-bezier(.165, .84, .44, 1); transition-delay: var(--reveal-delay, 0ms); }
.reveal.in { opacity: 1; transform: none; }
/* sections focused after a keyboard jump from the sidebar */
.section[tabindex="-1"]:focus-visible, .sub[tabindex="-1"]:focus-visible { outline: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tabpanel.fade { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .lib-grid.fade { animation: none; }
}

/* tablet and phone */
@media (max-width: 62rem) {
  .hero { padding: 1.5rem 1.5rem 2rem; }
  .hero-foot { padding-left: 0; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  main, .sidebar { min-width: 0; }
  .sidebar { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; align-items: center; padding: 1rem 1.5rem; }
  .sidebar .brand { width: 6.5rem; }
  .sidebar .copy { display: none; }
  .menu-btn { display: block; appearance: none; background: none; border: 1px solid var(--ink); color: var(--ink); font: 500 var(--small)/1 var(--ui); padding: .6rem .9rem; cursor: pointer; }
  .sidebar nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--sand); padding: .5rem 1.5rem 1.5rem; display: none; margin: 0; max-height: calc(100vh - 4.5rem); overflow-y: auto; clip-path: inset(0); box-shadow: 0 -2rem 0 var(--sand); }
  .sidebar.open nav, .sidebar.menu-closing nav { display: block; }
  .sidebar.menu-closing nav { pointer-events: none; }
  .sidebar .brand-link { align-self: center; }
  main { padding: 0 1.5rem; }
  .section { padding-top: 4.5rem; }
  .section-head, .sub { margin-bottom: 4rem; }
  .colours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two, .dl-grid, .gallery { grid-template-columns: 1fr; }
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pairs > div, .pairs--wide > div, .pairs--half > div { grid-template-columns: minmax(0, 1fr); }
  .email-split { grid-template-columns: minmax(0, 1fr); }
  .email-preview .frame { height: 32rem; }
  .email-notes { position: static; }
  .tabs { gap: 1.5rem; }
  .statement { aspect-ratio: 4 / 5; }
  .statement .labels { gap: 3rem; }
  .ramp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 30rem) {
  .lib-grid { grid-template-columns: minmax(0, 1fr); }
}