/* ============================================================
   Adel Anarbayeva — portfolio
   Direction: "steppe night" navy ground, one warm gold thread.
   The gold thread is the signature: a crochet chain stitch that
   knits itself down the page as you scroll, because she crochets
   and because the page is one continuous run of work. Section
   numbers sit as knots on that thread.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --ink:        #0B1A2B;  /* steppe night, page ground        */
  --ink-2:      #102336;  /* raised panel                     */
  --ink-3:      #16304a;  /* hairline / chip border           */
  --thread:     #E8B33D;  /* the gold thread. only accent.    */
  --thread-dim: #8a6a24;
  --sky:        #63C6E0;  /* Kazakh sky, data + links         */
  --paper:      #F2EFE6;  /* warm off-white type              */
  --mute:       #8FA3B8;  /* meta, captions. 6.8:1 on --ink   */
  --mute-2:     #8095AB;  /* small mono labels. Clears WCAG AA
                             (4.5:1) on every ground it lands on:
                             page 5.7, cards 5.5, a lit pipeline
                             node 4.9 */

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --spine: 76px;          /* width of the thread gutter       */
  --shell: 1180px;        /* content max width                */
  --pad:   clamp(20px, 5vw, 56px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ambient: two soft light sources over a woven navy textile.
   The weave is a real fabric macro, held down to a whisper, because the
   whole page is about thread. Photo: Mike Hindle / Unsplash. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 620px at 82% -8%,  rgba(99, 198, 224, .10), transparent 65%),
    radial-gradient(760px 560px at 6%  102%, rgba(232, 179, 61, .07), transparent 65%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("../tex/weave.jpg");
  background-size: 760px auto;
  background-repeat: repeat;
  opacity: .055;
  mix-blend-mode: soft-light;
}

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

a { color: inherit; text-decoration: none; }

::selection { background: var(--thread); color: var(--ink); }

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

/* ---------- type primitives ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.03em;
  font-variation-settings: "wdth" 100, "opsz" 48;
  margin: 0;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0;
}

.eyebrow .tick { color: var(--thread); }

.lede {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  color: #cfdae6;
  max-width: 60ch;
}

.mono { font-family: var(--font-mono); }

.gold { color: var(--thread); }
.sky  { color: var(--sky); }

/* ---------- shell + spine layout ---------- */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--pad);
}

#thread-host {
  position: relative;
  z-index: 1;
}

/* the pattern she is following: one static faint chain, whole page long */
#spine-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

#spine-guide path {
  fill: none;
  stroke: rgba(242, 239, 230, .055);
  stroke-width: 1;
}

/* the thread she has actually worked, one segment per section so that
   redrawing on scroll only ever repaints one band */
.thread-seg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.thread-seg path {
  fill: none;
  stroke: var(--thread);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .9;
}

/* the hook: the working point, held still while the page passes through it */
#hook {
  position: fixed;
  top: 72vh;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--thread);
  box-shadow: 0 0 0 4px rgba(232, 179, 61, .13), 0 0 16px 3px rgba(232, 179, 61, .5);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity .5s var(--ease);
}

#hook.is-on { opacity: 1; }

/* an invisible occupant of the spine column, so the thread's horizontal
   position can be measured from real layout instead of guessed */
.spine-ref {
  grid-column: 1;
  width: 100%;
  height: 1px;
  align-self: start;
}

/* ---------- section frame ---------- */
.band {
  position: relative;
  z-index: 2;
  padding-block: clamp(62px, 7.4vw, 100px);
}

/* jumping to a section must not park its eyebrow behind the fixed top bar */
.hero, .band, .contact, #top { scroll-margin-top: 92px; }

.band-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: var(--spine) minmax(0, 1fr);
  gap: 0;
}

.band-body { min-width: 0; }

/* row marker: the knot the thread ties at each section */
.knot {
  position: relative;
  padding-top: 6px;
}

.knot-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--thread);
  opacity: .9;
  margin-top: 16px;
}

/* the dot has to land exactly on the generated chain, so centre it on the
   spine column rather than hard coding a left offset per breakpoint */
.knot::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--thread);
  box-shadow: 0 0 0 5px rgba(232, 179, 61, .14), 0 0 14px rgba(232, 179, 61, .55);
}

.section-head { margin-bottom: clamp(34px, 4.5vw, 56px); }

.section-head .eyebrow { margin-bottom: 18px; }

.section-title {
  font-size: clamp(34px, 5.2vw, 62px);
}

.section-note {
  margin-top: 20px;
  color: var(--mute);
  max-width: 56ch;
  font-size: 16px;
}

/* ---------- top bar ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px var(--pad);
  background: rgba(11, 26, 43, 0);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}

.topbar.is-stuck {
  background: rgba(11, 26, 43, .82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--ink-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper);
  margin-right: auto;
}

.brand svg { width: 26px; height: 26px; flex: none; }

.brand-name { display: none; }
.brand-abbr { display: inline; }

.navlinks {
  display: flex;
  gap: 4px;
}

.navlinks a {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 8px 11px;
  border-radius: 999px;
  transition: color .25s var(--ease), background .25s var(--ease);
}

.navlinks a:hover { color: var(--paper); background: rgba(242, 239, 230, .06); }

/* current section: gold, plus an underline so it is not colour alone */
.navlinks a.is-active {
  color: var(--thread);
  box-shadow: inset 0 -1px 0 currentColor;
  border-radius: 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--ink-3);
  color: var(--paper);
  background: transparent;
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}

.btn:hover { border-color: var(--thread); color: var(--thread); transform: translateY(-2px); }

.btn-solid {
  background: var(--thread);
  border-color: var(--thread);
  color: #16130a;
}

.btn-solid:hover {
  background: #f3c358;
  border-color: #f3c358;
  color: #16130a;
}

.btn svg { width: 14px; height: 14px; }

/* ============================================================
   HERO — name, role, one short paragraph, three numbers
   ============================================================ */
.hero {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 132px 88px;
}

.hero-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: var(--spine) minmax(0, 1fr);
  width: 100%;
}

/* the headline gets the full width so it can be set large; everything
   that supports it sits underneath in two columns */
.hero-head { grid-column: 2; min-width: 0; }

.hero-lower {
  grid-column: 2;
  min-width: 0;
  margin-top: clamp(34px, 4.4vw, 54px);
}

.hero-eyebrow { margin-bottom: 26px; }

.hero-title {
  font-size: clamp(38px, 8.6vw, 104px);
  font-variation-settings: "wdth" 96, "opsz" 96;
}

.hero-role {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.5vw, 31px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: #cfdae6;
  animation: fadeUp .9s var(--ease) .42s both;
}

.hero-title .line { display: block; overflow: hidden; }

.hero-title .line > span {
  display: block;
  transform: translateY(105%);
  animation: riseIn .95s var(--ease) forwards;
}

.hero-title .line:nth-child(1) > span { animation-delay: .10s; }
.hero-title .line:nth-child(2) > span { animation-delay: .19s; }
.hero-title .line:nth-child(3) > span { animation-delay: .28s; }

@keyframes riseIn { to { transform: translateY(0); } }

/* the one word that carries the thesis, underlined by the thread */
.stitched {
  color: var(--thread);
  position: relative;
  white-space: nowrap;
  font-style: normal;         /* it is an <em> for emphasis, not for italics */
  display: inline-block;      /* gives the stitch a box to sit under, so it
                                 never rides up over the descenders */
  padding-bottom: .13em;
}

.stitched::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: .075em;             /* everything in em so it tracks the type scale */
  background-image: repeating-linear-gradient(
    90deg,
    var(--thread) 0 .1em,
    transparent .1em .18em
  );
  transform: scaleX(0);
  transform-origin: left;
  animation: stitchIn 1s var(--ease) .95s forwards;
  opacity: .78;
}

@keyframes stitchIn { to { transform: scaleX(1); } }

.hero-lede {
  margin: 0;
  animation: fadeUp .9s var(--ease) .52s both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
  animation: fadeUp .9s var(--ease) .64s both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* hero stats */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 26px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--ink-3);
  animation: fadeUp .9s var(--ease) .76s both;
}

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(27px, 3.1vw, 39px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--paper);
}

.stat-value .unit { color: var(--thread); }

.stat-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-top: 9px;
  line-height: 1.5;
}

/* ---------- scroll cue ---------- */
.cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mute-2);
  animation: fadeUp 1s var(--ease) 1.3s both;
}

.cue i {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(var(--thread), transparent);
  animation: cueSlide 2.1s var(--ease) infinite;
  transform-origin: top;
}

@keyframes cueSlide {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(40px); opacity: 0; }
}

/* ============================================================
   REVEAL — one shared scroll behaviour, used everywhere
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }

.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }

/* ============================================================
   THE PATTERN (about)
   ============================================================ */
.pattern-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.prose p {
  margin: 0 0 20px;
  color: #c6d3e0;
  font-size: clamp(16.5px, 1.25vw, 18.5px);
  line-height: 1.68;
  max-width: 54ch;
}

.prose p:last-child { margin-bottom: 0; }

.prose strong { color: var(--paper); font-weight: 600; }

/* the gauge panel: a knitting pattern gauge, read as a spec sheet */
.gauge {
  border: 1px solid var(--ink-3);
  border-radius: 14px;
  background: rgba(16, 35, 54, .5);
  overflow: hidden;
}

.gauge-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--thread);
  display: flex;
  align-items: center;
  gap: 10px;
}

.gauge-head svg { width: 15px; height: 15px; flex: none; }

.gauge dl {
  margin: 0;
  padding: 6px 18px 16px;
}

.gauge div {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(22, 48, 74, .9);
}

.gauge div:last-child { border-bottom: 0; }

.gauge dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mute-2);
  flex: 0 0 84px;
  line-height: 1.6;
}

.gauge dd {
  margin: 0;
  font-size: 14.5px;
  color: #cfdae6;
  line-height: 1.5;
}

.gauge dd .sky { font-weight: 500; }

/* portrait — drop a photo at assets/adel.jpg and it replaces the monogram */
.portrait {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 30px;
}

.portrait-img {
  width: 104px;
  height: 128px;
  border-radius: 13px;
  flex: none;
  border: 1px solid var(--ink-3);
  background: linear-gradient(150deg, #1b3a58, #0d2033);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
}

.portrait-img img { width: 100%; height: 100%; object-fit: cover; }

.portrait-img .mono-initials {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--thread);
}

.portrait figcaption { display: grid; gap: 7px; }

.who-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.015em;
}

.who-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute-2);
}

/* ============================================================
   PHOTOGRAPHY
   Real photographs, tinted back towards the page palette so they
   sit in the design rather than on top of it.
   ============================================================ */
.photo {
  position: relative;
  background-color: #0d1d2f;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  /* pull the saturation back so seven photographs from seven photographers
     read as one set on a navy page */
  filter: saturate(.8) contrast(1.02);
}

.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(11, 26, 43, .34), rgba(11, 26, 43, .74));
}

/* the City of London shot is a long exposure and already very dark, so it
   needs less scrim than the rest of the set */
.photo--london {
  background-image: url("../img/london.jpg");
  background-position: center 42%;
  filter: saturate(.85) contrast(1.02) brightness(1.16);
}
.photo--robotics { background-image: url("../img/robotics.jpg"); }
.photo--road     { background-image: url("../img/road.jpg"); }
.photo--ice      { background-image: url("../img/ice.jpg"); }
.photo--yarn     { background-image: url("../img/yarn.jpg"); }
.photo--wool     { background-image: url("../img/wool.jpg"); }

/* ============================================================
   ROWS (experience)
   ============================================================ */
.rows { display: flex; flex-direction: column; gap: clamp(18px, 2.6vw, 30px); }

.row-card {
  position: relative;
  border: 1px solid var(--ink-3);
  border-radius: 16px;
  background: rgba(16, 35, 54, .38);
  overflow: hidden;
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}

.row-main { padding: clamp(22px, 3vw, 34px); }

/* a photograph of the place, bled to the card edges */
.row-card > .photo {
  height: clamp(120px, 15vw, 168px);
  border-radius: 15px 15px 0 0;
}

.row-card.is-featured > .photo { height: clamp(160px, 20vw, 250px); }

.row-card > .photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 48%;
  background: linear-gradient(to top, rgba(16, 35, 54, .92), transparent);
}

.row-card:hover {
  border-color: rgba(232, 179, 61, .38);
  background: rgba(16, 35, 54, .62);
  transform: translateY(-3px);
}

.row-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

/* real brand marks, at their own aspect ratio rather than squashed into a
   square. Three treatments, because the source artwork differs:
     .mark            already legible on navy
     .mark--invert    black artwork, flipped to white
     .mark--plate     full colour artwork that needs a light ground  */
.mark {
  height: 30px;
  width: auto;
  max-width: 168px;
  object-fit: contain;
  opacity: .88;
  flex: none;
  transition: opacity .35s var(--ease);
}

.mark--invert { filter: brightness(0) invert(1); opacity: .8; }

.mark--plate {
  background: #fbfaf7;
  border-radius: 7px;
  padding: 5px 8px;
  height: 34px;
  max-width: 184px;
  opacity: 1;
  box-sizing: content-box;
}

.row-card:hover .mark,
.cred:hover .mark { opacity: 1; }

.row-headings { flex: 1 1 260px; min-width: 0; }

.row-mark { margin-bottom: 18px; }

.row-role {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.18;
  margin: 0;
}

.row-org {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--sky);
  margin-top: 9px;
}

.row-when {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .09em;
  color: var(--mute-2);
  text-align: right;
  flex: 0 0 auto;
  line-height: 1.8;
  padding-top: 4px;
}

.row-when b { display: block; color: var(--mute); font-weight: 500; }

.row-lead {
  margin: 20px 0 0;
  color: #c6d3e0;
  font-size: 16.5px;
  max-width: 68ch;
}

.bullets {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.bullets li {
  position: relative;
  padding-left: 24px;
  color: #aebdcd;
  font-size: 15.5px;
  line-height: 1.6;
}

/* a stitch, not a bullet */
.bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .58em;
  width: 9px;
  height: 9px;
  border: 1.4px solid var(--thread);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  opacity: .75;
}

.bullets li b { color: var(--paper); font-weight: 600; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(22, 48, 74, .8);
}

.tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mute);
  border: 1px solid var(--ink-3);
  border-radius: 999px;
  padding: 5px 11px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.row-card:hover .tag { border-color: rgba(232, 179, 61, .22); }
.tag:hover { color: var(--thread); border-color: var(--thread); }

/* compact card for the earliest role */
.row-card.is-compact .row-main { padding-block: clamp(18px, 2.2vw, 24px); }

/* ============================================================
   THE WORKFLOW — the flagship build, drawn as the pipeline
   ============================================================ */
.pipe {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--ink-3);
  border-radius: 18px;
  background: linear-gradient(170deg, rgba(22, 48, 74, .55), rgba(11, 26, 43, .86));
  padding: clamp(22px, 3.2vw, 40px);
  overflow: hidden;
}

/* a market data screen, blurred right back so it is atmosphere and not
   a legible screenshot sitting behind the diagram */
.pipe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/data.jpg") center / cover no-repeat;
  filter: blur(9px) saturate(.5) brightness(.4);
  transform: scale(1.1);
}

.pipe-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-bottom: clamp(26px, 3vw, 38px);
}

.pipe-head .badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--thread);
  border: 1px solid rgba(232, 179, 61, .3);
  border-radius: 999px;
  padding: 5px 12px;
}

.pipe-head .badge i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--thread);
  animation: pulse 1.7s ease-in-out infinite;
}

.pipe-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(6px, 1.2vw, 14px);
  position: relative;
}

.node {
  position: relative;
  border: 1px solid var(--ink-3);
  border-radius: 12px;
  background: rgba(11, 26, 43, .74);
  padding: 16px 13px 15px;
  min-width: 0;
  transition: border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}

.node.is-hot {
  border-color: var(--thread);
  background: rgba(232, 179, 61, .09);
  transform: translateY(-4px);
}

.node-i {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--mute-2);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.node.is-hot .node-i { color: var(--thread); }

.pipe-head .marks {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pipe-head .marks .mark { height: 20px; max-width: 108px; opacity: .82; }
.pipe-head .marks .x { color: var(--mute-2); font-size: 14px; }

.node-icon { width: 22px; height: 22px; margin-bottom: 12px; color: var(--sky); }
.node-icon svg { width: 100%; height: 100%; }
.node.is-hot .node-icon { color: var(--thread); }

.node-name {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.34;
  color: var(--paper);
  letter-spacing: -.005em;
}

.node-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-top: 8px;
  line-height: 1.55;
}

/* the connecting rail + travelling packets */
.pipe-rail {
  position: relative;
  height: 34px;
  margin-top: 4px;
}

.pipe-rail-line {
  position: absolute;
  left: 8.33%;
  right: 8.33%;
  top: 16px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--ink-3) 0 6px, transparent 6px 12px);
}

.packet {
  position: absolute;
  top: 11px;
  left: 8.33%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--thread);
  box-shadow: 0 0 12px 2px rgba(232, 179, 61, .55);
  animation: travel 5.4s linear infinite;
}

.packet:nth-child(3) { animation-delay: 1.8s; }
.packet:nth-child(4) { animation-delay: 3.6s; }

@keyframes travel {
  0%   { left: 8.33%;  opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { left: 91.67%; opacity: 0; }
}

/* outcomes of the build */
.outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(26px, 3.2vw, 38px);
}

.outcome {
  border: 1px solid var(--ink-3);
  border-left: 2px solid var(--thread);
  border-radius: 4px 12px 12px 4px;
  background: rgba(16, 35, 54, .42);
  padding: 20px 19px;
}

.outcome-k {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.6vw, 31px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--thread);
}

.outcome-t {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #b9c8d8;
}

/* ============================================================
   SKILLS
   ============================================================ */
.skill-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.sgroup-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--thread);
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.sgroup-title span { color: var(--mute-2); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: #b9c8d8;
  border: 1px solid var(--ink-3);
  border-radius: 7px;
  padding: 6px 11px;
  background: rgba(16, 35, 54, .35);
  transition: color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
  cursor: default;
}

.chip:hover {
  color: var(--ink);
  background: var(--thread);
  border-color: var(--thread);
  transform: translateY(-2px);
}

/* ============================================================
   EDUCATION + CREDENTIALS
   ============================================================ */
.edu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}

.degree {
  border: 1px solid var(--ink-3);
  border-radius: 16px;
  background: rgba(16, 35, 54, .42);
  padding: clamp(22px, 3vw, 32px);
}

.degree .mark { height: 40px; max-width: 210px; margin-bottom: 4px; }

.degree-name {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.3vw, 28px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 18px 0 0;
}

.degree-org {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--sky);
  margin-top: 10px;
}

.degree-when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mute-2);
  letter-spacing: .08em;
  margin-top: 6px;
}

.degree-flag {
  display: inline-block;
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--thread);
  border: 1px solid rgba(232, 179, 61, .32);
  border-radius: 999px;
  padding: 6px 13px;
}

.modules {
  list-style: none;
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(22, 48, 74, .8);
  display: grid;
  gap: 10px;
}

.modules li {
  display: flex;
  gap: 11px;
  align-items: baseline;
  font-size: 15px;
  color: #b9c8d8;
}

.modules li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--thread);
  flex: none;
  transform: translateY(-2px);
  opacity: .8;
}

.creds { display: grid; gap: clamp(12px, 1.6vw, 16px); }

.cred {
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--ink-3);
  border-radius: 13px;
  background: rgba(16, 35, 54, .38);
  padding: 16px 18px;
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}

.cred:hover {
  border-color: rgba(232, 179, 61, .4);
  background: rgba(16, 35, 54, .62);
  transform: translateX(4px);
}

.cred .mark { height: 25px; max-width: 116px; }
.cred .mark--plate { height: 27px; max-width: 124px; }

.cred-name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--paper);
}

.cred-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-top: 7px;
}

/* ============================================================
   OFF THE CLOCK
   ============================================================ */
.off-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 20px);
}

.off {
  border: 1px solid var(--ink-3);
  border-radius: 14px;
  background: rgba(16, 35, 54, .34);
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}

.off:hover { border-color: rgba(232, 179, 61, .38); transform: translateY(-4px); }

.off .photo {
  height: clamp(104px, 13vw, 142px);
  border-radius: 13px 13px 0 0;
}

.off h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 17px 19px 0;
}

.off p {
  margin: 8px 19px 19px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mute);
}

.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 32px);
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--ink-3);
  align-items: center;
}

.langs-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-right: 6px;
}

.lang {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  border: 1px solid var(--ink-3);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 14.5px;
  color: var(--paper);
}

.lang em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--thread);
}

/* ============================================================
   CONTACT — the thread ties off
   ============================================================ */
.contact {
  position: relative;
  z-index: 2;
  padding-block: clamp(74px, 9vw, 122px) clamp(50px, 6vw, 78px);
}

.contact-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: var(--spine) minmax(0, 1fr);
}

.contact-title {
  font-size: clamp(34px, 5.4vw, 66px);
  font-variation-settings: "wdth" 96, "opsz" 80;
  max-width: 16ch;
}

.contact-sub {
  margin: 26px 0 0;
  color: var(--mute);
  font-size: clamp(16.5px, 1.3vw, 19px);
  max-width: 46ch;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.contact-list {
  list-style: none;
  margin: clamp(46px, 6vw, 70px) 0 0;
  padding: 0;
  border-top: 1px solid var(--ink-3);
}

.contact-list li { border-bottom: 1px solid var(--ink-3); }

.contact-list a,
.contact-list .static {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 19px 4px;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.15vw, 15.5px);
  letter-spacing: .03em;
  color: #c6d3e0;
  transition: color .3s var(--ease), padding-left .3s var(--ease), background .3s var(--ease);
  flex-wrap: wrap;
}

.contact-list a:hover {
  color: var(--thread);
  padding-left: 16px;
  background: linear-gradient(90deg, rgba(232, 179, 61, .07), transparent 60%);
}

.contact-list .k {
  flex: 0 0 108px;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute-2);
}

.contact-list .arrow { margin-left: auto; color: var(--ink-3); transition: color .3s var(--ease); }
.contact-list a:hover .arrow { color: var(--thread); }

.contact-body { min-width: 0; }

.contact-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .48fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

/* the knot that finishes the thread. It draws itself once, the same way
   every other length of thread on this page does. */
.tie-off {
  display: grid;
  place-items: center;
  gap: 20px;
}

.tie-off svg { width: min(196px, 100%); height: auto; }

.tie-off .knot-path {
  fill: none;
  stroke: var(--thread);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  transition: stroke-dashoffset 2s var(--ease);
}

.tie-off .knot-path--2 { opacity: .8;  transition-delay: .25s; }
.tie-off .knot-path--3 { opacity: .95; transition-delay: .6s; }

.tie-off.is-in .knot-path { stroke-dashoffset: 0; }

.tie-off-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute-2);
}

footer {
  position: relative;
  z-index: 2;
  margin-top: clamp(40px, 5vw, 60px);
  border-top: 1px solid var(--ink-3);
}

.foot-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 26px var(--pad) 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mute-2);
}

.foot-inner .to-top { margin-left: auto; transition: color .3s var(--ease); }
.foot-inner .to-top:hover { color: var(--thread); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .hero { min-height: 0; padding-block: 128px 84px; }
  .cue { display: none; }
  .pattern-grid { grid-template-columns: 1fr; }
  .gauge { max-width: 580px; }
}

@media (max-width: 940px) {
  :root { --spine: 34px; }
  .knot-num { display: none; }
  .knot::before { left: 12px; }
  .skill-groups { grid-template-columns: 1fr; }
  .edu-grid { grid-template-columns: 1fr; }
  .off-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .navlinks { display: none; }
  .brand-name { display: inline; }   /* room for the full name once the nav goes */
  .brand-abbr { display: none; }
  .pipe-track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .pipe-rail { display: none; }
  .outcomes { grid-template-columns: 1fr; }
  .contact-top { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .tie-off { justify-items: start; }
  .tie-off svg { width: 130px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  :root { --spine: 26px; }
  .stats { grid-template-columns: 1fr; gap: 22px; }
  .stats > div { display: flex; align-items: baseline; gap: 14px; }
  .stat-label { margin-top: 0; flex: 1; }
  .stat-label br { display: none; }  /* desktop line breaks fight the flex row */
  .row-when { text-align: left; }
  .pipe-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .off-grid { grid-template-columns: 1fr; }
  /* still four columns, just tighter: dropping to three here would wrap the
     status cell onto its own line */
  .contact-list .k { flex-basis: 100%; }
  .contact-list a:hover { padding-left: 4px; }

  /* a 116px logo beside the text squeezed credential titles into ribbons */
  .cred { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cred .mark, .cred .mark--plate { height: 22px; }
}

/* on the narrowest phones the full name and the Print CV button stop fitting
   on one line, so fall back to the initials, then to the mark alone */
@media (max-width: 460px) {
  .brand-name { display: none; }
  .brand-abbr { display: inline; }
  .topbar { gap: 12px; padding-inline: 18px; }
  .btn { padding: 10px 15px; }
}

@media (max-width: 372px) {
  .brand-abbr { display: none; }
  .brand { gap: 0; }
}

/* ============================================================
   REDUCED MOTION — show every end state, animate nothing
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }

  .hero-title .line > span { transform: none; }
  .stitched::after { transform: scaleX(1); }
  .reveal { opacity: 1; transform: none; }
  .packet { display: none; }
  .thread-seg path { stroke-dashoffset: 0 !important; }
  .tie-off .knot-path { stroke-dashoffset: 0; }
}

/* ============================================================
   PRINT — cmd-P gives a clean, hiring-manager-ready CV
   ============================================================ */
/* ============================================================
   PRINT — cmd-P gives a tight, hiring-manager-ready CV.
   The screen page is dark and spacious; paper wants neither.
   ============================================================ */
@media print {
  @page { margin: 13mm 12mm; }

  :root { --spine: 0px; }

  body {
    background: #fff;
    color: #10202f;
    font-size: 9.6pt;
    line-height: 1.4;
  }

  /* everything that only makes sense on a lit screen */
  body::before, body::after, #spine-guide, .thread-seg, #hook,
  .topbar, .cue, .tie-off, .packet, .pipe-rail, .pipe-head,
  .pipe-track, .photo, .pipe::before, .contact-sub, .portrait-img,
  .contact-actions, .hero-actions, .foot-inner .to-top,
  .mark, .knot, .arrow { display: none !important; }

  /* sections flow onto the page instead of each claiming one */
  .band, .hero, .contact {
    padding-block: 0 !important;
    break-inside: auto;
    break-before: auto;
  }
  .band { padding-top: 11pt !important; }

  .band-inner, .hero-inner, .contact-inner, .contact-body,
  .foot-inner, .hero-lower {
    display: block !important;
    padding-inline: 0 !important;
    max-width: none;
    margin: 0;
    gap: 0;
  }

  /* the hero animations use fill-mode both, so an element printed before its
     delay elapses would print at opacity 0. Nothing animates on paper. */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal, .hero-lede, .stats, .hero-title .line > span, .cue {
    opacity: 1 !important;
    transform: none !important;
  }

  /* type */
  .hero { padding-bottom: 6pt !important; }
  .hero-title { font-size: 23pt; margin-bottom: 6pt; }
  .hero-title .line > span { transform: none; }
  .stitched { color: #10202f; padding-bottom: 0; }
  .stitched::after { display: none; }
  .hero-lede { font-size: 10pt; max-width: none; }
  .hero-lede, .lede, .prose p, .row-lead, .bullets li, .modules li,
  .off p, .outcome-t, .gauge dd { color: #2b3f52; }

  .section-title { font-size: 13.5pt; margin-bottom: 0; }
  .section-head { margin-bottom: 7pt !important; }
  .eyebrow { color: #6b7d8f; font-size: 7pt; margin-bottom: 3pt !important; }

  .stats {
    border-color: #d4dae0;
    margin-top: 9pt;
    padding-top: 7pt;
    grid-template-columns: repeat(3, 1fr);
    gap: 12pt;
  }
  .stat-value { font-size: 13pt; }
  .stat-label { font-size: 6.6pt; margin-top: 3pt; }
  .stat-value, .section-title, .hero-title, .row-role,
  .degree-name, .off h3, .who-name { color: #10202f; }

  /* one ink for every accent so it photocopies */
  .stat-value .unit, .gold, .sky, .outcome-k, .knot-num, .tick,
  .gauge-head, .sgroup-title, .row-org, .degree-org, .lang em,
  .degree-flag, .cred-meta, .prose strong, .bullets li b, .row-lead b {
    color: #1f4d6b !important;
  }

  /* strip every card back to a hairline */
  .row-card, .degree, .cred, .off, .gauge, .pipe, .outcome,
  .chip, .tag, .lang, .degree-flag {
    background: none !important;
    box-shadow: none !important;
    break-inside: avoid;
    transform: none !important;
  }
  .chip, .tag, .lang, .degree-flag { border: .5pt solid #ccd3da !important; }

  .rows { gap: 0; }
  .row-card {
    padding: 7pt 0;
    border: 0 !important;
    border-bottom: .5pt solid #e2e6ea !important;
    border-radius: 0;
  }
  .row-card:last-child { border-bottom: 0 !important; }
  .row-role { font-size: 11.5pt; }
  .row-org, .row-when { font-size: 7.4pt; }
  .row-lead { margin-top: 5pt; }
  .bullets { margin-top: 5pt; gap: 3.5pt; }
  .bullets li { padding-left: 11pt; font-size: 9.2pt; }
  .bullets li::before {
    border-color: #1f4d6b;
    width: 4.5pt; height: 4.5pt;
    top: .5em;
  }
  .tags { margin-top: 6pt; padding-top: 5pt; border-color: #e2e6ea; gap: 3pt; }
  .tag, .chip { font-size: 6.6pt; padding: 2pt 5pt; }

  .pipe { padding: 0; border: 0 !important; }
  .outcomes { grid-template-columns: repeat(3, 1fr); gap: 8pt; margin-top: 8pt; }
  .outcome {
    border: 0 !important;
    border-left: 1.5pt solid #1f4d6b !important;
    border-radius: 0;
    padding: 3pt 0 3pt 7pt;
  }
  .outcome-k { font-size: 11pt; }
  .outcome-t { font-size: 8.6pt; margin-top: 3pt; }

  /* print media queries resolve against the page box (~794px), so the
     narrow-viewport rules above are live here too and must be re-stated */
  .pattern-grid { grid-template-columns: 1.12fr 1fr; gap: 14pt; align-items: start; }
  .gauge { border: 0 !important; border-radius: 0; break-inside: auto; }
  .gauge-head { padding: 0 0 4pt; border-color: #d4dae0; font-size: 7pt; }
  .gauge dl { padding: 0; }
  .gauge div { padding: 4pt 0; border-bottom-color: #e8ebee; }
  .gauge dt { flex-basis: 52pt; font-size: 6.6pt; }
  .gauge dd { font-size: 8.6pt; }
  .prose p { max-width: none; font-size: 9.4pt; margin-bottom: 6pt; }
  .portrait { margin-bottom: 8pt; gap: 0; }
  .portrait figcaption { gap: 2pt; }
  .row-main { padding: 0 !important; }

  .skill-groups { grid-template-columns: repeat(3, 1fr); gap: 12pt; }
  .sgroup-title { font-size: 7pt; padding-bottom: 4pt; margin-bottom: 6pt; border-color: #d4dae0; }

  .edu-grid { grid-template-columns: 1.05fr 1fr; gap: 14pt; }
  .degree { padding: 0; border: 0 !important; }
  .degree-name { font-size: 11.5pt; }
  .modules { margin-top: 7pt; padding-top: 6pt; border-color: #e2e6ea; gap: 3pt; }
  .modules li { font-size: 8.8pt; }
  /* browsers print with backgrounds off by default, so the marker has to be
     a glyph rather than a coloured box */
  .modules li::before {
    content: "\2013";
    background: none;
    width: auto;
    height: auto;
    border-radius: 0;
    transform: none;
    color: #1f4d6b;
  }
  .degree-flag { margin-top: 6pt; padding: 2pt 6pt; font-size: 6.6pt; }
  .creds { gap: 5pt; }
  .cred { padding: 4pt 0; border: 0 !important; border-bottom: .5pt solid #e2e6ea !important; border-radius: 0; }
  .cred:last-child { border-bottom: 0 !important; }
  .cred-name { font-size: 9pt; color: #10202f; }
  .cred-meta { font-size: 6.6pt; margin-top: 2pt; }

  .off-grid { grid-template-columns: repeat(4, 1fr); gap: 9pt; }
  .off { padding: 0; border: 0 !important; }
  .off h3 { font-size: 9.5pt; }
  .off p { font-size: 8.2pt; margin-top: 3pt; }
  .langs { margin-top: 10pt; padding-top: 8pt; border-color: #d4dae0; gap: 6pt; }
  .langs-label { font-size: 6.6pt; }
  .lang { font-size: 8.4pt; padding: 2pt 7pt; }

  .contact-title { font-size: 13.5pt; max-width: none; }
  .contact-list { margin-top: 8pt; border-color: #d4dae0; }
  .contact-list li { border-color: #e2e6ea; }
  .contact-list a, .contact-list .static { padding: 3.5pt 0; color: #10202f; font-size: 8.8pt; }
  .contact-list .k { flex-basis: 74pt; font-size: 6.6pt; }

  footer { border-color: #d4dae0; }
  .foot-inner { padding: 6pt 0 0; color: #6b7d8f; font-size: 6.6pt; }
  .foot-inner span + span::before { content: "\00b7\00a0\00a0"; }
  .langs { margin-bottom: 4pt; }

  a { color: #10202f; text-decoration: none; }
}