/* FLUXFRAME 2026 — editorial studio system inspired by precise Japanese portfolios. */
:root {
  --paper:#f7f7f3; --white:#fff; --ink:#171816; --muted:#696b66;
  --line:rgba(23,24,22,.28); --red:#c94f43; --blue:#dce8ed; --peach:#ead8ce;
  --acid:#c94f43; --violet:#b8cbd5; --cyan:#9abdc8; --orange:#c96a58;
}
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"IBM Plex Mono",monospace; font-weight:400; }
body::before { content:""; position:fixed; z-index:9998; inset:7px; border:1px solid var(--ink); border-radius:15px; pointer-events:none; }
::selection { color:var(--white); background:var(--red); }
.site-frame { display:none; }
.page-progress { display:none; }

/* Loading */
.loader { color:var(--ink); background:var(--paper); animation:none; }
.loader::before { display:none; }
.loader__panel { width:min(520px,76vw); transform:none; }
.loader__meta { margin-bottom:10px; color:inherit; font-size:10px; letter-spacing:.08em; }
.loader__track { height:11px; padding:2px; border:1px solid var(--ink); border-radius:0; background:transparent; }
.loader__track i { background:var(--red); }

/* Header */
.header { position:fixed; z-index:400; top:15px; right:15px; left:15px; width:auto; height:64px; padding:0 22px; border:1px solid var(--ink); border-radius:10px; color:var(--ink); background:rgba(247,247,243,.9); box-shadow:none; backdrop-filter:blur(12px); mix-blend-mode:normal; }
.brand { width:280px; gap:11px; color:inherit; }
.brand__mark { display:grid; width:36px; height:36px; place-items:center; border:1px solid var(--ink); color:inherit; background:var(--white); font-size:11px; }
.brand__text { display:block; color:inherit; font-size:8px; line-height:1.25; letter-spacing:.07em; }
.header__nav { display:flex; height:auto; gap:32px; }
.header__nav a { display:block; height:auto; padding:0; color:inherit; font-size:9px; font-weight:500; letter-spacing:.06em; }
.header__nav a::after { background:var(--red); }
.header__tools { position:static; display:flex; width:280px; justify-content:flex-end; gap:13px; }
.clock { display:block; color:inherit; font-size:9px; }
.theme-toggle { display:inline-flex; border-color:var(--ink); }
.theme-toggle i { background:var(--ink); }
.menu-toggle { display:flex; width:38px; height:38px; border:0; border-radius:0; }
.menu-toggle span { width:22px; background:var(--ink); }
.drawer { color:var(--ink); background:var(--blue); }

/* Hero — kinetic type and dog physics share one full-screen stage. */
.hero { position:relative; height:100svh; min-height:680px; max-height:none; overflow:hidden; isolation:isolate; color:var(--ink); background:var(--white); }
.hero::before { display:none; }
.hero::after { content:"01 / OPENING SCENE"; display:block; position:absolute; z-index:2; top:auto; right:43px; bottom:45px; left:auto; width:auto; height:auto; padding:5px 8px; border:1px solid var(--ink); color:var(--ink); background:var(--paper); font-size:8px; letter-spacing:.1em; pointer-events:none; }
.hero .grid { display:none; }
.hero-editorial { position:absolute; z-index:0; top:79px; right:7px; bottom:7px; left:7px; display:grid; grid-template-columns:1.15fr .65fr 1.2fr 1fr; grid-template-rows:1.05fr .72fr .9fr; gap:0; overflow:hidden; border:2px solid var(--ink); background:var(--white); opacity:.88; pointer-events:none; }
.editorial-panel { position:relative; overflow:hidden; margin:0; padding:20px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); color:var(--ink); background:rgba(255,255,255,.9); }
.editorial-panel small { display:block; margin-bottom:12px; font-size:7px; letter-spacing:.12em; }
.editorial-panel h2 { margin:0 0 14px; font-family:"Noto Sans JP",sans-serif; font-size:clamp(20px,2vw,32px); line-height:1.25; letter-spacing:-.055em; }
.editorial-panel p { margin:0; font-family:"Noto Sans JP",sans-serif; font-size:clamp(10px,.86vw,13px); font-weight:500; line-height:1.58; text-align:justify; }
.editorial-panel p+p { margin-top:12px; padding-top:12px; border-top:1px solid rgba(23,24,22,.48); }
.editorial-panel--jp { grid-column:1/3; grid-row:1/2; }
.editorial-panel--en { grid-column:3/5; grid-row:1/2; }
.editorial-panel--en h2 { font-family:"IBM Plex Mono",monospace; font-size:clamp(27px,3vw,46px); font-weight:400; line-height:.88; }
.editorial-panel--en p { max-width:none; font-family:"IBM Plex Mono",monospace; font-size:clamp(9px,.76vw,12px); line-height:1.42; }
.editorial-panel--years { grid-column:4/5; grid-row:2/4; display:flex; flex-direction:column; justify-content:flex-start; gap:20px; }
.editorial-panel--years strong { display:block; font-size:clamp(56px,7vw,110px); font-weight:400; line-height:.75; letter-spacing:-.1em; }
.editorial-panel--years>span { font-size:clamp(20px,2.3vw,36px); line-height:.9; }
.editorial-panel--years ol { margin:0; padding:0; list-style:none; font-size:9px; line-height:1.7; }
.editorial-panel--years .years-copy { margin-top:auto; padding-top:16px; border-top:1px solid var(--ink); font-family:"IBM Plex Mono",monospace; font-size:10px; line-height:1.45; text-align:left; }
.editorial-panel--vertical { grid-column:1/2; grid-row:2/4; display:block; padding:16px; writing-mode:vertical-rl; transform:none; font-size:clamp(13px,1.05vw,17px); line-height:1.55; letter-spacing:.02em; }
.editorial-panel--type { grid-column:2/4; grid-row:2/3; padding:12px 18px; font-size:clamp(27px,3.65vw,57px); line-height:.76; letter-spacing:-.085em; word-spacing:-.14em; }
.editorial-panel--quote { grid-column:2/4; grid-row:3/4; display:flex; flex-direction:column; justify-content:flex-start; font-family:"Noto Sans JP",sans-serif; font-size:clamp(12px,1.08vw,17px); font-weight:700; line-height:1.55; }
.editorial-panel--quote p { margin-top:13px; padding-top:13px; border-top:1px solid var(--ink); font-family:"IBM Plex Mono",monospace; font-size:clamp(8px,.7vw,11px); font-weight:400; line-height:1.45; }
.editorial-panel--quote small { margin:16px 0 0; font-family:"IBM Plex Mono",monospace; font-weight:400; }
.editorial-panel--footer { position:absolute; z-index:5; right:4%; bottom:3%; left:16%; padding:13px 18px; border:4px solid var(--ink); background:var(--white); font-size:clamp(17px,2vw,31px); line-height:1; white-space:nowrap; transform:rotate(-2deg); }
.editorial-fill { position:absolute; z-index:3; overflow:hidden; color:var(--ink); background:rgba(255,255,255,.68); font-family:"IBM Plex Mono",monospace; font-size:clamp(8px,.68vw,11px); font-weight:500; line-height:1.45; text-align:justify; pointer-events:none; }
.editorial-fill--top-left { top:28%; left:1.4%; width:43%; height:12.5%; padding:12px 0; border-block:1px solid var(--ink); column-count:2; column-gap:22px; }
.editorial-fill--top-right { top:29%; right:1.4%; width:52%; height:11.5%; padding:12px 0; border-block:1px solid var(--ink); column-count:2; column-gap:22px; }
.editorial-fill--lower-center { top:76%; bottom:6%; left:29%; width:43.5%; padding:14px; border:1px solid var(--ink); background:rgba(255,255,255,.54); column-count:2; column-gap:24px; font-family:"Noto Sans JP",sans-serif; font-size:clamp(9px,.76vw,12px); line-height:1.55; }
.editorial-fill--lower-right { top:67%; right:1%; bottom:6%; width:25%; padding:15px; border:1px solid var(--ink); background:rgba(255,255,255,.58); font-size:clamp(9px,.76vw,12px); line-height:1.55; }
.editorial-fill--left-poster { top:51%; bottom:7%; left:1%; width:20%; padding:14px; border:2px solid var(--ink); background:rgba(255,255,255,.82); }
.editorial-fill--left-poster strong { display:block; font-size:clamp(42px,4.25vw,66px); font-weight:400; line-height:.72; letter-spacing:-.09em; }
.editorial-fill--left-poster p { margin:15px 0 0; padding-top:12px; border-top:1px solid var(--ink); font-family:"IBM Plex Mono",monospace; font-size:clamp(8px,.68vw,11px); line-height:1.45; text-align:left; }
.editorial-fill--left-poster p:last-child { font-family:"Noto Sans JP",sans-serif; font-weight:700; line-height:1.65; }
.editorial-fill--bottom-poster { right:1%; bottom:7%; left:29%; height:16%; padding:12px 18px; border:2px solid var(--ink); background:rgba(255,255,255,.86); }
.editorial-fill--bottom-poster strong { display:block; font-size:clamp(42px,4.7vw,74px); font-weight:400; line-height:.78; letter-spacing:-.08em; white-space:nowrap; }
.editorial-fill--bottom-poster span { display:block; margin-top:8px; font-size:clamp(14px,1.35vw,21px); line-height:1; white-space:nowrap; }
.editorial-fill--bottom-poster p { margin:10px 0 0; padding-top:9px; border-top:1px solid var(--ink); font-family:"IBM Plex Mono",monospace; font-size:clamp(7px,.6vw,10px); line-height:1.35; }
.organic-orbit,.hero__stamp,.hero__tag { display:none; }
.hero__copy { position:absolute!important; z-index:8; top:52%!important; left:2.1vw!important; right:auto!important; bottom:auto!important; width:95.8vw!important; color:var(--ink); text-align:left; transform:translateY(-50%)!important; pointer-events:none; }
.hero h1 { position:static; width:auto; margin:0; color:var(--ink); font-family:"IBM Plex Mono",monospace; font-size:clamp(96px,11.2vw,172px); font-weight:500; line-height:.79; letter-spacing:-.085em; }
.hero h1 .kinetic-line { display:block; margin:0!important; color:inherit; opacity:1; transform:none; animation:none; white-space:nowrap; }
.kinetic-line:nth-child(2) { color:var(--ink); -webkit-text-stroke:0; }
.kinetic-letter { position:relative!important; display:inline-block!important; min-width:.03em; margin:0!important; opacity:1!important; animation:none!important; transform:translate3d(var(--letter-x,0),var(--letter-y,0),0) rotate(var(--letter-r,0deg)) scale(var(--letter-s,1))!important; transform-origin:50% 60%; will-change:transform; }
.kinetic-letter[data-variant="dot"] { font-family:"DotGothic16",sans-serif; }
.kinetic-letter[data-variant="outline"] { color:transparent; -webkit-text-stroke:1.4px var(--ink); }
.kinetic-letter.is-hit { color:inherit; }
.kinetic-subtitle { width:45%; margin:4.5vh 0 0 auto; padding:22px 0; border-block:1px solid var(--ink); color:var(--ink); background:rgba(255,255,255,.72); font:700 clamp(24px,2.6vw,40px)/1.45 "Noto Sans JP",sans-serif; letter-spacing:-.05em; }
.mascot-playground { z-index:6; inset:80px 8px 8px; overflow:hidden; border:0; }
.floating-mascot { width:min(calc(var(--mascot-size,220px) * 1.18),430px); }
.scroll-cue { z-index:9; right:42px; bottom:42px; left:auto; color:var(--ink); transform:none; }
.scroll-cue i { background:var(--ink); }

.marquee { display:block; padding:12px 0 15px; border-block:1px solid var(--ink); color:var(--paper); background:var(--red); transform:none; }
.marquee div { font:400 clamp(28px,4.4vw,64px)/1 "IBM Plex Mono",monospace; letter-spacing:-.055em; }

/* Shared editorial sections */
.section { min-height:0; padding:125px clamp(30px,6vw,92px); color:var(--ink); background:var(--paper)!important; border-bottom:1px solid var(--ink); }
.section-heading { display:grid; grid-template-columns:150px minmax(0,1fr) 155px; gap:28px; align-items:start; margin-bottom:76px; }
.section-heading>p { grid-column:auto; grid-row:auto; margin:8px 0 0; color:inherit; font-size:9px; letter-spacing:.05em; }
.section-heading h2 { grid-column:auto; grid-row:auto; margin:0; font-family:"IBM Plex Mono",monospace; font-size:clamp(58px,7.7vw,116px); font-weight:400; line-height:.82; letter-spacing:-.075em; }
.section-heading>span { display:block; width:auto; height:auto; padding:0; color:var(--ink); background:transparent; border-radius:0; text-align:right; }
.barcode { overflow:hidden; font-family:"Libre Barcode 128",sans-serif; font-size:46px; line-height:1; white-space:nowrap; }

/* About */
.about { display:block; }
.about::after { display:none; }
.about__content { display:grid; grid-template-columns:1.08fr .92fr; gap:9vw; padding:48px 0; border-block:1px solid var(--ink); }
.about__lead { font:700 clamp(28px,3.6vw,52px)/1.4 "Noto Sans JP",sans-serif; letter-spacing:-.05em; }
.about__content>p:last-child { max-width:620px; font:400 14px/2.1 "Noto Sans JP",sans-serif; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:76px; border:0; }
.principles article,.principles article:nth-child(2),.principles article:nth-child(3) { position:relative; min-height:330px; padding:49px 22px 24px; border:1px solid var(--ink); border-radius:8px; color:var(--ink); background:var(--white); }
.principles article::before { content:"FLUXFRAME / PRINCIPLE"; position:absolute; top:0; right:0; left:0; height:31px; padding:9px 10px 0; border-bottom:1px solid var(--ink); font-size:7px; letter-spacing:.08em; }
.principles article::after { content:"●"; position:absolute; top:8px; right:10px; color:var(--red); font-size:8px; }
.principles article:hover { color:var(--ink); background:var(--peach); transform:translateY(-6px); }
.principles article>span { font-size:10px; }
.principles article h3 { margin-top:105px; font-size:clamp(28px,3vw,43px); font-weight:400; letter-spacing:-.05em; }
.principles article p { margin-top:18px; font:500 12px/1.8 "Noto Sans JP",sans-serif; }

/* Work archive */
.works { color:var(--ink); background:var(--blue)!important; }
.works-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; background:transparent; border:0; }
.work-card,.work-card--wide { grid-column:auto; padding:8px; border:1px solid var(--ink); border-radius:9px; background:var(--paper); }
.work-card--wide { grid-column:span 2; }
.work-card:hover { transform:translateY(-6px); }
.work-visual { min-height:500px; border:1px solid var(--ink); border-radius:4px; filter:saturate(.66); }
.visual--zero { background:#a9bdc8; } .visual--echo { background:#c97361; } .visual--phase { background:#dec8bc; } .visual--portal { background:#20211f; }
.work-meta { padding:18px 6px 8px; border:0; color:var(--ink); background:transparent; }
.work-meta h3 { font-size:clamp(24px,2.4vw,35px); font-weight:400; }

/* Services */
.services { color:var(--ink); background:var(--white)!important; }
.services .section-heading>p,.services .section-heading h2 { color:inherit; }
.service-list { border-top:1px solid var(--ink); }
.service-list article { grid-template-columns:70px minmax(300px,1fr) 1fr 55px; min-height:128px; padding:0 10px; border-bottom:1px solid var(--ink); color:var(--ink); }
.service-list article:hover { padding:0 24px; color:var(--ink); background:var(--peach); }
.service-list article h3 { font-size:clamp(24px,2.8vw,42px); font-weight:400; letter-spacing:-.045em; }
.service-list article p { color:var(--muted); font-family:"Noto Sans JP",sans-serif; }

/* Manifesto */
.statement { min-height:100svh; color:var(--paper); background:var(--ink); }
.statement::before { content:""; position:absolute; inset:18px; border:1px solid rgba(247,247,243,.5); border-radius:9px; pointer-events:none; }
.statement h2 { font-family:"IBM Plex Mono",monospace; font-size:clamp(76px,12.5vw,186px); font-weight:400; line-height:.79; letter-spacing:-.08em; }
.statement h2 em { color:var(--peach); }
.statement__object i { background:var(--red); }

/* Studio */
.studio { background:var(--paper)!important; }
.studio__grid { grid-template-columns:1.12fr .88fr; gap:0; border:1px solid var(--ink); border-radius:9px; overflow:hidden; }
.studio__map,.studio__info { min-height:570px; border:0; border-radius:0; }
.studio__map { color:var(--ink); background:var(--blue); }
.studio__info { padding:60px; border-left:1px solid var(--ink); color:var(--ink); background:var(--white); }
.studio__info h3 { font-size:32px; font-weight:400; }
.studio__info p { color:var(--muted); }
.studio__info a { border-radius:4px; color:var(--white); background:var(--ink); }
.recruit-banner { min-height:132px; margin-top:18px; border:1px solid var(--ink); border-radius:9px; color:var(--ink); background:var(--peach); }
.recruit-banner:hover { color:var(--paper); background:var(--red); }

/* Contact + footer */
.contact { position:relative; min-height:92svh; padding:120px 6vw; overflow:hidden; border-bottom:1px solid var(--ink); color:var(--ink); background:var(--paper); }
.contact::before { content:""; position:absolute; top:44px; right:5vw; width:29vw; aspect-ratio:1; border:1px solid var(--ink); border-radius:50%; background:var(--red); opacity:.9; }
.contact h2 { position:relative; font-family:"IBM Plex Mono",monospace; font-size:clamp(84px,13.5vw,200px); font-weight:400; line-height:.76; letter-spacing:-.09em; }
.contact>a { position:relative; max-width:none; border-radius:0; border-color:var(--ink); }
.contact>a:hover { color:var(--paper); background:var(--ink); }
.contact small { position:relative; font-family:"Noto Sans JP",sans-serif; }
.footer { min-height:310px; padding:56px 6vw; border-top:0; color:var(--ink); background:var(--white); }
.footer__logo { color:var(--ink); font-size:50px; font-weight:400; }
.footer a { color:inherit; }

@media(max-width:760px) {
  body::before { inset:4px; border-radius:11px; }
  .header { top:10px; right:10px; left:10px; height:56px; padding:0 13px; border-radius:8px; }
  .brand { width:auto; } .brand__mark { width:32px; height:32px; }
  .brand__text,.header__nav,.clock,.theme-toggle { display:none; }
  .header__tools { width:auto; margin-left:auto; }
  .menu-toggle { width:34px; height:34px; }
  .hero { height:100svh; min-height:660px; background:var(--white); }
  .hero::before { top:24%; right:auto; bottom:auto; left:50%; width:76vw; height:76vw; }
  .hero::after { right:22px; bottom:22px; }
  .hero .grid { inset:0; background-size:26px 26px; mask-image:none; }
  .hero-editorial { top:65px; opacity:.72; grid-template-columns:1fr 1fr; grid-template-rows:1fr .78fr 1fr; }
  .editorial-panel { padding:12px; }
  .editorial-panel--jp { grid-column:1/3; grid-row:1; }
  .editorial-panel--jp p { max-height:82px; overflow:hidden; }
  .editorial-panel--en { grid-column:1/2; grid-row:2/4; }
  .editorial-panel--en h2 { font-size:25px; }
  .editorial-panel--en p { font-size:7px; }
  .editorial-panel--years { grid-column:2/3; grid-row:2/3; }
  .editorial-panel--years strong { font-size:44px; }
  .editorial-panel--vertical { display:none; }
  .editorial-panel--type { grid-column:2/3; grid-row:3/4; font-size:19px; line-height:.84; }
  .editorial-panel--quote,.editorial-panel--footer { display:none; }
  .editorial-fill { display:none; }
  .hero__copy { top:45%!important; left:16px!important; width:calc(100vw - 32px)!important; transform:translateY(-50%)!important; }
  .hero .eyebrow { margin-bottom:18px; font-size:7px; }
  .hero h1 { font-size:clamp(50px,15.2vw,69px); line-height:.83; }
  .hero h1 .kinetic-line { white-space:nowrap; }
  .kinetic-subtitle { width:78%; margin-top:28px; padding:12px 0; font-size:16px; }
  .mascot-playground { inset:64px 4px 4px; }
  .floating-mascot { width:min(calc(var(--mascot-size,150px) * .84),53vw); }
  .scroll-cue { display:none; }
  .marquee { padding:10px 0 12px; }
  .section { padding:88px 22px; }
  .section-heading { grid-template-columns:1fr; gap:22px; margin-bottom:54px; }
  .section-heading h2 { font-size:15.2vw; }
  .section-heading>span { display:none; }
  .about__content { grid-template-columns:1fr; gap:30px; }
  .principles { grid-template-columns:1fr; }
  .principles article,.principles article:nth-child(2),.principles article:nth-child(3) { min-height:270px; }
  .principles article h3 { margin-top:70px; }
  .works-grid { grid-template-columns:1fr; }
  .work-card--wide { grid-column:auto; }
  .work-visual { min-height:370px; }
  .service-list article { grid-template-columns:38px 1fr 40px; padding:25px 4px; }
  .service-list article p { grid-column:2; }
  .statement { min-height:78svh; }
  .studio__grid { grid-template-columns:1fr; }
  .studio__map,.studio__info { min-height:470px; }
  .studio__info { padding:38px 25px; border-top:1px solid var(--ink); border-left:0; }
  .recruit-banner { min-height:185px; padding:25px; }
  .contact { min-height:80svh; padding:100px 22px; }
  .contact::before { top:50px; right:-15vw; width:62vw; }
  .contact h2 { font-size:20vw; }
  .footer { padding:50px 22px; }
}

@media(prefers-reduced-motion:reduce) { .hero::before { animation:none; } }

@keyframes hero-diamond { to { transform:translateX(-50%) rotate(405deg); } }