/* Enterprise Magazine, built from the Figma frame "Enterprise (THIS ONE)" (node 404:635, 1440 wide;
   spec in figma/this-one/SPEC.md). Every desktop size is written in Figma pixels times --u, so the page is
   the frame at 1440 and scales with the window up to 1920 wide. Phones get their own stacked layout below. */
:root {
  color-scheme: light;
  --u: min(calc(100vw / 1440), calc(1px * 1920 / 1440));
  --v: calc(var(--u) * .75); /* the footer keeps the sizes it was drawn with on the older 1920 frame */
  --line: max(1.5px, calc(2 * var(--u)));    /* box borders: 2 in Figma */
  --rule: max(1.5px, calc(2.25 * var(--u))); /* the short rules under kickers: 2.25 */
  --nav: calc(59 * var(--u));
  --bg: #FCF8F2;
  --ink: #000;
  --ink-2: #060606;
  --red: #CC0000;
  --tint: rgba(0, 0, 0, .03); /* picture columns and the About us box: 3% black (#F4F1EB on the page colour) */
  --jost: "Jost", "Futura PT", Futura, "Century Gothic", sans-serif;
  --caslon: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --caslon-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --deep: "Thabit", "Courier New", monospace; /* the Deep Dive title, self-hosted (SIL OFL) */
}

@font-face { font-family: "Thabit"; src: url("/assets/fonts/Thabit.woff?v=90a744b7") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.4 var(--caslon); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
p, h2, h3, figure { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; background: var(--ink); color: var(--bg); }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------- Header ---------- */
/* Sticky with a negative top: the ENTERPRISE row scrolls away and the
   Newsletter / Podcast / Deep Dive bar stays pinned to the top of the screen */
.hd { position: sticky; top: calc(-106 * var(--u)); z-index: 30; background: var(--bg); }
/* Figma spreads burger, logo and a 10 wide spacer across the bar (space between, 32 in from each side),
   which sits the logo 12 right of centre */
.hd__bar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: calc(106 * var(--u)); padding: 0 calc(32 * var(--u)); border-bottom: var(--line) solid var(--ink);
}
.hd__bar::after { content: ""; width: calc(10 * var(--u)); }
.burger {
  position: static; display: grid; gap: calc(6 * var(--u)); padding: 6px 0; border: 0; background: none; cursor: pointer;
}
.burger i { display: block; width: calc(34.5 * var(--u)); height: calc(7.5 * var(--u)); background: var(--ink); }
.hd__logo {
  display: flex; align-items: center; gap: calc(30 * var(--u));
  font: 700 calc(56 * var(--u))/1 var(--jost); color: var(--ink); text-decoration: none;
}
.dot { width: calc(17.3 * var(--u)); height: calc(17.3 * var(--u)); flex: none; }
.hd__nav { display: grid; grid-template-columns: repeat(3, 1fr); height: var(--nav); border-bottom: var(--line) solid var(--ink); }
.hd__nav a {
  display: flex; align-items: center; justify-content: center;
  font: 400 calc(24 * var(--u))/1 var(--jost); letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.hd__nav a + a { border-left: var(--line) solid var(--ink); }
.hd__nav a:hover { color: var(--red); }

/* ---------- Boxes ---------- */
.page {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(80 * var(--u)); overflow-x: clip; /* the TV card runs out to the page edge */
  max-width: 1920px; margin: 0 auto; padding: calc(46 * var(--u)) calc(60 * var(--u)) 0;
}
/* Figma strokes sit on the box edge (half in, half out) and take no room, so the border is an outline */
.box { position: relative; display: grid; outline: var(--line) solid var(--ink); outline-offset: calc(var(--line) / -2); scroll-margin-top: calc(var(--nav) + 46 * var(--u)); }
.box--missed { grid-template-columns: calc(583 * var(--u)) minmax(0, 1fr); height: calc(725 * var(--u)); }
.box--newsletter { grid-template-columns: calc(686 * var(--u)) minmax(0, 1fr); }
.box--podcast { grid-template-columns: calc(634 * var(--u)) minmax(0, 1fr); }

/* Words: one centred stack, at the top of its column (Figma pads 70 above it) */
.box__text { display: flex; justify-content: center; align-items: flex-start; padding: calc(70 * var(--u)) calc(66 * var(--u)) calc(90 * var(--u)); }
.box--missed .box__text { padding: calc(70 * var(--u)) calc(90 * var(--u)) calc(10 * var(--u)); border-right: var(--line) solid var(--ink); }
.box--podcast .box__text { border-right: var(--line) solid var(--ink); }
.stack { display: flex; flex-direction: column; align-items: center; width: calc(502 * var(--u)); max-width: 100%; text-align: center; }
.box--missed .stack { width: calc(403 * var(--u)); }
.stack > .heading, .stack > .body { align-self: stretch; }

.kicker {
  margin-top: calc(19 * var(--u));
  font: 700 calc(24 * var(--u))/1.4583 var(--jost); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2);
}
.rule { display: block; width: calc(281 * var(--u)); margin-top: calc(18 * var(--u)); margin-bottom: calc(-1 * var(--rule)); border-top: var(--rule) solid var(--ink); } /* a Figma line takes no height */
.heading { margin-top: calc(40 * var(--u)); font: 500 calc(44 * var(--u))/1.2273 var(--caslon); color: var(--ink); }
.body { margin-top: calc(33 * var(--u)); font: 400 calc(36 * var(--u))/1.0648 var(--caslon-display); color: var(--ink); }
.body p + p { margin-top: calc(30 * var(--u)); } /* Figma paragraph spacing 30 */

/* Links: Jost capitals with the red arrow */
.cta {
  display: inline-flex; align-items: center; gap: calc(16 * var(--u)); margin-top: calc(96 * var(--u));
  padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-2); cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.cta__label { font: 700 max(11px, calc(18.75 * var(--u)))/1.44 var(--jost); letter-spacing: .24em; text-transform: uppercase; }
.cta__arrow { width: calc(24.8 * var(--u)); height: auto; transition: transform .2s ease; }
.cta:hover .cta__label { color: var(--red); }
.cta:hover .cta__arrow { transform: translateX(calc(6 * var(--u))); }

/* What you missed photo: fills its column edge to edge, drawn as the frame draws it: the whole photo
   in an 817 x 725 rectangle whose left 80 is hidden by the column (Figma squashes it to that shape;
   matched by an image fit test, correlation 0.85) */
.box__photo { position: relative; overflow: hidden; }
.box__photo img {
  position: absolute; left: calc(-80 / 737 * 100%); top: 0;
  width: calc(817 / 737 * 100%); height: 100%; max-width: none;
}
/* Envelope and TV on their black cards, placed where the frame puts them */
.box__art { position: relative; background: var(--tint); }
.box--newsletter .box__art { border-right: var(--line) solid var(--ink); }
.art { position: absolute; max-width: none; }
.art--envelope { left: calc(-40 * var(--u)); top: calc(83.1 * var(--u)); width: calc(744 * var(--u)); }
.art--tv { left: calc(-91 * var(--u)); top: calc(-4.4 * var(--u)); width: calc(837.5 * var(--u)); }

/* ---------- Deep Dive ---------- */
.box--deep {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(60 * var(--u)) calc(85 * var(--u)) calc(60 * var(--u)) calc(84 * var(--u));
}
.kicker--lg { font-size: calc(37.5 * var(--u)); line-height: 1.44; }
.rule--lg { width: calc(529 * var(--u)); margin-top: calc(25 * var(--u)); }
.banner {
  display: flex; align-items: flex-start; justify-content: flex-start;
  width: calc(603 * var(--u)); height: calc(96 * var(--u)); margin-top: calc(25 * var(--u));
  padding: calc(6 * var(--u)) calc(123 * var(--u)) calc(18 * var(--u)) calc(98 * var(--u));
  background: var(--red);
}
.banner span { font: 400 calc(72 * var(--u))/1 var(--deep); color: var(--bg); white-space: nowrap; }
.heading--tight { margin-top: calc(35 * var(--u)); font-size: calc(44.25 * var(--u)); }
.body--wide { width: calc(916.5 * var(--u)); max-width: 100%; font-size: calc(37.5 * var(--u)); }
.box--deep > .body { margin-top: calc(22 * var(--u)); }
/* The first Deep Dive: a red card (1107.8 x 689.4) tilted 4.78deg behind upright cream type.
   The margins put the tilted card's outline 30 below the text, as the frame's auto-layout does */
.event {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: calc(1107.8 * var(--u)); height: calc(689.4 * var(--u)); max-width: 100%;
  margin: calc(74.85 * var(--u)) 0 calc(45.05 * var(--u));
  padding-right: calc(10.5 * var(--u)); /* the type sits 5 left of the card's centre */
  color: var(--bg);
}
.event::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); transform: rotate(-4.78deg); }
.event .kicker, .event .heading, .event .body, .event .cta { color: var(--bg); }
.event .kicker { letter-spacing: .24em; }
.event .rule { width: calc(661.5 * var(--u)); margin-top: calc(22 * var(--u)); border-top-color: #fff; }
.event .cta:hover .cta__label { color: var(--ink); }
.heading--date { margin-top: calc(22 * var(--u)); width: calc(661.5 * var(--u)); max-width: 100%; font-size: calc(44.25 * var(--u)); }
.body--event { margin-top: calc(34 * var(--u)); }
.body--event p + p { margin-top: 0; }
.event .cta { margin-top: calc(90 * var(--u)); gap: 0; }

/* ---------- About us ---------- */
.box--about {
  display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--tint);
  margin-top: calc(17 * var(--u)); /* 97 below Deep Dive in the frame */
  padding: calc(70 * var(--u)) calc(66 * var(--u)) calc(78 * var(--u));
}
.heading--about { margin-top: calc(40 * var(--u)); width: calc(806 * var(--u)); max-width: 100%; }
.body--about { width: calc(806 * var(--u)); max-width: 100%; font-size: calc(36 * var(--u)); }

/* ---------- Footer ---------- */
.ft { margin-top: calc(125 * var(--u)); border-top: var(--line) solid var(--ink); }
.ft__top {
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: calc(60 * var(--v));
  max-width: 1920px; margin: 0 auto; padding: calc(42 * var(--v)) calc(60 * var(--u)) calc(96 * var(--v));
}
.ft__logo { display: inline-flex; align-items: center; gap: calc(18 * var(--v)); font: 700 calc(75 * var(--v))/1.44 var(--jost); color: var(--ink); text-decoration: none; }
.ft__logo .dot { width: calc(23 * var(--v)); height: calc(23 * var(--v)); }
.ft__tag { margin-top: calc(13 * var(--v)); padding-left: calc(27 * var(--v)); font: 400 calc(50 * var(--v))/1.065 var(--caslon-display); white-space: nowrap; }
.ft__tag a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.ft__tag a:hover { color: var(--red); }
.ft__cta { margin: calc(44 * var(--v)) 0 0 calc(27 * var(--v)); gap: calc(18 * var(--v)); }
.ft__cta .cta__label { font-size: max(11px, calc(25 * var(--v))); white-space: nowrap; }
.ft__cta .cta__arrow { width: calc(34 * var(--v)); }
.ft__col { display: flex; flex-direction: column; align-items: flex-start; gap: calc(10 * var(--v)); padding-top: calc(32 * var(--v)); }
.ft__head {
  margin-bottom: calc(18 * var(--v)); padding-bottom: calc(14 * var(--v)); border-bottom: var(--line) solid var(--ink);
  font: 700 calc(25 * var(--v))/1.44 var(--jost); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2);
}
.ft__col a, .ft__col address { font: 400 calc(30 * var(--v))/1.3 var(--caslon-display); font-style: normal; color: var(--ink); text-decoration: none; }
.ft__col a:hover { color: var(--red); }
/* Follow: four black icons in a row */
.ft__social { display: flex; gap: calc(30 * var(--v)); margin: calc(6 * var(--v)) 0 0; padding: 0; list-style: none; }
.ft__social a { display: block; color: var(--ink); transition: color .2s ease; }
.ft__social a:hover { color: var(--red); }
.ft__icon { display: block; width: calc(46 * var(--v)); height: calc(46 * var(--v)); fill: currentColor; }
/* Contact: one horizontal line, items split by short rules */
.ft__contact {
  display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px;
  max-width: 1920px; margin: 0 auto; padding: calc(30 * var(--v)) calc(60 * var(--u));
  border-top: var(--line) solid var(--ink);
}
.ft__head--inline { margin: 0 calc(40 * var(--v)) 0 0; padding: 0; border: 0; }
.ft__contact address, .ft__contact a {
  padding: 0 calc(34 * var(--v)); border-left: var(--line) solid var(--ink);
  font: 400 calc(30 * var(--v))/1.3 var(--caslon-display); font-style: normal; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.ft__contact address { padding-left: calc(40 * var(--v)); }
.ft__contact a:hover { color: var(--red); }
.ft__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px calc(40 * var(--v));
  max-width: 1920px; margin: 0 auto; padding: calc(28 * var(--v)) calc(60 * var(--u)) calc(40 * var(--v));
  border-top: var(--line) solid var(--ink);
  font: 400 max(11.5px, calc(17 * var(--v)))/1.4 var(--caslon-display);
}
.ft__legal-links { display: flex; gap: calc(30 * var(--v)); }
.ft__legal-links a { font: 400 max(10px, calc(14 * var(--v)))/1 var(--jost); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.ft__legal-links a:hover { color: var(--red); }

/* ---------- Menu: slides in from the left ---------- */
.close { position: relative; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.close::before, .close::after { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 2px; background: var(--ink); }
.close::before { transform: rotate(45deg); }
.close::after { transform: rotate(-45deg); }
.drawer {
  inset: 0 auto 0 0; width: min(400px, 86vw); height: 100%; max-height: none; margin: 0;
  padding: 0; border: 0; background: transparent; overflow: visible;
}
.drawer::backdrop { background: rgba(0, 0, 0, 0); transition: background .3s ease; }
.drawer.is-in::backdrop { background: rgba(0, 0, 0, .4); }
.drawer__panel {
  height: 100%; background: var(--bg); border-right: 3px solid var(--ink);
  transform: translateX(-100%); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.drawer.is-in .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 14px 0 28px; border-bottom: 3px solid var(--ink); }
.drawer__logo { font: 700 26px/1 var(--jost); }
.drawer__nav a {
  display: block; padding: 22px 28px; border-bottom: 1.5px solid var(--ink);
  font: 400 16px/1 var(--jost); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.drawer__nav a:hover { color: var(--red); }

/* ---------- Sign up pop-up ---------- */
.popup {
  width: min(540px, calc(100% - 32px)); padding: 0; overflow: hidden;
  border: 3px solid var(--ink); background: var(--bg); color: var(--ink); text-align: center;
}
.popup::backdrop { background: rgba(0, 0, 0, .45); }
.popup[open] { animation: popup-in .2s ease-out; }
@keyframes popup-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.popup__stripe {
  height: 10px; border-bottom: 1.5px solid var(--ink);
  background: repeating-linear-gradient(-45deg, var(--red) 0 14px, var(--bg) 14px 21px, #253A6E 21px 35px, var(--bg) 35px 42px);
}
.popup > .close { position: absolute; top: 18px; right: 10px; }
.popup__form { display: flex; flex-direction: column; align-items: center; padding: 40px 40px 32px; }
.popup__logo { display: flex; align-items: center; gap: 10px; font: 700 30px/1 var(--jost); }
.popup__logo .dot { width: 11px; height: 11px; }
.popup__title { margin-top: 20px; font: 500 30px/1.2 var(--caslon); }
.popup__text { max-width: 30ch; margin-top: 12px; font: 400 21px/1.15 var(--caslon-display); }
.field {
  display: block; width: 100%; height: 50px; margin-top: 26px; padding: 0 4px;
  border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; -webkit-appearance: none; appearance: none;
  background: transparent; text-align: center; font: 400 19px var(--caslon-display); color: var(--ink);
}
.field::placeholder { color: #8C847A; }
.field:focus { outline: none; border-bottom-color: var(--red); box-shadow: inset 0 -1px 0 var(--red); }
.popup__error { margin-top: 10px; font-size: 14px; color: var(--red); }
.popup .cta { gap: 12px; margin-top: 26px; }
.popup .cta__label { font-size: 15px; }
.popup .cta__arrow { width: 30px; }
.popup .cta:hover .cta__arrow { transform: translateX(6px); }
.popup .cta.is-done { cursor: default; }
.popup .cta.is-done .cta__label { color: var(--red); }
.popup .cta.is-done .cta__arrow { display: none; }
.field[readonly] { color: #8C847A; }
.popup__fine { margin-top: 14px; font: 400 14px/1.3 var(--caslon); color: #8C847A; }

/* ---------- Phones and small tablets: the boxes stack ---------- */
@media (max-width: 900px) {
  :root { --u: 0.6133px; --v: 0.46px; --nav: 42px; }
  .hd__bar { justify-content: center; padding: 0; }
  .hd__bar::after { display: none; }
  .burger { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); gap: 4px; }
  .burger i { width: 24px; height: 4px; }
  .hd { top: -64px; }
  .hd__bar { height: 64px; }
  .hd__logo { font-size: 30px; gap: 9px; }
  .dot { width: 11px; height: 11px; }
  .hd__nav a { font-size: 12px; letter-spacing: .2em; padding-left: .2em; }
  .page { gap: 28px; padding: 24px 16px 0; }
  .box { scroll-margin-top: 58px; }
  .box--missed, .box--newsletter, .box--podcast { grid-template-columns: minmax(0, 1fr); height: auto; }
  .box--missed .box__text, .box--newsletter .box__text, .box--podcast .box__text { padding: 34px 20px 38px; border: 0; }
  .box--missed .stack, .stack, .body--wide, .body--about, .heading--about, .heading--date { width: 100%; }
  .box__photo { order: -1; aspect-ratio: 737 / 725; border-bottom: var(--line) solid var(--ink); }
  .box__art { order: -1; padding: 8px 0; border-bottom: var(--line) solid var(--ink); }
  .box--newsletter .box__art { border-right: 0; }
  .art--envelope, .art--tv { position: static; margin: 0 auto; transform: none; max-width: 100%; }
  .art--envelope { width: 96%; }
  .art--tv { width: 78%; }
  .kicker { font-size: 14px; }
  .rule { width: 150px; }
  .heading { font-size: 27px; }
  .body { font-size: 22px; }
  .cta { margin-top: 40px; }
  .cta__label { font-size: 12px; }
  .cta__arrow { width: 22px; }
  .box--deep { padding: 40px 18px 56px; }
  .box--about { margin-top: 0; padding: 40px 18px 44px; }
  .kicker--lg { font-size: 16px; letter-spacing: .18em; }
  .rule--lg { width: 100%; }
  .banner { width: 100%; max-width: 380px; height: 54px; padding: 0; align-items: center; justify-content: center; }
  .banner span { font-size: 46px; }
  .heading--tight { font-size: 27px; }
  .body--wide { font-size: 22px; }
  .heading--date { font-size: 25px; }
  .event { width: 92%; height: auto; margin: 44px 0 0; padding: 40px 18px 42px; }
  .event::before { transform: rotate(-3deg); }
  .event .rule { width: 150px; }
  .event .cta { margin-top: 40px; }
  .ft { margin-top: 56px; }
  .ft__top { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 28px 16px 40px; }
  .ft__logo { font-size: 30px; gap: 9px; }
  .ft__tag { padding-left: 20px; font-size: 20px; margin-top: 4px; white-space: normal; }
  .ft__cta { margin: 22px 0 0 20px; }
  .ft__head { font-size: 12px; margin-bottom: 8px; padding-bottom: 8px; }
  .ft__col { gap: 6px; padding-top: 0; }
  .ft__col a, .ft__col address { font-size: 17px; }
  .ft__social { gap: 18px; margin-top: 2px; }
  .ft__icon { width: 26px; height: 26px; }
  .ft__contact { flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 16px 24px; }
  .ft__head--inline { margin: 0 0 6px; font-size: 12px; }
  .ft__contact address, .ft__contact a { padding: 0; border: 0; font-size: 17px; white-space: normal; }
  .ft__legal { flex-direction: column; align-items: flex-start; padding: 16px 16px 26px; font-size: 11.5px; }
  .ft__legal-links { gap: 20px; }
  .ft__legal-links a { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .drawer__panel, .drawer::backdrop, .cta__arrow { transition: none; }
  .popup[open] { animation: none; }
}