/* Sunward Marketing: tokens, type, layout and site chrome.
   Rules of the system live in brand/design-rules.md: flat color, hard edges, rules instead of boxes. */

:root {
  --paper: #F3EEE4;
  --paper-2: #EAE3D6;
  --ink: #0B1A33;
  --ink-2: #2C3A54;
  --ink-3: #56627A;
  --cobalt: #1F4FCF;
  --cobalt-deep: #183FA6;
  --cobalt-pale: #A9BEF5;
  --sun: #F98A15;
  --hair: rgba(11, 26, 51, 0.14);
  --hair-light: rgba(243, 238, 228, 0.18);

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Newsreader", Georgia, "Times New Roman", serif;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --ease: cubic-bezier(0.22, 0.7, 0.18, 1);
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font: 400 19px/1.6 var(--f-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--sun); color: var(--ink); }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
p { margin: 0 0 1em; }

/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--f-display); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.xl {
  font-size: clamp(3rem, 8.4vw, 8.2rem);
  line-height: 0.9;
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.045em;
}
.h2 {
  font-size: clamp(2.2rem, 4.8vw, 4.3rem);
  line-height: 0.98;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.035em;
}
.h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.1;
  font-weight: 750;
  font-variation-settings: "wdth" 104;
}
/* Condensed caps: labels, table heads, the bearing readout */
.label {
  font: 650 13px/1.2 var(--f-display);
  font-variation-settings: "wdth" 66;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lede { font-size: clamp(1.15rem, 1.6vw, 1.38rem); line-height: 1.5; color: var(--ink-2); max-width: 36em; }
.small { font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.dark { background: var(--ink); color: rgba(243, 238, 228, 0.82); }
.dark h1, .dark h2, .dark h3 { color: var(--paper); }
.dark .label { color: rgba(243, 238, 228, 0.6); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 10vw, 140px); }

/* Newspaper section header: heavy rule, condensed label on the left, headline on the right */
.masthead { display: grid; grid-template-columns: 220px 1fr; gap: 24px clamp(24px, 4vw, 56px); padding-top: 18px; margin-bottom: clamp(40px, 6vw, 80px); position: relative; }
.masthead::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: currentColor; color: var(--ink); transform-origin: 0 50%; }
.dark .masthead::before { color: var(--paper); }
.masthead .label { padding-top: 8px; }
.masthead .lede { margin-top: 22px; }
@media (max-width: 760px) { .masthead { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- The needle: the only pictogram on the site ---------- */
.needle-ico { display: inline-block; width: 0.95em; height: 0.95em; flex: none; transform: rotate(40deg); transition: transform 0.5s var(--ease); }
a:hover > .needle-ico, a:focus-visible > .needle-ico, button:hover > .needle-ico { transform: rotate(90deg); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 26px;
  border: 0;
  background: var(--cobalt);
  color: var(--paper);
  font: 700 16px/1 var(--f-display);
  font-variation-settings: "wdth" 104;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
  white-space: nowrap;
}
.btn:hover { background: var(--ink); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--cobalt); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper:hover { background: var(--ink); color: var(--paper); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.textlink {
  font: 700 16px/1.3 var(--f-display);
  font-variation-settings: "wdth" 100;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color 0.2s, text-underline-offset 0.25s;
}
.textlink:hover { color: var(--cobalt); text-underline-offset: 8px; }

/* ---------- Header ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
  transition: border-color 0.3s;
}
.top.is-scrolled { border-bottom-color: var(--ink); }
.top-in { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.logo { flex: none; display: block; text-decoration: none; }
.logo svg { height: 30px; width: auto; }
.menu { display: flex; align-items: stretch; gap: 0; height: 100%; margin: 0 0 0 auto; padding: 0; list-style: none; }
.menu > li { position: relative; display: flex; }
.menu > li > a, .menu > li > button {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 0;
  background: none;
  font: 600 15px/1 var(--f-display);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 transparent;
  transition: box-shadow 0.2s;
}
.menu > li > a:hover, .menu > li > button:hover, .menu > li:focus-within > button { box-shadow: inset 0 -3px 0 var(--sun); }
.drop {
  position: absolute;
  top: 100%;
  left: 0;
  width: 360px;
  background: var(--paper);
  border: 1px solid var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.25s var(--ease), visibility 0.2s;
}
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: none; }
.drop a { display: block; padding: 16px 18px; border-top: 1px solid var(--hair); text-decoration: none; }
.drop a:first-child { border-top: 0; }
.drop a:hover { background: var(--paper-2); }
.drop strong { display: block; font: 700 16px/1.25 var(--f-display); color: var(--ink); }
.drop span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.4; color: var(--ink-3); }
.top-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  background: transparent;
  font: 650 14px/1 var(--f-display);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.lang-btn b { font-variation-settings: "wdth" 100; letter-spacing: 0.04em; font-size: 12px; padding: 4px 6px; background: var(--ink); color: var(--paper); }
.lang-btn:hover { background: var(--ink); color: var(--paper); }
.lang-btn:hover b { background: var(--sun); color: var(--ink); }
.burger { display: none; }
.lang-mini { display: none; }

/* Mobile menu */
.sheet { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 45; background: var(--paper); padding: 20px var(--gutter) 120px; overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity 0.25s, visibility 0.25s; }
.menu-open .sheet { visibility: visible; opacity: 1; }
.sheet .label { display: block; margin: 26px 0 6px; }
.sheet a.big { display: block; padding: 10px 0; border-bottom: 1px solid var(--hair); font: 800 28px/1.1 var(--f-display); font-variation-settings: "wdth" 112; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.sheet .btn { width: 100%; justify-content: center; margin-top: 28px; }
.sheet .lang-btn { width: 100%; min-height: 52px; justify-content: center; font-size: 16px; }

@media (max-width: 1120px) {
  .menu, .top-actions .lang-btn { display: none; }
  .top-actions .lang-mini { display: inline-flex; padding: 0 12px; font-size: 15px; }
  .top-actions { margin-left: auto; }
  .burger { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 0; background: var(--ink); color: var(--paper); font: 650 14px/1 var(--f-display); cursor: pointer; }
}
@media (max-width: 560px) { .top-actions .btn { display: none; } .logo svg { height: 26px; } }

/* Language suggestion bar (Spanish-language browsers only) */
.lang-bar { display: none; background: var(--ink); color: var(--paper); font: 600 15px/1.3 var(--f-display); }
.lang-bar.is-on { display: block; }
.lang-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-block: 12px; }
.lang-bar a { color: var(--sun); }
.lang-bar button { margin-left: auto; border: 0; background: none; color: rgba(243, 238, 228, 0.7); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

/* Phone bar */
.callbar { display: none; }
@media (max-width: 767px) {
  body { padding-bottom: 64px; }
  .callbar { position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: 1fr 1.5fr; border-top: 2px solid var(--ink); padding-bottom: env(safe-area-inset-bottom); background: var(--paper); transition: transform 0.35s var(--ease); }
  .callbar.is-hidden, .menu-open .callbar, .cal-open .callbar { transform: translateY(110%); }
  .callbar a { display: flex; align-items: center; justify-content: center; gap: 10px; height: 64px; font: 700 16px/1 var(--f-display); text-decoration: none; }
  .callbar a:first-child { background: var(--paper); color: var(--ink); }
  .callbar a:last-child { background: var(--cobalt); color: var(--paper); }
}

/* Phone hours: call buttons only show while someone can pick up (main.js sets data-phones on <html>).
   Without JavaScript the "open" version shows, so the number is always reachable. */
html:not([data-phones]) [data-when="closed"],
[data-phones="open"] [data-when="closed"],
[data-phones="closed"] [data-when="open"] { display: none !important; }
@media (max-width: 767px) { [data-phones="closed"] .callbar { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: rgba(243, 238, 228, 0.72); font-size: 16px; padding: 72px 0 32px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; padding-top: 22px; border-top: 3px solid var(--paper); }
.foot .label { color: rgba(243, 238, 228, 0.55); margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--sun); }
.foot-brand svg { height: 32px; width: auto; margin-bottom: 18px; }
.foot-brand p { max-width: 30em; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--hair-light); font: 600 13px/1.4 var(--f-display); font-variation-settings: "wdth" 70; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(243, 238, 228, 0.5); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- Motion ---------- */
.js [data-rise] { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js [data-rise].in { opacity: 1; transform: none; }
.js .masthead::before, .js .rule-draw { transform: scaleX(0); transition: transform 1.1s var(--ease); }
.js .masthead.in::before, .js .rule-draw.in { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .js [data-rise] { opacity: 1; transform: none; transition: none; }
  .js .masthead::before, .js .rule-draw { transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--paper); padding: 10px 14px; border: 2px solid var(--ink); }
.skip:focus { left: 8px; }