/* Milk Paint, revised (staging). Each room brings its own colour.
   Ground colour is driven by main.js (OKLCH interpolation on scroll).
   Section ink is set per field from the same palette in main.js. */

:root {
  --ground: oklch(0.37 0.041 128);
  --ink: oklch(0.93 0.035 112);
  --ink2: oklch(0.82 0.045 118);
  --side: 48px;
  --gap: 24px;
  --display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --text: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ui: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--ground); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* Fixed staging link. Never reacts to the page. */
.index-link {
  position: fixed; left: 16px; bottom: 14px; z-index: 50;
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  color: color-mix(in oklch, var(--index-ink, oklch(0.93 0.035 112)) 70%, transparent);
  transition: color 200ms var(--ease-ui);
}
.index-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Each field sets its own ink. Sections are transparent; the ground lives on body. */
.field { color: var(--ink); position: relative; }

/* Text in a room fades out while the ground blends to a field of opposite polarity. */
.nav, .hero-type, .proj-head, .bio, .practice, .contact-lede, .form, .footer { opacity: var(--text-fade, 1); }

/* Contact: the one button on the page. Fixed top right, filled with the current room's ink,
   lettered in the ground, so it re-colours with every room. */
.cta {
  position: fixed; top: 26px; right: var(--side); z-index: 60;
  display: inline-flex; align-items: center;
  font: 600 15px/1 var(--text);
  text-decoration: none;
  color: var(--ground);
  background: var(--index-ink, oklch(0.93 0.035 112));
  border-radius: 999px;
  padding: 14px 22px; min-height: 44px;
  box-shadow: 0 1px 2px oklch(0.2 0.02 60 / 0.18), 0 6px 20px oklch(0.2 0.02 60 / 0.14);
  transition: transform 160ms var(--ease-ui), opacity 300ms var(--ease-ui), visibility 300ms;
}
.cta:hover { transform: translateY(-1px); }
.cta:active { transform: scale(0.97); }
.cta.is-away { opacity: 0 !important; visibility: hidden !important; transform: translateY(-8px); }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--gap);
  padding: 28px var(--side) 52px;
}
.nav {
  grid-column: 1 / span 7; grid-row: 1;
  display: flex; gap: 28px;
  font: 500 15px/1 var(--text);
  padding-top: 6px;
}
.nav a {
  text-decoration: none;
  color: var(--ink2);
  padding: 15px 0; margin: -9px 0;   /* 44px+ tall target, same visual spacing */
  transition: color 200ms var(--ease-ui);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition: color 200ms var(--ease-ui), background-size 260ms var(--ease-ui);
}
.nav a:hover { color: var(--ink); background-size: 100% 1px; }

.hero-type { grid-column: 1 / span 7; grid-row: 2; align-self: end; padding-bottom: 6vh; }
.name {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-optical-sizing: auto;
  font-size: clamp(76px, 16.8vw, 268px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.name-line { display: block; }
.hero-sub {
  margin: 40px 0 0;
  display: flex; flex-wrap: wrap; gap: 4px 32px;
  font: 400 21px/1.3 var(--text);
  color: var(--ink2);
}
.hero-photo {
  grid-column: 8 / -1; grid-row: 2;
  margin: 28px 0 0;
  align-self: end;
  justify-self: end;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: calc(100svh - 136px);
  overflow: hidden;
  background: oklch(0.32 0.04 128);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Letters rising out of the baseline ---------- */
.rw { display: inline-block; vertical-align: top; padding-bottom: 0.16em; margin-bottom: -0.16em;
  /* Mask only below the baseline, where letters rise from; leave room above for the i's dot and accents. */
  clip-path: inset(-0.6em -0.3em 0 -0.3em); }
.rc { display: inline-block; will-change: transform; }

/* ---------- Projects ---------- */
.proj { padding: 22vh var(--side) 8vh; }
.proj-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  margin-bottom: 7vh;
}
.proj-head > div { grid-column: 1 / span 9; }
.proj-head.right > div { grid-column: 5 / -1; }
.proj-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 320;
  font-size: clamp(52px, 8.6vw, 136px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.proj-kind { margin: 24px 0 0; font: 400 21px/1.35 var(--text); color: var(--ink2); }

.proj-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: start;
}
.ph {
  margin: 0;
  grid-column: var(--col);
  margin-top: var(--mt, 0);
  aspect-ratio: var(--ar);
  overflow: hidden;
  background: color-mix(in oklch, var(--ink) 10%, transparent);
  transform: translate3d(0, 64px, 0);
  opacity: 0;
  transition: transform 1.3s var(--ease-out), opacity 1s var(--ease-out);
}
.ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.8s var(--ease-out); }
.ph.in { transform: none; opacity: 1; }
.ph.in img { transform: none; }

/* ---------- About ---------- */
.about {
  padding: 24vh var(--side) 10vh;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
}
.bio {
  grid-column: 2 / span 9;
  margin: 0;
  font-family: var(--display);
  font-weight: 340;
  font-size: clamp(30px, 3.7vw, 56px);
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--ink2);
  text-wrap: pretty;
}
.bio em { font-style: normal; color: var(--ink); }
.practice {
  grid-column: 2 / span 10;
  margin-top: 9vh;
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gap);
}
.practice p { grid-column: 1 / span 4; margin: 0; font: 400 19px/1.5 var(--text); color: var(--ink); max-width: 30ch; }
.services { grid-column: 6 / span 5; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px var(--gap); font: 400 19px/1.4 var(--text); color: var(--ink2); }

/* ---------- Contact ---------- */
.contact {
  padding: 26vh var(--side) 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  min-height: 100svh;
}
.contact-lede { grid-column: 1 / span 6; }
.contact-title {
  margin: 0;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(52px, 8.6vw, 136px); line-height: 0.94; letter-spacing: -0.025em;
}
.contact-lines { list-style: none; margin: 8vh 0 0; padding: 0; display: grid; gap: 10px; }
.contact-lines a, .contact-lines span {
  font-family: var(--display); font-weight: 340;
  font-size: clamp(26px, 2.7vw, 40px); line-height: 1.2; letter-spacing: -0.01em;
  text-decoration: none;
}
.contact-lines span { color: var(--ink2); }
.contact-lines a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition: background-size 280ms var(--ease-ui);
  display: inline-block; padding: 8px 0 10px; margin: -8px 0 -10px;   /* 44px tall target */
  background-position: 0 calc(100% - 8px);
}
.contact-lines a:hover { background-size: 100% 1px; }

.form { grid-column: 8 / -1; align-self: end; display: grid; gap: 28px; }
.form-fields { display: grid; gap: 26px; transition: opacity 400ms var(--ease-ui); }
.field-row { display: grid; gap: 8px; }
.field-row > span { font: 500 14px/1.2 var(--text); color: var(--ink2); }
.field-row input, .field-row textarea {
  font: 400 18px/1.45 var(--text);
  color: var(--ink);
  width: 100%;
  resize: none;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 200ms ease-out, background-color 200ms ease-out, box-shadow 200ms ease-out;
}
.field-row input:hover, .field-row textarea:hover { border-color: color-mix(in srgb, var(--ink) 36%, transparent); }
.field-row input:focus, .field-row textarea:focus { outline: none; border-color: var(--ink); background: color-mix(in srgb, var(--ink) 2%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent); }
.field-row [aria-invalid="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 16%, transparent); }
.field-row textarea { min-height: 96px; }

.form-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.send {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 16px/1 var(--text);
  color: oklch(0.30 0.05 56);
  background: var(--ink);
  border: 0; border-radius: 999px;
  padding: 18px 22px 18px 28px;
  cursor: pointer;
  transition: background 200ms var(--ease-ui), transform 160ms var(--ease-ui);
}
.send:hover { background: oklch(0.97 0.02 72); }
.send:active { transform: scale(0.97); }
.send-arrow { width: 16px; height: 16px; transition: transform 220ms var(--ease-ui); }
.send:hover .send-arrow { transform: translateX(3px); }
.form-note { margin: 0; font: 500 16px/1.4 var(--text); color: var(--ink); min-height: 1.4em; }
.form.is-sent .form-fields { opacity: 0.45; }
.form.is-sent .send, .form.is-sending .send { pointer-events: none; }
.form.is-sending .send { opacity: 0.7; }
.form-note a { color: inherit; }

.footer {
  grid-column: 1 / -1;
  align-self: end;
  padding: 14vh 0 64px;
  display: flex; justify-content: flex-end;
  font: 500 14px/1.2 var(--text);
  color: var(--ink2);
}

/* ---------- Mobile ---------- */
/* Phones, and tablets held upright: one column. */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  :root { --side: 20px; --gap: 12px; }
  body { font-size: 1rem; }
  .hero { grid-template-rows: auto auto auto; padding: 18px var(--side) 28px; min-height: auto; }
  .nav { grid-column: 1 / -1; gap: 22px; font-size: 15px; }
  .hero-type { grid-column: 1 / -1; grid-row: 2; align-self: start; margin-top: 32px; }
  .name { font-size: clamp(64px, 23.5vw, 120px); }
  .hero-sub { margin-top: 18px; font-size: 18px; gap: 2px 18px; }
  .hero-type { padding-bottom: 0; }
  .cta { top: 12px; padding: 12px 18px; font-size: 15px; min-height: 44px; }
  .hero-photo { grid-column: 1 / -1; grid-row: 3; margin-top: 26px; max-height: 60svh; justify-self: stretch; }

  .proj { padding: 16vh var(--side) 6vh; }
  .proj-head { margin-bottom: 44px; }
  .proj-head > div, .proj-head.right > div { grid-column: 1 / -1; }
  .proj-title { font-size: clamp(44px, 13.4vw, 64px); }
  .proj-kind { margin-top: 14px; font-size: 18px; }
  .proj-grid { display: flex; flex-direction: column; gap: 14px; }
  .ph { margin-top: 0 !important; width: 100%; }
  .ph:nth-child(3n + 2) { width: 74%; align-self: flex-end; margin-top: 28px !important; }
  .ph:nth-child(3n + 3) { width: 86%; margin-top: 28px !important; }

  .about { padding: 16vh var(--side) 4vh; display: block; }
  .bio { font-size: 31px; line-height: 1.2; }
  .practice { display: block; margin-top: 56px; }
  .practice p { font-size: 17px; }
  .services { margin-top: 28px; font-size: 17px; }

  .contact { display: block; padding: 20vh var(--side) 0; min-height: auto; }
  .contact-title { font-size: clamp(52px, 15vw, 72px); }
  .contact-lines { margin-top: 36px; }
  .contact-lines a, .contact-lines span { font-size: 26px; }
  .form { margin-top: 64px; }
  .field-row input, .field-row textarea { font-size: 16px; }
  .footer { padding: 96px 0 64px; justify-content: flex-end; }
}

@media (min-width: 761px) and (max-width: 1100px) and (orientation: landscape) {
  :root { --side: 32px; --gap: 18px; }
  .hero-type { grid-column: 1 / span 7; }
  .bio { grid-column: 1 / -1; }
  .practice { grid-column: 1 / -1; }
}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .ph, .ph img { transform: none !important; opacity: 1 !important; transition: none !important; }
  .rc { transform: none !important; }
  .nav a, .send, .send-arrow, .contact-lines a, .index-link, .cta { transition: none; }
}