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

/* Locked layout — cassette sleeve v1. Tune via :root tokens only. */

:root {
  --bg: #232023;
  --text: #f2f0ea;
  --text-muted: #9a9a9a;
  --stripe-1: #b05c2a;
  --stripe-2: #bca032;
  --stripe-3: #385e88;
  --rule: rgba(242, 240, 234, 0.2);
  --text-halo-border: #232023;
  --layout-max: 80rem; /* 1280px — fits 1366×768, common smallest laptop width */
  --content-col: 28rem;
  --font-display: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  /* Name lockup — HTML/CSS, px for predictable alignment */
  --name-given-size: 40px;
  --name-surname-size: 104px;
  --name-year-size: 36px;
  --name-year-inset: 65px;
  --name-given-width: 77%;
  --name-given-margin: 0;
  --name-given-pad-block: 3px;
  --name-given-pad-right: 1px;
  --name-surname-offset: 30px;
  --name-year-offset: 19px;
  --content-gap: 1.35rem;
  --lockup-height: calc(
    var(--name-surname-offset) +
    var(--name-surname-size) * 0.95 +
    var(--name-year-offset) +
    var(--name-year-size)
  );
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
}

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

.sleeve {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
}

.layout {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--layout-max);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ── Persistent stripes — full viewport width ── */
.stripes {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.stripe-stack {
  position: absolute;
  left: -50%;
  bottom: 5%;
  width: 220%;
  display: flex;
  flex-direction: column;
  transform: rotate(38deg);
  transform-origin: center;
}

.stripe {
  height: clamp(44px, 5.5vh, 68px);
  width: 100%;
}

.stripe-1 { background: var(--stripe-1); }
.stripe-2 { background: var(--stripe-2); }
.stripe-3 { background: var(--stripe-3); }

/* ── Masthead — top-right lockup, top-left nav ── */
.masthead {
  position: relative;
  z-index: 2;
  padding: 0 2.5rem;
  min-height: var(--lockup-height);
  overflow: visible;
}

.masthead .nav {
  position: absolute;
  top: 0;
  left: 2.5rem;
  margin: 0;
  padding: 2px 0 0;
  border: none;
}

.corner-copy {
  position: absolute;
  top: 0;
  right: 2.5rem;
}

.name-lockup {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  text-align: right;
  line-height: 1;
  min-height: var(--lockup-height);
  font-family: var(--font-display);
}

.name-given {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--name-given-width);
  margin: var(--name-given-margin);
  padding-block: var(--name-given-pad-block);
  padding-inline: 0 var(--name-given-pad-right);
  background: var(--text);
  color: var(--bg);
  font-size: var(--name-given-size);
  font-weight: 900;
  letter-spacing: 0.48px;
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.name-surname {
  position: relative;
  top: var(--name-surname-offset);
  margin: 0;
  font-size: var(--name-surname-size);
  font-weight: 900;
  letter-spacing: -2.08px;
  line-height: 0.95;
}

.name-year {
  position: relative;
  top: var(--name-year-offset);
  margin: 0 var(--name-year-inset) 0 0;
  font-size: var(--name-year-size);
  font-weight: 700;
  letter-spacing: 1.44px;
  line-height: 1;
}

.name-year .year-symbol {
  font-size: 0.82em;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: top;
  opacity: 0.85;
}

.nav {
  display: flex;
  gap: 1.5rem;
}
.front-footer {
  position: relative;
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding: 1.25rem 2.5rem 2px;
}

.front-tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-link {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 0 0.75rem;
  border-bottom: 2px solid transparent;
}

.nav-link:hover {
  color: var(--text);
}

.nav-link.active {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* ── Swappable content ── */
.content-area {
  position: relative;
  flex: 1;
  width: var(--content-col);
  max-width: calc(100% - 5rem);
  margin-left: auto;
  margin-right: 2.5rem;
  padding: var(--content-gap) 0 0;
  text-shadow: 0 0 3px var(--bg);
}

.panel {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  width: 100%;
}

.panel.active {
  display: flex;
}

.spec-table th,
.spec-table td,
.fine-print p {
  -webkit-text-stroke: 3px var(--text-halo-border);
  paint-order: stroke fill;
}

.spec-table {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.spec-table th,
.spec-table td {
  padding: 2px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  text-transform: uppercase;
}

.spec-table th {
  font-weight: 700;
  width: 38%;
  color: var(--text);
  border-left: 1px solid var(--rule);
  padding-left: 4px;
}

.spec-table td {
  color: var(--text-muted);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  padding-left: 4px;
}

.spec-table a {
  color: var(--text);
  text-decoration: none;
}

.spec-table a:hover {
  text-decoration: underline;
}

.fine-print {
  font-size: 0.65rem;
  line-height: 1.55;
  color: var(--text-muted);
  width: 100%;
  max-width: none;
  text-align: justify;
}

.fine-print p + p {
  margin-top: 0.75rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: none;
}

.field-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.8rem;
  padding: 0.5rem 0.6rem;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--text);
}

.submit {
  align-self: flex-end;
  margin-top: 0.25rem;
  background: var(--text);
  color: var(--bg);
  border: none;
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
}

.submit:hover {
  background: var(--stripe-2);
  color: var(--bg);
}

@media (max-width: 900px), ((max-height: 500px) and (orientation: landscape)) {
  .stripe-stack {
    left: -65%;
    width: 280%;
    bottom: -6%;
    transform-origin: center bottom;
  }

  .masthead {
    padding: 0 max(1.5rem, env(safe-area-inset-right)) 0 max(1.5rem, env(safe-area-inset-left));
    --name-given-size: 26px;
    --name-surname-size: 66px;
    --name-year-size: 23px;
    --name-year-inset: 42px;
    --name-surname-offset: 19px;
    --name-year-offset: 12px;
  }

  .masthead .nav {
    left: max(1.5rem, env(safe-area-inset-left));
  }

  .corner-copy {
    right: max(1.5rem, env(safe-area-inset-right));
  }

  .content-area {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: -105px;
    padding: var(--content-gap) max(1.5rem, env(safe-area-inset-right)) 0 max(1.5rem, env(safe-area-inset-left));
    box-sizing: border-box;
  }

  .fine-print,
  .contact-form {
    width: 75%;
    max-width: 75%;
    margin-left: auto;
  }

  .fine-print {
    text-align: justify;
  }

  .submit {
    align-self: flex-end;
  }

  .front-footer {
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
    padding-bottom: max(2px, env(safe-area-inset-bottom));
  }
}

@media (orientation: landscape) and (max-width: 900px) {
  .sleeve,
  .layout {
    min-height: max(100dvh, 685px);
  }
}

@media (orientation: landscape) and (max-height: 700px) {
  .stripe-stack {
    bottom: -14%;
    left: -72%;
    width: 300%;
    transform-origin: center bottom;
  }

  .stripe {
    height: clamp(30px, 7vh, 48px);
  }
}

@media (orientation: landscape) and (max-height: 450px) {
  .stripe-stack {
    bottom: -24%;
  }
}