/* Colours sampled from the painting */
:root {
  --bg: #f7f4ee;
  --ink: #2e3237;
  --muted: #8a8173;
  --line: #ddd5c8;
  --river: #5f7c8f;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 64px);
}

* { box-sizing: border-box; margin: 0; }

/* The window itself never scrolls; only the Readme text does */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

/* Three columns: side | painting (two-thirds) | empty. Fills the window exactly */
.page {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    ".    title    ."
    "side painting .";
  column-gap: clamp(24px, 3vw, 56px);
  padding: clamp(40px, 7vh, 96px) var(--gutter);
}

.title {
  grid-area: title;
  margin-bottom: clamp(24px, 4vh, 40px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.side { grid-area: side; }

/* Links use the original subtitle style: small spaced capitals */
.links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 22px;
  padding-top: 4px;
}

.links a {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}

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

.painting { grid-area: painting; min-height: 0; }

/* Shrinks to fit the window height, so the home page never scrolls */
.painting img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 30px 60px -30px rgba(70, 58, 44, 0.45);
}

/* Readme: name and links stay put; the text scrolls in its own area */
.readme { padding-bottom: 0; }

.readme .links a { text-align: right; }

.links a[aria-current] { color: var(--ink); }

/* Readme's sections open below it and push LinkedIn and Email down */
.sub {
  display: grid;
  grid-template-rows: 1fr;
  margin: -8px 0 0;
  animation: reveal 0.35s ease-out;
  transition: grid-template-rows 0.35s ease-out, opacity 0.35s ease-out, margin 0.35s ease-out;
}
.sub > div {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.sub a { font-size: 0.7rem; }
/* Closed, the -14px cancels the extra gap so LinkedIn sits where it does on the home page */
@keyframes reveal { from { grid-template-rows: 0fr; opacity: 0; margin-bottom: -14px; } }

/* Going home: the sections fold away and the thumbnail fades, then the page changes */
.links.closing .sub { animation: none; grid-template-rows: 0fr; opacity: 0; margin-bottom: -14px; }
.links.closing a[aria-current] { color: var(--muted); transition-duration: 0.35s; }
.readme .links.closing .home img { opacity: 0; transition-duration: 0.35s; }

/* Painting thumbnail links home, below the sections so they never move */
.readme .links .home { margin-top: 12px; line-height: 0; }
.readme .links .home img {
  display: block;
  width: 96px;
  height: auto;
  box-shadow: 0 10px 20px -12px rgba(70, 58, 44, 0.5);
  transition: opacity 0.15s;
}
.readme .links .home:hover img { opacity: 0.85; }

.prose {
  grid-row: 2;
  grid-column: 2 / 4; /* spans to the right edge so the scrollbar sits there */
  margin-right: calc(-1 * var(--gutter));
  padding: 0 var(--gutter) 64px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

.prose:focus { outline: none; }
.prose > * { max-width: 640px; }
.prose.scrolled { -webkit-mask-image: linear-gradient(transparent, #000 32px); mask-image: linear-gradient(transparent, #000 32px); }

.prose p { margin-bottom: 1.1em; }

.prose .lede {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.45;
}

.prose h2 {
  margin: 56px 0 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  scroll-margin-top: 0;
}

.prose strong { font-weight: 500; }

.roles { display: grid; grid-template-columns: 9.5rem 1fr; gap: 14px 24px; }
.roles dt { font-weight: 500; }
.roles dd { margin: 0; color: #4a4e53; }

/* Tall enough that Experience can scroll to the top like Approach */
.prose .last { min-height: 100%; }

/* Phone: name, painting, then links in a row */
@media (max-width: 760px) {
  .page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "title" "painting" "links";
    align-content: start;
  }
  .painting img { max-height: 60vh; max-height: 60dvh; }
  .side { display: contents; }
  .links {
    grid-area: links;
    flex-direction: row;
    justify-content: center;
    gap: 28px;
    margin-top: 32px;
  }
  .readme {
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "title" "links" "painting";
  }
  .prose { grid-area: painting; }

  /* Phone Readme: the page scrolls normally; the name stays pinned and the menu scrolls away */
  .readme-doc, .readme-doc body { height: auto; overflow: visible; overscroll-behavior: auto; }
  .readme { height: auto; padding-top: 0; }
  .readme .title {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: clamp(40px, 7vh, 96px) 0 16px; /* same spot as on the home page */
    margin-bottom: 16px;
    background: var(--bg);
  }
  .readme .title::after { /* soft fade as text slides under the name */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 20px;
    background: linear-gradient(var(--bg), transparent);
  }
  .readme .prose { overflow: visible; margin-right: 0; padding-right: 0; }
  .readme .prose.scrolled { -webkit-mask-image: none; mask-image: none; }
  .readme .prose h2 { scroll-margin-top: 130px; }
  .readme .prose .last { min-height: calc(100vh - 130px); min-height: calc(100dvh - 130px); }
  .readme .links {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 40px;
  }
  .readme .links a { text-align: left; }
  .sub > div { align-items: flex-start; padding-left: 14px; }
  .sub { margin: -4px 0 0; }
  /* Thumbnail sits on the right margin, level with the top of APPROACH */
  .readme .links { position: relative; }
  .readme .links .home { position: absolute; top: 8px; right: 0; margin: 0; }
  .roles { grid-template-columns: 1fr; gap: 2px; }
  .roles dd { margin-bottom: 14px; }
}