/* ──────────────────────────────────────────────────────────────
   MADHURI MARAM — Design Tokens
   Site Root: madhurimaram.com (static portfolio) + Emdash CMS
   Source: iruhdam1/website (index.html + CLAUDE.md)
   ──────────────────────────────────────────────────────────────
   This file defines the FULL token palette used across Madhuri's
   personal site. Foundation palette: neutral/green/lime/yellow/
   mauve ramps mapped into a COSS-style semantic token layer.
   Type: NaN Jaune Midi Medium (display, https://www.nan.xyz/fonts/nan-jaune/) +
   Onest (UI/body/label) + Fuzzy Bubbles (handwritten).
   ────────────────────────────────────────────────────────────── */

/* Google Fonts — UI + body + handwritten. */
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@400;500;700&family=Fuzzy+Bubbles:wght@400;700&display=swap");

@font-face {
  /* NaN Jaune Midi Medium — https://www.nan.xyz/fonts/nan-jaune/ */
  font-family: "NaN Jaune Midi Medium";
  src: url("assets/fonts/NaNJaune-MidiMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Foundation color ramps — inlined locally so the static site does not depend on an external design-token package at runtime. */
:root, .light, .light-theme {
  --gray-1: #fcfcfc; --gray-2: #f9f9f9; --gray-3: #f0f0f0; --gray-4: #e8e8e8;
  --gray-5: #e0e0e0; --gray-6: #d9d9d9; --gray-7: #cecece; --gray-8: #bbbbbb;
  --gray-9: #8d8d8d; --gray-10: #838383; --gray-11: #646464; --gray-12: #202020;
  --mauve-1: #fdfcfd; --mauve-2: #faf9fb; --mauve-3: #f2eff3; --mauve-4: #eae7ec;
  --mauve-5: #e3dfe6; --mauve-6: #dbd8e0; --mauve-7: #d0cdd7; --mauve-8: #bcbac7;
  --mauve-9: #8e8c99; --mauve-10: #84828e; --mauve-11: #65636d; --mauve-12: #211f26;
  --grass-1: #fbfefb; --grass-2: #f5fbf5; --grass-3: #e9f6e9; --grass-4: #daf1db;
  --grass-5: #c9e8ca; --grass-6: #b2ddb5; --grass-7: #94ce9a; --grass-8: #65ba74;
  --grass-9: #46a758; --grass-10: #3e9b4f; --grass-11: #2a7e3b; --grass-12: #203c25;
  --lime-1: #fcfdfa; --lime-2: #f8faf3; --lime-3: #eef6d6; --lime-4: #e2f0bd;
  --lime-5: #d3e7a6; --lime-6: #c2da91; --lime-7: #abc978; --lime-8: #8db654;
  --lime-9: #bdee63; --lime-10: #b0e64c; --lime-11: #5c7c2f; --lime-12: #37401c;
  --yellow-1: #fdfdf9; --yellow-2: #fefce9; --yellow-3: #fffab8; --yellow-4: #fff394;
  --yellow-5: #ffe770; --yellow-6: #f3d768; --yellow-7: #e4c767; --yellow-8: #d5ae39;
  --yellow-9: #ffe629; --yellow-10: #ffdc00; --yellow-11: #9e6c00; --yellow-12: #473b1f;
}


:root {
  /* ─────────────────────────────────────
     FONT STACKS
     ───────────────────────────────────── */
  --font-heading: "NaN Jaune Midi Medium", Georgia, serif;
  --font-display: "NaN Jaune Midi Medium", Georgia, serif;  /* headings, hero name, section titles */
  --font-display-weight: 500;
  --font-sans:    "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label:   "Onest", sans-serif;    /* nav, eyebrows, labels, meta */
  --font-body:    "Onest", sans-serif;    /* long-form reading */
  --font-hand:    "Fuzzy Bubbles", cursive;     /* rare handwritten accent */
  --font-mono:    ui-monospace, "SF Mono", Menjou, Consolas, monospace;

  /* ─────────────────────────────────────
     TYPE SCALE (matches index.html + emdash theme)
     ───────────────────────────────────── */
  --fs-2xs:  11px;   /* tiny labels */
  --fs-xs:   12px;   /* eyebrows, tiny meta */
  --fs-sm:   13px;   /* nav item, project tag, footer link */
  --fs-md-sm: 14px;  /* compact body / card copy */
  --fs-base: 16px;   /* body default */
  --fs-md:   17px;   /* hero bio, long-form body */
  --fs-lg:   20px;   /* activity card title */
  --fs-xl:   22px;   /* footer brand wordmark */
  --fs-2xl:  36px;   /* section title (h2) */
  --fs-hero: clamp(40px, 4.5vw, 64px); /* hero name (h1) */
  --fs-home-intro: 32px;
  --fs-home-intro-mobile: clamp(30px, 5vw, 42px);
  --fs-home-intro-mobile-sm: clamp(27px, 8vw, 34px);
  --fs-home-intro-mobile-xs: clamp(25px, 7.5vw, 30px);
  --fs-card-title-mobile: 18px;

  --lh-tight:   1.0;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;   /* body copy sweet spot */

  --tracking-tight: 0;         /* display type */
  --tracking-card:  0;
  --tracking-wide:  0.1em;     /* uppercase eyebrows */

  /* ─────────────────────────────────────
     COSS-ALIGNED SEMANTIC TOKENS
     Brand remains NaN Jaune Midi Medium + Onest + the existing grass/lime system.
     ───────────────────────────────────── */
  --background:            #FAFAFA;
  --foreground:            var(--gray-12);
  --card:                  #ffffff;
  --card-foreground:       var(--gray-12);
  --popover:               #ffffff;
  --popover-foreground:    var(--gray-12);
  --primary:               var(--grass-11);
  --primary-foreground:    var(--grass-1);
  --secondary:             var(--gray-2);
  --secondary-foreground:  var(--gray-12);
  --muted:                 var(--gray-3);
  --muted-foreground:      var(--gray-11);
  --accent:                var(--grass-9);
  --accent-foreground:     var(--grass-1);
  --border:                var(--gray-5);
  --border-strong:         var(--gray-6);
  --input:                 var(--gray-4);
  --ring:                  var(--lime-9);
  --success:               var(--grass-9);
  --success-foreground:    var(--grass-1);
  --warning:               var(--yellow-9);
  --warning-foreground:    var(--yellow-12);
  --info:                  var(--mauve-8);
  --info-foreground:       var(--mauve-12);
  --destructive:           #b63e47;
  --destructive-foreground: #fff7f7;

  /* COSS-friendly aliases for future library/component reuse */
  --color-background:             var(--background);
  --color-foreground:             var(--foreground);
  --color-card:                   var(--card);
  --color-card-foreground:        var(--card-foreground);
  --color-popover:                var(--popover);
  --color-popover-foreground:     var(--popover-foreground);
  --color-primary:                var(--primary);
  --color-primary-foreground:     var(--primary-foreground);
  --color-secondary:              var(--secondary);
  --color-secondary-foreground:   var(--secondary-foreground);
  --color-muted:                  var(--muted);
  --color-muted-foreground:       var(--muted-foreground);
  --color-accent:                 var(--accent);
  --color-accent-foreground:      var(--accent-foreground);
  --color-border:                 var(--border);
  --color-input:                  var(--input);
  --color-ring:                   var(--ring);
  --color-destructive:            var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info:                   var(--info);
  --color-info-foreground:        var(--info-foreground);
  --color-success:                var(--success);
  --color-success-foreground:     var(--success-foreground);
  --color-warning:                var(--warning);
  --color-warning-foreground:     var(--warning-foreground);

  /* Compatibility aliases for the current static site */
  --page-bg:       var(--background);
  --surface:       var(--secondary);   /* cards, panels */
  --surface-hover: var(--muted);
  --fg:            var(--foreground);  /* primary text */
  --fg-muted:      var(--muted-foreground);
  --fg-subtle:     var(--gray-9);      /* eyebrow, de-emphasis */
  --fg-inverse:    var(--primary-foreground);

  /* Brand accents — Madhuri's green system, mapped into the semantic layer above */
  --hero-bg:       var(--lime-4);      /* light lime wash (activities + hero alt) */
  --hero-bg-deep:  var(--primary);     /* dark-green hero/footer */
  --accent-hover:  var(--grass-10);
  --accent-bright: var(--lime-9);      /* highlights, skill fill */
  --accent-soft:   var(--grass-3);     /* activity card bg, hover chip */
  --accent-dark:   var(--primary);     /* footer bg, deep contrast */
  --modal-scrim-bg: #0A3C14;           /* project popup overlay — deep brand green */
  --accent-orange: #C45000;
  --accent-purple: #6B4FE0;
  --accent-pink:   #E85A8C;

  /* On-accent text colors — use against the dark-green hero/footer */
  --on-accent-dark:    var(--grass-1);
  --on-accent-muted:   var(--grass-3);
  --on-accent-subtle:  var(--grass-4);
  --on-accent-label:   var(--grass-7);

  /* Section-tint palette (Framer era, used for dynamic bg) */
  --tint-intro:      #32583F;   /* dark green */
  --tint-projects:   #9FE477;   /* bright green (lime-9 cousin) */
  --tint-sidequests: #D9EADA;   /* light green */
  --tint-writing:    #EBEADA;   /* light yellow */
  --tint-teaching:   #EBEBEB;   /* grey */

  /* Skill pill colors — pulled directly from index.html */
  --skill-product-strategy:  #5A189A;
  --skill-facilitation:      #377C2B;
  --skill-value-prop:        #C91075;
  --skill-design-sprints:    #415A77;
  --skill-system-design:     #17B28A;
  --skill-user-experience:   #8B2FC9;
  --skill-user-research:     #C45000;
  --skill-interface-design:  #4B244A;
  --skill-product-design:    #2D6A00;
  --skill-design-workshops:  #B07800;
  --skill-coaching:          #0078A8;
  --skill-mentoring:         #028090;
  --skill-prototyping:       #7A3E00;
  --skill-no-code:           #C0003A;
  --skill-mvp-design:        #1838E4;
  --skill-agentic-design:    #D4452B;
  --skill-llm-workflows:     #6B4FE0;
  --skill-vibe-coding:       #E85A8C;
  --skill-evals:             #00897B;

  /* ─────────────────────────────────────
     SPACING — 4-px base grid
     ───────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-9: 36px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-18: 72px;
  --s-20: 80px;
  /* Legacy scale step — 100px page-bottom rhythm, not 8pt×12 */
  --page-bottom-pad: 100px;
  --s-24: var(--page-bottom-pad);

  /* Semantic spacing aliases — Festina docs + work detail showcase (design.md → Spacing) */
  --festina-space-section: var(--s-6);      /* 24px — section lead → demo */
  --festina-space-kicker: var(--s-3);       /* 12px — kicker → demo box */
  --festina-space-example: var(--s-8);      /* 32px — between example groups */
  --festina-space-stack: var(--s-4);        /* 16px — stacked demo blocks */
  --festina-space-group-label: var(--s-3);  /* 12px — sidebar group label inset */
  --festina-space-group-tab: var(--s-2);    /* 8px — label → first tab */
  --festina-space-group-break: var(--s-5);  /* 20px — nav group breaks */

  /* Site footer band — shared `.coss-footer.coss-footer-band` (Festina #footer) */
  --coss-footer-band-pad-y: var(--festina-space-stack);
  --coss-footer-band-pad-x: var(--hub-content-inset, clamp(16px, 3vw, 28px));
  --coss-footer-meta-gap: var(--s-2);

  /* Work detail semantic — maps to festina-space / layout tokens (Festina #spacing) */
  --work-detail-sidebar-w: min(272px, 26vw);
  --work-detail-sidebar-pad-block: var(--s-5);
  --work-detail-sidebar-pad-inline: var(--s-5);
  --work-detail-sidebar-pad-bottom: var(--s-6);
  --work-detail-sidebar-gap: var(--festina-space-kicker);
  --work-detail-stage-inset-x: var(--hub-content-inset, clamp(16px, 3vw, 28px));
  --work-detail-stage-media-max-w: min(960px, 100%);
  --work-detail-grid-gap: clamp(var(--s-5), 4vw, var(--s-10));
  --work-detail-figure-gap: clamp(var(--festina-space-stack), 2.5vw, var(--detail-gap, var(--s-10)));
  --work-detail-type-footer-min-h: calc(var(--s-16) + var(--s-12));
  --work-detail-meta-row-gap: var(--festina-space-kicker);
  --work-detail-meta-row-pad-y: var(--s-2);
  --work-detail-stat-inline-gap: var(--s-1);
  --work-detail-stat-row-gap: var(--festina-space-kicker);
  --work-detail-nav-pad-y: clamp(var(--festina-space-stack), 2vw, var(--s-6));
  --work-detail-nav-gap: clamp(var(--festina-space-stack), 3vw, var(--s-8));
  --work-detail-fs-kicker: var(--fs-2xs);
  --work-detail-fs-body: var(--fs-sm);
  --work-detail-fs-meta: var(--fs-xs);
  --work-detail-fs-stat: var(--fs-lg);
  --work-detail-meta-type-gap: var(--s-2);
  --work-detail-principle-stack-gap: var(--festina-space-kicker);
  --work-detail-principle-row-gap: var(--s-1);
  --work-detail-principle-grid-gap: var(--s-1) var(--s-2);
  --work-detail-split-divider-gap: var(--festina-space-stack);
  --work-detail-project-nav-item-gap: var(--s-1);
  --work-detail-project-nav-pad-y: clamp(var(--festina-space-stack), 2vw, var(--s-5));
  --work-detail-project-nav-pad-x: var(--work-detail-stage-inset-x);
  --work-detail-static-pill-gap: var(--s-1);
  --work-detail-static-pill-pad-y: var(--s-2);
  --work-detail-static-pill-pad-bottom: var(--s-1);
  --work-detail-type-tag-gap: var(--s-2);

  /* Practice hub semantic — /work/ai */
  --practice-hub-scroll-offset: calc(var(--detail-nav-h, 60px) + var(--festina-space-kicker));
  --practice-hub-panel-gap: clamp(var(--festina-space-section), 4vw, var(--s-9));
  --practice-hub-panel-pad: clamp(var(--s-5), 3.5vw, var(--s-8));
  --practice-hub-copy-gap: var(--festina-space-kicker);
  --practice-hub-picker-gap: var(--festina-space-kicker);
  --practice-hub-card-pad-y: var(--festina-space-stack);
  --practice-hub-card-pad-x: var(--festina-space-stack);
  --practice-hub-card-gap: var(--s-1);
  --practice-hub-card-body-gap: var(--s-1);
  --practice-hub-primary-gap: var(--festina-space-kicker);
  --practice-hub-primary-pad: var(--s-5);
  --practice-hub-tab-icon-gap: var(--s-1);
  --practice-hub-tab-pad-y: var(--s-2);
  --practice-hub-tab-stack-gap: var(--festina-space-kicker);
  --practice-hub-tab-group-gap: var(--festina-space-group-tab);

  /* Hire page semantic — /hire-me (Festina #spacing-hire · docs/hire-spacing-harness.md) */
  --hire-page-gutter: var(--hire-content-inset, var(--hub-content-inset));
  --hire-page-band-gap: var(--festina-space-section);
  --hire-page-frame-gap: var(--s-9);
  --hire-page-marquee-pad: var(--festina-space-kicker);
  --hire-page-hero-stack: var(--festina-space-stack);
  --hire-page-hero-pad: var(--s-6);
  --hire-persona-section-gap: var(--s-9);
  --hire-persona-accordion-stack-gap: 0;
  --hire-persona-header-gap: var(--festina-space-stack);
  --hire-persona-header-pad: var(--festina-space-kicker);
  --hire-persona-content-gap: var(--festina-space-kicker);
  --hire-persona-diagram-gap: var(--s-7);
  --hire-persona-metric-gap: var(--festina-space-kicker);
  --hire-persona-list-gap: var(--festina-space-kicker);
  --hire-persona-card-gap: var(--festina-space-group-tab);
  --hire-persona-card-pad: var(--festina-space-kicker) var(--festina-space-stack);
  --hire-persona-grid-gap: var(--festina-space-group-tab);
  --hire-proof-section-gap: var(--festina-space-stack);
  --hire-proof-rail-gap: var(--festina-space-group-tab);
  --hire-proof-panel-title-gap: var(--festina-space-section);
  --hire-proof-panel-stack: var(--festina-space-kicker);
  --hire-proof-panel-pad-block: var(--s-6);
  --hire-proof-panel-pad-inline: var(--s-5);
  --hire-proof-panel-pad-bottom: var(--s-7);
  --hire-proof-rail-pad-block: var(--festina-space-stack);
  --hire-proof-rail-pad-inline: var(--festina-space-kicker);
  --hire-proof-rail-stack: var(--festina-space-kicker);
  --hire-proof-rail-mobile-pad-inline: var(--s-4);
  --hire-proof-rail-mobile-pad-bottom: var(--s-2);
  --hire-proof-rail-stuck-label-margin-block-start: var(--festina-space-group-tab);
  --hire-proof-rail-stuck-label-margin-block-end: var(--s-2);
  --hire-proof-item-pad: var(--festina-space-stack);
  --hire-proof-item-col-gap: var(--festina-space-stack);
  --hire-proof-meta-tight: var(--s-1);
  --hire-proof-content-gap: var(--s-2);
  --hire-proof-logo-row-gap: var(--festina-space-kicker);
  --hire-proof-logo-inline-gap: var(--festina-space-stack);
  --hire-proof-logo-inline-gap-loose: var(--s-5);
  --hire-proof-chip-gap: var(--festina-space-kicker);

  /* ─────────────────────────────────────
     RADIUS
     ───────────────────────────────────── */
  --radius:      12px;
  --radius-sm:   6px;     /* buttons, small panels */
  --radius-md:   12px;    /* cards, project cards, activity groups */
  --radius-lg:   14px;    /* sidenav trigger */
  --radius-xl:   12px;    /* COSS frame panels (rounded-xl) */
  --radius-2xl:  16px;    /* COSS frame shell (rounded-2xl) */
  --radius-pill: 9999px;  /* skill pills, tag pills */

  /* ─────────────────────────────────────
     SHADOW + ELEVATION
     ───────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:    0 4px 16px rgba(0,0,0,0.10);   /* sidenav trigger */
  --shadow-md:    0 8px 32px rgba(0,0,0,0.12);   /* dropdown panel */
  --shadow-lg:    0 16px 40px rgba(0,0,0,0.10);  /* card hover lift */
  --shadow-polaroid: 0 20px 60px rgba(0,0,0,0.35); /* hero polaroid */

  /* ─────────────────────────────────────
     LAYOUT
     ───────────────────────────────────── */
  --container-max: 1160px;
  --container-pad: 40px;
  --content-max-wide: 960px;
  --content-max-narrow: 800px;
  --hub-content-inset: clamp(16px, 5vw, 36px);
  --popup-shell-max: min(calc(var(--content-max-wide) - (2 * var(--hub-content-inset))), 100%);
  --shell-inset-x: var(--s-18); /* total horizontal gutter subtracted from shell width */
  --shell-pad-top: 38px;
  --shell-pad-bottom: 84px;
  --detail-shell-max: 1664px;
  --detail-gap: var(--s-7);
  --sidepanel-w:   320px;     /* Framer-era sticky sidebar */
  --sidenav-trigger: 48px;    /* round nav button */
  --hero-min-h:    520px;
  --home-hero-max-width: 800px;
  --home-hero-columns: 1fr 1fr;
  --home-hero-gap: var(--s-12);
  --home-hero-pad-inline: var(--s-8);
  --home-hero-copy-width: 302px;
  --home-hero-copy-pad-top: var(--s-10);
  --home-hero-copy-line-height: 1.2;
  --home-hero-copy-weight: 500;
  --home-hero-avatar-size: 80px;
  --home-hero-avatar-size-sm: 68px;
  --home-hero-avatar-offset-top: -110px;
  --home-hero-avatar-offset-left: 0px;
  --home-hero-underline-offset: 5px;
  --home-hero-underline-thickness: 2px;
  --home-hero-mobile-gap: var(--s-8);
  --home-hero-mobile-pad-top: var(--s-8);
  --home-hero-mobile-pad-bottom: var(--s-10);
  --home-hero-mobile-pad-inline: var(--s-8);
  --home-hero-mobile-pad-inline-sm: var(--s-5);
  --home-hero-mobile-pad-inline-xs: var(--s-4);
  --home-hero-mobile-avatar-gap: var(--s-5);
  --home-skills-mobile-h: 320px;
  --home-skills-mobile-h-sm: 380px;
  --home-skills-mobile-h-xs: 420px;

  --pill-bg: #EFEFEF;
  --pill-pad-y: 6px;
  --pill-pad-x: var(--s-3);
  --pill-font-size: var(--fs-sm);
  --pill-line-height: 16px;

  --card-header-gap: var(--s-4);
  --card-stack-gap: var(--s-2);
  --card-pad-y: var(--s-5);
  --card-pad-x: var(--s-6);
  --card-pad-y-compact: 18px;
  --card-pad-x-compact: 22px;
  --footer-band-bg: #F7F9F8;
  --card-pad-x-mobile: var(--s-5);
  --card-pad-all-tight: var(--s-4);
  --card-title-size: var(--fs-xl);
  --card-title-size-tablet: var(--fs-lg);
  --card-copy-size: var(--fs-md-sm);
  --card-cta-size: var(--fs-sm);

  /* ─────────────────────────────────────
     MOTION
     ───────────────────────────────────── */
  --ease:         cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:     ease-out;
  --dur-fast:     0.15s;
  --dur-base:     0.2s;
  --dur-slow:     0.3s;
  --dur-crossfade:0.6s;  /* dynamic background section change */
}

/* ──────────────────────────────────────────────────────────────
   SEMANTIC TEXT STYLES — attach to elements directly
   ────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1, .hero-name {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--font-display-weight);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h2, .h2, .section-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--font-display-weight);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h3, .h3, .card-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--font-display-weight);
  line-height: var(--lh-snug);
  color: var(--fg);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.eyebrow, .section-label {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.label, .nav-item {
  font-family: var(--font-label);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-muted);
}

.meta, .tag-line {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}

.handwritten {
  font-family: var(--font-hand);
  font-weight: 700;
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Links — underline on hover, inherit color by default */
a { color: inherit; text-decoration: none; transition: color var(--dur-base) var(--ease); }
a:hover { color: var(--accent); }

/* Default focus ring — brand grass */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (max-width: 900px) {
  :root {
    --hub-content-inset: clamp(16px, 4.5vw, 28px);
  }
}

@media (max-width: 600px) {
  :root {
    --hub-content-inset: 16px;
  }
}