:root {
  --portfolio-bg:#f6f4f0;
  --portfolio-text:#221f16;
  --portfolio-soft:#e6e4dc;
  --portfolio-accent:#736f4a;
}
html { scroll-behavior:smooth; }
body { background:var(--portfolio-bg); color:var(--portfolio-text); padding-bottom:0; transition:background-color .4s, color .4s; }
body.night { --portfolio-bg:#221f16; --portfolio-text:#f6f4f0; --portfolio-soft:#484424; --portfolio-accent:#cdc2b2; }
.container { padding-left:24px; padding-right:24px; }
.navbar { position:sticky; top:0; z-index:20; background:var(--portfolio-bg); color:var(--portfolio-text); border-bottom:1px solid var(--portfolio-text); transition:background-color .4s, color .4s; }
.navbar h1 a { font-weight:normal; }
.portfolio-nav a:hover { background:transparent; color:inherit; text-decoration:underline; }
.theme-button { border:0; background:transparent; color:inherit; font:inherit; font-size:1.2em; cursor:pointer; padding:0 .8em; }
.hero { min-height:78vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.hero h2 { font-size:clamp(3rem,8vw,7.5rem); line-height:.88; font-weight:400; margin:.15em 0 .35em; max-width:1100px; }
.eyebrow { font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; }
.explore-link { border-bottom:1px solid currentColor; padding-bottom:4px; }
.star-button { border:0; background:transparent; color:var(--portfolio-accent); font-size:4rem; line-height:1; padding:0; cursor:pointer; transition:transform .45s, opacity .25s; }
.star-button.twinkle { transform:rotate(180deg) scale(1.45); opacity:.45; }
.small-star { font-size:2.5rem; }
.work-section { padding-top:80px; padding-bottom:100px; }
.section-heading { border-bottom:1px solid currentColor; margin-bottom:30px; }
.section-heading h2 { font-size:2.2rem; font-weight:400; }
.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:70px 24px; }
.project-card { display:block; font-weight:normal; }
.project-card:hover { text-decoration:none; }
.project-image { overflow:hidden; background:var(--portfolio-soft); aspect-ratio:4/3; }
.project-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.project-card:hover img { transform:scale(1.035); }
.project-meta { display:grid; grid-template-columns:45px 1fr auto; gap:12px; align-items:baseline; border-top:1px solid currentColor; margin-top:12px; padding-top:10px; }
.project-meta h3,.project-meta p { margin:0; }
.project-meta h3 { font-size:1.5rem; font-weight:400; }
.project-meta p,.project-meta span { font-size:.8rem; }
.about-section { padding-top:100px; padding-bottom:130px; border-top:1px solid currentColor; }
.about-section h2 { font-size:clamp(2.4rem,6vw,5.5rem); line-height:1; font-weight:400; max-width:950px; }
.about-section>p:last-child { max-width:620px; font-size:1.1rem; line-height:1.7; }
.contact-section { padding-top:100px; padding-bottom:120px; border-top:1px solid currentColor; text-align:center; }
.contact-section h2 { font-size:clamp(3rem,7vw,6rem); font-weight:400; margin:.2em auto .5em; }
.contact-links { display:flex; justify-content:center; gap:30px; flex-wrap:wrap; }
.contact-links a { border-bottom:1px solid currentColor; padding:8px 0; }
.footer { border-top:1px solid currentColor; padding-top:20px; padding-bottom:30px; }

/* PROJECT PAGES */
.project-hero { padding-top:90px; padding-bottom:50px; }
.project-hero h2 { font-size:clamp(4rem,10vw,9rem); line-height:.9; font-weight:400; margin:.2em 0; }
.project-intro { display:grid; grid-template-columns:1fr 2fr; gap:40px; padding-bottom:70px; }
.project-intro p { line-height:1.7; max-width:700px; }
.project-gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:24px; padding-bottom:100px; }
.gallery-image { grid-column:span 12; min-height:420px; background:var(--portfolio-soft); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.gallery-image.half { grid-column:span 6; }
.gallery-image img { width:100%; height:100%; object-fit:cover; display:block; }
.placeholder-text { text-align:center; opacity:.55; padding:40px; }
.next-project { border-top:1px solid currentColor; padding-top:70px; padding-bottom:90px; }
.next-project a { font-family:var(--font-serif); font-size:clamp(2.5rem,6vw,5rem); font-weight:400; }
@media (max-width:700px) {

  .hero { min-height:70vh; }
  .hero h2 { font-size:3.2rem; }
  .project-grid { grid-template-columns:1fr; gap:55px; }
  .project-meta { grid-template-columns:35px 1fr; }
  .project-meta p { grid-column:2; }
  .project-intro { grid-template-columns:1fr; gap:5px; }
  .gallery-image.half { grid-column:span 12; }
  .gallery-image { min-height:260px; }
}

/* Empty work card: replace this block with an <img> when the image is ready. */
.project-placeholder { display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; }
.project-placeholder span { opacity:.6; line-height:1.6; }

/* CUSTOM CURSOR: cloud on the page, star on anything clickable.
   Edit img/cursor-cloud.svg and img/cursor-star.svg to change the drawings.
   The numbers 16 16 place the click point in the center of each 32px icon. */
@media (pointer: fine) {
  html, body, body *, .navbar, .project-card, .gallery-image {
    cursor: url("../img/cursor-cloud.svg") 16 16, auto;
  }
  a, a *, button, button *, .star-button, .theme-button, .menu-button,
  .project-card, .project-card * {
    cursor: url("../img/cursor-star.svg") 16 16, pointer;
  }
}

/* Mobile and tablet navigation: click the hamburger to show the links. */
.menu-button { display:none; border:0; background:transparent; color:inherit; font:inherit; font-size:1.8rem; line-height:1; padding:8px; cursor:pointer; }
@media (max-width:900px) {
  .navbar { position:sticky; }
  .navbar > .container { min-height:65px; }
  .menu-button { display:block; }
  .portfolio-nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--portfolio-bg); border-bottom:1px solid var(--portfolio-text); padding:12px 24px 22px; }
  .portfolio-nav.open { display:block; }
  .portfolio-nav ul.display-flex { display:flex; flex-direction:column; align-items:stretch; }
  .portfolio-nav a, .portfolio-nav .theme-button { display:block; padding:12px 8px; font-size:1.1rem; }
  .portfolio-nav li { display:block; }
}

/* Keep the theme switch visible beside the hamburger on small screens.
   Order also places it after the links on desktop. */
.portfolio-nav { order:1; }
.nav-theme { order:2; }
.menu-button { order:3; }
@media (max-width:900px) {
  .nav-theme { order:1; margin-left:auto; padding:8px; }
  .menu-button { order:2; }
}

/* OPENING ANIMATION — only the homepage has these elements.
   Change the seconds below to make the intro faster or slower. */
.intro-screen {
  position:fixed; inset:0; z-index:100; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--portfolio-bg); color:var(--portfolio-text);
  text-align:center; padding:24px; transition:opacity .5s ease, visibility .5s ease;
}
.intro-screen.done { opacity:0; visibility:hidden; pointer-events:none; }
.intro-art { position:relative; width:240px; height:125px; }
.intro-cloud { display:block; color:var(--portfolio-accent); font-size:8rem; line-height:1; animation:cloud-arrive 1.5s ease both; }
.intro-sparkle { position:absolute; top:18px; right:30px; color:#d9aa60; font-size:2.7rem; animation:sparkle-in 1.1s .6s ease both; }
.intro-small { font-size:.72rem; letter-spacing:.22em; margin:12px 0; animation:fade-up .7s .4s both; }
.intro-name { font-size:clamp(3rem,9vw,7rem); font-weight:400; line-height:1; margin:0; animation:fade-up .8s .7s both; }
.intro-name span { font-size:.35em; color:var(--portfolio-accent); vertical-align:top; padding-left:8px; }
.intro-enter { animation:fade-up .8s 1.1s both; }
.intro-skip { position:absolute; bottom:30px; right:30px; border:0; background:transparent; color:inherit; font:inherit; text-decoration:underline; padding:10px; cursor:pointer; }
@keyframes cloud-arrive {
  from { opacity:0; transform:translateX(-90px) scale(.75); }
  to { opacity:1; transform:translateX(0) scale(1); }
}
@keyframes sparkle-in {
  0% { opacity:0; transform:scale(.2) rotate(-90deg); }
  55% { opacity:1; transform:scale(1.4) rotate(15deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes fade-up {
  from { opacity:0; transform:translateY(22px); }
  to { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
  .intro-screen { transition:none; }
  .intro-cloud, .intro-sparkle, .intro-small, .intro-name, .intro-enter { animation:none; }
}
@media (max-width:700px) {
  .intro-art { width:180px; height:100px; }
  .intro-cloud { font-size:6rem; }
  .intro-sparkle { right:12px; }
}
@media (pointer:fine) {
  .intro-skip { cursor:url("../img/cursor-star.svg") 16 16, pointer; }
}