/* Site-wide interface (all pages) + homepage field.
   Type system: Lora for navigation and titles, Figtree for reading text.
   Scale: 13 (meta) · 18–22 (text, nav) · 34–56 (project titles). */
@font-face { font-family: "Lora"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/lora-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/figtree-latin-400-normal.woff2) format("woff2"); }

:root {
  --h-bg: #ffffff;
  --h-ink: #1d1d1b;
  --h-soft: #5f5f5a;
  --h-nav: #b8861b;            /* mustard nav, deepened to pass contrast for large text */
  --h-nav-hover: #1d1d1b;
  --h-index-bg: rgba(14, 81, 24, 0.89);   /* green panel */
  --h-index-fg: #92c6e5;                   /* pale sky blue type on the green panel (same lightness as the old pink) */
  --h-info-bg: rgba(145, 197, 234, 0.86);  /* hazy blue panel (old pink, hue rotated) */
  --h-info-fg: #1c5383;                   /* deep blue type (old deep red, hue rotated) */
  --h-dot: rgba(240, 235, 143, 0.86);
  --h-mnav-bg: #617485;
  --h-mnav-fg: floralwhite;
  --f-serif: "Lora", Georgia, "Times New Roman", serif;
  --f-sans: "Figtree", "Helvetica Neue", Arial, sans-serif;   /* stands in for GT Haptik */
  --t-nav: 22px;
  --t-text: clamp(17px, 1.35vw, 21px);
  --t-meta: 13px;
  --t-title: clamp(34px, 3.6vw, 56px);
  --field: min(90vw, 1400px);
}

html, body { overflow-x: hidden; }
body { background: var(--h-bg); color: var(--h-ink); font: 400 var(--t-text)/1.45 var(--f-sans); }

/* Header (every page) */
/* Navigation: one style on every page and at every scroll position —
   mustard serif on small white tags, no separators */
.h-header { position: fixed; top: 15px; left: 15px; z-index: 45001; display: flex; gap: 6px; }
.h-back { position: fixed; top: 15px; right: 15px; z-index: 45001; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.h-header a, .h-back span { display: inline-block; padding: 0 7px; background: rgba(255, 255, 255, 0.92);
  font: 400 var(--t-nav)/1.35 var(--f-serif); color: var(--h-nav); text-decoration: none; cursor: pointer; transition: color 0.4s ease; }
.h-header a:hover, .h-back:hover span { color: var(--h-nav-hover); }

/* Centre slot: name by default, project title on hover */
.h-name { position: fixed; top: 0; left: 50%; transform: translateX(-50%); padding: 15px; margin: 0; z-index: 30001;
  font: 400 var(--t-nav)/1.3 var(--f-serif); color: var(--h-ink); white-space: nowrap; text-decoration: none; }
.h-name em { font-style: italic; }
.h-name:empty { display: none; }

/* Homepage field: composed clusters, consistent rhythm */
.h-main { position: relative; padding: 136px 0 0; }
.h-page-end { padding-bottom: 96px; }
.h-cluster { position: relative; width: var(--field); margin-inline: auto; aspect-ratio: 100 / var(--h); }
.h-cluster + .h-cluster { margin-top: clamp(72px, 9vw, 150px); }
.h-item { position: absolute; left: var(--x); top: var(--y); width: var(--w); display: block; touch-action: pan-y; -webkit-user-drag: none; user-select: none; }
.h-item img { width: 100%; pointer-events: none; transition: box-shadow 0.3s ease; }
.h-item.dragging { cursor: grabbing; }
.h-item.dragging img { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); }
.h-item:focus-visible { outline: 2px solid var(--h-nav); outline-offset: 4px; }
.h-hint { position: fixed; bottom: 30px; right: 24px; font: 400 var(--t-meta)/1 var(--f-sans);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--h-soft); background: rgba(255, 255, 255, 0.9); padding: 8px 12px; pointer-events: none; z-index: 30001; transition: opacity 0.6s; }
.h-hint.gone { opacity: 0; }
.ov-title { position: fixed; top: 0; left: 50%; transform: translateX(-50%); padding: 15px; text-align: center; margin: 0;
  font: 400 var(--t-nav)/1.3 var(--f-serif); color: var(--h-ink); z-index: 30000; pointer-events: none; white-space: nowrap;
  opacity: 0; transition: opacity 0.2s; }
.ov-title.on { opacity: 1; }
.ov-title { display: none; }

/* Index list closing the homepage */
.h-list { width: var(--field); margin: 168px auto 0; }
.h-list-label { display: flex; justify-content: space-between; margin: 0 0 16px; font: 400 var(--t-meta)/1 var(--f-sans);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--h-soft); }
.h-list ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0, 0, 0, 0.12); }
.h-list li { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.h-list a { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 18px 0;
  color: var(--h-ink); text-decoration: none; }
.h-list .n, .h-list .c { font: 400 var(--t-meta)/1 var(--f-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--h-soft); font-variant-numeric: tabular-nums; }
.h-list .t { font: 400 clamp(24px, 2.3vw, 36px)/1.15 var(--f-serif); transition: color 0.3s, transform 0.3s; }
.h-list .t::before { content: ""; display: inline-block; width: 0; height: 10px; border-radius: 50%; background: var(--accent); vertical-align: middle;
  margin-right: 0; transition: width 0.3s, margin 0.3s; }
.h-list a:hover .t, .h-list a:focus-visible .t { color: var(--h-nav); }
.h-list a:hover .t::before, .h-list a:focus-visible .t::before { width: 10px; margin-right: 14px; }
.h-foot { width: var(--field); margin: 120px auto 0; display: flex; justify-content: space-between; font: 400 var(--t-meta)/1 var(--f-sans);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--h-soft); }

/* Secret dot */
.h-dot { position: fixed; bottom: 20px; left: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--h-dot);
  opacity: 0.3; cursor: pointer; border: 0; padding: 0; z-index: 30001; transition: opacity 0.3s; }
.h-dot:hover { opacity: 0.6; }

/* Panels */
.h-panel { position: fixed; top: 0; left: 100vw; width: 90vw; max-width: 600px; z-index: 10001; font: 400 22.5px/1.5 var(--f-sans); }
.h-panel.index { max-width: 400px; background: var(--h-index-bg); color: var(--h-index-fg); }
.h-panel.info, .h-panel.press { background: var(--h-info-bg); color: var(--h-info-fg); }
.h-panel a { color: inherit; text-decoration: none; }
.h-panel a:hover { text-decoration: underline; }
.h-panel .p-head { height: 64px; text-align: right; }
.h-panel .p-close { display: inline-block; padding: 15px 25px; font: 400 34px/34px var(--f-sans); color: inherit; background: none; border: 0; cursor: pointer; }
.h-panel .p-body { padding: 0 25px; }
.h-panel ul { list-style: none; margin: 0; padding: 0; }
.h-panel p { margin: 0 0 1em; }
.h-panel .p-foot { height: 50px; padding: 0 25px 25px; }

/* Project overlay (homepage) */
.h-overlay { position: fixed; inset: 0; z-index: 40001; background: #fff; overflow-y: auto; opacity: 0; visibility: hidden;
  transition: opacity 400ms ease-in-out, visibility 0s linear 400ms; -webkit-overflow-scrolling: touch; }
.overlay-open .h-overlay { opacity: 1; visibility: visible; transition: opacity 400ms ease-in-out; }
.overlay-open, .overlay-open body { overflow: hidden; }
.loading, .loading * { cursor: progress !important; }

@media (max-width: 768px) {
  :root { --t-nav: 20px; }
  .h-header { top: 12px; left: 12px; }
  .h-back { top: 12px; right: 12px; }
  .h-main { padding: 84px 16px 0; }
  /* phones: all pictures flow as one loose, overlapping stream (positions computed at build time) */
  .h-field { position: relative; aspect-ratio: 100 / var(--hm); }
  .h-cluster { display: contents; }
  .h-cluster + .h-cluster { margin-top: 0; }
  .h-item { position: absolute; left: var(--mx) !important; top: var(--my) !important; width: var(--mw); margin: 0; transform: none !important; }
  .h-hint, .ov-title, .h-name { display: none; }
  .h-list { width: auto; margin-top: 104px; }
  .h-list a { grid-template-columns: 40px minmax(0, 1fr); }
  .h-list .c { display: none; }
  .h-foot { width: auto; flex-direction: column; gap: 10px; }
  .h-page-end { padding: 0 0 72px; }
  .h-panel.open { top: 70px !important; left: 15px !important; width: calc(100vw - 30px); }
}

@media (prefers-reduced-motion: reduce) {
  .h-overlay, .overlay-open .h-overlay, .h-header a, .h-back span { transition: none; }
}