/* ==========================================================================
   OHGA — design system
   コンセプト：アーティストの作品を展示する、静かなギャラリー
   Webデザインは一歩引く。主役は写真・作品・言葉。
   ========================================================================== */

/* ---- tokens ------------------------------------------------------------- */
:root{
  /* monotone only. 色は写真からしか来ない */
  --paper:      #FCFBF9;
  --paper-2:    #F3F1EE;
  --ink:        #121211;
  --ink-2:      #34332F;
  --ink-3:      #8B877F;
  --ink-4:      #C9C5BD;
  --rule:       rgba(18,18,17,.11);

  --sans: "Instrument Sans", "Zen Kaku Gothic New", -apple-system, "Helvetica Neue", sans-serif;
  --ja:   "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", serif;

  /* 余白はかなり大きく取る */
  --pad: clamp(20px, 5.2vw, 88px);
  --gap: clamp(12px, 1.6vw, 26px);
  --band: clamp(120px, 22vh, 280px);   /* セクション間 */
  --band-l: clamp(180px, 34vh, 420px); /* 大きな沈黙 */

  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---- reset ------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.85;
  font-weight:400;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.06;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

::selection{background:var(--ink);color:var(--paper)}

/* language */
html[lang="ja"] .en{display:none}
html[lang="en"] .ja{display:none}

/* ---- page transition ---------------------------------------------------- */
@view-transition{navigation:auto}
body{animation:pageIn .7s var(--ease) both}
body.is-leaving{opacity:0;transition:opacity .26s ease}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

/* ---- reveal -------------------------------------------------------------
   JS が動かない環境では最初から見えている状態にする（html.js が付かない） */
html.js .rv{opacity:0;transform:translateY(16px)}
html.js .rv.in{opacity:1;transform:none}
.rv{transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
    transition-delay:var(--d,0ms)}

.fig{overflow:hidden;position:relative;background:var(--paper-2)}
.fig img{width:100%;height:auto;
         transition:transform 1.8s var(--ease),opacity 1.2s var(--ease)}
html.js .fig img{transform:scale(1.045);opacity:0}
html.js .rv.in .fig img,html.js .fig.in img{transform:none;opacity:1}

@media (prefers-reduced-motion:reduce){
  body,html.js .rv,html.js .fig img{animation:none!important;transition:none!important;
                    opacity:1!important;transform:none!important}
}

/* ==========================================================================
   header / footer
   ========================================================================== */
.hd{
  position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;align-items:baseline;gap:var(--pad);
  padding:26px var(--pad) 22px;
}
.hd::before{
  content:"";position:absolute;inset:0 0 -64px 0;z-index:-1;
  background:linear-gradient(to bottom,
    var(--paper) 0%,var(--paper) 48%,
    rgba(252,251,249,.88) 66%,rgba(252,251,249,0) 100%);
  pointer-events:none;
}
.hd__logo{
  font-size:15px;letter-spacing:.26em;font-weight:500;
  text-transform:uppercase;
}
.hd__nav{margin-left:auto;display:flex;gap:clamp(18px,2.6vw,42px)}
.hd__nav a{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  transition:color .4s var(--ease);position:relative;
}
.hd__nav a:hover{color:var(--ink)}
.hd__nav a[aria-current="page"]{color:var(--ink)}
.hd__nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--ink);
}
.hd__lang{font-size:10.5px;letter-spacing:.2em;color:var(--ink-3);white-space:nowrap}
.hd__lang b{color:var(--ink);font-weight:500}
@media (max-width:640px){
  .hd{padding:16px var(--pad) 14px;gap:14px;flex-wrap:wrap;row-gap:12px}
  .hd__lang{order:2;margin-left:auto}
  .hd__nav{order:3;flex-basis:100%;margin-left:0;gap:18px}
  .hd__nav a{font-size:9.5px;letter-spacing:.16em}
  .hd::before{inset:0 0 -46px 0}
}

/* edge marks — ギャラリーの壁の小さなラベル */
.mark-l,.mark-r{
  position:fixed;bottom:20px;z-index:60;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);
  pointer-events:none;
  transition:opacity .7s var(--ease);
}
body.scrolled .mark-l,body.scrolled .mark-r{opacity:0}
.mark-l{left:var(--pad)}
.mark-r{right:var(--pad)}
@media (max-width:900px){.mark-l,.mark-r{display:none}}

.ft{
  padding:var(--band-l) var(--pad) 44px;
  border-top:1px solid var(--rule);
  margin-top:var(--band-l);
}
.ft__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.ft__mail{grid-column:1/8}
.ft__mail a{
  font-size:clamp(26px,4.6vw,60px);letter-spacing:-.03em;line-height:1.05;
  display:inline-block;border-bottom:1px solid var(--ink-4);padding-bottom:.08em;
  transition:border-color .5s var(--ease);
}
.ft__mail a:hover{border-color:var(--ink)}
.ft__links{grid-column:9/13;display:flex;flex-direction:column;gap:8px;padding-top:8px}
.ft__links a,.ft__links span{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
.ft__links a:hover{color:var(--ink)}
.ft__base{
  margin-top:clamp(60px,10vh,130px);display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);
}
@media (max-width:820px){
  .ft__mail,.ft__links{grid-column:1/13}
  .ft__links{margin-top:40px}
}

/* ==========================================================================
   shared blocks
   ========================================================================== */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
      padding:0 var(--pad)}

/* 小さな見出しラベル */
.lab{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.num{font-size:10px;letter-spacing:.2em;color:var(--ink-4);font-variant-numeric:tabular-nums}

/* 単独で置かれる一行 */
.solo{padding:var(--band-l) var(--pad);}
.solo p{
  font-family:var(--ja);
  font-size:clamp(19px,2.5vw,34px);line-height:1.95;letter-spacing:.01em;
  max-width:20em;color:var(--ink-2);
}
.solo p.en{font-family:var(--sans);letter-spacing:-.01em;line-height:1.5;max-width:24em}
.solo--right{display:flex;justify-content:flex-end;text-align:left}
.solo cite{
  display:block;margin-top:36px;font-family:var(--sans);font-style:normal;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);
}

/* 本文 */
.prose{font-family:var(--ja);font-size:16px;line-height:2.2;color:var(--ink-2)}
.prose.en,.prose .en{font-family:var(--sans);line-height:1.85}
.prose p+p{margin-top:1.9em}
.prose strong{font-weight:500;color:var(--ink)}

/* 巨大タイポ */
.giant{
  font-size:clamp(58px,15.5vw,236px);line-height:.84;letter-spacing:-.045em;
  font-weight:400;
}
.tiny-caption{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  line-height:1.9;
}

/* text link */
.tlink{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;color:var(--ink);
}
.tlink i{display:block;width:34px;height:1px;background:var(--ink);
         transition:width .55s var(--ease)}
.tlink:hover i{width:58px}

/* ==========================================================================
   HOME
   ========================================================================== */
.hero{
  min-height:100svh;
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  padding:clamp(104px,15vh,168px) 0 clamp(38px,7vh,78px) var(--pad);
  align-items:end;position:relative;
}
.hero__name{
  grid-column:1/9;grid-row:1;align-self:end;
  z-index:2;position:relative;
}
.hero__name h1{margin-bottom:.14em}
.hero__word{display:block}
.hero__word--2{padding-left:.42em}          /* 少しの違和感 */
.hero__kanji{
  font-family:var(--ja);
  font-size:clamp(24px,5.4vw,84px);line-height:1;letter-spacing:.2em;
  color:var(--ink-3);margin-top:.28em;
}
.hero__line{max-width:17em;margin-top:clamp(24px,4vh,52px)}
.hero__line p{font-family:var(--ja);font-size:15px;line-height:2.1;color:var(--ink-2)}
.hero__line p.en{font-family:var(--sans);line-height:1.75}

.hero__fig{
  grid-column:8/13;grid-row:1;align-self:end;
  z-index:1;
}
.hero__fig .fig{aspect-ratio:4/5;max-height:58svh}
.hero__fig img{height:100%;object-fit:cover}
.hero__cap{margin-top:14px}

@media (max-width:860px){
  .hero{align-items:start;min-height:auto;
        padding:clamp(92px,15vh,150px) var(--pad) 0}
  .hero__name{grid-column:1/13;grid-row:1;padding-bottom:clamp(30px,6vh,52px)}
  .hero__fig{grid-column:1/13;grid-row:2}
  .hero__fig .fig{aspect-ratio:3/4;max-height:none}
}

/* home: works teaser — 大きく1枚ずつ */
.tease{padding:0 var(--pad)}
.tease__head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:clamp(36px,6vh,72px);border-bottom:1px solid var(--rule);
  margin-bottom:clamp(50px,8vh,110px);gap:20px;
}
.tease__items{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  row-gap:clamp(90px,14vh,190px)}
.tease__i--a{grid-column:1/8}
.tease__i--b{grid-column:9/13;margin-top:clamp(60px,11vh,170px)}
.tease__i--c{grid-column:4/11}
.tease__i img{height:auto}
.tease__meta{margin-top:16px;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.tease__title{font-size:clamp(17px,1.7vw,23px);letter-spacing:-.01em}
.tease__more{margin-top:clamp(70px,11vh,150px)}
@media (max-width:860px){
  .tease__i--a,.tease__i--b,.tease__i--c{grid-column:1/13;margin-top:0}
  .tease__i--b{margin-left:18%}
}

/* home: about teaser */
.about-t{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  padding:0 var(--pad);align-items:end}
.about-t__fig{grid-column:1/6}
.about-t__fig img{height:auto}
.about-t__body{grid-column:7/12;padding-bottom:clamp(10px,4vh,60px)}
.about-t__body .lab{display:block;margin-bottom:clamp(24px,4vh,44px)}
.about-t__body .tlink{margin-top:clamp(34px,5vh,58px)}
@media (max-width:860px){
  .about-t__fig{grid-column:1/10}
  .about-t__body{grid-column:1/13;padding-top:44px}
}

/* home: journal teaser — カードにしない。テキストの行 */
.jlist{padding:0 var(--pad)}
.jlist .tease__head{border-bottom:0;margin-bottom:clamp(20px,3vh,44px)}
.jrow{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  padding:clamp(26px,4vh,44px) 0;border-top:1px solid var(--rule);
  align-items:baseline;transition:opacity .5s var(--ease);
}
.jlist .jrow:last-child{border-bottom:1px solid var(--rule)}
.jrow__date{grid-column:1/2;color:var(--ink-4);font-size:10px;letter-spacing:.14em;
  font-variant-numeric:tabular-nums}
.jrow__title{grid-column:3/10;font-size:clamp(19px,2.3vw,32px);letter-spacing:-.02em;
  line-height:1.25}
.jrow__cat{grid-column:11/13;text-align:right}
.jrow:hover .jrow__title{opacity:.5}
.jrow__title{transition:opacity .45s var(--ease)}
@media (max-width:860px){
  .jrow__date{grid-column:1/13}
  .jrow__title{grid-column:1/13;margin-top:10px}
  .jrow__cat{grid-column:1/13;text-align:left;margin-top:12px}
}

/* ==========================================================================
   page head (WORKS / ABOUT / JOURNAL / CONTACT)
   ========================================================================== */
.phead{
  padding:clamp(140px,24vh,260px) var(--pad) 0;
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  align-items:end;
}
.phead__t{grid-column:1/9}
.phead__t h1{font-size:clamp(44px,9vw,140px);letter-spacing:-.04em}
.phead__note{grid-column:9/13;padding-bottom:.9em}
@media (max-width:860px){
  .phead__t,.phead__note{grid-column:1/13}
  .phead__note{padding-top:28px}
}

/* ==========================================================================
   WORKS gallery — 歩いて見る
   ========================================================================== */
.filters{
  padding:clamp(56px,9vh,110px) var(--pad) 0;
  display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,34px);
  border-bottom:1px solid var(--rule);padding-bottom:22px;
}
.filters button{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.filters button:hover{color:var(--ink-2)}
.filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.filters__n{margin-left:auto;color:var(--ink-4);font-size:10px;letter-spacing:.18em;
  align-self:flex-end}
@media (max-width:640px){.filters__n{display:none}}

.gal{
  padding:clamp(70px,12vh,150px) var(--pad) 0;
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  row-gap:clamp(110px,18vh,260px);
}
.w{position:relative}
.w .fig img{width:100%;height:100%;object-fit:cover}
.w__meta{
  margin-top:18px;display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;
}
.w__t{font-size:clamp(17px,1.7vw,24px);letter-spacing:-.015em;line-height:1.3}
.w__sub{margin-top:7px;font-size:11px;letter-spacing:.03em;color:var(--ink-3);
  line-height:1.7;font-family:var(--ja)}
.w__cat{text-align:right;white-space:nowrap}

/* 写真はトリミングしない。幅と位置だけでリズムをつくる。
   縦位置ずらしで意図的にグリッドを揃えきらない。 */
.w .fig img{height:auto}

/* portrait */
.w.op0{grid-column:1/8}
.w.op1{grid-column:9/13;margin-top:clamp(70px,13vh,190px)}
.w.op2{grid-column:4/11}
.w.op3{grid-column:1/5;margin-top:clamp(40px,7vh,110px)}
.w.op4{grid-column:6/13}
.w.op5{grid-column:2/9;margin-top:clamp(50px,9vh,140px)}
/* square */
.w.os0{grid-column:1/8}
.w.os1{grid-column:8/13;margin-top:clamp(60px,11vh,160px)}
.w.os2{grid-column:3/11}
/* landscape */
.w.ol0{grid-column:1/10}
.w.ol1{grid-column:4/13;margin-top:clamp(50px,9vh,140px)}
.w.ol2{grid-column:1/13}

@media (max-width:860px){
  .w[class*="op"],.w[class*="os"],.w[class*="ol"]{
    grid-column:1/13!important;margin-top:0!important}
  .w.op1,.w.op4{margin-left:20%}
  .w.op3{margin-right:26%}
  .w.op5,.w.os1{margin-left:10%;margin-right:10%}
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.ab{padding:clamp(80px,14vh,180px) var(--pad) 0;
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.ab__fig{grid-column:1/7}
.ab__fig img{width:100%;height:auto}
.ab__cap{margin-top:14px}
.ab__body{grid-column:7/13;padding-top:clamp(40px,10vh,140px)}
.ab__lead{
  font-family:var(--ja);font-size:clamp(19px,2.1vw,27px);line-height:1.95;
  letter-spacing:.005em;color:var(--ink);margin-bottom:clamp(40px,6vh,72px);
}
.ab__lead.en{font-family:var(--sans);line-height:1.5;letter-spacing:-.015em}
@media (max-width:860px){
  .ab__fig{grid-column:1/12}
  .ab__body{grid-column:1/13;padding-top:60px}
}

.ab2{padding:var(--band) var(--pad) 0;
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.ab2__fig{grid-column:6/13}
.ab2__fig img{width:100%;height:auto}
.ab2__txt{grid-column:1/5;align-self:end;padding-bottom:clamp(20px,4vh,60px)}
@media (max-width:860px){
  .ab2__fig,.ab2__txt{grid-column:1/13}
  .ab2__txt{padding-top:36px}
}

/* profile facts — 補足として扱う */
.facts{padding:var(--band) var(--pad) 0;
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.facts__h{grid-column:1/3}
.facts__d{grid-column:4/12}
.facts__d dl{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(24px,4vw,60px)}
.facts__d dt{
  padding:15px 0;border-top:1px solid var(--rule);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;
}
.facts__d dd{margin:0;padding:15px 0;border-top:1px solid var(--rule);
  font-family:var(--ja);font-size:13.5px;line-height:1.9;color:var(--ink-2)}
@media (max-width:860px){
  .facts__h,.facts__d{grid-column:1/13}
  .facts__d{margin-top:32px}
  .facts__d dl{grid-template-columns:1fr}
  .facts__d dd{border-top:0;padding-top:0}
}

/* ==========================================================================
   JOURNAL article
   ========================================================================== */
.art{padding:clamp(120px,20vh,240px) var(--pad) 0;
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.art__head{grid-column:2/11}
.art__head .num{display:block;margin-bottom:clamp(28px,5vh,54px)}
.art__head h1{font-family:var(--ja);font-size:clamp(26px,4vw,54px);line-height:1.4;
  letter-spacing:-.01em;font-weight:400}
.art__head .meta{margin-top:clamp(30px,5vh,52px);display:flex;gap:24px}
.art__lead{grid-column:2/9;margin-top:clamp(70px,11vh,140px)}
.art__body{grid-column:3/9;margin-top:clamp(40px,6vh,70px)}
.art__body p{font-family:var(--mincho);font-size:16.5px;line-height:2.3;color:var(--ink-2)}
.art__body p+p{margin-top:2.1em}
.art__body h2{
  font-family:var(--ja);font-size:clamp(18px,1.9vw,24px);line-height:1.7;font-weight:500;
  margin:clamp(70px,10vh,120px) 0 1.4em;letter-spacing:0;
}
.art__body blockquote{
  margin:clamp(60px,9vh,110px) 0;padding-left:clamp(20px,3vw,40px);
  border-left:1px solid var(--ink-4);
}
.art__body blockquote p{font-family:var(--ja);font-size:15px;line-height:2.1;color:var(--ink)}
.art__fig{grid-column:2/12;margin:clamp(80px,13vh,160px) 0}
.art__fig .fig img{width:100%;height:auto}
.art__fig figcaption{margin-top:14px}
.art__nav{grid-column:2/12;margin-top:var(--band);padding-top:26px;
  border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:20px}
@media (max-width:860px){
  .art__head,.art__lead,.art__body,.art__fig,.art__nav{grid-column:1/13}
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.ct{padding:clamp(110px,18vh,220px) var(--pad) 0;
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.ct__lead{grid-column:1/8}
.ct__lead p{font-family:var(--ja);font-size:clamp(18px,2.1vw,28px);line-height:2;
  color:var(--ink-2);max-width:19em}
.ct__lead p.en{font-family:var(--sans);line-height:1.55}
.ct__fig{grid-column:9/13;align-self:start}
.ct__fig img{width:100%;height:auto}

.ct__mail{grid-column:1/13;margin-top:var(--band)}
.ct__mail a{
  display:inline-block;font-size:clamp(28px,6.4vw,96px);letter-spacing:-.04em;
  line-height:1;border-bottom:1px solid var(--ink-4);padding-bottom:.06em;
  transition:border-color .5s var(--ease);
}
.ct__mail a:hover{border-color:var(--ink)}

.form{grid-column:1/7;margin-top:var(--band)}
.form__row{border-bottom:1px solid var(--rule);padding:16px 0;display:flex;gap:20px;
  align-items:baseline}
.form__row label{flex:0 0 96px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.form input,.form textarea{
  flex:1;border:0;background:none;font-family:var(--ja);font-size:14.5px;
  color:var(--ink);padding:0;resize:none;line-height:1.9;
}
.form input:focus,.form textarea:focus{outline:none}
.form input::placeholder,.form textarea::placeholder{color:var(--ink-4)}
.form__send{margin-top:34px}
.form__note{margin-top:22px;font-size:10.5px;letter-spacing:.06em;color:var(--ink-4);
  font-family:var(--ja);line-height:1.9}
.ct__side{grid-column:9/13;margin-top:var(--band)}
.ct__side dl{display:grid;gap:0}
.ct__side dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);padding-top:16px;border-top:1px solid var(--rule)}
.ct__side dd{margin:0;padding:4px 0 16px;font-size:13px;color:var(--ink-2)}
@media (max-width:860px){
  .ct__lead,.ct__fig,.form,.ct__side{grid-column:1/13}
  .ct__fig{margin-top:52px;margin-right:28%}
}

/* ==========================================================================
   utility
   ========================================================================== */
.rule{height:1px;background:var(--rule);margin:0 var(--pad)}
.spacer{height:var(--band)}
.spacer-l{height:var(--band-l)}