/* ============================================================================
   NAUTIYAL’S EMPIRE - BASE
   Reset, document defaults, typography classes, layout primitives, utilities.
   Depends on: tokens.css
   ============================================================================ */

/* ---------- 1. Reset ---------------------------------------------------- */

*,*::before,*::after{
  box-sizing:border-box;
  border-radius:var(--radius) !important;   /* brand law: rectangles only */
}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + var(--sp-md));
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--surface);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:var(--fw-reg);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{ margin:0; }
h1,h2,h3,h4,h5,h6{ font-size:inherit; font-weight:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; background:none; border:0; }
button{ cursor:pointer; }
table{ border-collapse:collapse; width:100%; }
hr{ border:0; border-top:var(--bw) solid var(--line); margin:0; }

/* ---------- 2. Focus & selection ---------------------------------------- */

:focus{ outline:none; }
:focus-visible{
  outline:var(--bw-2) solid var(--focus-ring);
  outline-offset:3px;
}
::selection{ background:var(--c-mocha-dp); color:var(--c-white); }

/* ---------- 3. Accessibility helpers ------------------------------------ */

.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;
}
.skip-link{
  position:absolute; top:-100px; left:var(--gutter); z-index:var(--z-loader);
  background:var(--surface-invert); color:var(--text-on-dark);
  padding:var(--sp-xs) var(--sp-md);
  font-size:var(--fs-micro); letter-spacing:var(--ls-label); text-transform:uppercase;
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:12px; }

/* ---------- 4. Layout primitives ---------------------------------------- */

.shell{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell--narrow{ max-width:1180px; }

.section{ padding-block:var(--section); position:relative; }
.section--tight{ padding-block:clamp(2.5rem,6vw,5rem); }
.section--flush-top{ padding-top:0; }
.section--flush-bottom{ padding-bottom:0; }

/* Surface variants - each sets its own text colour contract */
.section--paper{ background:var(--surface-raised); }
.section--stone{ background:var(--surface-sunken); }
.section--brand{ background:var(--surface-brand); color:var(--text-on-dark); }
.section--invert{ background:var(--surface-invert); color:var(--text-on-dark); }

/* Inside dark surfaces, remap the text roles so components need no variants */
.section--brand,.section--invert,.on-dark{
  --text:        var(--text-on-dark);
  --text-2:      var(--text-on-dark);
  --text-muted:  var(--text-on-dark-muted);
  --text-accent: var(--text-on-dark-accent);
  --line:        var(--line-on-dark);
  --line-soft:   var(--line-on-dark-soft);
  --focus-ring:  var(--c-white);
}

/* Editorial two-column split */
.split{ display:grid; grid-template-columns:1fr; gap:var(--gap-col); align-items:start; }
@media(min-width:900px){
  .split{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split--sidebar{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); }
  .split--feature{ grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); }
  .split--center{ align-items:center; }
}

/* Auto grid */
.grid{ display:grid; gap:var(--gap-grid); grid-template-columns:1fr; }
@media(min-width:620px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1000px){
  .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.grid--roomy{ gap:var(--gap-col); }

/* Stack - vertical rhythm without margin collapse surprises */
.stack > * + *{ margin-top:var(--sp-md); }
.stack--xs > * + *{ margin-top:var(--sp-2xs); }
.stack--sm > * + *{ margin-top:var(--sp-sm); }
.stack--lg > * + *{ margin-top:var(--sp-lg); }
.stack--xl > * + *{ margin-top:var(--sp-xl); }

/* ---------- 5. Typography classes --------------------------------------- */

.t-d1,.t-d2,.t-h2,.t-h3,.t-h4{
  font-family:var(--font-display);
  font-weight:var(--fw-light);
  letter-spacing:var(--ls-display);
}
.t-d1{ font-size:var(--fs-d1); line-height:var(--lh-tight); }
.t-d2{ font-size:var(--fs-d2); line-height:1.06; }
.t-h2{ font-size:var(--fs-h2); line-height:var(--lh-head); letter-spacing:-.01em; }
.t-h3{ font-size:var(--fs-h3); line-height:1.24; font-weight:var(--fw-reg); letter-spacing:0; }
.t-h4{ font-size:var(--fs-h4); line-height:1.3;  font-weight:var(--fw-reg); letter-spacing:0; }

.t-lead{ font-size:var(--fs-lead); line-height:var(--lh-loose); color:var(--text-2); }
.t-body{ font-size:var(--fs-body); line-height:var(--lh-body); }
.t-small{ font-size:var(--fs-small); line-height:1.75; color:var(--text-muted); }
.t-micro{
  font-size:var(--fs-micro); font-weight:var(--fw-med);
  letter-spacing:var(--ls-label); text-transform:uppercase;
}
.t-measure{ max-width:var(--maxw-text); }
.t-muted{ color:var(--text-muted); }
.t-accent{ color:var(--text-accent); }

/* Italic serif used as an emphasis voice inside display text */
.t-em{ font-family:var(--font-display); font-style:italic; font-weight:var(--fw-light); }
.t-d1 em,.t-d2 em,.t-h2 em,.t-h3 em{ font-style:italic; color:var(--text-accent); }

/* Eyebrow - the system's standard section label */
.eyebrow{
  display:inline-flex; align-items:center;
  font-size:var(--fs-micro); font-weight:var(--fw-med);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--text-accent);
}
/* The label used to be preceded by a 34px rule. It is gone: the wide letter
   spacing already sets these apart, and the line read as a stray dash in front
   of every heading. .eyebrow--bare existed only to switch it off, so it is now
   a no-op kept for any markup that still carries it. */

/* Brand wordmark */
.wordmark{ line-height:1; display:inline-flex; align-items:center; gap:.58rem; text-align:center; }
/* The supplied logo is a fixed two-tone PNG, so it cannot follow currentColor
   the way the text does. Two files are shipped and swapped on the header's
   own light state instead. */
.wordmark__mark{ display:block; flex:none; width:auto; height:34px; }
.wordmark__mark--light{ display:none; }
.wordmark__text{ display:block; text-align:left; }
@media(max-width:420px){ .wordmark__mark{ height:28px; } }
.wordmark__name{
  display:block;
  font-family:var(--font-display); font-weight:var(--fw-reg);
  font-size:1.18rem; letter-spacing:var(--ls-brand); text-transform:uppercase;
  padding-left:var(--ls-brand);
}
.wordmark__sub{
  display:block; margin-top:.36rem;
  font-size:.5625rem; letter-spacing:var(--ls-wide); text-transform:uppercase;
  opacity:.7; padding-left:var(--ls-wide);
}
.wordmark--lg .wordmark__name{ font-size:clamp(1.5rem,4vw,2.4rem); }
.wordmark--lg .wordmark__sub{ font-size:.6875rem; margin-top:.7rem; }

/* ---------- 6. Utilities ------------------------------------------------ */

.u-center{ text-align:center; }
.u-right{ text-align:right; }
.u-flex{ display:flex; }
.u-wrap{ flex-wrap:wrap; }
.u-items-center{ align-items:center; }
.u-between{ justify-content:space-between; }
.u-justify-center{ justify-content:center; }
.u-gap-xs{ gap:var(--sp-xs); }
.u-gap-sm{ gap:var(--sp-sm); }
.u-gap-md{ gap:var(--sp-md); }
.u-gap-lg{ gap:var(--sp-lg); }
.u-mt-sm{ margin-top:var(--sp-sm); }
.u-mt-md{ margin-top:var(--sp-md); }
.u-mt-lg{ margin-top:var(--sp-lg); }
.u-mt-xl{ margin-top:var(--sp-xl); }
.u-mt-2xl{ margin-top:var(--sp-2xl); }
.u-mx-auto{ margin-inline:auto; }
.u-full{ width:100%; }
.u-hide{ display:none !important; }
@media(max-width:899px){ .u-hide-md{ display:none !important; } }
@media(min-width:900px){ .u-show-md{ display:none !important; } }

/* Hairline rule - the brand's main separator */
.rule{ height:var(--bw); background:var(--line); border:0; }
.rule--strong{ background:var(--line-strong); }

/* A solid square - recurring brand mark (bullets, accents) */
.sq{ display:inline-block; width:6px; height:6px; background:var(--c-mocha); flex:none; }
.sq--lg{ width:10px; height:10px; }

/* ---------- 7. Motion defaults ------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}