/* ============================================================
   MIN — Portfolio
   Title page (olive) + three category pages (white).
   ============================================================ */

:root {
  --olive:  #7d9c05;
  --cream:  #f5f1dd;
  --bg:     #ffffff;
  --fg:     #101010;
  --muted:  #b6b6b6;   /* inactive list rows */
  --quiet:  #8c8c8c;   /* secondary copy    */

  /* The flower stands in for the pointer on the category pages. Inlined as
     a data URI because assets/*.svg is gitignored and so never deploys.
     The title page has no flower cursor — it has the drawn line instead. */
  --flower-cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2230%22 viewBox=%220 0 48 51%22%3E%3Cpath d=%22M47.5278 23.143C46.1958 19.7681 43.2696 22.7555 40.8881 22.8882C39.3395 23.0786 37.7424 23.1025 36.1855 23.1639C35.2647 23.159 33.7981 23.2696 33.153 22.7457C32.9589 22.6032 33.6063 21.8643 33.7798 21.6524C35.8077 19.4616 38.3296 17.2726 40.3587 14.9411C42.2043 12.7896 45.258 9.39005 43.3906 6.33445C42.543 5.36648 41.6094 6.63602 41.1443 7.4836C40.521 8.57563 39.9391 9.95143 39.2657 11.0441C37.5948 13.5064 35.3851 15.8077 33.3413 17.8168C32.8508 18.2332 32.1692 18.8763 31.6498 18.9684C31.5666 18.2553 32.0104 17.2241 32.3132 16.331C33.4688 13.2939 34.7997 10.2198 35.9588 7.19247C36.6995 5.26821 37.5866 3.24936 37.8581 1.17892C38.0505 -1.38779 35.8927 0.894547 35.3627 1.8576C34.1516 3.77634 33.8595 5.66375 33.1607 7.58371C32.0281 10.584 30.2197 14.9522 28.615 18.0066C28.2668 18.5599 28.1853 18.7362 27.9174 18.9346C26.8362 18.4365 26.8586 14.5536 26.783 13.2705C26.7948 12.3259 26.8049 11.4255 26.8633 10.4956C26.8863 9.64679 27.4263 7.03524 26.246 7.02541C24.7097 7.18326 20.2767 11.5612 22.0142 13.8374C23.1787 15.895 23.5558 19.5089 23.485 20.8466C23.485 21.5597 23.4508 22.1044 23.4059 22.5792C23.3888 22.6062 23.3741 22.6179 23.3003 22.6615C21.6035 23.4256 18.8508 22.9232 16.9185 22.8826C15.8308 22.8003 14.8032 22.7635 13.7326 22.7211C11.9856 22.5933 10.496 22.7684 8.72952 23.6393C7.05041 24.614 5.36304 26.0488 4.91803 27.86C4.83304 28.4448 5.0945 28.8495 5.70063 28.9281C7.42046 28.9828 8.99275 28.1819 10.6783 27.8269C12.7582 27.3724 14.8982 27.4012 16.9805 27.3171C17.7389 27.346 20.334 27.0868 20.6674 27.7937C15.8508 32.8614 4.20566 37.2111 0.688091 41.387C-0.621555 42.9894 0.00287367 44.5556 2.01308 44.4825C3.4148 44.4586 4.81828 43.6399 5.94025 42.8457C7.40689 41.8083 8.64453 40.4577 10.0297 39.4603C12.2016 37.7602 14.7401 36.2088 17.0413 34.5805C18.3379 33.7151 19.8264 32.5721 21.1691 31.8449C21.5362 31.649 21.8472 31.5176 22.0497 31.4985C22.2804 31.4887 22.0981 32.0728 21.9812 32.4855C20.7619 36.4796 15.7056 44.3425 15.044 47.8084C14.1995 52.2404 22.3654 50.5944 22.4894 46.6064C22.5484 45.8878 22.5259 45.1668 22.5313 44.4463C22.4976 41.6149 23.8598 38.6766 24.8053 35.8439C25.4008 34.3416 25.8175 32.5439 26.9312 31.5446C28.5188 32.2687 29.6419 35.2095 30.7757 36.9341C34.1723 41.9226 37.1085 45.7938 40.8061 41.8864C42.1624 39.9375 41.0735 38.2706 39.3223 37.3211C38.5144 36.8432 37.5937 36.4944 36.8772 35.8967C35.2435 34.6278 31.7726 30.4003 31.4143 28.2451C31.4125 28.1327 31.3801 27.9663 31.4474 27.8797C32.1562 27.3883 33.3389 27.392 34.3293 27.3705C35.6944 27.3699 37.1982 27.5634 38.4672 27.5966C39.1701 27.5775 39.8523 27.626 40.5765 27.6782C43.75 27.9878 49.0205 28.1033 47.532 23.1473L47.5302 23.1424L47.5278 23.143Z%22 fill=%22%23080808%22/%3E%3C/svg%3E") 14 15, auto;
}

/* UA styles set cursor on links and buttons, so name them explicitly
   rather than relying on inheritance from body. */
body,
a,
button,
[role="button"] { cursor: var(--flower-cursor); }

/* …except on the title page, where the pointer draws instead. */
body[data-page="title"],
body[data-page="title"] a { cursor: default; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Real headings the design doesn't show. The page needs a document
   outline for search engines and screen readers; the layout carries the
   same information visually (the scattered labels, the sidebar names).
   Clipped rather than display:none, so assistive tech still reads it. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The category name is the page's h1, but must look exactly as before. */
.cat-title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* The hand-drawn asterisk. Always takes its colour from its parent. */
.flower {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ============================================================
   TITLE PAGE
   ============================================================ */
body[data-page="title"] {
  background: var(--olive);
  color: var(--cream);
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* The cluster sits a touch right of and below dead centre. */
.field {
  position: relative;
  width: min(440px, 62vw);
  height: min(210px, 30vh);
  transform: translate(1vw, 4vh);
}

.tile {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 3px 4px;
  font-size: 14px;
  color: var(--cream);
  transition: opacity .45s ease;
}

/* The flower sits centred above the label and only appears on hover. */
.tile .flower {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 36px;
  margin-bottom: -3px;
  opacity: 0;
  transform: translateX(-50%) translateY(8px) rotate(var(--rot, 0deg)) scale(.8);
  transform-origin: 50% 100%;
  transition: opacity .3s ease, transform .42s cubic-bezier(.2, .9, .25, 1);
  pointer-events: none;
}

.tile:hover .flower,
.tile:focus-visible .flower {
  opacity: 1;
  transform: translateX(-50%) translateY(0) rotate(var(--rot, 0deg)) scale(1);
}

.tile:focus-visible { outline: 1px solid var(--cream); outline-offset: 2px; }

/* Hovering one label quietly recedes the others. */
.field:hover .tile { opacity: .45; }
.field .tile:hover,
.field .tile:focus-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tile .flower { transition-duration: .01ms; }
}

/* Too narrow to scatter — stack them instead. */
@media (max-width: 700px) {
  .field {
    width: auto;
    height: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 62px;
  }
  /* Stays relative so the flower still hangs off the label, not the viewport.
     The inline left/top are overridden and replaced with a gentle stagger, so
     the stack keeps some of the scatter's drift. No hover on touch, so the
     flowers are simply always there. */
  .tile {
    position: relative;
    left: auto !important;
    top: auto !important;
  }
  .tile:nth-child(1) { transform: translateX(-8vw); }
  .tile:nth-child(2) { transform: translateX(3vw); }
  .tile:nth-child(3) { transform: translateX(12vw); }
  .tile:nth-child(4) { transform: translateX(-4vw); }
  .tile .flower {
    opacity: 1;
    transform: translateX(-50%) rotate(var(--rot, 0deg));
    margin-bottom: 2px;
  }
  .field:hover .tile { opacity: 1; }
}

/* ============================================================
   CATEGORY PAGES  —  sidebar left, work right
   ============================================================ */
.shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(40px, 7vw, 110px);
  max-width: 1680px;
  margin: 0 auto;
  padding: 56px clamp(24px, 5.5vw, 84px) 22vh;
  align-items: start;
}

.side {
  position: sticky;
  top: 56px;
  align-self: start;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  scrollbar-width: none;
}
.side::-webkit-scrollbar { display: none; }

/* ---------- flower + category name ----------
   The whole thing is the way back to the title page. With the flower
   standing in for the pointer there's no cursor change to signal that,
   so it leans on the tilt + the label going quiet instead. The negative
   margin buys a bigger hit area without moving anything. */
.cat-head {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 0;
  margin: -8px 0 -8px 0;
  font-size: 15px;
}
.cat-head .flower {
  width: 26px;
  transition: transform .5s cubic-bezier(.2, .9, .25, 1);
}
.cat-head span { transition: color .2s ease; }
.cat-head:hover .flower { transform: rotate(35deg); }
.cat-head:hover span { color: var(--quiet); }
.cat-head:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }

/* ---------- project list ---------- */
.plist { display: block; margin-top: 38px; }

.prow {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 4px 0;
  color: var(--muted);
  transition: color .2s ease;
}
.prow .dot {
  width: 8px;
  height: 8px;
  margin-left: 9px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-1px);
}
.prow:hover,
.prow:focus-visible { color: var(--fg); outline: none; }
.prow.active { color: var(--fg); }

/* ---------- the quiet caption under the list ---------- */
.pmeta { margin-top: 40px; max-width: 30ch; color: var(--quiet); }
.pmeta-inner { animation: fade .3s ease; }
.ptype { text-transform: uppercase; font-size: 11px; letter-spacing: .07em; }
.pdesc { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- the work itself ---------- */
.plates { max-width: 1020px; }

.plate { margin: 0 0 16px; }
.plate:last-child { margin-bottom: 0; }
.plate img,
.plate video {
  display: block;
  width: 100%;
  height: auto;
  background: #f2f2f0;
}
/* Small originals sit in the middle of the column rather than hugging the
   left edge — a 320px animation pinned left just reads as a mistake. */
.plate.centred img,
.plate.centred video { margin-inline: auto; }

/* ---------- a live project, embedded ----------
   The work is on the web, so the page opens with the real thing and lets
   people use it in place. */
.live {
  margin: 0 0 16px;
  max-width: 1020px;
}
.live iframe {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 3 / 2);
  border: 1px solid var(--muted);
  background: #f5f0e6;
}
.live-out {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--quiet);
  transition: color .2s ease;
}
.live-out:hover { color: var(--fg); }

/* ---------- Photography — a narrow column held to the right ---------- */
body[data-category="photography"] .content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(100px, 16vh, 180px);
}
.photo { margin: 0; width: min(420px, 32vw); }
.photo img {
  display: block;
  width: 100%;
  height: auto;
  background: #f2f2f0;
}

/* ---------- About ---------- */
.about { max-width: 52ch; text-transform: uppercase; font-size: 13px; }
.about-block { margin-bottom: 1.3rem; }
.about-block:last-child { margin-bottom: 0; }
.about a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.colophon { margin-top: 3.5rem; color: var(--quiet); font-size: 11px; letter-spacing: .06em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 40px clamp(20px, 6vw, 40px) 14vh;
  }
  .side {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .pmeta { max-width: none; margin-top: 26px; }
  body[data-category="photography"] .content { align-items: stretch; gap: 64px; }
  .photo { width: 100%; }
  .plate { margin-bottom: 12px; }
  /* A 3:2 frame is only ~220px tall on a phone, which is too small to
     actually use. Give it room; "open full screen" covers the rest. */
  .live iframe { min-height: 62vh; }
  .live-out { font-size: 13px; }
}