/* A graphic frame: ink, navy and vermilion. Interaction styles stay in their own files. */
.graphic-site{--graphic-navy:#14334e;--graphic-orange:#ff5427;--graphic-paper:#f4f4f0;--accent:#db431c;background:var(--graphic-paper)}
.graphic-site .site-header{background:var(--graphic-paper);border-bottom:1px solid #d3d6d3}
.graphic-site .site-header .brand{font-weight:700;letter-spacing:.025em}
.graphic-site .site-header nav{font-weight:600}
.graphic-site .top-content{display:grid;grid-template-columns:42% 58%;grid-template-rows:minmax(0,1fr) 72px;padding:0;gap:0}
.graphic-site .top-content h1{grid-column:1;grid-row:1;align-self:center;text-align:left;padding:0 9%;font:800 clamp(40px,4.5vw,78px)/1.38 var(--sans);letter-spacing:-.025em;white-space:normal}
.graphic-site .top-content h1>span{display:block;white-space:nowrap}
.graphic-site .hero-object-area{grid-column:2;grid-row:1;padding:38px 38px 110px;min-height:0;background:var(--graphic-navy)}
.graphic-site .top-frame{width:min(80%,710px,calc((100svh - 240px)*1.46));min-width:0;max-width:80%}
.graphic-site .hero-aside{left:28px;top:auto;bottom:28px;color:#e3e9ef;font:500 12px/1.8 var(--sans);letter-spacing:.1em}
.graphic-site .hero-aside:before{background:var(--graphic-orange);margin-bottom:12px}
.graphic-site .hero-side-label{right:16px;top:32px;color:#d0dce6;font-size:10px}
.graphic-site .hero-side-label i{background:linear-gradient(#ffffff55,var(--graphic-orange),#ffffff55)}
.graphic-site .hero-bottom{grid-column:1/-1;grid-row:2;padding:12px 4.5%;align-items:center;background:var(--graphic-paper)}
.graphic-site .hero-art-credit{position:static;font-size:10px;max-width:none}
.graphic-site .hero-index{color:var(--graphic-navy)}
.graphic-site .scroll-cue{font-size:11px;gap:5px}
.craft-highlight{display:grid;grid-template-columns:1fr 1fr;background:#ecece8}
.craft-highlight-visual{margin:0;position:relative;display:flex;align-items:center;padding:38px;background:#e9e9e4;overflow:hidden}
.craft-highlight-crop{width:100%;aspect-ratio:1600/1200;overflow:hidden}
.craft-highlight-crop img{display:block;width:100%;height:auto;transform:translateY(-21%)}
.craft-highlight-visual figcaption{position:absolute;left:38px;bottom:20px;font-size:11px;color:#5c6565}
.craft-highlight-copy{background:var(--graphic-orange);padding:60px 10%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;color:#121e25}
.craft-highlight-copy h2{font:800 clamp(48px,6.6vw,102px)/1.18 var(--sans);letter-spacing:-.045em;margin:28px 0 30px}
.craft-highlight-copy>p:not(.eyebrow){font-size:16px;line-height:1.9;margin:0 0 20px}
.craft-highlight-copy .reading-link-arrow{color:#121e25}
.graphic-site .introduction{background:var(--graphic-paper);padding:90px 8%;grid-template-columns:1.1fr 1fr;gap:28px 9%;border-bottom:1px solid #cdd3d5}
.graphic-site .introduction h2{font:800 clamp(30px,3.5vw,53px)/1.5 var(--sans);letter-spacing:-.03em}
.graphic-site .introduction>p:not(.eyebrow){font-size:16px;line-height:2.15}
.graphic-site .introduction .eyebrow{color:var(--graphic-navy)}
.graphic-site .yohaku-section{border-top:12px solid var(--graphic-navy)}
.graphic-site .site-footer{background:var(--graphic-navy);color:#f4f5f2;border-top:0}
.graphic-site .company-details dt,.graphic-site .site-footer .artwork-credit,.graphic-site .editorial-footer>p{color:#c4d0d9}
.graphic-site .site-footer a:focus-visible{outline-color:#ff8b66}
.graphic-site .page-breadcrumb{background:var(--graphic-paper)}
.graphic-site .story-hero h1,.graphic-site .manufacturing-hero h1{font-family:var(--sans);font-weight:800;letter-spacing:-.035em;line-height:1.4}
.graphic-site.editorial-page h2{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;line-height:1.5}
.graphic-site .story-hero{padding-top:60px;padding-bottom:70px;border-bottom:12px solid var(--graphic-navy)}
.graphic-site .story-letter{background:var(--graphic-navy);color:white}
.graphic-site .story-letter .chapter-marker span{color:#d6e0e7}
.graphic-site .story-letter-copy p{font-family:var(--sans);font-weight:500}
.graphic-site .story-year{color:var(--accent);font-weight:700}
.graphic-site .story-yohaku-intro{background:var(--graphic-orange);padding:42px;margin-bottom:0;gap:5%;color:#121e25}
.graphic-site .story-yohaku-intro .chapter-marker,.graphic-site .story-yohaku-intro .chapter-marker span{color:#27323a}
.graphic-site .reflection-figure{background:white;padding:30px}
.graphic-site .story-closing{background:var(--graphic-navy);color:white;border:0}
.graphic-site .story-closing .editorial-link{border-color:#bdcad5}
.graphic-site .story-closing .editorial-link small{color:#c5d2dc}
.graphic-site .manufacturing-hero{background:var(--graphic-navy);color:white;border-bottom:12px solid var(--graphic-orange)}
.graphic-site .manufacturing-hero .page-kicker span{color:#c5d2dc}
.graphic-site .manufacturing-hero-bottom nav a{border-color:#9fafbd}
.graphic-site .process-type{background:var(--graphic-orange);color:#121e25}
.graphic-site .process-type>p{font-weight:800;letter-spacing:-.08em}
.graphic-site .process-type>span,.graphic-site .process-type small{color:#28383f}
.graphic-site .process-check{background:var(--graphic-orange);border-color:transparent;padding-right:5%}
.graphic-site .process-check .chapter-marker,.graphic-site .process-check .chapter-marker span,.graphic-site .detail-points span,.graphic-site .detail-points p{color:#25343b}
.graphic-site .detail-points article{border-color:#182c3b66}
.graphic-site .detail-points h3{font-family:var(--sans);font-weight:700}
.graphic-site .craft-archive{background:var(--graphic-navy);color:white}
.graphic-site .craft-archive .chapter-marker span,.graphic-site .craft-archive figcaption,.graphic-site .craft-archive figcaption>span{color:#cad7df}
.graphic-site .craft-archive .archive-gallery strong{color:white;font-family:var(--sans);font-weight:700}
.graphic-site .craft-archive .archive-gallery time{color:#ff9470}
.graphic-site .craft-archive .editorial-link{border-color:#b9c9d4}
.graphic-site .craft-archive .editorial-link small{color:#d0dce6}
.graphic-site .history-heading h1{font-family:var(--sans);font-weight:800;letter-spacing:-.04em}
.graphic-site .history-heading{border-bottom:12px solid var(--graphic-orange);margin-bottom:32px}
.graphic-site .history-range{font-weight:800;color:var(--graphic-navy)}
.graphic-site .milestone-copy h2{font-family:var(--sans);font-weight:700}
.graphic-site .history-company-heading h2{font-family:var(--sans);font-weight:800}
@media(max-width:1000px) and (min-width:761px){
  .graphic-site .top-content h1{font-size:clamp(32px,4.1vw,45px);padding:0 7%}
  .graphic-site .hero-object-area{padding-inline:20px}
  .craft-highlight-copy{padding:42px 9%}
}
@media(max-width:760px){
  .graphic-site .top-content{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) 70px;padding:0}
  .graphic-site .top-eyebrow{grid-column:1;grid-row:1;margin:0;padding:16px 6% 0;font-size:8px;color:#566571}
  .graphic-site .top-content h1{grid-column:1;grid-row:1;align-self:end;text-align:left;padding:40px 7% 18px;font-size:clamp(30px,8.4vw,46px);line-height:1.35}
  .graphic-site .top-content h1>span{display:block}
  .graphic-site .hero-object-area{grid-column:1;grid-row:2;padding:26px 22px 44px}
  .graphic-site .top-frame{width:min(70vw,330px);max-width:82%;min-width:0}
  .graphic-site .hero-aside{left:18px;bottom:8px;font-size:9px;line-height:1.4;letter-spacing:.05em}
  .graphic-site .hero-aside br{display:none}
  .graphic-site .hero-aside:before{display:inline-block;width:18px;margin:0 9px 3px 0}
  .graphic-site .hero-bottom{grid-column:1;grid-row:3;position:relative;min-height:0;padding:8px 6% 22px}
  .graphic-site .hero-art-credit{position:absolute;bottom:4px;left:0;right:0;font-size:8px;text-align:center}
  .graphic-site .hero-bottom .scroll-cue{font-size:10px;gap:3px;margin:auto}
  .graphic-site .compact-top .top-content{padding:0}
  .graphic-site .compact-top .top-eyebrow{padding-top:12px;margin:0}
  .graphic-site .compact-top h1{font-size:clamp(28px,7.6vw,38px);line-height:1.3;padding-top:34px;padding-bottom:14px}
  .graphic-site .compact-top .hero-object-area{padding-block:24px 38px}
  .graphic-site .compact-top .top-frame{width:min(66vw,calc((var(--top-screen-height,100svh) - 270px)*1.46))}
  .graphic-site .compact-top .hero-bottom{min-height:0;padding:8px 6% 22px}
  .craft-highlight{grid-template-columns:1fr}
  .craft-highlight-visual{padding:24px 24px 38px;order:2}
  .craft-highlight-visual figcaption{left:24px;bottom:13px;font-size:10px}
  .craft-highlight-copy{padding:36px 8%}
  .craft-highlight-copy h2{font-size:clamp(48px,14vw,68px);margin:22px 0}
  .craft-highlight-copy h2 br{display:none}
  .craft-highlight-copy h2{max-width:5em}
  .craft-highlight-copy>p:not(.eyebrow){font-size:14px}
  .graphic-site .introduction{grid-template-columns:1fr;padding:55px 8%;gap:24px}
  .graphic-site .introduction h2{font-size:31px}
  .graphic-site .story-hero{padding-top:34px;padding-bottom:34px}
  .graphic-site .story-hero h1{font-size:clamp(36px,10vw,52px)}
  .graphic-site .story-yohaku-intro{padding:28px 22px;gap:12px}
  .graphic-site .reflection-figure{padding:18px 12px}
  .graphic-site .manufacturing-hero h1{font-size:clamp(36px,10vw,52px)}
  .graphic-site .history-heading h1{font-size:clamp(30px,7.5vw,45px)}
}

.graphic-site .hero-message{grid-column:1;grid-row:1;align-self:center;padding:0 9%;position:relative;z-index:1}
.graphic-site .hero-message h1{padding:0;font-size:clamp(40px,5.4vw,94px)}
.hero-description{font-size:16px;line-height:1.9;letter-spacing:.04em;margin:30px 0 0}
.hero-message-label{display:block;font-size:10px;line-height:1.9;letter-spacing:.16em;margin-top:48px;border-top:1px solid #88949b;width:fit-content;padding-top:16px}
@media(max-width:1000px) and (min-width:761px){.graphic-site .hero-message{padding:0 7%}.graphic-site .hero-message h1{font-size:4.9vw}.hero-description{font-size:14px}}
@media(max-width:760px){.graphic-site .hero-message{grid-column:1;grid-row:1;align-self:end;padding:40px 7% 18px}.graphic-site .hero-message h1{padding:0;font-size:clamp(30px,8.4vw,46px)}.hero-description,.hero-message-label{display:none}.graphic-site .compact-top .hero-message{padding-top:34px;padding-bottom:14px}.graphic-site .compact-top .hero-message h1{padding:0;font-size:clamp(28px,7.6vw,38px)}}

.graphic-site .hero-message .mobile-break{display:none}