/* =========================================================
   Eliza Roberta Akite — portfolio
   Built from the Figma file "Portfolio" (1512px desktop frames)
   ========================================================= */

/* Hepta Slab is loaded from Google Fonts in each page's <head>. */

:root {
  --bg: #fffbf3;
  --bg-footer: #ece5d7;
  --ink: #000;

  /* The content column starts at 728px of the 1512px design = 48.15% */
  --col: 48.15%;

  /* One "design pixel", scaled down with the viewport below 1512px.
     Used for the large decorative hero areas so they keep their composition. */
  --px: calc(min(100vw, 1512px) / 1512);

  /* Text and UI scale: fixed at the 13" MacBook size (1470 / 1512 = 97.22%),
     so text stays the same size on every desktop screen, big or small. */
  --u: 0.97222px;

  /* Hero scale for the big title words: NOT capped, so the word always spans
     the whole screen and is cropped exactly like on the 13" screen. */
  --hx: calc(100vw / 1512);

  --text: calc(15.75 * var(--u));
  --text-lh: calc(26 * var(--u));
  --small: calc(13.125 * var(--u));
  --small-lh: calc(21 * var(--u));
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Hepta Slab", Georgia, serif;
  font-weight: 400;
  font-size: var(--text);
  line-height: var(--text-lh);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: calc(3 * var(--u)); text-decoration-thickness: calc(1 * var(--u)); }
a:focus-visible { outline: calc(1 * var(--u)) solid var(--ink); outline-offset: calc(4 * var(--u)); }

.wrap {
  position: relative;
  max-width: 1512px;
  margin: 0 auto;
}

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

.site-header {
  position: relative;
  z-index: 3;
  height: calc(147 * var(--u));
  display: grid;
  grid-template-columns: var(--col) repeat(3, minmax(0, calc(260.5 * var(--u))));
}

.logo {
  position: fixed;
  z-index: 1000;            /* always above photos while scrolling */
  left: calc(53 * var(--u));   /* always pinned to the left edge of the screen */
  top: calc(35.88 * var(--u));
  width: calc(146.125 * var(--u));
}
.logo img { width: calc(146.125 * var(--u)); height: auto; }
.logo:hover { text-decoration: none; }

.nav { display: contents; }

.nav-item {
  padding-top: calc(33.25 * var(--u));
  padding-right: calc(24 * var(--u));
}
.nav-item:first-of-type { grid-column: 2; }
.nav-item:nth-of-type(1) .nav-desc { max-width: calc(185 * var(--u)); }
.nav-item:nth-of-type(3) .nav-desc { max-width: calc(190 * var(--u)); }
.nav-item:hover { text-decoration: none; }

.nav-title {
  display: block;
  font-size: var(--text);
  line-height: calc(26.25 * var(--u));
  letter-spacing: calc(2.3625 * var(--u));
}
.nav-item:hover .nav-title,
.nav-item[aria-current="page"] .nav-title {
  text-decoration: underline;
  text-underline-offset: calc(4 * var(--u));
  text-decoration-thickness: calc(1 * var(--u));
}

.nav-desc {
  display: block;
  margin-top: calc(17.5 * var(--u));
  max-width: calc(208 * var(--u));
  font-size: var(--small);
  line-height: var(--small-lh);
}

/* ---------- Content column ---------- */

.col {
  margin-left: var(--col);
  /* 702 design px of content + the 24px safety padding on the right */
  max-width: calc(726 * var(--u));
  padding-right: calc(24 * var(--u));
}

/* ---------- Big hero word (Archive / Journal / Contact) ---------- */

.hero {
  /* full screen width, even when the rest of the page is centred */
  --px: var(--hx);
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: calc(718 * var(--px));
}

.hero-word {
  position: absolute;
  left: 0;
  margin: 0;
  white-space: nowrap;
  font-weight: 300;
  font-size: calc(var(--fs) * var(--px));
  letter-spacing: calc(var(--ls) * var(--px));
  /* Same box model as Figma: a 21px line box centred on --cy */
  line-height: calc(21 * var(--px));
  height: calc(21 * var(--px));
  top: calc((var(--cy) - 10.5) * var(--px));
  transform: translateX(calc(var(--x) * var(--px)));
  z-index: 1;
}

.hero-img {
  position: absolute;
  z-index: 2;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  width: calc(var(--w) * var(--px));
  height: auto;
}

.hero-rot {
  transform-origin: 0 0;
  transform: rotate(var(--rot));
  border-radius: calc(var(--r) * var(--px));
}

.intro { max-width: calc(475 * var(--u)); }
.page-archive .intro { max-width: none; }

/* ---------- Home ---------- */

.home-hero {
  position: relative;
  /* fill the screen under the header, so the footer starts right below the fold */
  min-height: max(calc(685 * var(--px)), calc(100vh - 147 * var(--u)));
  min-height: max(calc(685 * var(--px)), calc(100svh - 147 * var(--u)));
  /* flower + text sit at the bottom, always the same gap above the footer as on 13" */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(483.6 * var(--px));
  padding-bottom: calc(97.4 * var(--u));
}
.home-hero .hero-img { --x: 433.7; --y: 173.5; --w: 336.65; z-index: 0; }
.home-hero .hero-img { top: auto; bottom: calc(33 * var(--px)); }
/* the thistle never shrinks: always the 13" size, and it stays tied to the text column */
.home-hero { --px: var(--u); }
/* on screens bigger than 13" the thistle grows a little (up to ~29% at 2400px+) */
.home-hero { --ts: clamp(0.97222px, calc(0.97222px + (100vw - 1470px) * 0.0003), 1.25px); }
.home-hero .hero-img {
  width: calc(336.65 * var(--ts));
  /* measured on the visible flower (not its transparent box), so at any size the
     petals stay 17px from the text and the stem ends on the last text line */
  left: calc(var(--col) - 17.5 * var(--u) - 277 * var(--ts));
  bottom: calc(104.9 * var(--u) - 71.92 * var(--ts));
}
.thistle { aspect-ratio: 674 / 958; }
.thistle .tp, .thistle .tp-part { position: absolute; height: auto; display: block; will-change: transform; user-select: none; -webkit-user-drag: none; }
.thistle .tp-head { height: auto; }
/* at rest the flower is one image (no hairline gaps); the petals only take over while they fly */
.thistle .tp-head .split { visibility: hidden; }
.thistle .tp-head.is-split .split { visibility: visible; }
.thistle .tp-head.is-split .head-full { visibility: hidden; }
.home-hero .col { position: relative; z-index: 1; max-width: calc(571 * var(--u)); }
.home-hero .col p { max-width: calc(470 * var(--u)); }
/* the hand-placed line break only makes sense at the full text width (13" and up);
   once the column gets narrower and the text wraps on its own, drop it */
.home-hero .col { container: homecol / inline-size; }
@container homecol (max-width: 456px) { .home-hero .col br { display: none; } }

/* ---------- Archive list ---------- */

.projects {
  list-style: none;
  margin: calc(122.9 * var(--u)) 0 0;   /* same gap under the intro as on Journal */
  padding: 0;
  border-top: 1px solid var(--ink);
}

.projects { position: relative; }
/* big screens: when the list is in view, the footer stays just below the screen
   (the list area fills the screen); on 13" the gap is the usual 264px */
.page-archive .projects {
  box-sizing: border-box;
  min-height: calc(100vh - 44 * var(--u));
  padding-bottom: calc(264.2 * var(--u));
}
.page-archive .site-footer { margin-top: 0; }

.project {
  display: grid;
  grid-template-columns: minmax(0, calc(338.5 * var(--u))) minmax(0, 1fr);
  padding: calc(19.5 * var(--u)) 0;            /* same space above and below the text */
  border-bottom: 1px solid var(--ink);
}

/* 3. Hover preview — shown in the empty left area, as in the Figma prototype */
.project-preview {
  /* Fixed to the screen, bottom-left, like the Figma overlay */
  position: fixed;
  z-index: 5;
  /* bottom-right corner stays put; on big screens the photo grows up and left
     until it is the same distance from the screen edge as on 13" */
  left: calc(51 * var(--u));
  bottom: calc(52 * var(--px));
  /* never bigger than 864px; on even wider screens it just stays on the left */
  width: min(calc(max(0px, (100vw - 1512px) / 2) + 521 * var(--px) - 51 * var(--u)),
             864px,
             calc(100vh - 52 * var(--px) - 24px));
  aspect-ratio: 1;
  object-fit: cover;
  height: auto;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
video.project-preview { aspect-ratio: 1; object-fit: cover; }
.project.is-active .project-preview,
.project:has(:focus-visible) .project-preview {
  opacity: 1;
  visibility: visible;
}
.project-title { padding-right: calc(24 * var(--u)); }
.project-title span { display: block; }

/* ---------- Journal entries ---------- */

.entries { margin-top: calc(122.9 * var(--u)); }

.entry {
  display: grid;
  grid-template-columns: calc(26 * var(--u)) calc(var(--col) - calc(52 * var(--u))) calc(26 * var(--u)) minmax(0, calc(702 * var(--u))) minmax(calc(24 * var(--u)), 1fr);
  margin-bottom: calc(27 * var(--u));
}
.entry-img { grid-column: 2; }
.entry-text { grid-column: 4; }
.entry:last-child { margin-bottom: calc(28 * var(--u)); }

.entry-img img {
  width: 100%;
  max-width: calc(676 * var(--u));
  /* always the 13" photo height: on narrower screens the photo is cropped taller
     instead of shrinking, so the gaps between the entries stay the same */
  height: calc(519.8 * var(--u));
  object-fit: cover;
  border-radius: calc(7 * var(--u));
}

.entry-text {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink);
  padding-bottom: calc(45 * var(--u));
}

.entry-title {
  margin: calc(38.25 * var(--u)) 0 calc(40 * var(--u));
  font-weight: 400;
  font-size: calc(35 * var(--u));
  line-height: calc(52 * var(--u));
  letter-spacing: calc(-1.05 * var(--u));
}

.entry-text p { margin-top: auto; max-width: calc(572 * var(--u)); }

/* ---------- Contact ---------- */

.contact-hero { height: calc(685 * var(--px)); }

.contact-info {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: calc(119.6 * var(--u));
  /* keep the contact lines under the nav columns (the hero itself is full width) */
  left: max(0px, calc((100vw - 1512px) / 2));
  width: min(100vw, 1512px);
  display: grid;
  grid-template-columns: var(--col) repeat(2, minmax(0, calc(260.5 * var(--u))));
}
.contact-info > div:first-child { grid-column: 2; }

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

.site-footer {
  background: var(--bg-footer);
}
.site-footer .wrap { height: calc(336 * var(--u)); }

.footer-note {
  position: absolute;
  left: calc(50% - calc(35 * var(--u)));
  top: calc(241 * var(--u));
  line-height: calc(26.25 * var(--u));
  padding-right: calc(24 * var(--u));
}

.stars {
  position: absolute;
  left: 76.33%;
  top: calc(105.45 * var(--u));
  width: calc(227.5 * var(--u));
  height: auto;
  aspect-ratio: 455 / 300;
}
.stars .star { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* ---------- Spacing that differs per page ---------- */


/* =========================================================
   Smaller screens
   ========================================================= */

@media (max-width: 1100px) {
  /* one row: logo + 3 nav items with equal space between all four */
  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 calc(53 * var(--u));
    column-gap: calc(32 * var(--u));   /* never closer than this */
  }
  .site-header::before {            /* placeholder for the fixed logo */
    content: "";
    flex: none;
    width: calc(146.125 * var(--u));
    margin-right: calc(16 * var(--u));   /* a little more air after the logo */
  }
  .nav-item { flex: 0 1 auto; min-width: 0; padding-right: 0; }
  .nav-item:first-of-type { grid-column: auto; }
}

@media (max-width: 760px) {
  :root { --col: 0px; --u: 1px; }

  .site-header { padding-top: 130px; column-gap: 16px; }
  .nav-title { letter-spacing: 1.5px; font-size: 14px; }
  .nav-desc { font-size: 12px; line-height: 18px; margin-top: 8px; }

  .col { padding: 0 24px; max-width: none; }

  .home-hero { padding-top: calc(880 * var(--px)); }
  .home-hero .hero-img { --x: 476; --y: 60; --w: 560; }

  .hero { height: calc(900 * var(--px)); }

  .projects { margin-top: 64px; }
  .project { grid-template-columns: 1fr; row-gap: 8px; padding-bottom: 18px; }
  .project-preview { display: none; }

  .entries { margin-top: 64px; }
  .entry { grid-template-columns: 1fr; padding: 0 24px; row-gap: 20px; margin-bottom: 48px; }
  .entry-img, .entry-text { grid-column: 1; margin-right: 0; }
  .entry-title { margin: 20px 0 20px; font-size: 28px; line-height: 40px; }
  .entry-text { padding-bottom: 0; }

  .contact-info {
    position: relative;
    top: 0;
    grid-template-columns: max-content 1fr;
    padding: 16px 24px 0;
    column-gap: 32px;
  }
  .contact-hero .hero-word,
  .contact-hero .hero-img { margin-top: 48px; }
  .contact-info > div:first-child { grid-column: auto; }
  .contact-hero { height: calc(900 * var(--px) + 48px); }

  .page-archive .site-footer { margin-top: 96px; }

  .site-footer .wrap { height: 240px; }
  .footer-note { left: 24px; top: auto; bottom: 48px; }
  .stars { left: auto; right: 24px; top: 40px; width: 160px; }
}

/* =========================================================
   Case studies & journal posts
   Laid out on a 1512px canvas (the Figma frame) that is zoomed
   to the window width, so it is 100% on a 14" and ~97% on a 13" MacBook.
   ========================================================= */

.case-wrap {
  overflow: hidden;
}

.canvas {
  zoom: var(--z, 1);
  position: relative;
  width: 1512px;
  margin: 0 auto;
}

.canvas .el {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.canvas .pic { display: block; max-width: none; object-fit: cover; }
/* edge-to-edge photos: on screens wider than 13" the page no longer reaches the
   screen edges, so these get 8px rounded corners (and are trimmed to the page) */
@media (min-width: 1471px) {
  .canvas .bleed { clip-path: inset(0 calc(var(--cr, 0) * 1px) 0 calc(var(--cl, 0) * 1px) round calc(8px / var(--z, 1))); }
}

.canvas .cnav {
  top: 33.25px;
  font-size: 15.75px;
  line-height: 26.25px;
  letter-spacing: 2.3625px;
  z-index: 50;
}
.cnav:hover { text-decoration: none; }
.cnav:hover,
.cnav[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.ctext {
  font-size: 15.75px;
  line-height: 26px;
  white-space: nowrap;
}
.ctext p + p { margin-top: 26px; }

.ctitle {
  margin: 0;
  font-weight: 400;
  font-size: 35px;
  line-height: 52px;
  letter-spacing: -1.05px;
  white-space: nowrap;
}

/* Phones: stack everything in reading order */
@media (max-width: 760px) {
  .canvas {
    zoom: 1;
    width: auto;
    height: auto !important;
    padding: 180px 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .canvas .el {
    position: static;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
  }
  .canvas .pic { border-radius: 7px; }
  .canvas .line, .canvas .shape, .canvas .box { display: none; }
  .cnav-wrap { display: flex; gap: 20px; position: absolute; top: 128px; left: 24px; }
  .cnav { position: static !important; font-size: 14px; letter-spacing: 1.5px; }
  .ctext, .ctitle { white-space: normal; }
  .ctext br, .ctitle br { display: none; }
  .ctitle { font-size: 28px; line-height: 40px; margin-top: 24px; }
}

/* Journal: the whole entry (photo + text) opens the post */
.entry { position: relative; }
.entry-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.entry:hover .entry-title a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.entry { cursor: pointer; }

/* =========================================================
   Phone layout (from the 440px iPhone designs)
   On screens up to 760px wide the phone design is shown instead
   of the laptop one. It is scaled to the phone's width.
   ========================================================= */

.mcanvas { display: none; }

@media (max-width: 760px) {
  body:has(.mcanvas) > *:not(.mcanvas):not(script) { display: none !important; }

  .mcanvas {
    display: block;
    position: relative;
    width: 440px;
    margin: 0 auto;
    overflow: hidden;
    zoom: var(--zm, 1);
  }
  .mcanvas .el {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
  }
  .mcanvas .pic { display: block; max-width: none; object-fit: cover; }
  .mcanvas .mlogo img { display: block; width: 100%; height: 100%; }

  .mcanvas .mtext, .mcanvas .mtitle, .mcanvas .msmall, .mcanvas .mnav {
    white-space: nowrap;
    color: #000;
  }
  .mcanvas .mtext  { font-size: 15px; line-height: 26px; }
  .mcanvas .mtext p + p { margin-top: 26px; }
  .mcanvas .mtitle { margin: 0; font-weight: 400; font-size: 26px; line-height: 34px; letter-spacing: -0.78px; }
  .mcanvas .msmall { font-size: 12px; line-height: 22px; }
  .mcanvas .mnav   { font-size: 15px; line-height: 26px; letter-spacing: 2.25px; }
  .mcanvas a:hover { text-decoration: none; }
  .mcanvas .mnav[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
  }
}
@media (max-width: 760px) {
  .mcanvas .slide-l { translate: calc(var(--slide, 0px) * -1) 0; will-change: translate; }
  .mcanvas .slide-r { translate: var(--slide, 0px) 0; will-change: translate; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .mcanvas .slide-l, .mcanvas .slide-r { translate: none; }
}
@media (max-width: 760px) {
  /* Safari places the page just below the iPhone's status bar (about 62pt on an
     iPhone 16 Pro Max). Pull the design up by that amount so the logo sits where
     it does in the Figma mockup; the status bar area shows the page colour. */
  .mcanvas { margin-top: -62px; }
}
/* Videos sit exactly where the photos were */
video.pic { display: block; object-fit: cover; background: #000; }
@media (max-width: 760px) {
  /* Footer colour runs under Safari's bottom bar and home indicator */
  .mcanvas { padding-bottom: env(safe-area-inset-bottom, 0px); background: linear-gradient(transparent calc(100% - 1px - env(safe-area-inset-bottom, 0px)), #ece5d7 0); }
}

/* Archive: the whole row (title, year, description) opens the project */
.project { position: relative; }
.project a.project-title::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.project:has(a.project-title) { cursor: pointer; }
.project:hover a.project-title span:first-child { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.project a.project-title:hover { text-decoration: none; }