/* ========================================================================================
 * ENDLESS NOIR · pages.css
 * Page-specific CSS for: /how, /tipline, /press, and 404.
 * Design tokens and shared primitives live in deco.css — nothing here redefines them.
 * Load order: deco.css → pages.css.
 *
 * NO border-radius anywhere except circles.
 * Gold surfaces are ALWAYS a gradient, never a flat fill.
 * Animate compositor-friendly properties only (transform, opacity, clip-path, filter).
 * ======================================================================================== */


/* ---- shared masthead padding wrapper -------------------------------------------------- */

/* Pages whose masthead sits above a full-bleed photo header (how.html)
 * use this wrapper so the header can go full-width without clipping. */
.page-nav {
  padding: 32px var(--pad-x) 0;
}

/* The masthead is a flex row; a <nav> wrapper around the links would break the row.
 * display:contents removes the nav's box from layout — its children remain flex items. */
.masthead nav { display: contents; }


/* ========================================================================================
 * HOW IT WORKS  ·  proto 3b
 * ======================================================================================== */

/* --- photographic header (290px) --- */

.how-header {
  position: relative;
  height: 290px;
  overflow: hidden;
}

.how-header > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 52%;
}

.how-header__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, #08070a 4%, rgba(8,7,10,.55) 52%, rgba(8,7,10,.35));
}

/* Ray override: solid-center burst (proto 3b), not the hollow ring from deco.css.
 * Position and mask differ from defaults — both must be set here. */
.how-header .rays {
  left: 50%; top: -160px;
  width: 760px; height: 760px;
  margin-left: -380px;
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.35) 40%, transparent 68%);
  mask-image: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.35) 40%, transparent 68%);
}

.how-header__title {
  position: absolute; left: 0; right: 0; bottom: 38px;
  text-align: center;
}

.how-header__title .eyebrow {
  margin-bottom: 16px;
}

.how-header__title h1 {
  font-family: var(--deco);
  font-weight: 400; font-size: 66px;
  line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  margin: 0;
}

/* --- body --- */

.how-body {
  padding: 44px 62px 60px;
}

.how-standfirst {
  display: block;
  margin: 0 auto 44px;
  font-size: 19px; text-align: center; max-width: 52ch;
  /* .lede provides font-family, style, color */
}

/* --- step cards --- */

.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.step-card {
  padding: 26px 24px 28px;
  position: relative; overflow: hidden;
  /* .paper provides background, color, box-shadow */
}

.step-card__cap {
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}

.step-card__num {
  font-family: var(--deco);
  font-size: 38px; color: #7d6027;
  line-height: 1; margin-bottom: 14px;
}

.step-card__head {
  display: block;
  font-family: var(--cond); font-weight: 500;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 10px;
}

.step-card__body {
  font-family: var(--serif);
  font-size: 15px; line-height: 1.6; color: #463b2b;
}

/* Coffee ring bleeds off card edge — position/size/rotation override only */
.step-card .ring {
  left: -96px; bottom: -108px;
  width: 262px; transform: rotate(22deg);
}

/* --- tip-line band --- */

.tip-band {
  display: flex; gap: 36px;
  margin-top: 34px; align-items: center;
  border: 1px solid var(--rule-mid); padding: 28px 32px;
}

/* Narrow VU to 150px in this context (proto 3b spec); deco.css default is 212px */
.tip-band .vu { flex: none; width: 150px; }

/* Phase the needle so it doesn't sync with any other VU on the page */
.tip-band .vu .needle { animation-delay: -2.2s; }

.tip-band__text { flex: 1; }

.tip-band__heading {
  font-family: var(--deco);
  font-size: 30px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cream); margin-bottom: 8px;
}

.tip-band__lede {
  max-width: 52ch; margin: 0; font-size: 16px;
  /* .lede provides font-family, style, color */
}

/* --- ERAS section ---
 * The section wrapper scopes the auto-generated inline <style> block so that
 * rules like `.era-kicker` (specificity 0,1,0) cannot override our 0,2,0 rules
 * even though the inline <style> appears later in the document. */

.eras {
  margin-top: 52px; padding-top: 44px;
  border-top: 1px solid var(--rule-soft);
}

/* Heading and intro paragraph emitted by build-evolution.mjs before the .era blocks */
.eras > h2 {
  font-family: var(--cond); font-weight: 500;
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 14px;
}

.eras > p {
  font-family: var(--serif); font-style: italic;
  font-size: 16px; line-height: 1.65; color: var(--text-muted);
  margin: 0 0 1.4em;
}

/* Each era block */
.eras .era {
  margin: 1.1em 0 1.4em;
  padding-left: 18px;
  border-left: 2px solid var(--rule-soft);
}

/* 0,2,1 — beats inline `.era h3` at 0,1,1 */
.eras .era h3 {
  font-family: var(--deco); font-weight: 400;
  font-size: 26px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cream); margin: 0 0 .1em;
}

/* 0,3,1 — beats `.eras .era > p` at 0,2,1 AND inline `.era-kicker` at 0,1,0.
 * The classed rules must be more specific than the bare > p rule below because
 * era-kicker, era-stat, and era-planned are <p> elements — direct children of .era. */
.eras .era > p.era-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  font-style: normal; /* the `> p` rule below is italic; mono metadata never is */
  color: var(--gold); opacity: .85;
  margin: .1em 0 .4em;
}

.eras .era > p {
  font-family: var(--serif); font-style: italic;
  font-size: 15px; line-height: 1.65; color: var(--text-muted-2);
  margin: 0 0 .6em;
}

/* 0,3,1 — beats `.eras .era > p` at 0,2,1 AND inline `.era-stat` at 0,1,0 */
.eras .era > p.era-stat {
  display: block;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-style: normal;
  color: var(--text-dim); opacity: .85;
  margin: .5em 0 0;
}

/* 0,3,1 — beats `.eras .era > p` at 0,2,1 AND inline `.era-planned` at 0,1,0 */
.eras .era > p.era-planned {
  font-family: var(--serif); font-style: italic;
  font-size: 15px; color: var(--text-muted-2); opacity: .85;
}

/* --- .aside in the how context --- */

.how-body .aside {
  font-family: var(--mono);
  font-size: 12.5px; line-height: 1.7; color: var(--text-dim);
  border-left: 2px solid var(--rule); padding: 6px 0 6px 18px;
  margin: 36px 0 0;
}

.how-body .aside a { color: var(--gold-bright); text-decoration: none; }
.how-body .aside a:hover { color: var(--cream); }


/* ========================================================================================
 * TIP LINE  ·  proto 6c
 * ======================================================================================== */

/* Outer wrapper provides page padding and clips the ray field */
.tipline-wrap {
  position: relative; overflow: hidden;
  padding: 32px var(--pad-x) 56px;
}

/* Ray override: solid-center 1000px burst, origin 320px above the wrapper top */
.tipline-wrap .rays {
  left: 50%; top: -320px;
  width: 1000px; height: 1000px; margin-left: -500px;
  -webkit-mask-image: radial-gradient(closest-side, #000 6%, rgba(0,0,0,.35) 38%, transparent 66%);
  mask-image: radial-gradient(closest-side, #000 6%, rgba(0,0,0,.35) 38%, transparent 66%);
}

.tipline-wrap .masthead { margin-bottom: 52px; }

.tipline-measure { max-width: 760px; margin: 0 auto; }

/* --- heading block --- */

.tipline-heading { text-align: center; margin-bottom: 44px; }

.tipline-heading .eyebrow { margin-bottom: 16px; }

.tipline-heading h1 {
  font-family: var(--deco); font-weight: 400;
  font-size: 62px; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  margin: 0; color: var(--cream-2);
  text-shadow: 0 0 40px rgba(201,162,74,.3);
}

.tipline-heading .lede { margin: 20px 0 0; font-size: 19px; }

/* Double hairline diamond divider (bespoke — different widths from .divider) */
.tipline-diamond {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 22px;
}

.tipline-diamond .diamond-hairline {
  height: 1px; width: 110px;
}

.tipline-diamond .diamond-hairline--left {
  background: linear-gradient(90deg, transparent, rgba(201,162,74,.7));
}

.tipline-diamond .diamond-hairline--right {
  background: linear-gradient(270deg, transparent, rgba(201,162,74,.7));
}

.tipline-diamond .diamond-gem {
  flex: none; width: 7px; height: 7px;
  transform: rotate(45deg);
  border: 1px solid rgba(201,162,74,.85);
}

/* --- body paragraphs --- */

.tipline-body {
  font-family: var(--serif);
  font-size: 17.5px; line-height: 1.78; color: #c6bba2;
  margin: 0 0 22px;
}

.tipline-body--wide { margin-bottom: 44px; }

.tipline-body b {
  font-family: var(--cond); font-weight: 500;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-bright);
}

.tipline-body a { color: var(--gold-bright); }

/* --- paper CTA slip (extends .paper) --- */

.tipline-cta {
  padding: 40px 44px 44px; text-align: center; margin-bottom: 44px;
  /* .paper: background, color, overflow:hidden, box-shadow */
  box-shadow: 0 30px 56px -26px rgba(0,0,0,.9), inset 0 0 70px rgba(120,90,40,.3);
}

.tipline-cta .ring {
  left: -92px; bottom: -110px;
  width: 260px; transform: rotate(-16deg);
}

.tipline-cta__label {
  position: relative;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--paper-label);
  margin: 0 0 16px; /* margin-top:0 resets UA h2 margin */
  font-weight: 400; /* <h2> UA bold; override to match div weight */
}

.tipline-cta__btn {
  position: relative; display: inline-block;
  font-family: var(--cond); font-weight: 400;
  font-size: 13px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--cream-2); background: var(--ink);
  padding: 20px 34px; text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.7);
  transition: filter .2s;
}

.tipline-cta__btn:hover { filter: brightness(1.2); }

.tipline-cta__address {
  position: relative;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; color: var(--ink-muted);
  margin-top: 18px;
}

.tipline-cta__body {
  position: relative;
  font-family: var(--serif);
  font-size: 16px; line-height: 1.7; color: var(--ink-body);
  max-width: 52ch; margin: 22px auto 0;
}

/* --- rules panel --- */

.tipline-rules {
  border: 1px solid rgba(201,162,74,.3);
  padding: 30px 34px 32px; margin-bottom: 36px;
}

.tipline-rules__label {
  font-weight: 300; font-size: 11px;
  letter-spacing: .4em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px; /* margin-top:0 resets UA h2 margin */
}

.tipline-rules__body {
  font-family: var(--serif);
  font-size: 16.5px; line-height: 1.75; color: var(--text-muted);
  margin: 0;
}

/* --- mono aside with gold left rule --- */

.tipline-aside {
  border-left: 2px solid rgba(201,162,74,.45);
  padding: 6px 0 6px 18px;
  font-family: var(--mono); font-size: 12.5px;
  line-height: 1.7; color: var(--text-dim);
}

.tipline-aside a { color: var(--gold-bright); text-decoration: none; }
.tipline-aside a:hover { color: var(--cream); }


/* ========================================================================================
 * PRESS KIT  ·  proto 6d
 * ======================================================================================== */

/* Masthead wrapper for press — tighter bottom than page-nav since a photo band follows */
.press-nav {
  padding: 32px var(--pad-x) 24px;
}

/* --- press-hero photo band (200px) --- */

.press-header {
  position: relative; height: 200px; overflow: hidden;
}

.press-header > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .62;
}

.press-header__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, #08070a 8%, rgba(8,7,10,.55) 60%, rgba(8,7,10,.3));
}

.press-header__title {
  position: absolute; left: 0; right: 0; bottom: 28px;
  text-align: center;
}

.press-header__title .eyebrow { margin-bottom: 12px; }

.press-header__title h1 {
  font-family: var(--deco); font-weight: 400;
  font-size: 54px; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cream-2); margin: 0;
}

/* --- body --- */

.press-body {
  padding: 34px var(--pad-x) 56px;
}

.press-standfirst {
  display: block; margin: 0 auto 44px;
  text-align: center; max-width: 48ch; font-size: 18px;
}

/* --- paper plaque (extends .paper) --- */

.press-plaque {
  padding: 34px 40px; margin-bottom: 44px;
  box-shadow: 0 26px 50px -24px rgba(0,0,0,.9), inset 0 0 70px rgba(120,90,40,.28);
}

.press-plaque__label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--paper-label); margin-bottom: 16px;
}

.press-plaque__primary {
  font-family: var(--serif);
  font-size: 21px; line-height: 1.6; color: #2a2318;
  margin: 0 0 20px;
}

.press-plaque__rule {
  width: 54px; height: 2px;
  background: var(--paper-label); margin-bottom: 18px;
}

.press-plaque__alt {
  font-family: var(--serif);
  font-size: 16px; line-height: 1.7; color: var(--ink-body);
  margin: 0 0 10px;
}

.press-plaque__alt:last-child { margin-bottom: 0; }

.press-plaque__alt b {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper-label); font-weight: 400;
}

/* --- two-column: key facts + sidebar --- */

.press-facts-grid {
  display: flex; gap: 38px;
  align-items: flex-start; margin-bottom: 48px;
}

.press-facts-col { flex: 1; min-width: 0; }

.press-facts-label {
  font-weight: 300; font-size: 11px;
  letter-spacing: .4em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px; /* margin-top:0 resets UA h2 margin */
}

.press-key-facts {
  font-family: var(--mono); font-size: 11.5px;
  line-height: 1.6; color: #c6bba2;
}

.press-key-facts__row {
  padding: 11px 0;
  border-bottom: 1px dotted rgba(201,162,74,.25);
}

.press-key-facts__row:last-child { border-bottom: 0; }

.press-key-facts__row b { color: var(--gold-bright); }

/* --- 330px sidebar --- */

.press-sidebar { flex: 0 0 330px; }

.press-cover-frame {
  padding: 6px;
  background: linear-gradient(150deg, var(--gold), var(--gold-deep) 52%, var(--gold));
  box-shadow: 0 20px 38px -20px rgba(0,0,0,.9);
  margin-bottom: 14px;
}

.press-cover-frame img { display: block; width: 100%; height: auto; }

.press-download {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(201,162,74,.2);
  text-decoration: none;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  transition: opacity .2s;
}

.press-download--last { border-bottom: 1px solid rgba(201,162,74,.2); }

.press-download .dl-name { color: #e8d4a8; }
.press-download .dl-meta { color: var(--text-dimmest); }
.press-download:hover { opacity: .75; }

.press-listen-label {
  display: block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-dimmest); margin: 20px 0 8px;
}

/* Vertical badge stack in sidebar (horizontal .badges from deco.css not used here) */
.press-badges {
  display: flex; flex-direction: column; gap: 8px;
}

.press-misc {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; color: var(--text-dim);
  line-height: 1.9; margin-top: 10px;
}

.press-misc a { color: var(--gold-bright); text-decoration: none; }
.press-misc a:hover { color: var(--cream); }

/* --- story angles --- */

.press-angles-label {
  font-weight: 300; font-size: 11px;
  letter-spacing: .4em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px; /* margin-top:0 resets UA h2 margin */
}

.press-angles {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 22px; margin-bottom: 48px;
}

.press-angle-card {
  border: 1px solid rgba(201,162,74,.22);
  padding: 24px 26px;
}

.press-angle-card h2 {
  font-family: var(--deco); font-weight: 400;
  font-size: 23px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--cream-2); margin: 0 0 12px;
}

.press-angle-card p {
  font-family: var(--serif);
  font-size: 15.5px; line-height: 1.7; color: var(--text-muted-2);
  margin: 0;
}

/* --- contact band --- */

.press-contact {
  display: flex; gap: 26px; align-items: center;
  border: 1px solid rgba(201,162,74,.32); padding: 28px 32px;
}

.press-contact__text { flex: 1; }

.press-contact__name {
  font-family: var(--deco); font-weight: 400;
  font-size: 28px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cream-2); margin-bottom: 10px;
}

.press-contact__body {
  font-family: var(--serif);
  font-size: 16px; line-height: 1.7; color: var(--text-muted);
  max-width: 56ch; margin: 0;
}

.press-contact__body b {
  font-family: var(--cond); font-weight: 500;
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-bright);
}

/* Keep the btn-gold from stretching with the flex context */
.press-contact .btn-gold { flex: none; }

/* Audio player */
.press-audio {
  display: block; width: 100%;
  margin: .6rem 0 1.2rem;
}


/* --- social follow strip below contact --- */

.press-social {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid rgba(201,162,74,.2);
}

.press-social p {
  margin: 0;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; color: var(--text-dim);
  line-height: 1.9;
}

.press-social a {
  color: var(--gold); text-decoration: none;
}

.press-social a:hover { color: var(--cream); }


/* ========================================================================================
 * 404  ·  proto 6e
 * Fixed 640px composition. No masthead, no footer — specific beats general.
 * ======================================================================================== */

.notfound {
  position: relative; height: 640px; overflow: hidden;
}

.nf-cork {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .3;
}

.nf-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 50% 34%, rgba(8,7,10,.4) 0%, rgba(8,7,10,.86) 52%, #08070a 100%);
}

.nf-strings {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* Index card: centered at x=50%, rotated −4° */
.nf-card-wrap {
  position: absolute;
  left: 50%; top: 96px;
  width: 392px; margin-left: -196px;
  transform: rotate(-4deg);
  filter: drop-shadow(0 20px 26px rgba(0,0,0,.7));
}

/* Torn / jagged bottom edge — exact polygon from proto 6e */
.nf-card-inner {
  position: relative;
  clip-path: polygon(
    0 0, 100% 0, 100% 60%,
    94% 69%, 87% 62%, 80% 74%, 73% 65%, 65% 78%,
    57% 67%, 49% 80%, 41% 68%, 34% 81%, 26% 70%,
    18% 83%, 10% 72%, 4% 84%, 0 74%
  );
}

.nf-card-inner > img {
  /* height:auto is required: the <img> carries intrinsic width/height attributes, so width:100%
   * alone scales the width while the attribute pins the height — stretching the card and pushing
   * its torn edge down over the headline. */
  display: block; width: 100%; height: auto;
}

.nf-card-text {
  position: absolute; inset: 0;
  padding: 34px 34px 0;
  font-family: var(--mono); color: var(--ink-2);
}

.nf-card-ref {
  font-size: 11px; letter-spacing: .2em;
  color: var(--paper-label); margin-bottom: 12px;
}

.nf-card-title {
  font-size: 19px; font-weight: 700;
  letter-spacing: .07em; line-height: 1.3;
}

.nf-tack {
  position: absolute;
  left: 50%; top: -16px; width: 34px; height: 40px;
  margin-left: -17px;
  background: url(/assets/tack-2.webp) center/contain no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.7));
}

/* Bottom text block anchored 66px from bottom */
.nf-content {
  position: absolute; left: 0; right: 0; bottom: 66px;
  text-align: center; padding: 0 var(--pad-x);
}

.nf-content .eyebrow { margin-bottom: 16px; }

.nf-content h1 {
  font-family: var(--deco); font-weight: 400;
  font-size: 54px; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cream-2); margin: 0;
  text-shadow: 0 0 40px rgba(201,162,74,.3);
}

.nf-content .lede {
  margin: 20px auto 30px;
  font-size: 18px; max-width: 44ch;
  text-align: center;
}

/* Wider diamond divider for 404 (130px hairlines vs 110px on tipline) */
.nf-diamond {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-bottom: 24px;
}

.nf-diamond .diamond-hairline {
  height: 1px; width: 130px;
}

.nf-diamond .diamond-hairline--left {
  background: linear-gradient(90deg, transparent, rgba(201,162,74,.6));
}

.nf-diamond .diamond-hairline--right {
  background: linear-gradient(270deg, transparent, rgba(201,162,74,.6));
}

.nf-diamond .diamond-gem {
  flex: none; width: 7px; height: 7px;
  transform: rotate(45deg);
  border: 1px solid rgba(201,162,74,.85);
}

.nf-exits {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}

/* ========================================================================================
 * 8a / 8b — mobile for the hand-authored pages (how, tipline, press, 404).
 * Rule of the middle breakpoint: side rails become full-width strips, grids go 2-up.
 * Phone stacks everything; the type floor and paper tokens hold everywhere.
 * ======================================================================================== */

@media (max-width: 1179px) {
  .step-grid { grid-template-columns: repeat(2, 1fr); }
  .press-facts-grid { flex-direction: column; gap: 30px; }
  .press-sidebar { flex: none; width: 100%; max-width: 420px; }
}

@media (max-width: 599px) {
  .how-header { height: 220px; }
  .step-grid { grid-template-columns: 1fr; }
  .tip-band { flex-direction: column; align-items: flex-start; gap: 22px; padding: 22px 20px; }
  .tip-band .vu { align-self: center; }

  .tipline-wrap { padding: 24px var(--pad-x) 44px; }
  .tipline-wrap .masthead { margin-bottom: 34px; }

  .press-header__title h1 { font-size: 38px; }
  .press-angles { grid-template-columns: 1fr; }
  .press-contact { flex-direction: column; align-items: flex-start; }
  .press-badges { flex-direction: column; align-items: stretch; }

  .notfound { height: 560px; }
  .nf-card-wrap { width: 300px; margin-left: -150px; top: 84px; }
  .nf-content h1 { font-size: 40px; }
  .nf-exits { flex-direction: column; align-items: stretch; text-align: center; }
}