/* DARKROOM — darkroom.rimogogo.com
   母题：写真暗房 / 接触印相纸（contact sheet）
   材质：暖黑 + 相纸米白 + 安全灯红（只做图形与大字）+ 胶片齿孔边
   禁用：圆角卡片网格、彩色渐变、玻璃拟态、emoji 图标 */

:root{
  --ink:#0B0908;
  --ink-2:#131110;
  --paper:#E8E0D2;
  --ash:#8F857A;
  --red:#B33A2B;        /* 图形 / 大字专用（3.37:1） */
  --red-lt:#D9705A;     /* 小字用红（达 4.5 线） */
  --hair:rgba(232,224,210,.16);
  --rail:56px;
  --serif:"Bodoni MT","Didot","Playfair Display",Georgia,"Times New Roman",serif;
  --mono:"Consolas","DejaVu Sans Mono","Courier New",monospace;
  --sans:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{ /* 相纸颗粒 */
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  mix-blend-mode:screen;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}

/* ---------- 齿孔边（左侧固定） ---------- */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:50;
  border-right:1px solid var(--hair);
  background:linear-gradient(90deg,#0B0908,#0F0D0B);
  display:flex;flex-direction:column;align-items:center;
}
.rail .holes{flex:1;width:100%;margin:14px 0;
  background-image:radial-gradient(circle at 50% 50%,#241E1B 0 5px,transparent 6px);
  background-size:100% 34px;opacity:.9}
.rail .lock{writing-mode:vertical-rl;font-family:var(--mono);font-size:11px;
  letter-spacing:.42em;color:var(--ash);padding:18px 0}
.rail .dot{width:7px;height:7px;background:var(--red);border-radius:50%;margin:10px 0 18px}

/* ---------- 顶栏 ---------- */
.top{position:absolute;right:0;left:var(--rail);top:0;z-index:40;
  display:flex;align-items:center;justify-content:flex-end;gap:28px;
  padding:22px 40px}
.top .mark{display:none}
nav{display:flex;align-items:center;gap:26px}
nav a{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);opacity:.72}
nav a:hover{opacity:1;color:var(--paper)}
nav a.on{opacity:1;border-bottom:1px solid var(--red);padding-bottom:3px}
.plus18{font-family:var(--mono);font-size:10px;letter-spacing:.1em;border:1px solid var(--red);
  color:var(--red-lt);padding:3px 6px;line-height:1}

/* ---------- 版面骨架 ---------- */
main{padding-left:var(--rail)}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
section{position:relative}

/* ---------- Hero ---------- */
.hero{padding:104px 40px 0;max-width:1440px;margin:0 auto}
.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 28px;align-items:end}
.hero-copy{grid-column:1/span 7;padding-bottom:56px}
.kicker{display:flex;align-items:center;gap:10px;color:var(--ash);margin-bottom:34px}
.kicker i{width:6px;height:6px;background:var(--red);display:block}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(56px,8.6vw,124px);
  line-height:.88;letter-spacing:-.015em;margin:0 0 6px}
h1 .kanji{font-family:var(--serif);font-size:.2em;letter-spacing:.3em;color:var(--red-lt);
  display:block;margin-top:14px;padding-left:4px}
.lede{max-width:33ch;font-size:18px;line-height:1.62;color:#D9D1C4;margin:34px 0 0}
.lede b{font-weight:400;color:var(--paper);border-bottom:1px solid var(--red);padding-bottom:1px}
.cta-row{display:flex;align-items:center;gap:26px;margin-top:40px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--paper);background:var(--paper);color:var(--ink);
  display:inline-block;transition:background .15s,color .15s}
.btn:hover{background:transparent;color:var(--paper)}
.btn-ghost{background:transparent;color:var(--paper);border-color:var(--hair)}
.btn-ghost:hover{border-color:var(--paper)}
.link-mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);border-bottom:1px solid var(--hair);padding-bottom:4px}
.link-mono:hover{color:var(--paper);border-color:var(--paper)}

.hero-fig{grid-column:8/span 5;position:relative;align-self:end}
.hero-fig img{width:100%;height:min(74vh,660px);object-fit:cover;filter:contrast(1.03) saturate(.95)}
.hero-fig .tag{position:absolute;left:-14px;bottom:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;color:var(--ink);background:var(--paper);padding:4px 9px;transform:rotate(-1.6deg)}
.hero-fig .edge{position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(180deg,transparent,rgba(11,9,8,.55))}
.hero-meta{display:flex;gap:34px;padding:22px 0 0;margin-top:26px;border-top:1px solid var(--hair);
  color:var(--ash);grid-column:1/span 12}

/* ---------- 胶片条 ---------- */
.strip{margin-top:64px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(6,1fr);background:#0E0C0B}
.strip a{position:relative;border-right:1px solid var(--hair);overflow:hidden;aspect-ratio:3/4;background:#0B0908}
.strip a:last-child{border-right:0}
.strip img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:.9;transition:opacity .2s,transform .5s}
.strip a:hover img{opacity:1;transform:scale(1.02)}
.strip .n{position:absolute;top:8px;left:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;color:var(--red-lt)}

/* ---------- 段落 ---------- */
.about-sec{padding:110px 0 0;max-width:1280px;margin:0 auto;padding-left:40px;padding-right:40px}
.two{display:grid;grid-template-columns:220px 1fr;gap:0 60px}
.sec-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.sec-label em{display:block;font-style:normal;font-family:var(--serif);font-size:26px;letter-spacing:0;
  color:var(--paper);text-transform:none;margin-top:12px;line-height:1.2}
.body-col p{font-size:17px;line-height:1.75;color:#D2C9BC;margin:0 0 22px;max-width:62ch}
.body-col p:last-child{margin-bottom:0}
.body-col .small{font-size:14px;color:var(--ash);max-width:56ch;margin-top:34px}
.facts{display:flex;gap:56px;margin:44px 0 0;padding-top:26px;border-top:1px solid var(--hair);flex-wrap:wrap}
.facts div span{display:block;font-family:var(--serif);font-size:38px;line-height:1}
.facts div i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-top:9px}

/* ---------- 作品列表 ---------- */
.works-sec{padding:120px 40px 0;max-width:1280px;margin:0 auto}
.works-head{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--paper);padding-bottom:14px}
.works-head h2{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:400;margin:0;color:var(--ash)}
.works-head a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.work{display:grid;grid-template-columns:96px 78px 1fr auto;gap:26px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--hair)}
.work:hover{background:#100E0D}
.work .idx{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ash)}
.work .th{width:78px;height:58px;object-fit:cover;filter:grayscale(.35) contrast(1.05);transition:filter .2s}
.work:hover .th{filter:none}
.work h3{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.25;margin:0 0 6px}
.work .meta{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
  display:flex;gap:16px;flex-wrap:wrap}
.work .side{text-align:right;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.work .side .price{font-family:var(--serif);font-size:22px;letter-spacing:0;display:block;margin-bottom:5px}
.work .side a{color:var(--red-lt)}
.work .side .st{color:var(--ash)}

/* ---------- 订阅带（反白） ---------- */
.sub-band{margin-top:130px;background:var(--paper);color:var(--ink);padding:0}
.sub-in{max-width:1280px;margin:0 auto;padding:74px 40px;display:grid;
  grid-template-columns:1fr 1fr;gap:70px}
.sub-left .mono{color:#6B6157}
.sub-title{font-family:var(--serif);font-size:clamp(46px,5.4vw,72px);line-height:1;margin:16px 0 0;position:relative}
.sub-title small{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  display:block;margin-top:30px;color:#6B6157}
.price-wrap{position:relative;display:inline-block}
.price-wrap::after{content:"";position:absolute;inset:-13px -18px -13px -30px;border:2.5px solid var(--red);
  border-radius:52% 48% 51% 49% / 50% 52% 48% 50%;transform:rotate(-1.4deg);pointer-events:none}
.sub-list{list-style:none;padding:0;margin:0 0 34px}
.sub-list li{border-top:1px solid rgba(11,9,8,.18);padding:15px 0;font-size:16px;display:flex;gap:16px}
.sub-list li:last-child{border-bottom:1px solid rgba(11,9,8,.18)}
.sub-list span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#6B6157;padding-top:4px;min-width:26px}
.sub-note{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#4A423A;margin-top:18px}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink);padding:16px 30px}
.btn-ink:hover{background:transparent;color:var(--ink)}

/* ---------- 邮件 ---------- */
.list-sec{padding:110px 40px 0;max-width:1280px;margin:0 auto}
.listrow{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;
  border-top:1px solid var(--paper);padding-top:26px}
.listrow h2{font-family:var(--serif);font-size:34px;font-weight:400;margin:0;line-height:1.25}
.listrow p{color:var(--ash);font-size:14px;margin:10px 0 0;max-width:44ch}
form{display:flex;gap:0;border-bottom:1px solid var(--paper);padding-bottom:8px}
form input{flex:1;background:transparent;border:0;color:var(--paper);font-family:var(--sans);
  font-size:15px;padding:10px 4px;outline:none}
form input::placeholder{color:#6E655C}
form button{background:transparent;border:0;color:var(--paper);font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;padding:10px 4px}
form button:hover{color:var(--red-lt)}
.ph{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#6E655C;margin-top:10px}

.followrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.followrow .btn{padding:14px 22px}

/* ---------- 页脚 ---------- */
footer{margin-top:120px;border-top:1px solid var(--hair);padding:60px 40px 70px}
.foot{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1.6fr .8fr;gap:60px}
.foot .brand{display:flex;gap:16px;align-items:flex-start}
.foot .brand img{width:52px;height:52px;object-fit:cover;border-radius:50%;filter:grayscale(.2)}
.foot .brand .nm{font-family:var(--serif);font-size:24px;line-height:1.1}
.foot .brand .nm span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:var(--ash);margin-top:8px}
.foot p{font-size:12.5px;line-height:1.7;color:var(--ash);margin:0 0 12px;max-width:52ch}
.foot h4{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);margin:0 0 14px;font-weight:400}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:9px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ash)}
.foot li a:hover{color:var(--paper)}
.stamp{display:inline-block;border:2px solid var(--red);color:var(--red);padding:7px 11px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  transform:rotate(-3.4deg);margin-top:14px;line-height:1.5;text-align:center;opacity:.9}
.copyline{margin-top:40px;padding-top:18px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#5E564E;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:1280px;margin-left:auto;margin-right:auto}

/* ---------- 18+ 门 ---------- */
#gate{position:fixed;inset:0;z-index:200;background:#080706;display:flex;align-items:center;justify-content:center;
  padding:30px}
#gate .box{max-width:520px;text-align:center}
#gate .mark{font-family:var(--serif);font-size:44px;letter-spacing:.01em;line-height:1}
#gate .k{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--red-lt);margin-bottom:22px}
#gate p{color:var(--ash);font-size:14px;line-height:1.7;margin:22px auto 30px;max-width:40ch}
#gate .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
#gate .fine{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:#584F48;margin-top:26px}

/* ---------- 内页 ---------- */
.page-head{padding:120px 40px 0;max-width:1280px;margin:0 auto}
.page-head h1{font-size:clamp(44px,6vw,84px)}
.page-head .lede{max-width:52ch;font-size:17px;margin-top:22px}
.prose{max-width:1280px;margin:0 auto;padding:70px 40px 0;display:grid;grid-template-columns:220px 1fr;gap:0 60px}
.prose h2{font-family:var(--serif);font-size:26px;font-weight:400;margin:0 0 14px}
.prose .block{margin-bottom:52px}
.faq{border-top:1px solid var(--hair)}
.faq div{border-bottom:1px solid var(--hair);padding:22px 0}
.faq h3{font-family:var(--serif);font-size:20px;font-weight:400;margin:0 0 8px}
.faq p{margin:0;font-size:15px;color:#C8BFB3;line-height:1.7;max-width:66ch}

@media(max-width:1000px){
  :root{--rail:0px}
  .rail{display:none}
  .hero{padding:88px 22px 0}
  .hero-grid{display:block}
  .hero-copy{padding-bottom:36px}
  .hero-fig img{height:52vh}
  .hero-meta{flex-wrap:wrap;gap:16px;margin-top:20px}
  .strip{grid-template-columns:repeat(3,1fr)}
  .strip a:nth-child(2),.strip a:nth-child(4),.strip a:nth-child(6){display:none}
  .about-sec,.works-sec,.list-sec,.page-head,.prose{padding-left:22px;padding-right:22px}
  .two,.prose{grid-template-columns:1fr;gap:26px}
  .work{grid-template-columns:60px 1fr;gap:14px}
  .work .th{display:none}
  .work .side{grid-column:2;text-align:left;margin-top:6px;display:flex;gap:16px;align-items:baseline}
  .work .side .price{font-size:18px;margin:0}
  .sub-in{grid-template-columns:1fr;gap:40px;padding:52px 22px}
  .listrow{grid-template-columns:1fr;gap:26px}
  .foot{grid-template-columns:1fr;gap:34px}
  footer{padding:44px 22px 60px}
  .top{padding:16px 22px}
  nav{gap:18px}
  .sub-title .circle{display:none}
}

/* ---------- 免费样张页 /free ---------- */
.sheet{max-width:1280px;margin:0 auto;padding:0 40px}
.freegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.freegrid figure{margin:0;position:relative;background:var(--ink-2)}
.freegrid img{width:100%;display:block;border:1px solid var(--hair)}
.freegrid figcaption{position:absolute;left:8px;bottom:8px;background:rgba(11,9,8,.72);padding:3px 6px}
.freegrid .mono{font-size:10px;letter-spacing:.14em;color:var(--paper)}
.note{margin-top:26px;color:var(--ash);font-size:11px;letter-spacing:.08em;max-width:62ch;line-height:1.9}
.ja{font-size:14px;color:var(--ash);margin-top:12px;line-height:1.95}
.split{max-width:1280px;margin:0 auto;padding:96px 40px 0;display:grid;grid-template-columns:1.35fr .9fr;gap:60px}
.split h2{font-family:var(--serif);font-size:clamp(30px,4vw,44px);font-weight:400;margin:14px 0 18px}
.split p{color:#C8BFB3;max-width:54ch;line-height:1.85}
.factbox{border-left:1px solid var(--hair);padding-left:34px}
.factbox .facts{list-style:none;padding:0;margin:18px 0 0}
.factbox .facts li{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--hair);padding:14px 0}
.factbox .facts b{font-family:var(--serif);font-size:30px;font-weight:400;min-width:74px;color:var(--paper)}
.factbox .facts span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ash);text-transform:uppercase}
.row{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px;align-items:center}
@media(max-width:860px){
  .sheet{padding:0 22px}
  .freegrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .split{grid-template-columns:1fr;gap:36px;padding:70px 22px 0}
  .factbox{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:26px}
}

/* ---------- 免费区标签 / 分类小标 ---------- */
.freelabel{padding:0 40px;margin:34px 0 10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.freelabel a{color:var(--red-lt);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:3px}
.freelabel a:hover{color:var(--paper);border-color:var(--paper)}
.seclabel{margin:66px 0 16px;font-size:11px;letter-spacing:.18em;color:var(--ash);text-transform:uppercase;border-top:1px solid var(--hair);padding-top:18px}
.h2{font-family:var(--serif);font-size:clamp(28px,3.6vw,42px);font-weight:400;margin:16px 0 14px;letter-spacing:-.01em}
@media(max-width:860px){.freelabel{padding:0 22px;margin:26px 0 8px}}


/* ============ v2 品牌门面（2026-11-01） ============ */
/* ---------- 锁标：全站顶栏左上 ---------- */
.top{justify-content:space-between}
.lockup{display:flex;align-items:center;gap:12px;min-width:0}
.lockup img{width:38px;height:38px;object-fit:cover;border-radius:50%;
  border:1px solid rgba(232,224,210,.3);filter:contrast(1.05)}
.lockup .wm{font-family:var(--serif);font-size:20px;letter-spacing:.02em;line-height:1;padding-top:1px}
.lockup .sp{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--ash);
  border-left:1px solid var(--hair);padding-left:10px;line-height:1.25}
.lockup:hover .wm{color:var(--paper)}

/* ---------- 首屏主视觉背景 ---------- */
.hero-wrap{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;opacity:.92;
  background:url("brand_cover.webp") 72% center/cover no-repeat}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,#0B0908 0%,rgba(11,9,8,.96) 30%,rgba(11,9,8,.62) 52%,rgba(11,9,8,.10) 78%,rgba(11,9,8,.42) 100%),
    linear-gradient(180deg,rgba(11,9,8,.9) 0%,rgba(11,9,8,0) 24%,rgba(11,9,8,0) 64%,#0B0908 99%)}
.hero{position:relative;z-index:2;min-height:76vh;display:flex;align-items:flex-end}
.hero-grid{width:100%}
.hero-copy{grid-column:1/span 8;padding-bottom:88px}
.hero .lede{color:#E0D8CB}
.hero-stamp{position:absolute;right:40px;bottom:64px;z-index:3;text-align:right;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:rgba(232,224,210,.5);
  text-transform:uppercase;line-height:2}
.hero-stamp b{display:block;color:var(--red-lt);font-weight:400}

/* ---------- 页脚平台四联 ---------- */
.plats{display:block}
.plats li{margin-bottom:11px}
.plats a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--paper)}
.plats a span{display:block;font-size:9.5px;letter-spacing:.05em;color:#6E655C;margin-top:3px}
.plats a:hover{color:var(--red-lt)}
.plats a:hover span{color:var(--ash)}
.footnav{margin-top:18px!important;padding-top:14px;border-top:1px solid var(--hair)}

/* ---------- 购买入口条 ---------- */
.buyrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px;
  padding:18px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.buyrow .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ash);margin-right:10px}
.buyrow a{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--hair);padding:11px 15px;color:var(--paper)}
.buyrow a:hover{border-color:var(--paper)}
.buyrow a b{font-weight:400;color:var(--red-lt)}

@media(max-width:1000px){
  .top{flex-direction:column;align-items:flex-start;gap:12px;padding:14px 22px}
  nav{gap:14px;flex-wrap:wrap}
  nav a{font-size:10px;letter-spacing:.14em}
  .hero-bg{opacity:1;background:none}
  .hero-bg::after{background:none}
  .hero-bg::before{content:"";position:absolute;left:0;right:0;top:0;height:340px;
    background:url("brand_cover.webp") 74% 6%/auto 340px no-repeat;
    -webkit-mask-image:linear-gradient(180deg,#000 34%,rgba(0,0,0,.55) 74%,transparent 98%);
    mask-image:linear-gradient(180deg,#000 34%,rgba(0,0,0,.55) 74%,transparent 98%)}
  .hero{min-height:0;display:block;padding-top:150px}
  .hero-copy{grid-column:1/span 12;padding-bottom:26px}
  .hero-stamp{display:none}
  .lockup .sp{display:none}
  .lockup img{width:34px;height:34px}
  .lockup .wm{font-size:17px}
}


/* ============ 日本語版（2026-11-01） ============ */
:root{
  --jp:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  --jp-serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP","MS PMincho",serif;
}
html.ja body{font-family:var(--jp);line-height:1.9}
html.ja .lede{font-size:16.5px;line-height:1.95;max-width:36em}
html.ja .body-col p{font-size:15.5px;line-height:2}
html.ja .faq p{font-size:14.5px;line-height:1.95}
html.ja h2,html.ja h3,html.ja .sub-title,html.ja .listrow h2,html.ja .work h3,
html.ja .h2,html.ja .split h2,html.ja .sec-label em,html.ja h1 .kanji{font-family:var(--jp-serif)}
html.ja .work h3{font-size:21px;line-height:1.55;letter-spacing:.01em}
html.ja .listrow h2{font-size:28px;line-height:1.55}
html.ja .split h2{line-height:1.45}
html.ja .sec-label em{font-size:23px;line-height:1.6}
html.ja .facts div i{letter-spacing:.08em}
html.ja .buyrow a{text-transform:none;font-family:var(--jp);font-size:12px;letter-spacing:.02em}
html.ja nav a{text-transform:none;font-family:var(--jp);font-size:12px;letter-spacing:.06em}
html.ja .mono{letter-spacing:.1em}
html.ja #gate p{font-family:var(--jp);line-height:1.95}
nav .lang{border:1px solid var(--hair);padding:3px 7px;font-size:9.5px!important;letter-spacing:.1em!important;opacity:.55}
nav .lang:hover{opacity:1}
@media(max-width:1000px){ html.ja nav a{font-size:11px} }


/* =====================================================================
   v3 暗房美学（2026-11-02）
   母题：暗房 = 黑 + 安全灯红 + 相纸 + 古典画框（文艺复兴线脚 / 哥特尖拱）
   纪律：金只做细线，不做金色块；纹样透明度 ≤ .06；每屏只许一个视觉主角
   ===================================================================== */
@font-face{
  font-family:'Bodoni Moda';
  src:url('/assets/fonts/BodoniModa-var.woff2') format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215;
}
:root{
  --didone:'Bodoni Moda',"Bodoni MT","Didot",Georgia,serif;
  --gold:#A8873F;
  --gold-lt:#D9B968;
  --gold-dk:#5E4718;
  --wall:#100D0B;
}

/* ---------- 全站背景：不是纯黑，是「有灯的暗房」 ---------- */
body{
  background-color:#0B0908;
  background-image:
    radial-gradient(1500px 780px at 76% -8%, rgba(179,58,43,.15), transparent 70%),
    radial-gradient(1000px 640px at 6% 2%, rgba(146,54,36,.075), transparent 72%),
    radial-gradient(1600px 1100px at 50% 20%, #131110 0%, #0B0908 58%),
    linear-gradient(180deg,#0B0908 0%,#090706 100%);
  background-attachment:fixed;
}
body::after{ /* 暗角：四边压暗，视线收进中间 */
  content:"";position:fixed;inset:0;z-index:58;pointer-events:none;
  background:radial-gradient(ellipse 120% 92% at 50% 38%,transparent 40%,rgba(0,0,0,.64) 100%);
}

/* ---------- 哥特窗花格底纹（极低透明度，撑质感不抢戏） ---------- */
.gothic-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='132' height='176'><g fill='none' stroke='%23a8873f' stroke-width='1'><path d='M66 8 C42 30 36 62 36 96 L96 96 C96 62 90 30 66 8 Z'/><path d='M66 96 L66 168'/><path d='M52 40 A10 10 0 0 1 66 52 A10 10 0 0 1 80 40'/><circle cx='66' cy='60' r='7'/></g></svg>");
  background-size:132px 176px;
}
.gothic-bg.soft{opacity:.035}

/* ---------- A 字标（Rick 2026-11-02 定版） ---------- */
.wordmark{font-family:var(--didone);font-weight:400;line-height:.84;letter-spacing:.004em;
  margin:0;font-size:clamp(64px,9.6vw,158px);color:var(--paper)}
.wordmark-rule{height:1px;width:min(700px,86%);margin-top:26px;
  background:linear-gradient(90deg,transparent,#B33A2B 14%,#D9705A 50%,#B33A2B 86%,transparent)}
.wordmark-sub{font-family:var(--mono);font-size:11px;letter-spacing:.5em;color:var(--ash);
  text-transform:uppercase;margin-top:20px}

/* ---------- 画框组件 ---------- */
.frame{position:relative;display:inline-block;padding:24px;
  background:linear-gradient(180deg,#3C2C1D 0%,#241A12 38%,#2E2116 62%,#1B130D 100%);
  box-shadow:0 30px 44px rgba(0,0,0,.78),
             inset 0 0 0 1px var(--gold),
             inset 0 0 0 3px #120D09,
             inset 0 0 0 4px rgba(168,135,63,.5),
             inset 0 0 26px rgba(0,0,0,.7)}
.frame .win{position:relative;background:#0A0807;padding:14px;
  box-shadow:inset 0 0 0 1px rgba(168,135,63,.45),inset 0 0 22px rgba(0,0,0,.92)}
.frame img{display:block;width:100%;height:auto;filter:contrast(1.045) saturate(.95)}
.frame .glass{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(122deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 74%,rgba(255,255,255,.03) 100%)}
.frame .plate{display:block;margin-top:14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:#7C7166}

/* 哥特尖拱（只用于竖图主画面） */
.frame.gothic .arch{position:relative;
  clip-path:polygon(50% 0,72% 6%,88% 19%,100% 37%,100% 100%,0 100%,0 37%,12% 19%,28% 6%)}
.frame.gothic .win{padding:12px}
.frame.gothic .tracer{position:absolute;left:50%;top:-2px;transform:translateX(-50%);
  width:58px;height:36px;z-index:4;opacity:.85}

/* ---------- 首页 v3 ---------- */
.hero-v3{position:relative;z-index:2;max-width:1440px;margin:0 auto;
  padding:118px 48px 56px;display:grid;grid-template-columns:1.02fr .98fr;
  gap:64px;align-items:center;min-height:80vh}
.hero-v3::before{ /* 暗房里挂着的那张画：极大、极暗、虚化 */
  content:"";position:absolute;left:-4%;right:-4%;top:-8%;height:118%;z-index:0;
  background:url('/assets/strip/s01b.webp') 50% 18%/cover no-repeat;
  opacity:.13;filter:blur(46px) saturate(.65) brightness(.9);
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 0%,rgba(0,0,0,.55) 52%,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 42%,#000 0%,rgba(0,0,0,.55) 52%,transparent 78%);
  pointer-events:none}
.hero-v3 .copy{position:relative;z-index:3}
.hero-v3 .kicker{display:flex;align-items:center;gap:10px;color:var(--ash);margin-bottom:30px}
.hero-v3 .kicker i{width:6px;height:6px;background:var(--red);display:block}
.hero-v3 .lede{margin:30px 0 0;max-width:32em}
.hero-v3 .cta-row{margin-top:38px}
.hero-v3 .art-col{position:relative;justify-self:end;width:100%;max-width:470px;z-index:2}
.hero-v3 .art-col::before{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:150%;height:78%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(179,58,43,.20),transparent 66%);filter:blur(26px)}
.hero-v3 .art-col .frame{width:100%;position:relative;z-index:2}
.hero-v3 .rabbit{position:absolute;right:-18px;bottom:-58px;width:96px;opacity:.30;filter:grayscale(.3)}

/* 免费样片：编辑式（1 大 + 4 小），不是等大通铺 */
.free-edit{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:20px 48px 0;
  display:grid;grid-template-columns:1.06fr .94fr;gap:24px;align-items:start}
.free-edit .lead{position:relative}
.free-edit .lead .frame{width:100%}
.free-edit .grid4{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.free-edit .grid4 a{position:relative;display:block;background:#0A0807;padding:8px;
  box-shadow:inset 0 0 0 1px rgba(168,135,63,.35),0 14px 22px rgba(0,0,0,.6);transition:box-shadow .2s}
.free-edit .grid4 a:hover{box-shadow:inset 0 0 0 1px var(--gold-lt),0 16px 26px rgba(0,0,0,.7)}
.free-edit .grid4 img{display:block;width:100%;height:auto;filter:contrast(1.04) saturate(.95)}
.free-edit .grid4 .n{position:absolute;right:14px;bottom:14px;font-family:var(--mono);
  font-size:9px;letter-spacing:.14em;color:#C8BFB3;background:rgba(10,8,7,.72);padding:2px 6px}

/* 三本作品：卡片，不是列表行 */
.works-v3{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 48px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.works-v3::before{ /* 射灯打在作品墙上 —— 不是全黑一片 */
  content:"";position:absolute;left:50%;top:-140px;transform:translateX(-50%);
  width:1240px;height:520px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(232,224,210,.055),transparent 68%)}
.lockup .wm{font-family:var(--didone);font-size:21px;letter-spacing:.012em}
.workcard{position:relative;display:flex;flex-direction:column}
.workcard .frame{padding:16px;width:100%}
.workcard .frame .win{padding:9px}
.workcard .idx{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--ash);margin-bottom:14px}
.workcard h3{font-family:var(--jp-serif);font-weight:400;font-size:19px;line-height:1.5;
  margin:20px 0 8px;letter-spacing:.01em}
.workcard .meta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ash);text-transform:uppercase}
.workcard .buy{display:flex;align-items:baseline;gap:14px;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--hair)}
.workcard .price{font-family:var(--didone);font-size:26px;line-height:1}
.workcard .buy a{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red-lt)}
.workcard .buy a:hover{color:var(--paper)}
.workcard .off{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--ash)}

/* 段落：section 标题（v3 统一样式） */
.sec-v3{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 48px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  border-bottom:1px solid rgba(232,224,210,.28);padding-bottom:14px;margin-bottom:38px}
.sec-head .lb{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ash)}
.sec-head .lb b{color:var(--red-lt);font-weight:400;margin-right:12px}
.sec-head a{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.sec-head a:hover{color:var(--red-lt)}
.sec-lead{font-family:var(--jp-serif);font-size:clamp(24px,2.6vw,34px);line-height:1.6;
  margin:0 0 40px;max-width:22em;color:var(--paper)}

@media(max-width:1000px){
  .hero-v3{grid-template-columns:1fr;gap:40px;padding:96px 22px 32px;min-height:0}
  .hero-v3 .art-col{justify-self:stretch;max-width:none}
  .hero-v3 .rabbit{display:none}
  .free-edit{grid-template-columns:1fr;padding:14px 22px 0;gap:18px}
  .works-v3{grid-template-columns:1fr;gap:44px;padding:0 22px}
  .sec-v3{padding:0 22px}
  .wordmark{font-size:clamp(52px,13vw,86px)}
}


/* 首屏品牌画框 —— 竖幅 3:4，黑兔居中，四周留卡纸（2026-11-02） */
.brandframe .win{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;padding:38px}
.brandframe .mat{width:100%;aspect-ratio:1;overflow:hidden;
  background:radial-gradient(ellipse at 50% 38%,#1B1512 0%,#0B0908 74%);
  box-shadow:inset 0 0 0 1px rgba(168,135,63,.22), inset 0 0 46px rgba(0,0,0,.9)}
.brandframe .mat img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.03)}


/* BOOTH 单行（works 页） */
.boothrow{display:flex;align-items:center;gap:36px;margin-top:46px;padding:26px 28px;
  background:linear-gradient(180deg,rgba(232,224,210,.035),transparent);
  border-top:1px solid rgba(168,135,63,.20)}
.boothrow .btext{flex:1}
.boothrow .btext h3{margin:6px 0 6px;font-size:19px}
.boothrow .btext p{margin:0;color:var(--ash);font-size:13.5px;line-height:1.7}

/* 相纸：作品图从「贴图」变成「摆在暗房桌上的照片」 */
.freegrid{gap:18px !important}
.freegrid figure{background:#0E0B09;padding:9px;margin:0;
  box-shadow:0 14px 30px rgba(0,0,0,.62), inset 0 0 0 1px rgba(168,135,63,.20)}
.freegrid figure img{display:block;width:100%}
.freegrid figcaption{margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:rgba(232,224,210,.5)}


/* 修正：窄卡片里 buy 行会挤（2026-11-02） */
.workcard .buy{flex-wrap:wrap;row-gap:9px}
.workcard .buy .off{flex-basis:100%;margin-top:2px}
.boothrow .frame{padding:14px}
.boothrow .frame .win{padding:8px}


/* =====================================================================
   v4 · 背景层次（2026-11-02 夜 · Rick：背景丰富一点，长条胶片做底）
   母题：待裁的胶卷 / 接触印样 / 安全灯
   纪律：装饰层压得很低（正文对比不受影响），实体胶片带全站只出现一次
   ===================================================================== */

/* ---------- 1. 固定装饰层：两卷斜放的胶卷 + 安全灯 + 竖排「暗室」 ---------- */
.bgfx{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;contain:strict}
.bgfx .reel{
  position:absolute;display:block;width:2600px;height:186px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='186'><rect width='300' height='186' fill='%23221C18'/><rect y='26' width='300' height='134' fill='%23191512'/><g fill='%230B0908'><rect x='7' y='6' width='15' height='14' rx='3'/><rect x='47' y='6' width='15' height='14' rx='3'/><rect x='87' y='6' width='15' height='14' rx='3'/><rect x='127' y='6' width='15' height='14' rx='3'/><rect x='167' y='6' width='15' height='14' rx='3'/><rect x='207' y='6' width='15' height='14' rx='3'/><rect x='247' y='6' width='15' height='14' rx='3'/><rect x='287' y='6' width='15' height='14' rx='3'/><rect x='7' y='166' width='15' height='14' rx='3'/><rect x='47' y='166' width='15' height='14' rx='3'/><rect x='87' y='166' width='15' height='14' rx='3'/><rect x='127' y='166' width='15' height='14' rx='3'/><rect x='167' y='166' width='15' height='14' rx='3'/><rect x='207' y='166' width='15' height='14' rx='3'/><rect x='247' y='166' width='15' height='14' rx='3'/><rect x='287' y='166' width='15' height='14' rx='3'/></g><g stroke='%230B0908' stroke-width='4'><path d='M0 26 H300 M0 160 H300'/><path d='M150 26 V160'/></g></svg>");
  background-repeat:repeat-x;background-size:auto 100%;
}
.bgfx .reelA{top:7%;left:-18%;transform:rotate(-8.5deg);opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 62%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 62%,transparent 100%)}
.bgfx .reelB{bottom:3%;left:-14%;height:148px;transform:rotate(6deg);opacity:.34;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 66%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 66%,transparent 100%)}
.bgfx .safelight{position:absolute;right:-10%;top:2%;width:58vw;height:58vw;border-radius:50%;
  background:radial-gradient(circle,rgba(179,58,43,.17),rgba(146,54,36,.06) 44%,transparent 70%);
  filter:blur(24px)}
.bgfx .ghost{position:absolute;right:1.2vw;top:20%;writing-mode:vertical-rl;
  font-family:var(--jp-serif);font-size:min(40vh,330px);line-height:1;letter-spacing:.08em;
  color:rgba(232,224,210,.026);font-weight:400;user-select:none}
@media(max-width:1000px){ .bgfx .ghost{display:none} .bgfx .reelA{opacity:.36} .bgfx .reelB{opacity:.24} }

/* 左侧齿孔边补一条胶片边缘打字 */
.rail::after{content:"DARKROOM 400 · 36 EXP";writing-mode:vertical-rl;
  font-family:var(--mono);font-size:8px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(217,112,90,.45);padding:0 0 14px}

/* ---------- 2. 实体：接触印样胶片带（每页最多一条） ---------- */
.filmband{position:relative;z-index:2;max-width:1280px;margin:126px auto 0;padding:0 48px}
.filmband .fbc{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(217,112,90,.62);padding:0 6px 9px}
.filmband .fbc b{font-weight:400;color:rgba(232,224,210,.4)}
.fbtrack{position:relative;display:flex;gap:4px;background:#181412;padding:22px 8px;
  box-shadow:0 30px 56px rgba(0,0,0,.66),inset 0 0 0 1px rgba(168,135,63,.14);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.fbtrack::-webkit-scrollbar{display:none}
.fbtrack::before,.fbtrack::after{content:"";position:absolute;left:0;right:0;height:13px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='13'><rect x='7' y='2' width='16' height='9' rx='2' fill='%230B0908'/></svg>");
  background-repeat:repeat-x;pointer-events:none}
.fbtrack::before{top:3px}
.fbtrack::after{bottom:3px}
.fbtrack a{position:relative;flex:1 0 15%;min-width:118px;overflow:hidden;background:#0A0807}
.fbtrack img{width:100%;height:158px;object-fit:cover;object-position:50% 30%;
  filter:grayscale(1) contrast(1.06) brightness(.8);transition:filter .4s,transform .7s}
.fbtrack a:hover img{filter:none;transform:scale(1.035)}
.fbtrack i{position:absolute;left:7px;bottom:5px;font-family:var(--mono);font-style:normal;
  font-size:8px;letter-spacing:.22em;color:rgba(232,224,210,.5)}
@media(max-width:1000px){
  .filmband{padding:0 22px;margin-top:86px}
  .fbtrack{padding:20px 8px}
  .fbtrack a{flex:0 0 44%}
  .fbtrack img{height:150px}
}

/* ---------- 3. 内页头 v3 化：大字 + 红线 + 编辑式落版 ---------- */
.page-head{position:relative;padding:146px 48px 0}
.page-head h1{font-family:var(--didone);font-weight:400;font-size:clamp(52px,8.6vw,118px);
  line-height:.88;letter-spacing:-.006em;margin:0}
.page-head h1::after{content:"";display:block;height:1px;width:min(760px,90%);margin-top:30px;
  background:linear-gradient(90deg,#B33A2B,#B33A2B 10%,rgba(179,58,43,.28) 62%,transparent)}
html.ja .page-head h1{font-family:var(--jp-serif);font-size:clamp(44px,6.6vw,92px);
  line-height:1.14;letter-spacing:.05em}
.page-head .lede{margin-top:26px;max-width:42ch;color:#D9D1C4}
@media(max-width:1000px){
  .page-head{padding:104px 22px 0}
  .page-head h1::after{margin-top:22px}
}

/* ---------- 4. 段落之间的胶片齿孔分隔线 ---------- */
.perf{display:block;height:10px;margin:0;border:0;background:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='10'><rect x='4' y='2' width='12' height='6' rx='1.5' fill='%23E8E0D2' fill-opacity='.13'/></svg>");
  background-repeat:repeat-x;background-position:0 50%}

/* =====================================================================
   CAST · 登場人物（2026-11-02 改：左に肖像、右に台帳が横から出る）
   1行1人で下へ。肖像を押すと衣が落ち、右から身上書がスライドイン。
   ===================================================================== */
.cast-list{position:relative;z-index:2;max-width:1280px;margin:44px auto 0;padding:0 48px}
.castrow{position:relative;display:grid;grid-template-columns:340px 1fr;gap:46px;
  padding:40px 0;border-top:1px solid var(--hair);align-items:stretch}
.castrow:last-of-type{border-bottom:1px solid var(--hair)}
.cfigure{position:relative;min-width:0}
.cbtn{all:unset;cursor:pointer;display:block;width:100%;min-width:0;-webkit-tap-highlight-color:transparent}
.cbtn:focus-visible{outline:1px solid var(--red-lt);outline-offset:6px}
.castrow .frame{padding:14px;width:100%;transition:box-shadow .5s ease}
.castrow.open .frame{box-shadow:0 28px 54px rgba(0,0,0,.85),
  inset 0 0 0 1px rgba(217,112,90,.5),inset 0 0 0 3px #120D09,
  inset 0 0 0 4px rgba(168,135,63,.45),inset 0 0 26px rgba(0,0,0,.75)}
.cwin{position:relative;aspect-ratio:3/4;padding:8px}
.cpic{position:absolute;inset:8px;overflow:hidden;background:#0A0807;
  box-shadow:inset 0 0 0 1px rgba(168,135,63,.32),inset 0 0 18px rgba(0,0,0,.9)}
.cpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  filter:contrast(1.045) saturate(.95);
  transition:opacity .95s cubic-bezier(.4,0,.2,1),transform 7s ease}
.cpic .bare{opacity:0}
.castrow.open .cpic .dress{opacity:0}
.castrow.open .cpic .bare{opacity:1;transform:scale(1.03)}
.cnum{position:absolute;left:26px;top:24px;z-index:4;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.24em;color:rgba(232,224,210,.66);text-shadow:0 1px 6px rgba(0,0,0,.9)}
.chint{position:absolute;right:22px;bottom:20px;z-index:4;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.2em;color:rgba(232,224,210,.75);background:rgba(10,8,7,.6);padding:4px 7px;
  border:1px solid rgba(232,224,210,.22);transition:color .3s,border-color .3s}
.cbtn:hover .chint{color:var(--paper);border-color:rgba(217,112,90,.6)}
.castrow.open .chint{display:none}

/* 右半分：ふだんは名前、押すと台帳が右から入る */
.cbody{position:relative;min-width:0;overflow:hidden}
.cface{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;
  padding:10px 0 8px;transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .38s ease}
.cface .ckick{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--red-lt);margin-bottom:16px}
.cface h2{font-family:var(--jp-serif);font-weight:400;font-size:clamp(24px,2.7vw,36px);
  line-height:1.35;margin:0;letter-spacing:.02em}
.cface .cwork{margin:16px 0 0;font-size:13px;color:#A79D91;line-height:1.85;max-width:40ch}
.cface .copentip{display:block;margin-top:auto;width:100%;padding-top:14px;
  border-top:1px solid var(--hair);font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:var(--ash)}
.castrow.open .cface{transform:translateX(-30px);opacity:0;pointer-events:none}

.cdrawer{position:absolute;inset:0;transform:translateX(103%);
  transition:transform .62s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(115deg,rgba(232,224,210,.055),rgba(232,224,210,.012));
  border-left:1px solid rgba(217,112,90,.45);padding:24px 26px 22px 30px;overflow:auto}
.castrow.open .cdrawer{transform:translateX(0)}
.cdhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.cdhead b{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;color:var(--red-lt);font-weight:400}
.cclose{all:unset;cursor:pointer;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  color:var(--ash);padding:4px 6px}
.cclose:hover{color:var(--paper)}
.cfacts{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;margin:0 0 16px}
.cfacts div{display:flex;gap:12px;align-items:baseline;padding:7px 0;border-bottom:1px solid rgba(232,224,210,.08)}
.cfacts dt{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash);min-width:92px;flex:none}
.cfacts dd{margin:0;font-size:12.5px;line-height:1.6;color:#E2DACD}
.cbio{margin:0 0 10px;font-size:12.5px;line-height:1.9;color:#C8BFB3;max-width:64ch}
.cchar{margin:0 0 10px;font-size:12.5px;line-height:1.85;color:#C8BFB3;max-width:64ch}
.cchar b{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);font-weight:400;margin-right:8px}
.cquote{margin:0;padding-top:10px;border-top:1px solid rgba(232,224,210,.12);
  font-family:var(--jp-serif);font-size:14px;line-height:1.85;color:var(--red-lt);letter-spacing:.03em}
.castnext{position:relative;z-index:2;max-width:1280px;margin:56px auto 0;padding:0 48px}
.castnext .in{display:flex;align-items:baseline;gap:24px;padding:22px 26px;
  border:1px dashed rgba(232,224,210,.16);background:rgba(232,224,210,.015)}
.castnext b{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--red-lt);font-weight:400}
.castnext p{margin:0;font-size:13px;color:var(--ash);line-height:1.8}
@media(max-width:1000px){
  .cast-list{padding:0 22px}
  .castrow{grid-template-columns:158px 1fr;gap:18px;padding:28px 0}
  .cface h2{font-size:19px}
  .cface .ckick{font-size:8px;margin-bottom:10px}
  .cface .cwork{font-size:11.5px;margin-top:10px}
  .cface .copentip{margin-top:14px;font-size:8px;letter-spacing:.18em}
  .cdrawer{padding:16px 14px 16px 18px}
  .cfacts{grid-template-columns:1fr;margin-bottom:12px}
  .cfacts dt{min-width:66px}
  .cbio{font-size:11.5px;line-height:1.8}
  .castnext{padding:0 22px}
  .castnext .in{display:block}
  .castnext p{margin-top:10px}
}
@media(max-width:620px){
  .castrow{grid-template-columns:124px 1fr;gap:14px}
  .cface h2{font-size:16.5px}
  .cface .cwork{display:none}
  .cface .copentip{margin-top:10px}
}


/* ===== 2026-11-02 追加：作品/角色详情页、創作ノート ===== */
.sec-label.num{padding-top:9px;letter-spacing:.28em}
.wdetail{max-width:1280px;margin:0 auto;padding:56px 48px 0;display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:0 56px;align-items:start}
.wdetail .frame{padding:14px}
.wdetail .frame .win{padding:8px}
.wdetail .frame img{display:block;width:100%;height:auto}
.wfacts{list-style:none;padding:0;margin:0;border-top:1px solid var(--hair)}
.wfacts>div{display:grid;grid-template-columns:112px 1fr;gap:16px;border-bottom:1px solid var(--hair);padding:13px 0}
.wfacts dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ash);text-transform:uppercase;padding-top:3px}
.wfacts dd{margin:0;font-family:var(--jp);font-size:13.5px;line-height:1.8;color:var(--paper)}
.wdetail .cquote{margin-top:24px;font-size:14px}
.prose .block p{color:#C8BFB3;max-width:66ch;line-height:1.95;margin:0 0 15px}
.prose .block p:last-child{margin-bottom:0}
.wlist{list-style:none;padding:0;margin:0;color:#C8BFB3;max-width:66ch}
.wlist li{border-bottom:1px solid var(--hair);padding:10px 0;font-size:13.5px;line-height:1.8}
.wlist li:last-child{border-bottom:0}
.craftlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.craftlist a{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--hair);padding:15px 0;color:var(--paper);font-family:var(--jp);font-size:13.5px;letter-spacing:.02em}
.craftlist a span{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--ash)}
.craftlist a:hover{border-color:var(--paper);color:var(--red-lt)}
.pglinks{max-width:1280px;margin:24px auto 0;padding:16px 48px 96px;display:flex;flex-wrap:wrap;gap:0 32px;border-top:1px solid var(--hair)}
.pglinks a{font-family:var(--jp);font-size:12.5px;color:var(--ash);padding:10px 0;border-bottom:1px solid transparent}
.pglinks a:hover{color:var(--paper);border-color:var(--hair)}
.workcard h3 a{color:inherit;text-decoration:none}
.workcard h3 a:hover{color:var(--red-lt)}
.btext h3 a{color:inherit;text-decoration:none}
@media(max-width:900px){
  .wdetail{grid-template-columns:1fr;gap:32px;padding:40px 22px 0}
  .craftlist{grid-template-columns:1fr;gap:0}
  .pglinks{padding:16px 22px 70px}
}

/* 2026-11-02 EN launch */
.cfull{margin:0 0 14px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.cfull a{color:var(--red-lt);border-bottom:1px solid var(--red)}
.hero-sets{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.hero-sets a{color:var(--ash);border-bottom:1px solid var(--hair)}
.hero-sets a:hover{color:var(--red-lt);border-color:var(--red)}