/* Understudy — styles
   Fonts (Adobe Fonts project jqg7lxw):
   gill-sans-nova 300 (body), gill-sans-nova 700 (wordmark), p22-underground 600 (menu + headings) */

:root {
  --ink: #000;
  --paper: #fff;
  --margin: 16px;
  --bar: 48px;           /* header strip height on phone/tablet */
  --nav-size: 13px;
  --mark-size: 16px;
  --head-size: 14px;
  --body-size: 14px;
  --body-lead: 17px;
  --contact-size: 13px;
  --contact-lead: 16px;
  --text-left: 32px;
  --text-right: 32px;
  --text-top: 100px;
  --col: none;
}

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

html { background: var(--paper); }

body {
  color: var(--ink);
  background: var(--paper);
  font-family: "gill-sans-nova", "Gill Sans", "Gill Sans MT", sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--bar);
  padding: 0 var(--margin);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--paper);
  color: var(--ink);
  transition: color .35s ease;
}

.nav-link {
  font-family: "p22-underground", "Gill Sans", sans-serif;
  font-weight: 600;
  font-size: var(--nav-size);
  line-height: 1;
}
.nav-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.wordmark {
  font-family: "gill-sans-nova", "Gill Sans", sans-serif;
  font-weight: 700;
  font-size: var(--mark-size);
  letter-spacing: -0.09em;
  line-height: 1;
  text-transform: uppercase;
  justify-self: center;
}

.contact { justify-self: end; position: relative; }

.contact-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  white-space: nowrap;
  text-align: right;
  font-family: "gill-sans-nova", "Gill Sans", sans-serif;
  font-weight: 300;
  font-size: var(--contact-size);
  line-height: var(--contact-lead);
  display: none;
}
.contact.open .contact-panel { display: block; }

/* ---------- Images: tablet held upright scrolls, one image after another ---------- */

.work img { display: block; width: 100%; height: auto; }
.work .repeat { display: none; }   /* stair repeat only appears in desktop spreads */

/* ---------- About ---------- */

.about { padding: var(--text-top) var(--text-right) 80px var(--text-left); }
.about-col { max-width: var(--col); }
.about h1, .about h2 {
  font-family: "p22-underground", "Gill Sans", sans-serif;
  font-weight: 600;
  font-size: var(--head-size);
  line-height: 1.2;
  margin-bottom: 1.6em;
}
.about p { font-size: var(--body-size); line-height: var(--body-lead); margin-bottom: var(--body-lead); }
.about .contact-block { margin-top: 90px; font-size: var(--contact-size); line-height: var(--contact-lead); }
.about .contact-block a, .about .contact-block span { display: block; width: fit-content; }
.about .contact-block a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Optional second column (e.g. Clients) — add later as <div class="about-col about-col--right"> */
.about-col--right { margin-top: 60px; }

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

@media (min-width: 600px) {
  :root {
    --margin: 30px;
    --bar: 69px;
    --nav-size: 17px;
    --mark-size: 21px;
    --head-size: 17px;
    --body-size: 16px;
    --body-lead: 19px;
    --contact-size: 16px;
    --contact-lead: 20px;
    --text-left: 100px;
    --text-right: 30px;
    --text-top: 150px;
    --col: 370px;
  }
}

@media (min-width: 1100px) {
  :root { --nav-size: 18px; --head-size: 18px; --text-left: 88px; --text-top: 184px; }
  .about { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; padding-left: var(--margin); padding-right: var(--margin); }
  .about-col { grid-column: 1 / span 4; padding-left: calc(var(--text-left) - var(--margin)); max-width: none; }
  .about-col--right { grid-column: 8 / span 3; margin-top: 0; }
}

/* ---------- Carousels (phone: single images; desktop: spreads) ---------- */

.slide { opacity: 0; pointer-events: none; }
html.animate .slide { transition: opacity .9s ease; }
/* before the script runs, show only the first image so nothing flashes */
html.home:not(.carousel) .work .spread:not(:first-child) { visibility: hidden; }
.slide.active { opacity: 1; pointer-events: auto; }
html.carousel, html.carousel body { overflow: hidden; height: 100%; }
html.carousel .work { cursor: pointer; }

/* Phone + tablet held upright: one image at a time, centred on the whole screen */
@media not all and (min-width: 900px) and (orientation: landscape) {
  html.carousel .site-header {
    position: fixed; top: 0; left: 0; right: 0;
    background: transparent;
  }
  html.carousel .work { position: fixed; inset: 0; }
  html.carousel .work .spread { display: contents; }
  html.carousel .work img {
    position: absolute;
    left: 0; top: 50%;
    width: 100%; height: auto;
    max-height: 100%;
    object-fit: contain;
    transform: translateY(-50%);
  }
  html.carousel .work .repeat { display: none; }
}

/* Desktop + tablet held sideways: spreads */
@media (min-width: 900px) and (orientation: landscape) {
  .home .site-header {
    position: fixed;
    left: 0; right: 0;
    background: transparent;
    height: auto;
    padding-top: 28px;
    padding-bottom: 20px;
  }
  .home .site-header.on-light { color: #fff; }
  .home .site-header.on-dark  { color: #000; }

  .work { position: fixed; inset: 0; }
  /* each spread fills the screen; if the full image is taller, scroll down to see the rest */
  .work .spread {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .work .spread::-webkit-scrollbar { display: none; }
  .work .spread.single { grid-template-columns: 1fr; }
  .work .spread img { width: 100%; height: auto; min-height: 100vh; min-height: 100svh; object-fit: cover; }
  .work .repeat { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .slide { transition: none; }
}