@import url('https://use.typekit.net/mcd3bhn.css');
/* Sahuaro Coffee client pages: sage rail, top and bottom bars, off-white page.
   COLORS and FONTS for every client page live in this block. Change them here and all pages update. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root{
  /* your palette */
  --sage:#6B705C; --sand:#D9CFC0; --blush:#DDBEA8; --terracotta:#996044; --offwhite:#F4EFEA; --charcoal:#1B1C1E;
  /* how the palette is used */
  --green:var(--sage); --on-green:var(--offwhite); --on-green-muted:var(--offwhite);
  --cream:var(--offwhite); --paper:#FBF8F5; --ink:var(--charcoal); --accent:var(--terracotta);
  --soft:#E9E1D6; --line:#D9CFC0; --muted:#5C5850;
  /* fonts: headings and body text */
  --logo:chippewa-falls,'DM Sans','Helvetica Neue',Arial,sans-serif;   /* titles only. Needs your Adobe Fonts project id (see server notes), otherwise the clean sans-serif is used */
  --display:'DM Sans','Helvetica Neue',Arial,sans-serif;
  --body:'DM Sans','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body.branded{background:var(--cream);color:var(--ink);font:16px/1.5 var(--body);min-height:100vh}
.shell{min-height:100vh;display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"top top" "rail main" "bot bot"}
.top{grid-area:top;background:var(--green);color:var(--on-green);display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 28px;border-bottom:3px solid var(--sand)}
.top .mark{font:500 24px/1 var(--logo);font-style:normal;letter-spacing:.01em}
.top .tag{font-size:13.5px}
.rail{grid-area:rail;background:var(--green);color:var(--on-green);padding:36px 28px;display:flex;flex-direction:column;gap:22px}
.rail h2{font:500 34px/1.1 var(--logo);font-style:normal;margin:0;letter-spacing:-.01em;text-wrap:balance}
.rail p{margin:0;font-size:15px}
.rail ul{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid rgba(244,239,234,.4);display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.rail li{display:flex;gap:10px}
.rail li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blush);margin-top:8px;flex:none}
.main{grid-area:main;padding:36px 28px 44px;min-width:0}
.bot{grid-area:bot;background:var(--green);color:var(--on-green);padding:16px 28px;font-size:13.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:3px solid var(--sand)}
.bot b{font-weight:600}
@media(max-width:820px){
  .shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "main" "bot"}
  .rail{display:none}
  .top{padding:14px 16px}.top .tag{display:none}
  .main{padding:20px 16px 32px}
  .bot{padding:14px 16px}
}

/* Inside an iframe on the Squarespace site: drop the green bars and let the card sit on the page. */
html.bare .top,html.bare .rail,html.bare .bot{display:none}
html.bare .shell{display:block;min-height:0}
html.bare body.branded{min-height:0}
html.bare .main{padding:8px}