/* Shared publication safety layer for all web-production samples.
   It may prevent clipping, but it must not replace each artwork's typography. */
html{
  line-break:strict;
  text-size-adjust:100%;
  overflow-x:clip;
}
body{
  padding-top:44px;
}
*,*::before,*::after{
  box-sizing:border-box;
}
:where(main,section,article,header,footer,nav,div){
  min-inline-size:0;
}
:where(a,button,input,select,textarea,summary){
  touch-action:manipulation;
}
:where(a,button,[role="button"]){
  min-width:24px;
  min-height:24px;
}
.skip,.skip-link{
  min-width:44px;
  min-height:44px;
}
img,video,svg,canvas{
  max-width:100%;
}

/* Only remove accidental blank rows inside an explicitly split heading.
   Font family, weight, size and line-height remain owned by each sample. */
:where(h1,h2,h3){
  max-inline-size:100%;
  word-break:auto-phrase;
  overflow-wrap:anywhere;
  text-wrap:pretty;
}
:where(h1,h2,h3) .phrase{
  margin-block:0!important;
  padding-block:0!important;
  word-break:auto-phrase;
  overflow-wrap:anywhere;
  text-wrap:pretty;
}

/* The sample utility bar is outside the artwork composition. */
.demo{
  position:fixed!important;
  inset:0 0 auto!important;
  z-index:120!important;
  width:100%!important;
  max-width:none!important;
  height:44px!important;
  min-height:44px;
  margin:0!important;
  padding:10px 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px;
  border-radius:0!important;
  line-height:1.35;
  font-size:12px!important;
}
.demo a{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding-inline:10px;
  white-space:nowrap;
}
body>.demo + #main>header{
  top:56px!important;
}
body>.demo + #main>header.capsule{
  top:auto!important;
  bottom:18px!important;
}
:where(header.top,header.lab-nav,header.arch-head){
  bottom:auto!important;
}

/* Page-specific geometry corrections found by the full viewport audit. */
.t2.word{
  overflow:visible!important;
  font-size:clamp(18px,3vw,34px);
  padding:clamp(12px,2vw,24px);
}
.headline h1 b{
  margin-top:0!important;
}
.edition .big-num{
  font-size:48px!important;
  line-height:1!important;
  opacity:.28;
  right:16px!important;
  bottom:16px!important;
}
.slider figcaption{
  left:12px!important;
  right:auto!important;
  bottom:12px!important;
  padding:6px 8px;
  background:rgba(246,244,239,.9);
}
.crest small{
  bottom:0!important;
}
.specimen ol{
  line-height:1.5!important;
}
.mount-copy{
  max-inline-size:50vw;
}
.bean-cast header>p + h1{
  margin-top:40px!important;
}
.eyebrow + :where(h1,h2,h3),
.elements>header>span + h2,
.brush>span + h1{
  margin-top:22px!important;
}
.chapter h2 + p,
.daily h2 + p,
.mount-copy h1 + span,
.brush h1 + p{
  margin-top:16px!important;
}
.routes h3,
.bean-grid h2{
  margin-top:10px!important;
}
.care h2{font-size:clamp(42px,4vw,52px)!important}
.mosaic-hero .anchor h1{font-size:clamp(48px,5.5vw,72px)!important}
.makers h2,.membership h2{font-size:clamp(48px,6vw,84px)!important}
.place h2{font-size:clamp(40px,4vw,48px)!important}
.mount-copy h1{font-size:clamp(54px,7vw,104px)!important;line-height:1.05!important}
.routes h2,.guide h2,.book-trail h2{line-height:1.05!important}
.guide h2{font-size:clamp(56px,7vw,98px)!important}
.three-gates h2{font-size:clamp(46px,4.5vw,64px)!important;white-space:nowrap}
.schedule h2,.pulse-story h2,.join-pulse h2{font-size:clamp(54px,7vw,98px)!important;line-height:1.05!important}
.farmer h2{font-size:clamp(44px,5vw,58px)!important;line-height:1.08!important}
.roaster h2,.visit-ember h2{font-size:clamp(52px,7vw,92px)!important}
.conclusion h1{line-height:1.3!important}
.pulse-collage h1{bottom:6vh!important;line-height:.95!important}
.pulse-story{grid-template-columns:1.15fr .85fr!important}
.pulse-story>div{padding:4vw!important}
.pulse-story h2{font-size:clamp(40px,4.5vw,58px)!important}
.case-strip h2{font-size:44px!important;line-height:1.08!important}
.case-strip article>div>b{display:block;margin-bottom:10px}
.arch-hero h1,
.relay-hero h1{
  overflow-wrap:normal;
  word-break:normal;
}
.lab-hero h1,
.award-intro h1,
.arch-hero h1{
  line-height:.9!important;
}
.formula-list h3{
  white-space:nowrap;
}
.arch-hero h1 i{
  display:block;
  font-size:max(12px,.34em)!important;
  line-height:1.3;
}
.mark span{
  font-size:max(12px,.18em)!important;
}
.concept h2,
.access h2{
  white-space:nowrap;
}
.care h2,
.batch-grid h3,
.concept-grid h3,
.about-grid h3{
  white-space:nowrap;
}
.label>span + h1,
.notebook>span + h2{
  margin-top:22px!important;
}
.notebook h2 + p,
.brush h1 + p{
  margin-top:22px!important;
}
.case-strip{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  overflow:visible!important;
}
.case-strip article{
  width:100%!important;
  min-width:0!important;
  height:clamp(480px,48vw,680px)!important;
}
.case-strip article>div{
  max-width:calc(100% - 32px);
}
body>.demo + #main>header.orbit-head{
  position:sticky!important;
  inset:44px 0 auto!important;
  min-height:68px;
  padding:16px 20px;
  align-items:center;
  background:rgba(5,6,6,.94);
  backdrop-filter:blur(12px);
}
.quiet-head{
  gap:16px;
}
i + small{
  display:block!important;
  margin-top:16px!important;
  padding-top:0!important;
}
time + b{
  padding-inline-start:16px!important;
  padding-block-start:0!important;
}
.split-hero>div>span{
  top:110px!important;
  bottom:auto!important;
}
.split-hero>p{
  top:auto!important;
  bottom:18px!important;
}

@media(max-width:820px){
  :where(a,button,[role="button"]),
  :where(nav a,nav button,header>a,header>button,.cta,.button,[class*="button"],[class*="Button"]){
    min-width:44px!important;
    min-height:44px!important;
  }
  .demo a{min-height:44px}
  body>.demo + #main>header{top:52px!important}
  body>.demo + #main>header.capsule{top:auto!important;bottom:18px!important}
  body>.demo + #main>header nav{display:none!important}

  :where(h1,h2,h3) .phrase{
    width:auto!important;
    white-space:normal!important;
  }

  .paired{grid-template-columns:1fr!important}
  .paired>div{min-height:auto!important}
  .mosaic-hero{grid-template-columns:1fr!important}
  .mosaic-hero .anchor{position:relative!important;top:auto!important;padding-top:0!important}
  .place{grid-template-columns:1fr!important}
  .bean-grid{grid-template-columns:1fr 1fr!important}

  .play-field{
    height:auto!important;
    min-height:0!important;
    padding:80px 16px 40px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px!important;
    align-items:center;
  }
  .play-field h1{
    position:static!important;
    transform:none!important;
    grid-column:1/-1;
    padding:30px 0!important;
  }
  .play-field :where(.object,.scribble,.hint){
    position:static!important;
    inset:auto!important;
    transform:none!important;
    translate:none!important;
    margin:0!important;
  }
  .play-field .object{width:100%!important;height:120px!important}
  .play-field .scribble,.play-field .hint{padding:16px;align-self:center}

  .pulse-collage .count{left:16px!important;right:auto!important;top:120px!important}
  .pulse-collage .count small{font-size:16px!important}
  .pulse-collage .s-one{right:12px!important;top:300px!important}
  .pulse-collage .s-two{right:12px!important;top:190px!important;bottom:auto!important}
  /* 文字の大きさは 22 の site.css の器基準ルール(clamp(14px,7.7cqw,25px))1 本に任せる。
     ここに複製すると必ず drift する(2026-08-11 別人格 W-c)。折り返しだけ指定する。 */
  .bean-grid h2{white-space:nowrap}

  .edition .big-num,.edition .tape,
  a.book,.mini-route{
    position:static!important;
    inset:auto!important;
    display:inline-flex!important;
    width:max-content;
    max-width:100%;
    margin:24px!important;
    transform:none!important;
  }
  a.book{margin-top:32px!important}

  .mount-copy{
    position:absolute!important;
    left:20px!important;
    right:20px!important;
    top:160px!important;
    bottom:auto!important;
    max-inline-size:100%;
    padding:0!important;
  }
  .mount-copy h1{line-height:1.02!important}
  .relay-head,.route-hero,.relay-main{max-width:100%}
  .relay-head{padding-inline:12px}
  .route-hero{overflow:visible}
  .split-hero>div>span{top:120px!important}
  .routes h2,.guide h2,.book-trail h2{line-height:1.05!important}
  .case-strip{grid-template-columns:1fr!important}
  .case-strip article{height:520px!important}
}

@media(max-width:1100px){
  .place{grid-template-columns:1fr!important}
  .batch-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .three-gates{grid-template-columns:1fr!important}
  .three-gates>a{min-height:420px!important}
}

@media(min-width:721px) and (max-width:900px){
  .batch-grid h3{font-size:32px!important}
  .concept-grid h3{font-size:34px!important}
  .about-grid h3{font-size:44px!important}
  .sync-steps h3{font-size:24px!important;white-space:nowrap}
}

@media(max-width:480px){
  .batch-grid{grid-template-columns:1fr!important}
  .demo{padding-inline:10px!important}
  .demo>span{max-width:56%;line-height:1.25}
  .t2.word{font-size:16px!important;padding:8px!important}
  .award-intro h1{font-size:clamp(54px,18vw,72px)!important;white-space:nowrap}
  .cases .case-center{max-width:calc(100vw - 32px)}
  .cases .case-center h2{font-size:40px!important}
  .cases .case-center p{font-size:14px!important}
  .mosaic-hero .anchor h1{font-size:40px!important}
  .mount-copy h1{font-size:clamp(34px,10.25vw,40px)!important}
  .schedule h2{font-size:40px!important}
  .pulse-collage h1{line-height:.9!important}
  .schedule h2,.join-pulse h2{font-size:40px!important;line-height:1.08!important}
  .pulse-story h2{font-size:26px!important;line-height:1.12!important}
  .today h2{font-size:50px!important}
  .farmer h2,.places h2,.market-contact h2{font-size:48px!important}
  .bean-cast h1{font-size:48px!important}
  .roaster h2{font-size:clamp(27px,7.7vw,30px)!important;line-height:1.12!important}
  .visit-ember h2{font-size:40px!important;line-height:1.08!important}
  .bean-grid article{min-height:230px}
  .bean-grid{grid-template-columns:1fr!important}
  .bean-grid article>div{inset:auto 10px 14px!important;max-width:calc(100% - 20px)}
  .bean-grid h2{white-space:normal}
  .market-hero .brush h1{font-size:44px!important;line-height:1.02!important}
  .market-hero .brush p{max-width:250px}
  .market-hero{height:750px!important}
  .market-hero .market-window{top:360px!important;height:340px!important}
  .market-hero .paper-tag{right:18px!important;top:420px!important}
  .scene-room h2,
  .care h2,
  .rfq h2,
  .ritual h2,
  .manifest h2,
  .membership h2,
  .join-copy h2,
  .garden h2,
  .visit h2,
  .elements h2,
  .relay-cta h2,
  .access h2,
  .entry h2,
  .niwa-contact h2,
  .place h2,
  .fair h2,
  .orbit-contact h2,
  .quiet-contact h2{
    font-size:32px!important;
    line-height:1.12!important;
  }
  .red-hero h1{font-size:50px!important;line-height:1.02!important}
  .arch-hero h1{font-size:30px!important;line-height:1.15!important}
  .relay-hero h1{font-size:44px!important;line-height:1.02!important;white-space:nowrap}
  .concept h2,.access h2{font-size:28px!important;line-height:1.12!important}
  .sessions h2{font-size:32px!important;line-height:1.08!important;white-space:nowrap}
  .find h2{font-size:30px!important;line-height:1.12!important}
  .fire-hero>p{bottom:100px!important}
}

/* Sample 20 (studio-pulse) geometry corrections. Selectors are unique to this sample.
   Placed last so they win over the earlier sample-20 overrides in this file. */

/* Display headline tracking and leading. */
.pulse-collage h1{letter-spacing:.005em!important;line-height:1.02!important}

/* Let the picture keep its own proportions instead of a fixed pixel height, so it is
   never cropped at any column width. */
.pulse-story img{height:auto!important}

@media(max-width:720px){
  /* Studio bar sits at the bottom on small screens; the footer reserves space for it. */
  body>.demo + #main>header.pulse-side{top:auto!important;bottom:0!important}
  .pulse-collage h1{bottom:calc(86px + 4vh)!important}
  /* Hero photograph starts below the fixed utility bar. */
  .pulse-collage .hero-person{top:44px!important;height:calc(100% - 44px)!important}
  .pulse-collage .count{left:14px!important;right:auto!important;top:56px!important;
                        width:96px!important;font-size:46px!important}
  .pulse-collage .count small{bottom:10px!important;font-size:13px!important}
  .pulse-collage .s-one{left:14px!important;right:auto!important;top:198px!important;
                        padding:13px 15px!important;font-size:19px!important}
  .pulse-collage .s-two{right:10px!important;left:auto!important;top:196px!important;
                        bottom:auto!important;padding:13px 15px!important;font-size:19px!important}

  /* Three gates size to their content. */
  .three-gates>a{min-height:0!important;padding:32px 24px 28px!important}
  .three-gates>a b{margin-top:18px!important;font-size:24px!important}
  .three-gates h2{margin:6px 0 10px!important}
}

/* On phones the story panel collapses to one column, picture first. */
@media(max-width:720px){
  .pulse-story{grid-template-columns:1fr!important}
  .pulse-story img{order:-1!important;max-width:min(100%,640px)!important;margin-inline:auto!important}
  .pulse-story>div{padding:clamp(30px,5vw,56px) clamp(22px,5vw,56px)!important}
}

@media(max-width:480px){
  /* Restated so the unscoped rule at the top of this block does not take over here. */
  .pulse-collage h1{line-height:.9!important}
}

/* 2026-08-15 SEO: クレジットバーに本体ページへのリンクを 1 本足した(0円ホームページ制作)。
   ★リンクを縮ませない(≤820px): 238 行の min-width:44px!important が nowrap の自動最小サイズを
     上書きし、リンクがテキスト幅より縮んで文字が箱の外へ出ていた。
     320px では隣の文字に 4.1px 乗り(7/22 枚)、481px では右余白を 5.1px 越えていた(8/22 枚)。
     余りはクレジット側で吸う。overflow:hidden は付けない(ORIGINAL SAMPLE nn を切らないため)。
   ★≤480px はさらに欧文ロゴ表記を畳み、余白・gap・字送りを詰めてクレジットを 2 行に収める。
   ★文字サイズは変えない(min-font の床 = 12px)。★「ORIGINAL SAMPLE nn」は消さない(SoT 凍結表示)。 */
.demo>span>i{font-style:normal}
@media(max-width:820px){
  .demo>span{flex:1 1 auto!important;min-width:0!important;max-width:none!important}
  .demo a{flex:0 0 auto!important;min-width:0!important}
}
@media(max-width:480px){
  .demo{gap:6px!important;padding-inline:6px!important}
  .demo>span>i{display:none}
  .demo>span{letter-spacing:.01em!important}
  .demo a{padding-inline:3px!important;margin-inline:0!important;letter-spacing:.01em!important}
}