:root{
    --ink:#08090a;
    --paper:#ece6d9;
    --paper-dim:#a9a396;
    --stone:#969086;
    --gold:#b89a5c;
    --gold-lite:#d9c288;
    --mincho:"Shippori Mincho",serif;
    --cormorant:"Cormorant Garamond",serif;
    --gothic:"Zen Kaku Gothic New",sans-serif;
    --edge:clamp(22px,6vw,110px);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:var(--mincho);
    font-weight:400;
    line-height:1.85;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}

  /* ---------- shared type utilities ---------- */
  .latin{font-family:var(--cormorant)}

  /* ---------- hero ---------- */
  .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);isolation:isolate}
  .hero__picture{
    position:absolute;top:50%;right:clamp(12px,3vw,64px);transform:translateY(-50%);
    display:block;height:90%;width:min(66vw,960px);
    opacity:0;animation:imgin 2.6s cubic-bezier(.16,.7,.2,1) .2s forwards;
  }
  .hero__img{width:100%;height:100%;object-fit:contain;object-position:right center}
  @keyframes imgin{from{opacity:0;transform:translateY(-50%) scale(1.05)}to{opacity:1;transform:translateY(-50%) scale(1)}}
  .hero__scrim{
    position:absolute;inset:0;
    background:
      linear-gradient(90deg,var(--ink) 2%,rgba(8,9,10,.65) 24%,rgba(8,9,10,0) 48%),
      linear-gradient(0deg,var(--ink) 1%,rgba(8,9,10,0) 16%);
    pointer-events:none;
  }
  .hero__inner{
    position:relative;z-index:2;
    padding:0 var(--edge) clamp(56px,10vh,120px);
    width:100%;
  }
  .hero__name{display:flex;flex-direction:column;gap:.42em}
  .hero__name .k{
    font-weight:600;
    font-size:clamp(4.6rem,16vw,13.5rem);
    line-height:.92;letter-spacing:.06em;
    opacity:0;animation:up 1.3s cubic-bezier(.16,.8,.2,1) .5s forwards;
  }
  .hero__name .r{
    font-family:var(--cormorant);font-weight:500;
    font-size:clamp(.95rem,2.3vw,1.9rem);letter-spacing:.5em;color:var(--gold-lite);
    padding-left:.24em;
    opacity:0;animation:up 1.1s ease .95s forwards;
  }
  .hero__tag{
    margin-top:clamp(22px,3.6vh,46px);
    font-weight:500;
    font-size:clamp(1.5rem,3.7vw,3rem);
    letter-spacing:.1em;color:var(--paper);
    opacity:0;animation:up 1.1s ease 1.25s forwards;
  }
  .scrollcue{
    position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:3;
    display:flex;flex-direction:column;align-items:center;gap:9px;
    font-family:var(--gothic);font-weight:300;font-size:.56rem;letter-spacing:.4em;color:var(--stone);
    opacity:0;animation:cuein 1s ease 1.6s forwards;
  }
  .scrollcue .bar{width:1px;height:20px;background:linear-gradient(var(--gold),transparent);animation:drop 2.4s ease-in-out infinite}
  @keyframes cuein{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
  @keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  @keyframes drop{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

  /* ---------- section frame ---------- */
  .section{padding:clamp(96px,17vh,220px) var(--edge);position:relative}
  .marker{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:clamp(40px,7vh,80px)}
  .marker .line{width:1px;height:clamp(40px,7vh,72px);background:linear-gradient(var(--gold),transparent)}
  .marker .num{font-family:var(--mincho);font-weight:400;font-size:1.5rem;color:var(--gold);letter-spacing:.1em}
  .marker .lab{font-family:var(--gothic);font-weight:300;font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;color:var(--stone);margin:0}

  /* reveal */
  .reveal{transition:opacity 1.3s cubic-bezier(.16,.7,.2,1),transform 1.3s cubic-bezier(.16,.7,.2,1)}
  .reveal-ready .reveal{opacity:0;transform:translateY(34px)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.12s}
  .reveal.d2{transition-delay:.24s}
  .reveal.d3{transition-delay:.36s}

  /* ---------- statement ---------- */
  .statement{text-align:center;position:relative}
  .concept-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;margin:clamp(44px,6vh,72px) auto 0;font-family:var(--cormorant);font-weight:400}
  .concept-copy__title{font-size:clamp(.84rem,1.45vw,1.12rem);line-height:1.6;letter-spacing:.16em;color:var(--gold)}
  .concept-copy__line{max-width:27em;font-size:clamp(.96rem,1.55vw,1.16rem);line-height:1.65;font-style:italic;letter-spacing:.02em;color:var(--paper-dim);text-wrap:balance}
  .statement__body{position:relative;z-index:2;max-width:min(92vw,940px);margin:0 auto}
  .statement__line{
    font-weight:400;
    font-size:clamp(1.25rem,3vw,2rem);
    line-height:2.05;letter-spacing:.055em;
  }
  .statement__line em{font-style:normal;color:inherit;font-weight:inherit}

  /* ---------- detail gallery ---------- */
  .details{display:flex;flex-direction:column;gap:clamp(88px,11vw,164px);width:100%;max-width:1320px;margin:0 auto}
  .plate{position:relative;margin:0;min-width:0}
  .plate--trunk{width:62%;align-self:flex-end}
  .plate--foliage{width:86%;align-self:flex-start}
  .plate__picture{display:block;min-width:0}
  .plate__img{width:100%;height:auto}
  .plate__caption{display:flex;align-items:center;margin-top:18px;line-height:1}
  .plate__index{font-family:var(--gothic);font-size:.62rem;font-weight:400;letter-spacing:.24em;color:var(--stone)}
  .hero__picture,.plate{mix-blend-mode:lighten}
  .hero__picture,.plate{translate:0 var(--photo-drift,0px)}
  .hero__img,.plate__img{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent);
    mask-composite:intersect;
  }
  .hero__img{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 90%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 90%,transparent);
  }
  .hero__picture,.plate__picture{position:relative}
  .hero__picture{position:absolute}
  .hero__picture::after,.plate__picture::after{
    content:"";position:absolute;inset:0;background:var(--ink);pointer-events:none;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-position:right center;mask-position:right center;
  }
  .hero__picture::after{-webkit-mask-image:url('../masks/tenpyo-background-hero.svg');mask-image:url('../masks/tenpyo-background-hero.svg')}
  .plate--trunk .plate__picture::after{-webkit-mask-image:url('../masks/tenpyo-background-trunk.svg');mask-image:url('../masks/tenpyo-background-trunk.svg')}
  .plate--foliage .plate__picture::after{-webkit-mask-image:url('../masks/tenpyo-background-foliage.svg');mask-image:url('../masks/tenpyo-background-foliage.svg')}
  .spec{display:flex;align-items:center;justify-content:center;gap:clamp(30px,7vw,90px);max-width:760px;margin:clamp(58px,10vh,120px) auto 0;padding-top:clamp(38px,6vh,66px);border-top:1px solid rgba(184,154,92,.2);flex-wrap:wrap}
  .spec__item{display:flex;flex-direction:column;align-items:center;gap:.85em;text-align:center}
  .spec__k{font-family:var(--gothic);font-weight:300;font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold)}
  .spec__v{font-family:var(--cormorant);font-weight:500;font-size:clamp(1.15rem,2.6vw,1.7rem);letter-spacing:.07em;color:var(--paper)}
  .spec__div{width:1px;height:46px;background:linear-gradient(var(--stone),transparent)}

  /* ---------- artist ---------- */
  .artist{max-width:760px;margin:0 auto}
  .artist__name{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.9em;row-gap:.2em;margin-bottom:.1em}
  .artist__name .jp{font-weight:700;font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:.12em}
  .artist__name .en{font-family:var(--cormorant);font-style:italic;font-size:clamp(.95rem,1.6vw,1.2rem);color:var(--gold);letter-spacing:.04em}
  .artist__role{font-family:var(--gothic);font-weight:300;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);margin-bottom:2.2em}
  .artist__bio{font-size:clamp(.98rem,1.35vw,1.12rem);line-height:2.2;letter-spacing:.04em;color:var(--paper);max-width:100%}

  .installation{padding-top:clamp(24px,5vh,72px)}
  .installation .marker .lab{letter-spacing:.18em}
  .installation__figure{max-width:1440px;margin:0 auto}
  .installation__picture{display:block}
  .installation__img{width:100%;height:auto}
  .installation__caption{margin-top:16px;text-align:right;font-family:var(--gothic);font-size:clamp(.68rem,1vw,.76rem);font-weight:300;line-height:1.8;letter-spacing:.04em;color:var(--stone)}

  /* ---------- contact / footer ---------- */
  .contact{text-align:center;border-top:1px solid rgba(184,154,92,.18)}
  .contact__k{font-family:var(--mincho);font-weight:400;font-size:clamp(1.85rem,4.2vw,3.1rem);letter-spacing:.08em;line-height:1.35}
  .contact__sub{margin:1.4em auto 0;max-width:min(92vw,40em);color:var(--paper-dim);font-size:clamp(.95rem,1.4vw,1.08rem);line-height:2;letter-spacing:.05em}

  .banners{max-width:640px;margin:clamp(50px,7vh,96px) auto 0;display:flex;flex-direction:column;border-top:1px solid rgba(184,154,92,.22)}
  .banner{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:clamp(22px,3vw,34px) clamp(16px,2.4vw,30px);border-bottom:1px solid rgba(184,154,92,.22);transition:background .5s ease,padding .5s cubic-bezier(.16,.7,.2,1)}
  .banner .lbl{font-family:var(--cormorant);font-weight:500;font-size:clamp(1.05rem,2.3vw,1.5rem);letter-spacing:.34em;text-transform:uppercase;color:var(--paper);transition:color .4s ease}
  .banner .arw{color:var(--gold);font-size:1.05rem;transition:transform .5s ease}
  .banner:hover{background:rgba(184,154,92,.06);padding-left:clamp(26px,3.6vw,46px)}
  .banner:hover .lbl{color:var(--gold-lite)}
  .banner:hover .arw{transform:translateX(8px)}
  .banner:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

  .footer{padding:clamp(46px,7vh,80px) var(--edge) clamp(40px,6vh,64px);border-top:1px solid rgba(255,255,255,.06);margin-top:clamp(90px,15vh,180px)}
  .footer__row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px}
  .footer__mark{display:flex;align-items:baseline;gap:.7em}
  .footer__mark .kanji{font-family:var(--mincho);font-weight:600;font-size:1.05rem;letter-spacing:.3em}
  .footer__mark .roman{font-family:var(--cormorant);font-style:italic;font-size:.8rem;letter-spacing:.4em;color:var(--paper-dim)}
  .footer__fine{margin-top:2.4em;font-family:var(--gothic);font-weight:300;font-size:.75rem;letter-spacing:.12em;color:var(--stone)}

  /* ---------- responsive ---------- */
  @media (max-width:820px){
    .hero{align-items:flex-start}
    .hero__picture{
      position:relative;top:auto;right:auto;transform:none;
      width:100%;height:auto;margin:clamp(48px,8vh,80px) 0 0;
      animation:imgin-m 2.4s cubic-bezier(.16,.7,.2,1) .2s forwards;
    }
    @keyframes imgin-m{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
    .hero{display:flex;flex-direction:column;justify-content:space-between}
    .hero__scrim{background:none}
    .hero__img{height:auto}
    .hero__inner{margin-top:auto;padding-bottom:clamp(56px,8svh,80px)}
    .hero__name .k{font-size:clamp(5.2rem,18vw,8rem)}
    .details{gap:64px}
    .plate--trunk{width:88%}
    .plate--foliage{width:100%}
    .plate__caption{margin-top:14px}
    .plate__index{font-size:.56rem;letter-spacing:.2em}
    .section{padding-top:80px;padding-bottom:80px}
    .spec{flex-direction:column;gap:30px}
    .spec__div{display:none}
    .scrollcue{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
    .hero__picture,.plate{translate:none!important}
    .hero__name .k,.hero__name .r,.hero__tag{opacity:1!important;transform:none!important}
    .hero__picture{opacity:1!important}
    .scrollcue{opacity:1!important;transform:translateX(-50%)}
    .reveal{opacity:1!important;transform:none!important}
  }

  /* Utility links and layout-only declarations */
  .skip-link{position:fixed;top:12px;left:12px;z-index:100;padding:10px 16px;background:var(--paper);color:var(--ink);transform:translateY(-200%)}
  .skip-link:focus{transform:none}
  a:focus-visible{outline:2px solid var(--gold-lite);outline-offset:5px}
  .statement__line--spaced{margin-top:1.4em}
  .section--work{padding-top:0}
  .banner__text{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:.45em;min-width:0}
  .banner__jp{font-family:var(--gothic);font-size:.85rem;letter-spacing:.06em;color:var(--paper-dim)}
  .banner .lbl{overflow-wrap:anywhere}
  .footer__row{justify-content:center}
  .footer__fine{text-align:center;overflow-wrap:anywhere}