/* ==========================================================================
   cwgenthe.com
   Print-era identity: black ink on paper, one cobalt accent, ruled lines.
   ========================================================================== */

:root {
  --paper: #ffffff;
  --ink: #161513;
  --ink-2: #5c5c5c;
  --accent: #1f45c4;     /* cobalt: the one accent colour */
  --red: var(--accent);  /* the name the generated logo art uses */
  --stamp: var(--paper);  /* the carved cuts in the logo show the page paper */

  --rule: 1.5px solid var(--ink);
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(10px, 1.6vw, 22px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

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

body {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: var(--pad);
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
p { margin: 0; }

::selection { background: var(--accent); color: var(--paper); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: -5px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sheet: the ruled frame ----------------------------------------------- */

.sheet {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: var(--rule);
}

/* Top bar: your name (home) on the left, page navigation right-aligned */
.bar {
  display: flex;
  flex-wrap: wrap;
  border-bottom: var(--rule);
}

/* The separator between words is an asterisk. Archivo draws it up at cap height, so it's lowered
   to the middle of the letters: of the lowercase in mixed-case text, of the capitals in all-caps
   text (measured in the font). Browser-tab titles can't be styled, so they keep a plain *. */
.sep { position: relative; top: .245em; }
.bar__cell .sep { top: .165em; }

.bar__cell {
  padding: .8rem 1rem;
  font: 600 .75rem/1.2 var(--font);
  font-stretch: 112.5%;
  letter-spacing: .06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bar__home { flex: 1 1 auto; text-decoration: none; transition: color .2s; }
.bar__home:hover { color: var(--accent); }

.bar__nav { display: flex; margin-left: auto; }
.bar__role { margin-left: auto; border-left: var(--rule); white-space: nowrap; }  /* the landing page's "Composer * Sound Designer" */

.nav__item {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  border-left: var(--rule);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.nav__mark { flex: none; width: 1.2em; height: 1.2em; }
.nav__item[aria-current="page"] .nav__mark { color: var(--accent); }
.nav__item:hover { background: var(--ink); color: var(--paper); }
.nav__item:hover .nav__mark { color: var(--paper); }
.bar__nav--text .nav__item[aria-current="page"] { color: var(--accent); }  /* no marks: the label goes cobalt */
.bar__nav--text .nav__item:hover { color: var(--paper); }

/* Stage: the stamp ----------------------------------------------------- */

.stage {
  --stage-pad: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  place-items: center;
  padding: var(--stage-pad);
}

.stamp {
  display: block;
  width: min(100%, calc((100svh - 22rem) * .79), 470px);
  min-width: min(220px, 100%);
  height: auto;
}

.stamp-type { font-family: var(--font); font-weight: 800; font-stretch: 125%; }
.stamp-sub { font-weight: 500; }   /* the line under the name: lighter than the name */

/* Links ------------------------------------------------------------------ */

.links {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--rule);
}

.link {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "num   arrow"
    "title title"
    "sub   sub";
  row-gap: .2rem;
  padding: 1rem 1rem 1.1rem;
  transition: background-color .2s, color .2s;
}
.link + .link { border-left: var(--rule); }

.link__num {
  grid-area: num;
  font: 600 .75rem/1 var(--font);
  letter-spacing: .06em;
  color: var(--red);
}

.link__arrow {
  grid-area: arrow;
  justify-self: end;
  font-size: 1.25rem;
  line-height: .6;
  color: var(--accent);
  transition: transform .3s var(--ease), color .2s;
}

.link__title {
  grid-area: title;
  margin-top: clamp(1.5rem, 4.5vh, 3rem);
  font: 800 clamp(1.5rem, 2.6vw, 2.25rem)/1 var(--font);
  font-stretch: 125%;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.link__status { white-space: nowrap; }  /* " * Booked through January" wraps as one piece */
.link__sub {
  grid-area: sub;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .9375rem;
  color: var(--ink-2);
  transition: color .2s;
}

.link:hover { background: var(--ink); color: var(--paper); }
.link:hover .link__sub { color: rgb(255 255 255 / .65); }
.link:hover .link__arrow { color: var(--paper); transform: translateX(3px) rotate(-45deg); }

/* Phones ------------------------------------------------------------------ */

@media (max-width: 760px) {
  .bar__home { flex-basis: 100%; }
  .bar__nav { flex-basis: 100%; border-top: var(--rule); }
  .bar__role { flex-basis: 100%; border-left: 0; border-top: var(--rule); }
  .nav__item { flex: 1 1 0; justify-content: center; }
  .nav__item:first-child { border-left: 0; }

  .stamp { width: min(84%, 380px, calc((100svh - 13rem) * .77)); min-width: 0; }


  .links { grid-template-columns: 1fr; }
  .link + .link { border-left: 0; border-top: var(--rule); }
  .link {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title arrow"
      "sub   arrow";
    align-items: center;
    padding: .9rem 1rem;
  }
  .link__title { margin-top: 0; font-size: 1.375rem; }
}

/* 404 --------------------------------------------------------------------- */

.simple {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  border: var(--rule);
}
.simple .bar__cell { padding: 0; }
.sheet > .simple { border: 0; }
.simple h1 {
  margin: 0;
  font: 900 clamp(3rem, 9vw, 6.5rem)/.9 var(--font);
  font-stretch: 125%;
  letter-spacing: -.02em;
  word-spacing: .12em;   /* the tight wide caps would otherwise run "THANK YOU" together */
  text-transform: uppercase;
}
.simple p { color: var(--ink-2); }
.simple a {
  margin-top: .5rem;
  padding: .8rem 1.2rem;
  font: 700 .8125rem/1 var(--font);
  font-stretch: 112.5%;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: var(--rule);
  transition: background-color .2s, color .2s;
}
.simple a:hover { background: var(--ink); color: var(--paper); }

/* Motion: stripes wipe in on load ------------------------------------------ */

.band {
  transform-box: fill-box;
  transform-origin: left center;
  animation: wipe .8s var(--ease) both;
  animation-delay: calc(var(--i) * 55ms);
}
@keyframes wipe { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .band { animation: none; }
  .link__arrow { transition: none; }
}

/* Inner pages ---------------------------------------------------------- */

.stage--page { place-items: start stretch; align-content: start; }

.page { width: min(100%, 62rem); margin-inline: auto; }

.page__title {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font: 900 clamp(2.25rem, 6vw, 4.25rem)/.95 var(--font);
  font-stretch: 125%;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
/* Contact: the headline is the raven pulling a cable down from the top bar, mirrored so it faces
   the form. The image starts at the bar's bottom rule (it sits up through the page's top padding),
   so the cable meets the line. */
.title-mark { margin: 0 0 clamp(1.25rem, 3vw, 2rem); line-height: 1; }
.title-mark__bird { display: block; height: clamp(7.97rem, 18.6vw, 13.3rem); width: auto; margin-top: calc(-1 * var(--stage-pad)); transform: scaleX(-1); }  /* the bird itself is about 6 to 10rem */
/* The headlines drawn by tools/hello_raven.py (the bird writing a word with its cable): the width
   follows the drawing's own (--w), so the bird stays the same size whatever the word. A pulled one
   ("Contact", whose cord rises to the top bar) starts at the bar's rule like the image above, and
   its cord stops at that edge. */
/* The bird's head starts where the other pages' headings start: the caps of .page__title sit .112em
   below the top of its line (900 weight, 125% width, line-height .95), so that much below the padding. */
.hello { display: block; width: min(100%, calc(var(--w) * .45px)); height: auto; margin-top: calc(.112 * clamp(2.25rem, 6vw, 4.25rem)); overflow: visible; }
.hello--pulled { margin-top: calc(-1 * var(--stage-pad)); overflow: hidden; }
.page__intro { max-width: 52ch; margin-bottom: clamp(1.25rem, 3vw, 2rem); color: var(--ink-2); }
.page__body p { max-width: 62ch; margin-bottom: 1em; color: var(--ink-2); }

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  padding-top: 1.25rem;
  border-top: var(--rule);
}
.facts dt { margin-bottom: .4rem; font: 600 .7rem/1 var(--font); font-stretch: 112.5%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.facts dd { margin: 0; }
.facts a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; }

/* Info: socials, one quiet line under the facts */
.elsewhere { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; margin-top: 1.5rem; }
.elsewhere__title { margin: 0; font: 600 .7rem/1 var(--font); font-stretch: 112.5%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.socials { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.social { text-decoration-color: var(--accent); text-underline-offset: .2em; transition: color .2s; }
.social__arrow { display: inline-block; margin-left: .2em; font-size: .85em; color: var(--accent); transition: transform .3s var(--ease); }
.social:hover { color: var(--accent); }
.social:hover .social__arrow { transform: translate(1px, -1px); }

.rows { margin: 0; padding: 0; list-style: none; border-top: var(--rule); }
.row a {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 15rem) 1.5rem;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: var(--rule);
  text-decoration: none;
}
.rows--plain .row a { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem) 1.5rem; }
.row__year { font: 600 .75rem/1 var(--font); letter-spacing: .06em; color: var(--ink-2); }
.row__title { font: 800 clamp(1.2rem, 2.6vw, 2rem)/1.1 var(--font); font-stretch: 125%; text-transform: uppercase; transition: color .2s; }
.row__meta { font-size: .9375rem; color: var(--ink-2); }
.row__arrow { justify-self: end; color: var(--accent); transition: transform .3s var(--ease); }
.row a:hover .row__title { color: var(--accent); }
.row a:hover .row__arrow { transform: translateX(3px) rotate(-45deg); }

/* Small section labels (Reel, Work, Selected credits, Elsewhere) */
.section { margin-top: clamp(2rem, 5vw, 3.25rem); }
.section__title { margin: 0 0 .9rem; font: 600 .7rem/1 var(--font); font-stretch: 112.5%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.page__intro + .section { margin-top: 0; }

/* Portfolio: the reel. Paste the embed (ReelCrafter, Vimeo, YouTube) into .reel__frame */
.reel__frame { display: grid; place-items: center; aspect-ratio: 16 / 9; border: var(--rule); }
.reel__frame:has(iframe) { display: block; aspect-ratio: auto; border: 0; }
.reel__frame iframe { display: block; width: 100%; min-height: 420px; border: 0; }
.reel__frame--video iframe { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
.reel__frame--audio { aspect-ratio: 3 / 1; }  /* the placeholder's shape; the ReelCrafter player sets its own height */
.reel + .reel { margin-top: 1.25rem; }
.reel__more { margin-top: 1rem; font-size: .9375rem; color: var(--ink-2); }

/* Portfolio: selected credits, a compact list under the work */
.credits { margin: 0; padding: 0; list-style: none; border-top: var(--rule); }
.credit {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 10rem);
  gap: 1rem;
  align-items: baseline;
  padding: .65rem 0;
  border-bottom: 1px solid rgb(22 21 19 / .22);
  font-size: .9375rem;
}
.credit__year { font: 600 .75rem/1 var(--font); letter-spacing: .06em; color: var(--ink-2); }
.credit__title { font-weight: 600; }
.credit__by, .credit__role { color: var(--ink-2); }
.credit__role { text-align: right; }

/* Info: the bio beside the headshot */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.headshot { margin: 0; }
.headshot img { display: block; width: 100%; height: auto; border: var(--rule); }
.headshot__ph { display: grid; place-items: center; aspect-ratio: 4 / 5; border: 1.5px dashed var(--ink-2); font-size: .875rem; }

/* Forms: the contact form and the CV password */
.form { display: grid; gap: 1.1rem; max-width: 40rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field__label, .choices legend { font: 600 .7rem/1 var(--font); font-stretch: 112.5%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.field__label i { font-style: normal; text-transform: none; letter-spacing: 0; }
.field input, .field textarea {
  width: 100%;
  padding: .7rem .8rem;
  border: var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 400 1rem/1.4 var(--font);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8c8c8c; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.choices { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; }
.choices legend { margin-bottom: .5rem; padding: 0; }
.choices__set { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: inline-block;
  padding: .55rem .8rem;
  border: var(--rule);
  font: 600 .75rem/1 var(--font);
  font-stretch: 112.5%;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.choice:hover span { background: rgb(22 21 19 / .07); }
.choice input:checked + span { background: var(--ink); color: var(--paper); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.button {
  justify-self: start;
  padding: .85rem 1.4rem;
  border: var(--rule);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font: 700 .8125rem/1 var(--font);
  font-stretch: 112.5%;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.button:hover { background: var(--accent); border-color: var(--accent); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.button:disabled { opacity: .6; cursor: progress; }
.form__note { font-size: .875rem; color: var(--ink-2); }
.form__note a, .page__intro a, .page__body a, .reel__more a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; }
.bot-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Contact: a little month calendar under the form, tied to the Timeline field. Today is circled in
   cobalt pen; the first and last picked days are solid cobalt dots, joined by a light cobalt band;
   hovering shows a tag with the day count; past days can't be picked. */
.calendar { position: relative; max-width: 21rem; margin-top: clamp(2rem, 5vw, 3rem); padding: .9rem 1rem 1rem; border: var(--rule); }
.calendar__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; border-bottom: var(--rule); }
.calendar__month { margin: 0; font: 800 .9375rem/1 var(--font); font-stretch: 125%; text-transform: uppercase; }
.calendar__nav { display: flex; gap: .15rem; margin-right: -.35rem; }
.calendar__step { width: 1.9rem; height: 1.9rem; padding: 0; border: 0; background: none; color: var(--accent); font: 400 1.1rem/1 var(--font); cursor: pointer; transition: color .2s, transform .3s var(--ease); }
.calendar__step:hover { color: var(--ink); }
.calendar__step[data-step="-1"]:hover { transform: translateX(-2px); }
.calendar__step[data-step="1"]:hover { transform: translateX(2px); }
.calendar__step:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.calendar__grid { width: 100%; margin-top: .35rem; border-collapse: collapse; table-layout: fixed; text-align: center; }
.calendar__grid th { padding: .5rem 0 .4rem; font: 600 .65rem/1 var(--font); font-stretch: 112.5%; letter-spacing: .08em; color: var(--ink-2); }
.calendar__grid td { position: relative; height: 2.3rem; padding: 0; font: 500 .875rem/1 var(--font); font-variant-numeric: tabular-nums; }
.calendar__grid .is-weekend { color: var(--ink-2); }
.calendar__grid .is-past { color: rgb(22 21 19 / .3); }
.calendar__grid .is-today { background: url("/assets/img/today-ring.svg") center / 2.25rem 2.1rem no-repeat; color: var(--accent); font-weight: 700; }
.calendar__day { position: relative; z-index: 1; display: block; width: 2.05rem; height: 2.05rem; margin: 0 auto; padding: 0; border: 0; border-radius: 50%;
                 background: none; color: inherit; font: inherit; cursor: pointer; transition: background-color .15s, color .15s; }
.calendar__day:disabled { cursor: default; }
.calendar__day:not(:disabled):hover { background: rgb(31 69 196 / .1); }
.calendar__day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.calendar__day[aria-pressed="true"], .calendar__day[aria-pressed="true"]:hover { background: var(--accent); color: var(--paper); font-weight: 700; }
/* the band: under the days, from the first dot's centre to the last dot's centre */
.calendar__grid td::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2.05rem; margin-top: -1.025rem; }
.calendar__grid td.in-range::before, .calendar__grid td.in-preview::before { background: rgb(31 69 196 / .13); }
.calendar__grid td.in-preview::before { background: rgb(31 69 196 / .07); }
.calendar__grid td.is-start.has-end::before, .calendar__grid td.is-start.has-preview::before { left: 50%; background: rgb(31 69 196 / .13); }
.calendar__grid td.is-start.has-preview::before { background: rgb(31 69 196 / .07); }
.calendar__grid td.is-end::before { right: 50%; background: rgb(31 69 196 / .13); }
.calendar__grid td.preview-end::before { right: 50%; background: rgb(31 69 196 / .07); }
.calendar__grid td.preview-end .calendar__day { background: rgb(31 69 196 / .18); }
/* the count: a tag above the day you hover (and on the last day, just after it's picked) */
.calendar__tip { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - .35rem)); padding: .32rem .45rem .3rem;
                 background: var(--ink); color: var(--paper); font: 600 .62rem/1 var(--font); font-stretch: 112.5%; letter-spacing: .08em;
                 text-transform: uppercase; white-space: nowrap; pointer-events: none; }
@media (forced-colors: active) {
  .calendar__day[aria-pressed="true"] { outline: 2px solid Highlight; }
  .calendar__grid td.in-range .calendar__day { outline: 1px dotted Highlight; }
}

/* CV: password on the left, the request on the right. The two columns share rows (heading,
   field or note, button, status) so Open CV and Request the CV line up at any width. */
.cv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3rem); row-gap: 1.1rem; align-items: start; }
.cv > section { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-items: start; }
.cv .section__title { margin: 0; }
.cv .form { display: contents; }
.cv__status { min-height: 1.4em; font-size: .9375rem; }
.cv__status--error { color: var(--accent); font-weight: 500; }  /* errors use the one accent, not a second colour */
.field input[aria-invalid="true"] { border-color: var(--accent); }
.cv__open { display: flex; flex-wrap: wrap; gap: .75rem; }
.cv__request { margin: 0; }
a.button { display: inline-block; text-decoration: none; }
.button--ghost { background: transparent; color: var(--ink); }
.button--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Placeholder copy: remove the "ph" class once the real text is in */
.ph { color: var(--ink-2); text-decoration: underline dashed var(--line-2, #999999); text-decoration-thickness: 1px; text-underline-offset: .25em; }

@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .facts { grid-template-columns: 1fr; }
  .intro { grid-template-columns: 1fr; }
  .headshot { max-width: 14rem; }
  .credit { grid-template-columns: minmax(0, 1fr) auto; row-gap: .2rem; }
  .credit__year { grid-column: 1 / -1; }
  .credit__by { grid-column: 1; }
  .credit__role { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .form__row, .cv { grid-template-columns: 1fr; }
  .cv > section + section { margin-top: 1.5rem; }
  .row a, .rows--plain .row a { grid-template-columns: minmax(0, 1fr) auto; row-gap: .35rem; }
  .row__year { grid-column: 1; }
  .row__title { grid-column: 1; }
  .row__meta { grid-column: 1; }
  .row__arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* Short screens (landscape phones, small laptop windows): fit the label to the height */
@media (max-height: 560px) {
  .stage { --stage-pad: .75rem; padding: var(--stage-pad); }
  .stamp { width: min(100%, calc((100svh - 8.5rem) * .78)); min-width: 0; }
  .bar__cell { padding-block: .55rem; }
  .link { grid-template-columns: 1fr auto; grid-template-areas: "title arrow" "sub arrow"; align-items: center; padding: .6rem 1rem; }
  .link__title { margin-top: 0; font-size: 1.35rem; }
}

/* The profile icons, centred in the white space under the page's box (SOCIALS in build_site.py).
   No border; ink black, cobalt on hover. */
body:has(> .foot) { grid-template-rows: 1fr auto; }
.foot { display: flex; justify-content: center; align-items: center; gap: 1.1rem; padding-top: 1.5rem; margin-bottom: calc(-.35 * var(--pad)); }
.foot__handle { font: 600 .75rem/1 var(--font); font-stretch: 112.5%; letter-spacing: .08em; color: var(--ink); text-decoration: none; transition: color .2s; }
a.foot__handle:hover, a.foot__handle:focus-visible { color: var(--accent); }
.icons { display: flex; align-items: center; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.icon { display: block; width: 1.25rem; height: 1.25rem; color: var(--ink); transition: color .2s; }
.icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon svg .fill { fill: currentColor; stroke: none; }
.icon:hover, .icon:focus-visible { color: var(--accent); }

/* Windows high-contrast themes: the logo follows the system colours */
@media (forced-colors: active) {
  :root { --ink: CanvasText; --stamp: Canvas; --paper: Canvas; --accent: LinkText; }
}