/* Shared woodland colours for the hero and the material studio. */
.home-page {
  --kr-pine: #213e32;
  --kr-deep: #172f26;
  --kr-moss: #52674d;
  --kr-paper: #f5f1e7;
  --kr-card: #fcf9f0;
  --kr-sage: #e7eadc;
  --kr-line: #cdd0bd;
  --kr-ink: #20362c;
  --kr-muted: #506052;
  --kr-earth: #98502f;
  --kr-ochre: #dfbd85;
  --home-type: var(--wood-type);
  --home-copy: var(--wood-muted);
  --home-gold: var(--wood-gold);
  --home-edge: var(--wood-line);
  --home-card: rgb(15 35 26 / 94%);
}

.hero {
  background-color: var(--kr-deep);
  color: var(--kr-card);
}
/* Fade only the edge below the subjects into the matching studio surround. */
.hero::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: clamp(22px, 3vw, 46px);
  background: linear-gradient(to bottom, transparent, var(--kr-deep));
}
.hero-company, .hero-lead { color: var(--kr-card); }
.hero-company:lang(zh) {
  font-size:clamp(22px,2.7vw,40px);
  font-weight:700;
  line-height:1.24;
}
@media (max-width:700px), (max-width:1000px) and (orientation:portrait) {
  .hero-company:lang(zh) { font-size:clamp(22px,6.6vw,32px); }
}
.hero-message { margin:0; container-type:inline-size; }
.hero-values {
  margin:clamp(8px,1vw,14px) 0 0;
  color:#dfedbf; font-size:clamp(17px,1.9vw,28px);
  font-size:clamp(16px,4.8cqi,28px); line-height:1.24;
  font-weight:650; letter-spacing:-.014em; text-wrap:balance;
}
.hero-values:lang(zh) {
  font-size:clamp(25px,2.7vw,40px); font-size:clamp(25px,8.1cqi,40px);
  font-weight:680; letter-spacing:.055em;
}
.hero-value { display:inline-block; white-space:nowrap; }
.hero-dot { color:var(--home-gold); font-weight:500; padding-inline:.25em .03em; }
.hero-application {
  color:var(--home-type); margin-top:clamp(10px,1vw,14px);
  font-size:clamp(16px,1.48vw,22px); line-height:1.3;
}
.hero-tech, .heritage, .canopy-switch { color: var(--kr-paper); }
.hero-tech, .heritage { font-size:.875rem; line-height:1.5; }
.hero-lead { font-size:clamp(1rem,1.16vw,1.125rem); line-height:1.6; }
@media(min-width:701px) and (max-width:1199px) and (orientation:landscape) {
  .hero-wrap { min-height:clamp(426px,49vw,575px); padding-block:30px; }
  .hero-art { object-position:52% center; }
  .hero-copy { width:42%; }
}
@media(min-width:701px) and (max-width:1000px) and (orientation:portrait) {
  .hero-wrap { padding-top:max(45svh,90vw); }
}
@media (max-width:1100px) {
  .hero-company, .hero-values, .hero-application {
    text-shadow:0 1px 2px #10251ee6, 0 0 6px #10251e99;
  }
}
/* Keep the complete pouch above long translations on short portrait phones. */
@media (max-width:359px) and (orientation:portrait),
       (max-width:700px) and (max-height:700px) and (orientation:portrait) {
  .hero-photo, .hero-canopy {
    height:min(100%, 177.68vw);
    bottom:auto;
    mask-image:linear-gradient(to bottom, black 77%, transparent);
  }
  .hero-wrap { padding-top:max(38svh,calc(89vw + 20px)); }
}

.hero .btn-primary {
  color: var(--kr-deep);
  background: var(--kr-ochre);
}
.hero .btn-primary:hover { background: #ecd4a8; }
.hero .btn-secondary {
  background: rgb(23 47 38 / 60%);
  color: var(--kr-card);
  border-color: #c8c9af;
}
.hero .btn-secondary:hover {
  background: var(--kr-paper);
  color: var(--kr-deep);
  border-color: var(--kr-paper);
}
.hero .btn:focus-visible { outline-color: var(--kr-ochre); }

.app-zone, .print-zone, .factory-zone, .service-zone {
  background:transparent;
  border-color:var(--home-edge);
}

.section {
  color: var(--home-type);
}
.section :is(h2,h3,.text-link) {
  color: var(--home-type);
}
.section-head h2, .format-head h3 {
  text-shadow:0 2px 12px rgb(6 22 13 / 48%);
}
.section .eyebrow {
  color: var(--home-gold);
}
.section .eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  flex: none;
  background: currentColor;
}
.section .text-link:hover {
  color: var(--home-gold);
}

.print-card {
  color:var(--home-type);
  background:var(--home-card);
  border-color:var(--home-edge);
}
.print-card:is(:hover,:focus-visible) {
  border-color:var(--home-gold);
}
.section :is(a,button):focus-visible {
  outline-color:var(--home-gold);
}
.app-cards { gap:clamp(22px,4.5vw,68px); align-items:start; }
.app-card {
  --outline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1 68C2 39 18 14 38 11C51 9 60 19 71 13C82 7 86 0 94 5C102 11 99 43 98 58C97 78 93 93 77 96C59 100 48 92 32 95C16 99 0 95 1 68Z'/%3E%3C/svg%3E");
  display:block; position:relative; overflow:visible; border:0; border-radius:0;
  background:transparent; color:var(--home-type);
}
.app-card[data-collection="food"] {
  --outline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M2 50C1 30 8 7 20 8C32 9 39 25 53 21C68 17 75 0 87 5C98 11 99 29 98 51C97 64 94 79 86 88C77 98 65 93 50 96C34 100 18 98 9 89C3 82 2 65 2 50Z'/%3E%3C/svg%3E");
}
@media(min-width:851px) {
  .app-card[data-collection="food"] { margin-top:clamp(20px,3.2vw,47px); }
}
.app-card .app-card-photo {
  overflow:visible; background:transparent; isolation:isolate;
}
/* Only the landscape is die-cut. The photographed pouches and their focus outlines sit above it. */
.app-card .shelf-backdrop,.app-card-photo::before {
  -webkit-mask:var(--outline) center / 100% 100% no-repeat;
  mask:var(--outline) center / 100% 100% no-repeat;
}
.app-card-photo::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(130deg,#d8c49288,#94b58866 69%,#d8c492bb);
  transform:translate(-.5%,1%) rotate(-1.5deg);
}
.app-card[data-collection="food"] .app-card-photo::before { transform:translate(.4%,1%) rotate(1.3deg); }
.app-card .sample-group { width:100%; }
.app-category {
  align-items:baseline; justify-content:initial; gap:clamp(10px,1.2vw,18px);
  padding:clamp(9px,1.1vw,17px) 4% 0; border-radius:10px; color:var(--home-type);
  text-shadow:0 1px 3px #102219,0 2px 9px #102219a6;
}
.sample-number {
  font:italic 500 clamp(17px,1.45vw,23px)/1.2 var(--serif);
  color:var(--home-gold); font-variant-numeric:tabular-nums;
}
.app-category > div { flex:1; min-width:0; }
.app-category > span {
  align-self:center;
  color:var(--home-gold);
  background:rgb(23 49 35 / 78%);
  border-color:var(--home-edge);
}
.app-category:hover > span { background:var(--home-gold); color:#193425; }

.format-head { flex-wrap:wrap; gap:4px 16px; }
.format-resources { display:flex; flex-wrap:wrap; align-items:center; gap:0 clamp(16px,2vw,32px); }
.format-head h3 { font-size:clamp(23px,2.3vw,32px); }
.format-head .text-link { font-size:clamp(17px,1.45vw,20px); }
.format-links { --format-badge:clamp(72px,6.5vw,92px); }
.format-links > a {
  min-height:calc(var(--format-badge) + 32px);
  gap:clamp(10px,1.1vw,17px); padding:12px 4px;
  font-size:clamp(21px,1.95vw,28px); line-height:1.22;
  border:0; border-bottom:1px solid var(--home-edge); border-radius:0;
  color:var(--home-type); background:transparent;
  text-shadow:0 1px 3px #102219;
}
.format-links > a:hover { border-color:var(--home-gold); }
.format-links .format-icon {
  width:var(--format-badge); height:var(--format-badge); flex-basis:var(--format-badge); padding:2px;
  color:#dfebcc;
  background:rgb(52 79 44 / 87%); border-radius:65% 30% 68% 34%;
}
.format-icon svg { height:100%; }
.format-links .ico { width:21px; height:21px; }
.format-links > a:nth-child(even) .format-icon { border-radius:34% 64% 31% 65%; }
.sample-viewer {
  border:1px solid var(--home-edge);
  border-radius:12px;
  padding:0;
  width:min(720px,calc(100% - 28px));
  max-height:calc(100dvh - 24px);
  color:var(--home-type);
  background:#172e23;
}
.sample-viewer::backdrop { background:rgb(19 34 27 / .75); }
html:has(.sample-viewer[open]) { overflow:hidden; }
.sample-detail-image {
  display:grid;
  place-items:center;
  height:min(67vh,650px);
  height:min(67dvh,650px);
  padding:24px 20px 12px;
  background:linear-gradient(180deg,#192d1926,#192d1933),
    url("explorer/textures/forest-stage.webp") center / cover #53664d;
}
.sample-detail-image img { width:100%; height:100%; min-height:0; object-fit:contain; }
.sample-viewer button {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:none;
  border:1px solid var(--home-edge);
  border-radius:50%;
  color:var(--home-type);
  background:#213e31;
}
.sample-close { position:absolute; z-index:1; right:10px; top:10px; }
.sample-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  text-align:center;
}
.sample-controls p { font-weight:600; }
.sample-controls small { color:var(--home-copy); }
.sample-controls [data-step="-1"] svg { transform:rotate(180deg); }
.app-zone .title-phrase {
  display: inline-block;
}
@media (max-width: 360px) {
  :lang(es) .app-card h3 { font-size: 21px; }
}
.app-card p, .print-card p, .stat-list dt, .service-cards p {
  color: var(--home-copy);
}
.app-card p, .print-card p, .service-cards p {
  font-size:1rem; line-height:1.65;
}
.stat-list dt, .process-line li { font-size:.9375rem; }
.process-line li span { font-size:.81rem; }
.format-icon, .format-links .ico, .print-icon, .print-arrow, .service-cards .ico {
  color: #c0d6a6;
}
.print-icon small, .process-line li span {
  color: var(--home-gold);
}
.stat-list > div, .service-cards > div + div, .process-line {
  border-color: var(--home-edge);
}
.stat-list dd {
  color:var(--home-gold);
}
.factory-zone .factory-layout {
  grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);
  align-items:center;
}
.factory-entrance { margin:0; min-width:0; }
.factory-entrance img {
  display:block; width:100%; height:auto;
  border-radius:3px clamp(20px,3vw,40px) 3px 3px;
}
.factory-entrance figcaption {
  margin-top:8px; color:var(--home-copy); font-size:.9rem;
}
.factory-overview>p {
  max-width:48ch; color:var(--home-type);
  font-size:clamp(16px,1.45vw,20px); line-height:1.64;
  text-shadow:0 1px 5px #102219;
}
.factory-overview .stat-list {
  margin-top:clamp(18px,2.4vw,34px); display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.4vw,22px);
}
.factory-overview .stat-list>div {
  padding:9px 0 0; border:0; border-top:1px solid var(--home-edge);
  justify-content:flex-end;
}
.factory-overview .stat-list dd { font-size:clamp(26px,2.8vw,43px); }
.factory-overview .stat-list dt { line-height:1.32; }
@media (max-width:780px) {
  .factory-zone .factory-layout { grid-template-columns:minmax(0,1fr); gap:18px; }
  .factory-overview>p { max-width:58ch; }
}

.tour-placeholder {
  color: var(--home-type);
  border-color: var(--home-edge);
  background:linear-gradient(117deg,rgb(20 48 34 / 74%),rgb(28 54 39 / 48%));
}
.tour-placeholder .tour-mark {
  background:rgb(20 47 34 / 80%);
  color:var(--home-gold);
  border-color:var(--home-edge);
}
.tour-placeholder > span:last-child {
  color: var(--home-copy);
}
.tour-player {
  background-color: var(--kr-deep);
}

.format-head .text-link, .section-head .text-link {
  min-height:44px;
}
.canopy-switch::before { inset:-12px -10px; }
@media (min-width:1200px) {
  :lang(es) .format-links > a { gap:8px; font-size:clamp(21px,1.75vw,25px); }
  :lang(es) .format-links .ico { width:17px; }
}
@media (min-width:651px) and (max-width:960px) {
  .format-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:961px) and (max-width:1199px) {
  html:not(:lang(zh)) .format-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:650px) {
  .format-links {
    --format-badge:62px;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  }
  .format-links > a {
    gap:9px; min-height:90px; font-size:20px;
  }
  :lang(zh) .format-links {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,10.25rem),1fr));
  }
}
.home-print-formats {
  color:var(--home-copy);
  max-width:82ch;
  margin:0 0 1.35rem;
  line-height:1.6;
}
.factory-shortcuts { display:flex; flex-wrap:wrap; gap:6px 30px; margin-top:18px; }
.factory-shortcuts a { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--home-gold); font-weight:650; }
.factory-shortcuts a:hover { text-decoration:underline; }
.home-page .fx-exhibitions {
  --in-text:var(--home-type);
  --in-muted:var(--home-copy);
  --in-accent:var(--home-gold);
  --in-line:var(--home-edge);
  --in-card:var(--home-card);
  --in-inset:#10271d;
  --in-field-border:#a3b5a2;
  padding-bottom:clamp(40px,5vw,76px);
}