/* ==========================================================================
   Chapa sob Inspeção — inspection-plate world
   Grounds are coated steel: red-oxide primer and gunmetal. Amber is safety
   marking, red is annotation, cyan is telemetry. Nothing here is a card.
   ========================================================================== */

:root {
  /* Grounds */
  --plate: #1b0e0b;
  --plate-2: #2a1512;
  --plate-3: #3b1d17;
  --steel: #12161a;
  --steel-2: #1a2026;

  /* Marks */
  --ink: #f6efe9;
  --ink-dim: #c8b0a4;
  --ink-dim-steel: #a8b6c0;
  --amber: #ffb703;
  --amber-deep: #c98600;
  --red: #ff4438;
  --red-deep: #c1121f;
  --cyan: #7dd3fc;
  --blue: #58a6ff;
  --green: #3fb950;

  /* Type */
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --text: Archivo, system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, monospace;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 66ch;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Steel grain, reused on every ground */
  --grain: repeating-linear-gradient(
    92deg,
    rgba(0, 0, 0, 0.14) 0 1px,
    rgba(255, 255, 255, 0.012) 1px 3px,
    transparent 3px 7px
  );
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--plate);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* --- The dive: one fixed canvas behind the whole document -------------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.backdrop canvas {
  width: 100%;
  height: 100%;
}

/* Keeps body copy off the brightest members without hiding the structure. */
.backdrop__surface {
  position: absolute;
  inset: 0;
  background: radial-gradient(125% 95% at 50% 0%, transparent 45%, rgba(10, 5, 4, 0.42) 100%);
}

.topbar,
.gauge,
main,
.foot {
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--amber);
  color: #1b0e0b;
  font: 600 0.8rem/1 var(--mono);
  text-decoration: none;
  transition: top 0.2s var(--ease);
}

.skip:focus {
  top: 1rem;
}

/* --- Shared marks ---------------------------------------------------- */

/* Weld bead between grounds. */
main > section + section::before {
  content: '';
  display: block;
  height: 7px;
  background-image: repeating-linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.16) 0 3px,
      rgba(0, 0, 0, 0.5) 3px 7px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.55));
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.8);
}

main > section {
  position: relative;
}

main > section + section::before {
  position: absolute;
  inset: 0 0 auto;
}

/* --- Top bar ---------------------------------------------------------- */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: 0.85rem var(--gutter);
  background: linear-gradient(180deg, rgba(20, 10, 8, 0.94), rgba(20, 10, 8, 0.62));
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-bottom: 1px solid rgba(255, 183, 3, 0.22);
}

.topbar__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--amber);
  font: 600 0.7rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-decoration: none;
}

.topbar__mark .mark {
  width: 22px;
  height: 22px;
}

.topbar__nav {
  display: flex;
  gap: clamp(0.9rem, 2.4vw, 2rem);
  margin-inline-start: auto;
}

.topbar__nav a {
  position: relative;
  padding-block: 0.35rem;
  color: var(--ink-dim);
  font: 400 0.72rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.topbar__nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.topbar__nav a:hover,
.topbar__nav a:focus-visible {
  color: var(--ink);
}

.topbar__nav a:hover::after,
.topbar__nav a:focus-visible::after {
  transform: scaleX(1);
}

.lang {
  display: flex;
  border: 1px solid rgba(255, 183, 3, 0.4);
}

.lang button {
  padding: 0.3rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font: 600 0.7rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.lang button[aria-pressed='true'] {
  background: var(--amber);
  color: #1b0e0b;
}

.lang button:hover:not([aria-pressed='true']) {
  color: var(--ink);
  background: rgba(255, 183, 3, 0.14);
}

/* --- Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 7rem var(--gutter) 0;
  background-image: radial-gradient(58% 62% at 16% 48%, rgba(20, 9, 7, 0.9), rgba(20, 9, 7, 0) 74%),
    radial-gradient(90% 70% at 10% 90%, rgba(255, 183, 3, 0.07), transparent 70%);
}

.hero__body {
  align-self: center;
  max-width: 44ch;
  padding-block: 2rem;
}

.hero__name {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.2rem, 11vw, 6rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero__name span {
  display: block;
  color: var(--amber);
}

.hero__role {
  margin: 1.4rem 0 0;
  color: var(--red);
  font: 600 clamp(0.68rem, 1.6vw, 0.8rem) / 1.5 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero__thesis {
  margin: 1.5rem 0 0;
  max-width: 42ch;
  color: var(--ink-dim);
  font-size: 1.0625rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--amber);
  color: var(--amber);
  font: 600 0.74rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.28s var(--ease), color 0.28s var(--ease), transform 0.28s var(--ease);
}

.btn svg {
  width: 1.05em;
  height: 1.05em;
}

.btn:hover,
.btn:focus-visible {
  background: rgba(255, 183, 3, 0.14);
  transform: translateY(-2px);
}

.btn--primary {
  background: var(--amber);
  color: #1b0e0b;
  box-shadow: 0 10px 24px -14px rgba(255, 183, 3, 0.9);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: #ffc93a;
  color: #1b0e0b;
}

.btn--wide {
  margin-top: 2.5rem;
  justify-content: center;
  width: min(100%, 26rem);
}

/* Annotation callouts pinned to points on the 3D structure. Fixed, because the
   canvas they annotate is fixed; JS fades them out once the hero has passed. */
.callouts {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.callouts[data-away='true'] {
  opacity: 0;
}

.callout {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.callout.is-live {
  opacity: 1;
}

.callout::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  background: var(--amber);
  box-shadow: 0 0 0 5px rgba(255, 183, 3, 0.16);
}

.callout::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  width: 66px;
  height: 1px;
  background: linear-gradient(90deg, var(--amber), rgba(255, 183, 3, 0.35));
  transform-origin: 0 50%;
  transform: rotate(-38deg);
}

.callout__id,
.callout__text {
  position: absolute;
  left: 56px;
  white-space: nowrap;
  font-family: var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.callout__id {
  top: -66px;
  color: var(--red);
  font-size: 0.6rem;
  font-weight: 600;
}

.callout__text {
  top: -50px;
  color: var(--ink);
  font-size: 0.68rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 183, 3, 0.5);
}

.callout--flip .callout__id,
.callout--flip .callout__text {
  left: auto;
  right: 56px;
}

.callout--flip::after {
  transform: rotate(-142deg);
  left: auto;
  right: 4px;
  transform-origin: 100% 50%;
}

.hero__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.25rem 2rem;
  margin: 0;
  padding: 1.4rem 0 2.2rem;
  border-top: 1px solid rgba(255, 183, 3, 0.28);
}

.hero__strip dt {
  color: var(--red);
  font: 600 0.62rem/1.6 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero__strip dd {
  margin: 0.15rem 0 0;
  color: var(--ink-dim);
  font: 400 0.8rem/1.5 var(--mono);
}

/* --- Dive instruments -------------------------------------------------- */

/* Descent progress, welded to the bottom edge of the top bar. */
.dive {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: rgba(255, 183, 3, 0.16);
}

.dive i {
  display: block;
  height: 100%;
  width: var(--dive-progress, 0%);
  background: linear-gradient(90deg, var(--amber), var(--red));
}

/* Depth gauge: the page is an inspection descent, so it reads out the depth. */
.gauge {
  position: fixed;
  left: clamp(0.75rem, 2.2vw, 1.75rem);
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  padding: 0.75rem 0.6rem;
  border: 1px solid rgba(255, 183, 3, 0.28);
  background: rgba(14, 7, 6, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.gauge[data-live='true'] {
  opacity: 1;
}

.gauge__depth {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.gauge__depth b {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--amber);
  letter-spacing: -0.04em;
}

.gauge__depth i {
  font-style: normal;
  font-size: 0.6rem;
  color: var(--ink-dim);
}

/* Ticks: the scale slides so the current depth stays at the centre mark. */
.gauge__scale {
  position: relative;
  width: 26px;
  height: clamp(7rem, 22vh, 12rem);
  overflow: hidden;
  background-image: repeating-linear-gradient(
      180deg,
      rgba(255, 183, 3, 0.55) 0 1px,
      transparent 1px 14px
    ),
    repeating-linear-gradient(180deg, rgba(255, 183, 3, 0.9) 0 2px, transparent 2px 70px);
  background-size: 9px 14px, 17px 70px;
  background-position: left var(--gauge-offset, 0px), right var(--gauge-offset, 0px);
  background-repeat: repeat-y;
}

.gauge__scale::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  background: var(--red);
}

.gauge__station {
  margin: 0;
  max-width: 4.5rem;
  color: var(--ink-dim);
  font: 400 0.55rem/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

/* The gauge gets its own rail; the report is inset to make room for it. */
@media (max-width: 1199px) {
  .gauge {
    display: none;
  }
}

@media (min-width: 1200px) {
  body {
    padding-left: 5.5rem;
  }

  .topbar {
    padding-left: calc(var(--gutter) + 5.5rem);
  }

  .gauge {
    left: 1.15rem;
  }
}

/* --- Section chrome --------------------------------------------------- */

main > section:not(.hero) {
  padding: clamp(4.5rem, 9vw, 8rem) var(--gutter);
}

.section__head {
  max-width: var(--measure);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section__head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

.section__head h2::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: 1.1rem;
  background: var(--red);
}

.section__head p {
  margin: 1.35rem 0 0;
  max-width: var(--measure);
  color: var(--ink-dim);
}

/* --- Findings register ------------------------------------------------ */

/* Grounds are translucent so the dive stays visible behind the report; the
   blocks that carry body copy sit at a higher alpha to protect contrast. */
.findings {
  background-color: rgba(18, 22, 26, 0.55);
  background-image: var(--grain), radial-gradient(80% 60% at 85% 0%, rgba(88, 166, 255, 0.1), transparent 70%);
  color: var(--ink);
}

.findings .section__head p {
  color: var(--ink-dim-steel);
}

/* The colour key. Nothing on this page is coloured for decoration, so the key
   is worth printing: it is how the register below is read. */
.law {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  padding: 0.8rem clamp(1rem, 2.4vw, 2rem);
  max-width: 78rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.6rem;
  background: rgba(26, 32, 38, 0.78);
}

.law li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink-dim-steel);
  font: 400 0.62rem/1.6 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.law i {
  flex: none;
  width: 9px;
  height: 9px;
}

.law [data-c='white'] i { background: var(--ink); }
.law [data-c='amber'] i { background: var(--amber); }
.law [data-c='red'] i { background: var(--red); }
.law [data-c='cyan'] i { background: var(--cyan); }
.law [data-c='green'] i { background: var(--green); }

.register {
  margin: 0;
  padding: 0;
  max-width: 78rem;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.record {
  position: relative;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 20rem;
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.8rem, 3.4vw, 2.8rem) clamp(1rem, 2.4vw, 2rem);
  background: rgba(26, 32, 38, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  transition: background 0.3s var(--ease);
}

/* Annotation brackets: four corner arms, drawn as eight gradient rects so the
   arm length can be animated through --bkl. */
.record::before {
  content: '';
  position: absolute;
  inset: 0.75rem;
  pointer-events: none;
  opacity: 0.5;
  --bk: var(--record-accent);
  --bkl: 26px;
  --bkw: 2px;
  background-image: linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)), linear-gradient(var(--bk), var(--bk));
  background-position: left top, left top, right top, right top, right bottom, right bottom, left bottom,
    left bottom;
  background-repeat: no-repeat;
  background-size: var(--bkl) var(--bkw), var(--bkw) var(--bkl), var(--bkl) var(--bkw),
    var(--bkw) var(--bkl), var(--bkl) var(--bkw), var(--bkw) var(--bkl), var(--bkl) var(--bkw),
    var(--bkw) var(--bkl);
  transition: background-size 0.6s var(--ease), opacity 0.3s var(--ease);
}

/* JS marks records for the scan reveal; the brackets draw as it passes. */
.record.scan::before {
  --bkl: 0px;
}

.record.scan.is-scanned::before {
  --bkl: 26px;
}

.record:hover::before,
.record:focus-within::before {
  opacity: 1;
  --bkl: 26px;
}

.record--offshore {
  --record-accent: var(--cyan);
}

.record--engineering {
  --record-accent: var(--red);
}

.record:hover {
  background: rgba(32, 40, 48, 0.88);
}

.record__id {
  font: 600 0.72rem/1.4 var(--mono);
  letter-spacing: 0.12em;
  color: var(--record-accent);
}

.record__id span {
  display: inline-block;
  padding: 0.3rem 0.5rem;
  border: 1px solid currentColor;
}

.record__main h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.record__main h3 a {
  text-decoration: none;
  background-image: linear-gradient(var(--record-accent), var(--record-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 3px;
  transition: background-size 0.35s var(--ease);
}

.record__main h3 a:hover,
.record__main h3 a:focus-visible {
  background-size: 100% 3px;
}

.record__pitch {
  margin: 0.9rem 0 0;
  max-width: 62ch;
  color: var(--ink-dim-steel);
}

.record__stack {
  margin: 1rem 0 0;
  color: var(--ink-dim-steel);
  font: 400 0.68rem/1.7 var(--mono);
  letter-spacing: 0.06em;
  opacity: 0.85;
}

/* Declared limits: the second acceptance criterion, made clickable. */
/* Declared limits are a native <details>: the browser already owns the
   keyboard, the state and find-in-page. Amber, because the colour key above
   the register says amber is the safety marking. */
.record__limits {
  margin-top: 1.25rem;
}

.record__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem 0.5rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--ink-dim-steel);
  font: 400 0.66rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.record__toggle::-webkit-details-marker {
  display: none;
}

.record__toggle svg {
  width: 1.1em;
  height: 1.1em;
  transition: rotate 0.4s var(--ease);
}

.record__toggle:hover,
.record__toggle:focus-visible,
.record__limits[open] > .record__toggle {
  color: var(--amber);
  border-color: currentColor;
}

.record__limits[open] > .record__toggle svg {
  rotate: 135deg;
}

/* Animate the opening where the engine can; elsewhere it cuts, which is what
   <details> has always done. `interpolate-size` is inherited, so it is set on
   the disclosure rather than on :root — nothing else on the page transitions an
   intrinsic size, and a global switch for one local effect is how surprises
   start. */
@supports (interpolate-size: allow-keywords) {
  .record__limits {
    interpolate-size: allow-keywords;
  }

  .record__limits::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete;
  }

  .record__limits[open]::details-content {
    block-size: auto;
  }
}

.record__limits p {
  margin: 1.1rem 0 0;
  max-width: 60ch;
  padding-left: 1rem;
  border-left: 1px solid var(--amber);
  color: var(--ink-dim-steel);
  font-size: 0.97rem;
}

.record__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.measures {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
  width: 100%;
}

.measures li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.6rem;
}

.measures b {
  color: var(--ink);
  font: 600 0.9rem/1.2 var(--mono);
  letter-spacing: -0.02em;
}

.measures span {
  color: var(--ink-dim-steel);
  font: 400 0.68rem/1.4 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.record__status {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--ink-dim-steel);
  font: 400 0.68rem/1.6 var(--mono);
  letter-spacing: 0.04em;
}

/* Green is in service, amber is still declared as being built. The key above
   the register carries the caption, so the lamp does not need one.
   It sits on the first line rather than centred, because three of the six
   statuses wrap and a lamp floating between two lines reads as a mistake. */
.record__status::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: calc((1.6em - 7px) / 2);
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(255, 183, 3, 0.16);
}

.record__status[data-state='ok']::before {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.18);
}

.record__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.2rem;
  color: var(--ink);
  font: 600 0.7rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.record__link svg {
  width: 1.15em;
  height: 1.15em;
  transition: transform 0.3s var(--ease);
}

.record__link:hover svg,
.record__link:focus-visible svg {
  transform: translateX(4px);
}

.record__link:hover,
.record__link:focus-visible {
  color: var(--record-accent);
}

/* --- Method ----------------------------------------------------------- */

.method {
  background-color: rgba(42, 21, 18, 0.5);
  background-image: var(--grain),
    radial-gradient(60% 70% at 15% 20%, rgba(255, 68, 56, 0.14), transparent 70%),
    radial-gradient(70% 60% at 90% 90%, rgba(0, 0, 0, 0.4), transparent 70%);
}

.criteria {
  border: 1px solid rgba(255, 183, 3, 0.22);
}

.criterion + .criterion {
  border-top: 1px solid rgba(255, 183, 3, 0.22);
}

.criterion {
  padding: clamp(1.8rem, 3.5vw, 2.75rem);
  background: rgba(27, 14, 11, 0.82);
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: 0.75rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.criterion h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--amber);
}

.criterion p {
  margin: 0;
  max-width: var(--measure);
  color: var(--ink-dim);
}

/* --- Log -------------------------------------------------------------- */

.log {
  background-color: rgba(18, 22, 26, 0.86);
  background-image: var(--grain), radial-gradient(70% 60% at 12% 5%, rgba(125, 211, 252, 0.09), transparent 70%);
}

.log .section__head p {
  color: var(--ink-dim-steel);
}

.entries {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.entry {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 0.4rem clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.entry__when {
  margin: 0;
  color: var(--cyan);
  font: 400 0.72rem/1.7 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.entry__what h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

.entry__what p {
  margin: 0.6rem 0 0;
  max-width: var(--measure);
  color: var(--ink-dim-steel);
}

.certs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 2.5rem 0 0;
}

.certs span:not(.certs__label) {
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(125, 211, 252, 0.45);
  color: var(--cyan);
  font: 600 0.7rem/1 var(--mono);
  letter-spacing: 0.12em;
}

.certs__label {
  color: var(--ink-dim-steel);
  font: 400 0.7rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Capability ------------------------------------------------------- */

.capability {
  background-color: rgba(42, 21, 18, 0.86);
  background-image: var(--grain), radial-gradient(80% 70% at 80% 15%, rgba(255, 183, 3, 0.1), transparent 70%);
}

.stack {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 183, 3, 0.25);
}

.stack > section {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 0.4rem clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.15rem, 2.2vw, 1.6rem) 0;
  border-bottom: 1px solid rgba(255, 183, 3, 0.25);
}

.stack h3 {
  margin: 0;
  color: var(--amber);
  font: 600 0.75rem/1.6 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.stack p {
  margin: 0;
  max-width: var(--measure);
  color: var(--ink-dim);
}

/* --- Signature -------------------------------------------------------- */

.sign {
  background-color: rgba(27, 14, 11, 0.62);
  background-image: var(--grain),
    radial-gradient(70% 70% at 20% 90%, rgba(255, 68, 56, 0.14), transparent 70%),
    radial-gradient(60% 60% at 88% 12%, rgba(88, 166, 255, 0.12), transparent 70%);
}

.signatures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.signature {
  --sig: var(--red);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: rgba(42, 21, 18, 0.82);
}

.signature + .signature {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.signature--offshore {
  --sig: var(--cyan);
}

.signature h3 {
  margin: 0;
  color: var(--sig);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.signature > p {
  margin: 0.7rem 0 1.4rem;
  color: var(--ink-dim);
  max-width: 40ch;
}

.signature ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.signature a {
  color: var(--ink);
  font: 400 0.78rem/1.6 var(--mono);
  letter-spacing: 0.02em;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
  transition: color 0.25s var(--ease);
}

.signature a:hover,
.signature a:focus-visible {
  color: var(--sig);
}

.stamp {
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 2px solid var(--red);
  max-width: 46rem;
  transform: rotate(-0.6deg);
}

.stamp p {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.4vw, 2.15rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--red);
  text-wrap: balance;
}

/* --- Footer ----------------------------------------------------------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 1.75rem var(--gutter);
  background: #120806;
  border-top: 1px solid rgba(255, 183, 3, 0.2);
}

.foot p {
  margin: 0;
  color: var(--ink-dim);
  font: 400 0.68rem/1.6 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.foot time {
  color: var(--amber);
}

/* --- The one authored motion: everything is revealed by the scan ------- */

.scan {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.scan.is-scanned {
  opacity: 1;
  transform: none;
}

/* A heading is not faded in — it is wiped in, the way the scan crosses it. */
.section__head.scan {
  opacity: 1;
  transform: none;
}

.section__head.scan h2 {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.85s var(--ease);
}

.section__head.scan h2::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease) 0.55s;
}

.section__head.scan p {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease) 0.25s, transform 0.6s var(--ease) 0.25s;
}

.section__head.scan.is-scanned h2 {
  clip-path: inset(0 0 0 0);
}

.section__head.scan.is-scanned h2::after {
  transform: scaleX(1);
}

.section__head.scan.is-scanned p {
  opacity: 1;
  transform: none;
}

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 1080px) {
  .record {
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }

  .record__meta {
    grid-column: 2;
    margin-top: 1.5rem;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    padding-top: 1.25rem;
  }

  .criterion,
  .entry,
  .stack > section {
    grid-template-columns: 1fr;
  }

  .criterion h3,
  .entry__what h3 {
    margin-bottom: 0.35rem;
  }
}

@media (max-width: 760px) {
  .signature + .signature {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
}

@media (max-width: 860px) {
  /* Navigation drops to its own row and scrolls, rather than disappearing. */
  .topbar {
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    padding-bottom: 0.35rem;
  }

  /* Wraps instead of scrolling. As a scrolling strip the last item sat outside
     the clip at rest and focus did not scroll it back in, so tabbing to Contato
     left the focus ring off-screen — measured at 390px in both languages. Two
     short rows cost less than a link you can focus but not see. */
  .topbar__nav {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    padding-bottom: 0.35rem;
  }

  .lang {
    margin-inline-start: auto;
  }

  /* The vessel stays, quieter: on a phone the words have to win. */
  .backdrop canvas {
    opacity: 0.34;
  }

  .topbar__mark {
    margin-inline-end: auto;
  }

  /* The bar is 116px tall here once the nav wraps to two rows; both values
     clear it rather than tucking the target underneath. */
  html {
    scroll-padding-top: 7.5rem;
  }

  .hero {
    padding-top: 8.5rem;
  }

  .hero__body {
    max-width: none;
  }

  /* Callouts leave the 3D structure and become a plain annotated list. */
  .callouts {
    position: static;
    display: grid;
    gap: 0.9rem;
    margin: 2.5rem 0 1rem;
    pointer-events: auto;
  }

  .callout {
    position: relative;
    width: auto;
    height: auto;
    opacity: 1;
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    padding-left: 1rem;
    border-left: 2px solid var(--amber);
  }

  .callout::before,
  .callout::after {
    display: none;
  }

  .callout__id,
  .callout__text {
    position: static;
    white-space: normal;
    border: 0;
    padding: 0;
  }

  .callout__text {
    font-size: 0.72rem;
    line-height: 1.5;
  }
}

@media (max-width: 560px) {
  .record {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .record__meta,
  .record__main {
    grid-column: 1;
  }

  .measures li {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .scan {
    opacity: 1;
    transform: none;
  }

  .callout {
    opacity: 1;
  }

  .section__head.scan h2 {
    clip-path: none;
  }

  .section__head.scan h2::after,
  .section__head.scan p {
    opacity: 1;
    transform: none;
  }
}