/* ==========================================================================
   Fonts — PP Neue Montreal (licensed via Pangram Pangram subscription)
   ========================================================================== */

@font-face {
  font-family: "PP Neue Montreal Hairline";
  src: url("../assets/fonts/PPNeueMontreal-Hairline.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Hairline Italic";
  src: url("../assets/fonts/PPNeueMontreal-HairlineItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Light";
  src: url("../assets/fonts/PPNeueMontreal-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Light Italic";
  src: url("../assets/fonts/PPNeueMontreal-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Book";
  src: url("../assets/fonts/PPNeueMontreal-Book.woff2") format("woff2");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Book Italic";
  src: url("../assets/fonts/PPNeueMontreal-BookItalic.woff2") format("woff2");
  font-weight: 350;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Regular";
  src: url("../assets/fonts/PPNeueMontreal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Regular Italic";
  src: url("../assets/fonts/PPNeueMontreal-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Medium";
  src: url("../assets/fonts/PPNeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Medium Italic";
  src: url("../assets/fonts/PPNeueMontreal-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Semibold";
  src: url("../assets/fonts/PPNeueMontreal-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Semibold Italic";
  src: url("../assets/fonts/PPNeueMontreal-SemiboldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Extrabold";
  src: url("../assets/fonts/PPNeueMontreal-Extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Extrabold Italic";
  src: url("../assets/fonts/PPNeueMontreal-ExtraboldItalic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Black";
  src: url("../assets/fonts/PPNeueMontreal-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal Black Italic";
  src: url("../assets/fonts/PPNeueMontreal-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   CairnWork — design tokens
   ========================================================================== */

:root {
  /* color */
  --color-bg: #ffffff;
  --color-bg-subtle: #fafafa;
  --color-text: #111111;
  --color-text-muted: #6b6b6b;
  --color-border: #e5e5e5;
  --color-accent: #3548e0;
  --color-accent-ink: #ffffff;

  /* type */
  --font-sans:
  "PP Neue Montreal Regular", -apple-system, BlinkMacSystemFont, "Segoe UI",
  Helvetica, Arial, sans-serif;
  --font-serif-voice: var(--font-sans); /* voice carried by italic, not a second family */

  /* scale */
  --step-caption: 0.8125rem; /* 13px */
  --step-body: 0.9375rem; /* 15px */
  --step-body-lg: 1.0625rem; /* 17px */
  --step-h2: 1.75rem; /* 28px */

  /* layout */
  --content-max: 1680px;
  --gutter: 40px;
  --row-height: 84px;
  --radius-sm: 4px;
  --radius-md: 8px;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
  animation: none !important;
  transition: none !important;
  }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 80px var(--gutter);
  max-width: var(--content-max);
  margin: 0 auto;
}

.site-header__logo {
  display: flex;
  align-items: center;
}

.site-header__logo svg {
  height: 24px;
  width: auto;
  display: block;
}

.site-header__logo .cls-1 {
  fill: var(--color-accent);
}

.site-header__logo .cls-2 {
  fill: var(--color-text);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: var(--step-caption);
}

.site-header__nav a {
  text-decoration: none;
  color: var(--color-text);
}

.site-header__nav a:hover {
  color: var(--color-accent);
}

.site-header__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   Listings container
   ========================================================================== */

.listings-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
}

#listings {
  border-top: 0.5px solid #000;
}

/* ==========================================================================
   Row
   ========================================================================== */

.row {
  display: grid;
  grid-template-columns: 20px 1fr 1fr 1fr 1fr 1fr 1fr;
  align-items: center;
  gap: 40px;
  min-height: var(--row-height);
  padding: 0 80px;
  border-bottom: 0.5px solid #000;
  cursor: pointer;
  overflow: hidden;
  transition: min-height 200ms ease, opacity 200ms ease;
}

.row--collapsing {
  display: none;
  min-height: 0;
  pointer-events: none;
}

.row[aria-expanded="true"] {
  background: var(--color-bg-subtle);
}

.row__logo {
  width: 20px;
  height: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row__logo--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

.row__title {
  font-family: "PP Neue Montreal Regular";
  font-size: 16px;
  line-height: 20px;
}

.row__company,
.row__location,
.row__type {
  font-family: "PP Neue Montreal Regular";
  font-size: 16px;
  line-height: 20px;
}

.row__comp {
  font-family: "PP Neue Montreal Regular";
  font-size: 16px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.row__updated {
  font-family: "PP Neue Montreal Regular Italic";
  font-size: 16px;
  line-height: 20px;
  color: var(--color-text-muted);
  font-style: italic;
  text-align: right;
}

/* ==========================================================================
   Drawer (inline expansion)
   ========================================================================== */

.drawer {
  position: relative;
  padding: 40px 40px 40px 80px;
  border-bottom: 1px solid var(--color-border);
  animation: cairn-drawer-in 220ms ease;
}

.drawer--closing {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
}

@keyframes cairn-drawer-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cairn-drawer-in-mobile {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.drawer__close {
  display: block;
  align-self: flex-end;
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #f2f2f2;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.drawer__close:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.drawer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 267px;
  gap: 56px;
  width: 100%;
  max-width: 100%;
}

.drawer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drawer__media--primary {
  aspect-ratio: 3 / 4;
  background: var(--color-bg-subtle);
  overflow: hidden;
  min-width: 0;
}

.drawer__content {
  margin-top: 50%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.drawer__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--step-caption);
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.drawer__eyebrow .row__logo {
  width: 20px;
  height: 20px;
  font-size: 0.5625rem;
}

.drawer__title {
  font-size: var(--step-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
}

.drawer__description {
  color: var(--color-text);
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.drawer__description h4 {
  font-family: "PP Neue Montreal Regular";
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  margin: 28px 0 12px;
}

.drawer__description h4:first-child {
  margin-top: 0;
}

.drawer__description p {
  margin: 0 0 16px;
}

.drawer__description ul,
.drawer__description ol {
  margin: 0 0 16px;
  padding-left: 18px;
}

.drawer__description li {
  margin-bottom: 4px;
}

.drawer__description li p {
  /* Some ATS content wraps list-item text in its own <p>, which
     otherwise still carries the normal paragraph's 16px bottom
     margin on top of the li's own margin — inconsistent, oversized
     spacing specifically on whichever items happen to have that
     nesting. Letting the li's own margin be the only spacing applied
     keeps every list item consistent regardless of the source markup. */
  margin: 0;
}

.drawer__description a {
  color: var(--color-accent);
  text-decoration: underline;
}

.drawer__description strong,
.drawer__description b {
  font-weight: 600;
}

.drawer__side {
  position: sticky;
  top: 40px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

.drawer__note blockquote {
  margin: 0;
  font-style: italic;
  font-size: 20px;
  line-height: 24px;
  padding-left: 8px;
  border-left: 2px solid var(--color-accent);
}

.drawer__media--secondary {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-bg-subtle);
  min-width: 0;
}

.drawer__note + .drawer__media--secondary {
  /* 120px here + the drawer__side flex gap (40px) = 160px total
     between the note and the image specifically, without changing
     spacing anywhere else in the column. */
  margin-top: 120px;
}

.drawer__apply {
  margin-top: 40px;
}

.button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: var(--step-body);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
}

.button--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.button--primary:hover {
  opacity: 0.9;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .site-header {
  padding-left: 40px;
  padding-right: 40px;
  }

  .row {
  grid-template-columns: 36px 1fr 1fr;
  grid-template-areas:
    "logo title title"
    ". company location"
    ". type comp"
    ". updated updated";
  row-gap: 6px;
  column-gap: 12px;
  min-height: auto;
  padding: 20px 40px;
  }

  .row__logo {
  grid-area: logo;
  }
  .row__title {
  grid-area: title;
  }
  .row__company {
  grid-area: company;
  }
  .row__location {
  grid-area: location;
  }
  .row__type {
  grid-area: type;
  }
  .row__comp {
  grid-area: comp;
  }
  .row__updated {
  grid-area: updated;
  text-align: left;
  }

  .drawer__grid {
  grid-template-columns: 1fr;
  gap: 32px;
  }

  .drawer {
  padding-left: 40px;
  }

  .drawer__content {
  /* Base rule's margin-top: 50% is calculated against the containing
     block's WIDTH, not height — a deliberate desktop offset inside a
     narrow multi-column grid. Once the grid collapses to a single
     full-width column at mobile, that same 50% suddenly computes
     against the entire drawer's width, producing a huge, broken-
     looking gap. Reset it since the stacked mobile layout doesn't
     need the offset at all. */
  margin-top: 0;
  }

  .drawer__side {
  /* Sticky only makes sense next to a taller sibling column in a
     multi-column layout. Once everything stacks into one column at
     mobile, there's nothing for it to usefully stick relative to —
     disable it so the note/image just flow normally. */
  position: static;
  top: auto;
  }

  .drawer__close {
  /* drawer__close lives inside drawer__side, which is now the LAST
     item in the mobile stacked layout (after the image and the full
     description) — without its own positioning it'd be buried at the
     very bottom of a long drawer instead of usable near the top.
     position: fixed works regardless of DOM nesting/scroll position,
     since it's relative to the viewport, not its container. */
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2;
  }

  .drawer {
  /* A `transform` on ANY ancestor makes it the containing block for
     position: fixed descendants, overriding the real viewport — even
     a transform that settles at translateY(0). The base entrance
     animation uses transform, which briefly traps drawer__close
     relative to .drawer during the ~220ms it's running; the moment
     the animation ends and the transform clears, the button suddenly
     resolves against the viewport for the first time, causing a
     visible jump. Swapping to an opacity-only animation removes the
     transform entirely, so there's nothing to trap it in the first
     place. */
  animation: cairn-drawer-in-mobile 220ms ease;
  }

  .drawer--closing {
  transform: none;
  }

  .drawer__media--primary {
  aspect-ratio: 4 / 3;
  }
}

@media (max-width: 720px) {
  /* Empty for now — waiting on how the close button (and anything
     else specific to this breakpoint) should actually behave before
     adding rules here. */
}