:root { --electric:#1646ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
#works,#about { scroll-margin-top:50px; }
body { margin:0; background:#fff; font-family:Arial,"Helvetica Neue","Noto Sans JP",sans-serif; font-size:14px; }
main { --paper:#fff; --ink:#070708; --muted:#686b72; --line:#bfc2c9; --accent:var(--electric); min-height:100vh; background:var(--paper); color:var(--ink); font-family:Arial,"Helvetica Neue","Noto Sans JP",sans-serif; transition:background-color .28s ease,color .28s ease; }
main[data-theme="black"] { --paper:#050506; --ink:#f5f6f8; --muted:#8c909a; --line:#34363e; --accent:#315cff; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.site-header { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; height:50px; padding:0 16px; border-bottom:1px solid var(--ink); background:color-mix(in srgb,var(--paper) 90%,transparent); backdrop-filter:blur(12px); }
.wordmark { display:flex; align-items:center; }
.wordmark img { display:block; width:auto; height:15px; transition:filter .28s ease; }
main[data-theme="black"] .wordmark img { filter:invert(1); }
.site-header nav { display:flex; gap:20px; align-items:center; }
.site-header nav a:hover { text-decoration:underline; text-underline-offset:3px; }
.theme-switch { display:flex; border:1px solid var(--ink); }
.theme-switch button { width:27px; height:25px; padding:0; border:0; background:transparent; color:var(--ink); cursor:pointer; font:10px ui-monospace,monospace; }
.theme-switch button + button { border-left:1px solid var(--ink); }
.theme-switch button.active { background:var(--accent); color:#fff; }
.hero { position:relative; width:100%; height:calc(100svh - 50px); min-height:620px; overflow:hidden; background:var(--paper); }
.hero-layer { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center top; pointer-events:none; }
.hero-layer { z-index:1; transition:transform .48s cubic-bezier(.2,.75,.2,1),filter .22s ease; }
.hero[data-active-layer="works"] .hero-layer-works { transform:scale(1.012); transform-origin:center 43%; filter:brightness(1.025) contrast(1.055); }
.hero[data-active-layer="about"] .hero-layer-about { transform:scale(1.016); transform-origin:center 70%; filter:brightness(1.025) contrast(1.06); }
.hero[data-active-layer="works"],.hero[data-active-layer="about"] { cursor:pointer; }
.hero-access-links { position:absolute; z-index:3; right:16px; bottom:14px; display:flex; gap:5px; }
.hero-access-links button { padding:4px 6px; border:1px solid var(--ink); background:color-mix(in srgb,var(--paper) 85%,transparent); color:var(--ink); font:9px ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; opacity:.3; cursor:pointer; transition:opacity .18s ease,background .18s ease; }
.hero-access-links button:hover,.hero-access-links button:focus-visible { opacity:1; background:var(--paper); }
.update-line { display:grid; grid-template-columns:110px 120px 1fr; gap:12px; padding:9px 16px; border-top:1px solid var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; text-transform:uppercase; }
.update-work::before { content:"■"; color:var(--accent); margin-right:7px; }
.filter-bar { position:sticky; top:50px; z-index:15; display:flex; flex-wrap:wrap; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); background:var(--paper); }
.filter-bar button { border:0; border-right:1px solid var(--ink); background:transparent; color:var(--ink); padding:10px 16px; cursor:pointer; font-size:12px; }
.filter-bar button:hover { background:color-mix(in srgb,var(--accent) 12%,var(--paper)); color:var(--accent); }
.filter-bar button.active { background:var(--accent); color:#fff; }
.filter-bar sup { margin-left:5px; font-size:8px; vertical-align:top; }
.work-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); }
.work-card { grid-column:span 4; min-width:0; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); background:var(--paper); }
.work-card.size-large { grid-column:span 6; }
.media { position:relative; overflow:hidden; aspect-ratio:16/10; background:color-mix(in srgb,var(--ink) 7%,var(--paper)); }
.media img { width:100%; height:100%; display:block; object-fit:cover; transition:opacity .25s ease,transform .55s cubic-bezier(.2,.75,.2,1); }
.work-card.image-top .media img { object-position:center top; }
.media .hover-image { position:absolute; inset:0; opacity:0; }
.work-card:hover .media>img:first-child { transform:scale(1.018); }
.work-card:hover .hover-image { opacity:1; transform:scale(1.018); }
.card-index { position:absolute; top:8px; left:8px; z-index:2; padding:3px 5px; background:var(--paper); color:var(--accent); border:1px solid var(--accent); font:10px ui-monospace,monospace; }
.meta { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto; gap:12px; min-height:58px; padding:9px 10px 12px; align-items:start; }
.meta h2,.meta p { margin:0; font-size:11px; line-height:1.35; font-weight:400; }
.meta h2 { font-weight:600; }
.meta-end { color:var(--muted); text-align:right; }
footer { min-height:70vh; padding:90px 16px 16px; display:grid; grid-template-columns:minmax(180px,.8fr) minmax(440px,2fr) minmax(140px,.6fr); gap:36px; align-content:start; border-top:1px solid var(--ink); }
.footer-heading { display:grid; align-content:start; gap:18px; }
.footer-heading p { margin:0; line-height:1.5; }
.footer-lead { margin:0; font-weight:700; }
footer>p { margin:0; line-height:1.6; }
.profile-identities { display:grid;grid-template-columns:minmax(240px,.7fr) minmax(420px,1.3fr);gap:48px; }
.profile-identity { display:grid; grid-template-columns:82px 1fr; gap:13px; align-items:start; }
.profile-portrait { position:relative; width:82px; height:82px; padding:0; overflow:hidden; border:0; background:transparent; cursor:pointer; }
.profile-portrait img { display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .35s cubic-bezier(.2,.75,.2,1); }
.profile-portrait:hover img { transform:scale(1.025); }
.profile-identity h3 { margin:1px 0 8px; font-size:12px; font-weight:600; }
.profile-identity p { margin:0; color:var(--muted); font-size:10px; line-height:1.55; }
.profile-bio { max-width:850px; }
.profile-bio>p { margin:0 0 22px;font-size:14px;line-height:1.85; }
.profile-bio .recognition { margin-top:38px; }
.profile-more[hidden]{display:none!important}.profile-more p{margin-top:0}.profile-more-toggle{margin:0;padding:3px 0;border:0;background:transparent!important;color:var(--muted)!important;font:9px ui-monospace,SFMono-Regular,Menlo,monospace!important;letter-spacing:.06em;text-transform:uppercase;opacity:.62;cursor:pointer}.profile-more-toggle:hover{opacity:1}.profile-more-toggle[aria-expanded="true"]{margin-top:4px}
.playground-links{display:flex;align-items:center;justify-content:flex-start;gap:22px;min-height:88px;padding:18px 16px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--paper);color:var(--ink)}.playground-links>a{display:flex;align-items:center;justify-content:center;width:124px;height:46px;padding:8px;opacity:.52;transition:opacity .18s ease,transform .25s ease}.playground-links>a:hover{opacity:1;transform:translateY(-1px)}.playground-logo{display:flex;align-items:center;justify-content:center;width:108px;height:30px;line-height:0}.playground-logo img{display:block;width:auto;height:auto;max-width:108px;max-height:30px;object-fit:contain;object-position:center;filter:none}.playground-links>a:first-child .playground-logo img{transform:translateY(0px)}.monya-site[data-theme="black"] .playground-logo img{filter:invert(1) grayscale(1) brightness(2)}
@media(max-width:600px){.playground-links{gap:5px;min-height:72px;padding:12px 7px;justify-content:space-between}.playground-links>a{width:31%;height:42px;padding:6px}.playground-logo{width:100%;max-width:90px;height:26px}}
.footer-links { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.footer-links a:hover { text-decoration:underline; text-underline-offset:3px; }
.copyright { grid-column:1/-1; margin-top:220px; padding-top:10px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.detail-page { --paper:#fff;--ink:#070708;--muted:#686b72;min-height:100vh;background:var(--paper);color:var(--ink); }
.detail-header { position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;height:50px;padding:0 16px;border-bottom:1px solid var(--ink);background:rgba(255,255,255,.92);backdrop-filter:blur(12px); }
.detail-header nav { display:flex;gap:20px;align-items:center; }
.work-detail { padding-bottom:30px; }
.detail-index { padding:12px 16px;border-bottom:1px solid var(--ink);font:10px ui-monospace,SFMono-Regular,Menlo,monospace; }
.detail-title { display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);padding:28px 16px 24px;border-bottom:1px solid var(--ink);align-items:end;gap:30px; }
.detail-title h1 { max-width:none;margin:0;font-size:clamp(38px,6vw,104px);line-height:.94;font-weight:500;letter-spacing:-.055em;word-break:auto-phrase;overflow-wrap:normal;text-wrap:balance; }
.detail-title.title-long h1 { font-size:clamp(36px,4.5vw,82px); }
.detail-title.title-xlong h1 { font-size:clamp(32px,3vw,62px);letter-spacing:-.04em; }
.detail-title.title-xxlong h1 { font-size:clamp(28px,2.35vw,50px);letter-spacing:-.03em; }
.detail-title div { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.detail-title p { margin:0;font-size:11px; }
.detail-hero { display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--ink);background:#eee; }
.detail-hero:has(img+img) { grid-template-columns:1fr 1fr; }
.detail-hero img { display:block;width:100%;height:min(72vw,840px);object-fit:cover; }
.detail-hero img+img { border-left:1px solid var(--ink); }
.detail-description { display:grid;grid-template-columns:1fr 2fr;gap:30px;padding:70px 16px;border-bottom:1px solid var(--ink); }
.detail-description span,.detail-section-label { font:10px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase; }
.detail-description p { max-width:760px;margin:0;font-size:18px;line-height:1.7; }
.detail-source { padding:70px 16px;border-bottom:1px solid var(--ink); }
.detail-section-label { display:flex;justify-content:space-between;margin-bottom:18px; }
.embed-frame { position:relative;width:100%;min-height:240px;background:#f2f2f2; }
.embed-frame iframe { display:block;width:100%;height:min(72vw,760px);border:0; }
.embed-video { aspect-ratio:16/9;min-height:0; }
.embed-video iframe { height:100%; }
.embed-x { display:grid;place-items:center;padding:30px; }
.embed-x .twitter-tweet { width:100%!important;max-width:550px!important; }
.embed-fallback { position:absolute;right:10px;bottom:10px;padding:6px 8px;background:#fff;border:1px solid #111;font:10px ui-monospace,monospace; }
.detail-pagination { display:grid;grid-template-columns:1fr auto 1fr;gap:20px;padding:18px 16px;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase; }
.detail-pagination a:last-child { text-align:right; }
@media (max-width:900px) { .work-card,.work-card.size-large{grid-column:span 6}.meta{grid-template-columns:1fr auto}.meta>p:not(.meta-end){display:none}footer{grid-template-columns:1fr 2fr}.footer-links{grid-column:1}.profile-identities{grid-row:1/3;grid-column:2;grid-template-columns:1fr}.copyright{grid-column:1/-1} }
@media (max-width:600px) { body{font-size:13px}.site-header{padding:0 10px}.site-header nav{gap:10px}.site-header nav>a:nth-child(2){display:none}.wordmark img{height:13px}.hero{height:calc(100svh - 50px);min-height:560px}.hero-layer{object-position:50% top}.hero-access-links{right:10px;bottom:10px}.hero-access-links button{opacity:.58}.update-line{grid-template-columns:90px 1fr;padding-inline:10px}.update-work{grid-column:1/-1}.filter-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.filter-bar::-webkit-scrollbar{display:none}.filter-bar button{white-space:nowrap;padding-inline:12px}.work-card,.work-card.size-large{grid-column:span 12}.media{aspect-ratio:16/10}footer{grid-template-columns:1fr;padding-inline:10px;min-height:80vh;gap:36px}.profile-identities{grid-row:auto;grid-column:auto;grid-template-columns:1fr;gap:12px}.profile-identity{grid-template-columns:58px 1fr;gap:9px}.profile-portrait{width:58px;height:58px}.footer-links{grid-column:auto}.copyright{grid-column:1;margin-top:120px} }
@media (max-width:600px) { .detail-header{padding:0 10px}.detail-header nav{gap:10px}.detail-header nav a:nth-child(2){display:none}.detail-title{grid-template-columns:1fr;min-height:260px;padding-inline:10px}.detail-title h1{font-size:42px}.detail-title.title-long h1{font-size:36px}.detail-title.title-xlong h1{font-size:31px}.detail-title.title-xxlong h1{font-size:27px}.detail-title div{grid-template-columns:1fr 1fr}.detail-hero:has(img+img){grid-template-columns:1fr}.detail-hero img{height:70vw}.detail-hero img+img{border-left:0;border-top:1px solid var(--ink)}.detail-description{grid-template-columns:1fr;padding:45px 10px}.detail-description p{font-size:15px}.detail-source{padding:45px 10px}.embed-frame iframe{height:72vw}.detail-pagination{padding-inline:10px} }
@media (pointer:fine) {
  .monya-site:not(.detail-page):not(.contact-page), .monya-site:not(.detail-page):not(.contact-page) a, .monya-site:not(.detail-page):not(.contact-page) button { cursor:none; }
  .custom-cursor { position:fixed; z-index:1000; top:-18px; left:-18px; width:36px; height:36px; pointer-events:none; opacity:0; will-change:transform; transition:opacity .12s ease; }
  .custom-cursor.visible { opacity:1; }
  .custom-cursor img { display:block; width:100%; height:100%; transition:transform .15s ease,filter .2s ease; }
  .custom-cursor span { position:absolute; left:42px; top:9px; width:max-content; color:var(--ink); font:10px ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; }
  .custom-cursor.interactive img { transform:scale(1.32) rotate(-8deg); }
  main[data-theme="black"] .custom-cursor img { filter:grayscale(1) contrast(520%) brightness(150%); }
}
@media (pointer:coarse) { .custom-cursor { display:none; } }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.media img{transition:none} }

.recognition { display:flex;flex-wrap:wrap;gap:0;margin-top:65px;border-top:1px solid var(--ink);border-left:1px solid var(--ink); }
.recognition span { padding:11px 14px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);font:10px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase; }
@media(max-width:600px){.profile-bio>p{font-size:13px}.recognition{margin-top:32px}}

/* WordPress/JIN isolation */
html body.monya-portfolio-page{margin:0!important;padding:0!important;background:#fff!important;color:#070708!important}
body.monya-portfolio-page .monya-site{background:var(--paper)!important;color:var(--ink)!important;font-family:Arial,"Helvetica Neue","Noto Sans JP",sans-serif!important;font-style:normal!important}
body.monya-portfolio-page .monya-site *:not(em){font-family:Arial,"Helvetica Neue","Noto Sans JP",sans-serif!important}
body.monya-portfolio-page .monya-site .update-line,body.monya-portfolio-page .monya-site .update-line *,body.monya-portfolio-page .monya-site .card-index,body.monya-portfolio-page .monya-site .theme-switch button,body.monya-portfolio-page .monya-site .detail-index,body.monya-portfolio-page .monya-site .detail-section-label,body.monya-portfolio-page .monya-site .detail-pagination,body.monya-portfolio-page .monya-site .recognition span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important}
body.monya-portfolio-page .monya-site .site-header,body.monya-portfolio-page .monya-site .filter-bar,body.monya-portfolio-page .monya-site .work-card,body.monya-portfolio-page .monya-site .playground-links,body.monya-portfolio-page .monya-site footer{background:var(--paper)!important;color:var(--ink)!important}
body.monya-portfolio-page .monya-site .meta,body.monya-portfolio-page .monya-site .meta h2,body.monya-portfolio-page .monya-site .meta p,body.monya-portfolio-page .monya-site .footer-heading,body.monya-portfolio-page .monya-site .profile-identities,body.monya-portfolio-page .monya-site .profile-bio{background:transparent!important;color:var(--ink)!important}
body.monya-portfolio-page .monya-site .meta-end,body.monya-portfolio-page .monya-site .profile-identity p{color:var(--muted)!important}
body.monya-portfolio-page .monya-site a{color:inherit!important;text-decoration:none!important}
body.monya-portfolio-page .monya-site .filter-bar button{color:var(--ink)!important;background:transparent!important}
body.monya-portfolio-page .monya-site .filter-bar button.active,body.monya-portfolio-page .monya-site .theme-switch button.active{color:#fff!important;background:var(--accent)!important}

/* Contact template */
.contact-page{--paper:#fff;--ink:#070708;--muted:#686b72;--accent:#1646ff;min-height:100vh;background:var(--paper)!important;color:var(--ink)!important;cursor:auto!important}.contact-page *{cursor:auto!important}.contact-page a,.contact-page button,.contact-page input[type="submit"],.contact-page input[type="file"]::file-selector-button{cursor:pointer!important}.contact-page input[type="text"],.contact-page input[type="email"],.contact-page textarea{cursor:text!important}.contact-intro{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:150px!important;min-height:0!important;margin:0!important;padding:20px 16px!important;border-bottom:1px solid var(--ink);}.contact-intro>p,.contact-intro h1{display:none!important}.contact-intro>div{display:grid!important;grid-template-columns:48px auto!important;gap:12px!important;align-items:center!important;margin:0!important}.contact-intro img{display:block!important;width:48px!important;height:48px!important;object-fit:cover}.contact-intro>div p{margin:0!important;color:var(--muted);font-size:10px;line-height:1.5}
.contact-form-shell{width:min(1104px,calc(100% - 32px));margin:0 auto;padding:48px 0 70px}.contact-form-shell .wpcf7{width:100%!important;margin:0!important;padding:0!important;background:transparent!important}.contact-form-shell .wpcf7-form>p{display:block!important;width:100%!important;min-height:78px;margin:0!important;padding:18px 0!important;border-bottom:1px solid var(--ink);color:var(--ink)!important;font:10px ui-monospace,SFMono-Regular,Menlo,monospace!important;text-transform:uppercase}.contact-form-shell .wpcf7-form>p>label{display:block!important;width:100%!important;margin:0!important}.contact-form-shell .wpcf7-form-control-wrap{display:block!important;width:100%!important;margin-top:9px!important}.contact-form-shell input:not([type="submit"]),.contact-form-shell textarea{box-sizing:border-box!important;display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:8px 2px!important;border:0!important;border-bottom:1px solid #c8cad0!important;border-radius:0!important;outline:0;background:transparent!important;color:var(--ink)!important;font:16px Arial,"Helvetica Neue","Noto Sans JP",sans-serif!important;line-height:1.5!important;text-transform:none}.contact-form-shell textarea{min-height:240px!important;resize:vertical}.contact-form-shell input:focus,.contact-form-shell textarea:focus{border-color:var(--accent)!important}.contact-form-shell input[type="file"]{padding:8px 0 12px!important;border-bottom:0!important;font-size:11px!important}.contact-form-shell input::file-selector-button{margin-right:12px;padding:8px 11px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:10px ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer}.contact-form-shell input[type="submit"]{display:block;min-width:180px;margin:24px 0 0 auto!important;padding:13px 16px!important;border:1px solid var(--ink)!important;border-radius:0!important;background:var(--ink)!important;color:var(--paper)!important;font:12px Arial,"Helvetica Neue","Noto Sans JP",sans-serif!important;cursor:pointer}.contact-form-shell input[type="submit"]:hover{background:var(--accent)!important;border-color:var(--accent)!important}.contact-form-shell .wpcf7-not-valid-tip{display:block!important;width:100%!important;margin-top:6px!important;color:#e22!important;font-size:11px!important;line-height:1.45!important;text-transform:none!important}.contact-form-shell .wpcf7-response-output{margin:20px 0!important;padding:10px!important;border:1px solid var(--ink)!important;font-size:11px}.contact-form-shell .wpcf7-spinner{margin-top:30px}.contact-form-shell .cf-turnstile,.contact-form-shell [class*="turnstile"]{display:block!important;width:100%!important;margin:8px 0 18px}.contact-footer{display:flex!important;justify-content:space-between!important;min-height:230px!important;padding:24px 16px!important;border-top:1px solid var(--ink)!important;font:10px ui-monospace,SFMono-Regular,Menlo,monospace!important;text-transform:uppercase}.contact-footer p{margin:0}
@media(max-width:700px){.contact-intro{height:136px!important;padding:18px 10px!important}.contact-intro>div{grid-template-columns:44px minmax(0,1fr)!important;gap:10px!important}.contact-intro img{width:44px!important;height:44px!important}.contact-form-shell{width:calc(100% - 20px);padding-top:28px}.contact-form-shell .wpcf7-form>p{padding:16px 0!important}.contact-form-shell textarea{min-height:210px!important}.contact-footer{padding-inline:10px!important}}