/*
Theme Name: Carmennel
Theme URI: https://carmennel.co.za
Author: Carmen Nel
Author URI: https://cnconsult.co.za
Description: Editorial theme for carmennel.co.za. Shares its typography and spatial rhythm with cnconsult.co.za, and keeps its own voltage: an ink band, a single orange accent and mono terminal marks. Built for a blog that publishes one argument, one lever at a time.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: carmennel
Tags: blog, one-column, editorial, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --sand: #F7F4EF;
  --paper: #FFFFFF;
  --ink: #2C2823;
  --taupe: #86786B;
  --linen: #E3DBD1;
  --deep: #16293F;
  --accent: #C2651A;
  --on-deep: #E8E2D9;
  --on-deep-dim: #93A3B6;

  --display: Newsreader, Georgia, "Times New Roman", serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --max: 1120px;
  --measure: 760px;
  --rule: 1px solid var(--linen);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sand: #121A23; --paper: #17212C; --ink: #ECE5DB; --taupe: #9AA7B4;
    --linen: #2A3744; --deep: #0D151D; --accent: #E08B46;
    --on-deep: #ECE5DB; --on-deep-dim: #8898A9;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sand: #121A23; --paper: #17212C; --ink: #ECE5DB; --taupe: #9AA7B4;
  --linen: #2A3744; --deep: #0D151D; --accent: #E08B46;
  --on-deep: #ECE5DB; --on-deep-dim: #8898A9;
  color-scheme: dark;
}

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

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p { margin: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--sand); padding: 12px 18px;
  font-family: var(--mono); font-size: 12px;
}
.skip-link:focus { left: 8px; top: 8px; }

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

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
}
.col { max-width: var(--measure); }

.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow.quiet { color: var(--taupe); }

.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; overflow: hidden;
  position: absolute; white-space: nowrap; width: 1px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--sand) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--rule);
  transition: box-shadow .3s ease;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header.condensed { box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent); }
.site-header.condensed .bar { padding-block: 10px; }

.bar { display: flex; align-items: center; gap: 22px; padding-block: 15px; transition: padding .3s ease; }
.site-mark {
  font-family: var(--display); font-size: 21px; letter-spacing: -0.02em;
  text-decoration: none; margin-right: auto; white-space: nowrap;
}
.site-mark b { font-weight: 500; }
.site-mark span { color: var(--accent); }

.main-nav { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.main-nav ul { display: flex; gap: 20px; align-items: center; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.main-nav a {
  font-size: 13px; letter-spacing: 0.04em; text-decoration: none; color: var(--taupe);
  padding-block: 4px; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.main-nav a:hover, .main-nav a:focus-visible,
.main-nav .current-menu-item > a { color: var(--ink); border-bottom-color: var(--accent); }

.nav-toggle {
  display: none; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; background: none; border: 0; color: var(--taupe); cursor: pointer;
}
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .main-nav { display: none; width: 100%; }
  .main-nav.open { display: flex; padding-bottom: 14px; }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bar { flex-wrap: wrap; }
}

.btn {
  display: inline-block; font-family: var(--body); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  padding: 11px 20px; border: 1px solid var(--ink); background: var(--ink); color: var(--sand);
  transition: background .25s, color .25s, border-color .25s; cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover, .btn.ghost:focus-visible { color: var(--accent); border-color: var(--accent); background: transparent; }
.btn.small { font-size: 12px; padding: 9px 15px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-block: 70px 52px; }
.hero-grid { display: grid; gap: 46px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.02fr .98fr; gap: 60px; } }
.hero h1 { font-size: clamp(40px, 7vw, 82px); line-height: 1.03; margin-block: 20px 0; max-width: 15ch; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .standfirst { margin-top: 24px; max-width: 52ch; font-size: 19px; color: var(--taupe); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.proof {
  display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 44px; padding-top: 20px;
  border-top: var(--rule); font-family: var(--mono); font-size: 12px;
  color: var(--taupe); letter-spacing: 0.04em;
}
.proof b { color: var(--ink); font-weight: 500; }

.rise { animation: cn-rise .7s cubic-bezier(.22,.61,.36,1) backwards; }
.rise.d1 { animation-delay: .06s; } .rise.d2 { animation-delay: .14s; }
.rise.d3 { animation-delay: .22s; } .rise.d4 { animation-delay: .3s; }
@keyframes cn-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* hero sequence */
.seq { cursor: pointer; margin: 0; }
.ln, .gate, .flow { stroke-dasharray: 1; }
.js .seq .ln, .js .seq .gate, .js .seq .flow { stroke-dashoffset: 1; }
.js .seq .chk, .js .seq .tip, .js .seq .shiplbl, .js .seq .pulse { opacity: 0; }
.js .seq.play .ln { animation: cn-draw 1.1s cubic-bezier(.33,1,.68,1) forwards; }
.js .seq.play .gate { animation: cn-draw .55s ease forwards; animation-delay: 1.35s; }
.js .seq.play .chk { animation: cn-softin .55s ease forwards; }
.js .seq.play .chk.c1 { animation-delay: 2.35s; }
.js .seq.play .chk.c2 { animation-delay: 2.7s; }
.js .seq.play .flow { animation: cn-draw 1.9s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: 1.7s; }
.js .seq.play .pulse { animation: cn-runner 1.9s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: 1.7s; }
.js .seq.play .tip { animation: cn-softin .45s ease forwards; animation-delay: 3.5s; }
.js .seq.play .shiplbl { animation: cn-softin .7s ease forwards; animation-delay: 3.2s; }
@keyframes cn-draw { to { stroke-dashoffset: 0; } }
@keyframes cn-softin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes cn-runner {
  0% { opacity: 0; transform: translateX(0); }
  8% { opacity: 1; } 92% { opacity: 1; }
  100% { opacity: 0; transform: translateX(290px); }
}
.replay {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--taupe); background: none; border: 0; padding: 6px 0 0; cursor: pointer; transition: color .2s;
}
.replay:hover, .replay:focus-visible { color: var(--accent); }

/* reveals */
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.js .stagger > * { opacity: 0; transform: translateY(14px); }
.js .stagger.is-in > * { opacity: 1; transform: none; transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); }
.js .stagger.is-in > *:nth-child(1) { transition-delay: .04s; }
.js .stagger.is-in > *:nth-child(2) { transition-delay: .1s; }
.js .stagger.is-in > *:nth-child(3) { transition-delay: .16s; }
.js .stagger.is-in > *:nth-child(4) { transition-delay: .22s; }
.js .stagger.is-in > *:nth-child(5) { transition-delay: .28s; }

/* ==========================================================================
   Ink band: the series map
   ========================================================================== */
.band { background: var(--deep); color: var(--on-deep); padding-block: 66px 70px; position: relative; overflow: hidden; }
.band::after {
  content: ""; position: absolute; right: -40px; bottom: -40px; width: 340px; height: 260px;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 13px 13px; color: var(--on-deep-dim); opacity: .2; pointer-events: none;
}
.band h2 { color: var(--on-deep); font-size: clamp(28px, 4vw, 40px); margin-top: 14px; max-width: 20ch; }
.band .lede { color: var(--on-deep-dim); max-width: 56ch; margin-top: 16px; }
.tracks { display: grid; gap: 34px; margin-top: 42px; position: relative; z-index: 1; }
@media (min-width: 880px) { .tracks { grid-template-columns: 1.35fr 1fr; gap: 56px; } }
.track-label {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-deep-dim); padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--on-deep-dim) 32%, transparent);
}
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: baseline; gap: 14px;
  padding-block: 15px; border-bottom: 1px solid color-mix(in srgb, var(--on-deep-dim) 18%, transparent);
  min-width: 0;
}
.steps .n { font-family: var(--mono); font-size: 12px; color: var(--on-deep-dim); }
.steps .t { font-family: var(--display); font-size: 22px; color: var(--on-deep); min-width: 0; }
.steps a.t { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.steps a.t:hover, .steps a.t:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
.state { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.state.live { color: var(--on-deep-dim); }
.state.next { color: #0D151D; background: var(--accent); padding: 3px 8px; }
.state.todo { color: color-mix(in srgb, var(--on-deep-dim) 70%, transparent); }
.steps li.is-next .n { color: var(--accent); }

/* ==========================================================================
   Index of writing
   ========================================================================== */
.section { padding-block: 74px; }
.sec-head { display: grid; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--ink); }
@media (min-width: 860px) { .sec-head { grid-template-columns: 1fr 1fr; align-items: end; } }
.sec-head h1, .sec-head h2 { font-size: clamp(28px, 4vw, 42px); }
.sec-head p { color: var(--taupe); max-width: 46ch; }

.post-row {
  display: grid; gap: 10px 26px; padding-block: 26px; border-bottom: var(--rule);
  text-decoration: none; min-width: 0; align-items: center;
  transition: padding-left .3s cubic-bezier(.22,.61,.36,1);
}
@media (min-width: 860px) { .post-row { grid-template-columns: 80px 1fr 104px; } }
.post-row:hover, .post-row:focus-visible { padding-left: 10px; }
.post-row .glyph { color: var(--taupe); opacity: .85; transition: color .25s, opacity .25s; width: 72px; height: 72px; }
.post-row:hover .glyph, .post-row:focus-visible .glyph { color: var(--accent); opacity: 1; }
.post-row .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); display: block; }
.post-row .meta i { font-style: normal; color: var(--accent); }
.post-row .title { font-family: var(--display); font-size: clamp(21px, 2.7vw, 29px); line-height: 1.2; display: block; margin-top: 4px; min-width: 0; }
.post-row:hover .title, .post-row:focus-visible .title { color: var(--accent); }
.post-row .dek { color: var(--taupe); font-size: 15.5px; display: block; margin-top: 6px; max-width: 58ch; }
.post-row .read { font-family: var(--mono); font-size: 11.5px; color: var(--taupe); }
@media (max-width: 859px) { .post-row .read { display: none; } }
.post-row .glyph .out { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.post-row:hover .glyph .out { transform: translateX(4px); }
.post-row .glyph .lever { transition: transform .4s cubic-bezier(.33,1,.68,1); }
.post-row:hover .glyph .lever { transform: translateY(-3px); }
.post-row:hover .glyph .lever:nth-of-type(2) { transition-delay: .04s; }
.post-row:hover .glyph .lever:nth-of-type(3) { transition-delay: .08s; }
.post-row:hover .glyph .lever:nth-of-type(4) { transition-delay: .12s; }
.post-row:hover .glyph .lever:nth-of-type(5) { transition-delay: .16s; }

.more {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
}
.more span { color: var(--accent); }
.more:hover, .more:focus-visible { color: var(--accent); }

.pagination { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 40px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.pagination a, .pagination span { text-decoration: none; color: var(--taupe); }
.pagination .current { color: var(--accent); }

/* ==========================================================================
   Framework block and day job
   ========================================================================== */
.pack { background: var(--paper); border: var(--rule); padding: clamp(26px, 4vw, 46px); display: grid; gap: 34px; }
@media (min-width: 900px) { .pack { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } }
.pack h2 { font-size: clamp(26px, 3.4vw, 36px); margin-top: 12px; }
.pack p { color: var(--taupe); margin-top: 14px; max-width: 46ch; }
.pack .btn { margin-top: 24px; }

.firm { display: grid; gap: 28px; padding-block: 70px; border-top: 1px solid var(--ink); }
@media (min-width: 900px) { .firm { grid-template-columns: 1fr 1fr; gap: 64px; } }
.firm h2 { font-size: clamp(26px, 3.4vw, 38px); max-width: 18ch; }
.firm p { color: var(--taupe); margin-top: 16px; max-width: 48ch; }
.practices { list-style: none; margin: 22px 0 0; padding: 0; }
.practices li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding-block: 13px; border-bottom: var(--rule); align-items: baseline; }
.practices .n { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.practices .p { font-family: var(--display); font-size: 19px; }
.practices .s { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); display: block; margin-top: 2px; }

/* ==========================================================================
   Single article
   ========================================================================== */
.progress {
  position: fixed; left: 0; right: 0; top: 0; height: 2px; background: var(--accent);
  transform-origin: 0 50%; transform: scaleX(0); z-index: 30; pointer-events: none;
}
.admin-bar .progress { top: 32px; }

.art-head { padding-block: 52px 0; }
.crumbs { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs b { color: var(--accent); font-weight: 400; }
.art-head h1 { font-size: clamp(36px, 5.6vw, 62px); line-height: 1.06; margin-top: 18px; max-width: 18ch; }
.art-head .deck {
  font-family: var(--display); font-style: italic; font-size: clamp(20px, 2.6vw, 25px);
  color: var(--taupe); margin-top: 18px; max-width: 36ch; line-height: 1.42;
}
.byline {
  display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 34px; padding-block: 15px;
  border-top: var(--rule); border-bottom: var(--rule);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe);
}
.byline b { color: var(--ink); font-weight: 500; }

.entry { padding-block: 38px 0; font-size: 18px; line-height: 1.72; }
.entry > * + * { margin-top: 22px; }
.entry p, .entry ul, .entry ol { max-width: 68ch; }
.entry h2 { font-size: clamp(25px, 3.2vw, 33px); margin-top: 50px; }
.entry h3 { font-size: clamp(20px, 2.4vw, 24px); margin-top: 38px; }
.entry h2 + p, .entry h3 + p { margin-top: 14px; }
.entry a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.entry a:hover { color: var(--accent); }
.entry ul, .entry ol { padding-left: 1.2em; }
.entry li + li { margin-top: 8px; }
.entry hr { border: 0; border-top: var(--rule); margin-block: 44px; }
.entry strong { font-weight: 600; }
.entry figure { margin: 40px 0; }
.entry figcaption {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--taupe); margin-top: 14px; max-width: 62ch; line-height: 1.55;
}
.entry img { border: var(--rule); }
.entry blockquote {
  margin: 30px 0; border-left: 2px solid var(--accent); background: var(--paper);
  padding: 20px 22px; max-width: 64ch; font-family: var(--display); font-size: 20px; line-height: 1.45;
}
.entry blockquote p { max-width: none; }
.entry blockquote strong:first-child { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 6px; font-weight: 500; }
.entry pre {
  font-family: var(--mono); font-size: 13.5px; line-height: 1.6; background: var(--paper);
  border: var(--rule); padding: 18px; overflow-x: auto; white-space: pre-wrap;
}
.entry code { font-family: var(--mono); font-size: .92em; }
.entry table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.entry table th, .entry table td { border-bottom: var(--rule); padding: 10px 12px; text-align: left; }
.entry table th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); font-weight: 400; }
.entry .alignwide { max-width: var(--max); }
.entry .alignfull { max-width: none; }
.entry .wp-caption-text { font-family: var(--mono); font-size: 11.5px; color: var(--taupe); }

.nextup { margin-top: 54px; padding-block: 24px; border-top: 1px solid var(--ink); border-bottom: var(--rule); }
.nextup a { text-decoration: none; display: grid; gap: 6px; }
.nextup .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); }
.nextup .t { font-family: var(--display); font-size: clamp(22px, 3vw, 30px); }
.nextup a:hover .t, .nextup a:focus-visible .t { color: var(--accent); }

.author-block { display: grid; gap: 20px; margin-top: 44px; padding: 26px; border: var(--rule); background: var(--paper); }
@media (min-width: 720px) { .author-block.has-portrait { grid-template-columns: 104px 1fr; gap: 26px; align-items: start; } }
.author-block img { width: 104px; height: 104px; object-fit: cover; border: var(--rule); }
.author-block p { color: var(--taupe); font-size: 16px; }
.author-block p + p { margin-top: 12px; }
.author-block b { color: var(--ink); font-weight: 500; }
.art-foot { padding-bottom: 70px; }

.archive-note { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--taupe); border-left: 2px solid var(--linen); padding: 10px 16px; margin-top: 26px; max-width: 60ch; }

/* ==========================================================================
   Pages, search, 404
   ========================================================================== */
.page-head { padding-block: 56px 0; }
.page-head h1 { font-size: clamp(34px, 5vw, 56px); max-width: 20ch; }
.not-found { padding-block: 90px 110px; }
.not-found h1 { font-size: clamp(36px, 6vw, 64px); }
.not-found p { color: var(--taupe); margin-top: 18px; max-width: 48ch; }
.search-form { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.search-form input[type="search"] {
  font-family: var(--body); font-size: 16px; padding: 12px 14px; min-width: 0; flex: 1 1 240px;
  border: 1px solid var(--linen); background: var(--paper); color: var(--ink);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: var(--rule); padding-block: 34px 54px; margin-top: 0; }
.foot { display: flex; flex-wrap: wrap; gap: 16px 36px; align-items: baseline; font-family: var(--mono); font-size: 12px; color: var(--taupe); letter-spacing: 0.04em; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot .prompt { color: var(--accent); }

/* ==========================================================================
   Motion off
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rise, .flow, .ln, .gate, .chk, .tip, .shiplbl, .pulse { animation: none !important; }
  .ln, .gate, .flow { stroke-dashoffset: 0; }
  .chk, .tip, .shiplbl { opacity: 1; }
  .pulse, .replay, .progress { display: none; }
  * { transition: none !important; }
}

/* ==========================================================================
   Drawing weight: the schematic has to read on both grounds
   ========================================================================== */
.seq svg g[opacity="0.3"] { opacity: .52; }
.seq svg g[opacity="0.7"] { opacity: .88; }
.seq svg g[opacity="0.26"] { opacity: .5; }
.seq svg g[opacity="0.55"] { opacity: .78; }
.seq svg line.ln { stroke-width: 1.3; }
.post-row .glyph { opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seq svg g[opacity="0.3"] { opacity: .66; }
  :root:not([data-theme="light"]) .seq svg g[opacity="0.26"] { opacity: .6; }
}
:root[data-theme="dark"] .seq svg g[opacity="0.3"] { opacity: .66; }
:root[data-theme="dark"] .seq svg g[opacity="0.26"] { opacity: .6; }

/* CSS variables are not valid in SVG presentation attributes, so the accent
   marks are coloured here instead. */
.seq .flow { stroke: var(--accent); }
.seq .tip, .seq .pulse { fill: var(--accent); }
.seq .shiplbl { fill: var(--accent); }
.pack figure svg rect[stroke-width="1.7"] { stroke: var(--accent); }

/* Page head standfirst, used by the frameworks and speaking pages */
.page-head .standfirst { margin-top: 20px; max-width: 54ch; font-size: 19px; color: var(--taupe); }
.page-head { padding-block: 56px 0; }
.pack .btn + .btn { margin-left: 12px; }
.contact-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.contact-list li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: baseline; padding-block: 12px; border-bottom: 1px solid color-mix(in srgb, var(--on-deep-dim) 18%, transparent); }
.contact-list .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-deep-dim); }
.contact-list .v { font-size: 17px; color: var(--on-deep); word-break: break-word; }
.contact-list .v a { text-decoration: none; border-bottom: 1px solid var(--accent); }
.talk { display: grid; gap: 8px 26px; padding-block: 26px; border-bottom: var(--rule); align-items: baseline; }
@media (min-width: 860px) { .talk { grid-template-columns: 54px 1fr 110px; } }
.talk .n { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.talk .t { font-family: var(--display); font-size: clamp(21px, 2.6vw, 27px); line-height: 1.22; }
.talk .d { color: var(--taupe); font-size: 15.5px; margin-top: 6px; max-width: 60ch; }
.talk .len { font-family: var(--mono); font-size: 11.5px; color: var(--taupe); white-space: nowrap; }

.talk .t, .talk .d { display: block; }
.talk .n { display: block; }
.pack h2 { max-width: 20ch; }