/* marge / Editorial edition. Composition, scale and measured negative space. */
@media screen {
  .panorama-active .panorama-scene { border-right:0; }
  .panorama-active .scene-kicker::after { display:none; }
  .panorama-active .scene-kicker { gap:18px; }
  .panorama-active .panorama-word { pointer-events:none; }
  .panorama-active .scene-services .section-head h2 br { display:block; }
  .panorama-active .scene-beginning .scene-scroll { padding:28px 4vw 42px; }
  .panorama-active .scene-beginning .hero-signature {
    position:absolute; inset:-25px 0 auto; z-index:3; margin:0;
    width:100%; overflow:clip; padding:0 2vw .18em; box-sizing:border-box;
    font-size:min(39vw,58vh); line-height:.76; letter-spacing:-.095em;
    color:var(--m-ink); text-shadow:none;
  }
  .panorama-active .scene-beginning .hero-visual { overflow:visible; }
  .panorama-active .scene-beginning .hero-image { overflow:visible; }
  .panorama-active .scene-beginning .hero-image img { min-height:0; object-position:52% 50%; }
  .panorama-active .scene-beginning .hero-image figcaption {
    position:absolute;
    background:none; color:var(--m-muted); font-size:8px;
    inset:auto 0 -23px; padding:0; max-width:none;
  }
  .panorama-active .scene-beginning .hero-copy {
    padding:0; display:block; align-self:end; z-index:4;
  }
  .panorama-active .scene-beginning .hero-copy>.eyebrow { font-size:9px; margin-bottom:17px; }
  .panorama-active .scene-beginning .hero-title { z-index:4; font-weight:400; }
  .panorama-active .scene-beginning .hero-title-line:last-child { padding-left:0; }
  .panorama-active .scene-beginning .hero-description { font-size:13px; line-height:2; margin-bottom:23px!important; }
  .panorama-active .scene-beginning .wp-block-buttons { display:flex; flex-direction:row; gap:18px; flex-wrap:wrap; }
  .panorama-active .scene-beginning .wp-block-button { margin-bottom:9px; }
  .panorama-active .scene-beginning .wp-block-button__link { min-height:36px; font-size:11px; }
  .panorama-active .scene-beginning .panorama-explore { margin-top:25px; font-size:8px; }
  .panorama-active .scene-beginning .explore-arrow { font-size:30px; }
}
@media screen and (min-width:782px) {
  .panorama-active .scene-beginning .scene-scroll {
    display:grid; grid-template-columns:29% 36% 27%; gap:0 4%;
    grid-template-rows:52px minmax(210px,1fr) minmax(320px,auto); min-height:0;
  }
  .panorama-active .scene-beginning .scene-kicker { position:static; grid-column:1/-1; grid-row:1; align-self:start; margin:0!important; }
  .panorama-active .scene-beginning .hero-visual {
    grid-column:2; grid-row:2/4; align-self:end; width:100%;
    height:calc(100% - 90px); min-height:350px; order:0;
  }
  .panorama-active .scene-beginning .hero-copy { grid-column:3; grid-row:3; margin:0!important; }
  .panorama-active .scene-beginning .hero-title {
    grid-column:1; grid-row:3; align-self:end; position:relative;
    font-size:clamp(30px,3.25vw,57px)!important; line-height:1.5;
    letter-spacing:-.035em; margin:0 0 3px!important;
  }
  .panorama-active .scene-beginning .hero-title::before {
    content:'APPAREL OEM / TOKYO'; display:block; margin-bottom:27px;
    font:9px/1.4 Arial,sans-serif; letter-spacing:.06em;
  }
}
@media screen and (min-width:1500px) {
  .panorama-active .scene-beginning .hero-signature { font-size:min(39vw,58vh); top:-25px; padding-left:4vw; }
  .panorama-active .scene-beginning .hero-visual { height:calc(100% - 125px); }
}
@media screen and (max-width:781px) {
  .panorama-active .scene-beginning .scene-scroll { display:flex; padding:26px 25px 35px; }
  .panorama-active .scene-beginning .scene-kicker { position:static; order:0; margin:0!important; }
  .panorama-active .scene-beginning .hero-signature { top:74px; left:0; font-size:40vw; }
  .panorama-active .scene-beginning .hero-visual { order:1; width:76%; height:335px; min-height:0; margin:125px 0 55px auto!important; }
  .panorama-active .scene-beginning .hero-title { order:2; font-size:35px!important; line-height:1.4; margin:0 0 30px!important; }
  .panorama-active .scene-beginning .hero-copy { order:3; width:100%; }
  .panorama-active .scene-beginning .hero-description { font-size:14px; }
  .panorama-active .scene-beginning .wp-block-buttons { display:flex; flex-direction:row; gap:24px; }
  .panorama-active .scene-beginning .panorama-explore { margin-top:18px; font-size:9px; }
}
/* Each spread has a different reading rhythm within the same ink and paper palette. */
@media screen {
  .panorama-active .scene-pattern { background:#e2e7e5; --m-line:#acb8b5; }
  .panorama-active .scene-sample { background:#283d4a; --m-ink:#f4f0e7; --m-muted:#c9cec7; --m-line:#687978; }
  .panorama-active .scene-faq { background:#e8e8e0; }
  .panorama-active .scene-contact { --m-paper:#f4f0e7; --m-ink:#283d4a; --m-muted:#63716f; --m-line:#b8bdb5; background:var(--m-paper); }
  .panorama-active .scene-beginning .hero-signature .type-line { transform:translateX(var(--editorial-shift,0px)); }
  .panorama-active .inquiry-arrow { font:70px/1 Arial,sans-serif; transition:transform .3s; }
  .panorama-active .marge-inquiry-link:hover .inquiry-arrow { transform:translate(5px,-5px); }
  .panorama-active .marge-hubspot-entry .marge-inquiry-link { gap:16px; }
}
@media screen and (min-width:782px) {
  .panorama-active .scene-story-index { --scene-width:92vw; }
  .panorama-active .scene-story-index .scene-scroll {
    display:grid; grid-template-columns:34% 60%; column-gap:6%;
    grid-template-rows:auto 1fr auto; padding-right:6vw;
  }
  .panorama-active .scene-story-index .index-title {
    align-self:center; font-size:12vw!important; margin:0 0 12px -.05em;
  }
  .panorama-active .scene-story-index .index-prelude { display:block; font-size:.62em; font-style:italic; letter-spacing:-.07em; margin:0 0 .34em .08em; }
  .panorama-active .scene-story-index .index-name { display:block; letter-spacing:-.085em; white-space:nowrap; }
  .panorama-active .scene-story-index .panorama-index-nav {
    display:grid; grid-template-columns:1fr 1fr; gap:38px 30px; align-self:center; padding-bottom:36px;
  }
  .panorama-active .scene-story-index .panorama-index-nav a {
    display:grid; grid-template-columns:1fr auto; row-gap:18px;
    padding:16px 0 24px; border-bottom:0; border-top:1px solid var(--m-line);
  }
  .panorama-active .scene-story-index .index-number { grid-column:1/-1; }
  .panorama-active .scene-story-index .panorama-index-nav a:nth-child(even) { transform:translateY(36px); }
  .panorama-active .scene-story-index .index-en { font-size:3vw; }
  .panorama-active .scene-story-index .index-arrow { font-size:20px; }
  .panorama-active .scene-story-index .index-note { margin-top:48px; }

  .panorama-active .scene-services { --scene-width:120vw; background:#eae5d9; }
  .panorama-active .scene-services .service-manifesto {
    font-size:15.8vw; margin:28px 0 40px; line-height:.83;
    transform:translateX(var(--editorial-shift,0px));
  }
  .panorama-active .service-manifesto .type-line:first-child { font-size:.88em; }
  .panorama-active .service-manifesto .type-line:last-child { padding-left:12vw; }
  .panorama-active .scene-services .section-head { margin-left:0!important; margin-right:0!important; max-width:37vw; }
  .panorama-active .scene-services h2 { font-size:2.8vw; }
  .panorama-active .scene-services .services-still { width:25vw; height:auto; right:33vw; bottom:50px; }
  .panorama-active .scene-services .services-still img { height:29vh; min-height:200px; }
  .panorama-active .scene-services .service-next { margin-left:0; margin-top:auto; padding-top:28px; }

  .panorama-active .scene-oem { --scene-width:110vw; }
  .panorama-active .scene-oem .service-ghost {
    order:3; margin:65px 0 0 -.04em; font-size:19.5vw; line-height:.85;
    transform:translateX(var(--editorial-shift,0px));
  }
  .panorama-active .scene-oem .service-columns {
    grid-template-columns:38% 1fr; grid-template-rows:auto 1fr;
    gap:28px 7vw!important; margin:38px 0 auto!important; max-width:88vw!important;
  }
  .panorama-active .scene-oem .service-index { grid-column:1; grid-row:1; }
  .panorama-active .scene-oem .service-number { font-size:65px; letter-spacing:-.055em; }
  .panorama-active .scene-oem .service-title { grid-column:1; grid-row:2; }
  .panorama-active .scene-oem .service-title h3 { font-size:4vw; }
  .panorama-active .scene-oem .service-body { grid-column:2; grid-row:1/3; margin-top:0; padding-top:0; }
  .panorama-active .scene-oem .service-body h4 { font-size:24px; max-width:600px; }

  .panorama-active .scene-pattern { --scene-width:106vw; }
  .panorama-active .scene-pattern .service-ghost { text-align:left; font-size:24vw; margin-top:4vh; margin-bottom:5vh; }
  .panorama-active .scene-pattern .service-columns { grid-template-columns:1fr 30%; max-width:89vw!important; }
  .panorama-active .scene-pattern .service-number { font-size:25vw; font-style:italic; }
  .panorama-active .scene-pattern .service-title h3 { font-size:3.4vw; }

  .panorama-active .scene-sample { --scene-width:112vw; }
  .panorama-active .scene-sample .scene-kicker { z-index:3; }
  .panorama-active .scene-sample .service-ghost { margin-top:5vh; margin-bottom:5vh; font-size:24vw; }
  .panorama-active .scene-sample .sample-photo { width:48%; }
  .panorama-active .scene-sample .service-columns { width:44vw; margin-left:0!important; }
  .panorama-active .scene-sample .service-title h3 { font-size:3.1vw; }
  .panorama-active .scene-sample .service-number { position:absolute; top:0; right:0; font-size:45px; }

  .panorama-active .scene-about { --scene-width:104vw; }
  .panorama-active .scene-about .scene-scroll { padding-top:30px; }
  .panorama-active .scene-about .chapter-word {
    position:absolute; left:3.3vw; top:180px; margin:0; font-size:13.2vw;
    line-height:.9; letter-spacing:-.065em;
  }
  .panorama-active .scene-about .chapter-word .type-line:first-child { font-size:25vw; font-style:italic; line-height:.92; }
  .panorama-active .scene-about .about-columns { display:block!important; width:43vw; margin:35px 0 0 50vw!important; }
  .panorama-active .scene-about .about-title h2 { font-size:3vw; line-height:1.5; }
  .panorama-active .scene-about .about-subtitle { font-size:17px; margin-top:19px; }
  .panorama-active .scene-about .about-items { margin-top:34px; }
  .panorama-active .scene-about .approach-item h3 { font-size:19px; }
  .panorama-active .scene-about .planning-note { width:43vw; margin-left:50vw; font-size:10px!important; padding-bottom:8px; }

  .panorama-active .scene-flow { --scene-width:112vw; }
  .panorama-active .scene-flow .scene-scroll { display:flex; flex-direction:column; }
  .panorama-active .scene-flow .chapter-word { order:5; font-size:15.2vw; line-height:.9; margin:40px 0 0 -.035em; }
  .panorama-active .scene-flow h2 { font-size:34px; margin-top:10px; }
  .panorama-active .scene-flow .flow-grid { order:2; margin:40px 0 0; gap:26px; }
  .panorama-active .scene-flow .flow-step { border-top:1px solid var(--m-line); padding-top:20px; }
  .panorama-active .scene-flow .flow-number { font-size:7vw; font-style:normal; margin-bottom:20px; }
  .panorama-active .scene-flow .planning-note { order:3; font-size:10px!important; margin-top:30px; }

  .panorama-active .scene-journal { --scene-width:110vw; }
  .panorama-active .scene-journal .chapter-word { margin-top:7vh; font-size:17vw; }
  .panorama-active .scene-journal .chapter-word .type-line:last-child { padding-left:22vw; transform:translateX(var(--editorial-shift,0px)); }
  .panorama-active .scene-journal .journal-photo { left:53vw; top:14%; bottom:auto; width:31vw; height:79%; }
  .panorama-active .journal-awaiting .section-head,.panorama-active .journal-awaiting .journal-empty { width:37vw; }
  .panorama-active .scene-journal h2 { font-size:30px; }
  .panorama-active .scene-journal .journal-empty { margin-top:20px; }

  .panorama-active .scene-faq { --scene-width:100vw; }
  .panorama-active .scene-faq .chapter-word { position:absolute; top:145px; left:3.5vw; font-size:11vw; line-height:.88; margin:0; }
  .panorama-active .scene-faq .chapter-word .type-line:first-child { font-style:italic; margin-bottom:.12em; }
  .panorama-active .scene-faq .faq-columns { grid-template-columns:35% 55%; gap:10%; margin-top:65px; }
  .panorama-active .scene-faq .faq-columns h2 { margin-top:335px; font-size:2.8vw; }
  .panorama-active .scene-faq .faq-list summary { font-size:17px; }
  .panorama-active .scene-faq .faq-list details { padding:28px 0; }

  .panorama-active .scene-contact { --scene-width:100vw; }
  .panorama-active .scene-contact .scene-scroll { display:flex; flex-direction:column; }
  .panorama-active .scene-contact .chapter-word { font-size:min(22.5vw,31vh); margin:1vh 0 3vh; line-height:.86; }
  .panorama-active .scene-contact .chapter-word .type-line { font-style:normal; }
  .panorama-active .scene-contact .contact-columns { margin-top:auto!important; grid-template-columns:40% 1fr; gap:10%; }
  .panorama-active .scene-contact .contact-copy h2 { font-size:3.7vw; }
  .panorama-active .scene-contact .contact-entry { align-self:end; }
  .panorama-active .scene-contact .contact-entry h3 { font-size:25px; }
  .panorama-active .scene-contact .contact-entry>p { max-width:450px; }
  .panorama-active .scene-contact .marge-hubspot-entry { margin-top:25px; }
  .panorama-active .scene-contact .inquiry-label { font-size:20px; }
  .panorama-active .scene-contact .inquiry-arrow { font-size:100px; }
  .panorama-active .scene-contact .marge-inquiry-link { padding:7px 0; }
  .panorama-active .scene-contact .marge-inquiry-note { font-size:10px!important; }

  .panorama-active .scene-colophon .footer-top { position:relative; }
  .panorama-active .scene-colophon .footer-top .wp-block-site-title { font-size:30vw!important; margin:35px 0 70px!important; }
  .panorama-active .scene-colophon .footer-links { position:absolute; right:0; bottom:0; margin:0; gap:65px; }
}
@media screen and (min-width:782px) and (max-width:1100px) {
  .panorama-active .scene-story-index { --scene-width:100vw; }
  .panorama-active .scene-story-index .index-en { font-size:3.4vw; }
  .panorama-active .scene-story-index .panorama-index-nav { gap:35px 20px; }
  .panorama-active .scene-oem .service-body h4 { font-size:21px; }
  .panorama-active .scene-about .about-title h2 { font-size:28px; }
  .panorama-active .scene-about .chapter-word { top:240px; }
  .panorama-active .scene-flow .flow-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .panorama-active .scene-flow .flow-number { font-size:70px; }
  .panorama-active .scene-faq .faq-columns h2 { margin-top:300px; font-size:29px; }
  .panorama-active .scene-contact .contact-copy h2 { font-size:33px; }
  .panorama-active .scene-contact .contact-columns { grid-template-columns:39% 1fr; gap:9%; }
  .panorama-active .scene-contact .inquiry-label { font-size:17px; }
  .panorama-active .scene-contact .inquiry-arrow { font-size:75px; }
}
@media screen and (max-width:781px) {
  .panorama-active .scene-story-index .index-title { font-size:29vw!important; margin:25px 0 40px; }
  .panorama-active .scene-story-index .index-prelude { display:block; font-size:.58em; font-style:italic; letter-spacing:-.06em; margin-bottom:.25em; }
  .panorama-active .scene-story-index .index-name { display:block; letter-spacing:-.08em; }
  .panorama-active .scene-services .service-manifesto { font-size:12vw; }
  .panorama-active .scene-about .chapter-word { font-size:25vw; line-height:.86; }
  .panorama-active .scene-about .chapter-word .type-line:first-child { font-style:italic; }
  .panorama-active .scene-flow .chapter-word { font-size:16vw; }
  .panorama-active .scene-faq .chapter-word { font-size:24vw; line-height:.9; }
  .panorama-active .scene-faq .chapter-word .type-line:first-child { font-style:italic; }
  .panorama-active .scene-contact .chapter-word { font-size:22vw; font-style:normal; }
  .panorama-active .scene-contact .inquiry-label { font-size:17px; }
  .panorama-active .inquiry-arrow { font-size:60px; }
  .panorama-active .scene-beginning .hero-image figcaption { font-size:8px; }
}
/* Reading mode shares the layout but never clips the document's content. */
@media screen {
  .panorama-active.panorama-reading-mode .scene-scroll { height:auto!important; overflow-x:clip; overflow-y:visible; }
  .panorama-active.panorama-reading-mode .scene-beginning .scene-scroll { min-height:800px; }
  .panorama-active.panorama-reading-mode .scene-beginning .hero-visual { min-height:470px; }
}
@media screen and (max-width:781px) {
  .panorama-active.panorama-reading-mode .scene-beginning .scene-scroll { min-height:0; }
  .panorama-active.panorama-reading-mode .scene-beginning .hero-visual { height:335px; min-height:0; }
}