/* ==========================================================================
   NyxWorks — v5. The homepage.
   Built from the original site's structure, with the parts of the editorial
   "Night Edition" that earned their place: the cover line, the problem/method
   columns, the priced index of disciplines, the lead-story treatment for
   work, the rate card on cream stock, the free-tools band and the live
   studio status.

   Two rules run through the layout:
   · Text is constrained to a readable measure; rules, bands and images are
     allowed to run the full width. Full-bleed everything reads as sprawl,
     constrained everything reads as timid.
   · Project banners are 2:1 at source, so they are shown at 2:1. Forcing
     16/9 was what sliced the headlines off them.
   ========================================================================== */

:root {
  --stock: #F7F4EC;
  --stock-2: #EFEADF;
  --stock-3: #E6E0D2;
  --surface: var(--stock-2);      /* card/hover/image-placeholder fill — flips with .paper */
  --cream: #ECE5D4;
  --cream-ink: #131217;
  --cream-soft: #56535C;

  --ink: #131217;
  --ink-2: #4E4B55;
  --ink-3: #7A766F;

  --red: #C8102E;
  --gold: #B38D1C;
  --gold-bright: #8A6A21;

  --serif: "Fraunces", "Times New Roman", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Courier New", monospace;

  --gutter: clamp(1.1rem, 3.4vw, 3rem);
  --page: min(1440px, 100% - (var(--gutter) * 2));
  --measure: 68ch;
  --rule: rgba(19,18,23,0.14);
  --rule-2: rgba(19,18,23,0.34);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--stock);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
/* Gold, not red: red reads as an error state in an interface, and it is the
   one colour reserved here for structure (rules, numbers, the Amsterdam mark)
   rather than for anything the visitor did. */
::selection { background: var(--gold); color: var(--stock); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

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

section { padding-block: clamp(3rem, 7vw, 6.5rem); }

/* ---- Print furniture ------------------------------------------------- */
.rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--rule-2);
  padding-top: 0.6rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}
.rule::after { content: ""; flex: 1 1 auto; }
.kicker { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.kicker-red { color: var(--red); }
.num { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--ink-3); }

.hed {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.96;
  font-size: clamp(2.1rem, 5.4vw, 4.4rem);
}
.dek { font-size: clamp(0.97rem, 1.2vw, 1.1rem); line-height: 1.65; color: var(--ink-2); max-width: 52ch; }

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1rem, 3vw, 3.4rem);
  align-items: end;
  margin-bottom: clamp(1.8rem, 3.6vw, 3rem);
}
@media (max-width: 880px) { .sec-head { grid-template-columns: 1fr; align-items: start; } }

.folio {
  margin-top: clamp(2rem, 4vw, 3.4rem);
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.4rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.folio a { border-bottom: 1px solid currentColor; }
.folio a:hover { color: var(--gold); }

/* ---- Actions --------------------------------------------------------- */
.act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0 1.5rem;
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.act:hover { background: var(--ink); color: var(--stock); }
.act-gold { background: var(--gold); border-color: var(--gold); color: #17140A; font-weight: 500; }
.act-gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #17140A; }
.act-ghost { border-color: var(--rule-2); color: var(--ink-2); }
.act-ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

.arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 3px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.arrowlink:hover { color: var(--gold); border-color: var(--gold); }
.arrowlink i { font-style: normal; transition: transform 0.2s var(--ease); }
.arrowlink:hover i { transform: translateX(3px); }

/* ---- Reveal (fails open) --------------------------------------------- */
.rv { opacity: 1; }
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   MASTHEAD
   ========================================================================== */
.masthead { padding-top: clamp(0.9rem, 2vw, 1.5rem); }
.dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.2rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dateline .sep { color: var(--ink-3); }
.dateline .live { color: var(--gold); }

.nameplate {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: clamp(0.9rem, 2.2vw, 1.6rem) clamp(0.7rem, 1.6vw, 1.1rem);
}
.nameplate img { width: clamp(190px, 30vw, 420px); }
.nameplate-sub { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); text-align: right; line-height: 1.8; }
@media (max-width: 700px) { .nameplate-sub { text-align: left; } }

/* contents bar */
.bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--stock);
  border-block: 1px solid var(--rule-2);
}
.bar-inner {
  width: var(--page);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 48px;
}
.bar-nav { display: flex; align-items: center; gap: clamp(0.8rem, 1.8vw, 1.9rem); }
.bar-nav > a, .drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  padding-block: 0.5rem;
  transition: color 0.2s var(--ease);
}
.bar-nav > a:hover, .drop-trigger:hover { color: var(--ink); }
.drop-trigger svg { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* Dropdowns — the six services and the language switcher, as on the rest
   of the site. A section-only bar left visitors with no way out of the page. */
.drop { position: relative; }
.drop-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  padding: 0.4rem;
  background: var(--stock-2);
  border: 1px solid var(--rule-2);
  box-shadow: 0 18px 44px rgba(19,18,23,0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 10;
}
.drop-menu-right { left: auto; right: 0; min-width: 190px; }
.drop:hover .drop-menu, .drop:focus-within .drop-menu { opacity: 1; visibility: visible; transform: none; }
.drop-menu a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  font-family: var(--sans);
  font-size: 0.83rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  white-space: nowrap;
}
.drop-menu a:hover { background: rgba(242,239,231,0.07); color: var(--ink); }
.drop-menu a[aria-current="true"] { color: var(--gold); }
.drop-menu a b { font-family: var(--mono); font-size: 0.62rem; font-weight: 400; color: var(--ink-3); }
.drop-all { border-bottom: 1px solid var(--rule); margin-bottom: 0.25rem; padding-bottom: 0.6rem !important; color: var(--ink) !important; }
.flag { font-size: 0.85em; }

.bar-right { display: flex; align-items: center; gap: 0.7rem; flex: 0 0 auto; }
.bar-right .act { min-height: 34px; padding-inline: 0.95rem; font-size: 0.64rem; }
.bar-right .act-gold { color: #17140A; }
.bar-right .act-gold:hover { color: #17140A; }
.menu-btn { display: none; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid var(--rule-2); padding: 0.45rem 0.8rem; }

@media (max-width: 1120px) { .bar-right .act-ghost { display: none; } }
@media (max-width: 960px) {
  .bar-nav, .bar-right .act, .drop-lang { display: none; }
  .menu-btn { display: block; }
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--stock);
  padding: clamp(3.4rem, 8vw, 4.5rem) clamp(1.4rem, 5vw, 3rem) clamp(1.4rem, 5vw, 3rem);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
body.menu-open { overflow: hidden; }
body.menu-open .drawer { opacity: 1; visibility: visible; }
.drawer-scroll { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.drawer-scroll > a {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 5.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.drawer-scroll > a b { font-family: var(--mono); font-size: 0.62rem; font-weight: 400; color: var(--red); letter-spacing: 0.1em; }
.drawer-sub { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule-2); }
.drawer-sub .kicker { display: block; margin-bottom: 0.6rem; }
.drawer-sub a { display: block; padding: 0.4rem 0; font-size: 0.92rem; color: var(--ink-2); }
.drawer-sub a:hover { color: var(--gold); }
.drawer-foot {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 1.2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
}
.drawer-langs { display: flex; gap: 0.9rem; }
.drawer-langs a:hover { color: var(--gold); }
.drawer-langs a[aria-current="true"] { color: var(--gold); }
.drawer-close { position: absolute; top: 1.2rem; right: clamp(1.4rem, 5vw, 3rem); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; z-index: 2; }

/* ==========================================================================
   COVER
   ========================================================================== */
.cover { padding-top: clamp(2rem, 5vw, 4rem); }
.cover-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(130px, 14vw, 210px);
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) { .cover-top { grid-template-columns: 1fr; } }

.coverline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.5rem, 7.6vw, 6.8rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.coverline em { font-style: italic; color: var(--gold); }
/* service pages: the eyebrow (keywords) and the coverline (slogan) share one <h1> */
.svc-h1 { font: inherit; }
.svc-h1 > span { display: block; }
.coverline .strike { position: relative; white-space: nowrap; }
.coverline .strike::after {
  content: "";
  position: absolute;
  left: -0.5%; right: -0.5%;
  top: 54%;
  height: clamp(3px, 0.5vw, 7px);
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  animation: strike 0.7s var(--ease) 0.7s forwards;
}
@keyframes strike { to { transform: scaleX(1); } }

.standfirst {
  margin-top: clamp(1.2rem, 2.4vw, 1.9rem);
  font-size: clamp(1.02rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  max-width: 46ch;
}
.standfirst b { font-weight: 600; }
.cover-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: clamp(1.4rem, 2.6vw, 2rem); }

/* Amsterdam mark */
.mark { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding-top: 0.5rem; }
.mark-frame { display: block; width: 100%; max-width: 110px; }
.mark svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Drawn thin rather than solid. Saturated red at full width vibrates against
   near-black, and a printer's mark should sit under the headline in the
   hierarchy, not compete with it. Thinning the stroke calms both problems
   without washing the red out to a muddy pink, which is what lowering the
   opacity alone does. */
.mark line {
  stroke: var(--red);
  stroke-width: 10;
  stroke-linecap: square;
  opacity: 0.82;
  stroke-dasharray: 92;
  stroke-dashoffset: 92;
  animation: draw 0.9s var(--ease) forwards;
}
.mark line:nth-child(1), .mark line:nth-child(2) { animation-delay: 0.3s; }
.mark line:nth-child(3), .mark line:nth-child(4) { animation-delay: 0.45s; }
.mark line:nth-child(5), .mark line:nth-child(6) { animation-delay: 0.6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.mark p { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-3); text-align: center; }

@media (max-width: 900px) {
  .mark {
    flex-direction: column;
    gap: 0.5rem;
    margin-top: clamp(1.6rem, 5vw, 2.2rem);
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
  }
  .mark-frame { position: relative; width: 140px; height: 44px; max-width: none; }
  .mark-frame svg { position: absolute; top: 50%; left: 50%; width: 44px; height: 140px; transform: translate(-50%, -50%) rotate(90deg); }
  .mark line { stroke-width: 9; }
}

/* Cover mark: a small studio seal whose ring of text turns slowly, with the
   logo X small in the middle — movement without a loud shape */
.mark p { display: none; }
@media (min-width: 901px) {
  .cover-top { grid-template-columns: minmax(0, 1fr) clamp(200px, 24vw, 340px); align-items: center; }
  .cover-top .mark { align-self: center; justify-self: center; padding-top: 0; }
  .cover-top .mark-frame { max-width: none; width: clamp(180px, 20vw, 280px); }
}
@media (max-width: 900px) { .cover-top .mark-frame .mark-seal { width: 130px; } .cover-top .mark-frame { width: 130px; } }
.mark .mark-seal { width: 100%; max-width: 280px; height: auto; overflow: visible; opacity: 0; animation: seal-in 0.9s var(--ease) 0.3s forwards; }
.mark-seal .seal-line { fill: none; stroke: var(--rule-2); stroke-width: 0.8; }
.mark-seal text { font-family: var(--mono); font-size: 7.6px; letter-spacing: 0.21em; fill: var(--gold); }
.mark-seal .seal-spin { transform-origin: 60px 60px; animation: seal-spin 32s linear infinite; }
.mark-seal .seal-x { fill: var(--red); opacity: 0.9; }
@keyframes seal-in { from { opacity: 0; transform: scale(0.92) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes seal-spin { to { transform: rotate(360deg); } }
.mark:hover .seal-spin { animation-duration: 9s; }
@media (max-width: 900px) {
  .mark-frame { width: 92px; height: auto; }
  .mark-frame .mark-seal { position: static; width: 92px; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .mark .mark-seal { animation: none; opacity: 1; } .mark-seal .seal-spin { animation: none; } }
/* The logo's own X replaces the three drawn crosses: one mark, stamped in */
.mark .mark-x { width: 100%; max-width: 110px; height: auto; fill: var(--red); opacity: 0; transform: rotate(-24deg) scale(1.6);
  animation: mark-stamp 0.6s cubic-bezier(.2,.9,.3,1.3) 0.35s forwards; }
@keyframes mark-stamp { to { opacity: 0.9; transform: rotate(-6deg) scale(1); } }
@media (max-width: 900px) {
  .mark-frame { width: 64px; height: auto; }
  .mark-frame .mark-x { position: static; width: 64px; height: auto; transform: rotate(-24deg) scale(1.6); }
}
@media (prefers-reduced-motion: reduce) { .mark .mark-x { animation: none; opacity: 0.9; transform: rotate(-6deg); } }

/* ---- The three columns ---------------------------------------------- */
.columns {
  margin-top: clamp(2rem, 4.4vw, 3.4rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule-2);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) clamp(290px, 26vw, 400px);
}
.col { padding-inline: clamp(0.9rem, 1.6vw, 1.6rem); border-left: 1px solid var(--rule); }
.col:first-child { padding-left: 0; border-left: 0; }
.col h3 { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.18; margin: 0.5rem 0 0.6rem; }
.col p { font-size: 0.875rem; line-height: 1.68; color: var(--ink-2); }
.col p + p { margin-top: 0.7rem; }
.col .arrowlink { margin-top: 0.9rem; color: var(--ink); }
/* Named col-lead, not lead: the work section's lead story already owns .lead
   and its two-column grid was being applied to this column. */
/* Not when the paragraph opens with a bold label ("onze aanpak", "yaklaşımımız"):
   the label's first letter would be torn off as a drop cap. */
.col.col-lead h3 + p:not(:has(> b:first-child))::first-letter {
  float: left;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 3.05em;
  line-height: 0.76;
  margin: 0.05em 0.08em 0 0;
  color: var(--ink);
}
@media (max-width: 1080px) {
  .columns { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .col:nth-child(odd) { padding-left: 0; border-left: 0; }
  .col.aside { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .columns { grid-template-columns: 1fr; }
  .col { padding-inline: 0; border-left: 0; }
}

/* ---- Free diagnosis insert ------------------------------------------ */
.insert {
  scroll-margin-top: 5.5rem;   /* clears the sticky bar when linked to directly */
  border: 1px solid var(--rule-2);
  padding: clamp(1rem, 1.8vw, 1.4rem);
  background: repeating-linear-gradient(45deg, rgba(201,162,39,0.05) 0 8px, transparent 8px 16px);
  transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.insert.pulse { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.22); }
}
.insert-flag { display: inline-block; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; background: var(--gold); color: #17140A; padding: 0.25rem 0.55rem; margin-bottom: 0.7rem; }
.insert h3 { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.14; }
.insert > p { margin-top: 0.5rem; font-size: 0.84rem; line-height: 1.6; color: var(--ink-2); }

.xform { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.xform input {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 0.8rem;
  border: 1px solid var(--rule-2); background: #FBF9F3;
  color: var(--ink); font-family: var(--mono); font-size: 0.8rem;
}
.xform input::placeholder { color: var(--ink-3); }
.xform input:focus { outline: none; border-color: var(--gold); }
.xform .act { min-height: 46px; padding-inline: 1rem; }
.xform .act[disabled] { opacity: 0.6; pointer-events: none; }
@media (max-width: 430px) { .xform { flex-direction: column; } }

.xerr { margin-top: 0.6rem; font-family: var(--mono); font-size: 0.7rem; color: #FF8095; }
.xnote { margin-top: 0.7rem; font-family: var(--mono); font-size: 0.6rem; line-height: 1.55; color: var(--ink-3); }

.findings { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule-2); }
.findings-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.findings-host { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--gold); }
.findings-score { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.findings-score small { font-size: 0.6em; color: var(--ink-3); }
.findings-verdict { margin-top: 0.4rem; font-family: var(--serif); font-size: 1.02rem; line-height: 1.3; letter-spacing: -0.01em; }
.findings ul { list-style: none; margin-top: 0.8rem; }
.findings li { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--rule); font-size: 0.8rem; }
.findings li i { font-style: normal; font-family: var(--mono); font-size: 0.75rem; line-height: 1.5; }
.findings li.pass i { color: #7EC88C; }
.findings li.warn i { color: var(--gold); }
.findings li.fail i { color: #FF8095; }
.findings li b { font-weight: 600; display: block; }
.findings li span { display: block; color: var(--ink-3); font-family: var(--mono); font-size: 0.67rem; line-height: 1.5; margin-top: 0.15rem; }
.findings-next {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.findings-act { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

/* ==========================================================================
   DISCIPLINES — a priced index
   ========================================================================== */
.index { border-top: 1px solid var(--rule-2); }
.entry {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1.05fr) minmax(0, 1.45fr) auto;
  align-items: baseline;
  gap: clamp(0.7rem, 2vw, 2.2rem);
  padding: clamp(1.1rem, 2.2vw, 1.7rem) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  isolation: isolate;
}
.entry::before {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 100vw;
  top: 0; bottom: 0;
  background: var(--surface);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  z-index: -1;
}
.entry:hover::before { opacity: 1; }
.entry-no { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--red); }
.entry-title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.4rem, 2.7vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.04; transition: color 0.25s var(--ease); }
.entry:hover .entry-title { color: var(--gold); }
.entry-dek { font-size: 0.87rem; line-height: 1.62; color: var(--ink-2); }
.entry-price { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); white-space: nowrap; text-align: right; }
.entry-price b { display: block; color: var(--ink); font-size: 0.98rem; font-weight: 500; }
.entry:hover .entry-price b { color: var(--gold); }
@media (max-width: 900px) {
  .entry { grid-template-columns: 3.2rem minmax(0, 1fr); row-gap: 0.4rem; }
  .entry-dek, .entry-price { grid-column: 2; }
  .entry-price { text-align: left; }
  .entry-price b { display: inline; margin-right: 0.4rem; }
}

/* ==========================================================================
   WORK — lead story + a grid that does not crop
   ========================================================================== */
.lead {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.8rem);
  align-items: center;
  padding-top: clamp(1.2rem, 2.4vw, 1.8rem);
  border-top: 1px solid var(--rule-2);
}
@media (max-width: 880px) { .lead { grid-template-columns: 1fr; } }
.lead-fig { overflow: hidden; border: 1px solid var(--rule); background: var(--surface); }
.lead-fig img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;          /* this source is 1662×946 */
  object-fit: cover;
  object-position: center top;
  transition: transform 0.7s var(--ease);
}
.lead:hover .lead-fig img { transform: scale(1.02); }
.lead-body { display: flex; flex-direction: column; gap: 0.7rem; }
.tags { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.lead-body h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.9rem); letter-spacing: -0.035em; line-height: 1.02; transition: color 0.25s var(--ease); }
.lead:hover .lead-body h3 { color: var(--gold); }
.lead-body p { font-size: 0.92rem; line-height: 1.66; color: var(--ink-2); max-width: 46ch; }
.lead-body .arrowlink { align-self: flex-start; margin-top: 0.3rem; }

/* five remaining stories: 3 across, then 2 wider — no orphan row */
.stories {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 2.2vw, 1.8rem);
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
}
.story { grid-column: span 2; display: flex; flex-direction: column; gap: 0.5rem; }
.story:nth-child(4), .story:nth-child(5) { grid-column: span 3; }
.story-fig { overflow: hidden; border: 1px solid var(--rule); background: var(--surface); }
.story-fig img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;           /* every banner is 1774×887 — shown whole */
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.story:hover .story-fig img { transform: scale(1.03); }
.story h4 { font-family: var(--serif); font-weight: 600; font-size: 1.24rem; letter-spacing: -0.025em; line-height: 1.12; margin-top: 0.15rem; transition: color 0.25s var(--ease); }
.story:hover h4 { color: var(--gold); }
.story p { font-size: 0.84rem; line-height: 1.6; color: var(--ink-2); }
.story .arrowlink { align-self: flex-start; margin-top: auto; padding-top: 0.5rem; font-size: 0.66rem; }
@media (max-width: 980px) {
  .stories { grid-template-columns: repeat(2, 1fr); }
  .story, .story:nth-child(4), .story:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 600px) { .stories { grid-template-columns: 1fr; } }

/* ==========================================================================
   PAPER — the cream reverse of the theme.
   Ten screens of near-black in a row is where the dark theme stops reading
   as "after dark" and starts reading as eye strain — every section here
   carries real body copy, so this is where the decision-making happens.
   Applied to disciplines, work, rates and free tools; the cover, contact
   and colophon stay dark, where short copy and atmosphere are the point.
   ========================================================================== */
.paper {
  background: var(--cream);
  color: var(--cream-ink);
  --ink: var(--cream-ink);
  --ink-2: var(--cream-soft);
  --ink-3: #85818C;
  --rule: rgba(19,18,23,0.18);
  --rule-2: rgba(19,18,23,0.42);
  --surface: rgba(19,18,23,0.045);
}
.paper .act { border-color: var(--cream-ink); }
.paper .act:hover { background: var(--cream-ink); color: var(--cream); }
.paper .act-gold { background: #17140A; border-color: #17140A; color: var(--gold); }
.paper .act-gold:hover { background: transparent; color: var(--cream-ink); border-color: var(--cream-ink); }
.paper .arrowlink:hover { color: #8A6A21; border-color: #8A6A21; }
.paper .kicker-red { color: var(--red); }
/* Raw gold text reads at 2:1 on cream — fine as an accent on near-black,
   not as foreground text here. These hover states get a darkened gold
   instead of the token itself. */
.paper .entry:hover .entry-title,
.paper .entry:hover .entry-price b,
.paper .lead:hover .lead-body h3,
.paper .story:hover h4 { color: #8A6A21; }

/* ---- Rate card layout (colour now comes from .paper) ------------------ */

.rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border-top: 1px solid var(--rule-2); }
.rate {
  padding: clamp(1.2rem, 2.2vw, 1.8rem) clamp(0.9rem, 1.7vw, 1.5rem);
  border-left: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 0.45rem;
}
.rate:first-child { border-left: 0; padding-left: 0; }
.rate-what { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-soft); }
.rate-fig { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1; letter-spacing: -0.04em; }
.rate-fig sup { font-size: 0.32em; font-weight: 500; vertical-align: super; margin-right: 0.15em; font-family: var(--mono); letter-spacing: 0.08em; }
.rate p { font-size: 0.83rem; line-height: 1.6; color: var(--cream-soft); }
.rate .arrowlink { margin-top: auto; align-self: flex-start; padding-top: 0.7rem; font-size: 0.65rem; }
@media (max-width: 620px) { .rate { border-left: 0; padding-left: 0; } }

.terms {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem 2rem;
  font-family: var(--mono);
  font-size: 0.67rem;
  line-height: 1.65;
  color: var(--cream-soft);
}
.terms b { color: var(--cream-ink); font-weight: 500; }
.terms a { border-bottom: 1px solid currentColor; }

/* ==========================================================================
   FREE TOOLS
   ========================================================================== */
.ads { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--rule-2); }
.ad {
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(0.9rem, 1.6vw, 1.3rem) clamp(1.3rem, 2.2vw, 1.8rem);
  border-left: 1px dashed var(--rule-2);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: background 0.3s var(--ease);
}
.ad:first-child { border-left: 0; padding-left: 0; }
.ad:hover { background: var(--surface); }
/* A solid pill rather than plain gold text: gold-on-cream only clears ~2:1,
   fine as an accent but not as the whole label. Inverting to a filled chip
   (as .insert-flag already does) keeps this readable in both themes. */
.ad-flag { display: inline-block; align-self: flex-start; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; background: var(--gold); color: #17140A; padding: 0.2rem 0.55rem; }
.ad h3 { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.14; }
.ad p { font-size: 0.83rem; line-height: 1.6; color: var(--ink-2); }
.ad .arrowlink { margin-top: auto; align-self: flex-start; padding-top: 0.6rem; font-size: 0.65rem; }
@media (max-width: 620px) { .ad { border-left: 0; padding-left: 0; } }

/* ==========================================================================
   LETTERS
   ========================================================================== */
.letters { border-top: 1px solid var(--rule-2); }
.letters-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: clamp(1.4rem, 4vw, 4rem); align-items: start; }
@media (max-width: 900px) { .letters-grid { grid-template-columns: 1fr; } }
.letters h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 6vw, 4.6rem); line-height: 0.96; letter-spacing: -0.04em; }
.letters h2 em { font-style: italic; color: var(--gold); }
.letters-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }

.status { border: 1px solid var(--rule); border-left: 2px solid var(--gold); padding: clamp(0.9rem, 1.8vw, 1.3rem); }
.status-kicker { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.status-time { margin-top: 0.5rem; display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.status-time b { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.status-time span { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.status-line { margin-top: 0.7rem; font-size: 0.87rem; line-height: 1.55; color: var(--ink-2); }
.status-date { margin-top: 0.8rem; font-family: var(--mono); font-size: 0.62rem; color: var(--ink-3); }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: 0.45rem; animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* ==========================================================================
   COLOPHON
   ========================================================================== */
.colophon { border-top: 3px double var(--rule-2); padding-block: clamp(2rem, 4vw, 3rem) 2rem; }
.colophon { position: relative; z-index: 2; background: var(--stock); overflow: hidden; }
.colophon-grid { display: grid; grid-template-columns: minmax(0, 21rem) repeat(3, auto); justify-content: space-between; gap: clamp(1.2rem, 3vw, 2.4rem); }
@media (max-width: 820px) { .colophon-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .colophon-grid { grid-template-columns: 1fr; } }
.colophon img { width: 160px; margin-bottom: 0.8rem; }
/* the closing wordmark: edge to edge, drawn in left to right as it comes into view */
.colophon-mark { padding: clamp(1.2rem, 2.6vw, 2.2rem) clamp(0.8rem, 1.6vw, 1.6rem) 0; margin-bottom: calc(-1 * clamp(0.3rem, 0.9vw, 0.9rem)); }
.colophon-mark { position: relative; }
.colophon .colophon-mark img { display: block; width: 100%; height: auto; margin: 0; }
/* the torch: a cream copy of the wordmark, shown only in a circle around the pointer */
.colophon .colophon-mark .colophon-lit { position: absolute; left: clamp(0.8rem, 1.6vw, 1.6rem); top: clamp(1.2rem, 2.6vw, 2.2rem); width: calc(100% - 2 * clamp(0.8rem, 1.6vw, 1.6rem));
  -webkit-mask-image: radial-gradient(circle var(--r, 0px) at var(--mx, 50%) var(--my, 50%), #000 35%, transparent 100%);
          mask-image: radial-gradient(circle var(--r, 0px) at var(--mx, 50%) var(--my, 50%), #000 35%, transparent 100%);
  transition: --r 0.3s; pointer-events: none; }
@property --r { syntax: '<length>'; inherits: false; initial-value: 0px; }
.colophon-mark.lit .colophon-lit { --r: clamp(110px, 13vw, 220px); }

/* the closing call to action */
.colophon-cta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 5rem); align-items: end; padding-bottom: clamp(2.2rem, 5vw, 4rem); margin-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--rule); }
.colophon-kicker { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem; }
.colophon-h { font-family: var(--serif); font-weight: 600; font-size: clamp(2.6rem, 7vw, 6.4rem); line-height: 0.95; letter-spacing: -0.04em; word-spacing: 0.06em; color: var(--ink); }
.colophon-h em { font-style: italic; color: var(--gold); }
.colophon-mail { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--ink); font-family: var(--serif); font-weight: 600; font-size: clamp(1.4rem, 2.8vw, 2.4rem); letter-spacing: -0.02em; color: var(--ink); position: relative; }
.colophon-mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(.7, 0, .2, 1); }
.colophon-mail:hover::after, .colophon-mail:focus-visible::after { transform: scaleX(1); }
.colophon-mail i { font-style: normal; color: var(--gold); transition: transform 0.4s; }
.colophon-mail:hover i { transform: translateX(8px) rotate(-45deg); }
.colophon-live { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-2); }
.colophon-live b { font-weight: 500; color: var(--ink); }
.colophon-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.colophon-live.open .colophon-dot { background: #5FD08A; box-shadow: 0 0 0 0 rgba(95, 208, 138, 0.6); animation: colophon-pulse 2.4s ease-out infinite; }
@keyframes colophon-pulse { to { box-shadow: 0 0 0 8px rgba(95, 208, 138, 0); } }
.colophon-acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
@media (max-width: 820px) { .colophon-cta { grid-template-columns: 1fr; } }

/* link hover: a gold arrow slides in */
.colophon-col a { position: relative; transition: color 0.25s, transform 0.3s; }
.colophon-col a::before { content: "→"; position: absolute; left: -1.1rem; color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity 0.25s, transform 0.3s; }
.colophon-col a:hover { transform: translateX(0.9rem); }
.colophon-col a:hover::before { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .colophon-col a:hover { transform: none; } .colophon .colophon-mark .colophon-lit { transition: none; } }
/* the wordmark below does the small logo's job */
.colophon:has(.colophon-mark) .colophon-grid > div:first-child > img { display: none; }
html.js .colophon-mark img { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.7, 0, .2, 1); }
html.js .colophon-mark.in img { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { html.js .colophon-mark img { clip-path: none; transition: none; } }
.colophon-about { font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.6; color: var(--ink-2); max-width: 36ch; }
.colophon-about + .colophon-about { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 1.2vw, 1.12rem); color: var(--gold); margin-top: 0.9rem; }
/* the colophon runs edge to edge, lined up with the wordmark underneath */
.colophon > .page { width: auto; margin-inline: 0; padding-inline: clamp(0.8rem, 1.6vw, 1.6rem); }
.colophon-col a { font-size: clamp(0.9rem, 1vw, 1rem); }
.colophon h4 { font-size: 0.66rem; }
.colophon h4 { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.7rem; }
.colophon-col a { display: block; font-size: 0.85rem; color: var(--ink-2); padding: 0.2rem 0; }
.colophon-col a:hover { color: var(--ink); }
/* ---- Social row -------------------------------------------------------
   Sits under the colophon's studio blurb. Monoline glyphs rather than the
   filled brand marks: at 17px the outline reads as part of the same
   typographic system as the rest of the footer, where a colour blob doesn't.
   Rendered from one list in build-social.py — platforms without an account
   simply aren't emitted, so there is never an icon that goes nowhere. */
/* ---- Honeypot ---------------------------------------------------------
   Every form carries a field no human sees; a submission that fills it in is
   discarded server-side. The rule used to live only in styles.css, which the
   v5 pages no longer load — so on custom-scope it rendered as a real input
   sitting above the name field, and anyone who typed into it would have had
   their message silently thrown away. It belongs with the forms, not with the
   old stylesheet. */
.hp-field, .hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

.social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.social a {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); border: 1px solid var(--rule);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.social a:hover, .social a:focus-visible {
  color: var(--gold); border-color: var(--gold); background: rgba(201,162,39,0.08);
}
.social svg { width: 17px; height: 17px; display: block; }

@media (max-width: 680px) {
  .social { gap: 0.45rem; }
  .social a { width: 38px; height: 38px; }   /* comfortable thumb target */
}

.imprint {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1.4rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.imprint .langs { display: flex; gap: 0.9rem; }
.imprint .langs a:hover { color: var(--gold); }

/* Narrow screens: the rule line's kicker is nowrap by design, but a long
   CMS-driven eyebrow (notably in German and Turkish) then forces the whole
   page wider than the phone. Let it wrap below the breakpoint instead. */
@media (max-width: 680px) {
  .rule { flex-wrap: wrap; row-gap: 0.3rem; }
  .rule::after { content: none; }
  .kicker { white-space: normal; }
  .num { white-space: normal; }
}

/* ---- First-year pricing labels ---------------------------------------
   Every published price is a launch-year rate, not a permanent cut. The
   struck figure is the standard rate we return to, so the discount is
   stated at the price rather than only in a footnote. */
.price-standard { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--ink-3); text-decoration: line-through; }
.price-tag { display: block; margin-top: 0.2rem; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.paper .price-tag { color: #8A6A21; }   /* raw gold fails contrast on cream */
.pack-old { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); text-decoration: line-through; }
.pack-tag { display: block; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.paper .pack-tag { color: #8A6A21; }

/* ==========================================================================
   CTA DOCK — fixed bottom-right card on desktop, bottom tab bar on phones.
   Appears once the visitor has scrolled past the cover, so it never competes
   with the opening headline.
   ========================================================================== */
.dock {
  position: fixed; right: clamp(0.9rem, 2vw, 1.5rem); bottom: clamp(0.9rem, 2vw, 1.5rem);
  z-index: 160; min-width: 236px;
  display: flex; flex-direction: column;
  background: var(--stock-2);
  border: 1px solid var(--rule-2);
  box-shadow: 0 18px 44px rgba(19,18,23,0.14);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.dock.in { opacity: 1; transform: none; pointer-events: auto; }
.dock-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1rem;
  transition: background 0.2s var(--ease);
}
.dock-row + .dock-row { border-top: 1px solid var(--rule); }
.dock-row:hover { background: rgba(242,239,231,0.05); }
.dock-row b { font-family: var(--serif); font-weight: 600; font-style: italic; font-size: 0.95rem; color: var(--gold); }
.dock-row span { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.dock-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px 2px rgba(200,16,46,0.45); animation: blink 2.6s ease-in-out infinite; }
.dock-mark { flex: 0 0 auto; font-size: 0.72rem; color: var(--gold); }
.dock-arrow { margin-left: auto; font-style: normal; font-size: 0.8rem; opacity: 0.5; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.dock-row:hover .dock-arrow { opacity: 1; transform: translateX(3px); }
/* free tools: third row, opens a short list above the dock */
button.dock-row { width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dock-x { width: 0.9rem; height: auto; flex: 0 0 auto; }
.dock-tools .dock-arrow { transition: transform 0.25s var(--ease), opacity 0.2s var(--ease); }
.dock-tools:hover .dock-arrow { transform: translateY(-2px); }
.dock.tools-open .dock-tools .dock-arrow { opacity: 1; transform: rotate(180deg); }
.dock-tools-menu { position: absolute; left: -1px; right: -1px; bottom: calc(100% + 6px); background: var(--stock-2); border: 1px solid var(--rule-2); box-shadow: 0 -18px 40px rgba(19,18,23,0.12); display: flex; flex-direction: column; }
.dock-tools-menu[hidden] { display: none; }
.dock-tools-menu a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; font-size: 0.86rem; color: var(--ink); transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.dock-tools-menu a + a { border-top: 1px solid var(--rule); }
.dock-tools-menu a:hover, .dock-tools-menu a:focus-visible { background: rgba(242,239,231,0.05); color: var(--gold); }
.dock-tools-menu em { font-style: normal; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.dock-tools-menu a.is-new em { color: var(--red); }

@media (max-width: 680px) {
  .dock {
    left: 0; right: 0; bottom: 0; min-width: 0;
    flex-direction: row; border-width: 1px 0 0 0;
    transform: translateY(100%); z-index: 200;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .dock.in { transform: none; }
  .dock-row { flex: 1 1 50%; justify-content: center; text-align: center; padding: 0.85rem 0.6rem; gap: 0.4rem; }
  .dock-row + .dock-row { border-top: 0; border-left: 1px solid var(--rule); }
  .dock-row b { font-size: 0.82rem; }
  button.dock-row { text-align: center; }
  .dock-row { flex-basis: 33.33%; }
  .dock-tools-menu { left: 0; right: 0; bottom: 100%; border-width: 1px 0; }
  .dock-row span { font-size: 0.6rem; letter-spacing: 0.1em; }
  .dock-arrow { display: none; }
  /* keep the last section clear of the bar */
  body { padding-bottom: 3.6rem; }
}
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } .dock-dot { animation: none; } }

/* Cross-page transitions: a project card's image grows into the project page's cover. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
}

/* ======================= Colophon, the back cover =======================
   A statement, three numbered indexes set large and ruled apart, a running
   ticker of promises, and the wordmark with its torch. Overrides the plainer
   colophon rules above. */
.colophon-grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); justify-content: stretch; gap: 0; border-top: 1px solid var(--rule); }
.colophon-grid > * { padding: clamp(1.6rem, 3vw, 2.8rem) clamp(1rem, 2.2vw, 2.2rem); }
.colophon-grid > :first-child { padding-left: 0; }
.colophon-grid > * + * { border-left: 1px solid var(--rule); }
.colophon-about { font-family: var(--serif); font-weight: 600; font-size: clamp(1.2rem, 1.65vw, 1.7rem); line-height: 1.18; letter-spacing: -0.02em; color: var(--ink); max-width: 24ch; }
.colophon-about + .colophon-about { font-weight: 500; font-size: clamp(0.98rem, 1.15vw, 1.1rem); line-height: 1.4; letter-spacing: 0; max-width: 30ch; margin-top: 1.1rem; }
.colophon .social { margin-top: 1.4rem; }

.colophon h4 { display: flex; justify-content: space-between; font-size: 0.64rem; letter-spacing: 0.2em; color: var(--red); margin-bottom: 1.1rem; }
.colophon-col { counter-reset: col; }
.colophon-col a { counter-increment: col; display: flex; align-items: baseline; gap: 0.7rem; padding: 0.42rem 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1rem, 1.3vw, 1.4rem); line-height: 1.15; white-space: nowrap; letter-spacing: -0.015em; color: var(--ink); border-bottom: 1px solid transparent; }
.colophon-col a::before { content: counter(col, decimal-leading-zero); position: static; opacity: 1; transform: none; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--ink-3); transition: color 0.25s; }
.colophon-col a::after { content: "→"; margin-left: auto; font-family: var(--sans); font-size: 0.9em; color: var(--gold); opacity: 0; transform: translateX(-10px); transition: opacity 0.25s, transform 0.3s; }
.colophon-col a:hover, .colophon-col a:focus-visible { transform: none; color: var(--gold); border-bottom-color: var(--rule); }
.colophon-col a:hover::before { color: var(--gold); }
.colophon-col a:hover::after, .colophon-col a:focus-visible::after { opacity: 1; transform: none; }
.colophon-col a[href^="mailto:"] { font-size: clamp(0.95rem, 1.2vw, 1.15rem); word-break: break-all; }

/* the running line of promises, with the logo's X between them */
.colophon-ticker { margin-top: clamp(1.6rem, 3vw, 2.4rem); border-block: 1px solid var(--rule); overflow: hidden; padding-block: clamp(0.8rem, 1.6vw, 1.2rem); }
.colophon-ticker-run { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); width: max-content; animation: colophon-run 48s linear infinite; }
.colophon-ticker:hover .colophon-ticker-run { animation-play-state: paused; }
.colophon-ticker span { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 2.8vw, 2.6rem); letter-spacing: -0.02em; color: var(--ink-2); white-space: nowrap; }
.colophon-ticker i { width: 0.9em; height: 0.72em; font-size: clamp(1.4rem, 2.8vw, 2.6rem); flex: none; background: var(--x) center / contain no-repeat; }
@keyframes colophon-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .colophon-ticker-run { animation: none; } }

@media (max-width: 900px) {
  .colophon-grid { grid-template-columns: 1fr 1fr 1fr; }
  .colophon-grid > :first-child { grid-column: 1 / -1; padding-right: 0; border-bottom: 1px solid var(--rule); }
  .colophon-grid > :nth-child(2) { border-left: 0; padding-left: 0; }
}
@media (max-width: 600px) {
  .colophon-grid { grid-template-columns: 1fr; }
  .colophon-grid > * { padding-inline: 0; border-left: 0 !important; }
  .colophon-grid > * + * { border-top: 1px solid var(--rule); }
}

/* ==========================================================================
   Light theme ("dawn", 2026-10-08). The site moved from night stock to
   cream stock; the tokens above carry most of it. What follows fixes the
   places that hard-coded night colours. Selectors are prefixed with `html`
   so they also win over page CSS loaded after this file. The intro loader
   and the colophon deliberately stay night: the page opens out of the dark
   and Nyx keeps the last word.
   ========================================================================== */
::selection { color: #fff; }
html .drop-menu a:hover, html .dock-row:hover,
html .dock-tools-menu a:hover, html .dock-tools-menu a:focus-visible { background: rgba(19,18,23,0.05); }

html .an-loader { background: #0B0B0E; color: #F2EFE7; --ink: #F2EFE7; --ink-2: #A7A49C; }
html .an-hero { background: radial-gradient(120% 80% at 50% 0%, #FFF8E4 0%, var(--stock) 60%); }
html .an-ring { border-color: rgba(19,18,23,0.45); }
html .an-pill.ghost { border-color: rgba(19,18,23,0.4); }
html .an-pill.ghost:hover { color: #F7F4EC; }
html .an-mark3d path { fill: #131217; }
html .an-marquee { background: rgba(247,244,236,0.75); }
html .an-m-row .o { -webkit-text-stroke-color: rgba(19,18,23,0.5); }
html .an-work { background: var(--stock); }

html .colophon { --stock:#0B0B0E; --stock-2:#121116; --stock-3:#191820; --surface:#121116; --ink:#F2EFE7; --ink-2:#A7A49C; --ink-3:#6E6C68; --gold:#C9A227; --gold-bright:#E0BC4A; --rule:rgba(242,239,231,.16); --rule-2:rgba(242,239,231,.38); background:#0B0B0E; color:var(--ink); }
html .colophon ::selection { color: #0B0B0E; }

/* Blog form fields and tool cards were tinted night glass. */
html .news-form input[type="email"], html .xray-form input { background: #FBF9F3; }
html .tools a { background: #FBF9F3; }
html .dl-side { background: rgba(255,255,255,0.5); }