/* AilihphiliA — Digital Gallery. Tokens + components from the AilihphiliA Design System. */
:root{
  --ink:#0e0e0e; --white:#fff; --green:#315245; --grey:#b4b8b7; --hair:#d6d8d7;
  --n50:#f5f5f4; --n100:#e9e9e9; --n300:#b4b8b7; --n500:#6b6f6e; --n600:#4b4e4d;
  --g100:#dfe6e3; --g200:#b7c7c0; --g800:#1f352c;
  --serif:"Palatino Linotype",Palatino,"Book Antiqua","EB Garamond",Georgia,serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --jp:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
  --settle:cubic-bezier(.22,1,.36,1); --fast:160ms; --base:280ms; --slow:560ms; --drift:1200ms;
  --gutter:clamp(20px,4vw,48px); --nav:72px; --max:1200px; --text:680px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:clamp(64px,9vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.6 var(--sans);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,figure,blockquote{margin:0}
[lang="ja"]{font-family:var(--jp)}
::selection{background:var(--green);color:var(--white)}
:focus-visible{outline:1px solid var(--green);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--white);padding:8px 14px}

/* Grounds (grained black / green, paper) */
.ground--ink{background:var(--ink) url(/assets/textures/grain-black.jpg) center/256px;color:var(--white)}
.ground--green{background:var(--green) url(/assets/textures/grain-green.jpg) center/256px;color:var(--white)}
.ground--paper{background:var(--n100)}
.section{padding:var(--s9) var(--gutter)}
.container{max-width:var(--max);margin:0 auto}
.page-top{padding-top:calc(var(--nav) + var(--s9))}

/* UI label — tracked Helvetica caps */
.label{font:500 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}

/* MirrorHeading — eyebrow flanked by rules, centred serif heading, optional reflection */
.mh{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.mh__eyebrow{display:flex;align-items:center;gap:12px;font:400 12px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--n600)}
.mh__eyebrow::before,.mh__eyebrow::after{content:"";width:24px;height:1px;background:currentColor}
.mh h1,.mh h2,.mh__reflect{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.mh h1,.mh__reflect{font-size:clamp(48px,7vw,96px)}
.mh--h2 h2{font-size:clamp(34px,4.4vw,44px)}
.mh--h3 h2{font-size:clamp(28px,3.4vw,32px)}
.mh__reflect{transform:scaleY(-1);margin-top:-24px;opacity:.12;user-select:none;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 70%);mask-image:linear-gradient(to top,#000,transparent 70%)}
.mh__sub{max-width:var(--text);font:400 19px/1.6 var(--serif);color:var(--n600);text-wrap:pretty}
.mh--left{align-items:flex-start;text-align:left}
.ground--ink .mh__eyebrow,.ground--ink .mh__sub{color:var(--n300)}
.ground--green .mh__eyebrow{color:var(--g200)}.ground--green .mh__sub{color:var(--g100)}

/* Buttons — square, tracked caps; primary black → green */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;border:1px solid var(--ink);border-radius:0;
  background:var(--ink);color:var(--white);font:500 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background var(--base) var(--settle),color var(--base) var(--settle),border-color var(--base) var(--settle),transform var(--fast) var(--settle)}
.btn:hover{background:var(--green);border-color:var(--green)}
.btn:active{transform:translateY(1px)}
.btn--secondary{background:transparent;color:var(--ink)}
.btn--secondary:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn--ghost{background:transparent;color:var(--ink);border-color:transparent}
.btn--ghost:hover{background:var(--n50);border-color:transparent}
.btn--inverse{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn--inverse:hover{background:var(--n100);border-color:var(--n100)}
.btn--inverse-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.6)}
.btn--inverse-outline:hover{background:rgba(255,255,255,.08);border-color:var(--white)}
.btn--lg{height:56px;padding:0 32px;font-size:14px}
.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* Nav — frosted glass, links mirrored around the centred wordmark */
.nav{position:fixed;inset:0 0 auto;z-index:50;background:rgba(255,255,255,.62);color:var(--ink);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);border-bottom:1px solid rgba(14,14,14,.08);
  transition:background-color var(--slow) var(--settle),color var(--slow) var(--settle),border-color var(--slow)}
.nav.is-dark{background:rgba(14,14,14,.55);color:var(--white);border-color:rgba(255,255,255,.12)}
.nav__inner{height:var(--nav);padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--s6)}
.nav__side{display:flex;gap:var(--s6)}
.nav__side--l{justify-content:flex-end}
.nav__link{font:400 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap;transition:border-color var(--base) var(--settle)}
.nav__link:hover,.nav__link[aria-current]{border-color:currentColor}
.nav__logo{display:grid}
.nav__logo img{grid-area:1/1;height:26px;width:auto}
.nav__logo .on-dark,.nav.is-dark .on-light{visibility:hidden}
.nav.is-dark .on-dark{visibility:visible}
.nav__menu{display:none;width:44px;height:44px;background:none;border:0;color:inherit;cursor:pointer;place-items:center;justify-self:end}
.nav__menu span{display:block;width:20px;height:1px;background:currentColor;box-shadow:0 6px 0 currentColor;transform:translateY(-3px)}
.sheet{position:fixed;z-index:49;top:calc(var(--nav) + 8px);left:12px;right:12px;padding:12px 0;background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 24px 60px rgba(14,14,14,.18);
  transform-origin:top right;transform:scale(.94);opacity:0;visibility:hidden;transition:transform .42s var(--settle),opacity var(--base),visibility 0s .42s}
.sheet.is-open{transform:none;opacity:1;visibility:visible;transition:transform .42s var(--settle),opacity var(--base)}
.sheet a{display:block;padding:14px 24px;font:400 20px/1.3 var(--serif);text-decoration:none}
@media (max-width:900px){
  .nav__side{display:none}
  .nav__inner{grid-template-columns:44px 1fr 44px}
  .nav__logo{grid-column:2;justify-self:center}
  .nav__menu{display:grid;grid-column:3}
}

/* Mirror hero — φ parallax opposite to the cursor, central axis line */
.mirror{position:relative;overflow:hidden;min-height:min(92svh,820px);display:flex;align-items:center;justify-content:center;--mx:0;--my:0}
.mirror__phi{position:absolute;left:50%;top:50%;height:130%;width:auto;max-width:none;opacity:.06;pointer-events:none;
  transform:translate(calc(-50% + var(--mx) * -40px),calc(-50% + var(--my) * -30px));transition:transform 900ms var(--settle)}
.mirror__axis{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.12)}
.mirror__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s6);padding:calc(var(--nav) + var(--s8)) var(--gutter) var(--s8);
  transform:translate(calc(var(--mx) * 10px),calc(var(--my) * 8px));transition:transform 900ms var(--settle)}

/* Four Pillars — text counter-shifts, then settles, as it scrolls through centre */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--s7);border-top:1px solid var(--hair)}
.pillar{--t:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:var(--s6) 16px}
.pillar+.pillar{border-left:1px solid var(--hair)}
.pillar__i{font:400 11px/1 var(--sans);letter-spacing:.24em;color:var(--n500)}
.pillar__rule{width:1px;height:32px;background:currentColor;opacity:.4;transform-origin:bottom;transform:rotate(calc(var(--t) * 6deg))}
.pillar h3{font:400 24px/1.2 var(--serif);transform:translateX(calc(var(--t) * -8px))}
.pillar p{max-width:280px;font:400 16px/1.6 var(--serif);color:var(--n600);text-wrap:pretty;transform:translateX(calc(var(--t) * 8px))}
.pillar__rule,.pillar h3,.pillar p{transition:transform var(--slow) var(--settle)}
.ground--ink .pillar{border-color:rgba(255,255,255,.14)}.ground--ink .pillar p{color:var(--n300)}

/* Service rows — nudge 6px right, arrow darkens */
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7);margin-top:var(--s7)}
.svc__row{display:grid;grid-template-columns:40px minmax(0,1fr) 24px;gap:16px;align-items:baseline;padding:var(--s5) 0;border-top:1px solid var(--ink);text-decoration:none}
.svc__n{font:400 11px/1 var(--sans);letter-spacing:.14em;color:var(--n500)}
.svc__t{display:block;font:400 24px/1.2 var(--serif);transition:transform var(--base) var(--settle)}
.svc__d{display:block;margin-top:4px;font-size:13px;color:var(--n600)}
.svc__a{opacity:.35;transition:opacity var(--base)}
.svc__row:hover .svc__t{transform:translateX(6px)}
.svc__row:hover .svc__a{opacity:1}

/* Article card — single black top rule */
.acards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin-top:var(--s7)}
.acard{display:flex;flex-direction:column;gap:16px;padding:var(--s5) 0;border-top:1px solid var(--ink);text-decoration:none;background:var(--white)}
.acard__meta{display:flex;justify-content:space-between;font:400 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--n600)}
.acard h3{font:400 24px/1.2 var(--serif);text-wrap:balance;text-decoration:underline 1px transparent;text-underline-offset:5px;transition:text-decoration-color var(--base)}
.acard p{font-size:14px;line-height:1.6;color:var(--n600);text-wrap:pretty}
.acard__time{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--n500)}
.acard__time::after{content:"";width:16px;height:1px;background:currentColor;transition:width var(--base) var(--settle)}
a.acard:hover h3{text-decoration-color:currentColor}
a.acard:hover .acard__time::after{width:28px}
.acard--soon .acard__time::after{display:none}

/* Artwork card — slow 1.03 drift and a central axis line on hover */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7) var(--s6)}
.work{display:flex;flex-direction:column;gap:12px;text-decoration:none}
.work__img{position:relative;aspect-ratio:1;overflow:hidden;background:var(--n100)}
.work__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--drift) var(--settle)}
.work__img::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.7);opacity:0;transition:opacity var(--slow) var(--settle)}
.work:hover .work__img img{transform:scale(1.03)}
.work:hover .work__img::after{opacity:1}
.work figcaption{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.work__t{font:400 19px/1.3 var(--serif)}
.work__m{font:400 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--n500);white-space:nowrap}

/* Framed card — black outer rule + inset hairline */
.frames{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);margin-top:var(--s7)}
.frame{border:1px solid var(--ink);outline:1px solid var(--hair);outline-offset:-8px;padding:var(--s6) var(--s5);background:var(--white)}
.frame__n{font:400 11px/1 var(--sans);letter-spacing:.14em;color:var(--n500)}
.frame h3{font:400 24px/1.2 var(--serif);margin:12px 0 8px}
.frame p{font-size:13px;line-height:1.6;color:var(--n600)}

/* Tabs */
.tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:0 var(--s6);border-bottom:1px solid var(--hair)}
.tabs button{background:none;border:0;border-bottom:1px solid transparent;margin-bottom:-1px;padding:12px 0;cursor:pointer;
  font:400 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--n500);transition:color var(--base) var(--settle),border-color var(--base) var(--settle)}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--ink)}

/* Intel — horizontal balance scroll; cards arc onto the central φ line */
.intel{position:relative;padding:var(--s5) 0 var(--s8)}
.intel__line{position:absolute;left:8%;right:8%;top:50%;height:1px;background:var(--ink)}
.intel__phi{position:absolute;left:50%;top:50%;transform:translate(-50%,-2px);font:italic 400 28px/1 var(--serif);background:var(--white);padding:0 10px}
.intel__track{position:relative;display:flex;gap:var(--s6);overflow-x:auto;scroll-snap-type:x proximity;padding:40px calc(50% - 170px) 80px;scrollbar-width:none}
.intel__track::-webkit-scrollbar{display:none}
.intel__item{--d:0;flex:0 0 340px;scroll-snap-align:center;padding:0 16px;background:var(--white);
  transform:translateY(calc(var(--d) * var(--d) * 60px)) rotate(calc(var(--d) * 4deg));opacity:calc(1 - var(--d) * var(--d) * .5);
  transition:transform var(--slow) var(--settle),opacity var(--slow)}
.intel__count{text-align:center;margin-top:var(--s6);color:var(--n500)}

/* Axis inquiry — the beam tilts ≤2.4° toward the chosen space */
.axis{border:0;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:var(--s6);width:100%}
.axis legend{padding:0;margin-bottom:var(--s6);font:400 32px/1.2 var(--serif);text-align:center}
.axis__beam{--tilt:0deg;display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:16px;width:100%;max-width:560px;transform:rotate(var(--tilt));transition:transform var(--slow) var(--settle)}
.axis__col{display:flex;flex-direction:column;gap:12px}
.axis__opt input{position:absolute;opacity:0;pointer-events:none}
.axis__opt span{display:flex;align-items:center;height:56px;padding:0 20px;border:1px solid var(--n300);font:400 19px/1 var(--serif);cursor:pointer;transition:all var(--base) var(--settle)}
.axis__col--l span{justify-content:flex-end}
.axis__opt:hover span{border-color:var(--ink)}
.axis__opt input:checked+span{background:var(--ink);color:var(--white);border-color:var(--ink)}
.axis__opt input:focus-visible+span{outline:1px solid var(--green);outline-offset:3px}
.axis__fulcrum{display:flex;flex-direction:column;align-items:center}
.axis__fulcrum::before,.axis__fulcrum::after{content:"";flex:1;width:1px;background:var(--n300)}
.axis__fulcrum span{font:italic 400 28px/1 var(--serif);padding:8px 0}

/* Form fields — underline only */
.fields{border:0;margin:0;padding:0;width:100%;max-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);transition:opacity var(--slow) var(--settle)}
.fields:disabled{opacity:.35}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field>span{font:400 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--n600)}
.field input,.field textarea,.field select{font:400 16px/1.4 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--n300);border-radius:0;padding:10px 0;outline:none;transition:border-color var(--base) var(--settle)}
.field select{appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%230e0e0e'/%3E%3C/svg%3E") right 4px center no-repeat}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink)}
.check{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.35;cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:1px 0 0;border:1px solid var(--ink);border-radius:0;cursor:pointer;
  transition:background var(--fast) var(--settle)}
.check input:checked{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M1.5 5.2 4 7.5 8.5 2.5' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E") center no-repeat}
.status{min-height:1.6em;text-align:center;color:var(--green);font-size:14px}

/* Tag */
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px solid var(--hair);font:400 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.tag--green{background:var(--g100);color:var(--g800);border-color:var(--g100)}

/* Split hero (Services) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:560px;margin-top:var(--nav)}
.split__img{background:var(--n100) center/cover}
.split__body{padding:var(--s9) var(--gutter);display:flex;flex-direction:column;justify-content:center;gap:var(--s5)}

/* Footer */
.footer{padding:var(--s9) var(--gutter) var(--s6)}
.footer__in{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--s8)}
.footer__cols{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)}
.footer__col{display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--n300)}
.footer__col .label{color:var(--white);margin-bottom:6px}
.footer__col a{text-decoration:none}
.footer__col a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.footer__base{width:100%;border-top:1px solid rgba(255,255,255,.14);padding-top:var(--s5);text-align:center;color:var(--n500)}

/* Responsive */
@media (max-width:960px){
  .pillars,.frames{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillar:nth-child(3){border-left:0}
  .acards,.works{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .pillars,.frames,.svc,.acards,.works,.footer__cols,.fields,.split{grid-template-columns:1fr}
  .pillar+.pillar{border-left:0;border-top:1px solid var(--hair)}
  .split__img{min-height:300px}
  .intel__item{flex-basis:280px}
  .intel__track{padding-left:calc(50% - 140px);padding-right:calc(50% - 140px)}
  .axis legend{font-size:26px}
  .axis__beam{grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:8px}
  .axis__opt span{padding:0 12px;font-size:17px}
  .footer__cols{text-align:center}
}

/* Accessibility preferences */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important}
  .mirror__phi{transform:translate(-50%,-50%)}
}
@media (prefers-reduced-transparency:reduce){
  .nav{background:var(--white);-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav.is-dark{background:var(--ink)}
  .sheet{background:var(--white);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--n500:#2e3030;--n600:#2e3030;--hair:#8a8f8d}
  .nav{background:var(--white);box-shadow:0 1px 0 var(--ink)}
}

/* Japanese — Latin stays in the brand faces, kana/kanji fall through to M PLUS Rounded 1c */
html[lang="ja"]{--serif:"Palatino Linotype",Palatino,"Book Antiqua","EB Garamond","M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
  --sans:"Helvetica Neue",Helvetica,Arial,"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif}
html[lang="ja"] body{line-break:strict;word-break:auto-phrase}
html[lang="ja"] :is(.mh h1,.mh h2,.mh__reflect,.split h1){line-height:1.35;letter-spacing:.02em}
html[lang="ja"] .mh__reflect{margin-top:-32px}
html[lang="ja"] :is(.label,.nav__link,.btn,.tabs button,.mh__eyebrow){letter-spacing:.08em}