/*
  Design system: black and white, one red accent, a strawberry print for
  the one moment worth spending it on.
  Playfair Display carries every headline at a genuinely oversized scale —
  this is a portfolio for a painter, so the type itself should feel like a
  gallery placard, not a SaaS landing page. Source Serif 4 for anything
  meant to be read at length (bio, CV). JetBrains Mono, small and tracked
  out, for everything structural — nav, labels, years, byline — so it
  reads as curatorial metadata next to the display type, not UI chrome.

  Base palette is true black/white — no grey hex anywhere, "muted" text
  is black at reduced opacity rather than a designed grey tone. Red
  (--accent) is the only color, used sparingly on small UI (links, focus,
  borders). The strawberry print — assets/strawberry-print.png, built
  from Bree's own drawn strawberry (the same one the favicon is cropped
  from), not a stock/internet image — is reserved for the "strawbreearts"
  hero wordmark specifically: a busy print reads as texture at that size,
  but turns to noise on small text, so it doesn't appear anywhere tiny.
*/

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300&display=swap');

:root {
  --ink: #000000;
  --paper: #ffffff;
  --surface: #ffffff;
  --line: rgba(0, 0, 0, 0.15);
  --muted: rgba(0, 0, 0, 0.55);
  --accent: #c81e3f;
  --accent-soft: #f8dbe1;
  /* same red, lightened — the plain accent is too close in value to the
     near-black hero background to read clearly there */
  --accent-on-dark: #ff8095;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --max-width: 74rem;
  --gap: 1.5rem;
  --edge: clamp(1.5rem, 5vw, 4rem);
}

* {
  box-sizing: border-box;
}

html {
  /* safety net: nothing should cause horizontal scroll, but if something
     does, hide it rather than let the whole page shift sideways */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  margin: 0;
}

/* ---------- nav ---------- */

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
  padding: 1.5rem var(--edge);
  max-width: var(--max-width);
  margin: 0 auto;
  font-family: var(--font-mono);
}

/* Landing page only: nav floats over the full-bleed studio scan instead of
   sitting in normal document flow above it. */
nav.nav-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  max-width: none;
}

/* TODO: swap for Bree's chosen wordmark typeface once she picks one */
.brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--ink);
  text-decoration: none;
}

nav.nav-overlay .brand {
  color: var(--paper);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 0.6rem;
}

/* Four nav links + a dropdown at 0.72rem/0.12em tracking don't fit one row
   under ~480px — wrap onto a second line rather than forcing horizontal
   scroll on the whole page. */
@media (max-width: 30rem) {
  nav {
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }

  .nav-links {
    gap: 1.1rem;
    width: 100%;
    justify-content: flex-start;
  }
}

nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

nav.nav-overlay .nav-links a,
nav.nav-overlay .nav-dropdown summary {
  color: var(--paper);
}

nav a[aria-current="page"] {
  color: var(--accent);
}

nav.nav-overlay a[aria-current="page"] {
  color: var(--accent-on-dark);
}

.nav-dropdown {
  position: relative;
  /* Pins Mediums to the right edge of whatever row it's on. Matters most
     on mobile: .nav-links wraps and could put Mediums alone on its own
     row, which — without this — would start back at the left edge and
     reintroduce the exact off-screen dropdown problem this is fixing. */
  margin-left: auto;
}

.nav-dropdown summary {
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown[open] summary {
  color: var(--accent);
}

nav.nav-overlay .nav-dropdown[open] summary {
  color: var(--accent-on-dark);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  /* "Mediums" is now the last/rightmost nav item (both desktop and the
     wrapped mobile row), so right-aligning the menu to it keeps the menu
     sitting at the top-right corner of the nav and gives it room to
     extend leftward — no off-screen overflow, and it reads as "top
     right", not stranded under the leftmost item. */
  right: 0;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
  background: var(--surface);
  border: 1px solid var(--line);
}

.dropdown-menu a {
  padding: 0.75rem 1.1rem;
  color: var(--ink);
}

.dropdown-menu a:hover {
  color: var(--accent);
}

/* The dropdown popup always has a light background (regardless of nav
   variant), so its links must always be dark — matches the specificity of
   nav.nav-overlay .nav-links a above (which would otherwise win and make
   these invisible: white text on the dropdown's white background) and
   wins on source order. */
nav.nav-overlay .dropdown-menu a {
  color: var(--ink);
}

/* ---------- page shell ---------- */

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem var(--edge) 5rem;
}

/* Every inner page opens on a full statement headline — a gallery
   placard, not a page title. */
main > h1 {
  font-size: clamp(3.2rem, 11vw, 7.5rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 14ch;
}

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.byline {
  font-family: var(--font-mono);
  color: var(--muted);
  margin-top: 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

main > .byline {
  margin-top: 1.25rem;
  margin-bottom: 3rem;
}

/* ---------- landing hero ---------- */

.hero-scan {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 480px;
  overflow: hidden;
  /* TODO: temporary placeholder tone until the real GLB is in — remove
     once studio-scan.glb exists, model-viewer's own poster takes over. */
  background: var(--ink);
}

.scan-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  --poster-color: transparent;
}

/* Placeholder for the studio scan — see js/ascii-waves.js. Sits behind
   .scan-viewer (DOM order), which is transparent until it has a model to
   show, so this reads through until then. */
.ascii-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  /* let orbit-drag on the model pass through the overlay */
  pointer-events: none;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: 1.25rem;
}

/*
  "strawbreearts", solid accent red for now. TODO: Bree's sending a
  proper high-res strawberry photo/print — once that's in, this can
  become a background-clip:text texture instead of a flat color (a
  generated placeholder print was tried here and didn't land; waiting
  for the real thing rather than guessing again).
*/
.strawbree-text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(3.5rem, 13vw, 9.5rem);
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--accent-on-dark);
}

.hero-overlay .byline {
  color: var(--paper);
  opacity: 0.85;
  font-size: 0.85rem;
  margin-top: 1.5rem;
}

/* ---------- about ---------- */

.bio {
  /* new block formatting context so the floated ::first-letter below is
     contained inside .bio's own box instead of bleeding into whatever
     comes after it on the page. */
  display: flow-root;
}

.bio p {
  max-width: 62ch;
  font-size: 1.1rem;
}

.bio p::first-letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.8rem;
  float: left;
  line-height: 0.8;
  padding: 0.1rem 0.5rem 0 0;
  color: var(--accent);
}

/* ---------- portfolio grids ---------- */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2.5rem;
}

.portfolio-piece {
  margin: 0;
}

.portfolio-piece img {
  display: block;
  width: 100%;
  height: auto;
}

.portfolio-piece figcaption {
  margin-top: 0.75rem;
}

.portfolio-piece h3 {
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  margin: 0 0 0.2rem;
}

.portfolio-piece p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- CV ---------- */

.cv-section {
  margin-top: 3.5rem;
  /* without a cap, the year column sits stranded far left of the detail
     text once the row is as wide as the whole page on a big screen */
  max-width: 44rem;
}

.cv-section h2 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.9rem;
}

.cv-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.cv-list li {
  display: flex;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.cv-list li:last-child {
  border-bottom: none;
}

.cv-year {
  flex: 0 0 8rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  padding-top: 0.2rem;
}

.cv-detail {
  font-size: 1.05rem;
}

/* year+detail side-by-side gets cramped once the row is under ~360px —
   stack instead of squeezing the detail column to a sliver. */
@media (max-width: 30rem) {
  .cv-list li {
    flex-direction: column;
    gap: 0.35rem;
  }

  .cv-year {
    flex: none;
  }
}

.cv-detail em {
  font-style: italic;
  color: var(--muted);
}

/* ---------- shared bits ---------- */

/* A soft solid panel, not a dashed wireframe box — reads as "this space
   is reserved" rather than "this is broken/unfinished". */
.placeholder-card {
  background: var(--accent-soft);
  border-radius: 2px;
  padding: 2.5rem 1.5rem;
  color: var(--muted);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.social-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
}

.social-links a {
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.1rem;
}

.social-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

form.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 32rem;
  margin-top: 2.5rem;
}

form.contact-form label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

form.contact-form input,
form.contact-form textarea {
  font: inherit;
  font-family: var(--font-body);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
}

form.contact-form input:focus,
form.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  border-width: 2px;
  padding: calc(0.75rem - 1px) calc(0.9rem - 1px);
}

form.contact-form button {
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.85rem 1.75rem;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms ease;
}

form.contact-form button:hover {
  background: var(--accent);
}

footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem var(--edge) 3rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-top: 1px solid var(--line);
}