/* Cedric King — component classes, ported from the Claude Design system
   (Eyebrow, Button, Card, Badge, Tag, KeynoteCard, MediaFigure, PullQuote,
   StatBlock, Wordmark, NavBar, Dialog, Toast, form controls, IconButton). */

/* ---------- Eyebrow ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.eyebrow--rule::before{content:"";width:32px;height:var(--rule-medium);background:currentColor}
.eyebrow--inverse{color:var(--brass-300)}
.eyebrow--muted{color:var(--text-tertiary)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:var(--tap-min);
  font-family:var(--font-display);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.08em;
  white-space:nowrap;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-control);
  text-decoration:none;height:var(--control-h);padding:0 var(--space-6);font-size:var(--size-body-sm);border-style:solid;border-width:var(--rule-medium)}
.btn-sm{height:var(--control-h-sm);padding:0 var(--space-4);font-size:var(--size-caption)}
.btn-lg{height:var(--control-h-lg);padding:0 var(--space-8);font-size:var(--size-body)}
.btn-full{width:100%}
.btn-primary{background:var(--action-fill);color:var(--action-text);border-color:var(--action-fill)}
.btn-primary:hover{background:var(--action-fill-hover);border-color:var(--action-fill-hover)}
.btn-accent{background:var(--action-accent-fill);color:var(--action-accent-text);border-color:var(--action-accent-fill)}
.btn-accent:hover{background:var(--action-accent-hover);border-color:var(--action-accent-hover)}
.btn-secondary{background:transparent;color:var(--text-primary);border-color:var(--action-quiet-border)}
.btn-secondary:hover{background:var(--bone-200)}
.btn-inverse{background:var(--bone-50);color:var(--graphite-900);border-color:var(--bone-50)}
.btn-inverse:hover{background:var(--brass-300);border-color:var(--brass-300)}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:transparent;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.btn-elevated{box-shadow:var(--shadow-hard)}
.btn-elevated:active{box-shadow:var(--shadow-pressed);transform:translate(2px,2px)}
.btn:disabled{cursor:not-allowed;background:var(--action-disabled-fill);color:var(--action-disabled-text);border-color:var(--action-disabled-fill);box-shadow:none}

/* ---------- Badge ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:5px var(--space-3);font:var(--type-eyebrow);letter-spacing:var(--tracking-label);text-transform:uppercase;border-radius:var(--radius-sm)}
.badge-neutral{background:var(--graphite-900);color:var(--bone-50)}
.badge-brass{background:var(--brass-500);color:var(--graphite-900)}
.badge-honor{background:var(--maroon-600);color:var(--bone-50)}
.badge-olive{background:var(--olive-700);color:var(--bone-50)}
.badge-outline{background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 var(--rule-medium) var(--graphite-900)}

/* ---------- Tag (filter pill) ---------- */
.tag{font:var(--type-body-sm);font-weight:var(--weight-medium);padding:7px var(--space-4);border-radius:var(--radius-pill);
  cursor:pointer;transition:var(--transition-control);border:var(--rule-hairline) solid var(--border-subtle);background:transparent;color:var(--text-secondary)}
.tag:hover{background:var(--bone-200)}
.tag[aria-pressed="true"]{border-color:var(--graphite-900);background:var(--graphite-900);color:var(--bone-50)}

/* ---------- Card / KeynoteCard ---------- */
.card{border-style:solid;border-width:var(--rule-hairline);border-radius:var(--radius-none);padding:var(--space-8);
  transition:box-shadow var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}
.card-paper{background:var(--surface-card);color:var(--text-primary);border-color:var(--border-subtle)}
.card-sunken{background:var(--surface-sunken);color:var(--text-primary);border-color:var(--bone-300)}
.card-dark{background:var(--surface-dark);color:var(--text-inverse);border-color:var(--olive-700)}
.card-ink{background:var(--surface-dark-alt);color:var(--text-inverse);border-color:var(--graphite-700)}
.card-brass{background:var(--brass-100);color:var(--text-primary);border-color:var(--brass-300)}
.card-interactive{cursor:pointer}
.card-interactive:hover{box-shadow:var(--shadow-hard-sm);transform:translate(-2px,-2px)}

.keynote-card{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);height:100%;text-align:left;width:100%}
.keynote-card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.keynote-card__duration{font:var(--type-eyebrow);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-tertiary)}
.card-ink .keynote-card__duration{color:var(--olive-200)}
.keynote-card__title{font:var(--type-title);text-transform:uppercase;color:var(--text-primary)}
.card-ink .keynote-card__title{color:var(--bone-50)}
.keynote-card__summary{font:var(--type-body-sm);color:var(--text-secondary);flex:1}
.card-ink .keynote-card__summary{color:var(--olive-200)}
.keynote-card__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);border-top:var(--rule-hairline) solid var(--border-subtle);padding-top:var(--space-4)}
.card-ink .keynote-card__foot{border-top-color:var(--border-inverse)}
.keynote-card__audiences{font:var(--type-caption);color:var(--text-tertiary)}
.card-ink .keynote-card__audiences{color:var(--olive-300)}
.keynote-card__arrow{color:var(--text-accent);flex:0 0 auto}
.card-ink .keynote-card__arrow{color:var(--brass-300)}

/* ---------- MediaFigure ---------- */
.media-figure{margin:0;display:flex;flex-direction:column;gap:var(--space-3)}
.media-figure__frame{position:relative;overflow:hidden;background:var(--graphite-800)}
.media-figure__frame img{width:100%;height:100%;object-fit:cover;display:block}
.media-figure--mono img{filter:grayscale(1) contrast(1.06)}
.media-figure--warm img{filter:saturate(.85) sepia(.12)}
.media-figure__scrim{position:absolute;inset:0}
.media-figure__scrim--bottom{background:var(--scrim-bottom)}
.media-figure__caption{font:var(--type-caption);color:var(--text-tertiary);display:flex;gap:var(--space-3);justify-content:space-between}
.media-figure__credit{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;white-space:nowrap}
.media-figure--placeholder .media-figure__frame{background:var(--olive-800);display:flex;align-items:center;justify-content:center}
.media-figure--placeholder .media-figure__frame::after{content:attr(data-placeholder-label);font:var(--type-eyebrow);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--olive-300);text-align:center;padding:var(--space-6)}

/* ---------- PullQuote ---------- */
.pullquote{margin:0;display:flex;flex-direction:column;gap:var(--space-6);border-left:var(--rule-heavy) solid var(--graphite-900);padding-left:var(--space-8);max-width:20ch}
.pullquote--dark{border-left-color:var(--brass-500)}
.pullquote__text{margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(2rem,4.5vw,3.5rem);line-height:var(--leading-tight);text-transform:uppercase;letter-spacing:var(--tracking-display);color:var(--text-primary);max-width:22ch}
.pullquote--dark .pullquote__text{color:var(--bone-50)}
.pullquote__attr{font:var(--type-eyebrow);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-accent)}
.pullquote--dark .pullquote__attr{color:var(--brass-300)}
.pullquote__role{color:var(--text-tertiary)}
.pullquote--dark .pullquote__role{color:var(--olive-200)}

/* ---------- StatBlock ---------- */
.stat-block{display:flex;flex-direction:column;gap:var(--space-2);border-top:var(--rule-medium) solid var(--graphite-900);padding-top:var(--space-4)}
.stat-block--dark{border-top-color:var(--brass-500)}
.stat-block__value{font:var(--type-stat);color:var(--text-primary);display:flex;align-items:baseline;gap:var(--space-2)}
.stat-block--dark .stat-block__value{color:var(--bone-50)}
.stat-block__unit{font-size:.34em;font-family:var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-accent)}
.stat-block--dark .stat-block__unit{color:var(--brass-300)}
.stat-block__label{font:var(--type-body-sm);color:var(--text-secondary);max-width:24ch}
.stat-block--dark .stat-block__label{color:var(--olive-200)}

/* ---------- Wordmark ---------- */
.wordmark{display:inline-flex;flex-direction:column;gap:var(--space-2);color:var(--text-primary)}
.wordmark--inverse{color:var(--bone-50)}
.wordmark__name{font-family:var(--font-display);font-weight:var(--weight-bold);line-height:.92;letter-spacing:.01em;text-transform:uppercase;display:block;font-size:3rem}
.wordmark__rule{height:var(--rule-medium);width:100%;background:currentColor;display:block}
.wordmark__sub{font-family:var(--font-mono);font-size:var(--size-body-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:.75}

/* ---------- NavBar (desktop) ---------- */
.navbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);
  padding:var(--space-4) var(--gutter);background:var(--surface-dark-alt);border-bottom:var(--rule-medium) solid var(--brass-500)}
.navbar--paper{background:var(--surface-page);border-bottom-color:var(--graphite-900)}
.navbar__brand{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:1.375rem;line-height:1;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:var(--bone-50)}
.navbar--paper .navbar__brand{color:var(--text-primary)}
.navbar__links{display:flex;align-items:center;gap:var(--space-6)}
.navbar__link{font:var(--type-label);text-transform:uppercase;letter-spacing:.1em;font-size:var(--size-caption);text-decoration:none;
  padding-bottom:3px;color:var(--olive-200);border-bottom:var(--rule-medium) solid transparent}
.navbar--paper .navbar__link{color:var(--text-secondary)}
.navbar__link[aria-current="page"]{color:var(--brass-300);border-bottom-color:var(--brass-300)}
.navbar--paper .navbar__link[aria-current="page"]{color:var(--text-primary);border-bottom-color:var(--graphite-900)}

/* ---------- Mobile header + drawer ---------- */
.mobile-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) var(--gutter);background:var(--surface-dark-alt);border-bottom:var(--rule-medium) solid var(--brass-500)}
.mobile-header__brand{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:1.25rem;line-height:1;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:var(--bone-50)}
.menu-btn{display:flex;align-items:center;gap:var(--space-2);min-height:44px;min-width:44px;justify-content:center;padding:0 var(--space-3);
  background:transparent;border:var(--rule-medium) solid var(--bone-50);border-radius:var(--radius-sm);color:var(--bone-50);
  font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;cursor:pointer}
.drawer{position:fixed;inset:0;z-index:60;background:var(--surface-dark-alt);display:none;flex-direction:column;
  padding:var(--space-6) var(--gutter) var(--space-10);gap:var(--space-8);overflow:auto}
.drawer.is-open{display:flex}
.drawer__top{display:flex;align-items:center;justify-content:space-between}
.drawer__brand{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:1.25rem;text-transform:uppercase;color:var(--bone-50)}
.drawer__close{min-height:44px;min-width:44px;background:transparent;border:var(--rule-medium) solid var(--bone-50);border-radius:var(--radius-sm);
  color:var(--bone-50);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--tracking-label);cursor:pointer}
.drawer__nav{display:flex;flex-direction:column;gap:var(--space-1);border-top:var(--rule-hairline) solid var(--border-inverse)}
.drawer__link{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:var(--space-3) 0;
  border-bottom:var(--rule-hairline) solid var(--border-inverse);font:var(--type-headline);text-transform:uppercase;text-decoration:none;color:var(--bone-50)}
.drawer__link[aria-current="page"]{color:var(--brass-300)}
.drawer__link-num{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--tracking-label);color:var(--olive-300)}
.drawer__actions{display:flex;flex-direction:column;gap:var(--space-4)}
.drawer__email{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--olive-300);text-decoration:none}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface-accent);border-top:var(--rule-medium) solid var(--graphite-900);
  padding:var(--space-3) var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  transform:translateY(110%);transition:transform var(--duration-base) var(--ease-out)}
.sticky-cta.is-visible{transform:translateY(0)}
.sticky-cta__label{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--brass-800)}

/* ---------- Dialog ---------- */
.dialog-overlay{position:fixed;inset:0;z-index:80;background:var(--surface-scrim);display:none;place-items:center;padding:var(--space-6)}
.dialog-overlay.is-open{display:grid}
.dialog{width:100%;max-width:640px;background:var(--surface-card);border:var(--rule-medium) solid var(--graphite-900);
  box-shadow:var(--shadow-overlay);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-5);max-height:86vh;overflow:auto}
.dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6)}
.dialog__eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.dialog__title{font:var(--type-headline);text-transform:uppercase}
.dialog__body{font:var(--type-body);color:var(--text-secondary);display:flex;flex-direction:column;gap:var(--space-4)}
.dialog__label{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--brass-800)}
.dialog__footer{display:flex;gap:var(--space-3);justify-content:flex-end;padding-top:var(--space-2)}

/* ---------- IconButton ---------- */
.icon-btn{width:44px;height:44px;display:inline-grid;place-items:center;border-style:solid;border-width:var(--rule-medium);
  border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-control);background:transparent;color:var(--text-primary);border-color:var(--action-quiet-border)}
.icon-btn:hover{background:var(--bone-200)}
.icon-btn svg{width:20px;height:20px}

/* ---------- Toast ---------- */
.toast{display:flex;gap:var(--space-4);align-items:flex-start;background:var(--surface-dark-alt);color:var(--text-inverse);
  padding:var(--space-4) var(--space-5);border-left:var(--rule-heavy) solid var(--success-600);max-width:420px;box-shadow:var(--shadow-overlay)}
.toast__icon{color:var(--success-600);margin-top:2px;flex:0 0 auto}
.toast__body{display:flex;flex-direction:column;gap:2px;flex:1}
.toast__title{font:var(--type-label);text-transform:uppercase;letter-spacing:.06em}
.toast__text{font:var(--type-body-sm);color:var(--olive-200)}
.toast__dismiss{background:none;border:none;color:var(--olive-200);cursor:pointer;padding:0;font:var(--type-caption);align-self:flex-start}
.toast-wrap{position:fixed;right:var(--gutter);bottom:var(--space-8);z-index:70;max-width:420px;display:none}
.toast-wrap.is-visible{display:block}

/* ---------- Form controls ---------- */
.field{display:flex;flex-direction:column;gap:var(--space-2);width:100%}
.field__label{font:var(--type-eyebrow);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary);display:flex;gap:6px}
.field__required{color:var(--maroon-600)}
.field__help{font:var(--type-caption);color:var(--text-tertiary)}
.field__help--invalid{color:var(--danger-600)}
.control{width:100%;font:var(--type-body);color:var(--text-primary);background:var(--surface-card);border-style:solid;
  border-width:var(--rule-hairline);border-color:var(--border-default);border-radius:var(--radius-sm);padding:0 var(--space-4);
  height:var(--control-h);transition:var(--transition-control);outline:none}
.control:focus{border-color:var(--graphite-900);border-width:var(--rule-medium)}
.control.is-invalid{border-color:var(--danger-600);border-width:var(--rule-medium)}
textarea.control{height:auto;padding:var(--space-3) var(--space-4);line-height:var(--leading-body);resize:vertical}
select.control{appearance:none;padding-right:var(--space-10);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--graphite-900) 50%),linear-gradient(135deg,var(--graphite-900) 50%,transparent 50%);
  background-position:calc(100% - 24px) center,calc(100% - 18px) center;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.checkbox{display:flex;gap:var(--space-3);align-items:flex-start;cursor:pointer}
.checkbox input{position:absolute;opacity:0;width:22px;height:22px;margin:0;cursor:pointer}
.checkbox__box{position:relative;flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:var(--radius-sm);
  border:var(--rule-medium) solid var(--graphite-900);background:transparent;transition:var(--transition-control);display:grid;place-items:center}
.checkbox input:checked ~ .checkbox__box{background:var(--graphite-900)}
.checkbox__box svg{width:14px;height:14px;display:none}
.checkbox input:checked ~ .checkbox__box svg{display:block}
.checkbox__text{font:var(--type-body)}

/* ---------- Plain-text-style email links ---------- */
.email-link{color:inherit;text-decoration:none}
.email-link:hover{color:inherit;text-decoration:underline}

/* ---------- Icons ---------- */
.icon{display:inline-flex;flex:0 0 auto}
.icon svg{width:100%;height:100%}