/* ==========================================================================
   Agnes Charton — personal site
   Ported from the Claude Design prototype ("Personal Website Design Plan").

   Contents:
     1. Tokens
     2. Reset & base
     3. Layout shell (sidebar + main)
     4. Nav
     5. Typography / prose
     6. Artifacts page
     7. Project case study
     8. Path page (timeline)
     9. Responsive
    10. Motion & print
   ========================================================================== */


/* 1. Tokens ================================================================ */

:root {
  /* Palette — taken verbatim from the prototype */
  --bg:        #f7f5ef;   /* warm cream */
  --ink:       #1b1a17;   /* near-black, headings + active nav */
  --body:      #26251f;   /* body copy */
  --muted:     #4a483f;   /* secondary copy */
  --faint:     #8a887e;   /* years, asides, "More soon." */
  --accent:    #b0402c;   /* rust, hover only */
  --rule:      rgba(27, 26, 23, 0.12);
  --rule-firm: rgba(27, 26, 23, 0.16);
  --nav-idle:  rgba(27, 26, 23, 0.5);

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Layout */
  --sidebar:    158px;
  --measure:    660px;
  --pad-top:    56px;
  --shell-left: 64px;   /* gap from the left edge to the sidebar */

  /* Timeline columns — the rail sits at year + half the dot column */
  --year-col:  96px;
  --dot-col:   28px;
}

/* The design is light-only by intent; stop browsers auto-inverting it. */
:root { color-scheme: light; }


/* 2. Reset & base ========================================================== */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--ink); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 0.6rem 1rem;
  font-size: 15px;
  z-index: 10;
}
.skip-link:focus { left: 0; }

/* Inline link: hairline underline that warms to rust on hover. */
.inl {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(27, 26, 23, 0.4);
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.inl:hover { text-decoration-color: var(--accent); color: var(--accent); }


/* 3. Layout shell ========================================================== */

/* Left-oriented: the sidebar sits a fixed distance from the left edge rather
   than the whole shell being centred in the viewport. --shell-left is the
   only number to change if that gap wants to be wider or tighter. */
.shell {
  display: flex;
  justify-content: flex-start;
  min-height: 100vh;
  padding-left: var(--shell-left);
  padding-right: 24px;
}

.sidebar {
  width: var(--sidebar);
  flex: none;
  border-right: 1px solid var(--rule-firm);
  padding: var(--pad-top) 28px 40px 0;
}

.content {
  flex: 1;
  min-width: 0;
  max-width: var(--measure);
  padding: var(--pad-top) 0 90px 40px;
}

/* Each view fades in, matching the prototype's page transition. */
.view { animation: fadein 0.4s ease both; }

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


/* 4. Nav =================================================================== */

.nav {
  position: sticky;
  top: var(--pad-top);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  text-align: right;
}

.nav a {
  font-size: 18px;
  line-height: 1.2;
  font-style: italic;
  font-weight: 300;
  color: var(--nav-idle);
  transition: color 0.2s ease;
}

.nav a:hover { color: var(--ink); }

/* Current page: upright, heavier, full contrast. */
.nav a[aria-current="page"] {
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
}


/* 5. Typography / prose ==================================================== */

.page-title {
  font-size: 21px;
  margin-bottom: 30px;
}

/* Path page pairs its title with a subtitle, so it needs a tighter gap. */
.page-title--tight { margin-bottom: 6px; }

.page-sub {
  font-size: 16px;
  font-style: italic;
  color: #6a685f;
  margin-bottom: 44px;
}

.prose {
  font-size: 19px;
  line-height: 1.68;
  color: var(--body);
}
.prose p { margin-bottom: 22px; }
.prose p:last-child { margin-bottom: 0; }


/* 6. Artifacts page ======================================================== */

.entry {
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--rule);
}

.entry__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.entry__title {
  font-size: 19px;
}

.entry__desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

/* Role credit, on its own line under the project description. */
.entry__role {
  display: block;
  font-style: italic;
}

.year {
  font-size: 11px;
  font-style: italic;
  color: var(--faint);
  flex: none;
}

.note {
  font-size: 15px;
  font-style: italic;
  color: var(--faint);
}

.section-gap { margin-bottom: 52px; }

.subhead {
  font-size: 16px;
  font-style: italic;
  margin-bottom: 22px;
}

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.row a { font-size: 17px; }

/* Left column of a row: title, plus an optional subtitle beneath it.
   Baseline alignment keeps the year level with the title, not the subtitle. */
.row__main { min-width: 0; }

.row__sub {
  font-size: 14px;
  font-style: italic;
  color: var(--faint);
  margin-top: 2px;
}


/* 7. Project case study ==================================================== */

/* A project page is a child of Artifacts, so it opens with a way back up. */
.backlink {
  display: inline-block;
  font-size: 14px;
  font-style: italic;
  color: var(--faint);
  margin-bottom: 26px;
  transition: color 0.2s ease;
}
.backlink:hover { color: var(--accent); }

/* Role and context, directly under the project title. */
.project-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 40px;
}

/* Each case-study section pairs a .subhead with body copy. */
.case { margin-bottom: 42px; }
.case:last-child { margin-bottom: 0; }

.case p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 14px;
}
.case p:last-child { margin-bottom: 0; }

/* Numbered failure modes. The counter sits in the left gutter so the
   headings stay flush with the rest of the page's copy. */
/* The base reset clears list markers on ul only, so ol needs it here too —
   otherwise the browser's numbers render alongside the counter below. */
.probs {
  counter-reset: prob;
  list-style: none;
  margin: 0;
  padding: 0;
}

.prob {
  counter-increment: prob;
  position: relative;
  padding-left: 30px;
  margin-bottom: 22px;
}
.prob:last-child { margin-bottom: 0; }

.prob::before {
  content: counter(prob);
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 12px;
  font-style: italic;
  color: var(--faint);
}

.prob__t {
  font-size: 17px;
  margin-bottom: 4px;
}

/* Screenshots, two up: the admin views on one row, the manager views on the
   next. At this size a dashboard is far too small to read, so each one links
   out to the full-size file. Collapses to one column on narrow screens. */
.figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 26px 20px;
}

.figure { margin: 0; }

.figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule-firm);
}

.figure a { display: block; }
.figure a:hover img { border-color: var(--accent); }

.figure figcaption {
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  color: var(--faint);
  margin-top: 8px;
}

/* .case p would otherwise out-specify .note and undo it. */
.case .note {
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  color: var(--faint);
  margin-top: 20px;
}


/* 8. Path page (timeline) ================================================== */

.timeline { position: relative; }

/* The vertical rail, centred on the dot column. */
.timeline::before {
  content: "";
  position: absolute;
  left: calc(var(--year-col) + var(--dot-col) / 2);
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--ink);
}

.stop {
  display: grid;
  grid-template-columns: var(--year-col) var(--dot-col) 1fr;
  align-items: start;
  margin-bottom: 38px;
}
.stop:last-child { margin-bottom: 0; }

.stop__year {
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding-top: 2px;
  color: var(--muted);
}

.stop__mark {
  display: flex;
  justify-content: center;
  padding-top: 5px;
}

.stop__mark span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  display: block;
}

.stop__body {
  font-size: 12.5px;
  line-height: 1.65;
}

/* Secondary lines under a milestone. */
.stop__body .dim {
  color: var(--faint);
  font-style: italic;
}

/* Lines marked .flow are one continuous list broken across several lines for
   the wide layout. On narrow screens they rejoin and wrap naturally instead
   of stranding a word or two per line. See the mobile block in section 8. */


/* 9. Responsive ============================================================ */

/* Below the two-column threshold the sidebar becomes a top bar. */
@media (max-width: 760px) {
  .shell {
    flex-direction: column;
    padding: 0 24px;
  }

  .sidebar {
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rule-firm);
    padding: 32px 0 16px;
  }

  .nav {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 20px;
    text-align: left;
  }

  .content {
    max-width: none;
    padding: 36px 0 72px;
  }

  .prose { font-size: 18px; }

  /* Tighter timeline gutters on a narrow screen. */
  :root {
    --year-col: 74px;
    --dot-col: 22px;
  }

  .stop { margin-bottom: 30px; }

  /* Two-up screenshots are unreadable at phone width — stack them. */
  .figures { grid-template-columns: 1fr; }

  /* Content runs full width here, so the signature would otherwise sit on top
     of the text. Push it behind the copy, fade it back, and shrink it into
     the corner. Negative z-index keeps it above the page background but
     under everything in flow. */
  .signature {
    width: 120px;
    right: 0;
    bottom: 0;
    opacity: 0.45;
    z-index: -1;
  }

  /* Rejoin hardcoded list lines so they wrap as one paragraph. */
  .stop__body .flow { display: inline; }
  .stop__body .flow::after { content: " "; }
}


/* 10. Signature ============================================================ */

/* Pinned to the bottom-right of the viewport, so it stays put while the page
   scrolls. The PNG's background is genuinely transparent, so it needs no
   blend mode to sit on the cream. Never intercepts clicks.

   Note the file carries ~40% empty space on its left and ~35% on top, with
   the ink flush to its own bottom-right — so the rendered width is roughly
   1.8x the visible signature, and cornering the box corners the ink. */
.signature {
  position: fixed;
  right: 28px;
  bottom: 0;            /* the file is cropped at the baseline on purpose —
                           any gap here would read as a mistake */
  width: 250px;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}


/* 11. Motion & print ======================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .sidebar, .signature { display: none; }
  body { background: #fff; }
  .shell { padding: 0; }
  .content { padding: 0; max-width: none; }
  .entry, .stop, .prob, .figure { break-inside: avoid; }
  .backlink { display: none; }
}