/* Shared styles for all pages. Minimal look inspired by snnielee.com */

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

body {
  font-family: Optima, Candara, 'Segoe UI', sans-serif; /* Optima matches resume; Candara is the Windows fallback */
  background: #ffffff;
  color: #1a1a1a;
  font-size: 14px;
  letter-spacing: 0.02em;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.5; }

/* Top bar: name on the left, 3 headers on the right */
header {
  padding: 3vw 10vw; /* matches sunnie lee: 3vw top/bottom, 10vw sides */
}
.site-title { font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; }
.site-title em { font-style: italic; }
.montes { color: #7a4e2d; } /* brown */
.green  { color: #3d6b3a; } /* green */

.top-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
/* Small About link + social icons, right aligned with bottom of name */
.sub { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.icons { margin-left: 0; gap: 10px; }
.icons svg { width: 14px; height: 14px; }
/* Main sections: centered, several lines below the name */
.main-nav { text-transform: uppercase; display: flex; justify-content: center; flex-wrap: wrap; gap: 1vw 2.5vw; margin-top: 64px; }
nav a.active, .sub a.active { text-decoration: underline; text-underline-offset: 4px; }

/* Image grid: staggered columns like the reference site */
.grid {
  columns: 3;
  column-gap: 16px;
  padding: 0 10vw;
}
.placeholder {
  break-inside: avoid;
  margin-bottom: 16px;
  background: #e6e6e6;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Mixed shapes so the grid looks like real photos */
.tall   { aspect-ratio: 3 / 4; }
.wide   { aspect-ratio: 4 / 3; }
.square { aspect-ratio: 1 / 1; }

footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 48px 10vw;
  color: #777;
}

/* Smaller screens: fewer columns */
@media (max-width: 900px) { .grid { columns: 2; } }
@media (max-width: 560px) {
  .grid { columns: 1; padding: 0 16px; }
  header, footer { padding-left: 16px; padding-right: 16px; }
}

/* Social icons sit after the page links */
.icons { display: flex; align-items: center; }
.icons svg { display: block; }

/* About page: portrait on the left, text on the right */
.about {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  padding: 0 10vw;
  align-items: start;
}
.about h1 { font-size: 22px; font-weight: 500; margin-bottom: 20px; }
.about p { line-height: 1.7; margin-bottom: 16px; max-width: 55ch; }
@media (max-width: 700px) { .about { grid-template-columns: 1fr; gap: 24px; padding: 0 16px; } }

/* Phones: taller header padding like the reference site */
@media (max-width: 560px) {
  header { padding-top: 6vw; padding-bottom: 6vw; }
  .main-nav { gap: 10px 16px; margin-top: 40px; }
}

/* About page photo */
.portrait { width: 100%; height: auto; display: block; }

/* Small iMac image under the About text */
.imac { width: 144px; height: auto; display: block; margin-top: 24px; }
.imac-row { display: flex; justify-content: flex-start; align-items: center; gap: 20px; margin-top: 24px; flex-wrap: wrap; }
.imac-row .imac { margin-top: 0; }
.imac-row p { margin-bottom: 0; }

/* Photos in the grid */
.photo { break-inside: avoid; margin: 0 0 16px; position: relative; }
.photo img { width: 100%; height: auto; display: block; }
/* Temporary editing label so photos are easy to refer to */
.edit-label {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,0.6); color: #fff;
  font-size: 12px; letter-spacing: 0.08em; padding: 4px 8px;
}

/* Clients & projects logo wall */
.clients { margin-top: 40px; }
.clients h2 { font-size: 22px; font-weight: 500; margin-bottom: 20px; }
.logo-wall { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; }
.logo-wall img { max-height: 36px; max-width: 120px; width: auto; height: auto; display: block; }
.logo-wall img.logo-sm { max-width: 105px; } /* text-only logo reads heavier, so a bit smaller */

/* Events page: one section per project */
.project { margin-bottom: 72px; }
.project-text { padding: 0 10vw; margin-top: 20px; } /* full width, sits under the photos */
.project h2 { font-size: 22px; font-weight: 500; margin-bottom: 12px; }
.project p { line-height: 1.7; margin-bottom: 10px; }
.project .role { color: #777; font-size: 13px; }
@media (max-width: 560px) { .project-text { padding: 0 16px; } }

/* Seamless rows like Sunnie's sections: same height per row, full width, thin gaps */
.rows { padding: 0 10vw; display: flex; flex-direction: column; gap: 11px; }
.row { display: flex; gap: 11px; }
.row > * { flex-basis: 0; min-width: 0; margin: 0; }
.row .photo img { width: 100%; height: 100%; object-fit: cover; }
.row .placeholder { margin: 0; }
@media (max-width: 560px) { .rows { padding: 0 16px; } .row { flex-direction: column; } }

/* Embedded video post */
.video-embed { padding: 0 10vw; }
.video-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; } /* full width like the photo rows */
@media (max-width: 560px) { .video-embed { padding: 0 16px; } }
.video-embed video { width: 100%; height: auto; display: block; background: #000; }
.row .photo video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Design page sections */
.design-section { margin-bottom: 72px; }
.design-section h2 { font-size: 22px; font-weight: 500; padding: 0 10vw; margin-bottom: 20px; }
.row .photo iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 560px) { .design-section h2 { padding: 0 16px; } }
.row.feature { width: 62%; margin: 0 auto; } /* single standout photo, centered */

/* Visualizer thumbnails that link out to Vimeo */
.vimeo-link { display: block; width: 100%; height: 100%; position: relative; }
.vimeo-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vimeo-link .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center; padding-left: 3px;
}
.vimeo-link:hover { opacity: 0.85; }
.row .photo figcaption { position: absolute; left: 8px; bottom: 8px; background: rgba(255,255,255,0.85); font-size: 12px; padding: 3px 8px; }
/* Events: title above the photos, write-up below */
.project-title { font-size: 22px; font-weight: 500; padding: 0 10vw; margin-bottom: 20px; }
@media (max-width: 560px) { .project-title { padding: 0 16px; } }

/* Print pieces shown smaller inside their tile, with a thin black border and white space around */
.row .photo.inset { display: flex; align-items: center; justify-content: center; }
.row .photo.inset img { width: 93%; height: auto; border: 0.5px solid #1a1a1a; } /* ultra-thin border */
p { text-wrap: pretty; } /* avoid single words hanging on the last line */

/* Operations & insights: big-number grid */
.ops { padding: 0 10vw; }
.ops-title { font-size: 28px; font-weight: 500; margin-bottom: 8px; }
.ops-intro { color: #777; margin-bottom: 40px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #1a1a1a; }
.stat { padding: 28px 20px 32px 0; border-bottom: 1px solid #ddd; }
.stat-num { font-size: clamp(22px, 2vw, 32px); font-weight: 500; line-height: 1.1; margin-bottom: 12px; color: #1a1a1a; }
.stat:nth-child(odd) .stat-num { color: #3d6b3a; }   /* alternate green / brown, like the name */
.stat:nth-child(even) .stat-num { color: #7a4e2d; }
.stat-text { font-size: 13px; line-height: 1.55; margin-bottom: 10px; max-width: 26ch; }
.stat-src { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #999; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ops { padding: 0 16px; } .stats { grid-template-columns: 1fr; } .stat-num { font-size: 34px; } }

/* Operations & insights: services menu */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid #1a1a1a; }
.service { padding-top: 28px; }
.service h2 { font-size: 20px; font-weight: 500; margin-bottom: 16px; }
.service .numeral { color: #7a4e2d; margin-right: 6px; }
.service ul { list-style: none; margin-bottom: 24px; }
.service li { font-size: 14px; padding: 9px 0; border-bottom: 1px solid #e3e3e3; }
.impacts { display: flex; flex-direction: column; gap: 14px; }
.impact { font-size: 13px; color: #555; line-height: 1.4; }
.impact-num { display: block; font-size: 20px; color: #3d6b3a; margin-bottom: 2px; }
@media (max-width: 800px) { .services { grid-template-columns: 1fr; } }

/* Caption that appears on hover (or tap on phones) */
.row .photo .hover-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.9); color: #1a1a1a;
  font-size: 10px; padding: 4px 8px;
  opacity: 0; transition: opacity 0.2s;
}
.row .photo:hover .hover-cap { opacity: 1; }
/* No single words left alone on a line: balance headings, tidy everything else */
h1, h2, h3 { text-wrap: balance; }
li, figcaption, .impact, .stat-text, .ops-intro { text-wrap: pretty; }

/* Phones only: center everything on the About page */
@media (max-width: 700px) {
  .about { text-align: center; }
  .about .portrait { margin: 0 auto; }
  .about .imac-row { justify-content: center; flex-direction: row; flex-wrap: nowrap; gap: 14px; }
  .about .imac { width: 110px; }
  .about .imac-row p { text-align: left; font-size: 13px; }
  .about .logo-wall { justify-content: center; }
}

/* Line up the stats across all three columns (title / list / stats share rows) */
.services { grid-template-rows: auto auto auto; }
.service { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.service .impacts { align-self: start; }
@media (max-width: 800px) { .service { display: block; } }
.about .portrait { max-width: 85%; } /* profile picture slightly smaller */
.about .imac-row { margin-top: 40px; margin-bottom: 48px; } /* breathing room around iMac + email */

/* Quote on the About page */
.about-quote { margin: 0 0 20px; }
.about-quote p { font-style: italic; margin-bottom: 4px; }
.about-quote cite { font-style: normal; color: #555; }
.about .about-text p { max-width: none; } /* let About lines use the full column on wide screens */
.main-nav { font-size: 17px; } /* bigger page headers */
.project-text p, .project-text .role { font-size: 16px; } /* larger Events write-ups */
/* Ops page: centered image replaces the rule above the services */
.services { border-top: 0; }
.ops-image { display: block; width: 100%; max-width: 378px; height: auto; margin: 8px auto 36px; }
/* Hover credit on the Ops image */
.ops-figure { position: relative; width: 100%; max-width: 378px; margin: 8px auto 36px; }
.ops-figure .ops-image { margin: 0; max-width: 100%; }
.ops-figure .hover-cap { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.9); color: #1a1a1a; font-size: 10px; padding: 4px 8px; opacity: 0; transition: opacity 0.2s; }
.ops-figure:hover .hover-cap { opacity: 1; }
/* Bigger page menu + section titles */
.main-nav { font-size: 19px; }
.project-title, .design-section h2 { font-size: 26px; }
@media (max-width: 560px) { .main-nav { font-size: 15px; } .project-title, .design-section h2 { font-size: 22px; } }
/* Events: centered opening statement, same size as the page menu */
.events-statement { text-align: center; font-size: 19px; line-height: 1.5; max-width: 46ch; margin: 0 auto 56px; padding: 0 16px; text-wrap: balance; }
@media (max-width: 560px) { .events-statement { font-size: 15px; margin-bottom: 36px; } }
.ops-subhead { font-size: 26px; font-weight: 500; margin-bottom: 24px; text-align: center; } /* matches section titles */
.ops .events-statement { margin-bottom: 40px; } .ops-figure { margin-top: 0; } /* less space above the Ops image */

/* Visualizers: title + projection details appear on hover (top edge, so player controls stay clear) */
.row .photo .vis-cap {
  position: absolute; left: 0; right: 0; top: 0;
  background: rgba(255,255,255,0.92); color: #1a1a1a;
  font-size: 11px; line-height: 1.3; padding: 5px 10px 3px;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.row .photo:hover .vis-cap { opacity: 1; }
/* Phones / touch screens: show visualizer labels under each video instead of on hover */
@media (max-width: 560px), (hover: none) {
  .row .photo:has(.vis-cap) { aspect-ratio: auto !important; }
  .row .photo:has(.vis-cap) iframe { height: auto; aspect-ratio: 16 / 9; }
  .row .photo .vis-cap { position: static; opacity: 1; background: none; padding: 6px 0 4px; }
}
.row .photo .vis-cap strong { display: inline-block; margin-bottom: 1px; } /* keep label box snug */
.row .photo .vis-cap { bottom: auto; height: auto; } /* box ends right under the text */
.row .photo .vis-cap { text-align: justify; } /* projection details justified */
/* Events + Design opening statements 15% smaller (Ops statement keeps its size) */
.events-statement { font-size: 16px; }
.ops .events-statement { font-size: 19px; }
@media (max-width: 560px) { .events-statement { font-size: 13px; } .ops .events-statement { font-size: 15px; } }
.events-statement { padding: 0; text-wrap: pretty; } /* width set to match the page menu */
.ops .events-statement { font-size: 16px; } /* same size as Events + Design statements */
@media (max-width: 560px) { .ops .events-statement { font-size: 13px; } }
/* About text matches the opening-statement size (16px desktop, 13px phones) */
.about .about-text p, .about .about-quote p, .about .imac-row p { font-size: 16px; }
@media (max-width: 560px) { .about .about-text p, .about .about-quote p, .about .imac-row p { font-size: 13px; } }
.ops .events-statement { margin-bottom: 32px; } .ops-figure { margin-top: 0; margin-bottom: 32px; } /* equal space above and below the Amstrad image */
/* Profile photo with the Hospitaliano! button centered underneath */
.portrait-col { max-width: 85%; }
.portrait-col .portrait { max-width: 100%; }
.hospitaliano { display: block; width: 64px; height: 64px; margin: 20px auto 0; }
@media (max-width: 700px) { .portrait-col { margin: 0 auto; } }
.hospitaliano { width: 144px; height: 144px; } /* same width as the iMac */
@media (max-width: 700px) { .hospitaliano { width: 110px; height: 110px; } }
.about-text .hospitaliano { margin: 48px auto 0; } /* centered under the client logos */
.imac { width: 180px; } /* larger iMac */
@media (max-width: 700px) { .about .imac { width: 130px; } }
.imac-row { justify-content: center; } /* iMac + email centered as a pair */
/* Email text left of the iMac, brand-colored icons to the right */
.about .imac-row p { text-align: right; }
.imac-icons { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.imac-icons svg { display: block; }
@media (max-width: 700px) { .imac-icons { gap: 10px; } .imac-icons svg { width: 24px; height: 24px; } }
/* Brand icons: side by side, big and chunky, with a little glow */
.imac-icons { flex-direction: row; gap: 16px; }
.imac-icons svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); transition: transform 0.2s; }
.imac-icons a:hover svg { transform: rotate(-8deg) scale(1.08); }
.imac-icons a:hover { opacity: 1; }
@media (max-width: 700px) { .imac-icons { flex-direction: column; } .imac-icons svg { width: 34px; height: 34px; } }
.about .imac-row p { text-align: left; } /* email text left-aligned */
@media (min-width: 701px) { .imac-row { justify-content: flex-start; } } /* desktop: iMac row left-aligned */
/* Icons styled like the client logos: flat near-black, same height */
.imac-icons svg { width: 36px; height: 36px; filter: none; transform: none !important; }
.imac-icons a:hover { opacity: 0.5; }
@media (max-width: 700px) { .imac-icons svg { width: 28px; height: 28px; } }
.sub { font-size: 15px; } /* larger About + Get in touch link */
.sub .icons svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .sub { font-size: 13px; } }
.about h1 { font-size: 26px; } /* About heading matches section titles */
@media (max-width: 560px) { .about h1 { font-size: 22px; } }
/* "Back to top" between sections (the last section uses the footer's link instead) */
.to-top { text-align: right; padding: 0 10vw; margin-top: 20px; font-size: 13px; color: #777; }
main > section:last-of-type .to-top { display: none; }
@media (max-width: 560px) { .to-top { padding: 0 16px; } }
/* Center every "Back to top" link (sections + footer) */
.to-top { text-align: center; }
footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
footer > span { grid-column: 1; justify-self: start; }
footer > a { grid-column: 2; grid-row: 1; justify-self: center; }
.hospitaliano { width: 158px; height: 158px; } /* +10% */
@media (max-width: 700px) { .hospitaliano { width: 121px; height: 121px; } }

/* Desktop: fit the whole About page on one screen */
@media (min-width: 701px) {
  .about { align-items: start; }
  .portrait-col { max-width: none; }
  .portrait-col .portrait { width: auto; max-width: 100%; max-height: calc(100vh - 300px); }
  .about h1 { margin-bottom: 10px; }
  .about p { margin-bottom: 8px; }
  .about .imac-row { margin-top: 14px; margin-bottom: 16px; }
  .imac { width: 150px; }
  .clients { margin-top: 0; }
  .clients h2 { margin-bottom: 12px; }
  .logo-wall { gap: 14px 26px; }
  .logo-wall img { max-height: 28px; }
  .about-text .hospitaliano { width: 110px; height: 110px; margin-top: 18px; }
  header { padding-bottom: 1.5vw; }
  .main-nav { margin-top: 36px; }
  footer { padding-top: 24px; padding-bottom: 24px; }
}
@media (min-width: 701px) {
  header { padding-top: 2vw; }
  .main-nav { margin-top: 28px; }
  .about-text .hospitaliano { width: 96px; height: 96px; margin-top: 12px; }
  footer { padding-top: 16px; padding-bottom: 16px; }
  .portrait-col .portrait { max-height: calc(100vh - 250px); }
}
@media (min-width: 701px) { .about { grid-template-columns: auto minmax(0, 1fr); gap: 40px; } } /* photo column hugs the photo */
@media (min-width: 701px) { .about .imac-row { margin-top: 16px; margin-bottom: 24px; } } /* 24px above (incl. paragraph gap) and 24px below */
@media (min-width: 701px) { .about .imac-row { margin-top: 24px; margin-bottom: 24px; } }
/* Shorter laptop screens: tighten a little more so the page still fits */
@media (min-width: 701px) and (max-height: 760px) {
  .about-text .hospitaliano { width: 72px; height: 72px; margin-top: 8px; }
  .about .imac-row { margin-top: 16px; margin-bottom: 16px; }
  .imac { width: 120px; }
  .logo-wall { gap: 10px 22px; }
  .logo-wall img { max-height: 24px; }
  header { padding-top: 1.5vw; }
  .main-nav { margin-top: 18px; }
}
/* Hospitaliano button in the icon row, after LinkedIn */
.imac-icons .hospitaliano-inline { width: 48px; height: 48px; margin: 0; }
@media (min-width: 701px) and (max-height: 760px) { .imac-icons .hospitaliano-inline { width: 40px; height: 40px; } }
@media (max-width: 700px) { .imac-icons .hospitaliano-inline { width: 32px; height: 32px; } }
/* Client logos +10% */
.logo-wall img { max-width: 132px; }
@media (min-width: 701px) { .logo-wall img { max-height: 31px; } }
@media (min-width: 701px) and (max-height: 760px) { .logo-wall img { max-height: 26px; } }
@media (max-width: 700px) { .logo-wall img { max-height: 40px; } }
.logo-wall img.logo-sm { max-width: 116px; }
@media (min-width: 701px) { .about h1 { margin-bottom: 20px; } } /* equal space above and below the quote */
/* Client logos another +20%, more breathing room between them */
.logo-wall img { max-width: 158px; }
.logo-wall img.logo-sm { max-width: 139px; }
@media (min-width: 701px) { .logo-wall img { max-height: 37px; } .logo-wall { gap: 22px 40px; } }
@media (min-width: 701px) and (max-height: 760px) { .logo-wall img { max-height: 31px; } .logo-wall { gap: 16px 34px; } }
@media (max-width: 700px) { .logo-wall img { max-height: 48px; } .logo-wall { gap: 28px 36px; } }
.about h1 { font-size: 22px; } /* same size as Clients & Projects */
/* More separation above Clients & Projects */
@media (min-width: 701px) { .about .imac-row { margin-bottom: 40px; } }
@media (min-width: 701px) and (max-height: 760px) { .about .imac-row { margin-bottom: 28px; } }
@media (min-width: 701px) { .about .imac-row p { white-space: nowrap; } } /* keep the email line on one line */
/* Email line on top, iMac + icons on the row below */
.about .imac-row { flex-wrap: wrap; }
.about .imac-row p { flex-basis: 100%; margin-bottom: 4px; }