/* =====================================================================
   standups & snacktime · brand v5 "the overlap" (nov 2026)
   shared by every page on the site. two palettes:
   sunday morning (default) and print shop ([data-pal="print"] on <html>).
   work color + life color, and where they cross, the overlap (multiply).
   ===================================================================== */
:root {
  --w:#FF7A1A;   /* mimosa: work */
  --l:#E8336D;   /* jam: life */
  --ov:#E8180B;  /* hot sauce: the overlap */
  --acc:#FFE27A; /* pancake: accent */
  --pg:#FFF7EE;  /* oat milk: page */
  --ink:#2A1610; /* cold brew: ink */
  --mw:#FFBC8C; --ml:#F399B6; /* markers */
  --card:#FFFFFF;
  --mut:rgba(42,22,16,.68); --muted:var(--mut);
  --hair:rgba(42,22,16,.16);
  --v5:'Outfit',ui-rounded,'Avenir Next',system-ui,sans-serif;
  color-scheme:light;
}
:root[data-pal="print"] {
  --w:#1FC8E0;   /* sticky note */
  --l:#FF3DB4;   /* sharpie */
  --ov:#1F309E;  /* ballpoint */
  --acc:#FFE600; /* highlighter */
  --pg:#FFFFFF;  /* printer paper */
  --ink:#10131F; /* toner */
  --mw:#8FE3F0; --ml:#FF9EDA;
  --mut:rgba(16,19,31,.68); --muted:var(--mut);
  --hair:rgba(16,19,31,.16);
}

/* ---------- the mark: two tilted tiles, the overlap in the middle, a white & ---------- */
.amp-mark{position:relative;display:inline-block;width:1.15em;height:1.15em;font:900 28px/1 var(--v5);isolation:isolate;flex:none;vertical-align:middle}
.amp-mark b,.amp-mark i{position:absolute;width:.78em;height:.78em;border-radius:.22em;mix-blend-mode:multiply}
.amp-mark b{left:0;top:0;background:var(--w);transform:rotate(-8deg)}
.amp-mark i{right:0;bottom:0;background:var(--l);transform:rotate(6deg)}
.amp-mark::after{content:"&";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.5em;font-style:normal;font-weight:900;padding:.1em 0 0 .1em}
.amp-mark.bare::after{content:none}

/* the lockup: mark + wordmark */
.lockup{display:inline-flex;align-items:center;gap:9px;font:800 17px/1 var(--v5);letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.lockup .amp-mark{font-size:30px}

/* ---------- markers: soft highlight on words. never a button, never a link at rest ---------- */
.mk{position:relative;display:inline-block;z-index:0}
.mk::before{content:"";position:absolute;left:-.1em;right:-.1em;top:.45em;bottom:.04em;border-radius:.18em;transform:rotate(-1.5deg);z-index:-1;mix-blend-mode:multiply;background:var(--mw)}
.mk.x::after{content:"";position:absolute;left:35%;right:-.14em;top:.22em;bottom:.3em;border-radius:.18em;background:var(--ml);transform:rotate(3deg);mix-blend-mode:multiply;z-index:1}
.mk.l::before{background:var(--ml)}
/* a marker that can wrap over lines */
.mkw{background:linear-gradient(transparent 44%,var(--mw) 44%,var(--mw) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .12em;border-radius:.16em}
.mkw.l{background:linear-gradient(transparent 44%,var(--ml) 44%,var(--ml) 94%,transparent 94%)}

/* ---------- buttons: two swipes, off-register. no markup needed ---------- */
.v5-btn,.v5-sec{all:unset;box-sizing:border-box;cursor:pointer;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 17px/1.1 var(--v5);letter-spacing:-.01em;padding:17px 30px 19px 24px;white-space:nowrap;text-decoration:none;--o:7px;color:#fff;text-transform:lowercase}
.v5-btn::before,.v5-btn::after,.v5-sec::before,.v5-sec::after{content:"";position:absolute;z-index:-1;border-radius:.65em .9em .7em .85em;transition:transform .18s ease}
.v5-btn::before{background:var(--w);inset:0 var(--o) var(--o) 0}
.v5-btn::after{background:var(--l);inset:var(--o) 0 0 var(--o);mix-blend-mode:multiply}
.v5-btn:hover::before{transform:translate(-2px,-2px)}.v5-btn:hover::after{transform:translate(2px,2px)}
.v5-btn:active::before{transform:translate(3px,3px)}.v5-btn:active::after{transform:translate(-3px,-3px)}
.v5-sec{color:var(--ink)}
.v5-sec::before{background:var(--l);inset:var(--o) 0 0 var(--o);opacity:.9}
.v5-sec::after{background:var(--card);border:2px solid var(--ink);inset:0 var(--o) var(--o) 0}
.v5-sec:hover::after,.v5-sec:focus-visible::after{transform:translate(calc(var(--o) / 2),calc(var(--o) / 2))}
.v5-sec:active::after{transform:translate(var(--o),var(--o))}
.v5-btn:focus-visible,.v5-sec:focus-visible{outline:2.5px solid var(--ink);outline-offset:4px;border-radius:12px}
.v5-sm{font-size:15px;padding:13px 22px 15px 17px;--o:5px}

/* text link: underlined in the life color, an arrow for "more" */
.v5-link{color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--l)}
.v5-link:hover{text-decoration-color:var(--w)}

/* ---------- palette toggle: floats at the bottom of every page ---------- */
.pal-tog{position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;border:1.5px solid var(--ink);border-radius:999px;padding:3px;gap:2px;background:var(--card);box-shadow:0 10px 30px rgba(0,0,0,.18);font-family:var(--v5)}
.pal-tog button{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font:700 13px/1.2 var(--v5);color:var(--ink);white-space:nowrap}
.pal-tog button[aria-pressed="true"]{background:var(--ink);color:var(--pg)}
.pal-tog button:focus-visible{outline:2px solid var(--ov);outline-offset:2px}
.pal-tog .amp-mark{font-size:16px}
.pal-tog .amp-mark::after{content:none}
.pal-tog button[aria-pressed="true"] .amp-mark b,.pal-tog button[aria-pressed="true"] .amp-mark i{mix-blend-mode:normal}
.pal-tog button[aria-pressed="true"] .amp-mark i{opacity:.85}
@media (max-width:420px){.pal-tog button{padding:6px 8px;font-size:12px}}
@media print{.pal-tog{display:none}}
@media (prefers-reduced-motion:reduce){.v5-btn::before,.v5-btn::after,.v5-sec::before,.v5-sec::after{transition:none}}