/* Layout modeled on raoulgottschling.de/projects:
   one size of type, a 6-column grid with no gutters, 1px black rules between rows,
   a fixed 19px top bar, and a click-through image carousel filling the right half. */

/* RG Ciron Text: the reference site's typeface. UNLICENSED TRIAL from raoulgottschling.de,
   for evaluation only. A web license is required before this site goes live. */
@font-face {
  font-family: 'Ciron Text';
  src: url('../fonts/CironText-Regular-Trial.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Armin Grotesk';
  src: url('../fonts/ArminGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f2f2f2;
  --fg: #000;
  --rule: #000;
  --muted: #000;
  /* Ashley's swatches from the InDesign file */
  --blue: rgb(0, 32, 245);
  --yellow: rgb(248, 198, 27);
  --gray: #e4e4e4; /* PDF used 237,237,237 on white; one step darker so it reads on --bg */

  /* To compare with Ashley's own typeface, swap the order: 'Armin Grotesk', 'Ciron Text', … */
  --font: 'Ciron Text', 'Armin Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fs: 16px;
  --lh: 16px;
  --bar: 19px;
  --edge: 0px; /* the reference sets text flush to the window edge */
  --pad-r: 12px; /* breathing room before the next text column */
  --mat: 6%;
  --ease: 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 1px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  padding-top: var(--bar);
}

h1, h2, h3, p, ul, figure { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { background: var(--yellow); }
:focus-visible { outline: 1px solid var(--fg); outline-offset: -1px; }

hr { border: 0; height: 1px; margin: 0; background: var(--rule); }

/* ---------- top bar ---------- */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  height: var(--bar);
  padding: 1px var(--edge) 0;
  background: var(--bg);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  white-space: nowrap;
}
.nav { display: flex; gap: 2.75em; letter-spacing: -0.01em; }
.nav a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- grid ---------- */
.row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 0 var(--edge);
}
.c1 { grid-column: 1; }
.c2 { grid-column: 2; padding-right: var(--pad-r); }
.c3 { grid-column: 3; padding-right: var(--pad-r); }
.c6 { grid-column: 6; }
.media { grid-column: 4 / 7; }

.row--text { min-height: var(--lh); }
.section-head .c2 { grid-column: 2 / 4; }
.foot .c3 { grid-column: 3 / 5; }

/* ---------- project row ---------- */
.text > * + * { margin-top: var(--lh); }
.text .meta > p + p { margin-top: 0; }
.outcomes li { padding-left: 1em; text-indent: -1em; }
.outcomes li::before { content: '+\00a0'; display: inline-block; width: 1em; text-indent: 0; }
.outcomes li + li { margin-top: var(--lh); }
.label + .tight, .tight + .tight { margin-top: 0; }

.media {
  position: sticky;
  top: var(--bar);
  align-self: start;
}

.caption {
  display: flex;
  gap: 1ch;
  min-height: var(--lh);
}
.cap-count { margin-left: auto; padding-left: 1ch; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c3 { display: flex; flex-direction: column; }
.c3 .caption { margin-top: auto; padding-top: var(--lh); }

/* ---------- carousel ---------- */
.carousel {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio, 3 / 2);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.carousel:not(.carousel--single) { cursor: e-resize; }
.carousel.is-left { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="20" viewBox="0 0 28 20"><path d="M11 2 3 10l8 8M3 10h23" fill="none" stroke="white" stroke-width="4"/><path d="M11 2 3 10l8 8M3 10h23" fill="none" stroke="black" stroke-width="1.5"/></svg>') 3 10, w-resize; }
.carousel.is-right { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="20" viewBox="0 0 28 20"><path d="M17 2l8 8-8 8M25 10H2" fill="none" stroke="white" stroke-width="4"/><path d="M17 2l8 8-8 8M25 10H2" fill="none" stroke="black" stroke-width="1.5"/></svg>') 25 10, e-resize; }
.carousel.is-dragging { cursor: grabbing; }

.track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.track.is-animating { transition: transform var(--ease); }

.slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.mat { padding: var(--mat); }
.mat--blue { background: var(--blue); }
.mat--yellow { background: var(--yellow); }
.mat--gray { background: var(--gray); }

/* ---------- about ---------- */
.about .media .carousel { max-height: calc(100vh - var(--bar)); aspect-ratio: auto; height: calc(100vh - var(--bar)); }

/* ---------- small screens ---------- */
@media (max-width: 800px) {
  :root { --edge: 8px; --pad-r: 0px; }
  .nav { gap: 1.25em; }
  .row { grid-template-columns: 2.5em minmax(0, 1fr); }
  .c1 { grid-column: 1; }
  .c2, .c3, .c6 { grid-column: 2; }
  .section-head .c2, .foot .c3 { grid-column: 2; }
  .project { row-gap: var(--lh); padding-bottom: var(--lh); }
  .project .c1 { grid-row: 1; }
  .project .c2 { grid-row: 1; }
  .project .media { grid-row: 2; grid-column: 1 / -1; position: static; margin: 0 calc(var(--edge) * -1); }
  .project .c3 { grid-row: 3; }
  .c3 .caption { order: -1; margin-top: 0; padding-top: 0; }
  .c3 .caption { margin-bottom: var(--lh); }
  .foot { row-gap: 0; }
  .about .media .carousel { height: auto; aspect-ratio: var(--ratio); }
}

@media (prefers-reduced-motion: reduce) {
  .track.is-animating { transition: none; }
}

/* ---------- CV ---------- */
/* Section name in column 2, year in column 3, entry across columns 4–6 */
.cv .c2 { grid-row: 1; }
.cv-list { grid-column: 3 / 7; grid-row: 1; }
.cv-list li { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cv-list li + li { margin-top: var(--lh); }
.cv-year { grid-column: 1; padding-right: var(--pad-r); }
.cv-text { grid-column: 2 / 5; max-width: 44em; }
.cv-text a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

@media (max-width: 800px) {
  .cv { row-gap: var(--lh); padding-bottom: var(--lh); }
  .cv .c2 { grid-column: 2; grid-row: 1; }
  .cv-list { grid-column: 2; grid-row: 2; }
  .cv-list li { grid-template-columns: 5.5em minmax(0, 1fr); }
  .cv-text { grid-column: 2; }
}