/* Alison Fung portfolio. Layout modeled on a minimal three-section portfolio:
   full-bleed torn-paper collage hero, big serif name, plain sections. */
:root{
  --ink:#111;
  --body:#2c2c2c;
  --muted:#6b6b6b;
  --line:#e3e3e0;
  --paper:#fff;
  --band:#f5f5f3;
  --accent:#141155;      /* IMSA navy, used sparingly for links */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Open Sans','Segoe UI',system-ui,sans-serif;
  --label:'Montserrat','Segoe UI',system-ui,sans-serif;
  --p1:polygon(0.00% 0.00%, 0.00% 100.00%, 99.93% 100.00%, 96.76% 96.15%, 100.00% 92.31%, 99.60% 88.46%, 99.18% 84.62%, 97.36% 80.77%, 97.42% 76.92%, 99.57% 73.08%, 100.00% 69.23%, 97.71% 65.38%, 97.80% 61.54%, 97.90% 57.69%, 97.49% 53.85%, 95.36% 50.00%, 97.16% 46.15%, 97.86% 42.31%, 97.09% 38.46%, 98.60% 34.62%, 100.00% 30.77%, 98.20% 26.92%, 95.67% 23.08%, 95.69% 19.23%, 98.48% 15.38%, 96.16% 11.54%, 97.84% 7.69%, 100.00% 3.85%, 97.55% 0.00%);
  --p2:polygon(4.41% 0.00%, 3.02% 3.85%, 2.68% 7.69%, 2.26% 11.54%, 0.60% 15.38%, 0.75% 19.23%, 1.21% 23.08%, 3.29% 26.92%, 2.27% 30.77%, 1.91% 34.62%, 3.67% 38.46%, 3.02% 42.31%, 4.65% 46.15%, 3.55% 50.00%, 2.57% 53.85%, 1.81% 57.69%, 2.07% 61.54%, 2.67% 65.38%, 2.50% 69.23%, 0.53% 73.08%, 2.86% 76.92%, 1.40% 80.77%, 1.24% 84.62%, 2.58% 88.46%, 1.32% 92.31%, 1.10% 96.15%, 3.64% 100.00%, 96.31% 100.00%, 98.93% 96.15%, 98.06% 92.31%, 97.86% 88.46%, 98.94% 84.62%, 98.62% 80.77%, 99.68% 76.92%, 97.49% 73.08%, 97.97% 69.23%, 98.65% 65.38%, 95.25% 61.54%, 96.31% 57.69%, 95.38% 53.85%, 98.52% 50.00%, 99.50% 46.15%, 97.08% 42.31%, 96.92% 38.46%, 98.50% 34.62%, 100.00% 30.77%, 99.03% 26.92%, 96.67% 23.08%, 98.75% 19.23%, 97.86% 15.38%, 98.48% 11.54%, 99.54% 7.69%, 98.41% 3.85%, 98.18% 0.00%);
  --p3:polygon(1.95% 0.00%, 0.46% 3.85%, 2.61% 7.69%, 2.48% 11.54%, 3.40% 15.38%, 3.66% 19.23%, 3.96% 23.08%, 1.48% 26.92%, 2.66% 30.77%, 3.00% 34.62%, 0.00% 38.46%, 0.00% 42.31%, 2.91% 46.15%, 3.38% 50.00%, 0.25% 53.85%, 0.24% 57.69%, 3.18% 61.54%, 0.00% 65.38%, 2.82% 69.23%, 0.55% 73.08%, 4.00% 76.92%, 0.36% 80.77%, 1.72% 84.62%, 2.16% 88.46%, 1.21% 92.31%, 1.98% 96.15%, 1.81% 100.00%, 100.00% 100.00%, 100.00% 0.00%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:400;color:var(--body);background:var(--paper);line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- top bar ---------- */
.topbar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px 32px;color:#fff;transition:background .25s,color .25s,box-shadow .25s}
.topbar a{color:inherit;text-decoration:none;font-family:var(--label);font-weight:700;font-size:15px;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.topbar nav{display:flex;gap:30px}
.topbar a:hover{opacity:.7}
.topbar:not(.scrolled){background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}
.topbar.scrolled{background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.topbar.scrolled a{text-shadow:none}

/* ---------- hero collage ---------- */
.hero{position:relative;height:min(94vh,860px);min-height:540px;background:#fff;overflow:hidden}
.collage{display:flex;height:100%}
.panel{position:relative;flex:1 1 0;display:block;overflow:hidden;margin-left:6px;color:#fff;text-decoration:none}
.panel:first-child{margin-left:0}
.panel:nth-child(1){clip-path:var(--p1)}
.panel:nth-child(2){clip-path:var(--p2)}
.panel:nth-child(3){clip-path:var(--p3)}
.panel img{width:100%;height:100%;object-fit:cover;filter:brightness(1.1) saturate(1.05);transition:transform .6s ease}
.panel:hover img{transform:scale(1.04)}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.24) 0,rgba(0,0,0,0) 16%),linear-gradient(to bottom,rgba(0,0,0,0) 42%,rgba(0,0,0,.46) 100%)}
.panel-label{position:absolute;z-index:2;left:0;right:0;bottom:7%;padding:0 8px;line-height:1.35;text-align:center;font-family:var(--label);font-weight:700;font-size:17px;letter-spacing:.2em;text-transform:uppercase}
.panel-label::after{content:"";display:block;width:34px;height:1px;background:#fff;margin:10px auto 0;transition:width .3s}
.panel:hover .panel-label::after{width:56px}
.hero-title{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;color:#fff;pointer-events:none;padding:0 20px 156px}
.hero-title h1{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,9.5vw,7.4rem);line-height:1.05;text-shadow:0 2px 28px rgba(0,0,0,.5)}

/* ---------- intro ---------- */
.intro{padding:80px 24px 24px;text-align:center}
.intro p{max-width:660px;margin:0 auto;font-weight:300;font-size:1.28rem;line-height:1.7;color:var(--ink)}

/* ---------- sections ---------- */
.section{padding:96px 24px;scroll-margin-top:60px}
.section.band{background:var(--band)}
.wrap{max-width:1040px;margin:0 auto}
h2{font-family:var(--label);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.2rem);line-height:1.2;color:var(--ink);letter-spacing:-.01em}
.stars{margin:14px 0 34px;color:var(--muted);letter-spacing:.55em;font-size:1rem}
h3{font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:64px 0 6px}
h3.first{margin-top:0}
#art h3{font-size:1.25rem;letter-spacing:-.005em;text-transform:none;color:var(--muted);margin:72px 0 10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
#art h3.first{margin-top:0}
.lede{max-width:640px;font-size:1.05rem}
.lede + .lede{margin-top:16px}

/* two-column intro with a photo */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.split.pw{grid-template-columns:1.3fr .7fr;align-items:start}
.pw-logo{display:block;max-width:260px;margin:-8px 0 0 auto}
.pw-logo img{width:100%;height:auto}
.pw-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:52px}
.pw-photos img{width:100%;aspect-ratio:4/3;object-fit:cover}
figure{margin:0}
figure img{width:100%;height:auto;border-radius:2px}
.cap-title{display:block;font-style:normal;font-family:var(--label);font-weight:700;font-size:.9rem;color:var(--ink)}
.cap-sub{display:block;margin-top:2px}
figcaption{margin-top:10px;font-size:.82rem;color:var(--muted);font-style:italic;line-height:1.5}


/* dash lists, like the reference */
.dash{list-style:none}
.dash li{position:relative;padding-left:20px;margin:7px 0;font-size:.95rem}
.dash li::before{content:"-";position:absolute;left:0;color:var(--muted)}
.highlights li{font-size:1.02rem;margin:14px 0;max-width:720px}

/* ---------- art ---------- */
.paintings{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.paintings img{width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:0 6px 22px rgba(0,0,0,.13)}
.lede + .grid3{margin-top:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid3 img{width:100%;aspect-ratio:3/4;object-fit:cover}
.grid3.top{align-items:start}
.grid3.top + .grid3.top{margin-top:16px}
.grid3.four{grid-template-columns:repeat(4,1fr);gap:14px}
.grid3.four img{aspect-ratio:1/1}
.grid3.squares img{aspect-ratio:1/1}
.grid3.land img{aspect-ratio:4/3}
.grid3.else img{aspect-ratio:3/2}
.grid3.else .wide img{aspect-ratio:3/2}
.grid3.else figure:not(.wide) img{aspect-ratio:auto;height:100%;max-height:none}
.split.about-top{grid-template-columns:1.2fr .8fr;align-items:start}
.split.about-top figure img{aspect-ratio:4/5;object-fit:cover}
.grid3.squares .natural img{aspect-ratio:auto;height:auto}
.grid3 .natural img{aspect-ratio:auto;height:auto}
.grid3 .wide{grid-column:span 2}
.grid3 .wide img{aspect-ratio:1.54/1}

/* ---------- voice ---------- */
.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.video-box{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.video-box img,.video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.video-thumb{position:absolute;inset:0;display:block;border:0;background:none;cursor:pointer}
.play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 18px rgba(0,0,0,.35);transition:transform .2s}
.play::after{content:"";position:absolute;left:25px;top:19px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--ink)}
.video-thumb:hover .play{transform:scale(1.1)}
.video-title{font-family:var(--label);font-weight:700;font-size:.98rem;color:var(--ink);margin-top:12px;line-height:1.35}
.video-meta{font-size:.85rem;color:var(--muted)}
.video-meta a{color:var(--muted)}
.moments{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start;margin-top:8px}
.moments img{width:100%;height:440px;object-fit:cover}


/* ---------- responsive ---------- */
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:32px}
  .split.pw{grid-template-columns:1fr}
  .split.about-top{grid-template-columns:1fr}
  .split.about-top figure{max-width:300px}
  .pw-logo{margin:0;max-width:240px}
  .paintings{grid-template-columns:repeat(2,1fr)}
  .videos{grid-template-columns:1fr;gap:34px}
  .moments{grid-template-columns:1fr}
  .moments img{height:320px}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .grid3.four{grid-template-columns:repeat(2,1fr)}
  .grid3 .wide img{aspect-ratio:3/2}
}
@media (max-width:640px){
  .topbar{padding:14px 16px;justify-content:center}
  .topbar .brand{display:none}
  .topbar nav{gap:4px 14px;flex-wrap:wrap;justify-content:center}
  .pw-photos{grid-template-columns:1fr}
  .topbar a{font-size:11px;letter-spacing:.1em}
  .section{padding:68px 20px;scroll-margin-top:84px}
  .panel{margin-left:4px}
  .panel-label{font-size:11px;letter-spacing:.1em;bottom:6%;padding:0 4px}
}