/* Colours are generated from native/src/theme/tokens.ts in theme.css: the tokens, then this page's roles. */
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Figtree', system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.6; }
/* The page measures itself, so the narrow layout also comes when the reader's text is large, not only on a phone. */
.page { container: page / inline-size; }
.wrap { width: min(100% - 3rem, 70rem); margin-inline: auto; }
h1, h2, h3, h4 { font-family: 'Gabarito', system-ui, sans-serif; font-weight: 700; line-height: 1.1; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: var(--link); text-underline-offset: .25em; overflow-wrap: anywhere; min-height: 48px; min-inline-size: 48px; display: inline-flex; align-items: center; padding-block: .6rem; }
a:focus-visible { outline: 3px solid var(--link); outline-offset: 4px; border-radius: .15rem; }
.skip { position: absolute; top: .5rem; left: 1.5rem; background: var(--surface); padding-inline: 1rem; transform: translateY(-180%); z-index: 3; }
.skip:focus { transform: none; }

/* The top of every page. */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; }
.wordmark { font-family: 'Gabarito', system-ui, sans-serif; font-weight: 700; font-size: 2rem; letter-spacing: -.045em; color: var(--text); text-decoration: none; }
.wordmark span { color: var(--muted); }
nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
nav a[aria-current] { font-weight: 600; text-decoration-thickness: .15em; }
.preview p { padding: .5rem 1rem; background: var(--surface2); border-inline-start: 3px solid var(--rule); font-size: .9rem; }

/* The home page is one picture: the sky, the water's surface, and what is under it. */
.sea { --bergW: 24rem; --pengW: 15rem; display: grid; grid-template-columns: minmax(0, 1fr) var(--bergW); column-gap: 3rem; }
.sky { margin-top: 1.25rem; background: linear-gradient(to bottom, var(--bg) 20%, var(--sky)); }
.sky .sea { align-items: end; padding-top: 4.5rem; }
/* The headline is three short sentences, one to a line: it is sized to the column so the longest always fits. */
.pitch { padding-bottom: 5rem; container-type: inline-size; }
.pitch h1 { font-size: clamp(1.9rem, 14vw, 5.75rem); font-size: clamp(1.9rem, 20cqi, 5.75rem); line-height: .96; letter-spacing: -.045em; max-width: 5em; margin-bottom: 1.75rem; }
.pitch p { max-width: 30rem; }
.pitch p + p { margin-top: .3rem; }
.pitch .lead { font-size: 1.35rem; line-height: 1.4; margin-bottom: 1.25rem; }
/* The penguin's feet (y 103 of 112) stand on the slab's top (y 8 of the iceberg's 400-wide drawing). */
.penguin { display: block; width: var(--pengW); margin-inline: auto; margin-bottom: calc(var(--bergW) * .13 - var(--pengW) * .0804); position: relative; z-index: 1; }
.penguin img { display: block; width: 100%; height: auto; }

.deep { background: var(--deep); color: var(--onDeep); box-shadow: inset 0 2px 0 var(--water); }
.deep .sea { align-items: start; padding-bottom: 5.5rem; }
.vault { grid-column: 1; grid-row: 1; padding-top: 4.5rem; }
/* The slab above the water is 60 of the drawing's 400 across: it is lifted over the line by that much. */
.berg { grid-column: 2; grid-row: 1; display: block; width: 100%; height: auto; margin-top: calc(var(--bergW) * -.15); }
.iceTop { fill: var(--iceTop); }
.iceA { fill: var(--iceA); }
.iceB { fill: var(--iceB); }
.bergA { fill: var(--bergA); }
.bergB { fill: var(--bergB); }
.bergC { fill: var(--bergC); }
.vault h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -.04em; margin-bottom: 1rem; }
.vault .lead { font-size: 1.25rem; line-height: 1.45; max-width: 34rem; margin-bottom: 2.75rem; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; max-width: 34rem; }
.steps li { counter-increment: step; position: relative; padding: 0 0 2.25rem 4.25rem; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -.35rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--onDeepMuted); background: var(--deep); color: var(--onDeep); display: grid; place-items: center; font-family: 'Gabarito', system-ui, sans-serif; font-weight: 700; font-size: 1.25rem; z-index: 1; }
/* The line the money travels down. */
.steps li::after { content: ''; position: absolute; left: calc(1.375rem - 1px); top: 0; bottom: 0; width: 2px; background: var(--water); }
.steps li:last-child::after { display: none; }
.steps h3 { font-size: 1.4rem; letter-spacing: -.015em; margin-bottom: .35rem; }
.steps p { color: var(--onDeepMuted); }
/* Mint is The Vault's colour and nothing else's: it marks the one step where the money is held. */
.steps .held::before { background: var(--held); border-color: var(--held); color: var(--onHeld); }
.steps .held h3 { color: var(--held); }
.vault .after { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--water); max-width: 34rem; font-size: 1.15rem; }

/* The plain facts. */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 4.5rem; align-items: start; }
.facts { padding-block: 5.5rem; }
.about h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); letter-spacing: -.03em; margin-bottom: 1.5rem; }
.cost h2 { font-size: 1.3rem; margin-bottom: .75rem; }
.cost p { max-width: 32rem; color: var(--muted); }
.cost p + p { margin-top: .4rem; }
.cost .example { font-family: 'Gabarito', system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 4.2vw, 3.25rem); line-height: 1.06; letter-spacing: -.035em; color: var(--text); text-wrap: balance; margin-bottom: 1.5rem; }
.rules { margin: 0; }
.rules div { padding-block: 1.5rem; border-top: 1px solid var(--rule); }
.rules div:last-child { border-bottom: 1px solid var(--rule); }
.rules dt { font-family: 'Gabarito', system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; margin-bottom: .4rem; }
.rules dd { margin: 0; }
.rules dd p + p { margin-top: .5rem; }

.app { background: var(--surface2); padding-block: 5.5rem; }
.app .split { grid-template-columns: 17rem minmax(0, 1fr); align-items: center; }
.screen img { display: block; width: 100%; height: auto; border-radius: 1.75rem; border: .4rem solid var(--frame); }
.about p { max-width: 34rem; }
.about h3 { font-size: 1.3rem; margin: 2.75rem 0 .75rem; }
.reading { list-style: none; margin: 0; padding: 0; max-width: 30rem; }
.reading li { border-top: 1px solid var(--rule); }
.reading li:last-child { border-bottom: 1px solid var(--rule); }
.reading a { display: flex; padding-block: .9rem; font-weight: 600; }

/* The papers and the deletion page. */
.document { max-width: 46rem; margin-inline: auto; padding-block: 3rem 4rem; overflow-wrap: anywhere; }
.document h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); letter-spacing: -.04em; margin: .5rem 0 1.5rem; }
.document h2 { font-size: 1.7rem; letter-spacing: -.02em; margin-block: 2.5rem 1rem; }
.document h3 { font-size: 1.35rem; margin-block: 2rem 1rem; }
.document h4 { font-size: 1.15rem; margin-block: 1.75rem .75rem; }
.document p { margin-block: .75rem; }
.document section { margin-block: 2.5rem; }
.document li { padding-inline-start: .2rem; margin-block: .6rem; }
article { margin-bottom: 3rem; }
blockquote { margin: 1.5rem 0; padding-inline-start: 1.2rem; border-inline-start: 3px solid var(--rule); color: var(--muted); }

.foot { padding-block: 2.5rem 3.5rem; color: var(--muted); font-size: .95rem; }
.foot .who { max-width: 46rem; }
.foot nav { margin-top: 1.25rem; gap: 1rem 2.5rem; }
.foot nav div { display: flex; flex-direction: column; }
.foot nav span { font-size: .85rem; }

@container page (max-width: 56rem) {
  .wrap { width: min(100% - 2rem, 70rem); }
  .top { align-items: flex-start; flex-direction: column; gap: 0; }
  .top nav { gap: 0 1.25rem; }
  .sea { --bergW: min(15rem, 70vw); --pengW: min(9.5rem, 44vw); grid-template-columns: minmax(0, 1fr); }
  .sky .sea { padding-top: 2.5rem; }
  .pitch { padding-bottom: 2.25rem; }
  .pitch .lead { font-size: 1.2rem; }
  /* On a phone the iceberg's top is shown and the rest fades into the water, so no words sit over it. */
  .berg { grid-column: 1; grid-row: 1; width: var(--bergW); height: calc(var(--bergW) * .7); margin-inline: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent); }
  .vault { grid-row: 2; padding-top: 1.5rem; }
  .deep .sea { padding-bottom: 3.5rem; }
  .steps li { padding-left: 3.75rem; }
  .split, .app .split { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }
  .facts, .app { padding-block: 3.5rem; }
  .screen { max-width: 15rem; }
  .document { padding-top: 2rem; }
}
@media print {
  .skip, .top nav, .berg { display: none; }
  .wrap { width: 100%; }
  .deep { background: none; color: inherit; box-shadow: none; }
}
@supports not (container-type: inline-size) {
@media (max-width: 56rem) {
  .wrap { width: min(100% - 2rem, 70rem); }
  .top { align-items: flex-start; flex-direction: column; gap: 0; }
  .top nav { gap: 0 1.25rem; }
  .sea { --bergW: min(15rem, 70vw); --pengW: min(9.5rem, 44vw); grid-template-columns: minmax(0, 1fr); }
  .sky .sea { padding-top: 2.5rem; }
  .pitch { padding-bottom: 2.25rem; }
  .pitch .lead { font-size: 1.2rem; }
  /* On a phone the iceberg's top is shown and the rest fades into the water, so no words sit over it. */
  .berg { grid-column: 1; grid-row: 1; width: var(--bergW); height: calc(var(--bergW) * .7); margin-inline: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent); }
  .vault { grid-row: 2; padding-top: 1.5rem; }
  .deep .sea { padding-bottom: 3.5rem; }
  .steps li { padding-left: 3.75rem; }
  .split, .app .split { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }
  .facts, .app { padding-block: 3.5rem; }
  .screen { max-width: 15rem; }
  .document { padding-top: 2rem; }
}
}