/* MWD Design System - base and components.
   Requires MWD_Tokens.css first. Copy both into a project unchanged; put project layout
   in the project's own stylesheet, loaded after these two.

   Contents: base -> type -> label -> rule -> links -> buttons -> fields -> card ->
   status -> tag -> brand -> utilities -> motion */

/* ============================================================ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--surface-1);
  color:var(--text-2);
  font:400 var(--t-base)/var(--lead-body) var(--font-body);
  font-feature-settings:"cv05" 1,"cv08" 1,"ss03" 1;   /* Inter: open digits, clear l and I */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

/* One focus treatment for everything. Never remove it. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}
:focus:not(:focus-visible){outline:none}
::selection{background:rgba(255,138,43,.3);color:var(--text)}

.skip{
  position:absolute;left:var(--s-4);top:-100px;z-index:100;
  padding:var(--s-3) var(--s-5);background:var(--accent);color:var(--accent-ink);
  font-weight:600;border-radius:var(--r-sm);transition:top var(--dur-hover) var(--ease);
}
.skip:focus{top:var(--s-4)}

/* ============================================================ type
   Inter Tight carries every heading; Inter carries reading; JetBrains Mono carries
   labels, meta and numbers-as-data. Headings are never orange. */
h1,h2,h3,h4,.display{
  font-family:var(--font-display);font-weight:600;color:var(--text);
  letter-spacing:var(--track-heading);line-height:var(--lead-tight);text-wrap:balance;
}
.display{font-size:var(--t-4xl);font-weight:700;letter-spacing:var(--track-display);line-height:var(--lead-display)}
h1,.h1{font-size:var(--t-3xl);font-weight:700;letter-spacing:var(--track-display)}
h2,.h2{font-size:var(--t-2xl);letter-spacing:-.028em}
h3,.h3{font-size:var(--t-lg);line-height:var(--lead-snug)}
h4,.h4{font-size:var(--t-md);line-height:var(--lead-snug);letter-spacing:-.01em}

.lede{font-size:var(--t-md);line-height:1.5;color:var(--muted);text-wrap:pretty}
.muted{color:var(--muted)}
.small{font-size:var(--t-sm)}
.meta{font:500 var(--t-xs)/1.5 var(--font-mono);letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--font-mono)}
.accent{color:var(--accent)}

.prose p{margin-bottom:var(--s-5);text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.2em}
.prose a:hover{color:var(--accent)}

/* ============================================================ label
   The mono uppercase section label with a hairline running to the edge: COLORS ------ */
.eyebrow{
  display:flex;align-items:center;gap:var(--s-4);
  font:500 var(--t-xs)/1 var(--font-mono);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--text);
  margin-bottom:var(--s-6);
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--surface-4)}
.eyebrow--bare::after,.eyebrow--center::after{display:none}
.eyebrow--center{justify-content:center}
.eyebrow--accent{color:var(--accent)}

/* ============================================================ rule
   The orange line under a display headline. One per screen. */
.rule{display:block;width:100%;height:var(--rule-accent);background:var(--accent);border:0;margin:var(--s-8) 0}
.rule--short{width:72px}
.hairline{border:0;height:1px;background:var(--surface-4);margin:var(--s-12) 0}

/* ============================================================ links */
.link{
  display:inline-flex;align-items:center;gap:var(--s-2);
  color:var(--text);font-weight:500;
  padding-bottom:4px;border-bottom:2px solid var(--text);
  transition:color var(--dur-hover) var(--ease),border-color var(--dur-hover) var(--ease);
}
.link:hover{color:var(--accent);border-color:var(--accent)}
.link--quiet{border-bottom-color:var(--surface-5)}

.arw{display:inline-block;transition:transform var(--dur-hover) var(--ease-out)}
a:hover>.arw,button:hover>.arw{transform:translateX(3px)}

/* ============================================================ buttons
   Primary: orange fill, dark ink. Ghost: transparent with a light 1px border.
   Both square-cornered (3px). Neither has a shadow. */
.btn{
  --btn-bg:transparent;--btn-ink:var(--text);--btn-line:var(--surface-5);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);
  min-height:48px;padding:12px 26px;
  background:var(--btn-bg);color:var(--btn-ink);
  border:1px solid var(--btn-line);border-radius:var(--r-sm);
  font:500 var(--t-base)/1 var(--font-body);letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur-hover) var(--ease),border-color var(--dur-hover) var(--ease),
             color var(--dur-hover) var(--ease),transform var(--dur-press) var(--ease-out);
}
.btn:hover{--btn-bg:var(--surface-3);--btn-line:var(--muted)}
.btn:active{transform:scale(.985)}
.btn--primary{--btn-bg:var(--accent);--btn-ink:var(--accent-ink);--btn-line:var(--accent);font-weight:600}
.btn--primary:hover{--btn-bg:var(--accent-hi);--btn-line:var(--accent-hi)}
.btn--primary:active{--btn-bg:var(--accent-lo);--btn-line:var(--accent-lo)}
.btn--ghost{--btn-line:var(--text)}
.btn--ghost:hover{--btn-bg:rgba(244,242,237,.06);--btn-line:var(--text)}
.btn--lg{min-height:60px;padding:16px 36px;font-size:var(--t-md)}
.btn--sm{min-height:38px;padding:8px 16px;font-size:var(--t-sm)}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6)}

/* ============================================================ fields */
.field{display:flex;flex-direction:column;gap:var(--s-2)}
.field label,.field .field__label{
  font:500 var(--t-xs)/1 var(--font-mono);letter-spacing:var(--track-meta);
  text-transform:uppercase;color:var(--text);
}
.field .req{color:var(--accent);margin-left:2px}
.field .hint{font-size:var(--t-sm);color:var(--muted);line-height:1.5}
.input,.field input,.field select,.field textarea{
  width:100%;min-height:50px;padding:12px 18px;
  background:var(--surface-1);color:var(--text);
  border:1px solid var(--surface-5);border-radius:var(--r-sm);
  transition:border-color var(--dur-hover) var(--ease),box-shadow var(--dur-hover) var(--ease);
}
.field textarea{min-height:150px;resize:vertical;line-height:var(--lead-body)}
.input::placeholder,.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.input:hover,.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);
}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238B96A7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;
}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{border-color:var(--danger)}
.field .err{font-size:var(--t-sm);color:var(--danger);min-height:1em}

/* ============================================================ card
   Surface-2 panel, 1px border, 6px corner. The --accent variant adds the 2px orange
   top edge: use it for the card that leads a group, not for every card. */
.card{
  position:relative;display:flex;flex-direction:column;
  padding:var(--s-8) var(--s-6) var(--s-6);
  background:var(--surface-2);border:1px solid var(--surface-4);border-radius:var(--r);
  transition:border-color var(--dur-hover) var(--ease),background-color var(--dur-hover) var(--ease);
}
.card--accent{border-top:var(--bw-accent) solid var(--accent)}
a.card:hover,.card--hover:hover{border-color:var(--surface-5);background:#191B21}
a.card--accent:hover,.card--accent.card--hover:hover{border-top-color:var(--accent)}
.card__label{
  font:500 var(--t-xs)/1 var(--font-mono);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-4);
}
.card__title{font:600 var(--t-xl)/1.1 var(--font-display);letter-spacing:var(--track-heading);color:var(--text);margin-bottom:var(--s-3)}
.card__body{color:var(--muted);line-height:1.65}
.card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  margin-top:auto;padding-top:var(--s-5);border-top:1px solid var(--surface-4);
  color:var(--text);font-weight:500;
}
/* The foot pins to the bottom so a row of cards lines up; the gap above it comes from its neighbour. */
.card>:has(+ .card__foot){margin-bottom:var(--s-6)}
.card__list{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-5)}
.card__list li{position:relative;padding-left:var(--s-5);font-size:var(--t-sm);color:var(--text-2);line-height:1.55}
.card__list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--accent)}
.card__body a,.card__list a{color:var(--text);border-bottom:1px solid var(--accent)}
.card__body a:hover,.card__list a:hover{color:var(--accent)}

/* ============================================================ status pill */
.status{
  display:inline-flex;align-items:center;gap:var(--s-3);
  padding:9px 18px 9px 14px;background:var(--surface-3);border-radius:var(--r-pill);
  font:500 var(--t-sm)/1 var(--font-mono);letter-spacing:.06em;color:var(--text);
}
.status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);flex-shrink:0}
.status--ok::before{background:var(--ok)}
.status--quiet::before{background:var(--muted)}

/* ============================================================ tag */
.tag{
  display:inline-block;padding:5px 10px;
  background:var(--surface-3);border:1px solid var(--surface-4);border-radius:var(--r-sm);
  font:500 var(--t-2xs)/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.tags{display:flex;flex-wrap:wrap;gap:var(--s-2)}

/* ============================================================ brand lockup
   The mark (orange square, orange M) and the spaced wordmark beside it. */
.brand{display:inline-flex;align-items:center;gap:var(--s-4);flex-shrink:0;color:var(--text)}
.brand__mark{width:36px;height:36px;flex-shrink:0}
.brand__name{display:flex;flex-direction:column;gap:6px;line-height:1}
.brand__name b{font:500 15px/1 var(--font-display);letter-spacing:var(--track-brand);margin-right:calc(var(--track-brand) * -1)}
.brand__name span{font:500 8.5px/1 var(--font-mono);letter-spacing:.34em;color:var(--muted)}

/* ============================================================ utilities */
.wrap{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:var(--content-narrow);margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================ motion
   .reveal-armed is added to <html> by script, so with JS off nothing is ever hidden. */
.reveal-armed .reveal{opacity:0;transform:translate3d(0,14px,0)}
.reveal-armed .reveal[data-in="true"]{opacity:1;transform:none;transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal-armed .reveal{opacity:1!important;transform:none!important}
}