/* JAPAN CREATIVE STUDIO — v0.1
   No frameworks, no CDNs, no fonts fetched from external services.
   Key design rule: exactly ONE screen per section. */
:root {
  color-scheme: light;
  --paper: #eeedeb;
  --paper-bright: #f5f4f2;
  --paper-muted: #dededc;
  --ink: #171719;
  --ink-soft: #555559;
  --red: #b91b25;
  --night: #101114;
  --gutter: clamp(10px, 1.35vw, 26px);
  --gap: clamp(6px, .62vw, 12px);
  --serif: 'Bodoni MT', 'Didot', 'Times New Roman', Georgia, serif;
  --sans: 'Arial', 'Helvetica Neue', sans-serif;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); overflow:hidden; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
button, a { touch-action:manipulation; }
[hidden] { display:none !important; }
::selection { color:#fff; background:var(--red); }
.skip-link { position:fixed; left:20px; top:-90px; z-index:100; color:#fff; background:var(--night); padding:14px 20px; font-size:12px; }
.skip-link:focus { top:12px; }
.micro { font:600 clamp(8px,.6vw,10px)/1.7 var(--sans); letter-spacing:.32em; }
.page-stack { position:relative; width:100%; height:100vh; height:100dvh; overflow-x:hidden; overflow-y:auto; scroll-snap-type:y mandatory; overscroll-behavior-y:contain; scrollbar-width:none; }
.page-stack::-webkit-scrollbar { display:none; }
.screen { position:relative; width:100%; height:100vh; height:100dvh; min-height:0; overflow:hidden; scroll-snap-align:start; scroll-snap-stop:always; }

/* INTRODUCTION SCREEN */
.screen--home { background:var(--paper-bright); }
.home-shell { width:100%; height:100%; display:flex; flex-direction:column; padding:0 var(--gutter); }
.site-header { flex:0 0 clamp(102px,12.5dvh,148px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(10px,1.5vw,30px); position:relative; z-index:6; }
.nav { display:flex; align-items:center; gap:clamp(17px,2.4vw,52px); min-width:0; }
.nav--right { justify-content:flex-end; }
.nav__link { position:relative; font-size:clamp(8px,.71vw,11px); letter-spacing:.15em; line-height:1.3; font-weight:700; white-space:nowrap; transition:color .22s; }
.nav__link:hover { color:var(--red); }
.nav__link--active::after { content:''; width:4px; height:4px; background:var(--red); border-radius:50%; position:absolute; left:50%; transform:translateX(-50%); top:calc(100% + 9px); }
.nav__menu-icon { margin-left:clamp(0px,.8vw,16px); border:0; padding:10px 4px; width:27px; display:flex; flex-direction:column; justify-content:center; gap:5px; background:transparent; cursor:pointer; }
.nav__menu-icon span { display:block; width:23px; height:1px; background:var(--ink); transition:transform .2s,opacity .2s; }
.nav__menu-icon[aria-expanded="true"] span:first-child { transform:translateY(6px) rotate(45deg); }
.nav__menu-icon[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav__menu-icon[aria-expanded="true"] span:last-child { transform:translateY(-6px) rotate(-45deg); }
.branding { display:flex; flex-direction:column; align-items:center; min-width:0; }
.branding__title { font:400 clamp(31px,3.25vw,64px)/1.02 var(--serif); white-space:nowrap; letter-spacing:-.056em; }
.branding__subtitle { display:flex; align-items:center; justify-content:center; gap:clamp(13px,2vw,40px); margin:17px 0 0; font-size:clamp(6px,.54vw,10px); font-weight:600; letter-spacing:.48em; color:#777579; white-space:nowrap; }
.branding__rule { width:clamp(12px,2vw,33px); height:1px; flex:0 0 auto; background:#99979a; }
.mobile-menu { position:absolute; right:0; top:83%; padding:20px 25px; width:min(260px,85vw); background:#f5f4f2; border:1px solid #d6d3d3; box-shadow:0 15px 38px rgba(0,0,0,.14); display:flex; flex-direction:column; gap:17px; font-size:12px; font-weight:700; letter-spacing:.16em; }
.mobile-menu a:hover { color:var(--red); }

/* Main two-sided editorial grid */
.project-grid { display:grid; grid-template-columns: 1.09fr 1fr; gap:var(--gap); flex:1; min-height:0; width:100%; }
.hero-tile { background:linear-gradient(135deg,#efefed,#d7d8d8 85%); position:relative; overflow:hidden; isolation:isolate; }
.hero-tile__sun { position:absolute; z-index:-1; width:47%; aspect-ratio:1; top:12%; right:7%; background:var(--red); border-radius:50%; }
.hero-tile__photo { position:absolute; z-index:-1; right:-2%; bottom:0; width:104%; height:67%; object-fit:cover; object-position:57% bottom; filter:grayscale(.65) contrast(1.09); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 31%),linear-gradient(to right,transparent 0%,#000 25%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to bottom, transparent 0%,#000 31%); }
.hero-tile__content { position:absolute; left:7%; top:6%; z-index:2; width:91%; pointer-events:none; }
.hero-tile__eyebrow { line-height:1.9; margin:0 0 clamp(9px,1.25vw,21px); }
.red-rule { display:block; width:clamp(35px,4.1vw,63px); height:1px; background:var(--red); }
.hero-tile__title { font:400 clamp(48px,5.4vw,105px)/.85 var(--serif); letter-spacing:-.09em; margin:clamp(16px,2vw,37px) 0 clamp(18px,2vw,30px); white-space:nowrap; }
.hero-tile__period { color:var(--red); }
.hero-tile__statement { margin:0 0 clamp(17px,2.1vw,34px); line-height:2.1; }
.hero-tile__cta { pointer-events:auto; display:inline-flex; align-items:center; gap:clamp(16px,3vw,48px); border:1px solid #77777a; padding:clamp(10px,1.08vw,18px) clamp(12px,1.28vw,22px); letter-spacing:.25em; font-size:clamp(8px,.68vw,11px); font-weight:700; background:rgba(242,242,240,.25); transition:background .25s, color .25s, border-color .25s; }
.hero-tile__cta span { font-size:clamp(18px,1.8vw,27px); line-height:.5; color:var(--red); font-weight:400; transition:transform .2s; }
.hero-tile__cta:hover { color:#fff; background:var(--night); border-color:var(--night); }
.hero-tile__cta:hover span { transform:translateX(5px); }
.hero-tile__vertical { position:absolute; left:4.4%; bottom:15%; display:flex; align-items:center; flex-direction:column; gap:15px; font-size:9px; font-weight:700; }
.hero-tile__vertical i { width:1px; height:clamp(13px,2vw,28px); background:#6c6c6d; }
.hero-tile__vertical b { font-weight:400; font-size:13px; writing-mode:vertical-rl; letter-spacing:.2em; }
.hero-tile__vertical em { width:6px; height:6px; background:var(--red); border-radius:50%; }
.hero-tile__foot { position:absolute; bottom:2.1%; left:7%; right:0; margin:0; font-size:clamp(7px,.58vw,10px); color:#252527; }
.hero-tile__foot span { color:#999; padding:0 .55vw; }

.tiles-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:var(--gap); min-width:0; min-height:0; }
.tile { position:relative; display:block; overflow:hidden; width:100%; height:100%; min-width:0; min-height:0; padding:0; margin:0; border:0; text-align:left; color:var(--ink); background:#e3e3e2; isolation:isolate; cursor:pointer; }
.tile:nth-child(2n) { background:#d9d9d8; }
.tile:nth-child(3n) { background:#f0f0ee; }
.tile::before { position:absolute; z-index:-1; content:''; inset:0; background:linear-gradient(108deg,rgba(255,255,255,.22),transparent 75%); pointer-events:none; }
.tile::after { content:''; position:absolute; height:2px; width:0; bottom:0; left:0; background:var(--red); z-index:4; transition:width .36s ease; }
.tile:hover::after,.tile:focus-visible::after { width:100%; }
.tile__photo { position:absolute; z-index:-1; right:0; bottom:0; width:84%; height:67%; object-fit:cover; object-position:center; filter:grayscale(.35) contrast(1.12); -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 38%); mask-image:linear-gradient(to right,transparent 0%,#000 38%); transition:transform .6s cubic-bezier(.2,.65,.3,1),filter .45s; }
.tile:hover .tile__photo,.tile:focus-visible .tile__photo { transform:scale(1.075); filter:grayscale(0) contrast(1.07); }
.tile__index { position:absolute; top:7%; left:7%; font-size:clamp(7px,.58vw,10px); letter-spacing:.16em; }
.tile__line { position:absolute; top:17%; left:7%; width:12px; height:1px; background:#7d7d81; }
.tile__title { position:absolute; z-index:2; top:23%; left:7%; display:flex; flex-direction:column; font:400 clamp(17px,1.92vw,35px)/.91 var(--serif); letter-spacing:-.048em; pointer-events:none; }
.tile__copy { position:absolute; z-index:2; top:49%; left:7%; display:flex; flex-direction:column; line-height:1.95; font-size:clamp(6px,.47vw,9px); letter-spacing:.18em; pointer-events:none; }
.tile__arrow { position:absolute; bottom:7%; left:7%; z-index:2; color:var(--red); font:400 clamp(23px,2.2vw,36px)/1 var(--sans); transition:transform .25s; }
.tile:hover .tile__arrow { transform:translateX(7px); }
.tile--automotive { background:linear-gradient(96deg,#ecebea 25%,#cfced0); }
.tile--automotive .tile__photo { width:100%; height:57%; object-position:40% center; }
.tile--diecast .tile__photo { width:100%; height:55%; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 33%);mask-image:linear-gradient(to bottom,transparent 0%,#000 33%); }
.tile--digital { background:#d8d8d7; }
.tile--digital .tile__photo { width:77%; height:85%; filter:grayscale(.35) brightness(.82); }
.tile--collaboration .tile__photo { width:71%; height:88%; object-position:center top; }
.tile--collaboration .tile__title { font-size:clamp(15px,1.54vw,29px); }
.tile--identity .tile__photo { height:100%; width:56%; -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 22%); mask-image:linear-gradient(to right,transparent 0%,#000 22%); }
.tile--japan .tile__photo { width:100%; height:53%; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%); mask-image:linear-gradient(to bottom,transparent 0%,#000 20%); filter:grayscale(.75) contrast(1.1); }
.tile--japan::before { content:''; width:clamp(36px,4.5vw,76px); aspect-ratio:1; height:auto; background:var(--red); border-radius:50%; position:absolute; inset:10% 8% auto auto; }
.home-bottom-bar { height:clamp(0px,3.7dvh,36px); flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; color:#777; font-size:clamp(7px,.52vw,9px); font-weight:700; letter-spacing:.18em; }
.home-bottom-bar__arrow { font-size:16px; color:var(--red); vertical-align:middle; }

/* SECOND FULL-SCREEN SECTION = FOOTER */
.screen--footer { background:var(--night); color:#ecebe8; }
.footer-shell { height:100%; padding:clamp(20px,3.4dvh,42px) clamp(22px,4.1vw,82px) clamp(20px,3.3dvh,40px); display:flex; flex-direction:column; }
.footer-top,.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-shrink:0; }
.footer-top { color:#9c9ba0; padding-bottom:clamp(16px,2.8dvh,34px); border-bottom:1px solid #39393c; }
.footer-top .micro { font-size:clamp(7px,.65vw,11px); }
.footer-main { flex:1; min-height:0; display:grid; grid-template-columns:1.15fr .85fr; gap:8%; align-items:center; }
.footer-heading { position:relative; z-index:1; }
.footer-kicker { display:flex; gap:14px; align-items:center; color:#b5b5b9; }
.red-dot { display:inline-block; height:8px; width:8px; border-radius:50%; background:var(--red); }
.footer-heading h2 { position:relative; z-index:2; font:400 clamp(62px,7.15vw,145px)/.86 var(--serif); letter-spacing:-.074em; margin:clamp(20px,3dvh,35px) 0; white-space:nowrap; }
.footer-heading h2 i { font-style:normal; color:#b8b8bc; }
.footer-circle { position:absolute; right:10%; bottom:-12%; width:min(23vw,260px); aspect-ratio:1; background:var(--red); border-radius:50%; z-index:-1; opacity:.85; }
.footer-info { align-self:center; max-width:490px; padding:15px 0; }
.footer-info__eyebrow { color:#b7b6b9; margin:0 0 clamp(20px,3dvh,32px); }
.footer-info__description { max-width:460px; font:400 clamp(19px,1.6vw,30px)/1.35 var(--serif); letter-spacing:-.022em; margin:0 0 clamp(15px,2dvh,24px); }
.footer-info__description--muted { color:#99989d; font:400 clamp(13px,1vw,17px)/1.55 var(--sans); max-width:440px; letter-spacing:0; }
.footer-info__columns { margin-top:clamp(28px,5dvh,58px); display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.footer-info__label { color:#77777c; font-size:9px; margin-bottom:16px; }
.footer-info__columns a,.footer-info__columns button { display:block; text-align:left; background:none; border:0; padding:0; margin:10px 0; cursor:pointer; color:#e5e5e6; font-size:clamp(10px,.83vw,15px); font-weight:600; letter-spacing:.12em; transition:color .2s; }
.footer-info__columns a:hover,.footer-info__columns button:hover { color:#f04b54; }
.footer-info__columns a span,.footer-info__columns button span { color:var(--red); }
.footer-info__pending { display:block; color:#b6b5b8; line-height:1.8; font-size:10px; letter-spacing:.12em; }
.footer-info__return { cursor:pointer; color:#f0efed; background:none; border:0; border-bottom:1px solid #535357; padding:0 0 8px; margin-top:clamp(25px,5dvh,60px); font-weight:700; font-size:clamp(9px,.7vw,13px); letter-spacing:.2em; }
.footer-info__return span { margin-left:22px; color:#e7444e; font-size:16px; }
.footer-bottom { padding-top:clamp(17px,2.8dvh,30px); border-top:1px solid #39393c; color:#8b898e; font-size:clamp(8px,.64vw,11px); letter-spacing:.12em; }
.footer-bottom span:last-child { color:#c0bfc1; font-size:14px; }

/* tiny fixed pagination */
.screen-nav { position:fixed; z-index:10; right:clamp(2px,.35vw,9px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:13px; }
.screen-nav__button { display:flex; flex-direction:column; align-items:center; gap:5px; width:27px; border:0; padding:5px 0; background:transparent; cursor:pointer; color:#777; font:700 8px/1 var(--sans); transition:color .2s; }
.screen-nav__button i { display:block; width:10px; height:1px; background:currentColor; transition:width .2s; }
.screen-nav__button.is-active { color:var(--red); }
.screen-nav__button.is-active i { width:18px; }
.screen-nav.is-dark .screen-nav__button:not(.is-active) { color:#85858b; }

/* Modal belongs to the UI, not a third scroll section. */
.project-dialog { border:0; color:var(--ink); padding:0; margin:auto; width:min(92vw,540px); max-height:min(86dvh,700px); box-shadow:0 20px 85px rgba(0,0,0,.3); background:#f5f4f2; overflow:auto; }
.project-dialog::backdrop { background:rgba(12,12,14,.74); backdrop-filter:blur(7px); }
.project-dialog__inside { position:relative; padding:clamp(30px,5vw,65px); }
.project-dialog__close { position:absolute; top:13px; right:18px; border:0; background:transparent; font:300 34px/1 var(--sans); cursor:pointer; }
.project-dialog__eyebrow { color:var(--red); }
.project-dialog h2 { font:400 clamp(42px,5vw,70px)/.98 var(--serif); letter-spacing:-.06em; margin:20px 0; }
.project-dialog p:not(.project-dialog__eyebrow) { font:400 16px/1.65 var(--sans); color:#626167; }
.project-dialog__action { display:inline-block; border:1px solid var(--ink); font-size:10px; font-weight:700; letter-spacing:.16em; padding:14px 17px; margin-top:22px; }
.project-dialog__action:hover { background:var(--ink); color:#fff; }
.project-dialog__accent { display:block; margin-top:28px; height:3px; width:54px; background:var(--red); }

/* COMPACT LAPTOP */
@media (max-width:1250px) {
  .site-header { grid-template-columns:1fr auto 1fr; gap:9px; }
  .nav { gap:13px; }
  .branding__title { font-size:clamp(26px,3.4vw,43px); }
  .branding__subtitle { letter-spacing:.23em; gap:9px; }
  .project-grid { grid-template-columns:1.04fr 1fr; }
  .hero-tile__title { font-size:clamp(38px,5.3vw,72px); }
  .tile__title { font-size:clamp(15px,1.83vw,26px); }
}
@media (max-width:960px) {
  .nav__link { display:none; }
  .site-header { grid-template-columns:1fr auto 1fr; }
  .branding__title { font-size:clamp(30px,4.1vw,48px); }
  .branding__subtitle { font-size:7px; }
  .project-grid { grid-template-columns:1fr 1.03fr; }
  .tile__title { font-size:clamp(14px,2.1vw,22px); }
  .tile__copy { display:none; }
  .tile__photo { height:64%; }
  .hero-tile__title { font-size:clamp(40px,5.7vw,62px); }
  .footer-main { gap:5%; }
  .footer-heading h2 { font-size:clamp(52px,7vw,90px); }
}

/* MOBILE: one large hero and FOUR smaller previews fit on the very same screen. */
@media (max-width:650px) {
  :root { --gutter:9px; --gap:5px; }
  .site-header { flex-basis:clamp(77px,12dvh,105px); grid-template-columns:1fr auto; }
  .nav--left { display:none; }
  .branding { grid-column:1; grid-row:1; justify-self:start; align-items:flex-start; }
  .branding__title { font-size:clamp(22px,6.4vw,35px); letter-spacing:-.067em; }
  .branding__subtitle { margin-top:8px; letter-spacing:.15em; font-size:6px; }
  .branding__rule { display:none; }
  .nav--right { grid-column:2; grid-row:1; }
  .nav__menu-icon { width:31px; }
  .mobile-menu { top:75%; right:0; }
  .project-grid { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1.05fr) minmax(0,1fr); gap:var(--gap); }
  .hero-tile__sun { width:41%; right:7%; top:3%; }
  .hero-tile__photo { height:93%; width:75%; right:-2%; object-position:center 60%; -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 25%); mask-image:linear-gradient(to right,transparent 0%,#000 25%); }
  .hero-tile__content { top:7%; left:6%; }
  .hero-tile__eyebrow { font-size:6px; line-height:1.6; margin-bottom:7px; }
  .red-rule { width:34px; }
  .hero-tile__title { font-size:clamp(39px,10.1vw,66px); margin:12px 0 11px; letter-spacing:-.088em; }
  .hero-tile__statement { font-size:7px; margin-bottom:10px; line-height:1.65; letter-spacing:.16em; }
  .hero-tile__cta { padding:8px 10px; gap:12px; font-size:7px; letter-spacing:.14em; }
  .hero-tile__cta span { font-size:17px; }
  .hero-tile__vertical { display:none; }
  .hero-tile__foot { left:6%; bottom:4%; font-size:6px; letter-spacing:.1em; }
  .tiles-grid { grid-template-rows:repeat(2,minmax(0,1fr)); }
  .tile--identity,.tile--japan { display:none; }
  .tile__index { top:6%; left:7%; }
  .tile__line { top:18%; }
  .tile__title { top:27%; font-size:clamp(15px,4.3vw,23px); }
  .tile--collaboration .tile__title { font-size:clamp(13px,3.65vw,20px); }
  .tile__photo { height:77%; width:90%; }
  .tile--diecast .tile__photo { height:62%; }
  .tile--automotive .tile__photo { height:62%; }
  .tile--digital .tile__photo,.tile--collaboration .tile__photo { height:72%; }
  .tile__arrow { font-size:19px; bottom:4%; }
  .home-bottom-bar { height:clamp(17px,3dvh,29px); font-size:6px; letter-spacing:.12em; }
  .home-bottom-bar__arrow { font-size:12px; }
  .screen-nav { right:2px; top:49%; }
  .screen-nav__button { width:14px; font-size:6px; }
  .screen-nav__button i { width:7px; }
  .screen-nav__button.is-active i { width:11px; }
  .footer-shell { padding:18px 22px 20px; }
  .footer-top .micro { font-size:7px; letter-spacing:.12em; }
  .footer-top .micro:last-child { display:none; }
  .footer-main { display:flex; flex-direction:column; align-items:stretch; justify-content:space-evenly; gap:10px; }
  .footer-heading h2 { font-size:clamp(51px,13.7vw,85px); margin:12px 0 0; }
  .footer-kicker { font-size:7px; }
  .footer-circle { width:120px; bottom:-8%; right:5%; }
  .footer-info { align-self:stretch; max-width:none; padding:0; }
  .footer-info__eyebrow { margin-bottom:9px; font-size:7px; }
  .footer-info__description { font-size:clamp(17px,4.5vw,24px); margin-bottom:7px; max-width:390px; }
  .footer-info__description--muted { font-size:11px; line-height:1.35; }
  .footer-info__columns { margin-top:15px; gap:12px; }
  .footer-info__label { margin-bottom:6px; font-size:7px; }
  .footer-info__columns a,.footer-info__columns button { font-size:10px; margin:6px 0; }
  .footer-info__pending { font-size:8px; }
  .footer-info__return { margin-top:13px; padding-bottom:5px; font-size:9px; }
  .footer-bottom { font-size:7px; letter-spacing:0; padding-top:12px; }
  .footer-bottom span:nth-child(2) { display:none; }
}

/* VERY SHORT SCREENS: avoid page overflow while preserving the two-section model. */
@media (max-height:680px) and (min-width:651px) {
  .site-header { flex-basis:clamp(78px,12dvh,95px); }
  .hero-tile__eyebrow { margin-bottom:7px; line-height:1.4; }
  .hero-tile__title { font-size:min(5vw,62px); margin:12px 0; }
  .hero-tile__statement { margin-bottom:11px; }
  .hero-tile__cta { padding:8px 13px; }
  .tile__title { top:21%; }
  .tile__copy { display:none; }
  .footer-heading h2 { font-size:min(7vw,78px); }
  .footer-info__description { font-size:20px; }
  .footer-info__columns { margin-top:20px; }
  .footer-info__return { margin-top:18px; }
}
@media (max-height:620px) and (max-width:650px) {
  .site-header { flex-basis:64px; }
  .hero-tile__eyebrow { display:none; }
  .hero-tile__content .red-rule { display:none; }
  .hero-tile__title { margin:8px 0; font-size:clamp(32px,9vw,50px); }
  .hero-tile__statement { margin-bottom:7px; }
  .hero-tile__cta { padding:6px 8px; }
  .footer-shell { padding:10px 18px; }
  .footer-main { gap:1px; }
  .footer-heading h2 { font-size:clamp(38px,10.3vw,65px); }
  .footer-info__description { font-size:15px; }
  .footer-info__columns { margin-top:5px; }
  .footer-info__return { margin-top:5px; }
  .footer-bottom { padding-top:5px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
/* Short-lived visual feedback when the Projects navigation is selected. */
.tile--spotlight { outline:2px solid var(--red); outline-offset:-2px; }