/* ============================================================
   Studio Ardium — COMPONENT LIBRARY
   Complete, ready-to-drop elements built entirely on var(--ard-*).
   These are the canonical building blocks: prefer an .ard-* class
   here over re-writing inline styles. See design-system.html for a
   live gallery and DESIGN-SYSTEM.md for usage rules.
   Requires: tokens.css loaded first.
   ============================================================ */

/* ---- LAYOUT ------------------------------------------------- */
.ard-section{max-width:var(--ard-maxw);margin:0 auto;padding:var(--ard-section-y) var(--ard-gutter-lg);position:relative}
.ard-section--narrow{max-width:760px}
.ard-rule{max-width:var(--ard-maxw);margin:0 auto;height:1px;background:var(--ard-line)}
.ard-grid{display:grid;gap:var(--ard-8)}
.ard-grid-2{grid-template-columns:1fr 1fr}
.ard-grid-3{grid-template-columns:repeat(3,1fr)}

/* ---- TYPE --------------------------------------------------- */
/* The .ser span turns one word into the italic serif accent.     */
.ard-display,.ard-h1,.ard-h2,.ard-h3{font-family:var(--ard-font-display);font-weight:var(--ard-fw-bold);color:var(--ard-text)}
.ard-display .ser,.ard-h1 .ser,.ard-h2 .ser,.ard-h3 .ser{font-family:var(--ard-font-serif);font-style:italic;font-weight:400;color:var(--ard-cobalt);letter-spacing:0}

.ard-display{font-size:var(--ard-fs-hero);letter-spacing:var(--ard-track-tight);line-height:.9}
.ard-h1{font-size:var(--ard-fs-h1);letter-spacing:-.03em;line-height:.94}
.ard-h2{font-size:var(--ard-fs-h2);letter-spacing:-.03em;line-height:.96}
.ard-h3{font-size:var(--ard-fs-h3);font-weight:var(--ard-fw-semi);letter-spacing:-.015em;line-height:1.06}

.ard-lead{font-family:var(--ard-font-display);font-size:var(--ard-fs-lead);line-height:1.5;color:var(--ard-text);max-width:600px;text-wrap:pretty}
.ard-body{font-family:var(--ard-font-display);font-size:var(--ard-fs-body);line-height:1.78;color:var(--ard-text-soft);max-width:540px;text-wrap:pretty}
.ard-body + .ard-body{margin-top:var(--ard-4)}

/* Mono eyebrow / label. Wrap a number span for the ( 0X — LABEL ) pattern. */
.ard-eyebrow{font-family:var(--ard-font-mono);font-size:var(--ard-fs-label);letter-spacing:var(--ard-track-wide);text-transform:uppercase;color:var(--ard-cobalt);display:inline-flex;gap:var(--ard-3);align-items:center}
.ard-eyebrow .dim{color:var(--ard-meta)}
.ard-meta{font-family:var(--ard-font-mono);font-size:var(--ard-fs-label);letter-spacing:var(--ard-track-label);text-transform:uppercase;color:var(--ard-meta)}

/* ---- BUTTONS ------------------------------------------------ */
/* Base: solid ink pill-less block. Modifiers swap the palette.    */
.ard-btn{display:inline-flex;align-items:center;gap:var(--ard-3);border:none;cursor:pointer;
  font-family:var(--ard-font-mono);font-size:12px;letter-spacing:var(--ard-track-label);text-transform:uppercase;
  background:var(--ard-ink);color:#fff;padding:18px 34px;border-radius:var(--ard-radius);
  transition:background-color var(--ard-dur) var(--ard-ease),transform var(--ard-dur) var(--ard-ease)}
.ard-btn:hover{background:var(--ard-cobalt)}
.ard-btn:hover .ard-arrow{transform:translateX(5px)}
.ard-btn--cobalt{background:var(--ard-cobalt)}
.ard-btn--cobalt:hover{background:var(--ard-ink)}
.ard-btn--ghost{background:transparent;color:var(--ard-ink);box-shadow:inset 0 0 0 1px var(--ard-ink)}
.ard-btn--ghost:hover{background:var(--ard-ink);color:#fff}

/* ---- LINKS -------------------------------------------------- */
/* Sweep-underline text link (pairs with .ard-line in styles.css). */
.ard-textlink{position:relative;width:fit-content;color:inherit}
.ard-textlink::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--ard-dur) var(--ard-ease)}
.ard-textlink:hover::after{transform:scaleX(1);transform-origin:left}
/* Mono pill link with persistent underline (used in case studies). */
.ard-link{font-family:var(--ard-font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:5px}

/* ---- TAG / CHIP --------------------------------------------- */
.ard-tag{display:inline-flex;align-items:center;font-family:var(--ard-font-mono);font-size:11px;letter-spacing:.05em;
  padding:7px 14px;border:1px solid var(--ard-line);color:var(--ard-text-mute);border-radius:var(--ard-radius);
  transition:background-color .35s,color .35s,border-color .35s,transform .35s var(--ard-ease)}
.ard-tag:hover{background:var(--ard-ink);color:#fff;border-color:var(--ard-ink);transform:translateY(-2px)}

/* ---- CARD --------------------------------------------------- */
.ard-card{background:var(--ard-paper);border:1px solid var(--ard-line);padding:var(--ard-5);position:relative;
  border-radius:var(--ard-radius);transition:transform .5s var(--ard-ease)}
.ard-card:hover{transform:translateY(-4px)}
.ard-card .ard-bar{height:2px;width:32px;background:var(--ard-cobalt);transition:width .5s var(--ard-ease)}
.ard-card:hover .ard-bar{width:100%}
.ard-card h4{font-family:var(--ard-font-display);font-weight:var(--ard-fw-semi);font-size:18px;letter-spacing:-.01em;margin:var(--ard-4) 0 var(--ard-2)}
.ard-card p{font-size:var(--ard-fs-small);line-height:1.65;color:var(--ard-text-mute)}

/* ---- METRIC ------------------------------------------------- */
.ard-metric .big{font-family:var(--ard-font-display);font-weight:var(--ard-fw-bold);font-size:clamp(48px,6vw,84px);letter-spacing:-.04em;line-height:1;color:var(--ard-cobalt)}
.ard-metric .cap{font-family:var(--ard-font-mono);font-size:var(--ard-fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ard-text-mute);margin-top:var(--ard-3);line-height:1.5}

/* ---- MEDIA -------------------------------------------------- */
/* Signature treatment: grayscale, hover-zoom, mono corner tag.    */
.ard-media{position:relative;overflow:hidden;background:linear-gradient(150deg,#dcdcdc,#8f8f8f 55%,#1c1c1c);border-radius:var(--ard-radius)}
.ard-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);display:block;transition:transform 1s var(--ard-ease)}
.ard-media:hover img{transform:scale(1.06)}
.ard-media .ard-media-tag{position:absolute;left:14px;top:12px;font-family:var(--ard-font-mono);font-size:var(--ard-fs-meta);letter-spacing:.06em;color:#fff;mix-blend-mode:difference;z-index:2}

/* ---- SURFACE MODIFIER --------------------------------------- */
/* Drop on any section to invert to the dark spread palette.       */
.ard-dark-surface{background:var(--ard-dark);color:var(--ard-dark-text)}
.ard-dark-surface .ard-body{color:var(--ard-dark-mute)}
.ard-dark-surface .ard-meta{color:var(--ard-dark-meta)}
.ard-dark-surface .ard-rule{background:var(--ard-dark-line)}

/* ---- RESPONSIVE -------------------------------------------- */
@media (max-width:768px){
  .ard-section{padding:52px var(--ard-gutter-mobile)}
  .ard-grid-2,.ard-grid-3{grid-template-columns:1fr;gap:var(--ard-5)}
}