/* =============================================================
   meaghanmalone.com: the glass layer, shared by every public page
   Nov 2026. One header, one menu, one footer, and the same frosted
   glass over a slow, soft color field, everywhere: the portfolio (/),
   the résumé, the journal and its posts, case studies, About, the
   bookshelf, Story Joy Labs, the shop, Thanks and 404.
   Load order: the page's own stylesheet (css/fresh.css, or css/labs.css
   for Story Joy Labs and the shop), then this file, then css/portfolio.css
   on the homepage and résumé.
   A page opts in with class="gl" on <body>, the color field right after it
     <div class="aurora" aria-hidden="true"><i class="a1"></i><i class="a2"></i><i class="a3"></i><i class="a4"></i></div>
   and the shared header, menu and footer (same markup on every page).
   This file styles all three by itself, so pages on labs.css get them too.
   Rules of the house:
   - Glass is the interface layer: the header and menu, filters, labels,
     cards that hold lists, forms. Words people read sit on paper.
   - Every moving thing shows something true or helps you find your way.
   - Motion stops for anyone who asks their device to reduce it.
   ============================================================= */

.gl{
  --g-paper:#FBF8F4;
  --g-paper2:#F3EEE9;
  --g-ink:#2A1A33;
  --g-ink2:#6B5D70;
  --g-ink3:#8E8292;
  --g-plum:#4A1D52;
  --g-wine:#6F1239;
  --g-brick:#B63A1E;
  --g-brass:#C9A66B;
  --g-line:rgba(42,26,51,.12);
  --g-serif:'Instrument Serif',Georgia,serif;
  --g-read:'Newsreader',Georgia,serif;
  --g-sans:'Host Grotesk','Helvetica Neue',Arial,sans-serif;
  --g-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --g-ribbon:linear-gradient(90deg,#8F76D1 0 16.67%,#5B63D6 0 33.33%,#D81F67 0 50%,#E5482A 0 66.67%,#C98210 0 83.33%,#2E8FB8 0);
  --g-ribbon-v:linear-gradient(180deg,#8F76D1 0 16.67%,#5B63D6 0 33.33%,#D81F67 0 50%,#E5482A 0 66.67%,#C98210 0 83.33%,#2E8FB8 0);
  --plum:#4A1D52;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --glass-bg:rgba(255,255,255,.55);
  --glass-brd:rgba(255,255,255,.82);
  --glass-blur:blur(22px) saturate(170%);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(74,29,82,.05),0 18px 48px -28px rgba(42,26,51,.4);
  --r-lg:28px;
  --r-md:22px;
  --r-sm:14px;
  background:transparent;
}
html{background:#FBF8F4}
.gl main{display:block;overflow-x:clip}

/* ============================== glass ============================== */
/* live glass: it blurs whatever slides underneath it */
.glass,
.gl .site-head .wrap,.gl .drawer,.gl .filters,.gl .sc-tabs,.gl .toc details,
.gl .page-top .hand,.gl .page-top .kicker,.gl.labs-page .hero-grid > div:first-child > .kicker,.gl .post-head .meta,
.gl .status,.gl .told,.gl .crumb,.gl .buybox,.gl .solo-card,.gl .letters .ticket,.gl.shop .letters .wrap,
.gl .book-pop,.gl .start .form{
  background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);box-shadow:var(--glass-shadow)
}
/* still glass: frosted panels in lists (over the soft field, a blur would look the same) */
.gl .entry,.gl .signoff,.gl .hubcard,.gl .pkg,.gl .make,.gl .wcard,.gl .steps li,.gl .faq details,
.gl .product-card,.gl .shop-empty,.gl .now,.gl .nightstand-book,.gl .shelves,.gl .checklist,
.gl .prompt-card,.gl .ad-note,.gl .builder,.gl .type-spec,.gl .swatch-chip,.gl .prose .specs,.gl .product-desc .specs{
  background:rgba(255,255,255,.58);border:1px solid var(--glass-brd);box-shadow:var(--glass-shadow)
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.gl .site-head .wrap,.gl .drawer,.gl .filters,.gl .sc-tabs,.gl .toc details,.gl .buybox,.gl .solo-card,.gl .letters .ticket,.gl.shop .letters .wrap,.gl .book-pop{background:rgba(255,255,255,.92)}
  .gl .start .form{background:rgba(74,29,82,.94)}
}

/* the soft color field everything floats on */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;will-change:transform}
.aurora .a1{width:72vmax;height:72vmax;left:-24vmax;top:-34vmax;background:radial-gradient(closest-side,rgba(143,118,209,.32),rgba(143,118,209,0))}
.aurora .a2{width:62vmax;height:62vmax;right:-24vmax;top:-18vmax;background:radial-gradient(closest-side,rgba(216,31,103,.17),rgba(216,31,103,0))}
.aurora .a3{width:66vmax;height:66vmax;left:-6vmax;bottom:-42vmax;background:radial-gradient(closest-side,rgba(46,143,184,.22),rgba(46,143,184,0))}
.aurora .a4{width:54vmax;height:54vmax;right:-14vmax;bottom:-26vmax;background:radial-gradient(closest-side,rgba(229,72,42,.13),rgba(229,72,42,0))}

/* ============================== the header: one glass capsule, the same everywhere ============================== */
.gl .site-head{position:sticky;top:0;z-index:50;padding-top:12px;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.gl .site-head::after{display:none}
.gl .site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(1200px,calc(100% - 28px));max-width:none;min-height:66px;margin:0 auto;padding:0 10px 0 22px;border-radius:999px;background:rgba(255,255,255,.5);transition:background .3s}
.gl .site-head.scrolled .wrap{background:rgba(255,255,255,.72)}
.gl .site-head .mark{display:block;flex:none;line-height:0}
.gl .site-head .mark img{display:block;height:42px;width:auto}
.gl .top-links{display:flex;align-items:center;gap:2px}
.gl .top-links a{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;font:500 .8rem/1.1 var(--g-sans);letter-spacing:.1em;text-transform:none;color:var(--g-plum);text-decoration:none;white-space:nowrap;box-shadow:none;transition:background .25s,color .25s}
.gl .top-links a:hover{background:rgba(74,29,82,.06);box-shadow:none;color:var(--g-plum)}
.gl .top-links a.on,.gl .top-links a[aria-current="page"]{background:rgba(74,29,82,.09);box-shadow:none;color:var(--g-plum)}
.gl .top-links .top-cta{margin-left:8px;padding:12px 20px;border:0;border-radius:999px;background:var(--g-plum);color:#fff}
.gl .top-links .top-cta:hover{background:var(--g-wine);color:#fff}
.gl .menu-btn{display:none;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:46px;height:46px;padding:0;border:0;border-radius:999px;background:rgba(74,29,82,.07);cursor:pointer}
.gl .menu-btn span{display:block;width:18px;height:1.6px;border-radius:2px;background:var(--g-plum)}
.gl .menu-btn:hover{background:rgba(74,29,82,.12)}

/* the ribbon at the very top fills as you scroll, or as you read a post */
.gl .pf-progress{position:fixed;z-index:60;left:0;right:0;top:0;height:6px;pointer-events:none}
.gl .pf-progress span{display:block;height:100%;background:var(--g-ribbon);transform-origin:0 50%;transform:scaleX(0)}

/* ============================== the menu (phones and tablets) ============================== */
.gl .scrim{position:fixed;inset:0;z-index:90;background:rgba(42,26,51,.24);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.gl .scrim.on{opacity:1}
.gl .drawer{position:fixed;z-index:100;top:10px;right:10px;bottom:10px;left:auto;width:min(390px,calc(100vw - 20px));display:flex;flex-direction:column;gap:0;padding:78px 26px 26px;overflow-y:auto;overscroll-behavior:contain;border-radius:var(--r-lg);background:rgba(251,248,244,.8);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 40px 90px -30px rgba(42,26,51,.55);transform:translateX(calc(100% + 24px));visibility:hidden;transition:transform .5s var(--ease-out),visibility 0s .5s}
.gl .drawer.open{transform:none;visibility:visible;transition:transform .5s var(--ease-out)}
.gl .drawer-close{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:rgba(74,29,82,.07);color:var(--g-plum);font:400 1.7rem/1 var(--g-sans);cursor:pointer}
.gl .drawer-close:hover{background:rgba(74,29,82,.12)}
.gl .drawer .d-main{display:block;padding:9px 6px;border-top:1px solid var(--g-line);font:400 2rem/1.1 var(--g-serif);letter-spacing:0;color:var(--g-plum);text-decoration:none}
.gl .drawer .d-main:first-of-type{border-top:0}
.gl .drawer .d-main:hover,.gl .drawer .d-main[aria-current="page"]{color:var(--g-brick)}
.gl .drawer .d-sub{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 14px}
.gl .drawer .d-sub a{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.66);border:1px solid rgba(74,29,82,.1);font:500 .84rem var(--g-sans);letter-spacing:0;text-transform:none;color:var(--g-ink2);text-decoration:none}
.gl .drawer .d-sub a:hover,.gl .drawer .d-sub a[aria-current="page"]{background:#fff;color:var(--g-plum)}
.gl .drawer .btn{margin-top:18px;align-self:stretch;justify-content:center;border-radius:999px}

/* ============================== the footer: the whole site in four columns ============================== */
.gfoot{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(72px,9vw,120px);padding:clamp(56px,7vw,84px) 0 0;background:#2A1A33;color:#F4EAF5;font-family:'Host Grotesk','Helvetica Neue',Arial,sans-serif}
.gfoot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--g-ribbon)}
.gfoot::after{content:"";position:absolute;z-index:-1;right:-12vw;top:-26vw;width:min(72vw,940px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(216,31,103,.26),rgba(91,99,214,.13) 55%,rgba(42,26,51,0));pointer-events:none}
.gfoot .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:40px clamp(32px,6vw,96px);max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,56px)}
.gfoot .mark{display:inline-block;line-height:0}
.gfoot .mark img{height:58px;width:auto;filter:brightness(0) invert(1)}
.f-made{margin:16px 0 0;max-width:32ch;font:400 1rem/1.55 'Host Grotesk','Helvetica Neue',Arial,sans-serif;color:#D8C4DC}
.gfoot .f-cta{margin-top:22px;background:#fff;color:#4A1D52;border:0;border-radius:999px;box-shadow:none}
.gfoot .f-cta:hover{background:#C9A66B;color:#2A1A33}
.f-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
.f-k{margin:0 0 14px;font:500 .7rem 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#BFA9C4}
.f-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.f-cols a{color:#fff;text-decoration:none;font:500 .95rem/1.3 'Host Grotesk','Helvetica Neue',Arial,sans-serif;letter-spacing:0;text-transform:none}
.f-cols a:hover{text-decoration:underline;text-underline-offset:3px}
.gfoot a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.f-base{grid-column:1 / -1;margin:8px 0 0;padding:22px 0 30px;border-top:1px solid rgba(255,255,255,.16);font:500 .7rem 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#BFA9C4}

/* ============================== buttons and small things ============================== */
.gl .btn{border-radius:999px}
.gl .btn.ghost{background:rgba(255,255,255,.6);color:var(--g-plum);border:0;box-shadow:inset 0 0 0 1px rgba(74,29,82,.3),0 12px 26px -20px rgba(42,26,51,.55);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.gl .btn.ghost:hover{background:#fff;color:var(--g-plum);box-shadow:inset 0 0 0 1.5px var(--g-plum),0 12px 26px -20px rgba(42,26,51,.55)}
.gl .copy{border-radius:999px;background:var(--g-plum);color:#fff;font:500 .84rem var(--g-sans);padding:9px 18px}
.gl .copy:hover,.gl .copy.ok{background:var(--g-wine);color:#fff}
.gl .copy.mini{padding:3px 10px;font-size:.74rem}
.gl .copy.big{padding:13px 24px;font-size:.95rem}

/* the label at the top of a page: a little glass pill with a light in it */
.gl .page-top .hand,.gl .page-top .kicker,.gl.labs-page .hero-grid > div:first-child > .kicker,.gl .post-head .meta{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;margin:0 0 26px;padding:9px 18px 9px 14px;border-radius:999px;font:500 .72rem/1.2 var(--g-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--g-plum)}
.gl .page-top .hand::before,.gl .page-top .kicker::before,.gl.labs-page .hero-grid > div:first-child > .kicker::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#D81F67;box-shadow:0 0 0 3px rgba(216,31,103,.16)}
.gl .page-top .hand{margin-left:auto;margin-right:auto}

/* ============================== the journal: a list of posts, no pictures needed ============================== */
.gl.journal .page-top{padding-bottom:clamp(28px,4vw,48px)}
.gl .filters{display:flex;flex-wrap:wrap;gap:2px;width:fit-content;max-width:100%;margin:0 auto clamp(28px,4vw,44px);padding:6px;border-radius:26px}
.gl.shop .filters{margin-left:0}
.gl .filter{min-height:42px;padding:7px 16px;border:0;border-radius:999px;background:transparent;box-shadow:none;font:500 .9rem var(--g-sans);letter-spacing:0;text-transform:none;color:var(--g-ink);cursor:pointer;transition:background .25s,color .25s}
.gl .filter:hover{background:rgba(74,29,82,.06);box-shadow:none}
.gl .filter .dot{width:8px;height:8px;border-radius:50%}
.gl .filter[aria-pressed="true"]{background:var(--g-plum);color:#fff;box-shadow:0 10px 22px -12px rgba(74,29,82,.9)}
.gl .filter[aria-pressed="true"] .n{color:#E3D3E6}

.gl .entries{list-style:none;margin:0 auto;padding:0;display:grid;gap:14px;max-width:1000px}
.gl .e-year{max-width:1000px;margin:0 auto}
.gl .e-year + .e-year{margin-top:clamp(40px,5vw,64px)}
.gl .e-y{margin:0 0 16px;padding:0 0 12px;border-bottom:1px solid var(--g-line);font:400 clamp(2rem,3.4vw,2.6rem)/1 var(--g-serif);color:var(--g-brick)}
.gl .entry{position:relative;display:grid;grid-template-columns:168px minmax(0,1fr);gap:8px clamp(24px,4vw,48px);align-items:start;padding:clamp(24px,3vw,36px) clamp(22px,3.4vw,44px);border-radius:var(--r-lg);transition:transform .45s var(--ease-out),background .3s,box-shadow .45s}
.gl .entry.has-thumb{grid-template-columns:168px minmax(0,1fr) 140px}
.gl .entry:hover{transform:translateY(-3px);background:rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(74,29,82,.06),0 30px 60px -34px rgba(42,26,51,.5)}
.gl .e-meta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0;padding-top:8px;font:500 .7rem/1.3 var(--g-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--g-ink2)}
.gl .e-meta .subj{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 9px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(74,29,82,.1);color:var(--g-plum);text-decoration:none;font:inherit;letter-spacing:inherit}
.gl .e-meta a.subj:hover{background:#fff;color:var(--g-brick)}
.gl .e-meta .subj .dot{width:7px;height:7px;border-radius:50%}
.gl .e-main{min-width:0}
.gl .entry h2,.gl .entry h3{margin:0;font:400 clamp(2rem,3.4vw,2.9rem)/1.02 var(--g-serif);letter-spacing:-.01em;color:var(--g-plum);text-wrap:balance}
.gl .entry h2 a,.gl .entry h3 a{color:inherit;text-decoration:none}
.gl .entry .hit::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.gl .entry:has(.hit:focus-visible){outline:2px solid var(--g-brick);outline-offset:4px}
.gl .entry .hit:focus-visible{outline:0}
.gl .entry .sub{display:block;margin-top:10px;font:400 clamp(1.12rem,1.6vw,1.32rem)/1.38 var(--g-read);letter-spacing:0;color:var(--g-ink2)}
.gl .entry .dek{margin:16px 0 0;max-width:58ch;font:400 1.08rem/1.62 var(--g-read);color:var(--g-ink)}
.gl .entry .go{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font:500 .72rem var(--g-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--g-brick)}
.gl .entry .go svg{width:28px;height:10px;transition:transform .35s var(--ease-out)}
.gl .entry:hover .go svg{transform:translateX(5px)}
.gl .entry .thumb{display:block;width:140px;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--g-paper2)}
.gl .entry .thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* the short version under a post */
.gl .entries.compact .entry{grid-template-columns:150px minmax(0,1fr);padding:22px 28px}
.gl .entries.compact .entry h3{font-size:clamp(1.6rem,2.4vw,2rem)}
.gl .entries.compact .entry .dek{font-size:1rem;margin-top:10px}
.gl .entries.compact .entry .go{margin-top:12px}

/* ============================== a post ============================== */
.gl .post-head{padding-top:clamp(40px,6vw,76px)}
.gl .post-head .meta{margin:0 auto 26px;gap:14px;justify-content:center}
.gl .post-head .meta .subj{display:inline-flex;align-items:center;gap:8px;color:var(--g-plum);text-decoration:none;font:inherit;letter-spacing:inherit}
.gl .post-head .meta a.subj:hover{color:var(--g-brick)}
.gl .post-head .meta .subj .dot{width:7px;height:7px;border-radius:50%}
.gl .post-head .meta .mins{display:inline-flex;align-items:center;gap:14px;color:var(--g-ink2)}
.gl .post-head .meta .mins::before{content:"";width:1px;height:12px;background:rgba(74,29,82,.22)}
.gl .post-head .byline{margin-top:30px}
.gl .post-head .byline .face{width:44px;height:44px;box-shadow:0 0 0 2px #fff,0 8px 18px -8px rgba(42,26,51,.5)}
.gl .post-cover .frame{border-radius:var(--r-lg);box-shadow:0 0 0 1px rgba(255,255,255,.7),0 56px 90px -52px rgba(42,26,51,.6)}
.gl .prose > hr{width:64px;height:1px;margin:2.6em auto;border:0;background:var(--g-brick)}

/* the end of a post: one card to say thanks, pass it on, and meet the author */
.gl .post-end{max-width:calc(760px + 2 * clamp(18px,4vw,56px))}
.gl .signoff{display:grid;grid-template-columns:72px minmax(0,1fr);gap:6px 22px;align-items:center;padding:clamp(22px,3vw,30px) clamp(22px,3vw,34px);border-radius:var(--r-lg)}
.gl .signoff .face{grid-row:span 2;width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--g-paper2);box-shadow:0 0 0 3px #fff,0 12px 24px -12px rgba(42,26,51,.5)}
.gl .signoff .face img{width:100%;height:100%;object-fit:cover;display:block}
.gl .signoff .thanks{margin:0;font:400 clamp(1.6rem,2.4vw,2rem)/1.05 var(--g-serif);color:var(--g-plum)}
.gl .signoff .who{margin:0;font:400 1.02rem/1.55 var(--g-read);color:var(--g-ink2)}
.gl .signoff .who a{color:var(--g-brick)}
.gl .signoff .share{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0;padding:16px 0 0;border:0;border-top:1px solid var(--g-line)}
.gl .signoff .share .s-k{margin-right:6px;font:500 .7rem var(--g-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--g-ink2)}
.gl .signoff .share button,.gl .signoff .share a{display:inline-flex;align-items:center;min-height:38px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(74,29,82,.12);font:500 .86rem var(--g-sans);color:var(--g-plum);text-decoration:none;cursor:pointer}
.gl .signoff .share button:hover,.gl .signoff .share a:hover{background:#fff;border-color:rgba(74,29,82,.25)}
.gl .signoff .share [hidden]{display:none}
.gl #more .sec-head{max-width:1000px;margin-left:auto;margin-right:auto}

/* ---------- step-by-step guides (js/guide.js) ---------- */
.gl .prose.is-guide > h2{position:relative;margin-top:2.4em;padding-top:1.3em;border-top:1px solid var(--g-line);scroll-margin-top:100px}
.gl .prose.is-guide > .toc + h2,.gl .prose.is-guide > h2:first-of-type{border-top:0;padding-top:0}
.gl .prose > h2 .h-k{display:block;margin:0 0 10px;font:500 .72rem/1 var(--g-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--g-brick)}
.gl .prose > h2 .h-k.bonus{color:#5B63D6}
.gl .is-guide > h2.done::after{content:"✓ Done";display:inline-block;margin-left:.7em;padding:5px 11px;border-radius:999px;background:var(--g-plum);color:#fff;font:500 .7rem var(--g-mono);letter-spacing:.08em;vertical-align:middle;position:static}

/* "jump to a step": a glass panel that stays beside you */
.gl .toc details{top:var(--toc-top,90px);max-height:calc(100vh - var(--toc-top,90px) - 18px);padding:14px 10px 10px;border-radius:var(--r-md);scrollbar-width:thin}
.gl .toc summary{padding:2px 8px 10px;font:500 .7rem/1.2 var(--g-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--g-ink2)}
.gl .toc summary b{display:none}
.gl .toc .meter{margin:0 8px 10px;padding:0 0 12px;border-top:0;border-bottom:1px solid var(--g-line)}
.gl .toc .meter .bar{height:6px;border-radius:6px;background:rgba(74,29,82,.08)}
.gl .toc .meter .bar i{border-radius:6px;background:var(--g-ribbon)}
.gl .toc .meter p{margin:8px 0 0;font:400 .82rem var(--g-sans);color:var(--g-ink2)}
.gl .toc .meter b{color:var(--g-plum)}
.gl .toc .meter .reset{color:var(--g-brick)}
.gl .toc.complete .meter p::after{font:400 1.2rem var(--g-serif);color:var(--g-plum)}
.gl .toc ol{margin:0;gap:1px}
.gl .toc a{gap:10px;padding:5px 8px;border-radius:12px;font:400 .86rem/1.25 var(--g-sans);color:var(--g-plum)}
.gl .toc a:hover{background:rgba(255,255,255,.75);color:var(--g-plum)}
.gl .toc a.on{background:#fff;color:var(--g-ink);font-weight:600;box-shadow:0 8px 18px -12px rgba(42,26,51,.45)}
.gl .toc .n{width:22px;height:22px;font:500 .66rem var(--g-mono);box-shadow:inset 0 0 0 1px rgba(74,29,82,.35);background:rgba(255,255,255,.7)}
.gl .toc .n.dot{box-shadow:none;background:none}
.gl .toc .n.dot::before{width:5px;height:5px;background:var(--g-brass)}
.gl .toc .n.bonus{box-shadow:inset 0 0 0 1px rgba(91,99,214,.5);color:#5B63D6;background:rgba(255,255,255,.7)}
.gl .toc a.on .n{background:var(--g-plum);color:#fff;box-shadow:none}
.gl .toc a.done .n{background:var(--g-plum);box-shadow:none}

/* a step's to-do list: one card, round checks, done items fade */
.gl .checklist{margin:0 0 1.5em;padding:4px;border-radius:var(--r-md);font:400 1.02rem/1.55 var(--g-sans)}
.gl .checklist li + li{border-top:1px solid var(--g-line)}
.gl .checklist label{grid-template-columns:24px 1fr;gap:14px;padding:13px 14px;border-radius:16px}
.gl .checklist label:hover{background:rgba(255,255,255,.75)}
.gl .checklist .box{width:24px;height:24px;margin-top:1px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(74,29,82,.4)}
.gl .checklist input:checked + .box{background:var(--g-plum);box-shadow:none}
.gl .checklist input:focus-visible + .box{outline:2px solid var(--g-brick);outline-offset:3px}
.gl .checklist input:checked ~ .txt{color:var(--g-ink3)}
.gl .checklist.one{width:fit-content;max-width:100%;padding:2px;border-radius:999px}
.gl .checklist.one label{padding:10px 20px 10px 12px;border-radius:999px;font-weight:500;color:var(--g-plum)}
/* numbered lists that aren't to-dos (when something breaks) */
.gl .prose ol.numbered{list-style:none;counter-reset:n;display:grid;gap:12px;margin:0 0 1.5em;padding:0;font:400 1.02rem/1.55 var(--g-sans)}
.gl .prose ol.numbered li{counter-increment:n;display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start}
.gl .prose ol.numbered li::before{content:counter(n);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--g-brass);background:rgba(255,255,255,.7);font:500 .72rem/1 var(--g-mono);color:var(--g-brick)}
/* bullet lists: quiet, with a small brass dot */
.gl .tips{gap:0;margin:0 0 1.5em;padding:0;font:400 1.02rem/1.55 var(--g-sans)}
.gl .tips li{padding:11px 0 11px 26px;background:none;border-radius:0;border-bottom:1px solid var(--g-line)}
.gl .tips li:last-child{border-bottom:0}
.gl .tips li::before{left:4px;top:21px;width:7px;height:7px;border-radius:50%;background:var(--g-brass)}
/* an example prompt: a small card, not a poster */
.gl .prompt-card{position:relative;margin:0 0 1.6em;padding:20px 22px 18px 26px;border-radius:var(--r-md);overflow:hidden}
.gl .prompt-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--g-ribbon-v)}
.gl .prompt-card figcaption{margin:0 0 10px;font:500 .7rem var(--g-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--g-brick)}
.gl .prose .prompt-card blockquote{max-width:none;margin:0 0 14px;padding:0;border:0;text-align:left;font:italic 400 1.16rem/1.55 var(--g-read);color:var(--g-ink)}
.gl .prose .prompt-card blockquote::before{content:none}
/* the art director's note: a side note, set apart but light */
.gl .ad-note{position:relative;margin:.6em 0 2em;padding:22px 26px 24px 30px;border-radius:var(--r-md);color:var(--g-ink);overflow:hidden}
.gl .ad-note::after{content:"";position:absolute;inset:0 auto 0 0;width:4px;height:auto;border-radius:0;background:var(--g-ribbon-v);opacity:1}
.gl .ad-note .ad-k{margin:0 0 10px;font:500 .7rem var(--g-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--g-brick)}
.gl .ad-note .ad-k span{color:var(--g-brass)}
.gl .ad-note p:not(.ad-k){font:400 clamp(1.08rem,1.4vw,1.2rem)/1.6 var(--g-read);color:var(--g-ink)}
/* the prompt builder */
.gl .builder{border-radius:var(--r-lg);overflow:hidden}
.gl .b-head{background:rgba(255,255,255,.55);border-bottom:1px solid var(--g-line)}
.gl .b-out{background:rgba(243,238,233,.55);border-top:1px solid var(--g-line)}
.gl .builder .bchip{border-radius:999px;border:1px solid rgba(74,29,82,.16);background:rgba(255,255,255,.75)}
.gl .builder .bchip[aria-pressed="true"]{background:var(--g-plum);border-color:var(--g-plum);color:#fff}
.gl .builder .pal,.gl .builder .typ{border-radius:16px}
.gl .builder .b-in{border-radius:14px}
.gl .builder .b-l > span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--g-plum);color:#fff;font:500 .72rem/1 var(--g-mono)}
.gl .b-kick{font:500 .7rem var(--g-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--g-brick)}

/* ---------- case studies ---------- */
.gl .prose .browser{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(42,26,51,.06),0 40px 80px -48px rgba(42,26,51,.55)}
.gl .prose .browser .chrome{background:#F4F1F3}
.gl .prose .browser .chrome i{width:9px;height:9px;border-radius:50%}
.gl .prose .browser .chrome i:nth-child(1){background:#D81F67}
.gl .prose .browser .chrome i:nth-child(2){background:#C98210}
.gl .prose .browser .chrome i:nth-child(3){background:#2E8FB8}
.gl .prose .browser.phone{border-radius:26px}
.gl .prose .body-img img{border-radius:var(--r-md)}
.gl .swatch-chip{padding:8px 8px 12px;border-radius:20px;transition:transform .35s var(--ease-out)}
.gl .swatch-chip:hover{transform:translateY(-3px)}
.gl .swatch-chip .chip{border-radius:14px}
.gl .swatch-chip .chip-name,.gl .swatch-chip .chip-use{padding:0 6px}
.gl .type-spec{border-radius:var(--r-md)}
.gl .prose .specs{gap:0;padding:6px 22px;border-radius:var(--r-md)}
.gl .prose .specs dt,.gl .prose .specs dd{padding:11px 0;border-bottom:1px solid var(--g-line)}
.gl .prose .specs dt:last-of-type,.gl .prose .specs dd:last-of-type{border-bottom:0}

/* ============================== letters: a glass card with a pill field ============================== */
.gl .letters{border-top:0}
.gl .letters .ticket{padding:clamp(32px,5vw,64px);border-radius:var(--r-lg)}
.gl.shop .letters .wrap{width:min(1100px,calc(100% - 36px));margin:0 auto;padding:clamp(28px,4.4vw,56px);border-radius:var(--r-lg)}
.gl .l-field{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;padding:6px 6px 6px 22px;border:1px solid rgba(74,29,82,.16);border-radius:999px;background:rgba(255,255,255,.78);box-shadow:inset 0 1px 2px rgba(42,26,51,.05);transition:border-color .2s,box-shadow .2s}
.gl .l-field:focus-within{border-color:var(--g-brass);box-shadow:0 0 0 4px rgba(201,166,107,.28)}
.gl .l-field input{flex:1 1 auto;min-width:0;min-height:0;padding:10px 0;border:0;border-radius:0;background:transparent;box-shadow:none;font:400 1.05rem var(--g-read);color:var(--g-ink)}
.gl .l-field input:focus,.gl .l-field input:focus-visible{outline:none}
.gl .l-field .btn{flex:none;width:auto;min-height:46px;padding:12px 24px;border-radius:999px}

/* ============================== about ============================== */
.gl .portrait::before{inset:18px 0 0 18px;border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--glass-shadow)}
.gl .portrait .frame,.gl .portrait .frame > img{border-radius:var(--r-lg)}
.gl .portrait .frame{box-shadow:0 0 0 1px rgba(255,255,255,.7),0 50px 80px -50px rgba(42,26,51,.7)}
.gl .now{padding:22px 26px;border-radius:var(--r-lg)}

/* ============================== the bookshelf ============================== */
.gl .nightstand-book{padding:14px 14px 20px;border-radius:var(--r-lg)}
.gl .shelves{border-radius:var(--r-lg)}
.gl .read-list-wrap summary{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid var(--glass-brd);box-shadow:var(--glass-shadow);font:500 .72rem var(--g-mono);letter-spacing:.12em}
.gl .book-pop{background:rgba(251,248,244,.86);-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);border-radius:var(--r-lg);box-shadow:inset 0 1px 0 #fff,0 50px 100px -40px rgba(42,26,51,.6)}
.gl .book-pop::backdrop{background:rgba(42,26,51,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gl .pop-cover{border-radius:var(--r-md);background:rgba(255,255,255,.55)}
.gl .pop-close{background:rgba(74,29,82,.07)}

/* ============================== Story Joy Labs ============================== */
.gl.labs-page .hero-grid > div:first-child > .kicker{margin-bottom:24px}
.gl .told{gap:12px;padding:clamp(22px,2.6vw,32px);border-radius:var(--r-lg)}
.gl .module{border-top:0}
.gl .module.tint{background:transparent}
.gl .status{display:inline-flex;width:fit-content;padding:8px 16px 8px 12px;border-radius:999px;color:var(--g-plum)}
.gl .hubcard{position:relative;border-top:0;border-radius:var(--r-lg);transition:transform .45s var(--ease-out),background .3s,box-shadow .45s}
.gl .hubcard::before,.gl .pkg::before{content:"";display:block;width:36px;height:4px;margin-bottom:6px;border-radius:4px;background:var(--hc,#5B63D6)}
.gl .hubcard:hover{transform:translateY(-4px);background:rgba(255,255,255,.8)}
.gl .sc-desk{border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.7),0 50px 90px -50px rgba(42,26,51,.6)}
.gl .sc-tabs{display:flex;flex-wrap:wrap;gap:2px;width:fit-content;max-width:100%;padding:6px;border-radius:26px;border-bottom:1px solid var(--glass-brd)}
.gl .sc-tabs button{margin:0;padding:8px 16px;border:0;border-radius:999px;font:500 .9rem var(--g-sans);color:var(--g-ink2);transition:background .25s,color .25s}
.gl .sc-tabs button:hover{background:rgba(74,29,82,.06);color:var(--g-plum)}
.gl .sc-tabs button[aria-pressed="true"],.gl .sc-tabs button[aria-pressed=true]{background:var(--g-plum);color:#fff;border-bottom-color:transparent}
.gl .pkg,.gl .module.tint .pkg{border-top:1px solid var(--glass-brd);border-radius:var(--r-lg);background:rgba(255,255,255,.58)}
.gl .pkg-list{border-top-color:var(--g-line)}
.gl .make{border-radius:var(--r-lg)}
.gl .wcard{padding:10px 10px 20px;border-radius:var(--r-lg);transition:transform .45s var(--ease-out),background .3s}
.gl .wcard:hover{transform:translateY(-4px);background:rgba(255,255,255,.8)}
.gl .wcard .wimg{border-bottom:0;border-radius:var(--r-md)}
.gl .wcard > :not(.wimg){margin-left:10px;margin-right:10px}
.gl .steps li{padding:22px 22px 24px;border-top:1px solid var(--glass-brd);border-radius:var(--r-lg)}
.gl .steps li::before{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--g-brass);background:rgba(255,255,255,.7);font:500 .72rem/1 var(--g-mono);color:var(--g-brick)}
.gl .faq{gap:10px;border-top:0}
.gl .faq details{padding:0 22px;border-bottom:1px solid var(--glass-brd);border-radius:var(--r-md)}
.gl .faq summary{padding:18px 0;font-size:1.4rem}
.gl .faq summary::after{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(74,29,82,.07);font-size:1.2rem;line-height:1}
/* the project form: dark glass on deep plum, like the homepage's contact form */
.gl .start{position:relative;isolation:isolate;overflow:hidden}
.gl .start::before{content:"";position:absolute;z-index:-1;right:-14vw;top:-30vw;width:min(80vw,1000px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(216,31,103,.42),rgba(91,99,214,.2) 55%,rgba(74,29,82,0))}
.gl .start::after{content:"";position:absolute;z-index:-1;left:-18vw;bottom:-34vw;width:min(70vw,900px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(46,143,184,.28),rgba(46,143,184,0))}
.gl .start .form{color:#fff;border-radius:var(--r-lg);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 70px -40px rgba(0,0,0,.7)}
.gl .start .form label{color:#EDE2EB}
.gl .start .form .opt{color:rgba(255,255,255,.55)}
.gl .start .form input,.gl .start .form select,.gl .start .form textarea{border:1px solid rgba(255,255,255,.22);border-radius:14px;background-color:rgba(255,255,255,.12);color:#fff}
.gl .start .form input::placeholder,.gl .start .form textarea::placeholder{color:rgba(255,255,255,.5)}
.gl .start .form option,.gl .start .form optgroup{color:#2A1A33;background:#fff}
.gl .start .form input:focus,.gl .start .form select:focus,.gl .start .form textarea:focus{outline:none;background-color:rgba(255,255,255,.18);border-color:var(--g-brass);box-shadow:0 0 0 4px rgba(201,166,107,.28)}
.gl .start .form .btn{background:var(--g-brass);color:var(--g-plum)}
.gl .start .form .btn:hover{background:#fff;color:var(--g-plum)}
.gl .start .form .form-msg{color:#fff}

/* ============================== the shop ============================== */
.gl .product-card{padding:10px 10px 18px;border-radius:var(--r-lg);transition:transform .45s var(--ease-out),background .3s}
.gl .product-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.8)}
.gl .product-card .frame{margin-bottom:10px;border-bottom:0;border-radius:var(--r-md)}
.gl .product-card > :not(.frame){margin-left:8px;margin-right:8px}
.gl .shop-empty{border-radius:var(--r-lg)}
.gl .crumb{width:fit-content;padding:9px 16px;border-radius:999px;color:var(--g-plum)}
.gl .gallery .frame.main{border-bottom:0;border-radius:var(--r-lg);box-shadow:0 0 0 1px rgba(255,255,255,.7),0 50px 90px -50px rgba(42,26,51,.6)}
.gl .thumbs button{border-radius:14px;box-shadow:0 0 0 1px rgba(255,255,255,.8),0 10px 20px -14px rgba(42,26,51,.5)}
.gl .buybox{margin:22px 0 4px;padding:clamp(18px,2.4vw,24px);border-radius:var(--r-md)}
.gl .buybox .buy{margin:0 0 10px}
.gl .product-desc .specs{gap:0 20px;padding:4px 20px;border-radius:var(--r-md);border-top:1px solid var(--glass-brd)}
.gl .product-desc .specs dt:last-of-type,.gl .product-desc .specs dd:last-of-type{border-bottom:0}

/* ============================== small pages: thanks, 404 ============================== */
.gl .solo{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:0;padding:clamp(56px,10vw,120px) 18px 0}
.gl .solo::after{content:none}
.gl .solo-card{display:flex;flex-direction:column;align-items:center;width:min(640px,100%);padding:clamp(36px,6vw,64px) clamp(22px,5vw,56px);border-radius:var(--r-lg);text-align:center}
.gl .solo-card h1{margin:0;font:400 clamp(2.6rem,6vw,4.2rem)/1 var(--g-serif);color:var(--g-plum)}
.gl .solo-card p{max-width:40ch;margin:16px auto 28px;font:400 1.15rem/1.6 var(--g-read);color:var(--g-ink2)}

/* ============================== motion ============================== */
@media (prefers-reduced-motion:no-preference){
  .aurora .a1{animation:aur1 46s ease-in-out infinite alternate}
  .aurora .a2{animation:aur2 54s ease-in-out infinite alternate}
  .aurora .a3{animation:aur1 60s ease-in-out -20s infinite alternate-reverse}
  .aurora .a4{animation:aur2 50s ease-in-out -12s infinite alternate-reverse}
  .gl .start::before{animation:aur2 30s ease-in-out infinite alternate}
}
@media (prefers-reduced-motion:reduce){
  .gl .entry,.gl .hubcard,.gl .wcard,.gl .product-card,.gl .swatch-chip{transition:none}
  .gl .entry:hover,.gl .hubcard:hover,.gl .wcard:hover,.gl .product-card:hover,.gl .swatch-chip:hover{transform:none}
  .gl .drawer,.gl .drawer.open{transition:none}
}
@keyframes aur1{to{transform:translate3d(8vmax,6vmax,0) scale(1.12)}}
@keyframes aur2{to{transform:translate3d(-7vmax,5vmax,0) scale(1.1)}}

/* ============================== smaller screens ============================== */
@media (max-width:1060px){
  .gl .top-links a{padding:10px 12px}
}
@media (max-width:980px){
  .gl .top-links{display:none}
  .gl .menu-btn{display:flex}
  .gl .toc details{border-radius:var(--r-md);box-shadow:var(--glass-shadow),0 16px 30px -18px rgba(42,26,51,.4)}
  .gl .toc summary{padding:4px 4px 4px 6px;font-size:.72rem}
  .gl .toc summary::after{color:var(--g-plum)}
}
@media (max-width:860px){
  .gl .site-head .wrap{min-height:60px;padding:0 8px 0 18px}
  .gl .site-head .mark img{height:38px}
  .gfoot .wrap{grid-template-columns:minmax(0,1fr)}
  .f-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gl .told{border:1px solid var(--glass-brd);padding:22px}
}
@media (max-width:700px){
  .gl .entry,.gl .entry.has-thumb,.gl .entries.compact .entry{grid-template-columns:minmax(0,1fr);gap:14px;padding:22px 22px 24px}
  .gl .e-meta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px;padding-top:0}
  .gl .entry .thumb{grid-row:1;width:100%;aspect-ratio:16/9}
  .gl .signoff{grid-template-columns:56px minmax(0,1fr);gap:4px 16px}
  .gl .signoff .face{width:56px;height:56px}
  .gl .filters{border-radius:22px}
  .gl .sc-tabs{flex-wrap:nowrap;overflow-x:auto;border-radius:999px;scrollbar-width:none}
  .gl .sc-tabs::-webkit-scrollbar{display:none}
  .gl .sc-tabs button{flex:none}
}
@media (max-width:520px){
  .gl .l-field{flex-direction:column;align-items:stretch;gap:10px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
  .gl .l-field:focus-within{box-shadow:none}
  .gl .l-field input{padding:13px 20px;border:1px solid rgba(74,29,82,.18);border-radius:999px;background:rgba(255,255,255,.82)}
  .gl .l-field input:focus{border-color:var(--g-brass);box-shadow:0 0 0 4px rgba(201,166,107,.28)}
  .gl .l-field .btn{width:100%}
  .f-cols{gap:26px 16px}
}

/* ============================== print ============================== */
@media print{
  .aurora,.gl .pf-progress,.gl .site-head,.gl .drawer,.gl .scrim,.gfoot{display:none!important}
  .gl{background:#fff}
}