/* Job Clarendon mini — ported from the old Craft/Twig page's /css/job-clarendon.css.
 * Font URLs rewritten to bare filenames (resolved via mini_asset fall-through).
 * Commerce (.packages/.jc-buy) and in-use sections dropped — not ported. */

@font-face {
  font-family: "JobClarendonVariable-VF";
  font-style: normal;
  font-weight: 1 900;
  src: url("JobClarendon.woff2") format("woff2");
}
@font-face {
  font-family: "OutputSans";
  font-style: normal;
  font-weight: 400;
  src: url("Output.woff2") format("woff2");
}
@font-face {
  font-family: "JobClarendonTextBeta";
  font-style: normal;
  font-weight: 1 600;
  src: url("JobClarendon.woff2") format("woff2");
}
@font-face {
  font-family: "JobClarendonTextBeta";
  font-style: italic;
  font-weight: 400;
  src: url("JobClarendon.woff2") format("woff2");
}
@font-face {
  font-family: "JobClarendonTextBeta";
  font-style: normal;
  font-weight: 601 900;
  src: url("JobClarendon.woff2") format("woff2");
}

@layer page {
  :root {
    --spacing: 1rem;
    --yellow: #ffe000;
    --black: #000;
    --gray-2: #4f4f4f;
    --background: #fafafa;
    --white: #fff;
    --color1: #00f;
    --color1-light: #3e87b6;
    --color2: #05e283;
    --serif: "JobClarendonVariable-VF", serif;
    --sans: "JobClarendonTextBeta", sans-serif;
    --lg: 1024px;
  }

  .»ss01 { font-feature-settings: "ss01"; }
  .»ss02 { font-feature-settings: "ss02"; }
  .»ss03 { font-feature-settings: "ss03"; }
  .»ss04 { font-feature-settings: "ss04"; }
  .»ss05 { font-feature-settings: "ss05"; }
  .»ss06 { font-feature-settings: "ss06"; }
  .»ss07 { font-feature-settings: "ss07"; }

  @keyframes fontweights {
    0% { font-variation-settings: "wght" 1, "wdth" 42; }
    90% { font-variation-settings: "wght" 800, "wdth" 42; }
    to { font-variation-settings: "wght" 800, "wdth" 42; }
  }
  @keyframes fontweightsalt {
    0% { font-variation-settings: "wght" 1, "wdth" 42; }
    to { font-variation-settings: "wght" 700, "wdth" 42; }
  }

  body { background: var(--background); scroll-behavior: smooth; }

  .jc-page {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: var(--serif);
    font-size: 16px;
    font-variation-settings: "wght" 400, "wdth" 50;
    line-height: 1.2;
    text-rendering: optimizeLegibility;
  }

  .jc-actions .button,
  .jc-actions a {
    background: var(--black);
    color: var(--white);
    display: inline-flex;
    font-family: var(--sans);
    font-size: .875rem;
    padding: .5rem 1.5rem;
    text-decoration: none;
  }
  .jc-actions .button[href="#buy"] { background: var(--yellow); color: var(--black); }
  .jc-actions {
    background: var(--background);
    padding-block: var(--spacing);
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .jc-actions--box {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin: 0 auto;
    max-width: 1056px;
    padding-inline: var(--spacing);
    width: 100%;
  }
  .jc-actions--box a[href="#buy"] { margin-left: auto; order: 3; }
  .jc-actions .jc-button:last-child { margin-left: auto; }

  .jc-grid {
    background: var(--background);
    display: grid;
    gap: var(--spacing);
    padding-block: var(--spacing);
    position: relative;
    z-index: 2;
  }

  .jc-intro {
    text-wrap: balance;
    align-items: center;
    color: var(--color1);
    display: flex;
    flex-direction: column;
    font-size: clamp(4rem, 13.5vh, 15rem);
    font-variation-settings: "wght" 600, "wdth" 34;
    justify-content: center;
    line-height: 1;
    min-height: calc(100vh - 97px);
    min-height: calc(100svh - 97px);
    position: sticky;
    text-align: center;
    top: 0;
    z-index: -1;
  }
  html:not(.fonts-loaded) .jc-intro { font-size: clamp(1.5rem, 11.5vh, 14rem); }
  @media screen and (max-width: 640px) {
    .jc-intro { font-size: clamp(4rem, 11vh, 15rem); line-height: .95; }
    html:not(.fonts-loaded) .jc-intro { font-size: clamp(1.5rem, 8.5vh, 12rem); }
  }
  .jc-intro--box {
    display: grid;
    gap: clamp(var(--spacing), 3vh, calc(var(--spacing) * 3));
    margin: calc(var(--spacing) * -2) auto 0 auto;
    max-width: 1120px;
    padding-inline: var(--spacing);
    width: 100%;
  }

  .jc-one { margin: 0 auto; max-width: 1056px; padding-inline: var(--spacing); width: 100%; }
  .jc-one img { display: block; height: auto; width: 100%; }

  .jc-two {
    display: grid;
    gap: var(--spacing);
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    max-width: 1056px;
    padding-inline: var(--spacing);
    width: 100%;
  }
  @media screen and (max-width: 640px) { .jc-two { grid-template-columns: 1fr; } }
  .jc-two img { display: block; height: auto; width: 100%; }

  .jc-three {
    display: grid;
    gap: var(--spacing);
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0 auto;
    max-width: 1056px;
    padding-inline: var(--spacing);
    width: 100%;
  }
  @media screen and (max-width: 640px) { .jc-three { grid-template-columns: 1fr; } }
  .jc-three img { display: block; height: auto; width: 100%; }

  .jc-three-alt {
    display: grid;
    gap: var(--spacing);
    grid-template-areas: "one one two" "one one three";
    margin: 0 auto;
    max-width: 1056px;
    padding-inline: var(--spacing);
    width: 100%;
  }
  .jc-three-alt figure:first-child { grid-area: one; }
  .jc-three-alt figure:nth-child(2) { grid-area: two; }
  .jc-three-alt figure:nth-child(3) { grid-area: three; }
  @media screen and (max-width: 640px) {
    .jc-three-alt { grid-template-areas: "one" "two" "three"; }
  }
  .jc-three-alt img { display: block; height: 100%; object-fit: cover; width: 100%; }

  .jc-breakout {
    background: var(--color1);
    color: var(--color2);
    min-height: 75vh;
    padding-block: calc(var(--spacing) * 4);
  }
  .jc-breakout.»alt { background: var(--color2); color: var(--color1); }
  .jc-breakout--box {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    height: 100%;
    margin: 0 auto;
    max-width: 1056px;
    padding-inline: var(--spacing);
    width: 100%;
  }
  .jc-breakout--boxed { align-items: center; display: flex; flex: 1; justify-content: center; }
  .jc-breakout--content {
    font-family: var(--sans);
    font-size: .875rem;
    line-height: 1.6;
    max-width: calc(var(--spacing) * 32);
  }
  .jc-breakout--label {
    font-family: var(--sans);
    font-size: .875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .jc-breakout-one { min-width: 150px; text-align: center; }
  .jc-breakout-one--text {
    animation: fontweights 3s ease infinite alternate;
    font-size: clamp(5rem, 50vw, 40rem);
    font-weight: 100;
  }
  .jc-breakout-one--label { font-family: var(--sans); font-size: .875rem; }

  .jc-breakout-two {
    display: grid;
    gap: calc(var(--spacing) * 4);
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  @media screen and (max-width: 640px) { .jc-breakout-two { grid-template-columns: 1fr; } }
  .jc-breakout-two--col:first-child {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  @media screen and (max-width: 640px) {
    .jc-breakout-two--col:first-child { gap: calc(var(--spacing) * 4); order: 2; }
  }
  .jc-breakout-two--text {
    display: grid;
    font-size: clamp(5rem, 11vw, 16rem);
    font-variation-settings: "wght" 900, "wdth" 50;
    line-height: .9;
  }
  @media screen and (max-width: 640px) {
    .jc-breakout-two--text {
      font-size: clamp(5rem, 27vw, 25rem);
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .jc-breakout-two--text span { display: block; }
  .jc-breakout-two--text span:first-child,
  .jc-breakout-two--text span:nth-child(3) { margin-inline-start: -1rem; }
  .jc-breakout-two--text span:nth-child(2),
  .jc-breakout-two--text span:nth-child(4) { margin-inline-start: 1rem; }
  .jc-breakout-two--animation {
    align-items: center;
    animation: fontweightsalt 3s infinite alternate;
    display: flex;
    flex: 1;
    font-size: clamp(5rem, 8vw, 6.5rem);
    font-weight: 100;
    justify-content: center;
  }

  .jc-breakout-three {
    display: grid;
    gap: calc(var(--spacing) * 4);
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  @media screen and (max-width: 640px) {
    .jc-breakout-three { gap: calc(var(--spacing) * 2); grid-template-columns: 1fr; }
  }
  .jc-breakout-three--box > p:not(:last-child) {
    color: var(--color1-light);
    font-size: clamp(3.4rem, 5vw, 4.2rem);
    font-variation-settings: "wght" 200, "wdth" 50;
  }
  .jc-breakout-three--box > p > span { color: var(--color2); }
  .jc-breakout-three--box > p:nth-child(2) { margin-block-end: var(--spacing); }
  .jc-breakout-three--content {
    display: grid;
    gap: calc(var(--spacing) * 4);
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }
  @media screen and (max-width: 640px) {
    .jc-breakout-three--content { gap: calc(var(--spacing) * 2); grid-template-columns: 1fr; }
  }

  .jc-breakout-four { display: grid; width: 100%; }
  @media screen and (max-width: 640px) { .jc-breakout-four { gap: calc(var(--spacing) * 2); } }
  .jc-breakout-four--text {
    font-size: clamp(3.5rem, 26vw, 20rem);
    font-variation-settings: "wght" 500, "wdth" 50;
  }

  .jc-breakout-five { display: grid; gap: calc(var(--spacing) * 8); width: 100%; }
  .jc-breakout-five--group { display: grid; }
  .jc-breakout-five--grid {
    display: grid;
    gap: calc(var(--spacing) * 2);
    grid-template-columns: repeat(4, 1fr);
  }
  @media screen and (max-width: 640px) {
    .jc-breakout-five--grid { grid-template-columns: repeat(2, 1fr); }
  }
  .jc-breakout-five--box { text-align: center; }
  .jc-breakout-five--text { font-size: clamp(10rem, 18vw, 24rem); }
  .jc-breakout-five--skyline { font-variation-settings: "wght" 300, "wdth" 25; }
  .jc-breakout-five--compressed { font-variation-settings: "wght" 300, "wdth" 34; }
  .jc-breakout-five--extracondensed { font-variation-settings: "wght" 300, "wdth" 42; }
  .jc-breakout-five--condensed { font-variation-settings: "wght" 300, "wdth" 50; }
  .jc-breakout-five--hairline { font-variation-settings: "wght" 1, "wdth" 50; }
  .jc-breakout-five--thin { font-variation-settings: "wght" 100, "wdth" 50; }
  .jc-breakout-five--extralight { font-variation-settings: "wght" 200, "wdth" 50; }
  .jc-breakout-five--light { font-variation-settings: "wght" 300, "wdth" 50; }
  .jc-breakout-five--regular { font-variation-settings: "wght" 400, "wdth" 50; }
  .jc-breakout-five--medium { font-variation-settings: "wght" 500, "wdth" 50; }
  .jc-breakout-five--semibold { font-variation-settings: "wght" 600, "wdth" 50; }
  .jc-breakout-five--bold { font-variation-settings: "wght" 700, "wdth" 50; }
  .jc-breakout-five--extrabold { font-variation-settings: "wght" 800, "wdth" 50; }
  .jc-breakout-five--black { font-variation-settings: "wght" 900, "wdth" 50; }
  @media screen and (max-width: 640px) {
    .jc-breakout-five--group > .jc-breakout--label { text-align: center; }
  }

  .jc-breakout--credits { display: grid; gap: calc(var(--spacing) * 3); width: 100%; }
  .jc-breakout--credits p {
    font-size: clamp(2rem, 10vw, 3.875rem);
    font-variation-settings: "wght" 300, "wdth" 50;
    line-height: 1.2;
  }
  .jc-breakout--credits p strong { font-variation-settings: "wght" 500, "wdth" 50; }
}