/* ==========================================================================
   Portfolio — stylesheet
   Sections:  1. Tokens   2. Reset   3. Base type   4. Layout
              5. Header   6. Footer  7. Hero  8. Doors
              9. Project cards       10. Buttons
              11. Work with me       12. About        13. Contact
              14. Theme toggle       15. Scroll reveals
              16. Utilities
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS
   Every colour, font and size used anywhere on the site is named once, here.
   Nothing below this block should ever contain a raw hex code.
   -------------------------------------------------------------------------- */

:root {
  /* --- Colour: light theme (the default) --- */
  --paper:        #F4F1EE;  /* page background — warm, but grey rather than yellow */
  --paper-2:      #E9E4DE;  /* slightly deeper: cards, alternating sections */
  --ink:          #241F1C;  /* body text — brown-black, never pure #000 */
  --ink-2:        #5C544C;  /* secondary text */
  --ink-3:        #8C8177;  /* captions, disabled, faint labels */
  --rule:         #DDD6CE;  /* hairlines and borders */
  --accent:       #4A5335;  /* deep olive — links, emphasis */
  --accent-hover: #333A22;
  --accent-wash:  #E4E6D6;  /* tinted background behind accent content */

  /* Tells the browser to render scrollbars and form controls light */
  color-scheme: light;

  /* --- Type --- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "Karla", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* A fixed scale. Pick from these — don't invent new sizes inline.
     clamp(min, preferred, max) = fluid sizing without media queries. */
  --fs-xs:   0.78rem;
  --fs-sm:   0.9rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.25rem;
  --fs-lg:   clamp(1.4rem,  1.20rem + 0.9vw, 1.85rem);
  --fs-xl:   clamp(1.9rem,  1.50rem + 1.9vw, 2.90rem);
  --fs-2xl:  clamp(2.6rem,  1.80rem + 3.6vw, 4.60rem);

  /* --- Spacing. Same idea: a fixed set, used everywhere. --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;

  /* --- Layout --- */
  --wrap:    1120px;  /* max width of the content column */
  --measure: 68ch;    /* max width of running text, for readability */
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
}

/* --- Colour: dark theme ---
   Only the tokens change. Not a single component rule is repeated.
   Phase 5 adds a manual toggle on top of this. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #1A1714;
    --paper-2:      #241F1B;
    --ink:          #EDE7E0;
    --ink-2:        #B0A69B;
    --ink-3:        #7E7469;
    --rule:         #322B25;
    --accent:       #A8B87A;  /* olive lifted so it stays legible on dark */
    --accent-hover: #C3D096;
    --accent-wash:  #262A1B;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:        #1A1714;
  --paper-2:      #241F1B;
  --ink:          #EDE7E0;
  --ink-2:        #B0A69B;
  --ink-3:        #7E7469;
  --rule:         #322B25;
  --accent:       #A8B87A;
  --accent-hover: #C3D096;
  --accent-wash:  #262A1B;
  color-scheme: dark;
}


/* --------------------------------------------------------------------------
   2. RESET
   Browsers ship their own default styles. These few rules flatten the
   differences so we start from a predictable place.
   -------------------------------------------------------------------------- */

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

/* Kill default margins; we add spacing back deliberately with layout. */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

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

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

/* Anyone who has asked their OS to reduce motion gets no motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* --------------------------------------------------------------------------
   3. BASE TYPE
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Sticky footer: body fills the screen, main takes the slack. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;   /* stops a lone word dangling on its own line */
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { max-width: var(--measure); }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.15s ease;
}
a:hover { color: var(--accent-hover); }

/* Visible keyboard focus. Never remove this without replacing it. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent-wash); color: var(--ink); }

/* Small uppercase label — used for section eyebrows and metadata. */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}


/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */

/* The content column. Everything visible sits inside one of these. */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Vertical rhythm between major bands of the page. */
.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.section--alt { background: var(--paper-2); }

main { flex: 1; }


/* --------------------------------------------------------------------------
   5. SITE HEADER
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--sp-4);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--accent); }

.site-nav ul {
  display: flex;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  padding-block: var(--sp-1);
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--ink); }

/* The current page marks itself — driven by aria-current in the HTML,
   so the styling and the accessibility information can never disagree. */
.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}


/* --------------------------------------------------------------------------
   6. SITE FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-6);
  margin-top: var(--sp-8);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  align-items: baseline;
  justify-content: space-between;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }


/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */

.hero { padding-block: var(--sp-9) var(--sp-7); }

.hero__eyebrow { display: block; margin-bottom: var(--sp-5); }

.hero__title {
  max-width: 20ch;          /* forces a deliberate line break, not a random one */
  margin-bottom: var(--sp-5);
}

.hero__lede {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 54ch;
}
.hero__lede strong { color: var(--ink); font-weight: 500; }


/* --------------------------------------------------------------------------
   8. THE TWO DOORS
   -------------------------------------------------------------------------- */

.doors { padding-bottom: var(--sp-8); }

.doors__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

@media (max-width: 46rem) {
  .doors__grid { grid-template-columns: 1fr; }
}

/* The whole card is one link, so the entire block is clickable. */
.door {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-6);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.door:hover {
  color: var(--ink);
  background: var(--accent-wash);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.door__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.door__text {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  max-width: 34ch;
}

.door__arrow {
  justify-self: start;
  margin-top: var(--sp-3);
  font-size: var(--fs-md);
  color: var(--accent);
  transition: transform 0.18s ease;
}
.door:hover .door__arrow { transform: translateX(4px); }


/* Scroll targets stop just short of the top edge rather than jamming into it. */
section[id] { scroll-margin-top: var(--sp-6); }


/* --------------------------------------------------------------------------
   9. PROJECT CARDS
   -------------------------------------------------------------------------- */

.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.work__more { font-size: var(--fs-sm); text-decoration: none; }
.work__more:hover { text-decoration: underline; }

/* auto-fit + minmax = 3 across, then 2, then 1 — with no media queries at all.
   min(100%, 19rem) stops the columns overflowing on a narrow phone. */
.work__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--sp-7) var(--sp-5);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.card__media {
  display: block;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

.card__media img {
  width: 100%;
  aspect-ratio: 8 / 5;   /* every screenshot crops to the same shape, whatever you upload */
  object-fit: cover;
  transition: transform 0.4s ease;
}
.card__media:hover img { transform: scale(1.03); }

.card__title { font-size: var(--fs-md); }

.card__text {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  max-width: 42ch;
}

.card__stack { display: block; }

/* margin-top:auto pushes the links to the bottom, so every card in a row
   lines its links up even when the descriptions are different lengths. */
.card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: auto 0 0;
  padding: var(--sp-2) 0 0;
  list-style: none;
}
.card__links a {
  font-size: var(--fs-sm);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.card__links a:hover { border-bottom-color: var(--accent); }


/* --------------------------------------------------------------------------
   10. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.btn:hover { background: transparent; color: var(--accent); }

.btn--quiet { background: transparent; color: var(--accent); }
.btn--quiet:hover { background: var(--accent); color: var(--paper); }


/* Shared intro paragraph for a section. */
.lede {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
}


/* --------------------------------------------------------------------------
   11. WORK WITH ME
   -------------------------------------------------------------------------- */

.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  padding: 0;
  list-style: none;
}
.offers li { border-top: 2px solid var(--ink); padding-top: var(--sp-3); }
.offers h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.offers p { font-size: var(--fs-sm); color: var(--ink-2); }

/* Numbered because these genuinely happen in order. Never number a list
   that isn't a sequence — the numbers would be saying something untrue. */
.steps {
  display: grid;
  gap: var(--sp-4);
  counter-reset: step;
  max-width: var(--measure);
  margin-top: var(--sp-5);
  padding: 0;
  list-style: none;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--accent);
}
.steps p { font-size: var(--fs-sm); color: var(--ink-2); }
.steps strong { display: block; color: var(--ink); font-weight: 500; font-size: var(--fs-base); }

.pricing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.pricing__figure { font-family: var(--font-display); font-size: var(--fs-lg); }
.pricing__note { font-size: var(--fs-sm); color: var(--ink-2); max-width: 44ch; }


/* --------------------------------------------------------------------------
   12. ABOUT
   -------------------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
  margin-top: var(--sp-6);
}
@media (max-width: 52rem) { .about { grid-template-columns: 1fr; gap: var(--sp-5); } }

.about__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.about__body > * + * { margin-top: var(--sp-4); }
.about__body h2 { font-size: var(--fs-lg); margin-top: var(--sp-6); }


/* --------------------------------------------------------------------------
   13. CONTACT
   -------------------------------------------------------------------------- */

.contact__list {
  max-width: var(--measure);
  margin-top: var(--sp-6);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.contact__list li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 34rem) {
  .contact__list li { grid-template-columns: 1fr; gap: var(--sp-1); }
}
.contact__list a { text-decoration: none; }
.contact__list a:hover { text-decoration: underline; }
.contact__fallback { color: var(--ink-3); font-size: var(--fs-sm); }


/* --------------------------------------------------------------------------
   14. THEME TOGGLE
   -------------------------------------------------------------------------- */

.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

/* Hidden by default. The .js class is added by the inline script in <head>,
   so a browser with JavaScript off never sees a button that does nothing. */
.theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* Show the icon for the theme you'd switch TO, not the one you're in. */
:root[data-theme="dark"] .icon-moon { display: none; }
:root:not([data-theme="dark"]) .icon-sun { display: none; }


/* --------------------------------------------------------------------------
   15. SCROLL REVEALS

   Note the .js prefix on every rule. Without JavaScript nothing is hidden,
   so a failed script can never leave the page blank. This is the single
   most common way scroll animations break a site.
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Anyone who asked for less motion gets the content, immediately, with no move. */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   16. UTILITIES
   -------------------------------------------------------------------------- */

/* Present for screen readers, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Off-screen until a keyboard user tabs to it, then it flies in. */
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 10;
  background: var(--accent);
  color: var(--paper);
  padding: var(--sp-2) var(--sp-4);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); color: var(--paper); }


/* --- Temporary: remove when Phase 2 lands --- */
.scaffold {
  border: 1px dashed var(--rule);
  padding: var(--sp-6);
  text-align: center;
  color: var(--ink-2);
}
.scaffold h1 { margin-bottom: var(--sp-3); }
.scaffold p { margin-inline: auto; }