/* =========================================================================
   MXX — Home
   Five full-screen sections. On desktop the deck is a scroll container with
   mandatory snap, and one wheel gesture advances exactly one screen
   (deck.js does the stepping). On touch / narrow screens the deck is off and
   the sections are an ordinary document — natural, unhijacked scrolling.
   ========================================================================= */

.deck { position: relative; }

/* --- desktop deck mode (class set by deck.js, never by media query alone) - */
html.deck-on,
html.deck-on body { height: 100%; overflow: hidden; }

html.deck-on .deck {
  height: 100svh;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html.deck-on .deck::-webkit-scrollbar { width: 0; height: 0; }
html.deck-on .scr { height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; }

/* --- a screen ------------------------------------------------------------- */
.scr {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block: calc(var(--nav-h) + 1.5rem) clamp(3.5rem, 8vh, 6rem);
}
.scr > .wrap { width: 100%; }

/* the small number + label sitting at the top of each screen */
.scr__tag {
  position: absolute;
  top: calc(var(--nav-h) + 0.25rem);
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1rem;
}
@media (max-width: 760px) {
  /* static means it leaves the absolutely-positioned gutter behind and has
     to carry its own */
  .scr__tag {
    position: static;
    padding-inline: var(--gutter);
    margin-bottom: 2.5rem;
  }
}

/* =========================================================================
   01 — Index
   ========================================================================= */
.hero { color: var(--paper); }
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ink);
}
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
/* static scrim — painted once, never animated */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(12,12,14,0.55) 0%,
    rgba(12,12,14,0.26) 34%,
    rgba(12,12,14,0.52) 76%,
    rgba(12,12,14,0.85) 100%);
}
.hero > .wrap { position: relative; z-index: 2; }
.hero > .scr__tag { z-index: 2; }   /* stays absolute — only lift it */

.hero__name {
  /* a three-line sentence, not a two-word name — so a step down from the
     display scale, or it eats the whole screen */
  font-size: clamp(2.5rem, 9vw, 8.5rem);
  line-height: 0.86;
  letter-spacing: -0.05em;
  font-weight: 300;
}
.hero__sub {
  margin-top: clamp(1.25rem, 3vh, 2.25rem);
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.9vw, 1.6rem);
  line-height: 1.3;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}
.hero__foot {
  margin-top: clamp(2rem, 7vh, 4.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem clamp(1.5rem, 4vw, 3.5rem);
}
.hero .meta { color: color-mix(in srgb, var(--paper) 62%, transparent); }

/* =========================================================================
   02 — Statement
   ========================================================================= */
.statement__grid { align-items: center; row-gap: clamp(2rem, 5vh, 3.5rem); }
.statement__text { grid-column: 1 / span 7; }
.statement__aside { grid-column: 9 / span 4; }
@media (max-width: 860px) {
  .statement__text { grid-column: 1 / -1; }
  .statement__aside { grid-column: 1 / span 4; }
}
.statement__body {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}
.statement__body .serif { font-size: 1.06em; }
.statement__note { margin-top: clamp(1.5rem, 4vh, 2.75rem); max-width: 44ch; }

/* =========================================================================
   03 — Selected work
   ========================================================================= */
.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
}
.work__row { align-items: end; row-gap: 2rem; }
.work__item--a { grid-column: 1 / span 5; }
.work__item--b { grid-column: 6 / span 4; }
.work__item--c { grid-column: 10 / span 3; }
@media (max-width: 860px) {
  .work__item--a { grid-column: 1 / span 6; }
  .work__item--b { grid-column: 3 / span 4; margin-top: clamp(1rem, 4vw, 2rem); }
  .work__item--c { display: none; }
}
.work__item figcaption { align-items: baseline; }
.work__no {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
}

/* =========================================================================
   04 — Practice (split-flap board)
   ========================================================================= */
.board__grid { row-gap: clamp(2rem, 5vh, 3rem); align-items: start; }
.board__stats { grid-column: 1 / span 7; }
.board__list { grid-column: 9 / span 4; }
@media (max-width: 860px) {
  .board__stats, .board__list { grid-column: 1 / -1; }
}
.stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(0.75rem, 2vh, 1.4rem);
  border-top: 1px solid var(--rule);
}
.stat:last-child { border-bottom: 1px solid var(--rule); }
.stat__value { font-size: clamp(2rem, 5.2vw, 4.25rem); line-height: 1; font-weight: 300; }
.stat__label { text-align: right; }

.board__list li {
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* =========================================================================
   03 — Services rows (split-flap numbers)
   ========================================================================= */
.svc-rows { border-top: 1px solid var(--rule); }
.svc-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 17rem) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding-block: clamp(0.6rem, 1.9vh, 1.15rem);
  border-bottom: 1px solid var(--rule);
}
.svc-row__no { font-size: clamp(0.9rem, 1.4vw, 1.15rem); opacity: 0.75; }
.svc-row__name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.1vw, 1.6rem);
  letter-spacing: -0.025em;
}
.svc-row__note { color: var(--fg-mute); font-size: 0.9rem; }
@media (max-width: 760px) {
  .svc-row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .svc-row__note { grid-column: 2; }
}

/* =========================================================================
   04 — Work index rows
   ========================================================================= */
.index-rows { margin-top: clamp(0.5rem, 2vh, 1rem); }
.index-rows__rule {
  display: block;
  height: 1px;
  background: var(--rule);
  transform-origin: left center;
}
.index-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 14rem) 4rem;
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding-block: clamp(0.9rem, 2.6vh, 1.75rem);
}
.index-row__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.75rem);
  letter-spacing: -0.035em;
  line-height: 1;
  /* the underline grows from the left on hover — transform only */
  position: relative;
  width: max-content;
  max-width: 100%;
}
.index-row__name::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.12em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-fast) var(--e-out);
}
.index-row:hover .index-row__name::after,
.index-row:focus-visible .index-row__name::after { transform: scaleX(1); }
.index-row__year { text-align: right; }
@media (max-width: 760px) {
  .index-row { grid-template-columns: 2.25rem minmax(0, 1fr) 3.5rem; }
  .index-row__tag { grid-column: 2 / span 2; }
}

/* =========================================================================
   05 — Visuals strip
   ========================================================================= */
.visuals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
@media (max-width: 760px) {
  .visuals { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   06 — Contact
   ========================================================================= */
.contact__grid { align-items: center; row-gap: clamp(2rem, 5vh, 3rem); }
.contact__text { grid-column: 1 / span 7; }
.contact__media { grid-column: 9 / span 4; }
@media (max-width: 860px) {
  .contact__text { grid-column: 1 / -1; }
  .contact__media { grid-column: 1 / -1; }
}
.contact__mail {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.6vw, 3.75rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-top: clamp(1rem, 3vh, 2rem);
}
.contact__links {
  margin-top: clamp(1.75rem, 5vh, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}

/* =========================================================================
   Deck furniture — rail, counter, scroll hint (desktop deck only)
   ========================================================================= */
.rail {
  position: fixed;
  right: clamp(1rem, 2.2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: none;
  flex-direction: column;
  gap: 0.9rem;
  color: var(--nav-fg, var(--ink));
  transition: color var(--d-fast) var(--e-inout);
}
html.deck-on .rail { display: flex; }

.rail__btn {
  --dot: 6px;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.35rem 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
}
.rail__label {
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
  white-space: nowrap;
}
.rail__dot {
  width: var(--dot); height: var(--dot);
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  transform: scale(1);
  transition: opacity var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.rail__btn:hover .rail__label,
.rail__btn:focus-visible .rail__label { opacity: 0.7; transform: none; }
.rail__btn[aria-current="true"] .rail__dot { opacity: 1; transform: scale(1.6); background: var(--accent); }

/* The label is a hover affordance only. Showing it permanently would park
   text on top of the right-hand column of every screen. */
.rail__label {
  position: absolute;
  right: calc(100% + 0.7rem);
  pointer-events: none;
}

.counter {
  position: fixed;
  left: var(--gutter);
  bottom: clamp(1.25rem, 3vh, 2rem);
  z-index: 80;
  display: none;
  gap: 0.5rem;
  align-items: baseline;
  color: var(--nav-fg, var(--ink));
  transition: color var(--d-fast) var(--e-inout);
}
html.deck-on .counter { display: flex; }
.counter__now { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.02em; }

.hint {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.25rem, 3vh, 2rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.hint__line {
  display: block;
  width: 48px; height: 1px;
  background: currentColor;
  opacity: 0.5;
}
html:not(.deck-on) .hint { display: none; }

/* Small screens put the type right over the busy part of the frame, so the
   scrim carries a little more weight there. */
@media (max-width: 760px) {
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(12,12,14,0.58) 0%,
      rgba(12,12,14,0.44) 30%,
      rgba(12,12,14,0.62) 70%,
      rgba(12,12,14,0.86) 100%);
  }
}

/* Keep the rail clear of content in deck mode. */
@media (min-width: 900px) {
  html.deck-on .wrap { padding-right: calc(var(--gutter) + 2rem); }
  html.deck-on .scr__tag { right: calc(var(--gutter) + 2rem); }
}

/* Short laptops: pull the type down a step so a screen always fits. */
@media (min-height: 0px) and (max-height: 760px) and (min-width: 900px) {
  .hero__name { font-size: clamp(2.25rem, 7vw, 6rem); }
  .statement__body { font-size: clamp(1.4rem, 2.6vw, 2.25rem); }
  .stat__value { font-size: clamp(1.75rem, 3.6vw, 3rem); }
  .contact__mail { font-size: clamp(1.4rem, 3.2vw, 2.5rem); }
}