/* ---------- Tokens: change values here, everything else reads from them ----------
   Values marked (placeholder) are mockup starting points, not decisions. */
:root {
  --color-bg: #f7f7f5;        /* soft white */
  --color-text: #1c1c1a;      /* (placeholder) */
  --color-muted: #8c8c86;     /* (placeholder) secondary text, inactive nav */
  --color-guide: #c8c8c4;     /* wireframe outlines + labels */

  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;  /* (placeholder) */
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;          /* (placeholder) key hints */
  --text-base: 1rem;
  --text-small: 0.8125rem;

  --column-width: 42.5rem;    /* the narrow middle section (680px) */

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;

  --radius: 4px;              /* (placeholder) image corners */
  --portrait-width: 16rem;    /* (placeholder) profile photo on the "me" page */

  --slide-height: min(28rem, 60svh);  /* (placeholder) fixed image box, keeps labels in one place */
  --slide-height-compact: min(14rem, 28svh);  /* (placeholder) shorter box for projects, so their text fits */
  --segment-height: 3px;      /* (placeholder) carousel position bar */
  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);   /* (placeholder) gentle overshoot for the bar */

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);  /* (placeholder) one easing curve for all motion */
  --duration-fast: 200ms;     /* (placeholder) hovers */
  --duration-slow: 600ms;     /* (placeholder) slides, position bar */
}

/* ---------- Base ---------- */
@view-transition { navigation: auto; }  /* cross-fade between pages in supporting browsers */

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Keyboard focus: quiet ring in the text color instead of the browser's blue */
:focus { outline: none; }
:focus-visible { outline: 1px solid var(--color-text); outline-offset: 4px; border-radius: 2px; }
.carousel button:focus-visible { outline: none; }  /* mouse-only controls; keyboard uses h / ; */

/* ---------- Layout ---------- */
.column {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  box-sizing: border-box;
  max-width: calc(var(--column-width) + 2 * var(--space-2));
  margin-inline: auto;
  padding: var(--space-4) var(--space-2) 0;
}

.content {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: var(--space-4);
  padding-bottom: var(--space-4);
}

/* ---------- Shared text styles ---------- */
.meta {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-muted);
}

.kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.3em;
  box-sizing: border-box;
  border: 1px solid var(--color-guide);
  border-bottom-width: 2px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.75em;
  line-height: 1.5;
  text-align: center;
  vertical-align: 0.1em;
}

/* ---------- Components ---------- */

/* Nav */
.nav {
  /* spans the full column width: first link flush left, last flush right, middle centred */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.nav__item:first-child { justify-self: start; }
.nav__item:last-child  { justify-self: end; }

.nav__link {
  color: var(--color-muted);
  transition: color var(--duration-fast) var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--color-text); }

.nav__hint { color: var(--color-muted); }

/* Name: sits directly above the first nav link, left edges aligned, without affecting nav spacing */
.nav__item { position: relative; }

.site-name {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: var(--space-1);
  white-space: nowrap;
}

/* Links: row of outbound links under the bio */
.links { display: flex; gap: var(--space-3); }

.links a {
  color: var(--color-muted);
  transition: color var(--duration-fast) var(--ease);
}

.links a:hover { color: var(--color-text); }

/* Bio: paragraphs from the top, links pushed to the bottom */
.bio { display: flex; flex-direction: column; }
.bio p { margin: 0 0 1em; }
.bio .links { margin: auto 0 0; }

/* Intro ("me" page): bio on the left, portrait on the right; links sit level with the photo's bottom edge */
.intro {
  display: grid;
  grid-template-columns: 1fr min(var(--portrait-width), 45%);   /* photo stays beside the text on phones too */
  gap: var(--space-3);
}

.portrait { border-radius: var(--radius); }

/* Slot: wireframe placeholder */
.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: var(--slot-height, 0);
  border-inline: 1px dashed var(--color-guide);
  color: var(--color-guide);
}

/* Carousel: one item per view (paintings, projects) */
.carousel--compact { --slide-height: var(--slide-height-compact); }
/* Stage: arrows sit outside the strip, so slides clip before reaching them */
.carousel__stage {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--space-1);
}

/* Position bar: one segment per item across the full width, a pill slides to the current one */
.carousel__segments {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--count), 1fr);
  gap: 4px;
  margin-bottom: var(--space-3);
}

.carousel__segment {
  height: calc(var(--segment-height) * 5);   /* comfortable click target; the visible line is ::before */
  display: flex;
  align-items: center;
}

.carousel__segment::before {
  content: "";
  width: 100%;
  height: var(--segment-height);
  border-radius: 999px;
  background: var(--color-guide);
  transition: height var(--duration-fast) var(--ease-spring), background-color var(--duration-fast) var(--ease);
}

.carousel__segment:hover::before {
  height: calc(var(--segment-height) * 2);
  background: var(--color-muted);
}

.carousel__indicator {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc((100% - (var(--count) - 1) * 4px) / var(--count));
  height: calc(var(--segment-height) * 2);
  border-radius: 999px;
  background: var(--color-text);
  pointer-events: none;
  translate: calc(var(--index, 0) * (100% + 4px)) -50%;
  transition: translate var(--duration-slow) var(--ease-spring);
}

.carousel:not(.is-ready) .carousel__indicator { transition: none; }  /* no slide-in on page load */

.carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  outline: none;
}

.carousel__track::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
}

.slide__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--slide-height);
  box-sizing: border-box;
}

.slide__frame > .slot { align-self: stretch; }   /* placeholder fills the frame when there's no image */

.slide__frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
}

.carousel__arrow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  height: var(--slide-height);   /* vertically centred on the image box */
  padding-inline: var(--space-1);
  color: var(--color-muted);
  transition: color var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease);
}

.carousel__arrow:hover { color: var(--color-text); }
.carousel__arrow:disabled { opacity: 0; pointer-events: none; }

.carousel__hint { font-size: var(--text-small); }

/* Slide label: title, then detail lines (painting: dimensions, location · project: description, tags) */
.label {
  display: grid;
  gap: 0.125rem;
  margin-top: var(--space-3);
}

.label__title { font-weight: 500; }
cite.label__title { font-weight: normal; }   /* artwork titles: italic (cite default), regular weight */

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; }
  @view-transition { navigation: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 30rem) {
  .nav__hint, .carousel__hint { display: none; }   /* no keyboard on phones */
}