/* =========================================================
   LUCAS GIROTTO — PORTFOLIO STYLESHEET
   All styling for index.html and about.html lives here.
   Colours and spacing are set as variables at the top —
   change a value once here and it updates the whole site.
   ========================================================= */

/* ---- Colours & basic settings (edit these to re-theme the site) ---- */
:root {
  --color-bg: #F8F8F6;
  --color-text: #111111;
  --color-muted: #8A8A85;
  --color-hairline: #111111;

  --max-width: 1400px;
  --pad-desktop: 40px;
  --pad-mobile: 24px;

  --transition-fast: 200ms ease;

  /* Timing of the page push between Projects and About */
  --slide-duration: 1s;
  --slide-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---- Reset ---- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Keeps the page-swipe animation from causing a horizontal scrollbar */
  overflow-x: hidden;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
}

/* ---- Background gradient strip ----
   One fixed layer, twice the viewport wide, with the darkest "old paper" zone
   at its centre. Projects shows the LEFT half (dark corner bottom-right);
   About slides the strip a full viewport to the left so the same dark zone
   sits bottom-left, next to the portrait. Because both pages show the same
   zone mirrored, the two sides are exactly equally dark. */
.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 200vw;
  height: 100vh;
  z-index: -1;
  background-color: var(--color-bg);
  /* Tall, deep dark zone so the darkened edge stays clearly visible along the
     whole side of the viewport, not just in the bottom corner */
  background-image: radial-gradient(ellipse 90vw 200vh at 50% 105%, #CFC8B0 0%, #E4DECA 40%, #F1EDDE 65%, #F8F8F6 90%);
  transition: transform var(--slide-duration) var(--slide-ease);
}

body.view-about .page-bg {
  transform: translateX(-100vw);
}

/* ---- Sliding views (the continuous page push) ----
   Projects and About sit side by side inside one track twice the screen wide.
   Switching view slides the track (and the background gradient with it) one
   full screen over one second: the old page pushes out while the new one
   pushes in, in a single continuous movement. */
.views {
  position: relative;
  overflow: hidden;
  /* height is kept in sync with the active view by script.js */
  transition: height var(--slide-duration) var(--slide-ease);
}

.view-track {
  display: flex;
  align-items: flex-start;
  width: 200vw;
  transition: transform var(--slide-duration) var(--slide-ease);
  will-change: transform;
}

body.view-about .view-track {
  transform: translateX(-100vw);
}

.view {
  width: 100vw;
  flex-shrink: 0;
}

/* Used when a view has to be shown instantly (first load on #about) */
body.no-slide .view-track,
body.no-slide .views,
body.no-slide .page-bg {
  transition: none !important;
}

/* Respect visitors who prefer reduced motion: views switch without sliding */
@media (prefers-reduced-motion: reduce) {
  .view-track,
  .views,
  .page-bg {
    transition: none !important;
  }
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

/* Visible focus state everywhere, for keyboard users */
a:focus-visible,
button:focus-visible,
img:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 4px;
}

/* Hides text visually but keeps it for screen readers (used for the page's single required H1
   on about.html, where the visible heading is the "About" section label instead) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--pad-mobile);
  padding-right: var(--pad-mobile);
}

@media (min-width: 769px) {
  .container {
    padding-left: var(--pad-desktop);
    padding-right: var(--pad-desktop);
  }
}

/* =========================================================
   NAVIGATION (shared by both pages)
   ========================================================= */
.site-header {
  padding-top: 32px;
  padding-bottom: 32px;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.nav-logo {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text);
}

.nav-links {
  display: flex;
  gap: 24px;
}

.nav-link {
  font-size: 18px;
  font-weight: 400;
  color: var(--color-muted);
  transition: color var(--transition-fast);
}

.nav-link:hover {
  text-decoration: underline;
}

.nav-link.is-current {
  color: var(--color-text);
}

/* =========================================================
   HERO (index.html)
   ========================================================= */
.hero {
  min-height: 38vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 48px;
  padding-bottom: 40px;
}

.hero-headline {
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 1100px;
  text-align: center;
}

.hero-name {
  font-weight: 700;
}

.hero-emphasis {
  font-weight: 500;
}

/* =========================================================
   WORK GRID (index.html)
   ========================================================= */
.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-bottom: 96px;
}

@media (min-width: 769px) {
  .work-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  /* Keep the two thumbnails in each row aligned even if the images
     have slightly different shapes */
  .project-thumb {
    align-self: start;
  }
}

.project-thumb {
  display: block;
  cursor: pointer;
}

/* Images are shown whole at their natural shape — never cropped.
   overflow: hidden keeps the hover zoom inside the tile's edges. */
.thumb-image-wrap {
  position: relative;
  overflow: hidden;
  background-color: #E9E9E6;
}

.thumb-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transition-fast);
}

/* Gentle zoom on hover / keyboard focus */
.project-thumb:hover .thumb-image,
.project-thumb:focus-visible .thumb-image {
  transform: scale(1.04);
}

/* Hover / keyboard-focus overlay: darkens the image and reveals the project name + credit */
.thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  background-color: rgba(17, 17, 17, 0.55);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.project-thumb:hover .thumb-overlay,
.project-thumb:focus-visible .thumb-overlay {
  opacity: 1;
}

.thumb-overlay-text {
  color: var(--color-bg);
  font-size: 16px;
  font-weight: 400;
  max-width: 480px;
}

/* The title sits centred on its own line, with the client line centred below it */
.thumb-overlay-title {
  display: block;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 2px;
}

/* =========================================================
   PROJECT MODAL (index.html)
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(247, 244, 234, 0.98);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  overflow-y: auto;
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-close {
  position: fixed;
  top: 24px;
  right: 24px;
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
  color: var(--color-text);
  padding: 8px;
  z-index: 101;
}

.modal-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 96px 24px 96px;
}

@media (min-width: 769px) {
  .modal-content {
    padding: 96px var(--pad-desktop) 96px;
  }
}

/* The embedded video keeps a 16:9 shape at any width */
.modal-video-wrap {
  aspect-ratio: 16 / 9;
  background-color: #111111;
  margin-bottom: 32px;
}

.modal-video-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.modal-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.modal-credit {
  font-size: 15px;
  color: var(--color-muted);
  margin-bottom: 24px;
}

/* Project info rows: small uppercase label on the left, detail on the right,
   each row separated by a thin hairline bar that stretches the full width
   of the video above */
.modal-details {
  width: 100%;
}

/* Direct children only, so the nested bullet list below doesn't pick up
   these dividing hairlines or the two-column grid */
.modal-details > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid rgba(17, 17, 17, 0.15);
}

.modal-details > li:last-child {
  border-bottom: 1px solid rgba(17, 17, 17, 0.15);
}

@media (min-width: 600px) {
  .modal-details > li {
    grid-template-columns: 160px 1fr;
    gap: 24px;
  }
}

.modal-detail-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  padding-top: 3px;
}

.modal-detail-value {
  font-size: 16px;
  line-height: 1.6;
}

/* Bulleted detail value: each point led by a bold term, with the square
   marker centred on the term and no dividing lines between points */
.modal-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: 28px;
}

.modal-bullets li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

@media (min-width: 600px) {
  .modal-bullets li {
    grid-template-columns: 160px 1fr;
    gap: 24px;
    align-items: start;
  }
}

.modal-bullet-term {
  position: relative;
  display: block;
  font-weight: 700;
}

/* Square marker sits just left of the term, vertically centred on it */
.modal-bullet-term::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--color-text);
}

/* Lock page scroll while the modal is open */
body.no-scroll {
  overflow: hidden;
}

/* =========================================================
   ABOUT PAGE (about.html)
   ========================================================= */
.about-main {
  padding-top: 32px;
  padding-bottom: 96px;
}

/* One section: portrait on the left, then the text.
   On mobile everything stacks: photo, then each paragraph in turn. */
.about-row {
  display: flex;
  flex-direction: column;
  padding-top: 32px;
}

.about-text p:not(:last-child) {
  margin-bottom: 24px;
}

.portrait {
  width: 100%;
  max-width: 320px;
  margin-bottom: 40px;
}

@media (min-width: 769px) {
  /* Three columns across: portrait, then one paragraph per column */
  .about-row {
    display: grid;
    grid-template-columns: 24% 1fr;
    column-gap: 56px;
    align-items: start;
  }

  .about-sidebar {
    position: sticky;
    top: 140px;
  }

  .portrait {
    max-width: 100%;
    margin-bottom: 0;
  }

  /* Each paragraph sits side by side in its own column */
  .about-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
  }

  .about-text p:not(:last-child) {
    margin-bottom: 0;
  }
}

/* =========================================================
   FOOTER (shared by both pages)
   ========================================================= */
.site-footer {
  padding-bottom: 40px;
}

.hairline {
  border: none;
  border-top: 1px solid var(--color-hairline);
  margin-bottom: 24px;
}

.footer-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
}

.footer-row a:hover {
  color: var(--color-text);
}

@media (min-width: 769px) {
  .footer-row {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}