/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 14; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

/* ------------------------- Font ------------------------- */

@font-face {
  font-family: "Unica77";
  src: url("static/fonts/Unica77LLSub-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

/* ------------------------- Base ------------------------- */

/* Grid: 12 columns, 20px margin, 20px gutter (values in design px @1440, set in em so they scale) */
:root {
  --grid-margin: 1.4286em;  /* 20px */
  --grid-gutter: 1.4286em;  /* 20px */
  --color-ink: #000;
  --color-bg: #fff;
}

/* Dark mode — toggled by clicking the logo */
html.dark {
  --color-ink: #fff;
  --color-bg: #000;
}

/* The brand marks are black artwork — invert them in dark mode (photos untouched).
   The filter transitions in lockstep with the body background so the gif's opaque
   white canvas stays indistinguishable from the page mid-fade. */
.logo img,
.capabilities__icon {
  transition: filter 0.25s ease;
}

html.dark .logo img,
html.dark .capabilities__icon {
  filter: invert(1);
}

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

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

body {
  font-size: var(--size-font);
  font-family: "Unica77", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-synthesis-weight: none;
  line-height: 1.2857; /* 18px leading on 14px */
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.25s ease, color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  body,
  .logo img,
  .capabilities__icon {
    transition: none;
  }
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: inherit;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.0714em; /* 1px */
  text-underline-offset: 0.1786em;     /* 2.5px */
  transition: text-decoration-color 0.25s ease;
}

a:hover {
  text-decoration-color: transparent;
}

a:focus-visible {
  outline: 1px solid var(--color-ink);
  outline-offset: 2px;
  text-decoration-color: transparent;
}

/* Visually hidden, available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Underlined but not (yet) a link */
.underline {
  text-decoration: underline;
  text-decoration-thickness: 0.0714em; /* 1px */
  text-underline-offset: 0.1786em;     /* 2.5px */
}

::selection {
  background: var(--color-ink);
  color: var(--color-bg);
}

/* ------------------------- Layout ------------------------- */

.container {
  /* grid runs edge to edge at every width; only the font scaling caps at 1920 */
  width: 100%;
}

.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--grid-margin);
}

/* Every band is the same strict 12-column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
}

/* ------------------------- Header ------------------------- */

.logo {
  grid-column: 1 / span 3;
}

.logo__toggle {
  display: block;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  /* reliable single-tap on touch devices: no double-tap-zoom delay, no gray flash */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.logo__toggle:focus-visible {
  outline: 1px solid var(--color-ink);
  outline-offset: 4px;
}

.logo img {
  width: 11em; /* 154px */
  height: auto;
}

.site-nav {
  grid-column: 11 / -1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--grid-gutter);
}

.site-nav a,
.site-nav button {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.site-nav a:hover,
.site-nav button:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.0714em;
  text-underline-offset: 0.1786em;
}

.site-nav button:focus-visible {
  outline: 1px solid var(--color-ink);
  outline-offset: 2px;
}

/* ------------------------- Intro ------------------------- */

.intro {
  margin-top: 1.5em; /* 21px */
}

.intro__text {
  grid-column: 1 / span 6;
}

/* ------------------------- Capabilities ------------------------- */

.capabilities {
  margin-top: 1.2857em; /* 18px */
}

.capabilities__icon {
  grid-column: 1 / span 2;
  grid-row: 1;
  width: auto;
}

/* Animated gif: the canvas has large empty margins around the figures (~12% left,
   ~29% top, figures ~44% of the height) — size and offset so the FIGURES are 27px
   tall and sit on column 1 at the row top */
.capabilities__icon--motion {
  height: 4.386em;
  margin: -1.257em 0 0 -0.526em;
  /* the canvas is opaque white and pokes above the band — keep it behind the text */
  position: relative;
  z-index: -1;
}

/* Static fallback for users who prefer reduced motion */
.capabilities__icon--static {
  height: 1.9286em; /* 27px */
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .capabilities__icon--motion { display: none; }
  .capabilities__icon--static { display: block; }
}

.capabilities__list {
  grid-column: 3 / span 3;
}

/* ------------------------- Selected works ------------------------- */

/* Flexible band: the elastic spacer above the text row absorbs viewport-height
   differences; images keep their natural aspect ratio (height follows column width). */
.works {
  flex: 1 1 0;              /* exactly the leftover viewport space, not content-sized */
  min-height: min-content;  /* short viewports: grow the page and scroll instead of clipping */
  grid-template-rows:
    minmax(2.8571em, 1fr)     /* elastic gap above (40px min) soaks up extra height */
    auto                      /* text row */
    2.4643em                  /* fixed gap text -> images (34.5px) */
    auto;                     /* media row: images keep their natural aspect ratio */
}

.works__label {
  grid-row: 2;
  grid-column: 1 / span 2;
  font-size: inherit;
  font-weight: inherit;
}

/* Projects live directly on the works grid so images top-align in one row */
.work {
  display: contents;
}

.work__info {
  grid-row: 2;
}

.work__media {
  grid-row: 4;
}

.work__media img {
  width: 100%;
  height: auto;
}

.work--designhouse .work__info { grid-column: 3 / span 3; }
.work--designhouse .work__media { grid-column: 3 / span 2; }

.work--ahket .work__info { grid-column: 6 / span 3; }
.work--ahket .work__media { grid-column: 6 / span 2; }

.work--ago .work__info { grid-column: 9 / span 3; }
.work--ago .work__media { grid-column: 9 / -1; }

.work__title {
  font-size: inherit;
  font-weight: inherit;
}

.work__subtitle {
  /* single-weight font: slant the glyphs ourselves for exact, cross-browser
     control — adjust the angle here (more negative = more slant) */
  transform: skewX(-12deg);
  transform-origin: 0 50%; /* pivot mid-line so the left edge stays optically on the column */
}

/* ------------------------- Grid overlay (dev helper, press "G") ------------------------- */

.grid-overlay {
  position: fixed;
  inset: 0;
  padding-inline: var(--grid-margin);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  font-size: var(--size-font);
  pointer-events: none;
  z-index: 9999;
  visibility: hidden;
}

.grid-overlay span {
  background: rgba(255, 0, 0, 0.08);
}

body.show-grid .grid-overlay {
  visibility: visible;
}

/* ------------------------- Tablet ------------------------- */

@media screen and (max-width: 991px) {
  .site-nav {
    grid-column: 9 / -1;
  }

  .intro__text {
    grid-column: 1 / span 8;
  }

  /* Wider media frames so the portrait images don't become slivers */
  .work--designhouse .work__media { grid-column: 3 / span 3; }
  .work--ahket .work__media { grid-column: 6 / span 3; }
}

/* ------------------------- Mobile ------------------------- */

@media screen and (max-width: 767px) {
  .page {
    min-height: 100svh;
  }

  .logo {
    grid-column: 1 / span 6;
  }

  .site-nav {
    grid-column: 7 / -1;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }

  .intro__text {
    grid-column: 1 / -1;
  }

  .capabilities {
    margin-top: 2.5em;
  }

  .capabilities__icon {
    grid-column: 1 / -1;
  }

  .capabilities__list {
    grid-column: 1 / -1;
    margin-top: 1em;
  }

  /* Stack projects; the page scrolls on mobile */
  .works {
    display: block;
    margin-top: 4em;
  }

  .works__label {
    margin-bottom: 2em;
  }

  .work {
    display: block;
  }

  .work + .work {
    margin-top: 2.5em;
  }

  .work__media {
    margin-top: 1em;
  }

}