/* ==========================================================================
   stevenmellett.com

   One stylesheet for the whole site. Every page links to this file.

   HOW TO CHANGE THINGS
     colours ................ the :root block right below
     page width ............. --max
     fonts .................. --mono (and the <link> in each page's <head>)

   There is no JavaScript anywhere on this site and no animations.
   Everything here is plain CSS.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. COLOURS AND SIZES
   These are "variables". Change a value here and it updates everywhere.
   Used later as, for example:  color: var(--orange);
   -------------------------------------------------------------------------- */
:root {
  --orange:      #c2410c;   /* accent: links, the tile, hover states */
  --bg:          #ffffff;   /* page background */
  --bg-soft:     #f6f5f3;   /* panels, code-ish blocks */
  --border:      #e0ddd8;   /* all lines and boxes */
  --text:        #1c1917;   /* main text */
  --text-soft:   #6b645d;   /* captions, comments, less important text */

  --max:  760px;            /* how wide the content column gets */

  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* Dark mode. This kicks in automatically if the visitor's computer is set
   to dark. Only the colours change; nothing else needs repeating. */
@media (prefers-color-scheme: dark) {
  :root {
    --orange:    #fb923c;
    --bg:        #12100e;
    --bg-soft:   #1b1815;
    --border:    #322d28;
    --text:      #f0ece7;
    --text-soft: #a09890;
  }
}


/* --------------------------------------------------------------------------
   2. BASE
   Sensible defaults for the whole page.
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;   /* padding counts inside a width, not added to it */
}

body {
  margin: 0;
  padding: 0 24px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.7;
}

img {
  display: block;
  max-width: 100%;     /* never overflow the screen on a phone */
  height: auto;
}

a {
  color: var(--orange);
}

/* The thin orange outline when tabbing through the page with a keyboard. */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   3. HEADER
   Name on the left, links on the right. Same on every page.
   -------------------------------------------------------------------------- */
.site-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  flex-wrap: wrap;          /* stacks instead of squashing on narrow screens */
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  border-bottom: 1px solid var(--border);
}

/* Your name, top left. */
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

/* The small orange square next to your name (matches the browser tab icon). */
.brand-tile {
  width: 16px;
  height: 16px;
  background: var(--orange);
  border-radius: 3px;
}

/* The row of links. */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
}

.nav a {
  color: var(--text-soft);
  text-decoration: none;
}

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

/* Marks which page you're currently on. Add class="here" to that link. */
.nav a.here {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* --------------------------------------------------------------------------
   4. PAGE BODY
   Wrap the content of every page in <main class="page">.
   -------------------------------------------------------------------------- */
.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 48px 0 64px;
}

h1 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.3;
}

h2 {
  margin: 40px 0 12px;
  font-size: 17px;
}

p {
  margin: 0 0 16px;
}

/* Grey "// comment" text, like a note in code. */
.note {
  color: var(--text-soft);
}

/* A horizontal line between sections. */
hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--border);
}


/* --------------------------------------------------------------------------
   5. HOME PAGE
   -------------------------------------------------------------------------- */
.home {
  text-align: center;
  padding-top: 72px;
}

.home h1 {
  font-size: 30px;
}

/* The photo. Change the width here to make it bigger or smaller. */
.photo {
  margin: 36px auto 8px;
  width: 260px;
  border: 1px solid var(--border);
}

.caption {
  margin: 0 0 32px;
  font-size: 13px;
  color: var(--text-soft);
}


/* --------------------------------------------------------------------------
   6. BUTTONS
   Use on a link:  <a class="btn" href="...">text</a>
   Add "primary" for the filled orange one.
   -------------------------------------------------------------------------- */
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.btn {
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
}

.btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.btn.primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.btn.primary:hover {
  opacity: .85;
  color: #fff;
}


/* --------------------------------------------------------------------------
   7. PROJECT LIST
   Used on projects.html. One <div class="item"> per project.
   -------------------------------------------------------------------------- */
.item {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.item h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.item p {
  margin: 0 0 8px;
}

/* The small grey "Python · OpenCV" line under a project. */
.tech {
  font-size: 13px;
  color: var(--text-soft);
}


/* --------------------------------------------------------------------------
   8. PDF VIEWER
   Used on portfolio.html.
   -------------------------------------------------------------------------- */
.pdf {
  width: 100%;
  height: 720px;
  margin-bottom: 20px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}


/* --------------------------------------------------------------------------
   9. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px 0 40px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-soft);
}

.site-footer a {
  color: var(--text-soft);
}

.site-footer a:hover {
  color: var(--orange);
}


/* --------------------------------------------------------------------------
   10. PHONES
   Anything inside here only applies to screens narrower than 600px.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .page  { padding-top: 32px; }
  .home  { padding-top: 40px; }
  .photo { width: 210px; }
  .pdf   { height: 480px; }
  .btn   { flex: 1 1 100%; text-align: center; }
}