/* shipaLurex — chrome every page shares: type, the .wrap measure, the section system,
   the mobile nav. Palette is white / #ffc400 / #d40511; Tailwind theme tokens are set in head.php. */

body { background: #fff; color: #101317;
       font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
.util svg { color: #ffc400; flex: 0 0 auto; }
.util a:hover svg { color: #fff; }
html { scroll-behavior: smooth; }
section[id], footer[id], form[id] { scroll-margin-top: 78px; }
/* one measure everywhere: header, every section, the footer */
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 1024px) { .wrap { padding-inline: 32px; } }
/* ---- section rhythm: every band gets real air above and below ---- */
.sec { padding-block: 72px 78px; }
@media (min-width: 900px)  { .sec { padding-block: 104px 110px; } }
.sec .sec-head { margin-bottom: 34px; }   /* the head breathes before the band's own content */
@media (min-width: 1280px) { .sec { padding-block: 120px 126px; } }
/* ---- section system: one header rhythm for every page ---- */
.sec-head { display: grid; gap: 14px 44px; align-items: end; padding-bottom: 18px; margin-bottom: 26px;
            border-bottom: 1px solid #ececef; }
@media (min-width: 900px) { .sec-head { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); } }
.kicker { display: flex; align-items: center; gap: 10px; font: 600 10px/1 ui-monospace, SFMono-Regular, monospace;
          letter-spacing: .2em; text-transform: uppercase; color: #d40511; }
.kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: #d40511; }
.kicker.yl { color: #ffc400; } .kicker.yl::before { background: #ffc400; }
.sec-h2 { margin-top: 12px; font-size: clamp(1.5rem, 3.1vw, 2.05rem); line-height: 1.08;
          letter-spacing: -.028em; font-weight: 700; }
.sec-note { font-size: 14px; line-height: 1.62; color: #5b6270; max-width: 36rem; }
@media (min-width: 900px) { .sec-note { justify-self: end; text-align: right; } }
/* ---- mobile nav ---- */
#sl-menu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
#sl-menu > div { overflow: hidden; }
/* ---- the chrome, also when the CDN does not answer ----
   The header and the footer are dressed with Tailwind's utility classes, and head.php pulls Tailwind from
   cdn.tailwindcss.com. That is one request away from the site's whole skin: on a machine with no line out,
   or where the CDN is blocked, a page built on utilities opens as plain text on white — a nav with no
   hairline and a footer with no ink. The values below are the ones the classes already carry, so the chrome
   keeps its colour and its measure whichever way that request goes. Tailwind's stylesheet is written into
   the head after this file and wins every tie: with the CDN up, nothing here changes what you see. */
.util { background: #101317; color: rgba(255, 255, 255, .7); }
.util a { color: rgba(255, 255, 255, .7); }
.util a:hover { color: #ffc400; }
.chrome-head { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .95);
               border-bottom: 1px solid #ececef; }
.chrome-cta { background: #d40511; color: #fff; }
.chrome-cta:hover { background: #b8040f; }
.chrome-foot { background: #101317; color: #fff; border-top: 3px solid #ffc400; padding: 48px 20px 32px; }
.chrome-foot a { color: rgba(255, 255, 255, .75); }
.chrome-foot a:hover { color: #ffc400; }

#sl-menu.open { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #sl-menu { transition: none; }
}