/* Case study pages. Loaded after next.css, which supplies the tokens. */

/* 1040 to match the landing page, the app pages and Maven, so the frame does
   not jump as you navigate. The prose keeps its own measure below: the shell is
   for alignment, not for line length.

   The three measurements every block on the page derives from. In px on purpose:
   ch resolves against the using element's own font-size, so the same ch value
   meant 697px in a 16px paragraph and 437px in the 10.5px mono footer, which is
   how the footer rule ended up narrower than everything else. --measure is 68ch
   of Space Grotesk at 16px, about 79 characters a line. */
#page {
  max-width: 1040px;
  gap: 0;
  --rail: 200px;
  --gutter: 40px;
  --measure: 697px;
  --span: calc(var(--rail) + var(--gutter) + var(--measure));
}

.back {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 34px;
}
.back:hover, .back:focus-visible { color: var(--y); }

/* Capped short of the 1040 shell so a title never runs out as one thin line.
   32ch rather than 30: at 30 the longest of the three titles missed a single
   line by 27px and broke, while the other two fit. */
.c-title {
  font-size: clamp(26px, 4.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
  max-width: 32ch;
}
.c-sub { font-size: 16px; color: var(--muted); margin-top: 14px; max-width: var(--measure); }

/* Two columns: the section label sits in a left rail, the prose runs beside it.
   This is what the 1040 shell is for. The label column uses the width instead of
   the paragraphs stretching into it, so nothing has to read at 110 characters.
   Every child that is not the label is pinned to column 2, otherwise the second
   paragraph of a section would flow back under the label. */
.c-block {
  margin-top: 40px;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--gutter);
}
.c-block > .c-label { grid-column: 1; grid-row: 1; }
.c-block > *:not(.c-label) { grid-column: 2; }
/* An h2, so the outline runs h1 to h2 to h3 instead of skipping a level.
   font-weight is reset because a heading defaults to bold and this did not. */
.c-label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--y);
  margin-bottom: 12px;
}
.c-block p { font-size: 16px; color: var(--muted); max-width: var(--measure); }
.c-block p + p { margin-top: 14px; }

/* Inline prose links. next.css sets no default anchor style, because every other
   link on these pages carries its own class. Case studies started naming products
   and linking them, so a paragraph link needed a rule of its own or it rendered as
   browser-default blue on near-black. Yellow with a dim underline, matching how
   .c-foot a and .btn-ghost already treat a link in this palette. */
.c-sub a, .c-block p a {
  color: var(--y);
  text-decoration: underline;
  text-decoration-color: rgba(255, 214, 0, 0.35);
  text-underline-offset: 3px;
}
.c-sub a:hover, .c-sub a:focus-visible,
.c-block p a:hover, .c-block p a:focus-visible { text-decoration-color: var(--y); }
.c-sub a:focus-visible, .c-block p a:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }

/* No rule and no indent. The bold heading already says "here is the next one of
   three", and the indent read as a quotation rather than a list. */
.decision { margin-top: 26px; }
.decision h3 {
  font-size: 16.5px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.decision p { font-size: 15.5px; }
/* Wider apart than paragraphs within one decision, since the gap is now the only
   thing separating them. */
.decision + .decision { margin-top: 30px; }

/* The only action on the page. Sentence left, buttons right, so the width is
   used rather than left as an empty box. Wraps to stacked when there is not room
   for both.

   Its right edge lands exactly where every paragraph ends. At the full 1040 it
   overhung the text by about 100px and read as a separate, wider thing. */
.cta {
  max-width: var(--span);
  margin-top: 56px;
  padding: clamp(22px, 3vh, 32px) clamp(20px, 2.6vw, 32px);
  border: 1px solid rgba(255, 214, 0, 0.34);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 214, 0, 0.055), rgba(255, 214, 0, 0.012));
  display: flex;
  flex-direction: column;
  /* Centred. Left-aligned content in a box this wide left a hole on the right
     and read as a mistake rather than a choice. */
  align-items: center;
  text-align: center;
  gap: 18px;
}
/* No cap. Sitting the sentence beside the buttons left it whatever they did not
   use, which was about 320px with three buttons, so it wrapped mid-phrase and
   then the buttons dropped to their own row regardless. One line, then buttons. */
.cta p { font-size: 16px; color: var(--text); }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 20px;
  border: 1px solid var(--y);
  border-radius: 8px;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}
/* Filled is email, because that is the contact channel the rest of the site
   uses. Booking is the deliberate second step, not the default one. */
.btn-primary { background: var(--y); color: #05050A; }
.btn-primary:hover, .btn-primary:focus-visible { background: transparent; color: var(--y); }
.btn-ghost { color: var(--y); background: transparent; }
.btn-ghost:hover, .btn-ghost:focus-visible { background: rgba(255, 214, 0, 0.12); }
.btn:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }

/* Reduced to the two sibling cases. Going home is the back link at the top, and
   the page's own action is the CTA above, so anything else here was repetition.
   Same right edge as the CTA and the prose. */
.c-foot {
  max-width: var(--span);
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Sans, sentence case, no tracking: in the same mono uppercase as the links it
   read as a third link. The extra right margin groups the two links together
   rather than spacing all three items equally. */
.c-foot-l {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(240, 240, 240, 0.34);
  margin-right: 12px;
}
.c-foot a { color: var(--dim); text-decoration: none; }
.c-foot a:hover, .c-foot a:focus-visible { color: var(--y); }

/* Below the point where a 200px rail plus readable prose stops fitting, the
   label goes back above its section and everything is one column again. */
@media (max-width: 900px) {
  .c-block { display: block; }
}