/* ============================================================
   Allison Correnti — Portfolio
   Shared stylesheet: banner, footer, project cards, layout.
   Design source: design/HOME-mockup.png
   ============================================================ */

:root {
  --bg: #f2f2f2;
  --ink: #111111;
  --ink-soft: #333333;
  --rose: #b05a5e;
  --rose-light: #c8898c;
  --rose-dark: #8e4245;
  --rose-pale: #e5cdce;
  --footer-text: #ece5e3;
  /* Tenor Sans everywhere so every device renders identically. The design was
     drawn in Khmer MN (Mac-only system font); to restore it on Macs, put
     "Khmer MN" first in this list. */
  --font-display: "Tenor Sans", "Segoe UI", sans-serif;
  --font-project: "Noto Sans Khmer", "Segoe UI", sans-serif;
  --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-footer: Georgia, "Times New Roman", serif;
  /* Content bounds: 160px..1760px at the 1920px design width.
     Outer cap = 160 + 1600 content + 160 (border-box includes padding). */
  --content-max: 1920px;
  --pad-x: clamp(20px, 8.333vw, 160px);
  /* Banner has its own tighter padding (~40px at 1920) */
  --banner-pad: clamp(16px, 2.083vw, 40px);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* rose scrollbar on dark contrasting track */
  scrollbar-color: #b26363 #232323;  /* Firefox: thumb, track */
}
html::-webkit-scrollbar { width: 12px; }             /* Chrome / Edge / Safari */
html::-webkit-scrollbar-track { background: #232323; }
html::-webkit-scrollbar-thumb {
  background: #b26363;
  border-radius: 6px;
}
html::-webkit-scrollbar-thumb:hover { background: #9e5457; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  /* short pages (Contact) still push the footer to the bottom of the window */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }

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

a { color: inherit; }

/* ------------------------------------------------------------
   Banner (identical on every page)
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--banner-pad);
  background: #ffffff;
}

.menu-toggle {
  display: flex;
  align-items: center;
  padding: 0; /* icon sets its own height; padding here would grow the header */
  background: none;
  border: none;
  cursor: pointer;
}
.menu-toggle img {
  width: clamp(24px, 1.667vw, 32px);
  height: auto;
  transition: transform 0.25s ease;
}
.menu-toggle[aria-expanded="true"] img { transform: rotate(90deg); }

.site-nav {
  display: flex;
  /* 44pt between nav items at the 1920px design width */
  gap: clamp(16px, 2.292vw, 44px);
}
.site-nav a,
.mobile-menu a {
  font-family: var(--font-display);
  font-weight: 700;
  /* ~20px at the 1920px design width (measured from mockup; 28pt read too large next to the title) */
  font-size: clamp(12px, 1.042vw, 20px);
  letter-spacing: 0.18em;
  /* letter-spacing adds a phantom space after the last character — cancel it */
  margin-right: -0.18em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Pull the slash in "ART / GLASS" inward so each side gap is half a normal one */
.slash-tight { margin: 0 -0.265em; }

/* Dropdown menu (hamburger) */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  padding: 84px var(--banner-pad) 32px;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  padding: 14px 0;
  font-size: 15px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.mobile-menu a:last-child { border-bottom: none; }

/* ------------------------------------------------------------
   Page title
   ------------------------------------------------------------ */
.site-title {
  margin: clamp(24px, 2.917vw, 56px) var(--pad-x) clamp(40px, 4.167vw, 80px);
  font-family: var(--font-display);
  font-weight: 700;
  /* 75px at the 1920px design width */
  font-size: clamp(30px, 3.906vw, 75px);
  letter-spacing: 0.14em;
  /* re-center: letter-spacing adds a phantom space after the last character */
  text-indent: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

/* ------------------------------------------------------------
   Projects
   ------------------------------------------------------------ */
.projects {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.project { margin-bottom: clamp(48px, 6.771vw, 130px); }

/* Titles whose glyphs have descenders (y, g, J) carry ink 5px lower at 1920;
   --dd shifts the description and button down so the ink rules still hold. */
.project--desc { --dd: clamp(2.9px, 0.26vw, 5px); }

.project-image {
  display: block;
  text-decoration: none;
}
.project-image img {
  width: 100%;
}

.project-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  /* picture -> title : title -> description = 3:1 measured ink-to-ink
     (36px : 12px at 1920; margins are smaller because font leading
     contributes ~2.5px to gap 1 and ~10.6px to gap 2) */
  margin-top: clamp(19.5px, 1.745vw, 33.5px);
}

.project-text { max-width: 77%; }
.project-text h2 {
  line-height: 1;
  margin: 0 0 calc(clamp(2.7px, 0.245vw, 4.7px) + var(--dd, 0px)); /* see 3:1 ink-gap note above */
  font-family: var(--font-project);
  /* 24pt at the 1920px design width; shared floor keeps title/desc/button equal at every size */
  font-size: clamp(14px, 1.25vw, 24px);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.project-text p {
  margin: 0;
  font-family: var(--font-project);
  /* 24pt at the 1920px design width; shared floor keeps title/desc/button equal at every size */
  font-size: clamp(14px, 1.25vw, 24px);
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.275; /* half the original 0.55em leading */
  text-wrap: pretty; /* avoid orphan words on the last line where supported */
}

.btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: clamp(7px, 0.625vw, 12px);
  /* button top sits at the title's ink bottom (22.7px below the meta row at 1920) */
  margin-top: calc(clamp(13.2px, 1.182vw, 22.7px) + var(--dd, 0px));
  /* uniform 18px ink-level padding on all four sides at 1920, pixel-scan
     calibrated. Values differ because fonts/PNG carry built-in space to the ink. */
  padding: clamp(5.8px, 0.521vw, 10px) clamp(7.6px, 0.677vw, 13px) clamp(5.8px, 0.521vw, 10px) clamp(11.1px, 0.99vw, 19px);
  background: var(--ink);
  color: #ffffff;
  font-family: var(--font-project);
  font-weight: 400;
  /* 24pt at the 1920px design width; shared floor keeps title/desc/button equal at every size */
  font-size: clamp(14px, 1.25vw, 24px);
  letter-spacing: 0.1em; /* halved from 0.2em */
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0; /* square corners per design */
  white-space: nowrap;
  transition: background 0.2s ease;
}
.btn:hover { background: var(--rose-dark); }
.btn img.arrow { width: clamp(17.5px, 1.563vw, 30px); height: auto; } /* +25% */

/* Minor projects: 2-column grid */
.project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 118px gutter at the 1920px design width */
  column-gap: clamp(24px, 6.146vw, 118px);
}
.project-grid .project--wide { grid-column: 1 / -1; }
/* Every 2-column tile shares the mockup's 773:765 shape so paired titles
   always line up, whatever proportions an uploaded image has. */
.project-grid .project:not(.project--wide) .project-image img {
  aspect-ratio: 773 / 765;
  object-fit: cover;
}

/* ------------------------------------------------------------
   Decorative rose accents (hidden on small screens)
   ------------------------------------------------------------ */
.deco {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.deco--top-right { top: 0; right: 0; width: clamp(120px, 14vw, 260px); }
.page-frame { position: relative; }

/* Right-edge artwork, positions pixel-matched to the design mockup.
   deco-top anchors to the page top; the two waves anchor to the footer,
   which is exactly where they terminate in the design. */
.deco--edge-top { top: 0; right: 0; width: 45.99vw; }        /* 883px @1920, y 0..2789 */
.deco--wave-solid {                                           /* 255px @1920, ends 24px above footer */
  right: 0;
  width: 13.281vw;
  top: -243.281vw;
}
.deco--wave-outline {                                         /* 275px @1920, dips 247px below footer top */
  right: 0;
  width: 14.323vw;
  top: -246.615vw;
}

/* ------------------------------------------------------------
   Footer (identical on every page)
   ------------------------------------------------------------ */
.site-footer {
  position: relative; /* anchor for the footer-attached edge decorations */
  margin-top: clamp(60px, 6.25vw, 120px);
  color: var(--footer-text);
  /* covers sub-pixel rounding at the page bottom (high-DPI screens) */
  box-shadow: 0 2px 0 var(--rose);
}
.site-footer .wave-top {
  display: block;
  width: 100%;
  height: clamp(110px, 15.104vw, 290px);
  /* overlap the rose band by 1px so fractional sizes can't leave a seam */
  margin-bottom: -1px;
  position: relative;
}
.site-footer .wave-bottom {
  display: block;
  width: 100%;
  height: clamp(70px, 10.417vw, 200px);
  margin-top: -1px;
  position: relative;
}
.footer-body {
  background: var(--rose);
  padding: clamp(16px, 2.5vw, 48px) var(--pad-x) clamp(24px, 3.333vw, 64px);
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: clamp(48px, 11.458vw, 220px);
  max-width: 1100px;
  margin: 0 auto;
}
.footer-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-links a {
  display: inline-block;
  padding: 6px 0;
  font-family: var(--font-footer);
  font-weight: 700;
  font-size: clamp(17px, 1.563vw, 30px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer-links a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* ------------------------------------------------------------
   Resume page
   ------------------------------------------------------------ */
.resume {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  font-family: var(--font-project);
  font-weight: 300;
  font-size: clamp(14px, 1.042vw, 20px);
  line-height: 1.45;
  color: var(--ink-soft);
}
.resume a:not(.btn) { color: var(--rose-dark); text-decoration: none; }
.resume a:not(.btn):hover { text-decoration: underline; }
.resume .sep { margin: 0 0.4em; color: var(--rose); }

.resume-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 4.167vw, 80px);
  padding-bottom: clamp(24px, 2.083vw, 40px);
  border-bottom: 2px solid var(--rose);
}
.resume-contact { margin: 0 0 clamp(10px, 0.833vw, 16px); }
.resume-summary {
  margin: 0;
  max-width: 62em;
  font-size: clamp(15px, 1.25vw, 24px);
  text-wrap: pretty;
}
.resume-download { margin-top: 0; }

.resume-section { margin-top: clamp(32px, 3.125vw, 60px); }
.resume-section h2 {
  margin: 0 0 clamp(14px, 1.25vw, 24px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.563vw, 30px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-dark);
}

.resume-entry + .resume-entry { margin-top: clamp(20px, 1.875vw, 36px); }
.resume-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.resume-entry h3 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(15px, 1.25vw, 24px);
  color: var(--ink);
}
.resume-date { flex-shrink: 0; white-space: nowrap; }
.resume-org { margin: 2px 0 0; color: #777777; }
.resume-entry ul { margin: clamp(8px, 0.625vw, 12px) 0 0; padding-left: 1.2em; }
.resume-entry li { margin-bottom: 0.3em; text-wrap: pretty; }
.resume-entry li::marker { color: var(--rose); }

.resume-skills {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: clamp(20px, 2.604vw, 50px);
  margin: 0;
}
.resume-skills dt,
.resume-skills dd {
  margin: 0;
  padding: clamp(8px, 0.625vw, 12px) 0;
  border-bottom: 1px solid rgba(176, 90, 94, 0.2);
}
.resume-skills dt { font-weight: 800; color: var(--ink); }

@media (max-width: 720px) {
  .resume-head { flex-direction: column; }
  .resume-entry-head { flex-direction: column; gap: 2px; }
  .resume-skills { grid-template-columns: 1fr; }
  .resume-skills dt { border-bottom: none; padding-bottom: 0; }
}

/* ------------------------------------------------------------
   Contact page
   ------------------------------------------------------------ */
.contact-card {
  padding: 0 var(--pad-x) clamp(40px, 4.167vw, 80px);
  text-align: center;
}
.contact-name {
  margin: 0 0 clamp(8px, 0.625vw, 12px);
  font-family: var(--font-project);
  font-weight: 800;
  font-size: clamp(18px, 1.563vw, 30px);
  color: var(--ink);
}
.contact-email {
  font-family: var(--font-project);
  font-weight: 300;
  font-size: clamp(16px, 1.25vw, 24px);
  color: var(--rose-dark);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-email:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-links {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 2.292vw, 44px);
  margin: clamp(16px, 1.458vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}
.contact-links a {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.042vw, 20px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.contact-links a:hover { color: var(--rose-dark); }

/* ------------------------------------------------------------
   Stub pages
   ------------------------------------------------------------ */
.page-placeholder {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--pad-x) 60px;
  text-align: center;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .deco { display: none; }
}

@media (max-width: 720px) {
  .site-nav { display: none; }

  .project-grid { grid-template-columns: 1fr; }

  .project { margin-bottom: 48px; }

  .project-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .project-text { max-width: 100%; }

  .footer-links {
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    max-width: none;
    top: 50%;
  }
  .site-footer .waves { height: 420px; }
}

@media (min-width: 1800px) {
  body { font-size: 16px; }
}