:root{
 --paper:#fbfaf7; --ink:#4c4a47; --muted:#8b8882; --line:#e9e5de;
 --aqua:#a8d8d8; --coral:#efb8aa; --sand:#ead8bb; --white:#fff;
 --max:1160px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans JP",sans-serif;font-weight:300;letter-spacing:.035em}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.wrap{width:min(var(--max),calc(100% - 64px));margin:auto}
header{position:fixed;inset:0 0 auto;z-index:20;background:rgba(251,250,247,.88);backdrop-filter:blur(10px)}
.header{height:86px;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:"Zen Maru Gothic";font-size:18px;font-weight:500;letter-spacing:.08em}
nav{display:flex;gap:28px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
nav a{position:relative} nav a:after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--coral);transition:.3s} nav a:hover:after{width:100%}
.hero{min-height:100vh;display:grid;align-items:center;padding:130px 0 90px}
.hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:10vw;align-items:center}
.kicker{font-size:10px;letter-spacing:.24em;color:var(--muted);margin-bottom:30px}
h1{font-family:"Zen Maru Gothic";font-weight:400;font-size:clamp(42px,5.5vw,76px);line-height:1.42;letter-spacing:.08em;margin:0}
.hero-copy p{margin:32px 0 0;font-size:13px;line-height:2.2;color:var(--muted)}
.hero-art{position:relative;padding:9% 0 0 9%}
.hero-photo{aspect-ratio:4/3;background:#f0ede7;position:relative;overflow:hidden}
.hero-photo:before{content:"WORKS";position:absolute;inset:0;display:grid;place-items:center;color:#aaa49b;font-size:11px;letter-spacing:.3em}
.block{position:absolute;z-index:-1}
.block.a{width:42%;height:35%;background:var(--aqua);right:-4%;top:1%}
.block.b{width:30%;height:28%;background:var(--coral);left:1%;bottom:-7%}
.scroll{position:absolute;bottom:34px;left:50%;font-size:9px;letter-spacing:.25em;color:var(--muted);writing-mode:vertical-rl}
section{padding:150px 0}
.section-head{display:grid;grid-template-columns:1fr 2fr;gap:40px;margin-bottom:70px}
.en{font-size:10px;letter-spacing:.25em;color:var(--muted);text-transform:uppercase}
.section-head h2{font-family:"Zen Maru Gothic";font-weight:400;font-size:clamp(26px,3vw,40px);line-height:1.7;margin:0}
.about{border-top:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:10vw;align-items:start}
.portrait{max-width:330px;position:relative}
.portrait img{width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(.75)}
.portrait:after{content:"";position:absolute;width:38%;height:26%;right:-12%;bottom:-10%;background:var(--sand);z-index:-1}
.about-copy{font-size:14px;line-height:2.35}
.about-copy .lead{font-family:"Zen Maru Gothic";font-size:22px;line-height:2;margin:0 0 30px}
.about-meta{margin-top:38px;padding-top:24px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);line-height:2}
.works{background:#fff}
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px 28px}
.work-image{aspect-ratio:4/3;background:#f2f0eb;position:relative;overflow:hidden}
.work-image:after{content:"IMAGE";position:absolute;inset:0;display:grid;place-items:center;font-size:9px;letter-spacing:.25em;color:#aaa}
.work:nth-child(3n+1) .work-image{box-shadow:-14px 14px 0 var(--aqua)}
.work:nth-child(3n+2) .work-image{box-shadow:14px -14px 0 #f6e2dc}
.work:nth-child(3n) .work-image{box-shadow:14px 14px 0 #f2e8d7}
.work h3{font-size:13px;font-weight:400;margin:22px 0 5px}
.work p{font-size:10px;color:var(--muted);margin:0;letter-spacing:.12em}
.service-list{border-top:1px solid var(--line)}
.service-row{display:grid;grid-template-columns:90px 1fr 1.5fr;gap:30px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start}
.service-no{font-size:10px;color:var(--muted)} .service-row h3{font-family:"Zen Maru Gothic";font-size:18px;font-weight:400;margin:0}
.service-row p{font-size:12px;line-height:2;margin:0;color:var(--muted)}
.note{margin-top:36px;font-size:11px;color:var(--muted);line-height:2}
.contact{background:var(--aqua);padding:130px 0}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:end}
.contact h2{font-family:"Zen Maru Gothic";font-size:clamp(34px,4vw,56px);font-weight:400;line-height:1.6;margin:14px 0}
.contact p{font-size:12px;line-height:2;color:#5f6967}
.links{display:flex;flex-direction:column;border-top:1px solid rgba(76,74,71,.25)}
.links a{padding:22px 0;border-bottom:1px solid rgba(76,74,71,.25);display:flex;justify-content:space-between;font-size:12px}
footer{padding:40px 0;background:var(--paper)}
.footer{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);letter-spacing:.12em}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease} .reveal.show{opacity:1;transform:none}
@media(max-width:760px){
 .wrap{width:min(100% - 44px,var(--max))} .header{height:70px} nav{gap:14px} nav a:nth-child(2),nav a:nth-child(3){display:none}
 .hero{min-height:auto;padding:135px 0 110px} .hero-grid,.about-grid,.contact-inner{grid-template-columns:1fr;gap:70px}
 .hero-art{padding:8% 5% 0 8%} h1{font-size:43px} section{padding:105px 0}
 .section-head{grid-template-columns:1fr;gap:18px;margin-bottom:55px}
 .portrait{max-width:250px} .works-grid{grid-template-columns:1fr;gap:65px}
 .service-row{grid-template-columns:42px 1fr;gap:18px} .service-row p{grid-column:2}
 .contact{padding:100px 0} .footer{gap:20px;flex-direction:column}
}

.work-image.actual{background:#f2f0eb;display:flex;align-items:center;justify-content:center}
.work-image.actual:after{display:none}
.work-image.actual img{width:100%;height:100%;object-fit:contain;background:#f6f3ed}
.project-tile{display:grid;place-items:center;padding:28px}
.project-tile:after{display:none}
.project-tile div{display:flex;flex-direction:column;gap:12px}
.project-tile span,.project-tile small{font-size:9px;letter-spacing:.18em;color:var(--muted)}
.project-tile strong{font-family:"Zen Maru Gothic";font-size:20px;line-height:1.65;font-weight:500}
.pottery{background:#e9e1d4}.instagram{background:#e5f0ed}
.ai-design{background:#f2eee6}
.ai-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:10vw;align-items:start}
.ai-design h2{font-family:"Zen Maru Gothic";font-size:clamp(34px,4.6vw,62px);font-weight:400;line-height:1.55;margin:22px 0 0}
.ai-copy{font-size:13px;line-height:2.25}
.ai-lead{font-family:"Zen Maru Gothic";font-size:19px!important;line-height:2!important;margin-top:0}
.ai-statement{margin-top:45px;padding:30px 0;border-top:1px solid #d9d2c6;border-bottom:1px solid #d9d2c6;font-family:"Zen Maru Gothic";font-size:18px;line-height:2}
.ai-statement strong{font-size:24px;font-weight:500}
.ai-benefits{display:grid;grid-template-columns:repeat(4,1fr);margin-top:100px;border-top:1px solid #d9d2c6;border-bottom:1px solid #d9d2c6}
.ai-benefits>div{padding:30px 24px;border-right:1px solid #d9d2c6}.ai-benefits>div:last-child{border-right:0}
.ai-benefits span{display:block;font-size:9px;color:var(--muted);margin-bottom:24px}
.ai-benefits strong{font-size:10px;letter-spacing:.18em;font-weight:500}
.ai-benefits p{font-size:11px;line-height:1.8;color:var(--muted);margin:10px 0 0}
.teacher-message{margin-top:110px;max-width:760px;margin-left:auto}
.teacher-message h3{font-family:"Zen Maru Gothic";font-size:clamp(26px,3vw,40px);font-weight:400;margin:20px 0}
.teacher-message p{font-size:13px;line-height:2.25;color:var(--muted)}
@media(max-width:760px){
 .ai-grid{grid-template-columns:1fr;gap:50px}.ai-benefits{grid-template-columns:1fr 1fr;margin-top:70px}
 .ai-benefits>div:nth-child(2){border-right:0}.ai-benefits>div{border-bottom:1px solid #d9d2c6}
 .teacher-message{margin-top:75px}
 nav a[href="#ai-design"]{display:none}
}


.hero-sub{font-family:"Zen Maru Gothic";font-size:clamp(17px,2vw,25px);line-height:1.9;margin-top:28px}
.hero-note{font-size:9px;letter-spacing:.15em;color:var(--muted);margin-top:28px}
.about-copy .lead{font-family:"Zen Maru Gothic";font-size:20px!important;line-height:2!important;color:var(--ink)!important}
.process{background:#fff}
.process-intro{max-width:760px}
.process-intro h2{font-family:"Zen Maru Gothic";font-size:clamp(34px,4.5vw,58px);font-weight:400;margin:20px 0 26px}
.process-intro p{font-size:13px;line-height:2.2;color:var(--muted)}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:80px;border-top:1px solid #ddd6ca;border-left:1px solid #ddd6ca}
.process-grid>div{padding:32px 28px 38px;border-right:1px solid #ddd6ca;border-bottom:1px solid #ddd6ca;min-height:190px}
.process-grid span{font-size:9px;letter-spacing:.16em;color:var(--muted)}
.process-grid h3{font-family:"Zen Maru Gothic";font-size:18px;font-weight:500;margin:28px 0 12px}
.process-grid p{font-size:11px;line-height:1.9;color:var(--muted)}
.service-note{margin-top:45px;max-width:680px;font-size:12px;line-height:2;color:var(--muted)}
.positioning{background:#4b4a46;color:#f8f5ef;text-align:center;padding:100px 0}
.positioning .en{color:#c7c4bd}
.positioning p{font-family:"Zen Maru Gothic";font-size:clamp(22px,3vw,38px);line-height:1.8;margin:20px 0 0}
.positioning strong{font-weight:500}
@media(max-width:760px){
 .process-grid{grid-template-columns:1fr}
 .process-grid>div{min-height:auto}
 .hero-note{line-height:1.8}
}


/* Ver.4 hero slideshow */
.hero-grid{grid-template-columns:.82fr 1.18fr;gap:7vw}
.hero-art{position:relative;padding:5% 4% 6% 5%}
.hero-slider{position:relative;aspect-ratio:4/3;background:#f0ede7;overflow:hidden;box-shadow:0 18px 60px rgba(52,48,43,.07)}
.hero-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s ease;pointer-events:none}
.hero-slide.active{opacity:1;pointer-events:auto}
.hero-slide img{width:100%;height:100%;object-fit:contain;background:#f3f0e9;display:block}
.hero-slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 22px;background:linear-gradient(transparent,rgba(20,20,18,.76));color:white;display:flex;justify-content:space-between;align-items:end;gap:20px}
.hero-slide figcaption span{font-size:8px;letter-spacing:.15em;opacity:.82}
.hero-slide figcaption strong{font-family:"Zen Maru Gothic";font-size:11px;font-weight:400;text-align:right}
.hero-controls{display:flex;gap:10px;align-items:center;margin-top:18px;justify-content:flex-end}
.hero-dot{appearance:none;border:0;width:22px;height:2px;padding:0;background:#d6d0c7;cursor:pointer;transition:width .4s ease,background .4s ease}
.hero-dot.active{width:46px;background:#65615b}
.hero-art .shape-a{position:absolute;width:27%;height:28%;background:#efb8aa;left:0;bottom:0;z-index:-1;transition:transform 1.4s ease}
.hero-art .shape-b{position:absolute;width:18%;height:23%;background:#a8d8d8;right:0;top:0;z-index:-1;transition:transform 1.4s ease}
@media(max-width:760px){
 .hero-grid{grid-template-columns:1fr;gap:52px}
 .hero-art{padding:5% 3% 7% 5%}
 .hero-slider{aspect-ratio:4/5}
 .hero-slide figcaption{padding:15px}
 .hero-slide figcaption{display:block}
 .hero-slide figcaption strong{display:block;text-align:left;margin-top:6px}
}
@media(prefers-reduced-motion:reduce){
 .hero-slide{transition:none}
}


/* temporary brand logo + controlled hero line breaks */
.site-logo{display:block;width:185px;flex:0 0 auto}
.site-logo img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.hero-copy h1 span{display:block;white-space:nowrap}
@media(max-width:980px){
 .site-logo{width:150px}
 .hero-copy h1{font-size:clamp(42px,7.1vw,72px)}
}
@media(max-width:760px){
 .site-logo{width:132px}
 .hero-copy h1{font-size:clamp(38px,11vw,58px);letter-spacing:-.045em}
}



.keep-lines span{display:block;white-space:nowrap}
.keep-line{white-space:nowrap}
.service-intro{max-width:620px;margin:24px 0 0;font-size:12px;line-height:2;color:var(--muted)}
.service-row{grid-template-columns:52px minmax(240px,.9fr) 1.2fr}
.service-row h3{overflow-wrap:normal;word-break:keep-all}
@media(max-width:980px){
 .ai-design h2{font-size:clamp(30px,4.4vw,48px)}
}
@media(max-width:760px){
 .keep-lines span{white-space:normal;word-break:keep-all}
 .keep-line{white-space:normal;word-break:keep-all}
 .service-row{grid-template-columns:38px 1fr}
 .service-row p{grid-column:2}
 .service-row h3{font-size:15px}
}


/* ===== Ver.4.3 public polish ===== */
body{overflow-wrap:normal}
h1,h2,h3,.lead,.service-intro,.teacher-message p{word-break:keep-all;overflow-wrap:normal}

/* Clean temporary wordmark: proposal-board annotation removed */
.brand-wordmark{
  display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--ink);
  line-height:1;min-width:190px;
}
.brand-wordmark strong{
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;
  font-size:23px;letter-spacing:.02em;font-weight:700;
}
.brand-wordmark span{
  font-family:"Cormorant Garamond",serif;font-size:9px;letter-spacing:.28em;
}

/* Hero: retain quietness but give the work more presence */
.hero{grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr);gap:5vw}
.hero-visual{max-width:520px;width:100%;justify-self:end}
.hero-frame{width:100%}
.hero-slide img{width:100%;height:100%;object-fit:contain}
.hero-caption{
  left:4%;right:4%;bottom:7%;width:auto;max-width:92%;
  padding:18px 20px;background:rgba(54,52,49,.80);
}
.hero-caption .title{font-size:14px;line-height:1.65}
.hero-caption .meta{font-size:9px;line-height:1.5}

/* Service intro: intentional lineation */
.service-intro span{display:block;white-space:nowrap}
.service-intro .service-gap{margin-top:12px}

/* Actual Hidetoubou DM artwork, both sides */
.hidetoubou-art{
  position:relative;height:100%;min-height:305px;background:#f2e7e1;overflow:hidden;
}
.hidetoubou-art img{
  position:absolute;object-fit:contain;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.hidetoubou-back{width:69%;height:76%;right:5%;top:7%}
.hidetoubou-front{width:56%;height:74%;left:5%;bottom:5%;z-index:2}

@media(max-width:980px){
  .hero{grid-template-columns:1fr}
  .hero-visual{max-width:620px;justify-self:start}
}
@media(max-width:760px){
  .brand-wordmark{min-width:0}
  .brand-wordmark strong{font-size:19px}
  .brand-wordmark span{font-size:7px}
  .service-intro span{white-space:normal;word-break:keep-all}
  .hero-caption{padding:14px 15px}
  .hidetoubou-art{min-height:280px}
}

/* ===== Ver.4.4 final visual adjustments ===== */
:root{
  --ink:#5b5955;
  --muted:#8f8b84;
}
body{color:var(--ink)}
.nav a,.eyebrow,.en,.meta,.service-no{color:#77736d}
.hero-copy p,.service-intro,.about-copy p,.ai-copy p,.teacher-message p{color:#85817a}

/* definitive header wordmark */
.brand-logo,.logo-image{display:none!important}
.brand-wordmark{
  display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:5px;text-decoration:none;color:#65625d;line-height:1;
}
.brand-wordmark strong{
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif!important;
  font-size:22px!important;font-weight:600!important;letter-spacing:.01em!important;
}
.brand-wordmark span{
  font-family:"Noto Sans JP",sans-serif!important;
  font-size:7px!important;font-weight:400!important;letter-spacing:.30em!important;color:#99958e!important;
}

/* stronger hero work presence */
.hero{grid-template-columns:minmax(0,1fr) minmax(470px,.95fr)!important;gap:4vw!important}
.hero-visual{width:min(100%,590px)!important;max-width:590px!important;justify-self:end!important}
.hero-frame{width:100%!important}
.hero-caption{
  left:5%!important;right:5%!important;bottom:6%!important;
  padding:15px 18px!important;background:rgba(63,61,57,.68)!important;
}
.hero-caption .title{font-size:13px!important;line-height:1.55!important}
.hero-caption .meta{font-size:8px!important;line-height:1.45!important;color:rgba(255,255,255,.78)!important}

/* service lineation */
.service-intro{max-width:none!important}
.service-intro span{display:block!important;white-space:nowrap!important}
.service-intro .service-gap{margin-top:12px!important}

/* headings: prevent mid-word Japanese breaks */
h1,h2,h3,.work-title,.service-intro{word-break:keep-all!important;overflow-wrap:normal!important}

/* Hidetoubou actual images */
.hidetoubou-art{position:relative;height:100%;min-height:305px;background:#f2e7e1;overflow:hidden}
.hidetoubou-art img{position:absolute;object-fit:contain;background:#fff;box-shadow:0 7px 20px rgba(0,0,0,.07)}
.hidetoubou-back{width:68%;height:76%;right:5%;top:7%}
.hidetoubou-front{width:56%;height:74%;left:5%;bottom:5%;z-index:2}

@media(max-width:1050px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(390px,.8fr)!important}
  .hero-visual{max-width:500px!important}
}
@media(max-width:850px){
  .hero{grid-template-columns:1fr!important}
  .hero-visual{max-width:620px!important;justify-self:start!important}
}
@media(max-width:760px){
  .brand-wordmark strong{font-size:18px!important}
  .service-intro span{white-space:normal!important}
}

/* ===== Ver.4.6 SAFE: based on stable Ver.4.4 ===== */

/* Keep original hero structure intact; modestly increase artwork presence only. */
.hero-art{
  transform:scale(1.12);
  transform-origin:center right;
}

/* Actual Hidetoubou DM artwork in Works. */
.hidetoubou-safe{
  position:relative!important;
  overflow:hidden!important;
  background:#f1e8df!important;
}
.hidetoubou-safe img{
  position:absolute!important;
  object-fit:contain!important;
  background:#fff!important;
  box-shadow:0 8px 22px rgba(35,31,27,.09)!important;
}
.hidetoubou-safe .hide-back-safe{
  width:69%!important;
  height:77%!important;
  right:5%!important;
  top:6%!important;
}
.hidetoubou-safe .hide-front-safe{
  width:57%!important;
  height:77%!important;
  left:5%!important;
  bottom:5%!important;
  z-index:2!important;
}

@media(max-width:980px){
  .hero-art{transform:scale(1.05);transform-origin:center left}
}
@media(max-width:760px){
  .hero-art{transform:none}
}

/* ===== Ver.4.7 DM FIX =====
   Hidetoubou original aspect ratio:
   front 595x865 / back 592x865.
   No crop, no stretch, no overlap.
*/
.hidetoubou-dm-original{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  padding:18px 20px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  background:#f1e8df!important;
}
.hidetoubou-dm-original .dm-sheet{
  height:100%!important;
  min-height:0!important;
  flex:0 1 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
}
.hidetoubou-dm-original img{
  position:static!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  box-shadow:0 5px 14px rgba(35,31,27,.08)!important;
}

/* Neutralize the older Hidetoubou overlap rules without touching other works. */
.hidetoubou-dm-original:after{display:none!important}

@media(max-width:700px){
  .hidetoubou-dm-original{gap:8px!important;padding:12px!important}
}

/* ===== Ver.4.8: requested final fixes ===== */
/* Enlarge ONLY the existing hero artwork without changing HTML/grid structure. */
.hero-art{
  transform:scale(1.38)!important;
  transform-origin:center right!important;
  z-index:2;
}
@media(max-width:1100px){
  .hero-art{transform:scale(1.24)!important}
}
@media(max-width:850px){
  .hero-art{transform:scale(1.10)!important;transform-origin:center left!important}
}
@media(max-width:760px){
  .hero-art{transform:none!important}
}

/* Contact email link */
.contact a[href*="mail.google.com"],
.contact-mail-fallback{
  text-decoration:none;
  color:inherit;
  border-bottom:1px solid rgba(91,89,85,.35);
}

/* ===== Ver.4.9 STATIC HERO ===== */
.hero-static-art{
  transform:none!important;
  width:min(430px,100%)!important;
  max-width:430px!important;
  aspect-ratio:1/1!important;
  justify-self:center!important;
  position:relative!important;
}
.hero-static-art .shape-a,
.hero-static-art .shape-b{
  z-index:0!important;
}
.hero-static-image{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  box-shadow:0 16px 48px rgba(45,40,35,.07);
}
@media(max-width:1100px){
  .hero-static-art{width:min(390px,100%)!important}
}
@media(max-width:850px){
  .hero-static-art{
    width:min(440px,88vw)!important;
    justify-self:start!important;
  }
}
@media(max-width:600px){
  .hero-static-art{width:min(360px,88vw)!important}
}