:root{
    --bg:#FAE98E;--ink:#241A14;--dim:#8A7A55;
    --over:#FFF8E7;
    --red:#D92B1E;--blue:#1539CC;
    --serif:'Source Serif 4',Georgia,serif;--sans:'Inter Tight',sans-serif;
    --ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);
    --pad:28px;
    /* Type scale (px). xs = nav/labels, sm = lists/metadata, body = prose. */
    --fs-xs:11px;--fs-sm:14px;--fs-body:17px;
  }
  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
  html{-webkit-font-smoothing:antialiased}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden}
  a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
  button{border:none;background:none;cursor:pointer;font-family:inherit}
  ::selection{background:var(--red);color:white}

  /* ======= INTRO ANIMATION ======= */
  .intro{position:fixed;inset:0;z-index:9000;pointer-events:auto}
  .intro::before{content:'';position:absolute;inset:0;z-index:1;background:#B85C28;transition:opacity 1.8s var(--ease)}
  .intro.bg-gone::before{opacity:0}
  .intro-text{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;transition:opacity 1.4s var(--ease)}
  .intro.text-gone .intro-text{opacity:0}
  .intro-line{display:flex;align-items:center;justify-content:center;white-space:nowrap}
  .intro-line .ch{font-family:var(--sans);font-weight:700;font-size:clamp(42px,7.5vw,78px);letter-spacing:.14em;text-transform:uppercase;color:#3A1F15;opacity:0;transition:opacity .9s var(--ease);display:inline-block}
  .intro-line .ch.on{opacity:1}
  .intro-line .ch.sp{width:.4em}


  /* ======= TOP NAV (left: menu, right: wordmark) ======= */
  .topnav{position:fixed;top:var(--pad);left:var(--pad);z-index:8500;display:flex;gap:28px;opacity:0;transition:opacity .6s var(--ease);mix-blend-mode:difference}
  .topnav.on{opacity:1}
  .topnav a{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:white;text-decoration:none;transition:opacity .2s;cursor:pointer;padding:6px 0}
  .topnav a:hover{opacity:.6}

  .wmark{position:fixed;top:var(--pad);right:var(--pad);z-index:8500;display:flex;align-items:center;pointer-events:auto;opacity:0;transition:opacity .6s var(--ease);cursor:pointer;mix-blend-mode:difference}
  .wmark.on{opacity:1}
  .wmark span{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:white;user-select:none;transition:opacity .2s}
  .wmark:hover span{opacity:.6}

  .pg{display:none !important;opacity:0;transition:opacity .45s var(--ease)}.pg.on{display:block !important}.pg.vis{opacity:1}

  /* ======= FULL-BLEED PROJECT VIEWER ======= */
  .viewer{position:fixed;inset:0;background:#1F100A;cursor:pointer}
  .viewer-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 1.7s cubic-bezier(0.4, 0, 0.6, 1);pointer-events:none}
  .viewer-img.active{opacity:1}

  /* Dots indicator — bottom right */
  .dots{position:fixed;bottom:var(--pad);right:var(--pad);z-index:8500;display:flex;gap:10px;align-items:center;opacity:0;transition:opacity .6s var(--ease)}
  .dots.on{opacity:1}
  .dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);border:none;cursor:pointer;padding:0;transition:background .3s var(--ease), transform .2s var(--ease)}
  .dots button.active{background:rgba(255,255,255,.95)}
  .dots button:hover{transform:scale(1.3)}

  /* ======= PROJECT PAGE (NEW) ======= */
  .proj{background:var(--bg)}

  /* Hero — full bleed, edge to edge */
  .proj-hero{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
  }
  .proj-hero img{width:100%;height:100%;object-fit:cover;display:block}
  /* Persistent project caption — bottom-left, cream over any backdrop.
     Lives inside #pg-project so it hides with the page. position:fixed
     gives scroll-persistence; switch to position:absolute (inside
     .proj-hero) to make it non-persistent. */
  .proj-cap{
    position:fixed;
    left:var(--pad);
    bottom:var(--pad);
    z-index:8000;
    pointer-events:none;
    display:flex;flex-direction:column;gap:6px;
    text-shadow:0 1px 12px rgba(0,0,0,.45);
  }
  .proj-cap-name{
    font-family:var(--sans);
    font-weight:600;
    font-size:clamp(12px,1.2vw,16px);
    letter-spacing:.14em;
    text-transform:uppercase;
    line-height:1;
    color:var(--over);
  }
  .proj-cap-loc{
    font-family:var(--serif);
    font-style:italic;
    font-weight:400;
    font-size:15px;
    color:var(--over);
    opacity:.85;
  }

  /* Gallery — auto 2-column grid. Portrait fills one column;
     landscape spans the full width (= two portraits + the gutter). */
  .proj-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--pad);
    padding:calc(var(--pad) * 2) var(--pad) calc(var(--pad) * 3);
    align-items:start;
  }
  .pg-cell{
    opacity:1;
    transition:opacity .8s var(--ease), transform .8s var(--ease);
  }
  .pg-cell.to-reveal{opacity:0;transform:translateY(40px)}
  .pg-cell.to-reveal.in{opacity:1;transform:translateY(0)}
  .pg-cell img{width:100%;height:auto;display:block}
  .pg-cell--l{grid-column:1 / -1}

  /* ======= PROJECTS GRID ======= */
  .prj{padding:120px 5vw 80px;overflow-y:auto;height:100vh}
  .prj-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--pad);
    max-width:1400px;
    margin:0 auto;
  }
  .prj-tile{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:3/2;
    overflow:hidden;
    cursor:pointer;
  }
  .prj-tile img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .9s var(--ease), filter .6s var(--ease);
  }
  .prj-scrim{
    position:absolute;inset:0;
    background:rgba(31,16,10,0);
    transition:background .5s var(--ease);
  }
  .prj-name{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    text-align:center;padding:0 1em;
    font-family:var(--sans);
    font-weight:600;
    font-size:clamp(14px,1.4vw,18px);
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--over);
    opacity:0;
    transition:opacity .45s var(--ease);
    pointer-events:none;
  }
  .prj-tile:hover .prj-name,
  .prj-tile:focus-visible .prj-name{opacity:1}
  .prj-tile:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}

  /* ======= TEXT PAGES (About / Press / Contact) — one shared treatment =======
     Small sans, cream, top-left box; fade-up reveal; links underline/hover-red. */
  .pg.on.abt, .pg.on.ctc{display:flex !important}
  .abt, .ctc{flex-direction:column;justify-content:flex-end;align-items:flex-start}
  .abt, .prss, .ctc{padding:120px var(--pad) var(--pad);height:100vh;overflow-y:auto}
  .abt-body, .prss-list, .ctc-body{display:flex;flex-direction:column;max-width:520px}

  .abt-body p, .prss-row, .ctc-body > *{
    font-family:var(--sans);
    font-size:var(--fs-sm);
    font-weight:400;
    line-height:1.7;
    color:var(--ink);
    opacity:0;transform:translateY(10px);
    transition:opacity .6s var(--ease),transform .6s var(--ease),color .2s var(--ease);
  }
  .abt-body p.in, .prss-row.in, .ctc-body > *.in{opacity:1;transform:translateY(0)}
  .abt-body p + p{margin-top:18px}

  /* single-line entries / links size to their content so hover+underline fit */
  .prss-row, .ctc-body a{width:fit-content}
  a.prss-row, .ctc-body a{text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer}
  a.prss-row:hover, .ctc-body a:hover,
  a.prss-row.open{color:var(--red);text-decoration:underline}
  /* blank line between the email address and INSTAGRAM on Contact */
  .ctc-ig{margin-top:1.7em}

  /* Press: 50/50 — list left, hovered cover image right (within the buffer) */
  .pg.on.prss{display:grid !important}
  .prss{grid-template-columns:1fr 1fr;column-gap:var(--pad);align-items:end;padding-left:var(--pad);padding-right:var(--pad)}
  /* Cover panel: fixed box filling the right half within the 28px buffer.
     object-fit:cover so every cover (portrait or not) fills it identically. */
  .prss-cover{position:fixed;top:var(--pad);right:var(--pad);bottom:var(--pad);left:calc(50% + var(--pad)/2);pointer-events:none}
  .prss-cover img{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .4s var(--ease)}
  .prss-cover img.show{opacity:1}

  /* ======= ALT PROJECTS (list left, hero preview / image carousel right) ======= */
  .pg.on.altp{display:grid !important}
  .altp{grid-template-columns:1fr 1fr;column-gap:var(--pad);align-items:end;padding:120px var(--pad) var(--pad);height:100vh;overflow-y:auto}
  .altp-list{display:flex;flex-direction:column;max-width:520px}
  .altp-row{
    font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;line-height:1.7;color:var(--ink);
    width:fit-content;text-align:left;cursor:pointer;
    opacity:0;transform:translateY(10px);
    transition:opacity .6s var(--ease),transform .6s var(--ease),color .2s var(--ease);
  }
  .altp-row.in{opacity:1;transform:translateY(0)}
  .altp-row:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  .altp-row.active{color:var(--red);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  /* same right-half container as the press covers */
  .altp-cover{position:fixed;top:var(--pad);right:var(--pad);bottom:var(--pad);left:calc(50% + var(--pad)/2);pointer-events:none}
  .altp-cover.locked{pointer-events:auto;cursor:pointer}
  .altp-cover img{width:100%;height:100%;opacity:0;transition:opacity .4s var(--ease)}
  .altp-cover img.show{opacity:1}
  .altp-count{position:absolute;bottom:0;right:0;font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.1em;color:var(--ink);opacity:0;transition:opacity .3s var(--ease)}
  .altp-cover.locked .altp-count{opacity:.7}

  @media(max-width:768px){
    :root{--pad:16px}
    .intro-line .ch{font-size:clamp(30px,10.5vw,54px)}
    .home{padding:calc(var(--pad) + 40px) var(--pad) var(--pad) var(--pad)}
    .track{padding:0 6vw;gap:8vw}
    .card .cimg{width:min(68vh,78vw);height:min(68vh,78vw)}
    .abt, .prss, .ctc{padding:100px var(--pad) var(--pad)}
    .prss{grid-template-columns:1fr}.prss-cover{display:none}
    .altp{grid-template-columns:1fr}.altp-cover{display:none}
    .proj-grid{grid-template-columns:1fr;padding:calc(var(--pad) * 1.5) var(--pad) calc(var(--pad) * 2)}
    .prj{padding:calc(var(--pad) + 40px) var(--pad) var(--pad)}
    .prj-grid{grid-template-columns:repeat(2,1fr)}
    .prj-name{opacity:1}
    .prj-scrim{background:rgba(31,16,10,.3)}
  }