/* ==========================================================================
   Crosswise — Design tokens & base styles
   ========================================================================== */

:root {
  /* Brand */
  --cw-red: #a32620;
  --cw-red-bright: #d64b42;
  --cw-red-dark: #7e1e19;

  /* Ink / text */
  --cw-ink: #171717;
  --cw-ink-2: #010101;
  --cw-body: #4d4943;
  --cw-body-2: #5c5851;
  --cw-body-3: #6a665e;
  --cw-body-4: #777269;
  --cw-muted: #8b877f;
  --cw-muted-2: #8c887f;
  --cw-muted-dark: #aaa7a1;
  --cw-label: #302f2c;
  --cw-label-2: #2b2b2b;

  /* Surfaces */
  --cw-white: #ffffff;
  --cw-cream: #fffaf1;
  --cw-cream-2: #fffdf9;
  --cw-cream-3: #fffaf4;
  --cw-cream-4: #faf8f4;
  --cw-black: #000000;
  --cw-near-black: #171717;
  --cw-panel-dark: #090a0c;

  /* Borders */
  --cw-border: #b8b8b8;
  --cw-border-2: #b8b8b8;
  --cw-border-3: #b8b8b8;
  --cw-border-4: #b8b8b8;
  --cw-border-input: #c8c4bd;
  --cw-border-dark: #7e7b75;

  /* Type */
  --cw-font-serif: var(--gh-font-heading, "DM Serif Display", Georgia, "Times New Roman", serif);
  --cw-font-sans: var(--gh-font-body, "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

  /* Layout */
  --cw-container: 1250px;
  --cw-radius-s: 8px;
  --cw-radius-m: 12px;
  --cw-radius-pill: 50px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--cw-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--cw-body);
  background: var(--cw-black);
  -webkit-font-smoothing: antialiased;
}

/* Centered page sheet — white canvas on the black body, as in the design */
.cw-sheet {
  max-width: 1400px;
  margin: 0 auto;
  background: var(--cw-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.cw-sheet main { flex: 1 0 auto; }

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

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

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

button, input { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cw-font-serif);
  font-weight: 400;
  color: var(--cw-ink);
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
}

p { margin: 0 0 1em; }

.cw-container {
  max-width: var(--cw-container);
  margin: 0 auto;
  /* !important guards content alignment against vertical-only padding
     shorthands (e.g. "padding: 48px 0") on co-located section classes */
  padding-left: 24px !important;
  padding-right: 24px !important;
}

@media (max-width: 700px) {
  .cw-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

.cw-eyebrow {
  font-family: var(--cw-font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cw-red);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cw-eyebrow.is-light { color: var(--cw-red-bright); }

.cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--cw-font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 2px;
  border: 1px solid var(--cw-red);
  background: var(--cw-red);
  color: var(--cw-cream-3);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.cw-btn:hover { background: var(--cw-red-dark); border-color: var(--cw-red-dark); }

.cw-btn--dark {
  background: var(--cw-ink);
  border-color: var(--cw-ink);
  color: var(--cw-cream-3);
}
.cw-btn--dark:hover { background: #000; border-color: #000; }

.cw-btn--outline {
  background: transparent;
  border-color: rgba(0,0,0,0.8);
  color: var(--cw-ink);
}
.cw-btn--outline:hover { background: var(--cw-ink); color: #fff; }

.cw-btn--outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.8);
  color: #fff;
}
.cw-btn--outline-light:hover { background: #fff; color: var(--cw-ink); }

.cw-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--cw-red);
}
.cw-link-arrow svg { width: 14px; height: 14px; }
.cw-link-arrow:hover { text-decoration: underline; }

.cw-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* Email capture form, used on Home / Today / Subscribe / Premium */
.cw-form {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.cw-form input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 15px 16px;
  background: var(--cw-cream-2);
  border: 1px solid var(--cw-border-input);
  border-right: none;
  color: var(--cw-ink);
  border-radius: 2px 0 0 2px;
}
.cw-form input[type="email"]::placeholder { color: var(--cw-muted); }
.cw-form .cw-btn { flex: 0 0 auto; border-radius: 0 2px 2px 0; }

/* Form feedback states (classes applied by Ghost's members script) */
.cw-form-msg {
  display: none;
  flex-basis: 100%;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.45;
}
.cw-form-msg .cw-icon { flex-shrink: 0; margin-top: 3px; color: var(--cw-red); }
.cw-form-msg--success { color: var(--cw-ink); }
.cw-form-msg--error { color: var(--cw-red); }
.cw-form.success .cw-form-msg--success { display: flex; }
.cw-form.error .cw-form-msg--error { display: flex; }
.cw-form.success input[type="email"],
.cw-form.success .cw-btn { display: none; }
.cw-form.loading .cw-btn { opacity: 0.6; pointer-events: none; }
/* dark contexts (Receipts box) */
.cw-receipts-right .cw-form-msg--success { color: #fff; }
.cw-receipts-right .cw-form-msg .cw-icon { color: #fff; }
.cw-receipts-right .cw-form-msg--error { color: #ffd6d3; }

.cw-form-note {
  font-size: 13px;
  color: var(--cw-muted-2);
  margin-top: 12px;
}

.cw-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Dot-grid placeholder pattern, used in place of Figma-exported photography */
.cw-photo {
  position: relative;
  overflow: hidden;
  background: #1c1c1c;
  color: #fff;
}
.cw-photo img { width: 100%; height: 100%; object-fit: cover; }
.cw-photo.cw-photo--empty {
  background-image:
    radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1.4px);
  background-size: 14px 14px;
  background-color: #20201f;
}
.cw-photo.cw-photo--empty::after {
  content: "";
}
.cw-photo-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
}

.cw-worldmap {
  background-image: radial-gradient(rgba(140,135,127,0.35) 1px, transparent 1.4px);
  background-size: 10px 10px;
}