/* --------------------------------------------------------------
   Colours. Two sets: one for light screens, one for dark.
   The browser picks automatically based on the visitor's system.
   Change a value here and it changes everywhere on the page.

   --accent is the one warm colour on the page, a coffee brown.
   It appears in exactly four places: section labels, links on
   hover, the button on hover, and selected text.
   -------------------------------------------------------------- */

:root {
  --bg:     #fdfdfc;
  --text:   #1a1a18;
  --muted:  #6b6b66;
  --rule:   #e0e0dc;
  --accent: #8a5a3c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #141413;
    --text:   #eeeeec;
    --muted:  #9a9a94;
    --rule:   #2f2f2c;
    --accent: #c89b76;   /* lighter, so it stays readable on dark */
  }
}

/* --------------------------------------------------------------
   The typeface. Inter lives in the fonts/ folder next to this file,
   so the page loads nothing from anywhere else on the internet.

   It's a variable font: one file holds every weight between 400 and
   600, which is why `font-weight: 400 600` below covers the whole
   range instead of needing a separate file per weight.

   Two files, split by alphabet. The browser downloads only the ones
   it actually needs for the characters on the page, which is why
   `unicode-range` is there. Plain English text never fetches
   latin-ext at all; accented letters (à, ć, ø) trigger it.
   -------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;   /* show the fallback right away, swap Inter
                           in when it lands — never invisible text */
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Everything after "Inter" is a fallback, used only if the file is
   missing. Each is a system's own sans, so the page still looks
   right rather than dropping to Times. */

:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------
   Page. The body is a flexbox and `margin: auto` on main centres
   it in the window, both directions. The page is short, so this
   makes it look composed rather than stranded at the top.
   -------------------------------------------------------------- */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;       /* a sans reads bigger than a serif at the
                            same size, so this is a notch down */
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  min-height: 100dvh;
}

main {
  margin: auto;          /* this is what does the centring */
  max-width: 34rem;      /* keeps lines short and readable */
  padding: 4rem 1.5rem;
  animation: appear 0.4s ease both;
}

/* A slow fade upward on load. Barely noticeable on purpose. */

@keyframes appear {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

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

/* --------------------------------------------------------------
   Typography
   -------------------------------------------------------------- */

/* Portrait — small and square-ish, so it reads as a byline
   rather than a hero image. Change 88px to resize it. */

.portrait {
  width: 88px;
  height: 88px;
  object-fit: cover;      /* crops to a square without squashing */
  border-radius: 50%;     /* delete this line for a square photo */
  display: block;
  margin-bottom: 1.75rem;
}

/* Big text in a sans needs tighter spacing than small text, or the
   letters look loose. That is what the negative letter-spacing does. */

h1 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

/* Section labels: small, uppercase, and spaced out. Uppercase text
   is hard to read when the letters are tight, so this goes the
   other way from the heading above.

   These are in the accent brown rather than grey, so the eye has
   something to land on partway down the page. */

h2 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
}

p {
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------
   Sections — a thin rule separates each one
   -------------------------------------------------------------- */

section {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding-top: 2rem;
}

footer {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding-top: 2rem;
  color: var(--muted);
  font-size: 0.875rem;
}

/* The two footer lines belong together, so they sit closer than
   normal paragraphs. Same size and same weight: they read as one
   block, not as a line plus a footnote. */

footer p:first-child {
  margin-bottom: 0.3rem;
}

/* --------------------------------------------------------------
   Links.

   Two underlines are stacked on top of each other: a faint grey
   one always visible, and a coloured one that grows from left to
   right on hover. They are drawn as background images because
   only those can be animated; a normal underline cannot.
   -------------------------------------------------------------- */

a:not(.action) {
  color: var(--text);
  text-decoration: none;
  padding-bottom: 2px;
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--rule), var(--rule));
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.18s ease, color 0.18s ease;
}

a:not(.action):hover,
a:not(.action):focus-visible {
  color: var(--accent);
  background-size: 100% 1px, 100% 1px;
}

.project {
  font-weight: 500;   /* 600 looks shouty inside a sentence in Inter */
}

/* Call to action — an outlined button, deliberately understated
   so it doesn't fight the rest of the page. It fills in on hover. */

.action {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.action:hover,
.action:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* --------------------------------------------------------------
   Small screens
   -------------------------------------------------------------- */

@media (max-width: 480px) {
  main {
    padding: 3rem 1.25rem;
  }
}

/* Visitors who have asked their system to reduce motion get
   no animation at all. */

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