/* ==========================================================================
   Offcourse — offcourse.studio
   Design canvas: 1920 px wide (desktop), 800 px wide (mobile, i.e. 2x).
   Fluid values below are expressed as <design px> / 1920 * 100vw, clamped
   so nothing collapses on small screens.
   ========================================================================== */

:root {
  /* palette (sampled from the design file) */
  --paper:   #f9f9f4;
  --ink:     #1d1d1b;
  --black:   #000000;
  --white:   #ffffff;
  --grey:    #333333;   /* footer, tags, call to action */
  --cream:   #f8f8f3;   /* type on the footer */
  --red:     #eb4646;   /* the founders' names */

  /* type */
  --sans:  "aktiv-grotesk", Arial, Helvetica, sans-serif;
  --serif: "redaction-10", "Times New Roman", Times, serif;

  /* fluid type scale — design size at 1920 px */
  --fs-ui:    clamp(13px,   1.354vw, 26px);   /* nav, labels                 */
  --fs-body:  clamp(14px,   1.354vw, 26px);   /* project copy, facts, footer */
  --fs-title: clamp(16px,   1.719vw, 33px);   /* project titles              */
  --fs-intro: clamp(18px,   3.125vw, 60px);   /* studio intro                */
  --fs-tag:   clamp(11px,   1.25vw,  24px);   /* project tags                */
  --fs-tagl:  clamp(11px,   1.042vw, 20px);   /* the "TAGS:" label           */
  --fs-cta:   clamp(17px,   2.344vw, 45px);   /* call to action              */

  /* horizontal gutter — the canvas stops growing past 1920 px */
  --maxw:   1920px;
  --gutter: clamp(20px, 3.646vw, 70px);
  --pad:    max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));

  /* "Selected work" divider: the drawn width of its squiggle (the part of
     the SVG right of x = 736, of 1449.8 x 93.6 units). The whole SVG is
     scaled from it, so the drawing is never stretched. */
  --sq-w: min(36.93vw, 709px);

  /* Showcase geometry. Everything in the two device mockups is derived from
     --dev-u, the MacBook's display width: 1216 px on the 1920 px canvas.
     The iPhone is sized so both devices stand exactly as tall. */
  --dev-u:   min(63.33vw, 1216px, 125vh);
  --phone-u: calc(var(--dev-u) * .31154);  /* .6895 / 2.2132 */
  --row-h:   calc(var(--dev-u) * .6895);   /* lid + base = phone body */
  --dev-gap: calc(var(--dev-u) * .0493);
  --showcase-h: 160vh;   /* JS refines this from the embedded page height */

  /* vertical rhythm, 1920 px design */
  --gap-title: clamp(24px, 2.71vw, 52px);  /* picture → project title */
}

/* --------------------------------------------------------------------- reset */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
p, dl, dd, address { margin: 0; }
address { font-style: normal; }
a  { color: inherit; text-decoration: none; }

/* no lone word on the last line of a paragraph */
p, dd, address, .project__title { text-wrap: pretty; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; font-size: 14px; letter-spacing: .02em;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------- shared type */

.label {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-ui);
  line-height: 1;
  text-transform: uppercase;
}

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

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 60px);
  padding: clamp(24px, 3.44vw, 66px) var(--pad) 0;
}

.masthead__logo { flex: none; }
.masthead__logo img {
  width: clamp(110px, 12.9vw, 248px);
  height: auto;
}

.strapline__text,
.navlink {
  font-weight: 500;
  font-size: var(--fs-ui);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

/* the arrows only frame the strapline on phones */
.strapline__arrow { display: none; }

.masthead__nav {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 7.76vw, 149px);
}

.navlink { position: relative; display: inline-block; }

/* hand-drawn loop around the link, drawn in on hover. (.navlink--work is
   for the WORK link, left out of the nav for now.) */
.navlink__loop {
  position: absolute;
  max-width: none;
  height: auto;
  fill: currentColor;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .45s cubic-bezier(.5, 0, .2, 1);
}
/* each viewBox carries 4 units of margin, so the drawn loop isn't cut off */
.navlink--work    .navlink__loop { width: 5.969em; left: -2.004em; top: -.774em; }
.navlink--contact .navlink__loop { width: 8.496em; left: -.574em;  top: -.814em; }

@media (hover: hover) and (min-width: 901px) {
  .navlink:hover .navlink__loop,
  .navlink:focus-visible .navlink__loop { clip-path: inset(0 0 0 0); }
}

/* --------------------------------------------------------------------- intro */

.intro {
  padding: 0 var(--pad);
  margin-top: clamp(40px, 5.6vw, 108px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-intro);
  line-height: 1.2;
}

.intro p { max-width: 29.2em; }           /* the design's 1752 px measure */
.intro p + p { margin-top: .97em; }

.name { color: var(--red); white-space: nowrap; }
.name-keep { white-space: nowrap; }

/* ---------------------------------------------------------------------- work */

.work__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.875vw, 36px);
  padding: 0 calc(var(--pad) + clamp(0px, 4.69vw, 90px)) 0 var(--pad);
  margin-top: clamp(40px, 5.4vw, 104px);
}

.work__head .label { flex: none; line-height: 1.2; }

.divider {
  flex: 0 1 calc(var(--sq-w) * 1449.8 / 713.8);   /* never wider than the art */
  min-width: var(--sq-w);       /* the squiggle always fits whole */
  margin-left: auto;
  position: relative;
  height: calc(var(--sq-w) * 2 / 713.8);           /* the SVG's 2-unit line */
  overflow-x: clip;             /* trims the line's left end; the squiggle may overhang */
}

.divider__art {
  position: absolute;
  right: 0;
  top: calc(var(--sq-w) * -40.5 / 713.8);          /* line sits at y 40.5–42.5 */
  width: calc(var(--sq-w) * 1449.8 / 713.8);
  max-width: none;
  height: auto;
}

/* ------------------------------------------------------------------ showcase */

.showcase {
  position: relative;
  height: var(--showcase-h);
  margin-top: clamp(40px, 5.7vw, 110px);
}

.showcase__stage {
  position: sticky;
  top: max(2vh, calc((100vh - var(--row-h)) / 2));
  height: var(--row-h);
  display: flex;
  align-items: flex-end;        /* both devices stand on the same floor */
  justify-content: center;
  gap: var(--dev-gap);
}

/* --- the glass itself ---------------------------------------------------- */

.screen {
  position: relative;
  overflow: hidden;
  background: #fff;
  contain: paint;
}

/* the part of the glass the site actually gets — the phone's status bar
   takes a bite out of the top, exactly as iOS does */
.screen__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.screen--mobile .screen__viewport { top: var(--statusbar-h); }

.screen--desktop {
  width: var(--u);
  height: calc(var(--u) * .625);          /* 16:10 */
  border-radius: calc(var(--u) * .004);
}

.screen--mobile {
  width: var(--u);
  height: calc(var(--u) * 2.168);         /* 1179 x 2556 */
  border-radius: calc(var(--u) * .1499);
}

/* --- MacBook ------------------------------------------------------------- */

.device--laptop {
  --u: var(--dev-u);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.laptop__lid {
  position: relative;
  padding: calc(var(--u) * .0125) calc(var(--u) * .0125) calc(var(--u) * .03);
  background: var(--ink);
  border-radius: calc(var(--u) * .018);
}

.laptop__notch {
  position: absolute;
  z-index: 1;
  top: calc(var(--u) * .0125);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--u) * .105);
  height: calc(var(--u) * .0135);
  background: var(--ink);
  border-radius: 0 0 calc(var(--u) * .007) calc(var(--u) * .007);
}

.laptop__base {
  position: relative;
  display: block;
  width: calc(var(--u) * 1.09);
  height: calc(var(--u) * .022);
  background: var(--ink);
  border-radius: 0 0 calc(var(--u) * .01) calc(var(--u) * .01);
  box-shadow: inset 0 1px 0 rgba(249, 249, 244, .22);   /* the hinge seam */
}

/* the scoop you open the lid with */
.laptop__base::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--u) * .085);
  height: calc(var(--u) * .0085);
  background: var(--paper);
  border-radius: 0 0 calc(var(--u) * .05) calc(var(--u) * .05);
}

/* --- iPhone -------------------------------------------------------------- */

.device--phone {
  --u: var(--phone-u);
  --statusbar-h: calc(var(--u) * .15);
  --phone-chrome: #cecece;   /* matches tnp.live's header, so the bar blends */
}

.phone__body {
  position: relative;
  padding: calc(var(--u) * .0226);
  background: var(--ink);
  border-radius: calc(var(--u) * .1725);
}

.phone__island {
  position: absolute;
  z-index: 1;
  top: calc(var(--u) * .0506);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--u) * .318);
  height: calc(var(--u) * .094);
  background: var(--ink);
  border-radius: 999px;
}

/* iOS status bar: local time, the island, a full signal + battery */
.phone__status {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: var(--statusbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--u) * .075) 0 calc(var(--u) * .09);
  background: var(--phone-chrome);
  color: var(--ink);
}

.phone__time {
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  font-weight: 600;
  font-size: calc(var(--u) * .047);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.phone__signal { width: calc(var(--u) * .127); height: auto; }

/* power on the right, volume on the left */
.phone__body::before,
.phone__body::after {
  content: "";
  position: absolute;
  width: calc(var(--u) * .011);
  background: var(--ink);
  border-radius: calc(var(--u) * .006);
}
.phone__body::before { right: calc(var(--u) * -.009); top: calc(var(--u) * .46); height: calc(var(--u) * .2); }
.phone__body::after  { left:  calc(var(--u) * -.009); top: calc(var(--u) * .36); height: calc(var(--u) * .13); }

.screen__mover {
  position: absolute;
  inset: 0 auto auto 0;
  transform-origin: 0 0;
  will-change: transform;
}

.screen__mover iframe,
.screen__mover img {
  position: absolute;
  inset: 0 auto auto 0;
  border: 0;
  display: block;
  max-width: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
}
.screen__mover .is-ready { opacity: 1; }

/* shown until (or unless) the live site paints */
.screen__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--fs-tag);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9a9a95;
  background: #fff;
  pointer-events: none;
}
.screen.is-loaded .screen__fallback { opacity: 0; transition: opacity .45s ease; }

.showcase__link { position: absolute; inset: 0; z-index: 2; }

/* ------------------------------------------------------------------- gallery */

.gallery { margin: 0 var(--pad); }

.gallery__wide {
  width: 100%;
  height: auto;
}

.gallery__slides { display: none; }

/* --------------------------------------------------------------- project body */

/* title + copy on the left, the facts in a column on the right, tags under */
.project + .project { margin-top: clamp(56px, 4.48vw, 86px); }

.project__body {
  padding: 0 var(--pad);
  margin-top: var(--gap-title);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24%;
  column-gap: clamp(24px, 4vw, 77px);
  align-items: start;
}

.project__title {
  grid-column: 1 / -1;
  margin: 0;
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}

.project__desc {
  grid-column: 1;
  margin-top: clamp(10px, .8em, 21px);
  max-width: 49.6em;
  font-size: var(--fs-body);
  line-height: 1.2;
  color: var(--black);
}
.project__desc p + p { margin-top: .4em; }

.facts {
  grid-column: 2;
  margin-top: clamp(10px, .8em, 21px);
  display: flex;
  flex-direction: column;
  gap: 1.62em;
  font-size: var(--fs-body);
  line-height: .925;
  color: var(--black);
}
.facts dt { font-weight: 500; text-transform: uppercase; }
.facts dd { font-weight: 400; margin-top: .3em; }
.facts a  { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.facts a:hover { text-decoration-thickness: 2px; }

.tagrow {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 27px);
  margin-top: clamp(18px, 1.67vw, 32px);
}

.tagrow__label {
  flex: none;
  font-size: var(--fs-tagl);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--black);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 2.08vw, 40px);
}

/* Tags and the call to action sit on "Offcourse Button-1…5.svg", which only
   differ in length (7 down to 3 blobs). Each tag names the shortest one its
   label fits in; the box keeps that shape's proportions unless the text runs
   longer (e.g. in a fallback font), in which case the shape stretches. */
.tag {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.05em;
  min-width: calc(2.05em * var(--shape-ratio, 4.37));
  padding: 0 .4em;
  background: url("assets/Offcourse%20Button-2.svg") center / 100% 100% no-repeat;
  font-size: var(--fs-tag);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

/* width : height of each shape, from its viewBox (height 43.7423) */
.tag--1 { --shape-ratio: 5.0411; background-image: url("assets/Offcourse%20Button-1.svg"); }
.tag--2 { --shape-ratio: 4.3690; background-image: url("assets/Offcourse%20Button-2.svg"); }
.tag--3 { --shape-ratio: 3.6968; background-image: url("assets/Offcourse%20Button-3.svg"); }
.tag--4 { --shape-ratio: 3.0247; background-image: url("assets/Offcourse%20Button-4.svg"); }
.tag--5 { --shape-ratio: 2.3525; background-image: url("assets/Offcourse%20Button-5.svg"); }

/* ----------------------------------------------------------- call to action */

.cta-wrap {
  display: flex;
  justify-content: center;
  padding: clamp(36px, 2.92vw, 56px) var(--pad) clamp(48px, 6.1vw, 117px);
}

.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.2em;
  min-width: calc(2.2em * 4.369);   /* Button-2's proportions */
  padding: 0 .6em;
  background: url("assets/Offcourse%20Button-2.svg") center / 100% 100% no-repeat;
  font-size: var(--fs-cta);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

/* -------------------------------------------------------------------- footer */

.footer {
  background: var(--grey);
  color: var(--cream);
  padding: clamp(32px, 3.07vw, 59px) var(--pad) clamp(40px, 4vw, 77px);
  display: grid;
  grid-template-columns: 21.97% 28.31% 21.57% 1fr;
  grid-template-rows: auto auto;
  font-size: var(--fs-body);
  line-height: 1.2;
}

.footer__logo {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: clamp(110px, 12.9vw, 248px);   /* same size as the masthead logo */
  height: auto;
  margin-top: clamp(14px, 1.51vw, 29px); /* level with the column headings */
}

.footer__col { margin-top: clamp(14px, 1.51vw, 29px); }
.footer__who     { grid-column: 2; grid-row: 1; }
.footer__what    { grid-column: 3; grid-row: 1; }
.footer__contact { grid-column: 4; grid-row: 1; }

.footer__head {
  margin: 0 0 1.2em;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  text-transform: uppercase;
}

.footer a:hover { text-decoration: underline; text-underline-offset: .12em; }

.footer__copy {
  grid-column: 2 / -1;
  grid-row: 2;
  margin-top: 2.2em;
  font-weight: 500;
  text-transform: uppercase;
}

/* ================================================================ responsive */

@media (max-width: 1100px) {
  .project__body { grid-template-columns: minmax(0, 1fr) 30%; }
}

/* Below this the 1440 px desktop capture stops being readable, so the phone
   frame takes the whole row, and the layout follows the mobile design
   (an 800 px canvas, i.e. 2x a 400 px phone). */
@media (max-width: 900px) {
  :root {
    --gutter:  6vw;
    --phone-u: min(69.4vw, 40vh, 420px);
    --row-h:   calc(var(--phone-u) * 2.2132);
    --fs-intro: clamp(17px, 4.375vw, 28px);
    --fs-cta:   clamp(17px, 4.375vw, 28px);
    --fs-body:  clamp(13px, 2.75vw, 18px);
    --fs-title: clamp(15px, 3.25vw, 22px);
    --fs-ui:    clamp(13px, 3.25vw, 20px);
    --sq-w: 41.25vw;
    --gap-title: clamp(20px, 4vw, 36px);
  }

  .masthead {
    flex-wrap: wrap;
    padding-top: 7.5vw;
  }
  .masthead__logo      { order: 1; }
  .masthead__logo img  { width: clamp(80px, 20.6vw, 150px); }
  .masthead__nav       { order: 2; gap: 7.25vw; }

  /* three stacked lines between two hand-drawn arrows */
  .strapline {
    order: 3;
    flex: 1 0 100%;
    position: relative;
    display: grid;
    place-items: center;
    height: 39.25vw;
    margin-top: 5.9vw;
  }
  .strapline__text { text-align: center; }
  .strapline__text > span { display: block; }
  .strapline__comma { display: none; }
  .strapline__arrow {
    display: block;
    position: absolute;
    width: 25.7vw;
    height: auto;
  }
  .strapline__arrow--left  { left: 1.6vw; top: 0; }
  .strapline__arrow--right { right: 2vw; bottom: 0; }

  .intro { margin-top: 4.4vw; }
  .intro p + p { margin-top: .75em; }

  .work__head  { margin-top: 9vw; padding-right: var(--pad); gap: 1.4vw; }

  .showcase { margin-top: 12vw; }
  .device--laptop { display: none; }

  .project__body { grid-template-columns: 1fr; }
  .project__desc { max-width: none; }
  .project__desc p + p { margin-top: .6em; }

  .facts {
    grid-column: 1;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: clamp(16px, 6vw, 48px);
    row-gap: 12px;
    margin-top: 1.4em;
    font-size: clamp(11px, 2.5vw, 16px);
    line-height: 1.2;
  }

  .tagrow { margin-top: 1.6em; align-items: center; gap: 2.5vw; }
  .tags   { gap: clamp(8px, 3vw, 20px); }
  :root   { --fs-tag: clamp(10px, 2.25vw, 15px); --fs-tagl: clamp(10px, 2.25vw, 15px); }

  /* the portrait photos instead of the composite, one at a time;
     main.js cross-fades them */
  .gallery__wide { display: none; }
  .gallery__slides { display: flex; }
  html.js .gallery__slides {
    position: relative;
    display: block;
    aspect-ratio: 1068 / 1500;
    max-width: 60vh;   /* keeps a portrait photo within one screen on tablets */
  }
  html.js .gallery__item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .9s ease;
  }
  html.js .gallery__item.is-active { opacity: 1; }
  html:not(.js) .gallery__slides { overflow-x: auto; }
  html:not(.js) .gallery__item { flex: 0 0 80%; height: auto; }

  .cta-wrap { padding-top: 12vw; padding-bottom: 11vw; }

  .footer {
    grid-template-columns: 1fr 1fr;
    padding-top: 5.7vw;
    padding-bottom: 6vw;
    font-size: clamp(11px, 2.75vw, 18px);
  }
  .footer__logo    { grid-column: 1; grid-row: 1; width: clamp(80px, 20.6vw, 150px); margin-top: 0; }
  .footer__col     { margin-top: 0; }
  .footer__who     { grid-column: 2; grid-row: 1; }
  .footer__what    { grid-column: 1; grid-row: 2; margin-top: 7vw; }
  .footer__contact { grid-column: 2; grid-row: 2; margin-top: 7vw; }
  .footer__head    { margin-bottom: 1em; }
  .footer__copy    { grid-column: 1 / -1; grid-row: 3; margin-top: 2.6em; }
}

@media (max-width: 480px) {
  .tags { gap: 8px; }
}

/* The scroll-scrubbed embed is motion the reader did not ask for: hold the
   frame still and let the section be exactly as tall as the frame. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .screen__mover iframe,
  .screen__mover img,
  .screen__fallback,
  .gallery__item,
  .navlink__loop { transition: none; }
  .showcase { height: var(--row-h) !important; }
  .showcase__stage { position: static; }
}