/* ==========================================================================
   Brendan Callan
   --------------------------------------------------------------------------
   The values you're most likely to want to change are in this first block.
   ========================================================================== */

:root {
  --text-color: #1a1a1a;
  --background-color: #fff;

  --font-size: 14px;
  --line-height: 1.6;

  /* Weight of ordinary text. 400 is normal, 700 is full bold. */
  --text-weight: 400;

  /* Links, kept heavier than body text so they stand out.
     Helvetica Neue has no true 500, so 600 is the first step that
     reliably reads as bolder. */
  --link-weight: 600;

  --page-width: 1000px;       /* the centred column */
  --page-margin: 40px;
  --page-padding: 20px;

  --header-space: 80px;       /* gap below the header block */
  --project-gap: 100px;       /* gap between projects */
  --image-max-width: 670px;   /* widest a project image gets */
}


/* --- Base ---------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: var(--font-size);
  font-weight: var(--text-weight);
  color: var(--text-color);
  background: var(--background-color);
  max-width: var(--page-width);
  margin: var(--page-margin) auto;
  padding: 0 var(--page-padding);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
}

header, h1, p, div {
  font-size: var(--font-size);
  font-weight: var(--text-weight);
  color: var(--text-color);
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
  font-weight: var(--link-weight);
}

a:active {
  opacity: 0.7;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* --- Header -------------------------------------------------------------- */

header {
  margin-bottom: var(--header-space);
}

header p + p {
  margin-top: 6px;
}

/* The intro paragraph. Capped so lines stay a comfortable reading length
   instead of running the full width of the page. */
header .intro {
  max-width: 34em;
  margin-top: 12px;
}

/* The email and are.na sit together as one block, a line apart from the
   intro paragraph above them. */
header .contact {
  margin-top: 12px;
}


/* --- Projects ------------------------------------------------------------
   Each project is a row: title and year on the left, image on the right,
   pushed apart. Below 700px or so they stack instead.
   -------------------------------------------------------------------------- */

.project-list {
  display: flex;
  flex-direction: column;
  gap: var(--project-gap);
}

.project {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

/* Only fade on hover when the whole project is a link. */
a.project:hover {
  opacity: 0.85;
}

.project-text {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-image {
  flex: 2;
  min-width: 300px;
  max-width: var(--image-max-width);
}


/* --- Gallery -------------------------------------------------------------
   Sits in the same place a single image would. Swipe on a phone, scroll on
   a trackpad; gallery.js adds arrows for mouse users.
   -------------------------------------------------------------------------- */

.project-image-gallery {
  flex: 2;
  min-width: 300px;
  max-width: var(--image-max-width);
}

.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gallery::-webkit-scrollbar {
  display: none;
}

.gallery img {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.gallery-wrap {
  position: relative;
}

.gallery-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(87, 87, 87, 0.35);
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 150ms ease-in-out;
}

.gallery-button:active {
  opacity: 0.7;
}

.gallery-button[disabled] {
  opacity: 0;
  pointer-events: none;
}

.gallery-button.prev { left: 15px; }
.gallery-button.next { right: 15px; }


/* --- Footer -------------------------------------------------------------- */

.sidebar footer {
  margin-top: var(--project-gap);
  font-size: var(--font-size);
  color: var(--text-color);
}

.sidebar footer a {
  color: inherit;
  text-decoration: none;
  margin-right: 20px;
}

.sidebar footer a:last-child {
  margin-right: 0;
}


/* ==========================================================================
   CV PAGE
   Only applies to cv.html, which carries class="cv" on its <body>.
   Narrower column than the homepage, and headings for each section.
   ========================================================================== */

body.cv {
  max-width: 700px;
}

body.cv header {
  margin-bottom: 60px;
}

body.cv h1,
body.cv h2,
body.cv p {
  font-size: var(--font-size);
  font-weight: var(--text-weight);
  color: var(--text-color);
  margin: 0 0 6px 0;
}

body.cv h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.cv .cv-content p {
  margin-bottom: 10px;
}

/* Bold job titles and degrees stay bold — the blanket rule above would
   otherwise flatten them to ordinary text weight. Full bold, so they stay
   clearly heavier than the surrounding text. */
body.cv strong,
body.cv b {
  font-weight: 700;
}

body.cv footer {
  margin-top: 100px;
  text-align: center;
  font-size: var(--font-size);
  font-weight: var(--text-weight);
  color: var(--text-color);
}


/* --- Phones --------------------------------------------------------------
   The flex-wrap above already stacks things once there isn't room for the
   text and image side by side. This just tightens the spacing.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  :root {
    --header-space: 50px;
    --project-gap: 60px;
  }

  .project-text {
    margin-bottom: 16px;
  }

  .project-image,
  .project-image-gallery {
    min-width: 0;
    width: 100%;
  }
}