/* ==========================================================================
   DIAMOND KING — Base / reset / primitives
   ========================================================================== */

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

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

body{
  margin:0;
  background:var(--graphite-950);
  color:var(--white);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body.theme-paper{ background:var(--paper-0); color:var(--ink-950); }

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }

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

button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }

h1,h2,h3,h4,h5,h6{ margin:0; font-family:var(--font-display); font-weight:700; line-height:var(--lh-tight); letter-spacing:var(--ls-tight); text-transform:uppercase; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); }

p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* Focus — always visible, never removed */
:focus-visible{
  outline:2px solid var(--accent-500);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

::selection{ background:var(--accent-600); color:var(--white); }

/* ---- Layout primitives ---- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-24); }
@media (max-width:767px){ .container{ padding-inline:var(--sp-16); } }

.section{ padding-block:var(--sp-96); }
@media (max-width:767px){ .section{ padding-block:var(--sp-64); } }

.section-dark{ background:var(--graphite-950); color:var(--white); }
.section-paper{ background:var(--paper-0); color:var(--ink-950); }
.section-paper-alt{ background:var(--paper-50); color:var(--ink-950); }

/* ---- Type primitives ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--sp-8);
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-wider);
  text-transform:uppercase;
  color:var(--accent-500);
}
.eyebrow::before{ content:''; width:24px; height:1px; background:var(--accent-600); }

.section-title{ font-size:var(--fs-h2); margin-top:var(--sp-16); }
.section-lead{ margin-top:var(--sp-16); max-width:60ch; color:var(--steel-200); font-size:var(--fs-body-lg); }
.section-paper .section-lead,.section-paper-alt .section-lead{ color:var(--steel-500); }

.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ---- Signature: machined chamfer ---- */
.notch{ clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
.notch-bl{ clip-path:polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch))); }

/* ---- Buttons ---- */
.btn{
  --btn-notch:10px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-12);
  min-height:52px; padding:0 var(--sp-32);
  font-family:var(--font-display); font-size:1.0625rem; font-weight:600;
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  cursor:pointer; position:relative; isolation:isolate;
  clip-path:polygon(0 0, calc(100% - var(--btn-notch)) 0, 100% var(--btn-notch), 100% 100%, 0 100%);
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active{ transform:translateY(1px); }

.btn-primary{ background:var(--accent-600); color:var(--accent-contrast); }
.btn-primary:hover{ background:var(--accent-700); }

.btn-ghost{ --ghost-line:rgba(255,255,255,.34); background:transparent; color:var(--white); box-shadow:inset 0 0 0 1px var(--ghost-line); }
.btn-ghost:hover{ background:rgba(255,255,255,.07); }
/* the chamfer clips the inset border — redraw the diagonal edge */
.btn-ghost::after{
  content:''; position:absolute; top:0; left:calc(100% - var(--btn-notch));
  width:calc(var(--btn-notch) * 1.4142); height:1px; background:var(--ghost-line);
  transform:rotate(45deg); transform-origin:0 0; pointer-events:none;
}

/* dark-text ghost buttons only inside light sections — never page-wide, dark bands stay light-on-dark */
.section-paper .btn-ghost,.section-paper-alt .btn-ghost{ --ghost-line:var(--paper-line-strong); color:var(--ink-950); }
.section-paper .btn-ghost:hover,.section-paper-alt .btn-ghost:hover{ background:var(--paper-100); }

.btn-sm{ min-height:42px; padding:0 var(--sp-24); font-size:.9375rem; --btn-notch:8px; }
.btn-block{ width:100%; }

/* ---- Link with animated rule ---- */
.link-rule{
  display:inline-flex; align-items:center; gap:var(--sp-8);
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:var(--ls-wide); color:var(--white);
}
.section-paper .link-rule,.section-paper-alt .link-rule{ color:var(--ink-950); }
.link-rule svg{ transition:transform var(--dur-base) var(--ease-out); }
.link-rule:hover svg{ transform:translateX(5px); }

/* ---- Badges / chips ---- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 10px;
  font-family:var(--font-mono); font-size:var(--fs-caption);
  letter-spacing:.06em; text-transform:uppercase;
  border-radius:var(--r-sm);
  background:var(--paper-100); color:var(--steel-500);
}
.badge-accent{ background:rgba(163,17,27,.12); color:var(--accent-600); }
.badge-dark{ background:rgba(255,255,255,.08); color:var(--steel-200); }

/* ---- Utility ---- */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; top:-100px; left:var(--sp-16); z-index:1000;
  background:var(--accent-600); color:var(--white);
  padding:var(--sp-12) var(--sp-24); font-weight:600;
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top:var(--sp-16); }

.no-scroll{ overflow:hidden; }

/* ---- Hairline grid texture for dark bands ---- */
.grid-texture{ position:relative; }
.grid-texture::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--graphite-line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--graphite-line) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
  opacity:.5;
}