html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
/* Below the footer (iPhone bounce, or any space left under the page) shows footer blue instead of a grey band; top half stays page grey */
html{background:linear-gradient(to bottom,#E9EAE3 0,#E9EAE3 50%,#224394 50%,#224394 100%);}
/* Body copy: every <p> without its own font-family uses the Japanese text face, so Latin letters and digits inside Japanese sentences do not switch to Unbounded */
p{font-family:"Zen Kaku Gothic New",sans-serif;}
@media (max-width:760px){
  html,body{overflow-x:clip;}
  [style*="min-width:1100px"],[style*="min-width: 1100px"]{min-width:0 !important;}
  [style*="grid-template-columns"]:not([data-wd="gal"]){grid-template-columns:minmax(0,1fr) !important;}
  section[style*="padding"],div[style*="max-width:1100px"],div[style*="max-width: 1100px"],div[style*="max-width:1200px"],div[style*="max-width: 1200px"],div[style*="max-width:1280px"],div[style*="max-width: 1280px"],div[style*="max-width:1360px"],div[style*="max-width: 1360px"],div[style*="max-width:1440px"],div[style*="max-width: 1440px"]{padding-left:20px !important;padding-right:20px !important;}
  section[style*="padding:96px"],section[style*="padding: 96px"],section[style*="padding:88px"],section[style*="padding: 88px"],section[style*="padding:80px"],section[style*="padding: 80px"],section[style*="padding:120px"],section[style*="padding: 120px"],section[style*="padding:110px"],section[style*="padding: 110px"]{padding-top:56px !important;padding-bottom:56px !important;}
  [style*="gap:56px"],[style*="gap: 56px"],[style*="gap:64px"],[style*="gap: 64px"],[style*="gap:72px"],[style*="gap: 72px"],[style*="gap:80px"],[style*="gap: 80px"],[style*="gap:96px"],[style*="gap: 96px"]{gap:28px !important;}
  [style*="font-size:72px"],[style*="font-size: 72px"],[style*="font-size:74px"],[style*="font-size: 74px"],[style*="font-size:80px"],[style*="font-size: 80px"],[style*="font-size:88px"],[style*="font-size: 88px"],[style*="font-size:96px"],[style*="font-size: 96px"],[style*="font-size:110px"],[style*="font-size: 110px"],[style*="font-size:120px"],[style*="font-size: 120px"]{font-size:44px !important;}
  [style*="font-size:52px"],[style*="font-size: 52px"],[style*="font-size:54px"],[style*="font-size: 54px"],[style*="font-size:56px"],[style*="font-size: 56px"],[style*="font-size:60px"],[style*="font-size: 60px"],[style*="font-size:64px"],[style*="font-size: 64px"]{font-size:34px !important;}
  [style*="font-size:36px"],[style*="font-size: 36px"],[style*="font-size:38px"],[style*="font-size: 38px"],[style*="font-size:40px"],[style*="font-size: 40px"],[style*="font-size:42px"],[style*="font-size: 42px"],[style*="font-size:44px"],[style*="font-size: 44px"],[style*="font-size:46px"],[style*="font-size: 46px"],[style*="font-size:48px"],[style*="font-size: 48px"]{font-size:27px !important;}
  [style*="font-size:24px"],[style*="font-size: 24px"],[style*="font-size:26px"],[style*="font-size: 26px"],[style*="font-size:28px"],[style*="font-size: 28px"],[style*="font-size:30px"],[style*="font-size: 30px"],[style*="font-size:32px"],[style*="font-size: 32px"]{font-size:20px !important;}
  img,video{max-width:100%;}
  [style*="width"]:not([style*="fixed"]):not([style*="absolute"]){max-width:100%;}
  /* marquee rows must keep their full width so translateX(-50%) loops correctly */
  [style*="max-content"][style*="animation"]{max-width:none !important;}
  section[aria-label="Works gallery"] [style*="animation"]{animation-duration:60s !important;}
  section[aria-label="Works gallery"] [style*="ccmarqueeR"]{animation-duration:68s !important;}
  /* phones keep the smaller tiles (PC tiles are twice as big) */
  section[aria-label="Works gallery"] img{width:196px !important; height:140px !important; margin-right:10px !important;}
  section[aria-label="Works gallery"] [style*="ccmarqueeR"]{margin-top:10px !important;}
  main,section,footer{padding-right:max(20px, 38px) !important;}
  #bookTrack > div{grid-template-rows:auto minmax(0,1fr) !important;gap:14px !important;padding:28px 20px 20px !important;}
  #bookTrack > div > div:first-child{padding:0 !important;max-width:none !important;}
  #bookTrack > div > div:first-child > p, #bookTrack > div > div:first-child > div[style*="height:1px"]{display:none !important;}
  #bookTrack h2{font-size:20px !important;}
  [data-wd="spcol"]{right:16px !important;width:124px !important;top:16px !important;bottom:16px !important;}
  [data-wd="spphone"]{top:calc(100svh - 300px) !important;border-width:3px !important;border-radius:14px !important;}
  [data-bm="main"]{flex-direction:column !important;align-items:stretch !important;gap:20px !important;padding-right:0 !important;}
  /* phone: the selection + estimate panel rides along at the bottom of the screen (max ~1/4 height) */
  [data-bm="aside"]{position:sticky !important;top:auto !important;bottom:0;z-index:40;flex:0 0 auto !important;width:100% !important;max-height:26svh;overflow-y:auto;box-sizing:border-box;display:grid !important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px !important;background:#E9EAE3;border:2px solid #D3D4CB;border-bottom:0;border-radius:16px 16px 0 0;padding:8px 12px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -8px 22px rgba(34,67,148,.14);}
  [data-bm="tray"],[data-bm="est"]{grid-column:1 / -1;background:none !important;border:0 !important;border-radius:0 !important;padding:0 !important;}
  [data-bm="tray"]{display:flex;align-items:center;gap:8px;min-width:0;}
  [data-bm="trayhead"]{flex:0 0 auto;gap:6px;}
  [data-bm="trayhead"] > span:first-child{font-size:12px !important;}
  [data-bm="traybody"]{margin:0 !important;flex:1 1 auto;min-width:0;}
  [data-bm="empty"]{display:none;}
  [data-bm="chips"]{flex-wrap:nowrap !important;overflow-x:auto;gap:6px !important;scrollbar-width:none;}
  [data-bm="chips"]::-webkit-scrollbar{display:none;}
  [data-bm="chips"] > div{flex:0 0 auto;padding:4px 8px !important;}
  [data-bm="chips"] > div > span:first-child{font-size:11.5px !important;white-space:nowrap;}
  [data-bm="est"]{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;}
  [data-bm="est"] > *,[data-bm="est"] > * > *{margin-top:0 !important;}
  [data-bm="est"] [style*="line-through"]{font-size:11px !important;}
  [data-bm="estlbl"]{font-size:10.5px !important;}
  [data-bm="est"] [style*="border-radius:20px"]{font-size:10px !important;padding:2px 7px !important;}
  [data-bm="total"]{font-size:19px !important;flex:0 0 100%;}
  [data-bm="est"] [style*="font-size:13px"]{font-size:11.5px !important;}
  [data-bm="note"]{display:none;}
  [data-bm="plannote"]{flex:0 0 100%;font-size:10.5px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  [data-bm="mnote"]{display:block !important;}
  [data-bm="cta"]{grid-column:1;padding:0 !important;box-shadow:none !important;background:none !important;border-radius:0 !important;}
  [data-bm="cta"] span{display:block;background:#224394 !important;color:#E9EAE3 !important;padding:9px !important;font-size:13.5px !important;}
  [data-bm="reset"]{grid-column:2;}
  [data-bm="reset"] span{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1.5px solid #D3D4CB;border-radius:8px;font-size:0 !important;text-decoration:none !important;}
  [data-bm="reset"] span::before{content:"↺";font-size:20px;color:#224394;}
  div[data-bm="grid"][style]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;}
  [data-bm="grid"] > div{padding:12px 10px 12px !important;min-height:0 !important;}
  [data-bm="ill"]{height:64px !important;margin-bottom:8px !important;}
  [data-bm="ill"] > div{height:60px !important;}
  [data-bm="ill"] svg{max-height:60px;width:auto;}
  [data-bm="lbl"]{font-size:12px !important;line-height:1.4 !important;}
  [data-bm="plans"]{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:8px !important;}
  [data-bm="plans"] > div{max-width:none !important;}
  [data-bm="form2"]{grid-template-columns:minmax(0,1fr) !important;}
  [data-wd="hero"]{flex-direction:column !important;align-items:stretch !important;gap:24px !important;padding-top:20px !important;}
  [data-wd="heroimg"]{flex:0 0 auto !important;width:100% !important;height:auto !important;aspect-ratio:520 / 340;}
  [data-ct="intro"]{position:static !important;}
  [data-ct="form"]{padding:24px 18px 22px !important;gap:24px !important;}
  [data-lg="head"]{padding:0 20px !important;margin-bottom:22px !important;flex-wrap:wrap;gap:6px 14px !important;}
  [data-lg="row"]{gap:40px !important;animation-duration:15s !important;}
  [data-lg="img"]{height:auto !important;max-height:44px !important;max-width:none !important;}
  [data-jl="grid"]{column-width:auto !important;columns:auto !important;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:26px 12px !important;align-items:start;}
  [data-jl="item"]{margin:0 !important;gap:10px !important;}
  [data-jl="item"]:nth-child(3n+1){grid-column:1 / -1;}
  [data-jl="item"]:not(:nth-child(3n+1)) > div:last-child{font-size:14px !important;line-height:1.55 !important;}
}

/* journal: stack the section badge above its content on phones (articles with data-jsec) */
@media (max-width:760px){
  [data-jsec]{flex-direction:column !important;gap:12px !important;}
  [data-jsec] > div{width:100%;}
}

/* journal chat-style Q&A: smaller avatars, wider bubbles on phones */
@media (max-width:760px){
  [data-chat]{gap:8px !important;max-width:none !important;}
  [data-chat] > div:first-child{flex:0 0 34px !important;height:34px !important;font-size:10px !important;}
  [data-chat] > div:last-child{padding:14px 16px !important;}
}

/* journal Q&A extra case boxes */
@media (max-width:760px){
  [data-extra]{max-width:none !important;padding:16px !important;}
}

/* journal AI examples / printer cards: image above text on phones */
@media (max-width:760px){
  [data-aiex]{grid-template-columns:1fr !important;gap:14px !important;}
}

/* phone: the right-hand tab menu is fixed, so every page keeps a wider right gutter
   (lined up with the Brand Map cards) and text never runs under the menu */
@media (max-width:760px){
  html body :is(main,section,article,footer,header)[style],html body :is(main,section,article,footer,header){padding-right:46px !important;}
  html body .work-overlay[style]{padding-right:46px !important;}
  html body :is(main,section,article,footer,header) :is(main,section,article,footer,header)[style],
  html body :is(main,section,article,footer,header) :is(main,section,article,footer,header),
  html body :is(main,section,article,footer,header) div[style*="max-width:1"]{padding-right:0 !important;}
}
@media (max-width:760px){
  [data-ph="h1"]{flex-wrap:wrap;gap:4px 14px !important;}
  #mvTagline{padding:0 46px 0 20px !important;}
}
/* home Journal: same 1-wide / 2-up rhythm as the Journal list, 4 articles on phones */
@media (max-width:760px){
  [data-jh] > [data-jl="item"]:nth-child(n+5){display:none !important;}
}

/* About: on PC the 十月十日 -> 萌 stage and the text beside it stay pinned together, centred in the window,
   so 萌 finishes level with the text. Phones play the change by time once the stage is in view (moe-morph.js), no pinning. */
@media (min-width:761px){
  [data-moe-wrap]{ display:block !important; height:150vh; align-self:start; }
  [data-moe-wrap] > svg[data-moe]{ position:sticky; top:calc(50vh - 158px); margin:0 auto; }
  [data-moe-text]{ position:sticky; top:calc(50vh - 158px); align-self:start; min-height:315px; justify-content:center; }
}

/* About: colour cards (萌黄 / 青海波). The stage is pinned and the cards swap on scroll on every screen size (moegi-scramble.js).
   Copy shows one language at a time (data-en), so on phones a whole card fits in one screen: picture behind, text on a soft veil near the bottom. */
@media (max-width:760px){
  /* the picture runs full width, under the side menu, and to the very bottom even when the browser bar hides (lvh);
     the text panel keeps clear of the menu and of the browser bar (svh) */
  html body section[data-colours][style]{ padding-right:0 !important; padding-left:0 !important; }
  [data-colours-stage]{ height:100vh !important; height:100lvh !important; }
  [data-colours-dots]{ right:42px !important; }
  [data-colour-card]{ align-items:flex-end !important; padding:0 52px 14px 14px !important; padding-bottom:calc(100lvh - 100svh + 14px) !important; background-size:cover !important; }
  [data-colour-card="0"]{ background-position:30% 20% !important; }
  [data-colour-card="1"]{ background-position:0% center !important; }
  [data-colour-card] > div{ gap:0 !important; }
  /* picker on phones: a small swatch sits on the picture above the card, its line drops down the right edge into the { } block */
  [data-moegi-pick]{ left:auto !important; right:8px !important; top:auto !important; bottom:100% !important; width:0 !important; height:var(--pick-h,150px) !important; border-top:0 !important; }
  [data-moegi-dot]{ left:auto !important; right:-12px !important; top:auto !important; bottom:calc(100% + var(--pick-h,150px)) !important; width:42px !important; height:42px !important; border-width:1.5px !important; }
  [data-moegi-text]{ gap:14px !important; background:rgba(240,241,236,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.5); padding:20px 18px; border-radius:16px; }
  [data-colour-card="1"] [data-moegi-text]{ background:rgba(250,250,247,.56); }
  [data-colour-card="1"] [data-colour-copy]{ color:#22305a !important; }
  /* phones: only the outer panel blurs (a second blur inside it doubles the work for the phone) */
  [data-moegi-text] [role="group"]{ background:rgba(233,234,227,.4) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:none !important; }
  [data-moegi-text] h2 > span:first-child{ font-size:32px !important; }
  [data-moegi-text] [role="group"]{ font-size:11.5px !important; line-height:1.85 !important; padding:12px 14px !important; }
  [data-moegi-text] [role="group"] > div[style*="grid-template-columns"]{ grid-template-columns:66px minmax(0,1fr) !important; padding-left:10px !important; }
  [data-colour-copy]{ font-size:14px !important; line-height:1.85 !important; gap:8px !important; }
}
@media (max-width:760px) and (max-height:700px){
  [data-moegi-text]{ gap:10px !important; padding:14px 14px !important; }
  [data-moegi-text] [role="group"]{ line-height:1.6 !important; }
  [data-colour-copy]{ font-size:13px !important; line-height:1.7 !important; }
}
