:root {
  /* Green, in three shades: leaf is what she clicks, leaf-deep is what it becomes when she touches
     it, leaf-light is the wash behind a thing that is not finished yet. Change these three and the
     whole site, certificate included, changes with them. */
  --paper: #f5f7f1;
  --paper-raised: #fcfdf9;
  --ink: #14211a;
  --ink-soft: #44554a;
  --ink-faint: #55635a;
  --leaf: #2e6b4a;
  --leaf-deep: #1d4631;
  --leaf-light: #cfe0d2;
  --bloom: rgba(207, 224, 210, .42);
  /* Her flower. Gold only ever sits on top of the greens, never instead of one, so it stays an
     accent at the size of a grain of rice and the site is still a green site. */
  --petal: #d9a12b;
  --line: #d8e2d7;
  --shadow-soft: 0 16px 34px -24px rgba(29, 70, 49, .38);
  --shadow-lift: 0 30px 58px -28px rgba(29, 70, 49, .5);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 66ch;
  --gap: clamp(2.5rem, 7vw, 6rem);
}

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

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

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  /* Two layers: a leaf wash that lifts the top of every page and fades by 42rem, and a fine paper
     tooth so the surface is not a flat screen colour. Both scroll with the page, so nothing hovers
     over her words while she reads. */
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--bloom) 0%, rgba(207, 224, 210, 0) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 100% 42rem, 160px 160px;
  background-repeat: no-repeat, repeat;
}

img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 20; background: var(--paper-raised); padding: .6rem 1rem; border: 1px solid var(--ink); }

:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }

/* ---------- navigation ---------- */

.topnav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topnav-inner { display: flex; align-items: baseline; gap: 1.5rem; padding: .95rem 0; flex-wrap: wrap; }
.brand {
  font-family: var(--serif); font-size: 1.2rem; letter-spacing: .01em; text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: .55rem;
}
/* The mark is a file, not a glyph: a logo typed in a font is only a logo on machines that have that
   font. Her initials sit in the leaf; the wordmark under them is set tight, the way a logotype is. */
.brand-mark { display: block; width: 1.72rem; height: 1.72rem; flex: 0 0 auto; }
.brand-word {
  font-size: 1.28rem; letter-spacing: -.015em; line-height: 1;
  border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
.brand-initial { color: var(--leaf); }
.brand:hover .brand-word { border-bottom-color: var(--leaf-light); }
.nav-links { display: flex; flex-wrap: wrap; gap: clamp(.85rem, 2.5vw, 1.8rem); margin-left: auto; }
.nav-link {
  font-size: .76rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; padding-block: .2rem;
  background-image: linear-gradient(var(--leaf), var(--leaf));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size .32s ease, color .32s ease;
}
.nav-link:hover { color: var(--leaf-deep); background-size: 100% 1px; }
.nav-link.is-current { color: var(--ink); background-size: 100% 1px; }

/* ---------- type ---------- */

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 13vw, 8.5rem);
  line-height: .92;
  letter-spacing: -.025em;
  margin: .35rem 0 0;
  text-wrap: balance;
}
.display--page { font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.02; }
.kicker {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--leaf); margin: 0; font-weight: 600;
  display: flex; align-items: center; gap: .85rem;
}
.kicker::before { content: ""; width: clamp(1.5rem, 5vw, 3.2rem); height: 1px; background: var(--leaf); opacity: .5; }
.lede {
  font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  line-height: 1.35; color: var(--ink-soft); margin: 1.4rem 0 0; max-width: 30ch;
  text-wrap: pretty;
}
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .9rem; }
h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin: 2.2rem 0 .5rem; }
h4 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 2rem 0 .4rem; font-weight: 600; }
p { margin: 0 0 1.15rem; max-width: var(--measure); }
a { color: var(--leaf-deep); }
hr { border: 0; height: 1px; background: linear-gradient(90deg, var(--leaf) 0%, var(--line) 34%, rgba(216, 226, 215, 0) 100%); margin: 2.5rem 0; max-width: 100%; }
blockquote {
  margin: 1.6rem 0; padding: 0 0 0 1.3rem; border-left: 2px solid var(--leaf);
  font-family: var(--serif); font-size: 1.15rem; color: var(--ink-soft);
}
blockquote p { margin-bottom: 0; }
/* A photograph standing inside a page of text. A phone picture is far bigger than the paragraph it
   belongs to, and a tall one can run the whole page, so both edges are capped and the picture is
   scaled down whole — nothing of her is ever cropped off to fit a shape. Squared like the rest of the
   site, with the same soft shadow the cards carry. */
.band img {
  width: auto; height: auto; max-width: min(100%, 30rem); max-height: 34rem;
  margin: 1.8rem 0 1.4rem; box-shadow: var(--shadow-soft);
}
ul, ol { padding-left: 1.25rem; max-width: var(--measure); }
li { margin-bottom: .45rem; }

/* ---------- a picture standing beside her words ----------

   She asked for the gap to be filled with something of hers rather than with room. A picture told
   "left" or "right" takes a track of its own and the words keep theirs, so the empty half of the page
   carries a photograph instead of carrying nothing. Nothing is cropped to make it fit: the picture is
   scaled whole into a track 19rem wide, and the text column never gets narrower than a comfortable
   line. Below 1000 pixels the grid is not drawn at all, and the picture simply stands where it was
   written, the way it does on a phone. */
@media (min-width: 1000px) {
  .band-split { display: grid; gap: 0 2.2rem; align-items: start; }
  .band--left { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
  .band--right { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); }
  .band-split .band-text { min-width: 0; }
  .band-split .band-pic { margin: 0; }
  .band-split .band-pic img { margin: .3rem 0 0; }
}

/* ---------- hero ---------- */

.hero {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: end;
  padding: clamp(3rem, 10vw, 8rem) 0 var(--gap);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) { .hero { grid-template-columns: 1.25fr .85fr; } }
.hero-actions { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-portrait {
  margin: 0; position: relative;
  /* Mounted like a print in a card mat: paper plate, a keyline cut inside it, the caption sitting in
     the foot of the mat instead of loose under the picture. Turned a half degree, as a photograph
     laid on a table is never quite square. */
  padding: .62rem .62rem 2.5rem;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  transform: rotate(.5deg);
  transition: transform .5s ease;
}
.hero-portrait:hover { transform: rotate(0deg); }
.hero-portrait::after {
  content: ""; position: absolute; inset: .62rem .62rem 2.5rem; pointer-events: none;
  border: 1px solid var(--leaf-light);
}
.hero-portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  /* A phone photograph is much taller than this frame, so something has to be cropped. Where is her
     call, not the browser's: site.json sets it and the default keeps the top of the picture, which is
     where a face is. Change portraitFocus in content/site.json if she ever wants the crop lower. */
  object-position: var(--portrait-focus, 50% 0%);
  /* Two of these files are stored sideways with an orientation note saying "rotate me" — which is how
     a phone saves a portrait taken held landscape. Honour the note rather than trusting each browser's
     default, or her head ends up on her shoulder. */
  image-orientation: from-image;
  border-radius: 0;
  filter: saturate(.97) contrast(1.02);
}
.hero-portrait figcaption {
  position: absolute; left: .62rem; right: .62rem; bottom: .9rem; margin-top: 0;
  text-align: center; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}

.btn {
  display: inline-block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; text-decoration: none; padding: .9rem 1.7rem; border-radius: 999px;
  border: 1px solid var(--leaf); color: var(--leaf-deep); background: var(--paper-raised);
  box-shadow: var(--shadow-soft);
  transition: transform .28s ease, background-color .28s ease, color .28s ease, box-shadow .28s ease;
}
.btn:hover { background: var(--leaf); color: #f4f9f4; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn--leaf { border-color: var(--leaf-deep); background: var(--leaf); color: #f4f9f4; }
.btn--leaf:hover { background: var(--leaf-deep); border-color: var(--leaf-deep); color: #fff; }

/* ---------- page head + bands ---------- */

.page-head { padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(1.5rem, 4vw, 2.5rem); border-bottom: 1px solid var(--line); }
main { padding-bottom: var(--gap); position: relative; }
.band { padding-top: var(--gap); }

/* ---------- the margin flower ----------

   Her words run in one comfortable column about 560 pixels wide, which on a laptop leaves the right
   half of the paper empty. That half is filled with a drawn flower, not with a photograph, so nothing
   of hers stands in the open just to decorate a page. It is switched off below 1100 pixels, where
   there is no empty half to fill, and it cannot be clicked, selected or printed.

   It is painted BEHIND the page rather than over it, and that is not a detail. The flower is measured
   against <main>, which is the same box the words run in, so a surface wider than a line of prose —
   her portrait card, the framed certificate, a wall of photographs — reaches into the space the flower
   stands in. Those surfaces all have their own sheet of paper behind them, so drawing the flower
   underneath means such a card simply covers the part of the stem it stands on, and the flower carries
   on above and below the card, the way a mat sits on a table. Nothing of hers is ever printed over. */
@media (min-width: 1100px) {
  main::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none; user-select: none;
    top: 7rem; right: 0; width: 21rem; height: 52.5rem;
    background: url("leratom-margin.svg") right top / contain no-repeat;
    opacity: .17;
  }
  /* The same flower her menu corner carries, standing at the foot of the page like a mason's mark. */
  main::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none; user-select: none;
    bottom: 5rem; right: 3rem; width: 6.5rem; height: 6.5rem;
    background: url("leratom-mark.svg") center / contain no-repeat;
    opacity: .12;
  }
}
.section-marker {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 1.1rem; display: flex; gap: .8rem; align-items: center;
}
.section-marker::before { content: ""; flex: 0 0 clamp(1.4rem, 4vw, 2.8rem); height: 1px; background: var(--leaf); opacity: .45; }
.section-marker span { color: var(--leaf); font-family: var(--serif); font-size: .95rem; letter-spacing: 0; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; border-block: 1px solid var(--line); padding-block: 1.8rem; margin-top: var(--gap); background: linear-gradient(rgba(207, 224, 210, .16), rgba(207, 224, 210, 0)); }
.stat strong { display: block; font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1; font-weight: 400; color: var(--leaf-deep); }
.stat span { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- reveal ---------- */

/* Gated on the .js class the page adds in its head: without it everything must already be visible.
   A page that fades in is lovely; a page that stays transparent because a script did not run is an
   empty profile with her name on it. */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js [data-reveal][data-revealed] { opacity: 1; transform: none; }
/* Cards arrive a step behind each other rather than all at once — thirteen messages dropping onto the
   wall in one movement looks like a page loading, not like a wall being read. */
.js .cards .card[data-reveal]:nth-child(2) { transition-delay: .07s; }
.js .cards .card[data-reveal]:nth-child(3) { transition-delay: .14s; }
.js .cards .card[data-reveal]:nth-child(4) { transition-delay: .21s; }
.js .cards .card[data-reveal]:nth-child(n + 5) { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- timeline ---------- */

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline-year {
  display: grid; gap: 1.25rem; padding: 1.75rem 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 620px) { .timeline-year { grid-template-columns: 7rem 1fr; } }
.timeline-year dt, .timeline-year .year { font-family: var(--serif); color: var(--leaf); font-size: 1.5rem; line-height: 1; }
.timeline-year dd, .timeline-year .body { margin: 0; }
.timeline-year .body p:last-child { margin-bottom: 0; }
.timeline-year .body h3 { margin-top: 0; }

/* ---------- postcards ---------- */

.cards { display: grid; gap: clamp(1.2rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); margin-top: 2rem; }
.card {
  display: flex; flex-direction: column; position: relative;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 3px;
  padding: 1.9rem 1.5rem 1.3rem;
  box-shadow: var(--shadow-soft);
  transition: transform .4s ease, box-shadow .4s ease;
}
.card:nth-child(3n + 1) { transform: rotate(-.5deg); }
.card:nth-child(3n) { transform: rotate(.6deg); }
.card:hover { transform: translateY(-4px) rotate(0deg); box-shadow: var(--shadow-lift); z-index: 2; }
/* The opening wish is set in the serif and a size up, so each card shows what somebody said about her
   first, with the rest of it underneath. The large soft glyph behind it is a quotation mark taken from
   the serif font itself, not a decorative character that may be missing on someone else's machine. */
.card::before {
  content: "\201C"; position: absolute; top: .35rem; left: 1rem; z-index: 0; pointer-events: none;
  font-family: var(--serif); font-size: 4.4rem; line-height: 1; color: var(--leaf-light);
}
.card p { position: relative; z-index: 1; }
.card p:first-of-type {
  font-family: var(--serif); font-size: 1.22rem; line-height: 1.4; color: var(--ink); padding-left: 1.5rem;
}
.card blockquote { border-left: 0; padding: 0; margin: 0; font-size: 1.06rem; color: var(--ink); position: relative; }
/* Thirteen messages arrive at wildly different lengths — a two-line one and a five-paragraph one.
   Keeping the name pinned to the foot makes both read as signed postcards instead of one card looking
   unfinished next to its neighbour. */
.card p:last-of-type { margin-bottom: 0; }
.card .from { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--leaf); margin: auto 0 0; padding-top: 1.3rem; font-weight: 600; }
.card .from::before { content: ""; display: block; width: 2.6rem; height: 1px; background: var(--leaf); opacity: .4; margin-bottom: .6rem; }
@media (prefers-reduced-motion: reduce) { .card, .hero-portrait, .card:hover, .hero-portrait:hover { transform: none; } }

/* ---------- gallery ---------- */

.gallery { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); margin-top: 2rem; }
.gallery figure {
  margin: 0; overflow: hidden; border-radius: 3px;
  background: var(--paper-raised); box-shadow: var(--shadow-soft);
  transition: box-shadow .45s ease;
}
.gallery figure:hover { box-shadow: var(--shadow-lift); }
.gallery img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center;
  image-orientation: from-image; border-radius: 0;
  filter: saturate(.95);
  transition: transform .6s cubic-bezier(.22, .61, .36, 1), filter .6s ease;
}
.gallery figure:hover img { transform: scale(1.05); filter: saturate(1.05); }
.gallery figcaption { padding: .55rem .7rem .7rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
@media (prefers-reduced-motion: reduce) { .gallery img, .gallery figure:hover img { transform: none; transition: none; } }

/* ---------- slots for the owner's material ---------- */

.slot {
  border: 1px dashed var(--leaf); border-radius: 2px; padding: 1.5rem; margin: 1.5rem 0;
  background: color-mix(in srgb, var(--leaf) 5%, transparent);
}
.slot-name { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 .35rem; color: var(--leaf-deep); }
.slot-note { margin: 0; font-size: .95rem; color: var(--ink-soft); }

.todo { color: var(--leaf-deep); font-weight: 600; background: color-mix(in srgb, var(--leaf) 12%, transparent); padding: .05em .35em; border-radius: 2px; }

/* ---------- experience blocks ---------- */

/* A role block is an h3 followed by an italic line — that is what the markdown produces, so this is
   what gets styled. The old rules pointed at a class the renderer never emitted and did nothing. */
.band h3 {
  margin: 2.6rem 0 .3rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: 1.4rem; color: var(--ink);
}
.band h3 + p em {
  display: block; margin-top: .1rem; padding-bottom: .9rem;
  font-style: normal; font-family: var(--sans); font-size: .76rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--leaf);
}
.band h3 + p { margin-bottom: 1.1rem; }

/* ---------- skills ---------- */

.skill-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin-top: 1.5rem; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.chips li { font-size: .82rem; border: 1px solid var(--leaf-light); border-radius: 999px; padding: .32rem .85rem; margin: 0; background: var(--paper-raised); color: var(--ink-soft); transition: border-color .3s ease, color .3s ease; }
.chips li:hover { border-color: var(--leaf); color: var(--leaf-deep); }

/* ---------- the certificate ---------- */

.certificate {
  background: var(--paper-raised); border: 1px solid var(--ink); padding: clamp(1.75rem, 5vw, 3.5rem);
  margin-top: 2rem; position: relative; box-shadow: var(--shadow-lift);
}
.certificate::before {
  content: ""; position: absolute; inset: 20px; border: 1px solid var(--leaf-light); pointer-events: none;
}
.certificate::after {
  content: ""; position: absolute; inset: 8px; border: 1px solid var(--line); pointer-events: none;
}
.certificate .cert-kicker { text-align: center; letter-spacing: .3em; text-transform: uppercase; font-size: .7rem; color: var(--leaf); font-weight: 600; margin-bottom: 1.5rem; }
.certificate .cert-heading { text-align: center; font-size: clamp(1.5rem, 4.5vw, 2.2rem); margin: 0 0 2.2rem; }
.certificate .cert-presented { text-align: center; font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .6rem; }
.certificate .cert-name { font-family: var(--serif); text-align: center; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.05; margin: 0; color: var(--ink); }
.certificate .cert-name::after {
  content: ""; display: block; width: 7rem; height: 2px; margin: 1.1rem auto 0;
  background: linear-gradient(90deg, rgba(46, 107, 74, 0), var(--leaf), rgba(46, 107, 74, 0));
}
.certificate .cert-serial { text-align: center; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--leaf-deep); margin: 1rem 0 0; }
.certificate .cert-body { text-align: center; }
.certificate .cert-body p, .certificate .cert-body h2 { margin-inline: auto; max-width: 54ch; }
.certificate .cert-body h2 { font-size: 1.35rem; }
/* The businesses print under the promise, centred, small, and out of the sealed words. An address
   that is not live yet prints as plain text, never as a link — a kept certificate should not contain
   a click that fails. */
.cert-companies { text-align: center; margin: 2.2rem auto 0; max-width: 62ch; }
.cert-companies-title { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 1rem; }
.cert-companies ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.cert-companies li { font-family: var(--sans); font-size: .84rem; line-height: 1.5; color: var(--ink-soft); }
.cert-companies li strong { color: var(--ink); font-weight: 600; letter-spacing: .01em; }
.company-site { font-size: .76rem; letter-spacing: .04em; word-break: break-all; }
.company-site a { color: var(--leaf); text-decoration: underline; text-underline-offset: 2px; }
.company-soon { color: var(--ink-faint); font-style: italic; }
.certificate p { margin-inline: auto; }
.cert-rule { border: 0; border-top: 1px solid var(--line); margin: 2rem auto; width: 60%; }
.cert-sign { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 2.5rem; }
.cert-sign div { border-top: 1px solid var(--ink); padding-top: .5rem; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.seal { text-align: center; font-family: var(--serif); font-size: 1.05rem; color: var(--leaf-deep); margin-top: 2.6rem; letter-spacing: .04em; }
/* A rosette, cut from three stacked gradients: a serrated edge, a face of paper, a leaf at the centre.
   It is decoration on a promise from her mother, and it is not a stamp of any office — the words under
   it say what it is. */
.seal::before {
  content: ""; display: block; width: 82px; height: 82px; margin: 0 auto 1.3rem; border-radius: 50%;
  box-shadow: 0 12px 24px -14px rgba(29, 70, 49, .65);
  background:
    radial-gradient(circle 7px at 50% 50%, var(--leaf) 97%, rgba(46, 107, 74, 0) 100%),
    radial-gradient(circle 30px at 50% 50%, var(--paper-raised) 97%, rgba(252, 253, 249, 0) 100%),
    repeating-conic-gradient(from 0deg at 50% 50%, var(--leaf) 0 3.2deg, var(--leaf-deep) 3.2deg 6.4deg);
}
.seal strong {
  display: inline-block; margin-top: .5rem; padding: .5rem .9rem; border: 1px solid var(--leaf-light);
  border-radius: 2px; background: rgba(207, 224, 210, .22);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8rem; letter-spacing: .02em;
  word-break: break-all; color: var(--leaf-deep);
}
.seal-label { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); font-family: var(--sans); }
.seal-ref { font-size: .78rem; color: var(--ink-faint); font-family: var(--sans); letter-spacing: .06em; }
.seal-note { display: block; max-width: 58ch; margin: 1rem auto 0; font-family: var(--sans); font-size: .74rem; line-height: 1.55; color: var(--ink-faint); letter-spacing: 0; }
.cert-print-hint { font-size: .85rem; color: var(--ink-faint); text-align: center; margin-top: 1.5rem; }

/* ---------- CV print page ---------- */

.cv-page { max-width: 78ch; }
.cv-page h3 { margin-top: 1.6rem; }

/* ---------- colophon ---------- */

.colophon { border-top: 1px solid var(--line); padding: 2.8rem 0 3.5rem; margin-top: var(--gap); position: relative; }
.colophon::before {
  content: ""; position: absolute; top: -.44rem; left: 50%; width: .88rem; height: .88rem;
  transform: translateX(-50%); border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--leaf-deep) 0 .27rem, rgba(29, 70, 49, 0) .28rem),
    repeating-conic-gradient(from -6.5deg, var(--petal) 0deg 13deg, rgba(217, 161, 43, 0) 13deg 25.7143deg);
  box-shadow: 0 0 0 4px var(--paper);
}
.colophon p { font-size: .85rem; color: var(--ink-faint); max-width: 70ch; }
.colophon-note { font-size: .78rem; }

/* ---------- journal list ---------- */

.journal-list { list-style: none; padding: 0; margin-top: 1.5rem; }
.journal-list li { padding: 1.1rem 0; border-bottom: 1px solid var(--line); display: flex; gap: 1.25rem; align-items: baseline; flex-wrap: wrap; }
.journal-list .date { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); min-width: 7rem; }
.journal-list a { font-family: var(--serif); font-size: 1.25rem; text-decoration: none; color: var(--ink); }
.journal-list a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- print: the certificate and the CV ---------- */

@media print {
  :root { --paper: #fff; --paper-raised: #fff; }
  .topnav, .colophon, .skip, .hero-actions, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { padding: 0; }
  main::before, main::after { display: none; }
  /* Two tracks would split a photograph away from the words it belongs to across a page break. On
     paper the picture goes back above its paragraph. */
  .band-split { display: block; }
  .hero, .page-head { border: 0; padding: 0 0 1rem; }
  .display { font-size: 30pt; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .certificate { border-width: 2px; padding: 20mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .certificate::before { inset: 14mm; }
  .seal::before { width: 64px; height: 64px; margin-bottom: 8mm; }
  .certificate::after { inset: 4mm; }
  .slot { display: none; }
  a { color: inherit; text-decoration: none; }
  .cert-companies { margin-top: 12mm; }
  .cert-companies li { font-size: 9pt; color: #000; }
  .cert-companies li strong { color: #000; }
  .company-soon { color: #000; }
  .seal-note { font-size: 8pt; }
}