@charset "utf-8";

/* Shared by every page: fonts, colors, the header with the phone menu (site.js) and the footer.
   Fonts are self-hosted, no third-party servers: Manrope (text) and Cormorant Garamond (headings), license in
   fonts/OFL.txt. Character subsets as on Google Fonts: the browser fetches only those it needs */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/manrope-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/cormorant-garamond-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/cormorant-garamond-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* rice paper, jade, copper and amber; dark blocks are the color of strong tea. Text contrast is at least 4.5:1
   (except ink-3 on paper-2: text there uses ink-2) */
:root{
	--paper:#f6f1e7;
	--paper-2:#ede5d4;
	--card:#fff;
	--ink:#1c1a16;
	--ink-2:#555047;
	--ink-3:#736c60;
	--line:#e4dccb;
	--line-2:#d3c7b0;
	--jade:#1f5b4a;
	--jade-2:#174638;
	--night:#0f201b;
	--night-line:rgba(241,233,218,.14);
	--amber:#e8a74a;
	--amber-2:#f2b962;
	--copper:#b2441c;
	--gold:#cfa862;
	--cream:#f1e9da;
	--r:22px;
	--r-sm:14px;
	--shadow:0 1px 2px rgba(30,25,15,.05),0 14px 34px -16px rgba(30,25,15,.25);
	--ease:cubic-bezier(.2,.8,.2,1);
	--sans:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
	--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
	--top-h:40px;
	--bar-h:76px;
	--nav-h:46px;
}

html{scroll-padding-top:calc(var(--bar-h) + 16px);}
body.is-locked{overflow:hidden;}
[hidden]{display:none !important;}

/* the own base of the header and the footer: pages of the old design keep their style.css, with global rules for
   links and lists, so these reset them inside themselves and leave the rest of the page alone. :where() weighs
   nothing, like the tag rules it stands in for; on equal weight site.css wins, it comes after style.css. But
   style.css colors links by a:link, which outweighs one class: a link colored by one class names its block too */
:where(.hdr,.drawer,.ftr),:where(.hdr,.drawer,.ftr) *,:where(.hdr,.drawer,.ftr) ::before,:where(.hdr,.drawer,.ftr) ::after{box-sizing:border-box;}
.hdr,.drawer,.ftr{color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;}
:where(.hdr,.drawer,.ftr) :is(p,ul){margin:0;}
:where(.hdr,.drawer,.ftr) ul{padding:0;list-style:none;}
:where(.hdr,.drawer,.ftr) a{color:inherit;text-decoration:none;}
:where(.hdr,.drawer,.ftr) svg{display:block;max-width:100%;}
:where(.hdr,.drawer) :is(button,input){font:inherit;color:inherit;}
:where(.hdr,.drawer) button{padding:0;border:0;background:none;cursor:pointer;}
:where(.hdr,.drawer,.ftr) :focus-visible{outline:2px solid var(--copper);outline-offset:3px;}
/* the column of the new design, side padding only: it sits next to classes with their own top and bottom padding.
   Not .wrap: the old style.css has its own */
.shell{width:100%;max-width:1320px;margin-inline:auto;padding-inline:24px;}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.hdr .skip{position:absolute;left:12px;top:-64px;z-index:200;padding:10px 16px;border-radius:10px;background:var(--jade);color:#fff;font-weight:700;}
.hdr .skip:focus{top:12px;}

.promo-bar{margin:0;padding:10px 24px;background:var(--copper);color:#fff;font:600 14.5px/1.55 var(--sans);text-align:center;}

/* HEADER: the top strip scrolls away; the row with search and cart sticks, the categories under it tuck away on
   scroll down and come back on scroll up (site.js). By transform, not height, so the page below doesn't jump */

.hdr{position:sticky;top:calc(-1 * var(--top-h));z-index:50;pointer-events:none;}
.hdr > *{pointer-events:auto;}
.hdr-top{background:var(--night);color:rgba(241,233,218,.82);font-size:13.5px;}
.hdr-top-in{display:flex;align-items:center;gap:28px;min-height:var(--top-h);}
.hdr-info{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.hdr-info .ic{width:16px;height:16px;color:var(--gold);}
a.hdr-info:hover{color:#fff;}
.hdr-links{display:flex;gap:24px;margin-left:auto;white-space:nowrap;}
.hdr-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;}
.hdr-links a[aria-current]{color:#fff;}
.hdr .hdr-phone{font-weight:700;color:#fff;}
/* solid backgrounds here and below, not frosted glass: a backdrop blur is redone on every frame of scrolling */
.hdr-bar{position:relative;z-index:2;background:var(--paper);}
.hdr-bar-in{display:flex;align-items:center;gap:32px;height:var(--bar-h);}
.logo{display:block;flex:none;}
.hdr .logo,.drawer .logo{color:var(--jade-2);}
.logo-svg{width:auto;height:40px;aspect-ratio:2792 / 556;fill:currentColor;}
/* the steam is the top third of the mark: by its box the logo is centered in the row, but to the eye it sits low.
   Raised by the gap between the box center and the middle of the lettering (394 of 556) */
.hdr .logo-svg,.drawer .logo-svg{transform:translateY(-21%);}
/* not .search: the old pages put the template name on <body>, and the search page's is "search" */
.hdr-search{position:relative;flex:1;max-width:620px;}
.search-input{width:100%;height:50px;padding:0 60px 0 24px;border:1.5px solid var(--line-2);border-radius:999px;background:#fff;font-size:15px;font-weight:500;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none;}
.search-input::placeholder{color:var(--ink-3);opacity:1;}
.search-input:focus{outline:none;border-color:var(--jade);box-shadow:0 0 0 4px rgba(31,91,74,.14);}
.search-input::-webkit-search-cancel-button{display:none;}
.search-go{position:absolute;top:6px;right:6px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--jade);color:#fff;transition:background-color .2s;}
.search-go:hover{background:var(--jade-2);}
.search-go .ic{width:19px;height:19px;stroke-width:2;}
.hdr-actions{display:flex;align-items:center;gap:4px;margin-left:auto;}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;flex:none;border-radius:50%;transition:background-color .2s;}
.icon-btn:hover{background:var(--paper-2);}
.icon-btn .ic{width:23px;height:23px;}
.hdr-burger,.hdr-search-toggle,.hdr-call{display:none;}
.cart-btn{display:flex;align-items:center;gap:12px;padding:5px 16px 5px 5px;border-radius:999px;transition:background-color .2s;}
.cart-btn:hover{background:var(--paper-2);}
.cart-ico{position:relative;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--jade);color:#fff;}
.cart-ico .ic{width:22px;height:22px;}
.cart-badge{position:absolute;top:-3px;right:-5px;min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:var(--copper);box-shadow:0 0 0 2px var(--paper);color:#fff;font-size:11.5px;font-weight:800;line-height:21px;text-align:center;}
.cart-txt{display:flex;flex-direction:column;line-height:1.25;}
.cart-txt b{font-size:15px;}
.cart-txt small{font-size:13px;color:var(--ink-2);white-space:nowrap;}
/* categories span the whole row like a table of contents; on phones they become a strip of buttons. The category the
   visitor is in stays underlined */
.hdr-nav{position:relative;z-index:1;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);transition:transform .4s var(--ease),opacity .3s;}
.hdr-nav ul{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);}
.hdr-nav a{position:relative;display:block;padding:13px 2px;color:var(--ink-2);font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;transition:color .2s;}
.hdr-nav a::after{content:"";position:absolute;right:0;bottom:8px;left:0;height:1.5px;background:var(--jade);transform:scaleX(0);transition:transform .35s var(--ease);}
.hdr-nav a:hover,.hdr-nav a[aria-current]{color:var(--ink);}
.hdr-nav a:hover::after,.hdr-nav a[aria-current]::after{transform:scaleX(1);}
.hdr.is-tucked .hdr-nav{opacity:0;pointer-events:none;transform:translateY(-100%);}

/* PHONE MENU */

.drawer{position:fixed;inset:0;z-index:100;}
.drawer-backdrop{position:absolute;inset:0;background:rgba(10,20,16,.55);opacity:0;transition:opacity .3s;}
.drawer-panel{position:absolute;top:0;bottom:0;left:0;z-index:1;width:min(88vw,380px);padding:14px 20px 32px;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);box-shadow:0 0 40px rgba(0,0,0,.2);transform:translateX(-100%);transition:transform .35s var(--ease);}
.drawer.is-open .drawer-panel{transform:none;}
.drawer.is-open .drawer-backdrop{opacity:1;}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.drawer-head .logo-svg{height:30px;}
.drawer-h{margin:22px 0 4px;color:var(--ink-3);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.drawer-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:16px;}
.drawer-list a[aria-current]{color:var(--jade);}
.drawer-list .ic{width:18px;height:18px;color:var(--ink-3);}
.drawer-cats a{padding:9px 0;font-family:var(--serif);font-size:25px;line-height:1.2;}
.drawer-contacts{display:grid;gap:12px;margin-top:26px;color:var(--ink-2);font-size:14.5px;}
.drawer-contacts li{display:flex;align-items:flex-start;gap:10px;}
.drawer-contacts .ic{width:18px;height:18px;margin-top:2px;color:var(--copper);}

/* FOOTER */

.ftr{padding:72px 0 28px;background:var(--night);color:rgba(241,233,218,.78);font-size:14.5px;}
.ftr-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.25fr;gap:40px;}
/* mark with motto: the motto is small, so the logo takes the full column; light parts are muted like the footer text */
.ftr .logo{color:rgba(241,233,218,.76);--logo-pot:var(--gold);--logo-motto:var(--gold);}
.ftr .logo-svg{width:min(100%,340px);height:auto;aspect-ratio:2792 / 728;}
.ftr-contacts{display:grid;gap:6px;margin-top:26px;}
.ftr-h{margin-bottom:14px;color:#fff;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
.ftr-col ul{display:grid;gap:9px;}
.ftr a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.ftr a[aria-current]{color:#fff;}
.ftr-legal{display:grid;gap:4px;margin-top:48px;padding-top:22px;border-top:1px solid var(--night-line);color:rgba(241,233,218,.6);font-size:12.5px;}

/* WIDTHS */

@media (max-width:1199px){
	.hdr-nav a{font-size:12px;letter-spacing:.1em;}
	.hdr-top-in{gap:18px;}
	.hdr-links{gap:16px;}
	.ftr-in{grid-template-columns:repeat(3,1fr);}
	.ftr-brand{grid-column:1 / -1;}
}

@media (max-width:999px){
	:root{--top-h:0px;--bar-h:64px;--nav-h:54px;}
	.hdr-top{display:none;}
	.hdr-bar-in{gap:16px;}
	.hdr-burger,.hdr-call{display:grid;}
	.hdr-burger{margin-left:-10px;}
	.logo-svg{height:34px;}
	.cart-btn{padding:0;}
	.cart-btn:hover{background:none;}
	.cart-txt{display:none;}
	/* categories as a swipeable strip of buttons; the one the visitor is in is dark */
	.hdr-nav ul{justify-content:flex-start;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;}
	.hdr-nav ul::-webkit-scrollbar{display:none;}
	.hdr-nav a{padding:8px 15px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.7);color:var(--ink);font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;}
	.hdr-nav a[aria-current]{border-color:var(--night);background:var(--night);color:#fff;}
	.hdr-nav a::after{display:none;}
}

@media (max-width:760px){
	:root{--bar-h:60px;--nav-h:52px;}
	.shell{padding-inline:16px;}
	.hdr-bar-in{gap:2px;}
	.logo{margin-right:auto;}
	.logo-svg{height:28px;}
	.hdr-search-toggle{display:grid;}
	.cart-ico{width:42px;height:42px;margin-left:4px;}
	.cart-ico .ic{width:21px;height:21px;}
	/* search opens as a row under the header from the magnifier button */
	.hdr-search{position:absolute;top:100%;right:0;left:0;z-index:3;display:none;max-width:none;padding:10px 16px 12px;border-bottom:1px solid var(--line);background:var(--paper);}
	.hdr.is-search .hdr-search{display:block;}
	.search-go{top:16px;right:22px;}
	.ftr{padding:52px 0 24px;}
	.ftr-in{grid-template-columns:1fr 1fr;gap:32px 20px;}
	.ftr-in > .ftr-col:last-child{grid-column:1 / -1;}
	.ftr-legal{margin-top:36px;}
}

@media (max-width:400px){
	.logo-svg{height:25px;}
	.hdr-bar .icon-btn{width:40px;height:40px;}
}

/* the narrowest phones (320): otherwise the cart sticks out past the edge */
@media (max-width:340px){
	.logo-svg{height:22px;}
}

@media (prefers-reduced-motion:reduce){
	:where(.hdr,.drawer) *{transition-duration:.01ms !important;}
}