/* ==========================================================================
   Lophy Sophy · portfolio of Sofia Lucarelli
   Vanilla CSS, no build step. Palette and type scale are fixed by design.
   ========================================================================== */

:root {
  --white: #FFFFFF;
  --ink: #10302E;
  --tiffany: #0ABAB5;
  --tiffany-deep: #078682;
  --aqua-gray: #6E9693;
  --aqua-mist: #EAF7F6;
}

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

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
}

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

a {
  color: var(--ink);
  transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease;
}

a:focus-visible {
  outline: 2px solid var(--tiffany);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Type scale (hierarchy by weight, not size)
   -------------------------------------------------------------------------- */

.kicker {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--aqua-gray);
}

.section-title {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.4;
}

.page-title {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.4;
}

.greeting {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.4;
}

.caption {
  font-size: 12px;
  color: var(--aqua-gray);
}

/* Subtitle chips: one term per chip, same 5px radius as the buttons */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.chip {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--aqua-gray);
  background: var(--aqua-mist);
  border-radius: 5px;
  /* Asymmetric on purpose: Comfortaa ink sits 1px high in its line box,
     and letter-spacing leaves 2px of dead space after the last letter */
  padding: 9px 14px 7px 16px;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 60px;
  background: var(--white);
  border-bottom: 1px solid var(--aqua-mist);
}

.header-inner {
  max-width: 1100px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Equal flex on the two sides keeps the category nav truly centered */
.header-side {
  flex: 1 1 0;
  display: flex;
  align-items: center;
}

.header-side.right {
  justify-content: flex-end;
}

.wordmark {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover {
  color: var(--tiffany);
}

.wordmark-sub {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--aqua-gray);
  margin-top: 2px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-nav a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--aqua-gray);
  text-decoration: none;
  padding: 12px 8px;
  white-space: nowrap;
}

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

.site-nav a:active {
  color: var(--tiffany-deep);
}

.site-nav a[aria-current="page"] {
  color: var(--tiffany-deep);
}

/* --------------------------------------------------------------------------
   Hero and reel placeholder
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
}

.hero img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: cover; /* allowed: the hero acts as a link thumbnail for the reel */
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(16, 48, 46, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.4s ease;
}

.play-button:hover {
  background: var(--tiffany);
}

.play-button:active {
  background: var(--tiffany-deep);
}

.play-button svg {
  width: 26px;
  height: 26px;
  fill: var(--white);
  margin-left: 4px;
}

.reel-placeholder {
  position: relative;
}

.reel-placeholder img {
  width: 100%;
  height: auto;
}

.reel-caption {
  text-align: center;
  margin-top: 12px;
}

/* Ready for the embed that replaces the placeholder when the reel is online */
.reel-embed {
  position: relative;
  aspect-ratio: 16 / 9;
}

.reel-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.tagline {
  text-align: center;
  padding: 32px 24px 0;
}

/* --------------------------------------------------------------------------
   Hello section (homepage)
   -------------------------------------------------------------------------- */

.hello {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 24px 16px;
  text-align: center;
}

.hello .greeting {
  margin-bottom: 16px;
}

.hello .lead {
  font-weight: 600;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Discipline sections and mosaic tiles
   -------------------------------------------------------------------------- */

.discipline {
  padding-top: 56px;
}

.discipline-head {
  text-align: center;
  margin-bottom: 28px;
  padding: 0 24px;
}

.discipline-head .kicker {
  margin-top: 12px;
}

/* Mosaic tiles are navigation links: flush, gap 0, no radius, no border,
   no shadow. Hovering a tile narrows its siblings so the row stays flush
   and full. Each image sits at a fixed scale behind its tile, which acts
   as a crop window: width changes reveal more or less of it, the image
   itself never rescales, so there is no zoom. The row height is in vw so
   the crop window math holds at any viewport width. */
.mosaic {
  display: flex;
  height: 29vw;
}

.tile {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  transition: flex-grow 0.4s ease;
}

.mosaic:hover .tile {
  flex-grow: 0.72;
}

.mosaic .tile:hover {
  flex-grow: 1;
}

/* The image fills a fixed vw-sized box, slightly wider than the widest the
   tile can get on hover, so its scale never depends on the tile width:
   cropping is allowed here because tiles are navigation links. */
.tile img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 42vw;
  object-fit: cover;
  max-width: none;
}

.more-grid .tile img {
  width: 60vw;
}

.mosaic.single {
  height: auto;
}

.mosaic.single .tile img {
  position: static;
  transform: none;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 48, 46, 0);
  transition: background-color 0.4s ease;
}

.tile-label {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--aqua-mist);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tile:hover .tile-overlay,
.tile:focus-visible .tile-overlay {
  background: rgba(16, 48, 46, 0.6);
}

.tile:hover .tile-label,
.tile:focus-visible .tile-label {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Gallery pages
   -------------------------------------------------------------------------- */

.page-head {
  text-align: center;
  padding: 56px 24px 0;
}

.page-head .page-title {
  margin-bottom: 12px;
}

.intro {
  max-width: 680px;
  margin: 28px auto 0;
  padding: 0 24px;
}

/* Artwork is never cropped: full boards, single column, full bleed edge to edge */
.gallery {
  margin-top: 48px;
  display: grid;
  gap: 40px;
}

.gallery img {
  width: 100%;
  height: auto;
}

.reel-block {
  margin-top: 48px;
}

/* --------------------------------------------------------------------------
   More work
   -------------------------------------------------------------------------- */

.more-work {
  padding-top: 80px;
  text-align: center;
}

.more-grid {
  display: flex;
  height: 34vw; /* tall enough that 16:9 sources keep covering the widened tile */
  margin-top: 24px;
}

.more-grid:hover .tile {
  flex-grow: 0.72;
}

.more-grid .tile:hover {
  flex-grow: 1;
}

.email-link {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.email-link:hover {
  color: var(--tiffany);
}

.email-link:active {
  color: var(--tiffany-deep);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 5px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: 13px 28px;
}

.btn:hover {
  background: var(--tiffany);
  border-color: var(--tiffany);
  color: var(--white);
}

.btn:active {
  background: var(--tiffany-deep);
  border-color: var(--tiffany-deep);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */

.about-layout {
  max-width: 920px;
  margin: 56px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

.about-text {
  flex: 1;
}

.about-text .greeting {
  margin-bottom: 16px;
}

.about-text p {
  margin-bottom: 18px;
}

.about-text .btn {
  margin-top: 8px;
}

.about-figure {
  width: 280px;
  flex-shrink: 0;
}

.about-figure img {
  width: 100%;
  height: auto;
}

.list-section {
  text-align: center;
  padding: 64px 24px 0;
}

.list-section .kicker {
  margin-bottom: 20px;
}

.list-section ul {
  list-style: none;
}

.list-section li {
  margin-bottom: 16px;
}

.list-item-title {
  font-weight: 600;
}

.list-item-detail {
  color: var(--aqua-gray);
  font-size: 13px;
}

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

.site-footer {
  text-align: center;
  padding: 48px 24px;
  margin-top: 80px;
  font-size: 12px;
  color: var(--aqua-gray);
  background: var(--aqua-mist);
}

.icon-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  vertical-align: -3px;
}

.site-footer a {
  color: var(--aqua-gray);
  text-decoration: none;
  padding: 12px 2px; /* keeps tap targets comfortable on touch screens */
}

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

.site-footer a:active {
  color: var(--tiffany-deep);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .site-header {
    height: auto;
  }

  .header-inner {
    height: auto;
    padding: 8px 16px 0;
    flex-wrap: wrap;
    row-gap: 0;
  }

  /* Category links drop to their own centered row below the wordmark */
  .nav-center {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
  }

  .wordmark {
    font-size: 16px;
  }

  .site-nav {
    gap: 2px;
  }

  .site-nav a {
    font-size: 13px;
    padding: 14px 6px;
  }

  /* Stacked tiles: the squeeze effect is hover-only, so it is off here */
  .mosaic,
  .mosaic.single,
  .more-grid {
    flex-direction: column;
    height: auto;
  }

  .tile,
  .mosaic:hover .tile,
  .mosaic .tile:hover,
  .more-grid:hover .tile,
  .more-grid .tile:hover {
    flex: none;
  }

  .tile img,
  .mosaic.single .tile img,
  .more-grid .tile img {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .about-layout {
    flex-direction: column;
    gap: 40px;
  }

  .about-figure {
    width: 280px;
    max-width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .wordmark {
    font-size: 15px;
  }

  .site-nav a {
    font-size: 11px;
    padding: 15px 4px;
  }
}