@font-face {
  font-family:Bricolage;
  src:url(bricolage-600.ttf) format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:Bricolage;
  src:url(bricolage-800.ttf) format('truetype');
  font-weight:800;
  font-style:normal;
  font-display:swap
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body {
  margin:0;
  font-family:'Be Vietnam Pro',sans-serif;
  font-size:16px;
  line-height:1.7;
  background:var(--paper);
  color:var(--ink)
}

img {
  display:block;
  width:100%;
  height:auto;
  object-fit:cover
}

figure {
  margin:0
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

button,a {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}

button {
  border:0
}

a,button {
  transition:color .18s ease,background-color .18s ease,opacity .18s ease,transform .18s ease
}

a:hover {
  color:var(--accent)
}

button:active,.button:active {
  transform:translateY(2px)
}

a:focus-visible,button:focus-visible {
  outline:3px solid var(--focus,var(--accent));
  outline-offset:5px
}

p {
  margin:0 0 1.1em
}

h1,h2,h3 {
  margin:0;
  font-weight:600;
  line-height:1.08;
  text-wrap:balance
}

h1,h2 {
  font-family:var(--display,Bricolage),sans-serif;
  letter-spacing:-.045em
}

h3 {
  line-height:1.3
}

h1 {
  font-size:clamp(54px,6.7vw,108px)
}

h2 {
  font-size:clamp(38px,4.5vw,72px)
}

h3 {
  font-size:23px
}

main,section,article,div {
  min-width:0
}

section[id],footer[id] {
  scroll-margin-top:24px
}

section {
  position:relative
}

.wrap {
  width:min(1320px,calc(100% - 112px));
  margin-inline:auto
}

.category {
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em
}

.text-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:7px 0;
  border-bottom:1px solid currentColor;
  font-size:14px;
  font-weight:600;
  line-height:1.5
}

.text-link:hover {
  opacity:.75
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:12px 24px;
  background:var(--ink);
  color:var(--paper);
  font-size:14px;
  font-weight:500;
  border:1px solid var(--ink);
  line-height:1.5
}

.button:hover {
  background:var(--accent);
  border-color:var(--accent);
  color:var(--paper)
}

.section-intro {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:35px;
  margin-bottom:48px
}

.section-intro p {
  margin:0;
  max-width:360px
}

.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 56px;
  gap:32px;
  position:relative;
  z-index:10
}

.wordmark {
  font-family:Bricolage,sans-serif;
  font-weight:800;
  font-size:25px;
  letter-spacing:-1px;
  line-height:1
}

.wordmark span {
  display:block;
  font-family:'Be Vietnam Pro',sans-serif;
  font-weight:400;
  font-size:12px;
  letter-spacing:4px;
  padding-top:6px
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:42px
}

.site-header nav a {
  display:flex;
  align-items:center;
  min-height:44px;
  font-size:14px
}

.menu-toggle {
  display:none;
  background:none;
  padding:8px 0;
  min-height:44px;
  font-size:14px
}

.menu-toggle span {
  font-size:23px;
  margin-left:6px
}

.site-footer {
  padding:78px 56px 26px
}

.footer-heading {
  display:flex;
  justify-content:space-between;
  gap:32px;
  align-items:flex-start;
  margin-bottom:65px
}

.footer-heading p {
  font-size:14px
}

.footer-heading h2 {
  font-size:clamp(34px,4vw,60px)
}

.footer-contacts {
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:32px;
  border-top:1px solid var(--line);
  padding:36px 0 48px
}

.footer-contacts h3 {
  font-family:inherit;
  font-size:12px;
  font-weight:500;
  margin-bottom:16px
}

.footer-contacts p,.footer-contacts a {
  font-size:14px;
  overflow-wrap:anywhere
}

.footer-contacts a {
  display:table;
  min-height:44px;
  padding:8px 0
}

.footer-contacts .phone {
  font-size:25px;
  font-weight:600;
  padding:0
}

.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:24px;
  display:flex;
  gap:32px;
  justify-content:space-between;
  align-items:center;
  font-size:11px
}

.footer-bottom p {
  max-width:480px;
  margin:0
}

.footer-bottom a {
  display:flex;
  align-items:center;
  min-height:44px;
  white-space:nowrap
}

.footer-bottom>span {
  font-weight:600;
  white-space:nowrap
}

.skip-link {
  position:absolute;
  top:8px;
  left:8px;
  z-index:100;
  background:var(--paper);
  padding:12px 22px;
  transform:translateY(-150%)
}

.skip-link:focus {
  transform:none
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

[hidden] {
  display:none!important
}

@media(min-width:1800px) {
  .site-header,.site-footer {
    padding-inline:max(56px,calc((100vw - 1500px)/2))
  }
}

@media(max-width:900px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .site-header {
    padding:22px 32px
  }
  .site-header nav {
    gap:25px
  }
  .site-footer {
    padding-inline:32px
  }
  .footer-contacts {
    grid-template-columns:1fr 1fr
  }
  .footer-contacts>div:first-child {
    grid-column:1/-1
  }
  .footer-heading {
    gap:50px
  }
  .footer-bottom {
    flex-wrap:wrap;
    gap:8px 24px
  }
  .footer-bottom p {
    order:3;
    max-width:100%;
    width:100%
  }
}

@media(max-width:600px) {
  .wrap {
    width:calc(100% - 40px)
  }
  h1 {
    font-size:58px
  }
  h2 {
    font-size:43px
  }
  .site-header {
    padding:18px 20px;
    min-height:84px
  }
  .wordmark {
    font-size:22px
  }
  .wordmark span {
    font-size:11px
  }
  .menu-toggle {
    display:flex;
    align-items:center
  }
  .site-header nav {
    display:none;
    position:absolute;
    inset:100% 0 auto;
    background:var(--paper);
    color:var(--ink);
    padding:16px 20px 24px;
    border-bottom:1px solid var(--line);
    box-shadow:0 14px 20px #0000000d;
    gap:4px
  }
  .site-header nav.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch
  }
  .site-header nav a {
    padding:8px 0;
    font-size:16px
  }
  .section-intro {
    display:block;
    margin-bottom:30px
  }
  .section-intro p {
    margin-top:24px
  }
  .site-footer {
    padding:55px 20px 20px
  }
  .footer-heading {
    display:block;
    margin-bottom:40px
  }
  .footer-heading p {
    margin-bottom:25px
  }
  .footer-heading h2 {
    font-size:39px
  }
  .footer-contacts {
    display:block;
    padding:30px 0 10px
  }
  .footer-contacts>div {
    margin-bottom:27px
  }
  .footer-contacts h3 {
    margin-bottom:10px
  }
  .footer-bottom {
    justify-content:space-between
  }
  .footer-bottom p {
    font-size:11px
  }
  .category {
    font-size:12px
  }
  .text-link {
    font-size:14px
  }
  .button {
    padding:12px 21px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}

/* Reading copy stays comfortably sized across the four directions. */
body .hero-article>p:not(.category),body .hero-description,body .story-copy p:not(.category),body .forest-intro>div p,body .forest-feature-copy>p:not(.small-note),body .porcelain-welcome p:not(.category),body .porcelain-tea p:not(.category),body .fruit-panel-copy>p:not(:first-child),body .fruit-story-copy>p:not(:first-child),body .fruit-after p {
  font-size:16px
}