/* Lily McGann — portfolio styles. Colours and sizes live in :root. */
:root {
  --bg: #f8f7fd;          /* soft lavender-white page colour from the Canva layout */
  --ink: #1d1d1f;
  --muted: #6b6a73;
  --gutter: clamp(16px, 4.4vw, 60px);
  --grid-gap: clamp(8px, 1.5vw, 21px);
  --label: 400 13px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: 400 clamp(13px, 1.05vw, 15px)/1.45 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--body); }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
h1, h2 { margin: 0; font: inherit; }

/* ---------- HOME ---------- */
.home { position: relative; height: 100vh; height: 100svh; min-height: 420px; overflow: hidden; background: #111; }
.home__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.note-card { position: absolute; z-index: 2; }
.note-card__img { width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.18)); user-select: none; -webkit-user-drag: none; }
.home__nav {
  position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: 13%;
  font: 400 clamp(9px, .82vw, 13px)/1 Arial, Helvetica, sans-serif; letter-spacing: .02em; text-transform: uppercase;
}
/* Regular weight; bold on hover. The hidden bold copy (::after) reserves the bold width so nothing shifts. */
.home__nav a { padding: 6px 2px; display: inline-flex; flex-direction: column; align-items: center; }
.home__nav a::after { content: attr(data-text); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; }
.home__nav a:hover, .home__nav a:focus-visible { font-weight: 700; }
/* Hotspot nav: the words are drawn in the card picture; each link is an invisible box over its word.
   Hover/focus swipes a pink highlighter across the word (multiply blend, so the ink shows through). */
.home__nav--hotspots { inset: 0; display: block; }
.home__nav--hotspots a { position: absolute; display: block; padding: 0; border-radius: 4px; }
.home__nav--hotspots a::after { content: none; }
.home__nav--hotspots a:hover, .home__nav--hotspots a:focus-visible { font-weight: inherit; }
.home__nav--hotspots a:focus { outline: none; }

/* ---------- PINK HIGHLIGHTER ----------
   On hover, tap or keyboard focus, a highlighter swipes left→right across handwritten links
   (home notebook words, header name, footer words + arrows). Multiply blend keeps the ink visible.
   Change the colour here. */
:root { --hl: #ff97e1; }
.page__head a, .page__foot a { position: relative; }
.home__nav--hotspots a::before, .page__head a::before, .page__foot a::before {
  content: ""; position: absolute; left: -2%; right: -2%; top: 30%; bottom: 22%; pointer-events: none;
  background: var(--hl); mix-blend-mode: multiply; opacity: .55; border-radius: 3px;
  transform: rotate(-2.5deg) scaleX(0); transform-origin: left center; transition: transform .28s ease;
}
.page__head a::before, .page__foot a::before { left: -6px; right: -6px; top: 22%; bottom: 14%; }
:is(.home__nav--hotspots, .page__head, .page__foot) a:is(:hover, :focus-visible, :active)::before { transform: rotate(-2.5deg) scaleX(1); }
.page__head a:focus, .page__foot a:focus { outline: none; }
/* Handwritten nav: sized as a share of the card's width (cqw) so it scales with the notebook.
   --hw-cq is that share per PNG pixel. Hover fades instead of going bold. */
.home__note { container-type: inline-size; }
.home__nav:has(.hw) { gap: 9%; }
.home__nav .hw { --hw-cq: .026; width: calc(var(--nw, 0) * var(--hw-cq) * 1cqw); }
.home__nav a.has-hw::after { content: none; }
.home__nav a.has-hw { transition: opacity .2s ease; }
.home__nav a.has-hw:hover, .home__nav a.has-hw:focus-visible { opacity: .55; }

/* ---------- SHARED PAGE FRAME ---------- */
.page {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(28px, 8.5vh, 65px) 0 clamp(28px, 6vh, 50px);
}
.page__head, .page__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--gutter); font: var(--label); text-transform: uppercase;
}
.page__foot a:hover, .page__head a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- HANDWRITING (header/footer labels + arrows, see content.js → handwriting) ----------
   Every PNG has the same pen thickness (24px), so one scale sizes them all consistently. */
:root { --hw-scale: .1; }
[data-hw="name"] { --hw-k: .8; }   /* the name was written bigger on the page, so shrink it a touch to balance */
.hw { display: block; width: calc(var(--nw, 0) * 1px * var(--hw-scale) * var(--hw-k, 1)); height: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
.has-hw, .hw-arrow { display: inline-block; vertical-align: middle; line-height: 0; }
.page__head a, .page__foot a { display: inline-flex; align-items: center; gap: 10px; }
.page__head a:hover, .page__foot a:hover { text-decoration: none; }
.hw-arrow--left .hw { transform: scaleX(-1); }
/* ↑ = the → drawing rotated; the box swaps width/height so it takes up the right space. */
.hw-arrow--up { --hw-k: .6; position: relative; width: calc(var(--ah, 0) * 1px * var(--hw-scale) * var(--hw-k)); height: calc(var(--aw, 0) * 1px * var(--hw-scale) * var(--hw-k)); }
.hw-arrow--up .hw { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }

/* ---------- WORK GRID ---------- */
.work-grid {
  list-style: none; margin: 0; padding: clamp(32px, 11vh, 90px) 0 clamp(32px, 11vh, 90px);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--grid-gap); align-content: start;
}
.work-tile { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #ddd; cursor: pointer; aspect-ratio: 2 / 1; overflow: hidden; }
.work-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s ease; }
@media (hover: hover) {
  .work-tile:hover img { transform: scale(1.04); filter: brightness(.85); }
}

/* ---------- PAPER NOTES (About / Say hi) ----------
   The picture is stretched behind the text so the card always fits its words. */
.paper { position: relative; aspect-ratio: var(--ar, 1.4); container-type: inline-size; }
.paper__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; filter: drop-shadow(0 2px 4px rgba(0,0,0,.06)); }
/* Text size is a fraction of the card width (cqw), so it always lands where it did in Canva. */
.paper__text { position: relative; padding: calc(var(--top, 35%) / var(--ar, 1.4)) 8.4% 6% 7.8%; font-size: var(--fs, 3.45cqw); line-height: 1.45; transform: rotate(var(--rot, 0deg)); transform-origin: left top; }
.paper__text p { margin: 0 0 1.45em; }
.paper__text p:last-child { margin-bottom: 0; }
.paper__text--center { text-align: center; }
.paper__text--center a { display: block; text-decoration: underline; text-underline-offset: 2px; line-height: 1.35; }
.paper__text--center a:hover { color: var(--muted); }

/* ---------- ABOUT ---------- */
/* Matches the Canva layout: photo ~25vw wide, notebook ~28vw, both centred vertically on the page. */
.about { display: flex; align-items: center; align-self: center; gap: clamp(16px, 3.5vw, 56px); padding: clamp(24px, 4vh, 40px) var(--gutter); }
.about__photo { width: clamp(180px, 25vw, 420px); aspect-ratio: 341 / 425; object-fit: cover; }
.about__note { width: clamp(300px, 28vw, 460px); }

/* ---------- SAY HI ---------- */
.sayhi { display: grid; place-items: center; padding: 40px var(--gutter); }
.sayhi__note { width: clamp(270px, 23vw, 380px); transform: rotate(.6deg); }
.sayhi__note .paper__text { padding-left: 6%; padding-right: 6%; }

/* ---------- LIGHTBOX ---------- */
/* Pop-up = [← arrow] [video] [→ arrow]. --nav is the space each arrow column takes. */
.lightbox { --nav: 64px; width: min(1200px + 2 * var(--nav), 96vw, 80vh * 16 / 9 + 2 * var(--nav)); max-height: 92vh; padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; }
.lightbox::backdrop { background: rgba(10, 10, 14, .9); }
.lightbox__stage { display: grid; grid-template-columns: var(--nav) minmax(0, 1fr) var(--nav); align-items: center; }
.lightbox__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
/* Plain arrows, no circle. The button keeps a 44px tap area around the glyph. */
.lightbox__nav {
  justify-self: center; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; background: none; color: #fff; font: 400 22px/1 Arial, Helvetica, sans-serif;
  cursor: pointer; opacity: .75; transition: opacity .2s ease;
}
.lightbox__nav:hover, .lightbox__nav:focus-visible { opacity: 1; }
/* Drawn arrows in the pop-up: turned white for the dark backdrop, fixed size. */
.lightbox__nav .hw { width: 42px !important; filter: brightness(0) invert(1); position: relative; z-index: 1; }
/* Pop-up arrows get the highlighter too. The backdrop is dark, so it sits behind the white arrow instead of multiplying. */
.lightbox__nav { position: relative; }
.lightbox__nav::before {
  content: ""; position: absolute; left: 0; right: 0; top: 34%; bottom: 30%; pointer-events: none;
  background: var(--hl); opacity: .7; border-radius: 3px;
  transform: rotate(-2.5deg) scaleX(0); transform-origin: left center; transition: transform .28s ease;
}
.lightbox__nav:is(:hover, :focus-visible, :active)::before { transform: rotate(-2.5deg) scaleX(1); }
/* No focus rectangles in the pop-up. Tabbing to Close underlines it instead, so keyboard users still see where they are. */
.lightbox:focus, .lightbox__nav:focus, .lightbox__close:focus { outline: none; }
.lightbox__close:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.lightbox__nav--prev { grid-column: 1; grid-row: 1; }
.lightbox__nav--next { grid-column: 3; grid-row: 1; }
.lightbox__frame { grid-column: 2; grid-row: 1; }
.lightbox__caption { grid-column: 2; grid-row: 2; }
.lightbox__video { width: 100%; height: 100%; object-fit: contain; }
.lightbox__embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
/* Social (TikTok / Instagram) posts are portrait, so the pop-up turns tall and narrow. */
.lightbox.is-tall { width: calc(min(80vh, (92vw - 2 * var(--nav)) * 16 / 9) * 9 / 16 + 2 * var(--nav)); }
.lightbox [hidden] { display: none !important; }
.lightbox.is-tall .lightbox__frame { aspect-ratio: 9 / 16; max-height: none; }
.lightbox__soon { position: absolute; inset: 0; display: grid; place-items: center; font: var(--label); text-transform: uppercase; background: center / cover no-repeat; }
.lightbox__soon::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.lightbox__soon > * , .lightbox__soon { isolation: isolate; }
.lightbox__close { position: absolute; top: -38px; right: var(--nav); padding: 8px 0; border: 0; background: none; color: #fff; font: var(--label); text-transform: uppercase; cursor: pointer; }
.lightbox__caption { margin: 14px 0 0; font: var(--label); text-transform: uppercase; letter-spacing: .02em; }
.lightbox__caption span { color: #aaa; }
.lightbox[open] { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .work-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); padding-left: 0; padding-right: 0; }
  .about { flex-direction: column; align-items: stretch; }
  .about__photo { width: 100%; max-width: 460px; } /* same width as the notebook below, so the edges line up */
  .about__note { width: 100%; max-width: 460px; }
  .sayhi__note { width: min(100%, 290px); }   /* 290px keeps the 844px-wide card crisp on 3x phone screens; raise with a bigger export */
  .home__nav { font-size: clamp(10px, 2.9vw, 13px); }
  /* Phones: arrows sit under the video, on the same line as the caption: ←  ORGANIC SOCIAL · CANVA · PRODUCER  → */
  .lightbox { --nav: 0px; width: 92vw; }
  .lightbox.is-tall { width: calc(min(72vh, 92vw * 16 / 9) * 9 / 16); }
  .lightbox__stage { grid-template-columns: auto 1fr auto; column-gap: 8px; }
  .lightbox__frame { grid-column: 1 / -1; }
  .lightbox__nav, .lightbox__caption { grid-row: 2; margin-top: 8px; }
  .lightbox__nav { width: auto; height: auto; padding: 6px 2px; font-size: 18px; opacity: 1; }
  .lightbox__nav .hw { width: 32px !important; }
  :root { --hw-scale: .08; }
  .lightbox__nav--prev { grid-column: 1; }
  .lightbox__caption { grid-column: 2; margin: 8px 0 0; text-align: center; align-self: center; }
  .lightbox__nav--next { grid-column: 3; }
}