:root { --black:#070707; --panel:#101010; --paper:#f4f0e9; --muted:#817e77; --orange:#ff4f1f; --red:#d51e31; --line:rgba(244,240,233,.19); --shell:min(1440px,calc(100% - 72px)); --sans:"IBM Plex Sans JP",Arial,sans-serif; --mono:"DM Mono",monospace; --serif:"Shippori Mincho",serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--black); } body { margin:0; overflow-x:hidden; color:var(--paper); background:var(--black); font-family:var(--sans); -webkit-font-smoothing:antialiased; } body::selection { color:var(--black); background:var(--orange); } a { color:inherit; text-decoration:none; } button { font:inherit; }

.page-loader { position:fixed; inset:0; z-index:1000; display:grid; place-content:center; gap:18px; background:var(--black); transition:opacity .6s ease,visibility .6s ease; } .page-loader::before { position:absolute; inset:0; opacity:.2; background-image:linear-gradient(rgba(255,79,31,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,79,31,.4) 1px,transparent 1px); background-size:12vw 12vw; content:""; } .loader-mark,.loader-line,.loader-meta { position:relative; z-index:1; }.loader-mark { font:800 28px/1 var(--sans); letter-spacing:-.08em; }.loader-mark span { color:var(--orange); }.loader-line { width:min(290px,70vw); height:2px; overflow:hidden; background:rgba(244,240,233,.2); }.loader-line i { display:block; width:100%; height:100%; background:var(--orange); transform:translateX(-100%); animation:loader-fill 1.2s cubic-bezier(.65,0,.35,1) forwards; }.loader-meta { color:var(--orange); font:9px/1 var(--mono); letter-spacing:.14em; } body.is-loaded .page-loader { opacity:0; visibility:hidden; pointer-events:none; }
.skip-link { position:fixed; z-index:100; top:12px; left:12px; padding:8px 12px; color:var(--black); background:var(--orange); transform:translateY(-160%); }.skip-link:focus { transform:translateY(0); }

.site-header { position:fixed; z-index:20; top:0; right:0; left:0; display:flex; align-items:center; justify-content:space-between; width:var(--shell); margin:auto; padding:18px 0; border-bottom:1px solid var(--line); }.brand-lockup { display:flex; align-items:baseline; gap:12px; }.brand-lockup strong { color:var(--orange); font:800 17px/1 var(--sans); letter-spacing:-.08em; }.brand-lockup .wordmark { color:var(--paper); font:700 17px/1 var(--sans); letter-spacing:-.08em; }.brand-lockup .wordmark span { color:var(--orange); }.brand-lockup > span { color:var(--paper); font:500 8px/1 var(--mono); letter-spacing:.12em; }.site-nav { display:flex; gap:24px; }.site-nav a { font:9px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }.site-nav a::before { margin-right:5px; color:var(--orange); content:"/"; opacity:0; }.site-nav a:hover::before { opacity:1; }.menu-toggle,.site-nav-mobile { display:none; }

.hero { position:relative; display:grid; grid-template-columns:1.05fr .9fr; min-height:100svh; overflow:hidden; padding:94px max(36px,calc((100vw - 1440px)/2)) 35px; background:var(--black); }.hero::after { position:absolute; inset:0; opacity:.16; background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,79,31,.2) 6px); pointer-events:none; content:""; }.hero-noise { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(255,79,31,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,79,31,.35) 1px,transparent 1px); background-size:10vw 10vw; mask-image:linear-gradient(90deg,black,transparent 92%); }.hero-side { position:absolute; z-index:2; top:47%; left:14px; color:var(--muted); font:10px/1.2 var(--mono); writing-mode:vertical-rl; }.hero-side span { color:var(--orange); }.hero-word { position:absolute; z-index:0; bottom:-.12em; left:1vw; color:var(--orange); font:900 clamp(230px,42vw,700px)/.67 var(--sans); letter-spacing:-.18em; }.hero-copy { position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center; padding-top:7vh; }.hero-kicker { margin:0 0 30px; color:var(--muted); font:9px/1.6 var(--mono); letter-spacing:.1em; }.hero h1 { max-width:780px; margin:0; color:var(--paper); font:500 clamp(42px,5.2vw,78px)/1.12 var(--serif); letter-spacing:-.12em; }.hero h1 em { color:var(--orange); font-style:normal; }.hero-description { margin:28px 0 0; padding-left:14px; border-left:2px solid var(--orange); font-size:14px; line-height:1.9; }.text-link { display:inline-flex; gap:16px; align-items:center; width:max-content; margin-top:34px; padding-bottom:9px; border-bottom:1px solid var(--orange); color:var(--orange); font:10px/1 var(--mono); letter-spacing:.1em; }.text-link span { font-size:18px; }.hero-character { position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:center; min-height:calc(100svh - 129px); }.hero-character::before { position:absolute; inset:11% 4% 9% 7%; border:1px solid var(--line); border-radius:50%; box-shadow:0 0 90px rgba(255,79,31,.16); content:""; }.hero-character::after { position:absolute; top:14%; right:4%; width:55%; height:1px; background:var(--orange); content:""; transform:rotate(-14deg); transform-origin:right; }.hero-character img { position:relative; z-index:1; width:min(100%,700px); max-height:88%; object-fit:contain; filter:drop-shadow(0 28px 35px rgba(0,0,0,.75)); animation:float 6s ease-in-out infinite; }.character-coordinate { position:absolute; z-index:3; right:1%; bottom:12%; color:var(--muted); font:8px/1 var(--mono); letter-spacing:.1em; transform:rotate(90deg); transform-origin:right; }.hero-mark { position:absolute; z-index:4; color:var(--orange); font:28px/1 var(--mono); }.hero-mark-a { top:34%; right:3%; }.hero-mark-b { bottom:14%; left:42%; }.hero::before { position:absolute; right:0; bottom:0; width:1px; height:42%; background:var(--orange); content:""; opacity:.7; }

.chapter { position:relative; display:grid; grid-template-columns:150px 1fr; gap:30px; min-height:100svh; padding:130px max(36px,calc((100vw - 1440px)/2)) 100px; overflow:hidden; background:var(--panel); }.chapter-number { position:absolute; top:48px; left:max(36px,calc((100vw - 1440px)/2)); color:var(--paper); font:900 clamp(150px,23vw,340px)/.7 var(--sans); letter-spacing:-.16em; opacity:.13; }.chapter-label { position:relative; z-index:1; grid-column:1/-1; color:var(--muted); font:9px/1 var(--mono); letter-spacing:.14em; }.profile-copy { position:relative; z-index:1; align-self:center; max-width:700px; padding-left:8%; }.section-label { margin:0 0 20px; color:var(--orange); font:500 10px/1 var(--mono); letter-spacing:.17em; }.profile-copy h2 { margin:0; font:500 clamp(42px,6vw,92px)/1.05 var(--serif); letter-spacing:-.13em; }.profile-copy h2 em { color:var(--orange); font-style:normal; }.profile-lead { margin:42px 0 0; color:var(--paper); font-size:18px; line-height:2; }.profile-detail { max-width:540px; margin:18px 0 0; color:var(--muted); font-size:13px; line-height:2; }.profile-links { display:flex; flex-wrap:wrap; gap:24px; margin-top:35px; }.profile-links a { padding-bottom:8px; border-bottom:1px solid var(--orange); color:var(--orange); font:10px/1 var(--mono); }.profile-links span { margin-left:8px; font-size:18px; }.profile-image { position:relative; align-self:center; min-height:520px; overflow:hidden; border-left:1px solid var(--line); }.profile-image::before { position:absolute; inset:0; background:linear-gradient(135deg,rgba(213,30,49,.45),transparent 55%); mix-blend-mode:screen; content:""; }.profile-image img { width:100%; height:100%; object-fit:contain; filter:grayscale(1) sepia(1) hue-rotate(300deg) saturate(3) contrast(1.1); }.profile-image span { position:absolute; right:18px; bottom:18px; color:var(--orange); font:9px/1 var(--mono); }

.portfolio-chapter { min-height:auto; padding-top:110px; padding-bottom:130px; background:#090909; }.orange-number { color:var(--orange); opacity:.18; }.orange-label { color:var(--orange); }.portfolio-copy { grid-column:2; position:relative; z-index:1; }.portfolio-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; padding:25px 0 60px; border-bottom:1px solid var(--line); }.portfolio-heading h2 { margin:0; color:var(--paper); font:900 clamp(70px,13vw,200px)/.7 var(--sans); letter-spacing:-.15em; text-transform:uppercase; }.portfolio-heading > p { max-width:300px; margin:0; color:var(--muted); font-size:13px; line-height:1.9; }.site-rail { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:28px 0 80px; }.site-tile { position:relative; display:block; overflow:hidden; border:1px solid var(--line); background:var(--black); transition:transform .3s ease,border-color .3s ease; }.site-tile:nth-child(2),.site-tile:nth-child(4) { transform:translateY(28px); }.site-tile:hover { border-color:var(--orange); transform:translateY(-5px); }.site-tile:nth-child(2):hover,.site-tile:nth-child(4):hover { transform:translateY(23px); }.site-tile img { display:block; width:100%; aspect-ratio:1.18; object-fit:cover; }.site-tile span { display:flex; justify-content:space-between; padding:12px 10px; color:var(--paper); background:var(--black); font:9px/1 var(--mono); }.site-tile i { color:var(--orange); font-size:16px; font-style:normal; }.catalog-head { display:grid; grid-template-columns:1fr auto; gap:8px 30px; align-items:end; padding-bottom:18px; border-bottom:1px solid var(--orange); }.catalog-head .section-label { grid-column:1/-1; margin:0; }.catalog-head h3 { margin:0; font:500 clamp(26px,3vw,42px)/1 var(--serif); letter-spacing:-.1em; }.catalog-head span { color:var(--muted); font:9px/1 var(--mono); }.catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 30px; }.catalog-item { display:grid; grid-template-columns:30px 1fr 20px; gap:10px; align-items:center; min-height:74px; border-bottom:1px solid var(--line); transition:padding .2s ease,color .2s ease; }.catalog-item span,.catalog-item small { color:var(--muted); font:9px/1.4 var(--mono); }.catalog-item strong { font-size:13px; font-weight:500; }.catalog-item small { grid-column:2; grid-row:2; }.catalog-item i { grid-column:3; grid-row:1/span 2; color:var(--orange); font-size:18px; font-style:normal; text-align:right; }.catalog-item:hover { padding-left:9px; color:var(--orange); }.note-strip { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:50px; }.note-strip a { display:flex; justify-content:space-between; gap:20px; padding:20px 18px; border:1px solid var(--line); color:var(--orange); font:10px/1 var(--mono); }.note-strip i { font-size:17px; font-style:normal; }

.trpg-teaser { position:relative; display:grid; grid-template-columns:1fr 1.4fr; min-height:72vh; overflow:hidden; padding:100px max(36px,calc((100vw - 1440px)/2)); background:var(--red); }.trpg-teaser::before { position:absolute; inset:0; opacity:.3; background:repeating-linear-gradient(-18deg,transparent 0 15px,rgba(0,0,0,.35) 16px),radial-gradient(circle at 70% 50%,rgba(0,0,0,.4),transparent 40%); content:""; }.trpg-number { position:absolute; right:-.05em; bottom:-.23em; color:rgba(0,0,0,.5); font:900 34vw/.7 var(--sans); letter-spacing:-.18em; }.trpg-copy,.trpg-image,.trpg-index { position:relative; z-index:1; }.trpg-copy { align-self:center; max-width:550px; }.trpg-copy .section-label { color:var(--black); }.trpg-copy h2 { margin:0; color:var(--black); font:500 clamp(42px,6vw,90px)/1.02 var(--serif); letter-spacing:-.13em; }.trpg-copy h2 em { color:var(--paper); font-style:normal; }.trpg-copy p:not(.section-label) { max-width:420px; margin:28px 0; color:rgba(0,0,0,.72); font-size:14px; line-height:2; }.trpg-copy .text-link { color:var(--black); border-color:var(--black); }.trpg-image { align-self:end; display:flex; align-items:end; justify-content:center; height:100%; overflow:hidden; }.trpg-image img { width:min(85%,600px); filter:grayscale(1) contrast(1.3) brightness(.35); mix-blend-mode:multiply; }.trpg-index { position:absolute; top:25px; right:30px; color:var(--black); font:9px/1 var(--mono); }.links-section { padding:110px max(36px,calc((100vw - 1440px)/2)); background:#0f0f0f; }.links-inner { display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; }.links-inner > .chapter-label { grid-column:1/-1; }.links-heading h2 { margin:0; font:500 clamp(42px,6vw,90px)/1 var(--serif); letter-spacing:-.12em; }.external-links { border-top:1px solid var(--line); }.external-links a { display:grid; grid-template-columns:32px 1fr 1fr 20px; gap:14px; align-items:center; min-height:72px; border-bottom:1px solid var(--line); transition:padding .2s ease,color .2s ease; }.external-links a:hover { padding-left:8px; color:var(--orange); }.external-links span,.external-links small { color:var(--muted); font:9px/1.4 var(--mono); }.external-links strong { font-size:14px; font-weight:500; }.external-links i { color:var(--orange); font-size:18px; font-style:normal; text-align:right; }.site-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px max(36px,calc((100vw - 1440px)/2)); border-top:1px solid var(--orange); background:var(--black); }.site-footer p { margin:0; color:var(--muted); font:9px/1 var(--mono); }.back-top { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--orange); color:var(--orange); font:18px/1 var(--mono); }

/* TRPG archive page */
.archive-page-section { min-height:100svh; padding-top:150px; background:#10080a; }.archive-heading { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; }.archive-heading h1 { margin:0; color:var(--paper); font:900 clamp(62px,10vw,150px)/.78 var(--sans); letter-spacing:-.15em; }.archive-heading h1 em { color:var(--red); font-style:normal; }.archive-heading > p { max-width:400px; margin:0; color:var(--muted); font-size:14px; line-height:2; }.archive-tabs { display:flex; margin-top:80px; border-bottom:1px solid var(--red); }.archive-tab { display:flex; justify-content:space-between; min-width:180px; padding:16px 18px; color:var(--muted); border:1px solid transparent; border-bottom:0; background:transparent; cursor:pointer; font:9px/1 var(--mono); }.archive-tab span { color:var(--red); }.archive-tab:hover,.archive-tab.is-active { color:var(--paper); border-color:var(--red); background:rgba(213,30,49,.14); }.archive-panels { padding-top:45px; }.archive-panel[hidden] { display:none; }.panel-intro { display:grid; grid-template-columns:28px auto 1fr; gap:13px; align-items:baseline; padding-bottom:22px; border-bottom:1px solid var(--line); }.panel-intro span { color:var(--red); font-size:22px; }.panel-intro p { margin:0; font-size:17px; }.panel-intro small { color:var(--muted); font:9px/1.6 var(--mono); }.log-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0 22px; }.log-item { padding:14px 0; border-bottom:1px solid var(--line); color:#ddd8d1; font-size:12px; line-height:1.4; }.log-item span { margin-right:8px; color:var(--red); font:9px/1 var(--mono); }.character-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 30px; }.character-card { display:grid; grid-template-columns:100px 1fr; gap:15px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }.character-card img { display:block; width:100px; height:126px; object-fit:contain; background:transparent; }.character-card-copy { display:grid; gap:6px; }.character-card strong { font-size:14px; font-weight:500; }.character-card span { color:var(--muted); font:9px/1.5 var(--mono); }.playstyle-copy { max-width:800px; color:#d9d2cb; font-size:14px; line-height:2; }.playstyle-copy h3 { margin:32px 0 14px; color:var(--red); font:500 11px/1.5 var(--mono); letter-spacing:.1em; }.playstyle-copy p { margin:0 0 16px; }.playstyle-copy ul { margin:0; padding-left:20px; }

.reveal { opacity:1; transform:none; transition:opacity .7s ease,transform .7s ease; }.reveal-delay { transition-delay:.12s; }
@keyframes float { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-13px) rotate(1deg)} } @keyframes loader-fill { to{transform:translateX(0)} }

@media (max-width:900px) {
  :root { --shell:calc(100% - 40px); }.site-header { padding-top:16px; }.brand-lockup > span { font-size:7px; }.site-nav { display:none; }.menu-toggle { display:flex; align-items:center; gap:8px; color:var(--paper); border:0; background:transparent; font:9px/1 var(--mono); }.menu-toggle i { width:17px; height:1px; background:currentColor; }.site-nav-mobile { position:fixed; top:54px; right:20px; left:20px; display:grid; padding:4px 16px; border:1px solid var(--orange); background:var(--black); opacity:0; pointer-events:none; transform:translateY(-8px); transition:.2s ease; }.site-nav-mobile.is-open { opacity:1; pointer-events:auto; transform:none; }.site-nav-mobile a { padding:16px 0; border-bottom:1px solid var(--line); font:9px/1 var(--mono); }.site-nav-mobile a:last-child { border-bottom:0; }
  .hero { display:flex; min-height:940px; flex-direction:column; padding-top:95px; }.hero-word { bottom:8%; left:-.08em; font-size:59vw; }.hero-copy { padding-top:28px; }.hero h1 { font-size:clamp(34px,10vw,58px); }.hero-description { font-size:12px; }.hero-character { min-height:460px; margin-top:-20px; }.hero-character img { width:100%; }.hero-mark-a { top:34%; }.hero-mark-b { bottom:20%; }.chapter { display:block; min-height:auto; padding:95px 20px 100px; }.chapter-number { top:28px; left:18px; font-size:150px; }.chapter-label { margin-bottom:34px; font-size:8px; }.profile-copy { padding-left:0; }.profile-copy h2 { font-size:clamp(40px,12vw,70px); }.profile-lead { margin-top:28px; font-size:15px; }.profile-image { min-height:360px; margin-top:50px; border-left:0; border-top:1px solid var(--line); }.portfolio-copy { margin-top:35px; }.portfolio-heading { display:block; padding-bottom:45px; }.portfolio-heading h2 { font-size:clamp(65px,21vw,120px); }.portfolio-heading > p { margin-top:24px; }.site-rail { grid-template-columns:1fr 1fr; gap:10px; padding-bottom:55px; }.site-tile:nth-child(2),.site-tile:nth-child(4) { transform:translateY(20px); }.catalog-grid { grid-template-columns:1fr; }.note-strip { grid-template-columns:1fr; gap:10px; }.trpg-teaser { display:block; min-height:680px; padding:90px 20px; }.trpg-copy { position:relative; z-index:2; }.trpg-image { position:absolute; right:0; bottom:0; left:20%; height:62%; }.trpg-image img { width:100%; }.trpg-index { top:20px; right:20px; }.links-section { padding:90px 20px; }.links-inner { display:block; }.links-inner > .chapter-label { margin-bottom:45px; }.links-heading h2 { font-size:clamp(43px,13vw,75px); }.external-links { margin-top:45px; }.external-links a { grid-template-columns:28px 1fr 20px; gap:10px; }.external-links small { grid-column:2; grid-row:2; padding-bottom:12px; }.external-links i { grid-column:3; grid-row:1/span 2; }.site-footer { padding:20px; }.site-footer .brand-lockup > span { display:none; }
  .archive-page-section { padding-top:110px; }.archive-heading { display:block; }.archive-heading h1 { font-size:clamp(60px,19vw,105px); }.archive-heading > p { margin-top:30px; }.archive-tabs { display:grid; margin-top:55px; }.archive-tab { width:100%; border-bottom:1px solid var(--line); }.archive-tab.is-active { border-bottom-color:var(--red); }.panel-intro { grid-template-columns:22px 1fr; }.panel-intro small { grid-column:2; }.log-grid { grid-template-columns:repeat(2,1fr); gap:0 14px; }.character-grid { grid-template-columns:1fr; }.character-card { grid-template-columns:78px 1fr; }.character-card img { width:78px; height:100px; }
}
@media (max-width:540px) { .brand-lockup > span { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.hero { min-height:870px; }.hero-kicker { font-size:8px; }.hero-character { min-height:370px; }.skill-list { grid-template-columns:repeat(2,max-content); gap:10px 16px; font-size:8px; }.site-rail { grid-template-columns:1fr; }.site-tile:nth-child(2),.site-tile:nth-child(4) { transform:none; }.site-tile img { aspect-ratio:1.45; }.character-card strong { font-size:13px; }.character-card span { font-size:8px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } .loader-line i { transform:translateX(0); } }

/* Keep the visual language typographic and image-led. */
.hero-mark, .character-coordinate, .text-link span, .profile-links span, .site-tile i, .catalog-item i, .note-strip i, .external-links i, .back-top { display:none; }
.text-link { gap:0; }
.site-tile span { justify-content:flex-start; }
.site-rail .api-tile { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr); align-items:stretch; background:linear-gradient(115deg,#090909,#1b0b08); }
.site-rail .api-tile img { height:100%; aspect-ratio:auto; object-fit:cover; }
.site-rail .api-tile span { align-items:flex-start; justify-content:center; gap:12px; padding:20px 22px; color:var(--orange); font-size:11px; letter-spacing:.08em; }
.site-rail .api-tile span strong { color:var(--orange); font:500 15px/1.3 var(--sans); }
.site-rail .api-tile span small { color:var(--muted); font:9px/1.7 var(--mono); letter-spacing:.04em; }
.catalog-item { grid-template-columns:30px 1fr; }
.catalog-item small { grid-column:2; }
.note-strip a { justify-content:flex-start; }
.external-links a { grid-template-columns:32px 1fr 1fr; }
.hero h1 { text-shadow:0 3px 0 rgba(0,0,0,.45); }
.hero h1 em { color:var(--paper); }
.hero-word { display:none; }
.hero { grid-template-columns:1fr; }
.hero-copy { max-width:980px; padding-left:6vw; }
.hero h1 { font-size:clamp(68px,10vw,150px); }
.hero-character { display:none; }
.profile-image { display:grid; place-items:center; }
.profile-image img { width:min(60%,420px); height:72%; }

/* Profile / CREATE. COMMUNICATE. — editorial rebuild */
.profile-chapter { grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr); grid-template-rows:auto 1fr; gap:0 6vw; min-height:100svh; padding-top:138px; padding-bottom:76px; background:var(--black); border-top:1px solid var(--line); }
.profile-chapter .chapter-number { display:none; }
.profile-chapter .chapter-label { grid-column:1/-1; margin:0 0 44px; color:var(--orange); font-size:10px; letter-spacing:.16em; }
.profile-copy { grid-column:1; grid-row:2; align-self:center; max-width:760px; padding:0; }
.profile-copy .section-label { display:none; }
.profile-copy h2 { margin:0; color:var(--paper); font:500 clamp(64px,7.5vw,122px)/.87 var(--serif); letter-spacing:-.105em; }
.profile-copy h2 em { color:var(--orange); font-style:normal; }
.profile-lead { max-width:650px; margin:44px 0 0; color:var(--paper); font:400 clamp(17px,1.45vw,21px)/1.7 var(--serif); }
.profile-detail { max-width:620px; margin:22px 0 0; color:var(--muted); font:12px/1.9 var(--mono); letter-spacing:.01em; }
.profile-links { gap:64px; margin-top:42px; }
.profile-links a { position:relative; padding-bottom:10px; border-bottom:1px solid var(--orange); color:var(--orange); font:10px/1 var(--mono); letter-spacing:.1em; }
.profile-links a::after { position:absolute; right:0; bottom:-1px; width:0; height:1px; background:var(--paper); content:""; transition:width .25s ease; }
.profile-links a:hover::after { left:0; width:100%; }
.profile-image { grid-column:2; grid-row:2; align-self:center; display:block; width:100%; min-height:0; height:min(78vh,780px); overflow:hidden; border:1px solid var(--orange); background:#4b161d; }
.profile-image::before { position:absolute; right:auto; bottom:19%; left:0; width:32%; height:1px; background:var(--orange); box-shadow:0 -16px 0 rgba(255,79,31,.35),0 16px 0 rgba(255,79,31,.35); content:""; }
.profile-image::after { position:absolute; top:50%; right:-1px; width:18%; height:1px; background:var(--orange); content:""; }
.profile-image-mark { position:absolute; top:50%; left:24px; z-index:0; color:transparent; font:900 clamp(100px,11vw,190px)/.7 var(--sans); letter-spacing:-.15em; writing-mode:vertical-rl; -webkit-text-stroke:1px var(--orange); transform:translateY(-50%); }
.profile-image .profile-image-mark { right:auto; bottom:auto; color:transparent; font:900 clamp(100px,11vw,190px)/.7 var(--sans); letter-spacing:-.15em; writing-mode:vertical-rl; -webkit-text-stroke:1px var(--orange); }
.profile-image img { position:absolute; z-index:1; bottom:3%; left:50%; width:min(58%,320px); height:68%; object-fit:contain; filter:grayscale(1) sepia(1) hue-rotate(300deg) saturate(3) contrast(1.1); transform:translateX(-50%); }
.profile-image-id { position:absolute; right:16px; bottom:16px; z-index:2; color:var(--orange); font:9px/1 var(--mono); letter-spacing:.12em; }
.profile-image .profile-image-id { right:16px; bottom:16px; color:var(--orange); }

@media (max-width:900px) {
  .profile-chapter { grid-template-columns:minmax(0,1fr) minmax(250px,.66fr); gap:0 5vw; }
  .profile-copy h2 { font-size:clamp(55px,8.5vw,88px); }
  .profile-image { height:560px; }
}

@media (max-width:640px) {
  .profile-chapter { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; gap:0; min-height:auto; padding-top:105px; padding-bottom:76px; }
  .profile-chapter .chapter-label { margin-bottom:36px; }
  .profile-copy { grid-column:1; grid-row:2; min-width:0; }
  .profile-copy h2 { max-width:100%; font-size:clamp(38px,11.2vw,60px); line-height:.92; letter-spacing:-.13em; }
  .profile-lead { margin-top:30px; font-size:17px; line-height:1.8; }
  .profile-detail { font-size:10px; line-height:1.9; }
  .profile-links { gap:32px; margin-top:34px; }
  .profile-image { grid-column:1; grid-row:3; height:430px; margin-top:56px; border-left:1px solid var(--orange); }
  .profile-image img { width:min(58%,250px); height:64%; }
  .profile-image-mark { left:16px; font-size:110px; }
}

/* Portfolio leads the page; Profile becomes a quieter second chapter. */
main { display:flex; flex-direction:column; }
main > .hero { order:0; }
main > .portfolio-chapter { order:1; }
main > .profile-chapter { order:2; }
main > .trpg-teaser { order:3; }
main > .links-section { order:4; }
.profile-chapter { min-height:auto; padding-top:104px; padding-bottom:88px; }
.profile-chapter .chapter-label { margin-bottom:32px; }
.profile-copy h2 { font-size:clamp(48px,5.4vw,84px); }
.profile-lead { max-width:590px; margin-top:28px; font-size:16px; line-height:1.8; }
.profile-detail { max-width:560px; margin-top:14px; font-size:11px; line-height:1.8; }
.profile-links { margin-top:28px; }
.profile-image { height:410px; }
.profile-image-mark { font-size:clamp(82px,8vw,140px); }
.profile-image img { width:min(52%,270px); height:62%; }
.portfolio-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,280px); grid-template-rows:auto auto; align-items:end; gap:20px 40px; }
.portfolio-heading .section-label { grid-column:1/-1; grid-row:1; margin:0; }
.portfolio-heading h2 { grid-column:1; grid-row:2; }
.portfolio-heading > p:not(.section-label) { grid-column:2; grid-row:2; margin:0; }

@media (max-width:640px) {
  .profile-chapter { min-height:auto; padding-top:86px; padding-bottom:72px; }
  .profile-copy h2 { font-size:clamp(38px,11.2vw,60px); }
  .profile-lead { margin-top:24px; font-size:15px; line-height:1.8; }
  .profile-detail { margin-top:12px; font-size:10px; }
  .profile-links { margin-top:26px; }
  .profile-image { height:320px; margin-top:40px; }
  .profile-image img { width:min(54%,230px); height:58%; }
  .profile-image-mark { font-size:86px; }
  .portfolio-heading { display:block; }
  .portfolio-heading .section-label { margin-bottom:20px; }
  .portfolio-heading h2 { max-width:100%; font-size:clamp(44px,15vw,60px); letter-spacing:-.12em; white-space:nowrap; }
  .site-rail .api-tile { display:block; }
  .site-rail .api-tile img { height:auto; aspect-ratio:1200/420; object-fit:contain; }
  .site-rail .api-tile span { gap:6px; padding:12px 10px; font-size:9px; }
  .site-rail .api-tile span strong { font-size:11px; }
  .site-rail .api-tile span small { font-size:8px; }
}

/* Top / quiet visual-first opening */
.hero { display:block; min-height:100svh; padding:0; background:radial-gradient(ellipse at 34% 58%,rgba(111,24,8,.48) 0%,rgba(49,13,7,.2) 28%,transparent 56%),radial-gradient(ellipse at 78% 30%,rgba(255,79,31,.12) 0%,transparent 38%),linear-gradient(128deg,#050505 0%,#100907 48%,#070707 100%); }
.hero::after { opacity:.09; }
.hero-noise { opacity:.08; }
.hero-curve { position:absolute; inset:0; z-index:1; width:100%; height:100%; opacity:.34; color:var(--orange); pointer-events:none; }
.hero-curve path { stroke:currentColor; stroke-width:1.1; vector-effect:non-scaling-stroke; }
.hero-curve { display:none; }
.hero-motion { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.hero-motion::before { position:absolute; top:43%; left:27%; width:48vmin; height:48vmin; border-radius:48% 52% 61% 39% / 42% 37% 63% 58%; background:radial-gradient(circle at 45% 52%,rgba(255,79,31,.2),rgba(255,79,31,.08) 35%,transparent 70%); filter:blur(12px); content:""; animation:hero-cloud 17s ease-in-out infinite alternate; }
.hero-motion::after { position:absolute; top:32%; left:58%; width:27vmin; height:34vmin; border-radius:58% 42% 44% 56% / 39% 53% 47% 61%; background:radial-gradient(ellipse,rgba(255,130,70,.08),transparent 68%); filter:blur(16px); content:""; animation:hero-cloud-two 21s ease-in-out infinite alternate; }
.hero-motion .hero-core { position:absolute; top:50%; left:34%; width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 7px rgba(255,79,31,.06),0 0 30px rgba(255,79,31,.8); animation:hero-core 7s ease-in-out infinite; }
.hero-motion .hero-glint { position:absolute; top:50%; left:34%; width:2px; height:2px; border-radius:50%; background:var(--paper); box-shadow:0 0 12px 2px var(--paper); animation:hero-drift 14s 6s cubic-bezier(.45,0,.2,1) infinite; }
.hero-particle { position:absolute; width:3px; height:3px; border-radius:50%; background:var(--orange); box-shadow:0 0 12px rgba(255,79,31,.48); opacity:0; }
.particle-a { top:28%; left:24%; animation:particle-a 11s 1s ease-in-out infinite; }
.particle-b { top:68%; left:66%; width:2px; height:2px; animation:particle-b 13s 3.2s ease-in-out infinite; }
.particle-c { top:42%; left:76%; width:4px; height:4px; animation:particle-c 16s 5s ease-in-out infinite; }
.particle-d { top:74%; left:38%; width:2px; height:2px; background:var(--paper); box-shadow:0 0 10px rgba(244,240,233,.5); animation:particle-d 12s 7s ease-in-out infinite; }
.particle-e { top:22%; left:58%; width:2px; height:2px; animation:particle-e 15s 2s ease-in-out infinite; }
.particle-f { top:63%; left:18%; width:4px; height:4px; animation:particle-f 18s 4.5s ease-in-out infinite; }
.particle-g { top:78%; left:74%; width:2px; height:2px; background:var(--paper); animation:particle-g 14s 8s ease-in-out infinite; }
.particle-h { top:35%; left:44%; width:5px; height:5px; animation:particle-h 20s 6s ease-in-out infinite; }
@keyframes hero-cloud { from { opacity:.5; transform:translate(-8vw,12vh) rotate(-14deg) scale(.82); } to { opacity:1; transform:translate(15vw,-10vh) rotate(18deg) scale(1.16); } }
@keyframes hero-cloud-two { from { opacity:.25; transform:translate(14vw,-10vh) rotate(16deg) scale(.7); } to { opacity:.8; transform:translate(-16vw,17vh) rotate(-20deg) scale(1.15); } }
@keyframes hero-core { 0%,100% { transform:translate(-20vw,14vh) scale(.6); opacity:.25; } 50% { transform:translate(24vw,-16vh) scale(1.45); opacity:1; } }
@keyframes hero-drift { 0% { opacity:0; transform:translate(-24vw,18vh) scale(.72); } 18% { opacity:.75; } 52% { opacity:.45; transform:translate(4vw,-8vh) scale(1.05); } 78% { opacity:.8; } 100% { opacity:0; transform:translate(28vw,-20vh) scale(.58); } }
@keyframes particle-a { 0%,100% { opacity:0; transform:translate(-2vw,10vh) scale(.4); } 25%,68% { opacity:.65; } 52% { transform:translate(14vw,-8vh) scale(1.25); } 82% { opacity:0; transform:translate(26vw,-18vh) scale(.6); } }
@keyframes particle-b { 0%,100% { opacity:0; transform:translate(12vw,-8vh) scale(.5); } 30%,72% { opacity:.5; } 56% { transform:translate(-18vw,6vh) scale(1.1); } 88% { opacity:0; transform:translate(-30vw,18vh) scale(.4); } }
@keyframes particle-c { 0%,100% { opacity:0; transform:translate(10vw,16vh) scale(.45); } 22%,66% { opacity:.7; } 48% { transform:translate(-16vw,-15vh) scale(1.2); } 82% { opacity:0; transform:translate(-28vw,-23vh) scale(.5); } }
@keyframes particle-d { 0%,100% { opacity:0; transform:translate(-16vw,-6vh) scale(.3); } 28%,70% { opacity:.5; } 54% { transform:translate(22vw,10vh) scale(1.25); } 86% { opacity:0; transform:translate(32vw,18vh) scale(.35); } }
@keyframes particle-e { 0%,100% { opacity:0; transform:translate(22vw,14vh) scale(.3); } 24%,64% { opacity:.6; } 48% { transform:translate(-10vw,-12vh) scale(1.1); } 84% { opacity:0; transform:translate(-24vw,-20vh) scale(.4); } }
@keyframes particle-f { 0%,100% { opacity:0; transform:translate(-12vw,-14vh) scale(.35); } 30%,70% { opacity:.55; } 54% { transform:translate(20vw,5vh) scale(1.3); } 88% { opacity:0; transform:translate(30vw,14vh) scale(.45); } }
@keyframes particle-g { 0%,100% { opacity:0; transform:translate(18vw,-4vh) scale(.4); } 26%,66% { opacity:.55; } 52% { transform:translate(-18vw,12vh) scale(1.1); } 86% { opacity:0; transform:translate(-28vw,22vh) scale(.35); } }
@keyframes particle-h { 0%,100% { opacity:0; transform:translate(-6vw,8vh) scale(.4); } 22%,68% { opacity:.7; } 50% { transform:translate(12vw,-18vh) scale(1.4); } 82% { opacity:0; transform:translate(24vw,-26vh) scale(.5); } }
@media (prefers-reduced-motion:reduce) { .hero-motion::before,.hero-motion::after,.hero-motion .hero-core,.hero-motion .hero-glint,.hero-motion .hero-particle { animation:none; opacity:.4; transform:none; } }

/* Full-bleed page rhythm */
:root { --shell:calc(100% - 48px); }
.site-header { width:calc(100% - 48px); }
.chapter,.trpg-teaser,.links-section,.site-footer { padding-right:24px; padding-left:24px; }
.chapter-number { left:24px; }
.portfolio-copy { grid-column:1/-1; }
.portfolio-chapter .chapter-label { grid-column:1/-1; }

@media (max-width:640px) {
  .site-header { width:calc(100% - 40px); }
  .chapter,.trpg-teaser,.links-section,.site-footer { padding-right:20px; padding-left:20px; }
  .chapter-number { left:18px; }
}

/* Shared spacing scale after the full-width expansion */
:root { --page-pad:clamp(24px,4vw,64px); }
.site-header { width:auto; margin-right:var(--page-pad); margin-left:var(--page-pad); }
.chapter,.trpg-teaser,.links-section,.site-footer { padding-right:var(--page-pad); padding-left:var(--page-pad); }
.chapter-number { left:var(--page-pad); }
.portfolio-chapter { padding-top:96px; padding-bottom:112px; }
.portfolio-heading { padding-top:16px; padding-bottom:48px; }
.site-rail { gap:18px; padding-top:28px; padding-bottom:68px; }
.profile-chapter { padding-top:88px; padding-bottom:72px; }
.profile-image { height:380px; }

@media (max-width:640px) {
  :root { --page-pad:20px; }
  .site-header { margin-right:20px; margin-left:20px; }
  .chapter,.trpg-teaser,.links-section,.site-footer { padding-right:20px; padding-left:20px; }
  .chapter-number { left:18px; }
  .portfolio-chapter { padding-top:86px; padding-bottom:92px; }
  .portfolio-heading { padding-top:16px; padding-bottom:36px; }
  .site-rail { gap:10px; padding-top:24px; padding-bottom:50px; }
  .profile-chapter { padding-top:78px; padding-bottom:64px; }
  .profile-image { height:320px; }
}

/* Home TRPG teaser: a small route to the separate archive. */
.trpg-teaser { grid-template-columns:1fr; min-height:360px; padding-top:72px; padding-bottom:72px; }
.trpg-copy { max-width:720px; }
.trpg-copy h2 { font-size:clamp(34px,4.2vw,56px); }
.trpg-copy p:not(.section-label) { max-width:620px; margin:16px 0; font-size:12px; line-height:1.75; }
.trpg-number { right:5%; bottom:7%; font-size:16vw; }
.trpg-image { display:none !important; }

@media (max-width:640px) {
  .trpg-teaser { min-height:270px; padding-top:56px; padding-bottom:56px; }
  .trpg-copy h2 { font-size:clamp(32px,9vw,46px); }
  .trpg-copy p:not(.section-label) { font-size:11px; line-height:1.7; }
  .trpg-number { right:5%; bottom:8%; font-size:24vw; }
}

@media (min-width:901px) {
  .profile-chapter { grid-template-columns:minmax(0,1fr) minmax(500px,.9fr); gap:0; }
}
.profile-facts { max-width:620px; margin:16px 0 0; color:var(--muted); font:10px/1.85 var(--mono); letter-spacing:.02em; }

@media (max-width:640px) {
  .profile-facts { margin-top:14px; font-size:9px; line-height:1.8; }
}
.hero-copy { position:absolute; inset:0; z-index:3; display:grid; place-items:center; align-content:center; padding:0; text-align:center; pointer-events:none; }
.hero-kicker { display:none; }
.hero h1 { max-width:none; margin:0; color:var(--paper); font:500 clamp(76px,12vw,180px)/.84 var(--serif); letter-spacing:-.1em; text-align:center; text-shadow:0 4px 25px rgba(0,0,0,.65); }
.hero h1 em { color:var(--paper); }
.hero-description { margin:22px 0 0; padding:0; border:0; color:var(--paper); font:9px/1 var(--mono); letter-spacing:.2em; }
.hero-copy .text-link { pointer-events:auto; justify-self:center; margin-top:36px; color:var(--orange); font-size:9px; letter-spacing:.16em; }
.hero-side { top:auto; right:auto; bottom:26px; left:28px; color:var(--muted); font-size:9px; writing-mode:horizontal-tb; }
.hero-side br { display:none; }
.hero-side span::before { content:" / "; color:var(--line); }
.hero-character,.hero-word,.hero-mark { display:none; }

@media (max-width:640px) {
  .hero { min-height:100svh; }
  .hero-copy { padding:0 20px; }
  .hero h1 { font-size:clamp(76px,23vw,112px); }
  .hero-description { margin-top:18px; font-size:8px; }
  .hero-copy .text-link { margin-top:30px; }
  .hero-curve { left:-35%; width:170%; opacity:.28; }
  .hero-motion::before { width:46vmin; height:46vmin; }
  .hero-side { bottom:20px; left:20px; font-size:8px; }
}

/* Keep the contact heading intact and add small creator shortcuts to the opening frame. */
.links-heading h2 { font-size:clamp(32px,3.4vw,48px); white-space:nowrap; }
.hero-socials { position:absolute; z-index:4; right:var(--page-pad); bottom:26px; display:flex; gap:8px; }
.hero-socials a { position:relative; display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(255,79,31,.48); border-radius:50%; color:var(--paper); background:rgba(7,7,7,.28); font:500 12px/1 var(--mono); transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease; }
.hero-socials a::after { position:absolute; top:calc(100% + 7px); left:50%; color:var(--orange); content:attr(aria-label); font:8px/1 var(--mono); letter-spacing:.08em; opacity:0; transform:translate(-50%,-3px); transition:opacity .2s ease,transform .2s ease; }
.hero-socials a:hover { border-color:var(--orange); color:var(--orange); background:rgba(255,79,31,.12); transform:translateY(-3px); }
.hero-socials a:hover::after { opacity:1; transform:translate(-50%,0); }
@media (max-width:640px) {
  .links-heading h2 { font-size:clamp(32px,10.5vw,48px); }
  .hero-socials { right:20px; bottom:20px; gap:6px; }
  .hero-socials a { width:30px; height:30px; font-size:10px; }
}

/* Keep the API alongside the other production sites at the same scale. */
.site-rail .api-tile { grid-column:auto; display:block; background:var(--black); }
.site-rail .api-tile img { height:auto; aspect-ratio:1.18; object-fit:cover; }
.site-rail .api-tile span { display:flex; align-items:initial; justify-content:flex-start; gap:0; padding:12px 10px; color:var(--paper); font:9px/1 var(--mono); letter-spacing:normal; }
.site-rail .api-tile span strong { color:inherit; font:inherit; }
.site-rail .api-tile span small { display:none; }
@media (max-width:640px) {
  .site-rail .api-tile { display:block; }
  .site-rail .api-tile img { aspect-ratio:1.45; }
}
@media (min-width:901px) {
  .site-rail { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 22px; }
}

/* Make each published work readable at a glance. */
.site-rail .site-tile:nth-child(2),
.site-rail .site-tile:nth-child(4),
.site-rail .site-tile:nth-child(2):hover,
.site-rail .site-tile:nth-child(4):hover { transform:none; }
.site-rail .site-tile img { aspect-ratio:16/9; object-fit:cover; }
.site-rail .site-tile span { align-items:center; justify-content:space-between; padding:18px 16px 5px; color:var(--paper); font:600 clamp(16px,1.3vw,21px)/1.2 var(--sans); letter-spacing:-.04em; }
.site-rail .site-tile::after { display:block; min-height:48px; padding:7px 16px 18px; color:var(--muted); font:11px/1.7 var(--sans); letter-spacing:.01em; content:""; }
.site-rail .site-tile[href*="ai-zatsudan-kaigi"]::after { content:"AIたちの会話を読む、対話ログのサイト"; }
.site-rail .site-tile[href*="aikansoku-zine"]::after { content:"AIと人間をめぐる観測記録と読み物"; }
.site-rail .site-tile[href*="makisignage"]::after { content:"天気・ニュースを表示するサイネージツール"; }
.site-rail .site-tile[href*="bkgr.net"]::after { content:"背景素材を探して使える素材サイト"; }
.site-rail .site-tile[href*="pc-it.maki01"]::after { content:"IT基礎・セキュリティ・開発・AIのJSON API"; }
.site-rail .site-tile[href*="ttwa.maki01"]::after { content:"文字WebP＆APNG作成ツール"; }
.site-rail .site-tile.api-tile span { flex-direction:row; align-items:center; justify-content:space-between; gap:0; padding:18px 16px 5px; color:var(--paper); font:600 clamp(16px,1.3vw,21px)/1.2 var(--sans); letter-spacing:-.04em; }
.site-rail .site-tile.api-tile span strong { color:inherit; font:inherit; }
.site-rail .site-tile.api-tile span small { display:none; }
@media (max-width:900px) {
  .site-rail { gap:18px 12px; }
  .site-rail .site-tile span { font-size:15px; }
  .site-rail .site-tile::after { min-height:42px; padding:6px 12px 14px; font-size:10px; }
}
@media (max-width:540px) {
  .site-rail { gap:14px; }
  .site-rail .site-tile span,
  .site-rail .site-tile.api-tile span { padding:14px 12px 4px; font-size:16px; }
  .site-rail .site-tile::after { min-height:auto; padding:6px 12px 15px; font-size:10px; }
}

/* Hero identity and layered signal decorations. */
.hero-kicker { display:block; margin:0 0 24px; color:var(--orange); font:500 9px/1 var(--mono); letter-spacing:.2em; }
.hero::after { z-index:1; display:flex; align-items:flex-end; justify-content:flex-end; padding:0 var(--page-pad) 5.5rem 0; color:rgba(255,79,31,.72); font:8px/1 var(--mono); letter-spacing:.14em; content:"02°45' / 34°41'   —   WEB / TOOL / VISUAL"; background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,79,31,.2) 6px),linear-gradient(115deg,transparent 0 63%,rgba(255,79,31,.07) 63.1% 63.2%,transparent 63.3%); }
.hero-motion { background:radial-gradient(circle at 80% 34%,transparent 0 13vmin,rgba(255,79,31,.28) 13.08vmin 13.18vmin,transparent 13.28vmin 18vmin,rgba(255,79,31,.13) 18.08vmin 18.18vmin,transparent 18.28vmin 25vmin),linear-gradient(126deg,transparent 0 55%,rgba(255,79,31,.12) 55.1% 55.2%,transparent 55.3%); }
.hero-motion .hero-core { box-shadow:0 0 0 7px rgba(255,79,31,.06),0 0 0 18px rgba(255,79,31,.05),0 0 0 34px rgba(255,79,31,.03),0 0 30px rgba(255,79,31,.8); }
.hero-socials { bottom:38px; }
@media (max-width:640px) {
  .hero-kicker { margin-bottom:18px; font-size:8px; letter-spacing:.12em; }
  .hero::after { padding-right:20px; padding-bottom:4.8rem; font-size:7px; letter-spacing:.08em; content:"WEB / TOOL / VISUAL"; }
  .hero-socials { bottom:28px; }
}

/* Give the TRPG archive a readable frame so its large title and log rows do not touch the viewport edges. */
.archive-page-section { padding-right:var(--page-pad); padding-left:var(--page-pad); }
@media (max-width:640px) { .archive-page-section { padding-right:20px; padding-left:20px; } }
.trpg-page .site-footer { min-width:0; }
@media (max-width:640px) {
  .trpg-page .site-footer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; }
  .trpg-page .site-footer nav { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:12px 16px; min-width:0; }
  .trpg-page .site-footer p { min-width:0; }
}

/* Center the inline AdRing banner inserted directly before the footer. */
body > [data-adring-widget="banner"] { width:min(970px,calc(100% - (var(--page-pad) * 2))) !important; max-width:970px !important; margin-top:40px !important; margin-right:auto !important; margin-bottom:40px !important; margin-left:auto !important; }

/* Keep the top atmosphere light and make the waveform continuous instead of flickering dashes. */
.hero-curve { opacity:.28; filter:none; animation:waveform-sway 24s ease-in-out infinite alternate; transform-origin:50% 50%; }
.hero-curve path { stroke-width:1.05; stroke-dasharray:none; animation:none; transform:none; }
.hero-motion::before { opacity:.2; filter:blur(18px); animation:none; }
.hero-motion::after { opacity:.16; filter:blur(20px); animation:none; }
.hero-motion .hero-core { box-shadow:0 0 0 4px rgba(255,79,31,.06),0 0 18px rgba(255,79,31,.6); animation:hero-core-lite 14s ease-in-out infinite; }
.hero-motion .hero-glint { opacity:.35; animation:none; }
.hero-particle { opacity:.22; animation:none; }
@keyframes waveform-sway { 0% { transform:translate3d(-1%,0,0) scaleX(1.01); } 50% { transform:translate3d(1%,1%,0) scaleX(.99); } 100% { transform:translate3d(-1%,0,0) scaleX(1.01); } }
@keyframes hero-core-lite { 0%,100% { transform:translate(-6vw,4vh) scale(.85); opacity:.35; } 50% { transform:translate(8vw,-4vh) scale(1.08); opacity:.8; } }
@media (prefers-reduced-motion:reduce) { .hero-curve { animation:none; transform:none; } .hero-motion .hero-core { animation:none; transform:none; opacity:.45; } }

/* Replace the geometric overlay with the original flowing waveform. */
.hero::after { display:none; content:none; background:none; }
.hero-curve { display:block; z-index:2; opacity:.38; color:var(--orange); filter:drop-shadow(0 0 8px rgba(255,79,31,.24)); }
.hero-curve path { stroke-width:1.25; stroke-dasharray:240 28; animation:waveform-flow 18s linear infinite; transform-box:fill-box; transform-origin:center; }
.hero-curve path:nth-child(2n) { opacity:.62; animation-duration:23s; animation-delay:-5s; }
.hero-curve path:nth-child(3n) { opacity:.42; animation-duration:28s; animation-delay:-11s; }
.hero-motion { background:none; }
.hero-motion .hero-core { box-shadow:0 0 0 7px rgba(255,79,31,.06),0 0 30px rgba(255,79,31,.8); }
@keyframes waveform-flow { 0% { stroke-dashoffset:0; transform:translateX(-1.5%) skewX(-1deg); } 50% { stroke-dashoffset:-134px; transform:translateX(1.5%) skewX(1deg); } 100% { stroke-dashoffset:-268px; transform:translateX(-1.5%) skewX(-1deg); } }

/* Keep the top edge of each site screenshot visible in the portfolio rail. */
.site-rail .site-tile img { object-position:center top; }
.site-rail .site-tile[href*="ttwa.maki01"] img { object-fit:contain; background:#fff; }

/* Final TOP motion tuning: a solid, low-cost waveform with no dash flicker. */
.hero-curve { opacity:.28; filter:none; animation:waveform-sway 24s ease-in-out infinite alternate; transform-origin:50% 50%; }
.hero-curve path { stroke-width:1.05; stroke-dasharray:none; animation:none; transform:none; }
.hero-motion::before { opacity:.2; filter:blur(18px); animation:none; }
.hero-motion::after { opacity:.16; filter:blur(20px); animation:none; }
.hero-motion .hero-core { box-shadow:0 0 0 4px rgba(255,79,31,.06),0 0 18px rgba(255,79,31,.6); animation:hero-core-lite 14s ease-in-out infinite; }
.hero-motion .hero-glint { opacity:.35; animation:none; }
.hero-particle { opacity:.22; animation:none; }
@keyframes waveform-sway { 0% { transform:translate3d(-1%,0,0) scaleX(1.01); } 50% { transform:translate3d(1%,1%,0) scaleX(.99); } 100% { transform:translate3d(-1%,0,0) scaleX(1.01); } }
@keyframes hero-core-lite { 0%,100% { transform:translate(-6vw,4vh) scale(.85); opacity:.35; } 50% { transform:translate(8vw,-4vh) scale(1.08); opacity:.8; } }
@media (prefers-reduced-motion:reduce) { .hero-curve { animation:none; transform:none; } .hero-motion .hero-core { animation:none; transform:none; opacity:.45; } }