/* Amy (楚玲) — personal site
   Faithful to the Figma design (Page 3), adapted for the web. */

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

:root {
  --ink: #000;
  --paper: #fff;
  --rail-x: 34px;      /* left offset of the vertical rail text */
  --content-x: 98px;   /* left edge of photo / grid in the design */
}

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Cactus Classical Serif', 'Songti SC', 'Noto Serif TC', serif;
  font-size: 19px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
a:hover, a:focus-visible { border-bottom-color: currentColor; }

/* ── Section labels: vertical, real text ──────────
   The outer .rail positions (and animates); the inner
   .rail-text carries the rotation, so entrance
   animations can never cancel it out. Plain transform
   rotation renders the same in every browser/font. */
.rail {
  /* Pinned in the left margin while its section is on screen;
     the next section's label pushes it out and takes over. */
  position: sticky;
  top: 20px;
  z-index: 3;
  align-self: flex-start;
  width: 0;      /* takes no space in the layout; the label hangs in the gutter */
  font-size: 21px;
  letter-spacing: .02em;
}
.rail-gallery { height: 0; }
.rail-text {
  display: inline-block;
  margin-left: var(--rail-x);
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);  /* Option 1: reads bottom-to-top */
}

/* ── Intro ──────────────────────────────────────── */
.intro {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.intro-inner {
  width: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding: 90px 92px 90px var(--content-x);
  display: flex;
  align-items: center;
  gap: 81px;
}

.intro-photo {
  flex: 1 1 53%;
  min-width: 0;
}
.intro-photo img {
  width: 100%;
  aspect-ratio: 658 / 408;
  object-fit: cover;
}

.intro-text {
  flex: 1 1 47%;
  min-width: 0;
  max-width: 583px;
}

.intro-text h1 {
  font-size: 21px;
  font-weight: 400;
  margin-bottom: 40px;
}

.intro-text p { margin-bottom: 24px; }

.divider {
  text-align: center;
  font-size: 20px;
  margin: 28px 0;
}

/* Contact block */
.contact { margin-top: 44px; }
.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.contact-row dt { font-style: normal; }
.contact-row dd { text-align: right; }

/* ── Entrance: soft rise on load ────────────────── */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.rail-intro,
.intro-photo,
.intro-text > * {
  animation: rise-in .7s cubic-bezier(.2, .7, .3, 1) both;
}

.intro-photo             { animation-delay: .05s; }
.rail-intro              { animation-delay: .12s; }
.intro-text > :nth-child(1) { animation-delay: .2s; }   /* heading */
.intro-text > :nth-child(2) { animation-delay: .28s; }
.intro-text > :nth-child(3) { animation-delay: .36s; }
.intro-text > :nth-child(4) { animation-delay: .44s; }  /* star divider */
.intro-text > :nth-child(5) { animation-delay: .52s; }
.intro-text > :nth-child(6) { animation-delay: .62s; }  /* contact block */

/* ── Gallery ────────────────────────────────────── */
.gallery {
  position: relative;
  /* Fill exactly one screen: a slim label strip on top,
     then 4 rows of photos share the remaining height. */
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
}

.gallery-title-mobile { display: none; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  margin-left: var(--content-x);
}

.cell {
  border: 0;
  padding: 0;
  background: none;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: zoom-in;
}
.cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
@media (hover: hover) {
  .cell:hover img { transform: scale(1.03); }
}

/* ── Photo reveal: tiles rise in as the gallery scrolls into view.
     Gated on the .js class so photos stay visible without JavaScript. ── */
.js .cell {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s ease var(--d, 0s), transform .65s cubic-bezier(.2, .7, .3, 1) var(--d, 0s);
}
.js .cell.in {
  opacity: 1;
  transform: none;
}

/* ── Lightbox ───────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .96);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }

.lb-img {
  max-width: min(88vw, 1400px);
  max-height: 88vh;
  object-fit: contain;
}

.lightbox button {
  position: absolute;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 30px;
  color: var(--ink);
  cursor: pointer;
  padding: 12px 18px;
  line-height: 1;
}
.lb-close { top: 18px; right: 24px; }
.lb-prev  { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next  { right: 10px; top: 50%; transform: translateY(-50%); }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1100px) {
  .intro-inner { gap: 56px; padding-right: 56px; }
}

@media (max-width: 900px) {
  .rail { display: none; }

  .intro { min-height: 0; }
  .intro-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 44px;
    padding: 72px 28px;
  }
  .intro-photo, .intro-text { flex: none; width: 100%; max-width: none; }

  .gallery { height: auto; display: block; }
  .grid { grid-template-rows: none; margin-left: 0; }
  .cell { height: auto; aspect-ratio: 351 / 245; }
  .gallery-title-mobile {
    display: block;
    font-size: 21px;
    font-weight: 400;
    padding: 8px 28px 28px;
  }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .grid { grid-template-columns: 1fr; }
  .cell { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cell img { transition: none; }
  .rail-intro, .intro-photo, .intro-text > * { animation: none; }
  .js .cell { opacity: 1; transform: none; transition: none; }
}