:root{
    --void:#0B0D11;        /* main bg — darker, low-saturation blue-black */
    --abyss:#040507;       /* deepest black — footer, darkest corners */
    --deep:#12151C;        /* panel bg — darker, low-saturation blue */
    --deep-2:#1C1F27;      /* card bg, one step lighter than deep */
    --foam:#DCE0E4;        /* primary text — pale, cool near-white */
    --mist:#717D8E;        /* secondary / muted text — steel-blue-grey */
    --glow:#B4BDCA;        /* the light — hero glow, hover states, focus, rare accents */
    --glow-dim:#4A5464;    /* resting-state border that brightens to --glow on hover */
    --azure:#465572;       /* quiet accent — eyebrows, sub-labels, dividers */
    --line: rgba(180,189,202,0.10);

    --display: 'Oswald', sans-serif;
    --body: 'Work Sans', sans-serif;
    --mono: 'IBM Plex Mono', monospace;

    --gutter: clamp(1.25rem, 5vw, 4rem);
    --measure: 640px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  body{
    margin:0;
    background:var(--void);
    color:var(--foam);
    font-family:var(--body);
    font-weight:300;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    position:relative;
  }

  /* faint grain, echoing the noise in the reference photo — sits above all content, blocks nothing */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:0.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  img, svg{display:block; max-width:100%;}
  a{color:inherit;}

  h1,h2,h3{
    font-family:var(--display);
    font-weight:600;
    margin:0;
    letter-spacing:0.01em;
  }

  .eyebrow{
    font-family:var(--mono);
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--azure);
    margin:0 0 0.9rem;
  }

  .wing{
    color:var(--azure);
    width:44px;
    height:auto;
    filter:drop-shadow(0 0 5px rgba(180,189,202,0.4));
  }
  .wing path{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round;}

  /* ---------- layout shells ---------- */
  .section{
    padding: clamp(4rem, 12vh, 7rem) var(--gutter);
    position:relative;
    z-index:1;
  }
  .section--alt{
    background:var(--deep);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .section__inner{
    max-width:1080px;
    margin:0 auto;
  }

  .divider{
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 2.5rem var(--gutter);
    position:relative;
    z-index:1;
  }

  .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  /* ---------- nav ---------- */
  .site-nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 0.85rem var(--gutter);
    background:rgba(11,13,17,0.78);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .site-nav__brand{
    display:flex;
    align-items:center;
    text-decoration:none;
  }
  .site-nav__logo{
    height:26px;
    width:auto;
  }
  .site-nav__links{
    display:flex;
    gap:1.6rem;
    list-style:none;
    margin:0; padding:0;
    font-family:var(--mono);
    font-size:0.75rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .site-nav__links a{
    text-decoration:none;
    color:var(--mist);
    border-bottom:1px solid transparent;
    padding-bottom:2px;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .site-nav__links a:hover,
  .site-nav__links a:focus-visible{
    color:var(--glow);
    border-color:var(--glow);
  }
  .site-nav__toggle{
    display:none;
    background:none;
    border:1px solid var(--line);
    color:var(--foam);
    font-family:var(--mono);
    font-size:0.7rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:0.5rem 0.8rem;
    cursor:pointer;
  }

  @media (max-width:760px){
    .site-nav__links{
      position:fixed;
      top:56px; left:0; right:0;
      flex-direction:column;
      gap:0;
      background:var(--deep);
      border-bottom:1px solid var(--line);
      max-height:0;
      overflow:hidden;
      transition:max-height 0.3s ease;
    }
    .site-nav__links.is-open{max-height:320px;}
    .site-nav__links a{
      display:block;
      padding:1rem var(--gutter);
      border-bottom:1px solid var(--line);
    }
    .site-nav__toggle{display:block;}
  }

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--glow);
    outline-offset:3px;
  }

  /* ---------- hero ---------- */
  .hero{
    min-height:100svh;
    position:relative;
    overflow:hidden;
    z-index:1;
    background:var(--void);
  }
  .hero__video{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
  }

  .hero__video video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}
  .hero__video iframe{
    position:absolute;
    top:50%; left:50%;
    width:100vw;
    height:56.25vw;      /* 16:9 based on width */
    min-height:100vh;
    min-width:177.78vh;  /* 16:9 based on height */
    transform:translate(-50%,-50%);
    pointer-events:none;
  }
  .hero__video-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
      radial-gradient(ellipse 60% 42% at 78% 0%, rgba(180,189,202,0.15), transparent 60%),
      radial-gradient(ellipse 55% 38% at 15% 100%, rgba(70,85,114,0.15), transparent 65%),
      rgba(11,13,17,0.62);
  }
  .hero__play{
    display:none;
    align-items:center;
    justify-content:center;
    position:absolute;
    inset:0;
    margin:auto;
    z-index:2;
    width:72px;
    height:72px;
    border-radius:50%;
    background:rgba(11,13,17,0.55);
    border:1px solid var(--glow-dim);
    color:var(--foam);
    cursor:pointer;
    backdrop-filter:blur(6px);
    transition:border-color 0.2s ease, color 0.2s ease;
  }
  .hero__play:hover, .hero__play:focus-visible{
    border-color:var(--glow);
    color:var(--glow);
  }
  .hero__content{
    position:relative;
    z-index:2;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: 7rem var(--gutter) 4rem;
  }
  .hero__eyebrow{
    font-family:var(--mono);
    font-size:0.8rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--mist);
    margin-bottom:1.2rem;
  }
  .hero__logo{
    width:min(760px, 85vw);
    height:auto;
    filter:drop-shadow(0 0 40px rgba(180,189,202,0.25)) drop-shadow(0 0 90px rgba(70,85,114,0.18));
  }
  .hero__photo{
    margin-top:2.75rem;
    width:min(280px, 60vw);
    aspect-ratio: 3/4;
    border:1px solid var(--line);
    background:
      repeating-linear-gradient(135deg, rgba(180,189,202,0.03) 0 2px, transparent 2px 14px),
      linear-gradient(160deg, var(--deep-2), var(--void));
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--mist);
    font-family:var(--mono);
    font-size:0.72rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
  }
  .hero__scroll{
    margin-top:3.5rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.6rem;
    color:var(--mist);
    font-family:var(--mono);
    font-size:0.68rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
  }
  .hero__scroll .wing{
    width:30px;
    animation: bob 2.6s ease-in-out infinite;
  }
  @keyframes bob{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(6px);}
  }

  /* ---------- placeholder frames ---------- */
  .frame{
    border:1px dashed var(--line);
    background:
      repeating-linear-gradient(135deg, rgba(180,189,202,0.025) 0 2px, transparent 2px 14px),
      linear-gradient(160deg, var(--deep-2), var(--void));
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--mist);
    font-family:var(--mono);
    font-size:0.7rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    text-align:center;
    padding:1rem;
  }

  /* ---------- artist / ØCEANÍA ---------- */
  .artist{
    text-align:center;
  }
  .artist__title{
    font-size:clamp(2.6rem, 8vw, 4.5rem);
    color:var(--foam);
    margin-bottom:0.4rem;
  }
  .artist__sub{
    font-family:var(--mono);
    color:var(--azure);
    letter-spacing:0.2em;
    font-size:0.78rem;
    text-transform:uppercase;
    margin-bottom:2.5rem;
  }
  .artist__art{
    margin:0 auto;
    width:min(420px, 100%);
    aspect-ratio:1/1;
  }
  .artist__links{
    margin-top:2.5rem;
    display:flex;
    justify-content:center;
    gap:2.5rem;
    flex-wrap:wrap;
    font-family:var(--mono);
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
  }
  .artist__links a{
    text-decoration:none;
    color:var(--foam);
    padding-bottom:6px;
    border-bottom:1px solid var(--glow-dim);
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .artist__links a:hover, .artist__links a:focus-visible{
    color:var(--glow);
    border-color:var(--glow);
  }

  /* ---------- PRS section ---------- */
  .prs__head{
    text-align:center;
    margin-bottom:2.5rem;
  }
  .prs__title{
    font-size:clamp(2.4rem, 7vw, 4rem);
  }
  .prs__photo{
    width:100%;
    margin-bottom:3rem;
  }
  .prs__grid{
    display:grid;
    grid-template-columns: 1.1fr 1fr;
    gap:3rem;
  }
  @media (max-width:760px){
    .prs__grid{grid-template-columns:1fr;}
  }
  .prs__block h3{
    font-size:1.15rem;
    margin-bottom:1rem;
    color:var(--foam);
  }
  .prs__story p{
    color:var(--mist);
    max-width:var(--measure);
  }
  .prs__story-photo{
    aspect-ratio:4/5;
    align-self:start;
    mask-image: linear-gradient(
    to right,
    black 75%,
    transparent 100%
      );
  }

  .prs__guitars{
    margin-top:4rem;
  }
  .prs__guitars h3{
    font-size:1.15rem;
    margin-bottom:1.5rem;
    text-align:center;
    color:var(--foam);
  }
  .prs__guitars-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:1.5rem;
  }
  .guitar-card{
    border:1px solid var(--line);
    background:var(--deep-2);
    overflow:hidden;
  }
  .guitar-card__photo{
    position:relative;
    aspect-ratio:4/3;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
      repeating-linear-gradient(135deg, rgba(180,189,202,0.03) 0 2px, transparent 2px 14px),
      linear-gradient(160deg, var(--void), var(--deep-2));
  }
  .guitar-card__photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 85%;
    display:block;
  }
  .guitar-card__placeholder{
    font-family:var(--mono);
    font-size:0.7rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--mist);
  }
  .guitar-card__meta{
    padding:1.5rem 1.75rem;
  }
  .guitar-card__meta h4{
    font-family:var(--display);
    font-weight:600;
    font-size:1.3rem;
    color:var(--foam);
    margin:0 0 0.5rem;
  }
  .guitar-card__meta p{
    margin:0;
    color:var(--mist);
  }

  /* ---------- selected work ---------- */
  .work__head{text-align:center; margin-bottom:2.5rem;}
  .work__title{font-size:clamp(2.4rem, 7vw, 4rem);}
  .work__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
  }
  @media (max-width:700px){
    .work__grid{grid-template-columns:1fr;}
  }
  .work-card{
    border:1px solid var(--line);
    background:var(--deep-2);
    overflow:hidden;
    transition:border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  }
  .work-card:hover,
  .work-card:focus-within{
    border-color:var(--glow-dim);
    transform:translateY(-3px);
    box-shadow:0 12px 32px rgba(0,0,0,0.45), 0 0 24px rgba(70,85,114,0.1);
  }
  .work-card__link{
    display:block;
    text-decoration:none;
    color:inherit;
  }
.work-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  background:
    repeating-linear-gradient(
      135deg,
      rgba(180, 189, 202, 0.03) 0 2px,
      transparent 2px 14px
    ),
    linear-gradient(160deg, var(--void), var(--deep-2));
}

.work-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
  .work-card__placeholder{
    font-family:var(--mono);
    font-size:0.7rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--mist);
  }
  .work-card__role{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(11,13,17,0.85);
    color:var(--glow);
    font-family:var(--mono);
    font-size:0.78rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    opacity:0;
    transition:opacity 0.25s ease;
  }
  .work-card__link:hover .work-card__role,
  .work-card__link:focus-visible .work-card__role{
    opacity:1;
  }
  .work-card__meta{
    padding:1.5rem 1.75rem;
  }
  .work-card__meta h3{
    font-size:1.6rem;
    margin-bottom:0.35rem;
  }
  .work-card__song{
    margin:0;
    color:var(--mist);
    font-family:var(--mono);
    font-size:0.78rem;
    letter-spacing:0.06em;
  }
  .work__note{
    text-align:center;
    margin-top:2rem;
    color:var(--mist);
    font-family:var(--mono);
    font-size:0.78rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
  }

  /* ---------- story ---------- */
  .story__head{text-align:center; margin-bottom:3rem;}
  .story__title{font-size:clamp(2.4rem, 7vw, 4rem);}
  .story__grid{
    display:grid;
    gap:2.5rem;
    max-width:var(--measure);
    margin:0 auto;
  }
  .story-block h3{
    font-family:var(--display);
    font-size:1.3rem;
    color:var(--azure);
    margin-bottom:0.6rem;
  }
  .story-block p{
    color:var(--mist);
    margin:0;
  }

  /* ---------- contact ---------- */
  .contact{text-align:center;}
  .contact__title{font-size:clamp(2.4rem, 7vw, 4rem); margin-bottom:0.75rem;}
  .contact__lede{
    color:var(--mist);
    max-width:480px;
    margin:0 auto 2.75rem;
  }
  .contact__form{
    max-width:520px;
    margin:0 auto;
    text-align:left;
    display:grid;
    gap:1.25rem;
  }
  .field label{
    display:block;
    font-family:var(--mono);
    font-size:0.68rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--mist);
    margin-bottom:0.5rem;
  }
  .field input, .field textarea{
    width:100%;
    background:var(--deep-2);
    border:1px solid var(--line);
    color:var(--foam);
    font-family:var(--body);
    font-size:0.95rem;
    padding:0.85rem 1rem;
    border-radius:0;
  }
  .field textarea{resize:vertical; min-height:120px;}
  .submit-btn{
    justify-self:start;
    background:transparent;
    color:var(--glow);
    border:1px solid var(--glow-dim);
    font-family:var(--mono);
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    padding:0.85rem 1.75rem;
    cursor:pointer;
    transition:background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  .submit-btn:hover{
    background:var(--glow);
    color:var(--void);
    box-shadow:0 0 28px rgba(180,189,202,0.35);
  }
  .contact__alt{
    margin-top:3rem;
    display:flex;
    justify-content:center;
    gap:2rem;
    flex-wrap:wrap;
    font-family:var(--mono);
    font-size:0.78rem;
    letter-spacing:0.1em;
  }
  .contact__alt a{text-decoration:none; color:var(--azure);}
  .contact__alt a:hover, .contact__alt a:focus-visible{color:var(--glow);}

  /* ---------- footer ---------- */
  .site-footer{
    padding:2.5rem var(--gutter);
    text-align:center;
    font-family:var(--mono);
    font-size:0.68rem;
    letter-spacing:0.1em;
    color:var(--mist);
    text-transform:uppercase;
    border-top:1px solid var(--line);
    background:var(--abyss);
    position:relative;
    z-index:1;
  }
  .site-footer .wing{
    width:26px;
    margin:0 auto 0.9rem;
  }

  /* ---------- editorial photo grid ---------- */

.photo-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  grid-template-rows: 1fr 1fr auto;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  overflow: hidden;
}

.photo-grid__item {
  position: relative;
  overflow: hidden;
  background: var(--deep-2);
  min-height: 0;
}

.photo-grid__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition:
    transform 0.5s ease,
    filter 0.5s ease;
}

.photo-grid__item:hover img {
  transform: scale(1.025);
  filter: brightness(1.04);
}

/* Large image */
.photo-grid__item--hero {
  grid-column: 1;
  grid-row: 1 / 3;
  min-height: 560px;
}

/* Small images */
.photo-grid__item:not(.photo-grid__item--hero):not(.photo-grid__item--wide) {
  grid-column: 2;
}

/* Bottom wide image */
.photo-grid__item--wide {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 6;
}

/* Mobile */
@media (max-width: 700px) {
  .photo-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }

  .photo-grid__item--hero {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: auto;
    aspect-ratio: 4 / 5;
  }

  .photo-grid__item:not(.photo-grid__item--hero):not(.photo-grid__item--wide) {
    grid-column: auto;
    aspect-ratio: 1 / 1;
  }

  .photo-grid__item--wide {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 8;
  }
}