/* ==========================================================================
   WIENLION.AT — Base: reset, typography, layout primitives, utilities
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
                           transition-duration:.01ms !important; }
}
body {
  margin: 0;
  background: var(--wl-paper);
  color: var(--wl-navy);
  font-family: var(--wl-font-body);
  font-size: var(--wl-fs-body);
  line-height: var(--wl-lh-body);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4,p,figure,blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--wl-gold); outline-offset: 3px; }
.wl-skip {
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--wl-gold); color:var(--wl-ink); padding:12px 20px; font-weight:600;
}
.wl-skip:focus { left:0; }
.wl-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
         overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* --------------------------------------------------------------- headings */
.wl-display, .wl-h1, .wl-h2, .wl-h3 {
  font-family: var(--wl-font-display);
  font-weight: 900;
  line-height: var(--wl-lh-head);
  letter-spacing: var(--wl-tr-head);
  text-transform: uppercase;
}
.wl-display { font-size: var(--wl-fs-display); line-height: var(--wl-lh-tight);
              letter-spacing: var(--wl-tr-display); }
.wl-h1 { font-size: var(--wl-fs-h1); letter-spacing: var(--wl-tr-display); }
.wl-h2 { font-size: var(--wl-fs-h2); text-transform: none; }
.wl-h3 { font-size: var(--wl-fs-h3); }

.wl-eyebrow {
  display:block; font-size: var(--wl-fs-eyebrow); font-weight: 600;
  letter-spacing: var(--wl-tr-eyebrow); text-transform: uppercase; color: var(--wl-gold);
  margin-bottom: var(--wl-s4);
}
.wl-lead   { font-size: var(--wl-fs-lead); line-height: 1.66; }
.wl-small  { font-size: var(--wl-fs-small); }
.wl-accent { font-family: var(--wl-font-accent); font-size: var(--wl-fs-accent);
             line-height: var(--wl-lh-accent); letter-spacing: var(--wl-tr-accent); }
.wl-rule   { width:64px; height:3px; background: var(--wl-gold); border:0; margin: var(--wl-s5) 0; }
.wl-measure { max-width: 60ch; }

/* --------------------------------------------------------------- layout */
/* max-width is CONTENT + gutters, so the inner measure is a true 1200px
   at >=1440 — matching the Illustrator grid (1200 content / 120 margins). */
.wl-container { width:100%; max-width: calc(var(--wl-container) + 2 * var(--wl-pad-x));
                margin-inline:auto; padding-inline: var(--wl-pad-x); }

.wl-section { padding-block: var(--wl-section-y); position: relative; }
.wl-section--tight { padding-block: clamp(40px, 4.5vw, 64px); }
.wl-section--flush { padding-block: 0; }

.wl-grid { display:grid; gap: var(--wl-s5); }
.wl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wl-grid--4 { grid-template-columns: repeat(4, 1fr); }
.wl-grid--5 { grid-template-columns: repeat(5, 1fr); }
.wl-split   { display:grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 5vw, 88px);
              align-items: center; }
.wl-split--wide { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .wl-grid--3, .wl-grid--4, .wl-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .wl-split, .wl-split--wide { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wl-grid--2, .wl-grid--3, .wl-grid--4 { grid-template-columns: 1fr; }
  .wl-grid--5 { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------- surfaces */
.wl-on-ink    { background: var(--wl-ink);     color: var(--wl-sand); }
.wl-on-navy   { background: var(--wl-navy);    color: var(--wl-sand); }
.wl-on-navydk { background: var(--wl-navy-dk); color: var(--wl-sand); }
.wl-on-paper  { background: var(--wl-paper);   color: var(--wl-navy); }
.wl-on-sand   { background: var(--wl-sand);    color: var(--wl-navy); }
.wl-on-gold   { background: var(--wl-gold);    color: var(--wl-ink);  }
.wl-on-ink .wl-h2, .wl-on-navy .wl-h2, .wl-on-navydk .wl-h2 { color: var(--wl-sand); }
.wl-on-gold .wl-eyebrow { color: var(--wl-ink); opacity:.7; }
.wl-dim { opacity: .74; }

/* --------------------------------------------------------------- icons */
.wl-icon { width:24px; height:24px; stroke-width:1.7; flex: none; }
.wl-icon--sm { width:16px; height:16px; stroke-width:2.2; }
.wl-icon--lg { width:32px; height:32px; }