/* ─── Custom Properties ─────────────────────────────────── */
:root {
  --bg: #FFFFFF;
  --ink: #000000;
  --muted: rgba(0, 0, 0, 0.45);
  --soft: #F2F2F0;
  --line: 1px solid var(--ink);
  --hair: 1px solid rgba(0, 0, 0, 0.15);
  --pad: 18px;
  --side-w: clamp(220px, 25vw, 320px);
  /* Brand fonts — same as skin 01 and the presentations */
  --sans: 'Roboto', sans-serif;
  --display: 'Roboto Condensed', sans-serif;
  --mono: 'Space Mono', monospace;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
em { font-style: italic; }

/* Link hover in this skin: underline, no colour accent */
a:hover, button:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ─── Layout ────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  min-height: 100vh;
}

/* ─── Sidebar ───────────────────────────────────────────── */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: var(--line);
  display: flex;
  flex-direction: column;
  z-index: 10;
  background: var(--bg);
}

.nav__logo {
  display: block;
  padding: var(--pad);
  color: var(--ink);
}
.nav__logo:hover { text-decoration: none; opacity: 0.7; }
.nav__logo-svg {
  /* Safari: explicit size for SVG inside flex/grid */
  width: 120px;
  height: calc(120px * 194 / 398);
  display: block;
}

.nav__links {
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad);
  margin-top: 12px;
}
.nav__link {
  font-size: 15px;
  line-height: 1.5;
  width: fit-content;
}
.nav__link.active { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.sidebar__foot {
  margin-top: auto;
  border-top: var(--line);
  padding: var(--pad);
  font-size: 12px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar__clocks {
  /* Shared columns: times start at the same x, so hours line up */
  display: grid;
  grid-template-columns: 1fr auto;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.sidebar__clock { display: contents; }
.sidebar__foot > div:last-child { color: var(--muted); }

/* ─── Main ──────────────────────────────────────────────── */
#app { min-width: 0; min-height: 100vh; }

.page { animation: fadeIn 0.35s ease forwards; }
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Intro ─────────────────────────────────────────────── */
.intro {
  padding: var(--pad) var(--pad) 36px;
  border-bottom: var(--line);
}
.intro p { max-width: 62ch; font-size: 15px; }
.intro__link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.intro__link:hover { color: var(--muted); }

/* ─── Filter bar ────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: var(--pad);
  border-bottom: var(--line);
  font-size: 14px;
}
.filter-bar__label { color: var(--muted); }
.filter-btn { color: var(--muted); }
.filter-btn:hover { color: var(--ink); }
.filter-btn.active {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ─── Works grid ────────────────────────────────────────── */
/* Lines between cells are drawn with box-shadow (right + bottom);
   overflow: hidden clips the ones that fall on the outer edge. */
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  overflow: hidden;
}

.work-card {
  padding: var(--pad);
  box-shadow: 1px 1px 0 0 var(--ink);
  cursor: pointer;
  min-width: 0;
}
.work-card.featured { grid-column: span 2; }
.work-card.hidden { display: none; }

.work-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--soft);
}
.work-card.featured .work-card__media { aspect-ratio: 16 / 9; }
.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Title on the image: shade at the bottom keeps white type readable */
.work-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%);
}
.work-card__over {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--pad);
  color: #FFFFFF;
}
.work-card.no-img .work-card__over { color: var(--ink); }
.work-card__title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 4.6vw, 4.4rem);
  line-height: 0.88;
  white-space: pre-line;
}
.work-card.featured .work-card__title { font-size: clamp(3.2rem, 7.5vw, 7rem); }
.work-card__sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 10px;
  opacity: 0.75;
}

.work-card__caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.work-card__num { font-variant-numeric: tabular-nums; }

@media (hover: hover) {
  .work-card:hover .work-card__title {
    text-decoration: underline;
    text-underline-offset: 0.08em;
    text-decoration-thickness: 0.04em;
  }
}

/* Blur-up reveal */
img.js-reveal { filter: blur(24px); transition: filter 0.6s ease; }
img.js-reveal.is-loaded { filter: none; }

/* ─── Row CTA (all works / load more) ───────────────────── */
/* Full-width row, large type: must read as "there is more", not as a footnote */
.row-cta {
  border-top: var(--line);
  border-bottom: var(--line);
  margin-top: -1px;
}
.row-cta__link {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 24px;
  width: 100%;
  padding: 28px var(--pad);
  text-align: left;
  font-weight: 300;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1;
  transition: background 0.2s;
}
.row-cta__link:hover { text-decoration: none; background: var(--soft); }
.row-cta__link:hover > span:first-child {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.row-cta__count {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.row-cta__arrow { transition: transform 0.2s; }
.row-cta__link:hover .row-cta__arrow { transform: translateX(4px); }
.works__load-more .row-cta__link:hover .row-cta__arrow { transform: translateY(4px); }
.row-cta__link:disabled { color: var(--muted); cursor: default; }
.row-cta__link:disabled:hover { background: none; }

/* ─── Work detail ───────────────────────────────────────── */
.detail { padding: var(--pad) var(--pad) 0; }

.detail__back { display: inline-block; font-size: 14px; color: var(--muted); }
.detail__back:hover { color: var(--ink); }

.detail__header {
  padding: 48px 0 28px;
  border-bottom: var(--line);
  margin: 0 calc(var(--pad) * -1);
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.detail__index { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.detail__title {
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.detail__subtitle { font-style: italic; color: var(--muted); font-size: 18px; margin-top: 10px; }

.detail__specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  margin: 0 calc(var(--pad) * -1);
  border-bottom: var(--line);
  font-size: 14px;
}
.detail__specs dt,
.detail__specs dd {
  padding: 8px var(--pad);
  border-bottom: var(--hair);
}
.detail__specs dt { color: var(--muted); padding-right: 40px; }
.detail__specs dt:nth-last-of-type(1),
.detail__specs dd:last-child { border-bottom: none; }

.detail__body { padding: 32px 0 64px; }

.detail__hero { margin: 0 0 28px; }
.detail__hero img { width: 100%; height: auto; display: block; }

/* WordPress content */
.detail__content { display: flex; flex-direction: column; gap: 22px; }
.detail__content p,
.detail__content ul,
.detail__content ol {
  font-size: 18px;
  line-height: 1.55;
  max-width: 62ch;
}
.detail__content ul,
.detail__content ol { padding-left: 1.2em; }
.detail__content li + li { margin-top: 4px; }
.detail__content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.detail__content h2,
.detail__content h3,
.detail__content h4 { font-weight: 300; line-height: 1.05; margin-top: 12px; }
.detail__content h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.detail__content h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.detail__content h4 { font-size: 1.3rem; font-style: italic; }

.detail__content img { width: 100%; height: auto; display: block; }
.detail__content figure,
.detail__content .wp-block-image { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.detail__content figcaption { font-size: 13px; color: var(--muted); }

.detail__content blockquote {
  border-left: var(--line);
  padding: 4px 0 4px 20px;
  margin: 0;
}
.detail__content blockquote p { font-style: italic; font-size: 22px; line-height: 1.35; }

.detail__content .wp-block-gallery,
.detail__content .blocks-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--pad);
  list-style: none;
  padding: 0;
}
.detail__content .wp-block-gallery figure,
.detail__content .blocks-gallery-item { margin: 0; }

/* Self-hosted video: explicit size, otherwise it renders at native size and overflows */
.detail__content .wp-block-video video { width: 100%; height: auto; display: block; }

/* YouTube / iframe embeds: 16:9 */
.detail__content .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.detail__content .wp-block-embed__wrapper iframe,
.detail__content .wp-block-embed__wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.detail__next {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 calc(var(--pad) * -1);
  padding: var(--pad);
  border-top: var(--line);
  border-bottom: var(--line);
}
.detail__next:hover { text-decoration: none; }
.detail__next-label { color: var(--muted); font-size: 14px; }
.detail__next-title { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 300; text-align: right; }
.detail__next:hover .detail__next-title {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* ─── About / Contact ───────────────────────────────────── */
.statement {
  padding: 48px var(--pad) 40px;
  border-bottom: var(--line);
}
.statement p {
  font-weight: 300;
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 22ch;
}
.statement p.statement__sub {
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 20px;
  max-width: 50ch;
}

.text-block {
  padding: var(--pad) var(--pad) 36px;
  border-bottom: var(--line);
}
.text-block p { font-size: 18px; line-height: 1.55; max-width: 58ch; }
.text-block p + p { margin-top: 16px; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: var(--line);
}
.stats--4 { grid-template-columns: repeat(4, 1fr); }
.stats__item {
  padding: var(--pad);
  border-right: var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stats__item:last-child { border-right: none; }
.stats__num { font-weight: 300; font-size: clamp(2.4rem, 4.5vw, 4rem); line-height: 1; }
.stats__label { color: var(--muted); font-size: 13px; }

.list-rows { border-bottom: var(--line); }
.list-rows__label {
  padding: var(--pad) var(--pad) 10px;
  color: var(--muted);
  font-size: 13px;
}
.list-rows__row {
  display: grid;
  grid-template-columns: minmax(80px, 160px) 1fr auto;
  gap: 16px;
  padding: 12px var(--pad);
  border-top: var(--hair);
  font-size: 18px;
}
.list-rows__row > span:first-child { color: var(--muted); font-size: 14px; align-self: center; }
.list-rows__row--link:hover { text-decoration: none; background: var(--soft); }
.list-rows__row--link:hover span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.list-rows__arrow { color: var(--muted); transition: transform 0.2s; }
.list-rows__row--link:hover .list-rows__arrow { transform: translateX(4px); color: var(--ink); }

/* ─── Shared bits ───────────────────────────────────────── */
.section-label {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 12px;
}
.inline-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.inline-link:hover { color: var(--muted); }

/* How it works */
.steps {
  padding: var(--pad) var(--pad) 0;
  border-bottom: var(--line);
}
.steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 calc(var(--pad) * -1);
  border-top: var(--hair);
}
.steps__item {
  padding: var(--pad);
  border-right: var(--hair);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.steps__item:last-child { border-right: none; }
.steps__num { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.steps__title { font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.05; }
.steps__text { font-size: 15px; max-width: 34ch; }

/* Roles in the network */
.roles {
  padding: var(--pad) var(--pad) 36px;
  border-bottom: var(--line);
}
.roles__list {
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.2;
  max-width: 40ch;
}

/* Closing call-to-action rows */
.list-rows--cta .list-rows__row:first-child { border-top: none; }

/* Brief hint */
.brief {
  padding: var(--pad) var(--pad) 36px;
  border-bottom: var(--line);
  font-size: 16px;
}
.brief__list { list-style: none; margin-bottom: 14px; }
.brief__list li::before { content: '— '; color: var(--muted); }

/* Cities with local time */
.cities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: var(--line);
}
.cities__item {
  padding: var(--pad);
  border-right: var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cities__item:last-child { border-right: none; }
.cities__name { font-size: 16px; }
.cities__time {
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.cities__status { color: var(--muted); font-size: 13px; }

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
  .layout { grid-template-columns: 1fr; }

  .sidebar {
    position: sticky;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-right: none;
    border-bottom: var(--line);
  }
  .nav__logo { padding: 12px var(--pad); }
  .nav__logo-svg { width: 72px; height: calc(72px * 194 / 398); }
  .nav__links { flex-direction: row; gap: 14px; margin: 0; }
  .sidebar__foot { display: none; }

  .works-grid { grid-template-columns: 1fr; }
  .work-card.featured { grid-column: span 1; }
  .work-card.featured .work-card__media,
  .work-card__media { aspect-ratio: 4 / 3; }

  .stats { grid-template-columns: 1fr; }
  .stats__item { border-right: none; border-bottom: var(--hair); }
  .stats__item:last-child { border-bottom: none; }

  .list-rows__row { grid-template-columns: 90px 1fr auto; font-size: 16px; }
  .stats--4 { grid-template-columns: 1fr; }
  .steps__grid { grid-template-columns: 1fr; }
  .steps__item { border-right: none; border-bottom: var(--hair); }
  .steps__item:last-child { border-bottom: none; }
  .cities { grid-template-columns: 1fr; }
  .cities__item { border-right: none; border-bottom: var(--hair); flex-direction: row; align-items: baseline; gap: 12px; }
  .cities__item:last-child { border-bottom: none; }
  .cities__name { min-width: 90px; }
  .cities__time { font-size: 1.6rem; }
  .detail__specs dt { padding-right: 20px; }
}

.detail__loading { color: var(--muted); padding: 48px 0; }

/* "Mail app didn't open?" hint under mailto links */
.mail-fallback {
  font-size: 14px;
  color: var(--muted);
  margin-top: 10px;
}
.mail-fallback .inline-link { color: var(--ink); }
.list-rows .mail-fallback {
  margin-top: 0;
  padding: 12px var(--pad);
  border-top: var(--hair);
}

/* Grid while a category is being loaded */
.works-grid.is-loading { opacity: 0.35; pointer-events: none; transition: opacity 0.2s; }

/* ─── Typography (brand fonts) ──────────────────────────── */
/* Big headings: Roboto Condensed Black, uppercase — as in skin 01 */
.detail__title,
.statement p:not(.statement__sub),
.stats__num,
.cities__time,
.steps__title,
.row-cta__link > span:first-child,
.detail__next-title,
.detail__content h2,
.detail__content h3 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.9;
}
.statement p:not(.statement__sub) { font-size: clamp(2.4rem, 5vw, 4.6rem); max-width: 16ch; }
.detail__title { font-size: clamp(3rem, 7vw, 6.5rem); }
.roles__list {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
}
.detail__content h4 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-style: normal; }

/* Small labels: Space Mono, uppercase */
.nav__link,
.filter-bar,
.work-card__caption,
.row-cta__count,
.detail__back,
.detail__index,
.detail__specs dt,
.detail__next-label,
.section-label,
.list-rows__label,
.list-rows__row > span:first-child,
.stats__label,
.steps__num,
.cities__status,
.sidebar__foot,
.detail__content figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav__link { font-size: 12px; line-height: 1.9; }
.sidebar__foot a { text-transform: none; letter-spacing: 0; }
.statement em { white-space: nowrap; }
.sidebar__foot { font-size: 10px; }

/* Mobile: one column, so wide/narrow cards look the same — titles too */
@media (max-width: 768px) {
  .work-card__title,
  .work-card.featured .work-card__title { font-size: clamp(2.2rem, 10vw, 3.2rem); }
}