/* ==========================================================================
   La Workshop — Denim OEM landing page
   Single viewport, non-scrolling on desktop. Values follow the design handoff.
   ========================================================================== */

@font-face {
  font-family: "Silka";
  src: url("/assets/silka-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Silka";
  src: url("/assets/silka-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse";
  src: url("/assets/suisse-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour */
  --cream: #efe8dc;
  --ink: #14151a;
  --ink-60: #4a4740;
  --warm-grey: #6e6a61;
  --light-grey: #9a9488;
  --denim: #3b5c82;
  --stone: #dcd6c9;
  --rule: rgba(20, 21, 26, 0.14);
  --rule-strong: rgba(20, 21, 26, 0.18);
  --rule-image: rgba(239, 232, 220, 0.5);

  /* Type */
  --font-body: "Silka", Helvetica, Arial, sans-serif;
  --font-display: "Suisse", Helvetica, sans-serif;

  --size-title: clamp(30px, min(4.2vw, 7.4vh), 64px);
  --size-email: clamp(17px, min(1.9vw, 3.4vh), 30px);
  --size-body: clamp(12px, min(1.05vw, 1.9vh), 16px);
  --size-capability: clamp(12px, 0.95vw, 14px);
  --size-value: clamp(12px, 1vw, 15px);

  /* ---------------------------------------------------------------------
     PHOTO FRAMING — which part of each photo stays visible.
     Both files are full-resolution and much taller than the panes they fill,
     so the browser crops them. These two values pick what survives the crop.

       The SECOND number is the one that does the work:

       BIGGER  -> the photo slides UP   (less head, more garment)
       SMALLER -> the photo slides DOWN (more head, less garment)
       0% = pinned to the top of the photo, 100% = pinned to the bottom.

     The FIRST number is horizontal, but it only bites when a photo is wider
     than its pane — neither of these is, so changing it does nothing at all.
     For sideways framing use `shiftRight` in scripts/prepare-assets.mjs.

     Preview with `npm run dev` at http://localhost:4173/tools/focus.html
     --------------------------------------------------------------------- */
  --hero-focus: 50% 15%;
  --detail-focus: 50% 45%;

  /* Rhythm */
  --pad-block: clamp(22px, min(3.4vw, 4.4vh), 56px);
  --pad-inline: clamp(26px, 3.6vw, 64px);
  --gap-sections: clamp(12px, 1.6vh, 28px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--cream);
}

body {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ink);
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease;
}

a:hover {
  color: var(--denim);
}

a:focus-visible {
  outline: 2px solid var(--denim);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- shell -- */

.shell {
  display: flex;
  flex-direction: row;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--cream);
}

.pane--content {
  display: flex;
  flex: 1 1 58%;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap-sections);
  padding: var(--pad-block) var(--pad-inline);
}

.pane--imagery {
  display: flex;
  flex: 1 1 42%;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--stone);
}

/* ------------------------------------------------------------ masthead -- */

.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

/* The supplied wordmark PNG carries transparent margin — 17.76% of its width on
   the left. The negative margin cancels that so the mark sits a real --brand-gap
   away from the "L", instead of a gap plus 39px of nothing. */
.masthead__brand {
  --logo-w: 222px;
  --logo-h: 60px;
  --brand-gap: 15px;

  display: flex;
  align-items: center;
  min-width: 0;
}

.masthead__mark {
  display: block;
  height: calc(var(--logo-h) * 0.44);
  width: auto;
  flex: none;
}

.masthead__logo {
  display: block;
  height: var(--logo-h);
  width: var(--logo-w);
  margin-left: calc(var(--brand-gap) - var(--logo-w) * 0.1776);
  flex: none;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-top: 4px;
  color: var(--warm-grey);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.eyebrow__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--denim);
}

/* Trade-show notice — a horizontal strip tucked directly under the wordmark,
   grouped with the masthead so space-between keeps the two together. */
.masthead-group {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 26px);
}

.tradeshow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: 4px;
  align-self: flex-start;
  margin: 0;
  padding: clamp(9px, 1.2vh, 14px) clamp(14px, 1.4vw, 22px);
  border: 1px solid rgba(59, 92, 130, 0.3);
  background: rgba(59, 92, 130, 0.06);
  color: var(--ink);
  transition: background-color 140ms ease, border-color 140ms ease;
}

.tradeshow:hover {
  color: var(--ink);
  border-color: var(--denim);
  background: rgba(59, 92, 130, 0.12);
}

.tradeshow__go {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: var(--denim);
  font-size: clamp(9px, 0.72vw, 10px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tradeshow__go svg {
  width: 9px;
  height: 9px;
  transition: transform 140ms ease;
}

.tradeshow:hover .tradeshow__go svg {
  transform: translate(1.5px, -1.5px);
}

.tradeshow__show {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--denim);
  font-size: clamp(9px, 0.72vw, 10px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tradeshow__pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--denim);
  flex: none;
}

.tradeshow__booth {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, min(1.35vw, 2.4vh), 21px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  white-space: nowrap;
}

.tradeshow__where {
  color: var(--ink-60);
  font-size: clamp(10px, 0.78vw, 12.5px);
  line-height: 1.3;
}

/* ----------------------------------------------------------- statement -- */

/* 30ch in the handoff, widened to fit "manufacturer" — at the display size that
   single word is wider than the original measure. */
.statement {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 20px);
  max-width: 42ch;
}

.statement__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-title);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.statement__body {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-60);
  font-size: var(--size-body);
  line-height: 1.5;
  text-wrap: pretty;
}

/* -------------------------------------------------------- capabilities -- */

.capabilities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 24px);
  margin: 0;
  padding: clamp(12px, 1.4vh, 20px) 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.capability {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.capability__index {
  color: var(--light-grey);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.capability__name {
  font-size: var(--size-capability);
  font-weight: 600;
  line-height: 1.3;
}

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

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 40px);
  padding-top: clamp(13px, 1.7vh, 24px);
  border-top: 1px solid var(--rule);
}

.contact__meta {
  display: flex;
  gap: clamp(20px, 2.4vw, 48px);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact > .field:first-child {
  gap: 8px;
}

.field__label {
  color: var(--light-grey);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.field__value {
  font-size: var(--size-value);
  line-height: 1.5;
}

.field__email {
  align-self: flex-start;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--rule-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-email);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.field__email:hover {
  border-bottom-color: var(--denim);
}

/* ------------------------------------------------------------- imagery -- */

.frame {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.frame--hero {
  flex: 1 1 58%;
}

.frame--detail {
  flex: 1 1 42%;
  border-top: 1px solid var(--rule-image);
}

.frame picture img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Framing is set by --hero-focus / --detail-focus at the top of this file. */
.frame--hero picture img {
  object-position: var(--hero-focus);
}

.frame--detail picture img {
  object-position: var(--detail-focus);
}

.frame__mark {
  position: absolute;
  inset: auto auto clamp(16px, 2vw, 30px) clamp(18px, 2.2vw, 36px);
  width: auto;
  height: clamp(15px, 1.4vw, 20px);
  opacity: 0.92;
}

/* Very short desktop windows. The single-viewport design has no slack left once
   the trade-show strip is in, so tighten the masthead block rather than let the
   contact row clip against the bottom edge. */
/* Narrow desktop windows: drop the word and keep the arrow, so the strip stays
   on one line instead of wrapping and stealing height from the contact row.
   The link still reads fine — its accessible name comes from the booth text. */
@media (min-width: 861px) and (max-width: 1120px) {
  .tradeshow__go-label {
    display: none;
  }
}

@media (min-width: 861px) and (max-height: 620px) {
  .masthead-group {
    gap: 10px;
  }

  .masthead__brand {
    --logo-w: 178px;
    --logo-h: 48px;
  }

  .tradeshow {
    padding: 6px clamp(12px, 1.2vw, 18px);
  }
}

@media (min-width: 861px) and (max-height: 560px) {
  .masthead-group {
    gap: 8px;
  }

  .masthead__brand {
    --logo-w: 156px;
    --logo-h: 42px;
  }

  .tradeshow {
    padding: 5px 10px;
  }
}

/* Safety net. The handoff's floor is ~540px tall; below that the single-viewport
   layout genuinely cannot hold the content, and clipping the contact details
   would be worse than scrolling. */
@media (max-height: 530px) {
  body {
    overflow: auto;
  }

  .shell {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }
}

/* --------------------------------------------------------------------------
   Mobile fallback. The design is desktop-only; below this width the two
   columns stack and the page is allowed to scroll.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  body {
    overflow: auto;
  }

  .shell {
    flex-direction: column;
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .pane--content {
    flex: 0 0 auto;
    gap: clamp(26px, 5vh, 44px);
    padding: clamp(26px, 6vw, 48px) clamp(22px, 6vw, 48px);
  }

  .pane--imagery {
    flex: 0 0 auto;
    flex-direction: row;
    height: clamp(240px, 46vw, 420px);
  }

  .frame--hero,
  .frame--detail {
    flex: 1 1 50%;
  }

  .frame--detail {
    border-top: 0;
    border-left: 1px solid var(--rule-image);
  }

  :root {
    --size-title: clamp(32px, 8.4vw, 56px);
    --size-email: clamp(20px, 5vw, 30px);
    --size-body: clamp(14px, 3.6vw, 17px);
    --size-capability: clamp(13px, 3.2vw, 15px);
    --size-value: clamp(13px, 3.2vw, 15px);
  }

  .statement {
    max-width: none;
  }

  .capabilities {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 4vw, 24px);
    padding-top: clamp(18px, 3vh, 24px);
  }

  .contact {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(20px, 4vh, 32px);
  }

  .contact__meta {
    flex-direction: column;
    gap: clamp(16px, 3vh, 24px);
  }
}

@media (max-width: 620px) {
  .masthead {
    flex-direction: column;
    gap: 14px;
  }

  /* Too little width for one strip — stack the three parts instead of letting
     them wrap into ragged baseline-aligned rows. */
  .tradeshow {
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    row-gap: 5px;
  }

  .tradeshow__where {
    font-size: 13.5px;
  }
}

@media (max-width: 420px) {
  .masthead__brand {
    --logo-w: 170px;
    --logo-h: 46px;
    --brand-gap: 12px;
  }
}