/* STARCEVICH — shared stylesheet, used by index.html, about.html, contact.html */


  :root{
    --ink:      #15140F;
    --white:    #FFFFFF;

    --font-display: 'Inter', sans-serif;

    --ease: cubic-bezier(.65,0,.35,1);
  }

  *{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

  html,body{
    height:100%;
    background:var(--white);
    color:var(--ink);
    font-family:var(--font-display);
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
  }

  button{ font-family:inherit; background:none; border:none; cursor:pointer; color:inherit; }
  a{ color:inherit; text-decoration:none; }

  .mobile-break{ display:none; }

  :focus-visible{
    outline: 1px solid var(--white);
    outline-offset: 4px;
  }

  /* ============ LANDING ============ */

  #landing{
    position:fixed; inset:0;
    z-index:100;
    cursor:pointer;
    overflow:hidden;
  }

  #landing img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    transform:scale(1.06);
    animation: kenburns 26s ease-in-out infinite alternate;
  }

  @keyframes kenburns{
    from{ transform:scale(1.06) translate3d(0,0,0); }
    to{ transform:scale(1.13) translate3d(-1%,-1%,0); }
  }

  #landing .scrim{
    position:absolute; inset:0;
    background:
      radial-gradient(60% 45% at 50% 50%, rgba(21,20,15,.32) 0%, rgba(21,20,15,0) 70%),
      linear-gradient(180deg, rgba(21,20,15,.35) 0%, rgba(21,20,15,.18) 30%, rgba(21,20,15,.28) 60%, rgba(21,20,15,.65) 100%);
  }

  #landing .content{
    position:relative; z-index:2;
    height:100%;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center;
    padding:0 6vw;
  }

  #landing h1{
    color:var(--white);
    font-family:var(--font-display);
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:.42em;
    font-size:clamp(.7rem, 2.2vw, 1.5rem);
    text-indent:.42em; /* balances trailing tracking */
  }

  #landing .tagline{
    margin-top:1.4em;
    color:var(--white);
    font-size:clamp(.62rem, 1vw, .78rem);
    letter-spacing:.12em;
    text-transform:uppercase;
    text-indent:.12em;
  }

  #landing.hidden{ display:none; }

  @media (prefers-reduced-motion: reduce){
    #landing img{ animation:none; }
  }

  /* ============ HOME — gallery ============ */

  #gallery{
    position:fixed; inset:0;
    background:var(--white);
    opacity:0;
    visibility:hidden;
  }
  #gallery.visible{
    opacity:1;
    visibility:visible;
  }

  header.site-header{
    position:fixed; top:0; left:0; right:0;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: clamp(1.1rem,3vw,2rem) clamp(1.2rem,4vw,3rem);
    pointer-events:none;
  }
  header.site-header.hidden{ display:none; }

  header.site-header *{ pointer-events:auto; }

  .mark{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:var(--ink);
    font-size:.75rem;
    letter-spacing:.15em;
    text-transform:uppercase;
    text-indent:.15em;
  }

  .nav-link{
    color:var(--ink);
    font-size:.62rem;
    letter-spacing:.07em;
    text-transform:uppercase;
    text-indent:.07em;
    padding:.3em 0;
    position:relative;
  }

  /* ---------- slideshow ---------- */

  .slideshow{
    position:absolute; inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
  }
  .slide.active{
    opacity:1;
    pointer-events:auto;
  }

  .slide img{
    max-width:min(84vw, 1400px);
    max-height:78vh;
    width:auto; height:auto;
    object-fit:contain;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.25);
    background:#F1EFE9;
  }

  .slide .fallback{
    width:min(84vw,1400px);
    height:78vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(135deg, #F6F4EE, #EDE9DF);
    color:var(--ink);
    font-family:var(--font-display);
    font-style:normal;
    font-size:1rem;
    letter-spacing:.02em;
    text-align:center;
    padding:2rem;
    display:none;
  }

  /* click zones — left/right half of the screen, no visible affordance */
  .nav-zone{
    position:absolute; top:0; bottom:0;
    width:50%;
    z-index:20;
    cursor:pointer;
    touch-action:manipulation;
  }
  .nav-zone.left{ left:0; }
  .nav-zone.right{ right:0; }

  .nav-zone button{
    width:100%; height:100%;
    display:block;
    touch-action:manipulation;
  }

  /* ---------- caption ---------- */

  .caption{
    position:absolute;
    left:0; right:0; top:calc(90vh + 0.4rem);
    z-index:15;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0 clamp(1.2rem,4vw,3rem);
    pointer-events:none;
  }
  .caption .counter{
    font-family:var(--font-display);
    font-weight:400;
    color:var(--ink);
    font-size:clamp(.5rem,.76vw,.56rem);
    letter-spacing:.06em;
    text-transform:uppercase;
    text-indent:.06em;
  }

  /* ============ PANELS (Info / Contact) ============ */

  .page{
    position:fixed; inset:0;
    z-index:25;
    background:var(--white);
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0 6vw;
    opacity:0;
    visibility:hidden;
    transition: opacity .5s var(--ease);
  }
  .page.visible{
    opacity:1;
    visibility:visible;
  }

  .page-footer{
    position:absolute;
    left:0; right:0; bottom: clamp(1.6rem,4vh,3rem);
    text-align:center;
  }
  .page-footer a,
  .page-footer span{
    font-family:var(--font-display);
    font-weight:400;
    color:var(--ink);
    font-size:.5rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-indent:.08em;
    text-decoration:none;
  }

  .page-content{
    max-width:78ch;
    width:100%;
    text-align:left;
  }
  .page-content.centered{
    text-align:center;
  }

  .page-content p{
    font-size:.74rem;
    line-height:1.85;
    font-weight:300;
    color:var(--ink);
  }
  .page-content p + p{ margin-top:1.2em; }

  .page-content .contact-list{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.5em;
  }
  .page-content .contact-list a{
    display:block;
    font-size:.65rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    text-decoration:none;
  }
  @media (max-width: 640px){
    .slide img{ max-width:92vw; max-height:64vh; }
    .caption{ top:auto; bottom:6vh; }
    .page{ height:100dvh; }
    .mobile-break{ display:block; }
  }