/* ==========================================================================
   Offcourse — offcourse.studio
   Design canvas: 1920 px wide. 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;

  /* 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, project title  */
  --fs-body:  clamp(15px,   1.354vw, 26px);   /* project description         */
  --fs-intro: clamp(24px,   3.125vw, 60px);   /* studio intro                */
  --fs-tag:   clamp(11px,   1.031vw, 19.8px); /* project tags                */
  --fs-cta:   clamp(26px,   2.667vw, 51.2px); /* footer call to action       */

  /* horizontal gutters — the canvas stops growing past 1920 px */
  --maxw:        1920px;
  --gutter:      clamp(20px, 4.479vw, 86px);  /* masthead, intro, footer     */
  --gutter-proj: clamp(20px, 1.25vw,  24px);  /* full-bleed project rows     */
  --pad:      max(var(--gutter),      calc((100% - var(--maxw)) / 2 + var(--gutter)));
  --pad-proj: max(var(--gutter-proj), calc((100% - var(--maxw)) / 2 + var(--gutter-proj)));

  /* Showcase geometry. Everything in the two device mockups is derived from
     --dev-u, the MacBook's display width: 1078 px on the 1920 px canvas, i.e.
     the design's embed width less 25%, with the recovered space spent on the
     device bodies. --phone-u is the iPhone's display width. */
  --dev-u:   min(56.15vw, 1078px, 111.8vh);
  --phone-u: calc(var(--dev-u) * .3313);
  --row-h:   calc(var(--dev-u) * .7333);   /* the taller of the two devices */
  --dev-gap: calc(var(--dev-u) * .055);
  --showcase-h: 160vh;   /* JS refines this from the embedded page height */
}

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

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

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

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  { margin: 0; }
a  { color: inherit; text-decoration: none; }

: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: baseline;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 60px);
  padding: clamp(24px, 3.255vw, 62.5px) var(--pad) 0;
}

.masthead__logo { flex: none; position: relative; top: min(2px, 0.104vw); }
.masthead__logo img {
  width: clamp(120px, 10.104vw, 194px);
  height: auto;
}

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

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

.navlink__underline {
  position: absolute;
  left: 0;
  top: calc(100% + .2em);
  width: 100%;
  height: .145em;
  overflow: visible;
}

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

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

.intro {
  padding: 0 var(--pad);
  margin-top: clamp(46px, 5.807vw, 111.5px);
  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 1748 px measure */

/* the design opens a little extra air after the first line */
.intro p + p { margin-top: .208em; }

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

.work__head {
  display: flex;
  align-items: flex-end;
  gap: clamp(16px, 2.86vw, 55px);
  padding: 0 var(--pad);
  margin-top: clamp(24px, 1.719vw, 33px);
}

.work__head .label { flex: none; }

.divider {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: clamp(26px, 4.77vw, 92px);
  font-size: var(--fs-ui);
  margin-bottom: .56em;
  overflow: visible;
  color: var(--ink);
}

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

.showcase {
  position: relative;
  height: var(--showcase-h);
  margin-top: clamp(32px, 3.75vw, 72px);
}

.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 {
  position: absolute;
  inset: 0 auto auto 0;
  border: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
}
.screen__mover iframe.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; }

/* --------------------------------------------------------------- project meta */

/* title left, tag cloud right, description underneath */
.project__meta {
  padding: 0 var(--pad-proj);
  margin-top: clamp(40px, 4.167vw, 80px);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: clamp(16px, 2vw, 40px);
}
.project__title { grid-column: 1; grid-row: 1; align-self: center; }
.tags           { grid-column: 2; grid-row: 1; justify-self: end; }
.project__desc  { grid-column: 1 / -1; grid-row: 2; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 1.09vw, 21px);
}

.tag {
  --blob: var(--black);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.207em;              /* 43.7 / 19.8 */
  padding: 0 .7em;
  font-size: var(--fs-tag);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

.tag > span, .cta > span { position: relative; z-index: 1; }

.blob {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  fill: var(--blob);
  overflow: visible;
}

/* no-JS / pre-paint fallback: a plain pill in the same ink */
html:not(.js) .tag,
.tag:not(.has-blob) { background: var(--blob); border-radius: 999px; }
html:not(.js) .cta,
.cta:not(.has-blob) { background: var(--blob); border-radius: 999px; }

.project__desc {
  margin-top: clamp(8px, .703vw, 13.5px);
  max-width: min(61%, 45em);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.2;
  color: var(--black);
}

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

.footer {
  padding: 0 var(--pad) clamp(40px, 4.56vw, 88px);
  margin-top: clamp(28px, 2.865vw, 55px);
}

.footer__art {
  position: relative;
  width: min(100%, 1288px);
  margin: 0 auto;
  color: var(--ink);
}

.squiggle {
  width: 100%;
  height: auto;
  overflow: visible;
}

.squiggle__dash { stroke-dasharray: 8 8; }

.squiggle [stroke] { stroke-width: clamp(1.2px, .104vw, 2px); }
.squiggle__dash    { stroke-dasharray: clamp(4px, .42vw, 8px) clamp(4px, .42vw, 8px); }

.footer__logo {
  position: absolute;
  left: 40.61%;
  top: 46.65%;
  width: 28.84%;
  height: auto;
}

.cta {
  --blob: var(--ink);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin: clamp(44px, 5.1vw, 98px) auto 0;
  height: 1.947em;              /* 99.7 / 51.2 */
  padding: 0 .54em;
  font-size: var(--fs-cta);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}

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

/* medium screens — the desktop capture is still legible enough beside the phone */
@media (max-width: 1100px) {
  .project__desc { max-width: 78%; }
}

/* Below this the 1440 px desktop capture stops being readable, so the phone
   frame takes the whole row. Type keeps the clamps above — their floors are
   picked so nothing jumps across this breakpoint. */
@media (max-width: 900px) {
  :root {
    --phone-u: min(89.9vw, 38.85vh, 420px);
    --row-h:   calc(var(--phone-u) * 2.2132);
  }

  .masthead {
    flex-wrap: wrap;
    row-gap: clamp(12px, 2.4vw, 20px);
    align-items: center;
  }
  .masthead__logo      { order: 1; top: 0; }
  .masthead__nav       { order: 2; gap: clamp(18px, 4.4vw, 40px); margin-left: auto; }
  .masthead__strapline { order: 3; flex: 1 0 100%; white-space: normal; }

  .device--laptop { display: none; }

  .project__meta {
    grid-template-columns: 1fr;
    row-gap: clamp(10px, 2.6vw, 16px);
  }
  .project__title { grid-column: 1; grid-row: 1; }
  .tags           { grid-column: 1; grid-row: 2; justify-self: start; }
  .project__desc  { grid-column: 1; grid-row: 3; max-width: 100%; margin-top: 0; }

  .footer__art { width: 100%; }
}

@media (max-width: 480px) {
  .masthead__nav { gap: 16px; }
  .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) {
  .screen__mover iframe,
  .screen__fallback { transition: none; }
  .showcase { height: var(--row-h) !important; }
  .showcase__stage { position: static; }
}