/* ===================================================== */
/* WORK PAGE STYLES                                      */
/* ----------------------------------------------------- */
/* Work-only styling and composition rules.              */
/* This file loads after css/styles.css and should only  */
/* hold rules that describe html/work.html specifically. */
/* ===================================================== */

/* ===================================================== */
/* WORK PAGE TOKENS                                      */
/* ----------------------------------------------------- */
/* Source values are authored at 1440 / 1200×776 canvas. */
/* They are kept here for reference — the live CSS uses  */
/* ratio-based calc() expressions (length × number)      */
/* rather than a scale token so the layout is valid in   */
/* every browser.                                        */
/*                                                       */
/* WHY NO --work-scale:                                  */
/* --book-frame-open-spread-scale is calc(px / px).      */
/* Chrome accepts this as a unitless number; Firefox      */
/* rejects it per the CSS spec (length/length is an      */
/* invalid calc type). The fallback in var() does NOT    */
/* fire because the custom property exists with a valid  */
/* token string — the type error only surfaces when the  */
/* value is substituted into a real property. Every      */
/* calc() that used --work-scale would silently fail in  */
/* Firefox, making absolutely-positioned elements fall   */
/* back to their initial values and breaking the layout. */
/* The fix: express every measurement as                 */
/* calc(--spread-max-width * ratio) [horizontal] or      */
/* calc(--spread-height * ratio) [vertical]. These are   */
/* length × number — always valid — and they track the   */
/* same responsive spread tokens the scale approach did. */
/* ===================================================== */

:root {
  /* ===================================================== */
  /* WORK INDEX TOKENS (1440 source reference)             */
  /* ===================================================== */

  /* "Work" label — unified with index Scene Three "Disciplines:" kicker.
     Box top 203px from page top = 4px below the book-frame text-box top. */
  --work-source-title-top: 203px;
  --work-source-title-optical-inset: 0px;

  /* "Film, identity..." statement — unified with index Scene Three statement.
     Box top 241px from page top = 42px below the text-box top. */
  --work-source-kicker-top: 241px;
  --work-source-kicker-offset-x: 0px;

  /* Gray field — panel top edge lands 120px below the text-box top (16px below
     Scene Three's accordion; 319px from page top); field box at 286.5px after
     its 32px padding + 0.5px border. */
  --work-source-field-top: 286.5px;
  --work-source-field-height: 480px;
  --work-source-field-radius: 10px;
  --work-source-field-bg: transparent;
  --work-source-field-border-color: #000000;
  --work-source-field-pad-top: 32px;
  --work-source-field-pad-x: 32px;
  --work-source-field-pad-bottom: 32px;

  /* Panels — 288×360 on 1440 canvas */
  --work-source-panel-width: 288px;
  --work-source-panel-height: 360px;

  /* Captions */
  --work-source-caption-title-gap: 11px;
  --work-source-caption-client-gap: 8px;
  --work-source-caption-size: 17px;

  /* Interaction */
  --work-card-hover-shift: -2px;
  --work-card-transition-duration: 220ms;
  --work-card-transition-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ===================================================== */
  /* WORK PAGE — BOOK FRAME ROUTER TOKENS                  */
  /* ===================================================== */
  --work-book-frame-open-spread-width: var(--book-frame-source-width);
  --work-book-frame-open-spread-height: var(--book-frame-source-height);
  --work-book-frame-page-stack-gap: 0px;
  --work-book-frame-single-page-width: min(
    var(--book-frame-single-page-source-width),
    calc(100vw - 32px),
    calc((var(--app-viewport-height) - var(--header-clearance) - (var(--book-frame-viewport-clearance, 16px) * 2)) * var(--book-frame-single-page-width-from-height-ratio, 0.7732))
  );
  --work-book-frame-single-page-height: calc(var(--work-book-frame-single-page-width) * var(--book-frame-single-page-ratio, 1.2933));
  --work-book-frame-single-page-gap: max(
    0px,
    calc(
      var(--app-viewport-height)
      - var(--header-clearance)
      - (var(--book-frame-viewport-clearance, 16px) * 2)
      - var(--work-book-frame-single-page-height)
    )
  );
  --work-book-frame-stacked-page-width: min(
    var(--book-frame-single-page-source-width),
    calc(100vw - 32px)
  );
  --work-book-frame-stacked-page-height: calc(var(--work-book-frame-stacked-page-width) * var(--book-frame-single-page-ratio, 1.2933));
  --work-book-frame-open-spread-scale: calc(var(--work-book-frame-open-spread-width) / var(--book-frame-source-width));
  --work-book-frame-single-page-scale: calc(var(--work-book-frame-single-page-width) / var(--book-frame-single-page-source-width));
  --work-book-frame-stacked-page-scale: calc(var(--work-book-frame-stacked-page-width) / var(--book-frame-single-page-source-width));
  --work-book-frame-layout-width: var(--work-book-frame-open-spread-width);
  --work-book-frame-layout-height: var(--work-book-frame-open-spread-height);
  --work-book-frame-layout-scale: var(--work-book-frame-open-spread-scale);
  --work-book-frame-layout-top: var(--header-clearance);

  /* ===================================================== */
  /* WORK PAGE — ACTIVE GEOMETRY TOKENS                    */
  /* Source measurements at 1440px:                        */
  /*   Stage: 1200 × 776px                                 */
  /*   Field outer inset: 80px each side                   */
  /*   Field: 1040 × 480px, top at 248px                   */
  /*   Field pad: 32px all sides                           */
  /*   Panel: 288 × 360px, radius 14px                     */
  /*   Caption: 17px, margin-top 11px, client gap 8px      */
  /* ===================================================== */

  --work-active-outer-inset:
    calc(var(--work-book-frame-layout-width) * 0.06667);

  /* Panel top edge lands 120px below the book-frame text-box top (16px lower than
     index Scene Three's accordion at 104px, per request). Field padding-top is
     0.04124 (=32px@1440) plus a 0.5px border, so the field box starts ~32.5px
     higher: 319px panel top - 32.5px = 286.5px / 776. Ratio scales the 16px move
     proportionally across breakpoints. */
  --work-active-field-top:
    calc(var(--work-book-frame-layout-height) * 0.36920);

  --work-active-field-height:
    calc(var(--work-book-frame-layout-height) * 0.61856);

  --work-active-field-pad-y:
    calc(var(--work-book-frame-layout-height) * 0.04124);

  --work-active-field-pad-x:
    calc(var(--work-book-frame-layout-width) * 0.02667);

  --work-active-field-radius:
    calc(var(--work-book-frame-layout-width) * 0.00833);

  --work-active-panel-width:
    calc(var(--work-book-frame-layout-width) * 0.24);

  --work-active-panel-height:
    calc(var(--work-book-frame-layout-height) * 0.46392);

  --work-active-panel-radius:
    calc(var(--work-book-frame-layout-width) * 0.01167);

  /* max() clamp: 0.01417 × single-page-width at portrait
     can be as small as 5px. Floor at 12px for readability.*/
  --work-active-caption-size:
    max(12px, calc(var(--work-book-frame-layout-width) * 0.01417));

  --work-active-caption-margin-top:
    calc(var(--work-book-frame-layout-height) * 0.01418);

  --work-active-caption-gap:
    calc(var(--work-book-frame-layout-height) * 0.01031);

  /* Card grid gap — matches horizontal breathing room between
     3 cards at source: (1040 - 3×288) / 2 gaps / 1200 = 0.07333 */
  --work-active-card-gap:
    calc(var(--work-book-frame-layout-width) * 0.07333);
}

/* ===================================================== */
/* WORK PAGE FOUNDATION                                  */
/* ===================================================== */

.work-page {
  min-height: max(900px, 100vh);
  padding-top: calc(var(--header-clearance) - 95px);
}

/* ===================================================== */
/* 1440 CANVAS STAGE                                     */
/* ===================================================== */

.work-spread {
  padding: 0;
}

.work-stage {
  position: relative;
  width: 100%;
  max-width: var(--work-book-frame-layout-width);
  height: auto;
  min-height: var(--work-book-frame-layout-height);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

/* "Work" — unified with index Scene Three "Disciplines:" kicker (the work
   page was the last section with its own one-off text styling). Written out
   directly here rather than linked to the index tokens:
     family  roboto-mono (--font-secondary)
     size    12px @1440  = layout-width * 0.01, floored at 11px
             (index kicker is canvas-width 1040 * 0.0115; work layout-width
              1200 * 0.01 resolves to the same 12px and tracks the book frame)
     weight  400   tracking 0.08em   line-height 1.25   uppercase
     color   rgba(17,17,17,0.6)
   Placement: box top lands 4px below the book-frame text-box top, matching
   the disciplines kicker (203px / 776 from the page/stage top). */
.work-title {
  position: absolute;
  left: var(--work-active-outer-inset);
  top: calc(var(--work-book-frame-layout-height) * 0.26160);
  margin: 0;
  font-family: var(--font-secondary);
  font-size: max(11px, calc(var(--work-book-frame-layout-width) * 0.01));
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
  transform: none;
}

/* "Film, identity, and commissioned work." — unified with index Scene Three
   statement ("This is how your expression takes form."). Written out directly
   rather than linked to the index tokens:
     family  berthold-baskerville (--font-primary)
     size    26px @1440 = layout-width * 0.0216667, floored at 15px
             (index statement is canvas-width 1040 * 0.025; the work form
              resolves to the same 26px and tracks the book frame)
     weight  700   line-height 1.2   color --color-text
   Placement: box top lands 42px below the book-frame text-box top, matching
   the disciplines statement (241px / 776 from the page/stage top). */
.work-kicker {
  position: absolute;
  left: var(--work-active-outer-inset);
  top: calc(var(--work-book-frame-layout-height) * 0.31057);
  margin: 0;
  width: auto;
  max-width: calc(100% - (var(--work-active-outer-inset) * 2));
  font-family: var(--font-primary);
  font-size: max(15px, calc(var(--work-book-frame-layout-width) * 0.0216667));
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

/* ===================================================== */
/* GRAY FIELD + CARD ROW                                 */
/* ===================================================== */

/* field-top:        248 / 776  = 0.31959  */
/* field-height:     480 / 776  = 0.61856  */
/* field-pad-top/bt:  32 / 776  = 0.04124  */
/* field-pad-x:       32 / 1200 = 0.02667  */
/* field-radius:      10 / 1200 = 0.00833  */
.work-field {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  margin-top: var(--work-active-field-top);
  margin-left: var(--work-active-outer-inset);
  margin-right: var(--work-active-outer-inset);
  height: auto;
  padding:
    var(--work-active-field-pad-y)
    var(--work-active-field-pad-x)
    var(--work-active-field-pad-y);
  background: var(--work-source-field-bg);
  /* ============================================================
     OUTER FIELD BORDER — TEMPORARILY HIDDEN (2026-06-27)
     This is the thin rounded rectangle that frames the three
     case-study cards. With only a few cards it reads as an empty
     / unfinished frame, so it is hidden for now. It is meant to
     return once the case-study count grows.
     The border box is kept (0.5px, transparent) so the card
     layout/spacing is unchanged — only the color is removed.
     TO RESTORE: swap `transparent` below back to the token, i.e.
       border: 0.5px solid var(--work-source-field-border-color);
     (The color token --work-source-field-border-color is left intact.) */
  border: 0.5px solid transparent;
  border-radius: var(--work-active-field-radius);
  box-sizing: border-box;
  margin-bottom: var(--work-active-field-pad-y);
}

.work-field__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--work-active-card-gap);
  align-items: start;
  height: auto;
}

/* ===================================================== */
/* PROJECT CARD                                          */
/* ===================================================== */

.work-project-card {
  display: block;
  min-width: 0;
  color: var(--color-text);
  text-decoration: none;
  transform: translateY(0);
  transition:
    color var(--work-card-transition-duration) var(--work-card-transition-ease),
    transform var(--work-card-transition-duration) var(--work-card-transition-ease);
}

.work-project-card:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 8px;
}

/* panel-width:         288 / 1200 = 0.24     */
/* panel-height:        360 / 776  = 0.46392  */
/* card-border-radius:   14 / 1200 = 0.01167  */
.work-project-card__figure {
  position: relative;
  margin: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 288 / 360;
  overflow: hidden;
  border-radius: var(--work-active-panel-radius);
  background: #e8e8e5;
}

.work-project-card--founding-framework .work-project-card__figure {
  background: #ffffff;
}

.work-project-card__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color var(--work-card-transition-duration) var(--work-card-transition-ease);
}

.work-project-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1);
  transition:
    filter var(--work-card-transition-duration) var(--work-card-transition-ease),
    transform var(--work-card-transition-duration) var(--work-card-transition-ease);
}

/* caption-title-gap (margin-top): 11 / 776  = 0.01418  */
/* caption-client-gap (gap):        8 / 776  = 0.01031  */
/* caption-size:                   17 / 1200 = 0.01417  */
.work-project-card__label {
  display: grid;
  gap: var(--work-active-caption-gap);
  margin-top: var(--work-active-caption-margin-top);
  font-family: var(--font-tertiary);
  font-size: var(--work-active-caption-size);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
}

.work-project-card__title,
.work-project-card__client {
  display: block;
  min-width: 0;
}

.work-project-card__client {
  color: rgba(17, 17, 17, 0.74);
}

.work-project-card:hover {
  transform: translateY(var(--work-card-hover-shift));
}

.work-project-card:hover .work-project-card__figure::after,
.work-project-card:focus-visible .work-project-card__figure::after {
  border-color: rgba(17, 17, 17, 0.5);
}

.work-project-card:hover .work-project-card__image,
.work-project-card:focus-visible .work-project-card__image {
  filter: contrast(1.04) saturate(0.94);
  transform: scale(1.012);
}


/* ===================================================== */
/* WORK PAGE RESPONSIVE STATES                           */
/* ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .work-project-card,
  .work-project-card__figure::after,
  .work-project-card__image {
    transition: none !important;
  }

  .work-project-card:hover {
    transform: none;
  }
}

/* ====================================================== */
/* SHORT-HEIGHT DESKTOP + NARROW DESKTOP                  */
/* ------------------------------------------------------ */
/* Sync the work Book Frame to the scaled spread.         */
/* ====================================================== */
@media (min-width: 1301px) and (max-height: 895px),
       (min-width: 1100px) and (max-width: 1300px) {
  :root {
    --work-book-frame-open-spread-width: var(--spread-max-width);
    --work-book-frame-open-spread-height: var(--spread-height);
  }
}

/* ====================================================== */
/* FITTED OPEN SPREAD: 768–1099px                         */
/* ------------------------------------------------------ */
/* Scale the Book Frame by width AND height so the work   */
/* canvas scales proportionally at tablet widths.         */
/* ====================================================== */
@media (min-width: 768px) and (max-width: 1099px) {
  :root {
    --work-book-frame-open-spread-width: min(
      var(--book-frame-source-width),
      calc(100vw - 48px),
      calc((var(--app-viewport-height) - var(--header-clearance) - var(--book-frame-viewport-clearance, 16px)) * var(--book-frame-width-from-height-ratio, 1.5464))
    );
    --work-book-frame-open-spread-height: calc(var(--work-book-frame-open-spread-width) * var(--book-frame-source-ratio, 0.6467));
  }
}

/* ====================================================== */
/* PHONE STACKED: max-width 767px                         */
/* ------------------------------------------------------ */
/* Book Frame switches to the single-page ruler. Panels   */
/* stack vertically; field grows with content.            */
/* ====================================================== */
@media (max-width: 767px) {
  :root {
    --work-book-frame-stacked-page-width: min(
      var(--book-frame-single-page-source-width),
      calc(100vw - 48px),
      calc((var(--app-viewport-height) - var(--header-clearance) - (var(--book-frame-viewport-clearance, 16px) * 2)) * var(--book-frame-single-page-width-from-height-ratio, 0.7732))
    );
    --work-book-frame-stacked-page-height: calc(var(--work-book-frame-stacked-page-width) * var(--book-frame-single-page-ratio, 1.2933));
    --work-book-frame-page-stack-gap: 0px;
    --work-book-frame-layout-width: var(--work-book-frame-stacked-page-width);
    --work-book-frame-layout-height: var(--work-book-frame-stacked-page-height);
    --work-book-frame-layout-scale: var(--work-book-frame-stacked-page-scale);
    --work-book-frame-layout-top: calc(var(--header-clearance) + var(--book-frame-viewport-clearance, 16px));
  }

  /* Portrait / phone: panels stack vertically.
     The field grows to contain all three stacked
     panels. Stage becomes content-height.          */
  .work-stage {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: var(--work-book-frame-layout-height);
    padding-bottom: var(--work-active-field-pad-y);
  }

  /* Field switches from absolute to relative flow
     so it grows with the stacked panel content.   */
  .work-field {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    height: auto;
    margin-top: calc(var(--work-book-frame-layout-height) * 0.04639);
    margin-left: var(--work-active-outer-inset);
    margin-right: var(--work-active-outer-inset);
  }

  /* Cards single-column grid, auto height.        */
  .work-field__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--work-active-field-pad-y);
    align-items: start;
    height: auto;
  }

  .work-title {
    position: relative;
    left: auto;
    top: auto;
    margin-left: var(--work-active-outer-inset);
    margin-top: calc(var(--header-clearance) + var(--book-frame-viewport-clearance, 16px));
    margin-bottom: 0;
    transform: none;
  }

  .work-kicker {
    position: relative;
    left: auto;
    top: auto;
    margin-left: calc(var(--work-active-outer-inset) + calc(var(--work-book-frame-layout-width) * 0.01417));
    margin-top: calc(var(--work-book-frame-layout-height) * 0.01031);
    margin-bottom: 0;
    transform: none;
  }
}

/* ====================================================== */
/* PORTRAIT STACKING: 768–1300px portrait                 */
/* ------------------------------------------------------ */
/* Once the viewport leans portrait, switch the Book      */
/* Frame to the single-page ruler. Panels stack.          */
/* ====================================================== */
@media (min-width: 768px) and (max-width: 1300px) and (max-aspect-ratio: 6/5) {
  :root {
    --work-book-frame-page-stack-gap: var(--work-book-frame-single-page-gap);
    --work-book-frame-layout-width: var(--work-book-frame-single-page-width);
    --work-book-frame-layout-height: var(--work-book-frame-single-page-height);
    --work-book-frame-layout-scale: var(--work-book-frame-single-page-scale);
    --work-book-frame-layout-top: calc(var(--header-clearance) + var(--book-frame-viewport-clearance, 16px));
  }

  /* Portrait / phone: panels stack vertically.
     The field grows to contain all three stacked
     panels. Stage becomes content-height.          */
  .work-stage {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: var(--work-book-frame-layout-height);
    padding-bottom: var(--work-active-field-pad-y);
  }

  /* Field switches from absolute to relative flow
     so it grows with the stacked panel content.   */
  .work-field {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    height: auto;
    margin-top: calc(var(--work-book-frame-layout-height) * 0.04639);
    margin-left: var(--work-active-outer-inset);
    margin-right: var(--work-active-outer-inset);
  }

  /* Cards single-column grid, auto height.        */
  .work-field__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--work-active-field-pad-y);
    align-items: start;
    height: auto;
  }

  .work-title {
    position: relative;
    left: auto;
    top: auto;
    margin-left: var(--work-active-outer-inset);
    margin-top: calc(var(--header-clearance) + var(--book-frame-viewport-clearance, 16px));
    margin-bottom: 0;
    transform: none;
  }

  .work-kicker {
    position: relative;
    left: auto;
    top: auto;
    margin-left: calc(var(--work-active-outer-inset) + calc(var(--work-book-frame-layout-width) * 0.01417));
    margin-top: calc(var(--work-book-frame-layout-height) * 0.01031);
    margin-bottom: 0;
    transform: none;
  }
}