/* ==========================================================================
   aw.css — AI Workshop design system (ai.blocksize.hr)
   Tokens, base, layout, typography, buttons, chips, cards, stats, forms,
   lists, marquee, nav, footer, blog cards, article chrome, TOC, accordion.
   Every value is taken from the Claude Design sources (_design/*.src.html).
   Catalogue with markup snippets: _design/COMPONENTS.md
   Owned by the foundation (chrome) agent. Page CSS lives in aw-<page>.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  --paper:#F7F5F0; --paper-2:#ECE9E1; --line:#E4E1DA; --stone:#C9C5BB;
  --ink:#12141A; --ink-2:#2A2E38; --ink-body:#23262E; --muted:#5B5F6B;
  /* --faint is the design's #8A8E98, darkened to clear WCAG AA (SPEC 1.6) for the
     small labels that use it (dates, read-times, kickers, breadcrumbs, placeholders):
     #8A8E98 was 3.01:1 on --paper / 3.28:1 on white. See _design/DECISIONS.md. */
  --faint:#6B6F7A;
  --faint-deco:#8A8E98;        /* original design tint — hairlines/icons only, never text */
  --night:#0E1015; --night-card:rgba(22,25,33,.88); --on-night:#F4F2EC; --on-night-muted:#A3A7B3;
  --amber:#D97706; --amber-hi:#F5A524; --amber-ink:#B45309; --amber-deep:#92400E; --amber-tint:#FBEEDD;
  --green:#34D399; --blue:#93C5FD; --white:#fff;
  --f-display:'Sora',system-ui,sans-serif; --f-body:'Manrope',system-ui,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --container:1200px; --gutter:clamp(20px,4vw,40px); --section-y:clamp(72px,9vw,128px);
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:22px; --r-2xl:28px; --r-pill:999px;
  --shadow-hover:0 24px 48px rgba(18,20,26,.08); --shadow-dark:0 40px 100px rgba(0,0,0,.55);
  --ease:cubic-bezier(.2,.7,.2,1);
  --nav-h:65px;

  /* Contextual colours: light by default, flipped inside dark surfaces */
  --fg:var(--ink); --fg-muted:var(--muted); --accent-text:var(--amber-ink); --accent-dot:var(--amber);
  --hairline:var(--line); --focus:var(--amber-ink);
  color-scheme:light;
}

/* Dark surfaces */
.aw-dark,.aw-band,.aw-card--dark,.aw-footer,.aw-featured,.aw-cta-card,.aw-toc-cta,.aw-glass{
  --fg:var(--on-night); --fg-muted:var(--on-night-muted); --accent-text:var(--amber-hi); --accent-dot:var(--amber-hi);
  --hairline:rgba(255,255,255,.12); --focus:var(--amber-hi);
  color:var(--fg);
}
/* Light surfaces (also when nested inside a dark band) */
.aw-light,.aw-panel,.aw-card:not(.aw-card--dark),.aw-box,.aw-stat{
  --fg:var(--ink); --fg-muted:var(--muted); --accent-text:var(--amber-ink); --accent-dot:var(--amber);
  --hairline:var(--line); --focus:var(--amber-ink);
  color:var(--fg);
}

/* Keyframes, exactly as the design */
@keyframes awFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes awMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes awBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes awPulse{0%{box-shadow:0 0 0 0 rgba(245,165,36,.6)}100%{box-shadow:0 0 0 10px rgba(245,165,36,0)}}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 23px)}
@media (prefers-reduced-motion:no-preference){html.aw-motion{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
[hidden]:not([hidden="until-found"]){display:none !important}
/* hidden="until-found" (accordion panels) keeps a box for find-in-page; collapse it fully */
[hidden="until-found"]{padding-top:0 !important;padding-bottom:0 !important;border-width:0 !important;margin-top:0 !important;margin-bottom:0 !important}
img,svg,video,canvas{max-width:100%}
img,video{height:auto}
h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
a{color:var(--amber-ink)}
a:hover{color:var(--amber-deep)}
:where(.aw-dark,.aw-band,.aw-card--dark,.aw-footer,.aw-cta-card) a:not([class]){color:var(--amber-hi)}
:where(.aw-dark,.aw-band,.aw-card--dark,.aw-footer,.aw-cta-card) a:not([class]):hover{color:var(--on-night)}
:where(.aw-light,.aw-panel,.aw-card:not(.aw-card--dark),.aw-box) a:not([class]){color:var(--amber-ink)}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit}
::placeholder{color:var(--faint);opacity:1}
::selection{background:rgba(217,119,6,.24);color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
main:focus,[tabindex="-1"]:focus{outline:none}

.aw-visually-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;border:0 !important}

/* Skip link */
.aw-skip{position:fixed;top:10px;left:10px;z-index:100;display:flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:var(--r-pill);background:var(--ink);color:var(--paper);font-weight:600;font-size:14.5px;text-decoration:none;transform:translateY(-160%);transition:transform .2s var(--ease)}
/* amber-ink, not amber-hi: the ring is painted on --paper (the pill itself is dark),
   where #F5A524 is only 1.87:1 but #B45309 is 4.61:1 (WCAG 1.4.11 / 2.4.11). */
.aw-skip:focus,.aw-skip:focus-visible{transform:none;color:var(--paper);outline:2px solid var(--amber-ink);outline-offset:2px}
.aw-skip:hover{color:var(--paper)}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.aw-container{width:100%;max-width:var(--container);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.aw-section{padding-top:var(--section-y)}
.aw-section--tight{padding-top:clamp(56px,7vw,96px)}
.aw-section--bottom{padding-bottom:var(--section-y)}
.aw-section--flush{padding-top:0}

/* Two-column split that stacks under ~2×min (design: auto-fit minmax(min(100%,400px),1fr)) */
.aw-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--split-min,400px)),1fr));gap:var(--split-gap,clamp(32px,5vw,72px));align-items:start}
.aw-split--center{align-items:center}
.aw-split--end{align-items:end}
/* Card grid (design: minmax(min(100%,260px),1fr), gap 16px) */
.aw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--grid-min,260px)),1fr));gap:var(--grid-gap,16px)}
.aw-grid--wide{--grid-min:280px}
/* Wrapping tile row (stats, formats, departments) */
.aw-tiles{display:flex;flex-wrap:wrap;gap:var(--tiles-gap,12px)}
.aw-tiles > *{flex:1 1 var(--tile-min,200px);min-width:0}
.aw-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.aw-center{text-align:center}
.aw-center .aw-actions{justify-content:center}
.aw-measure{max-width:var(--measure,720px)}

/* Section heads */
.aw-section-head{max-width:720px;margin-bottom:40px}
.aw-section-head--split{max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px;align-items:end}
.aw-section-head--split .aw-intro{max-width:520px}
.aw-section-head--row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.aw-section-head--row > :first-child{max-width:640px}

/* Dark band (hero, contact, CTA, newsletter). Decorations sit behind content
   thanks to isolation:isolate + z-index:-1 on the pseudo-elements. */
.aw-band{position:relative;overflow:hidden;isolation:isolate;background:var(--night);color:var(--on-night)}
.aw-band--grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:var(--grid-mask,radial-gradient(ellipse 75% 70% at 50% 30%,#000 20%,transparent 100%));
  mask-image:var(--grid-mask,radial-gradient(ellipse 75% 70% at 50% 30%,#000 20%,transparent 100%))}
.aw-band--grid-left{--grid-mask:radial-gradient(ellipse 70% 80% at 30% 40%,#000 10%,transparent 100%)}
[class*="aw-band--glow"]::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(217,119,6,var(--glow-a,.3)),rgba(217,119,6,0) 62%)}
/* homepage hero: top-right */
.aw-band--glow-tr::after{top:-25%;right:-10%;width:70vw;height:70vw;max-width:900px;max-height:900px;--glow-a:.32}
/* AI-T hero */
.aw-band--glow-tr2::after{top:-30%;right:-15%;width:70vw;height:70vw;max-width:900px;max-height:900px;--glow-a:.3}
/* newsletter: high top-right */
.aw-band--glow-tr3::after{top:-50%;right:-10%;width:60vw;height:60vw;max-width:800px;max-height:800px;--glow-a:.24}
/* contact: bottom-left */
.aw-band--glow-bl::after{bottom:-40%;left:-10%;width:60vw;height:60vw;max-width:760px;max-height:760px;--glow-a:.22}
/* AI-T 5 phases: bottom-left, softer */
.aw-band--glow-bl2::after{bottom:-30%;left:-10%;width:60vw;height:60vw;max-width:800px;max-height:800px;--glow-a:.18}
/* CTA band: centred ellipse */
.aw-band--glow-c::after{top:-40%;left:50%;transform:translateX(-50%);width:80vw;height:60vw;max-width:1000px;max-height:700px;border-radius:0;--glow-a:.26;
  background:radial-gradient(ellipse,rgba(217,119,6,var(--glow-a)),rgba(217,119,6,0) 62%)}
/* Stand-alone glow element for cards etc. (position with inline top/right or modifiers) */
.aw-glow{position:absolute;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(217,119,6,var(--glow-a,.3)),rgba(217,119,6,0) 62%)}
.aw-band__inner{position:relative}
.aw-band__rule{border-top:1px solid rgba(255,255,255,.08)}

/* --------------------------------------------------------------------------
   4. Typography helpers
   -------------------------------------------------------------------------- */
.aw-eyebrow{display:block;margin:0;font-family:var(--f-mono);font-size:12px;font-weight:500;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.aw-kicker{display:block;margin:0;font-family:var(--f-mono);font-size:11.5px;font-weight:400;line-height:1.35;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
:where(.aw-dark,.aw-band,.aw-card--dark,.aw-featured,.aw-cta-card) .aw-kicker{color:var(--on-night-muted)}
.aw-kicker--accent{color:var(--accent-text)}
.aw-mono{font-family:var(--f-mono)}

.aw-display{font-family:var(--f-display);font-weight:800;font-size:clamp(42px,5.6vw,76px);line-height:.98;letter-spacing:-.035em;margin:24px 0;text-wrap:balance;color:inherit}
.aw-display--md{font-size:clamp(40px,5.4vw,74px)}
.aw-display--article{font-size:clamp(32px,4.6vw,60px);line-height:1.02}
.aw-h2{font-family:var(--f-display);font-weight:700;font-size:clamp(32px,4vw,52px);line-height:1.02;letter-spacing:-.03em;margin:14px 0 16px;text-wrap:balance;color:inherit}
.aw-h2--md{font-size:clamp(30px,3.8vw,48px);line-height:1.04}
.aw-h2--xl{font-weight:800;font-size:clamp(34px,4.4vw,58px);line-height:1;letter-spacing:-.035em}
.aw-h2--cta{font-weight:800;font-size:clamp(34px,4.8vw,64px);line-height:1;letter-spacing:-.035em}
.aw-h2:last-child,.aw-display:last-child{margin-bottom:0}
.aw-title-sm{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,2.8vw,34px);line-height:1.15;letter-spacing:-.025em;margin:0;color:inherit}
.aw-h3{font-family:var(--f-display);font-weight:700;font-size:23px;line-height:1.15;letter-spacing:-.02em;margin:0;color:inherit}
.aw-h3--sm{font-size:20px}
.aw-h4{font-family:var(--f-display);font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.02em;margin:0;color:inherit}
.aw-accent,.aw-display em,.aw-h2 em{font-style:normal;color:var(--accent-text)}
/* Card/featured titles live in narrow columns (a 4-up grid is ~214px wide), where long
   DE compounds break mid-word at any viewport size. Limit 12/5/5 only ever splits very
   long words. Declared before the phone block so that one still wins below 480px. */
.aw-featured__title,.aw-post-card__title{-webkit-hyphens:auto;hyphens:auto;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5;hyphenate-limit-chars:12 5 5}

/* Phones: long HR/DE words in big headings hyphenate instead of breaking mid-word */
@media (max-width:480px){
  .aw-display,.aw-h2,.aw-article-title,.aw-featured__title,.aw-cta-card__title,.aw-title-sm{-webkit-hyphens:auto;hyphens:auto;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;hyphenate-limit-chars:10 4 4}
}
.aw-lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--fg-muted);margin:0 0 36px;max-width:560px;text-wrap:pretty}
.aw-intro{font-size:17px;line-height:1.6;color:var(--fg-muted);margin:0;text-wrap:pretty}
.aw-text{font-size:15.5px;line-height:1.6;color:var(--fg-muted);margin:0}
.aw-muted{color:var(--fg-muted)}
.aw-small{font-size:13px;line-height:1.5;color:var(--fg-muted)}
.aw-strong{color:var(--fg);font-weight:600}
.aw-link-arrow{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:700;color:var(--accent-text);text-decoration:none}
.aw-link-arrow:hover{color:var(--amber-deep)}
:where(.aw-dark,.aw-band,.aw-card--dark) .aw-link-arrow:hover{color:var(--on-night)}
.aw-note{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--fg-muted);margin:18px 0 0}
/* Hero direct-contact line under the primary CTA (home + AI Transformation) */
.aw-hero-direct{line-height:1.8}
.aw-hero-direct a{color:inherit;text-decoration:underline;text-decoration-color:var(--stone);text-underline-offset:3px;white-space:nowrap}
.aw-hero-direct a:hover{color:var(--accent-text);text-decoration-color:currentColor}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.aw-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;padding:16px 24px;border:1px solid transparent;border-radius:var(--r-pill);font-family:var(--f-body);font-size:16px;font-weight:700;line-height:1.3;text-align:center;text-decoration:none;cursor:pointer;background:transparent;color:inherit;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
.aw-btn:disabled,.aw-btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;transform:none}
/* Primary: amber pill, ink text */
.aw-btn--primary{background:var(--amber);color:var(--ink)}
.aw-btn--primary:hover{background:var(--amber-hi);color:var(--ink);transform:translateY(-1px)}
.aw-btn--primary:disabled:hover{background:var(--amber);transform:none}
/* Ghost on dark */
.aw-btn--ghost{padding:16px 22px;font-weight:600;border-color:rgba(255,255,255,.18);color:var(--on-night)}
.aw-btn--ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.05);color:var(--on-night)}
/* Ink pill (nav CTA, empty-state button) */
.aw-btn--ink{padding:12px 20px;font-size:14.5px;font-weight:600;background:var(--ink);color:var(--paper)}
.aw-btn--ink:hover{background:var(--ink-2);color:var(--paper)}
/* Outline ink ("Svi članci →") */
.aw-btn--outline{padding:12px 20px;font-size:14.5px;font-weight:600;border-color:var(--ink);color:var(--ink);white-space:nowrap}
.aw-btn--outline:hover{background:var(--ink);color:var(--paper)}
/* Light pill on dark ("Pročitajte članak →") */
.aw-btn--light{padding:12px 20px;font-size:14.5px;background:var(--on-night);color:var(--ink)}
.aw-btn--light:hover{background:var(--white);color:var(--ink)}
/* Quiet outline for small secondary actions (e.g. "Pošalji novi upit") */
.aw-btn--quiet{padding:10px 16px;font-size:14px;font-weight:600;border-color:var(--hairline);color:var(--fg)}
.aw-btn--quiet:hover{border-color:var(--fg);color:var(--fg)}
/* Sizes */
.aw-btn--sm{padding:10px 18px;font-size:14.5px}
.aw-btn--md{padding:14px 22px;font-size:15.5px}
.aw-btn--lg{padding:18px 28px;font-size:17px}
.aw-btn--block{display:flex;width:100%}
@media (max-width:480px){.aw-btn--lg{padding:16px 22px;font-size:16px}}

/* --------------------------------------------------------------------------
   6. Chips, pills, badges
   -------------------------------------------------------------------------- */
/* Category chip (amber tint) — used by blog cards */
.aw-chip{display:inline-block;padding:4px 10px;border-radius:var(--r-pill);font-family:var(--f-mono);font-size:11.5px;font-weight:400;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:var(--amber-tint);color:var(--amber-deep);border:0}
.aw-chip--solid{background:var(--amber);color:var(--ink);font-weight:500}
.aw-chip--ghost{background:transparent;border:1px solid rgba(255,255,255,.18);color:var(--on-night)}
.aw-chip--ink{background:var(--ink);color:var(--on-night)}
.aw-chip--sm{font-size:11px}
/* Mono pill (stat tags, table levels) — not uppercase */
.aw-pill{display:inline-block;padding:5px 10px;border-radius:var(--r-pill);font-family:var(--f-mono);font-size:12px;line-height:1.35;white-space:nowrap;background:var(--paper);border:1px solid var(--line);color:var(--muted)}
.aw-pill--tint{background:var(--amber-tint);border-color:transparent;color:var(--amber-deep)}
.aw-pill--amber{background:var(--amber);border-color:transparent;color:var(--ink);font-weight:500}
.aw-pill--ink{background:var(--ink);border-color:transparent;color:var(--on-night)}
.aw-pill--xs{padding:3px 10px;font-size:11.5px}
/* Tag (AI-T "Zašto mi" trust badges) */
.aw-tag{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line);color:var(--ink);font-size:13.5px;font-weight:600;line-height:1.35}
.aw-tag::before{content:"◆";content:"◆" / "";color:var(--amber)}
.aw-tag--ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.aw-tag--ink::before{color:var(--amber-hi)}
.aw-tags{display:flex;flex-wrap:wrap;gap:8px}
/* Live badge with pulsing dot (hero) */
.aw-live{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:6px 12px 6px 8px;border-radius:var(--r-pill);border:1px solid rgba(245,165,36,.35);background:rgba(217,119,6,.12);font-family:var(--f-mono);font-size:12px;line-height:1.35;letter-spacing:.04em;color:var(--amber-hi)}
.aw-live__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--amber-hi);animation:awPulse 1.8s ease-out infinite}
/* Static badge variant (AI-T hero: "◆ AI Strategija & Transformacija") */
.aw-live--static{padding:6px 12px;letter-spacing:.06em;text-transform:uppercase}
.aw-live--static::before{content:"◆";content:"◆" / ""}
/* Status dot */
.aw-dot{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(52,211,153,.8)}
.aw-dot--amber{background:var(--amber-hi);box-shadow:none}
/* Anchor chips on dark ("U ovom vodiču") */
.aw-chip-link{display:inline-block;padding:7px 13px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.14);color:var(--on-night);font-size:13.5px;font-weight:600;line-height:1.35;text-decoration:none;transition:border-color .2s ease,color .2s ease}
.aw-chip-link:hover{border-color:var(--amber-hi);color:var(--amber-hi)}
/* Filter toggle chips (blog hub categories): use aria-pressed="true" or .is-active */
.aw-filter{display:inline-block;padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--white);color:var(--ink);font-family:var(--f-body);font-size:14px;font-weight:600;line-height:1.35;cursor:pointer;text-decoration:none;transition:background .2s ease,color .2s ease,border-color .2s ease}
.aw-filter:hover{border-color:var(--stone);color:var(--ink)}
.aw-filter[aria-pressed="true"],.aw-filter.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.aw-filters{display:flex;gap:6px;flex-wrap:wrap}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.aw-card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);padding:32px 28px}
.aw-card--dark{background:var(--ink);border-color:var(--ink);color:var(--on-night)}
.aw-card--stack{display:flex;flex-direction:column;gap:16px}
.aw-card--md{border-radius:var(--r-lg);padding:28px 26px}
.aw-card--sm{border-radius:18px;padding:26px 24px}
.aw-card--xs{border-radius:var(--r-md);padding:22px 20px}
/* The tint must fade in on its own too (design: .25s), not only when combined with
   --hover. Declared first so .aw-card--hover still wins on cards that carry both. */
.aw-card--tint-hover{transition:background .25s var(--ease)}
.aw-card--hover{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
@media (hover:hover){
  .aw-card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
  .aw-card--dark.aw-card--hover:hover{box-shadow:0 24px 48px rgba(18,20,26,.25)}
  .aw-card--tint-hover:hover{background:var(--amber-tint)}
}
.aw-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.aw-card__num{font-family:var(--f-mono);font-size:12px;line-height:1.35;letter-spacing:.08em;color:var(--accent-text)}
.aw-card__mark{flex:none;width:10px;height:10px;border-radius:3px;background:var(--accent-dot)}
.aw-card__title{font-family:var(--f-display);font-weight:700;font-size:23px;line-height:1.15;letter-spacing:-.02em;margin:0;color:inherit}
.aw-card__text{margin:0;font-size:15.5px;line-height:1.6;color:var(--fg-muted)}
/* Glass card on dark (demo window) */
.aw-glass{background:var(--night-card);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow-dark),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden}
/* White panel floating on a dark band (contact form) */
.aw-panel{background:var(--white);color:var(--ink);border-radius:24px;padding:clamp(24px,3vw,36px);box-shadow:0 40px 100px rgba(0,0,0,.45)}
/* Big white box (AI-T "Zašto AI Workshop") */
.aw-box{background:var(--white);border:1px solid var(--line);border-radius:var(--r-2xl);padding:clamp(28px,4vw,48px)}
/* Amber-tint callout */
.aw-callout{border-radius:18px;background:var(--amber-tint);color:var(--ink);padding:22px 26px;font-size:17px;line-height:1.65}
.aw-callout a{color:var(--amber-deep)}
/* Dashed empty state */
.aw-empty{text-align:center;padding:80px 20px;border:1px dashed var(--stone);border-radius:var(--r-xl)}
.aw-empty__title{font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:-.02em;margin:0 0 10px}
.aw-empty p{margin:0 0 20px;color:var(--muted)}
/* White figure card (charts, bar lists) */
.aw-figure{margin:0;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px 24px 20px}
.aw-figure__cap{font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink);margin-bottom:18px}
.aw-figure__note{font-family:var(--f-mono);font-weight:400;font-size:11.5px;color:var(--faint);letter-spacing:.04em}

/* Dark CTA card (article closing CTA; also usable anywhere) */
.aw-cta-card{position:relative;overflow:hidden;isolation:isolate;background:var(--night);color:var(--on-night);border-radius:24px;padding:clamp(28px,4vw,40px)}
.aw-cta-card::before{content:"";position:absolute;z-index:-1;top:-60%;right:-20%;width:70%;padding-top:70%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(217,119,6,.35),rgba(217,119,6,0) 62%)}
.aw-cta-card .aw-cta-card__title{font-family:var(--f-display);font-weight:800;font-size:clamp(24px,2.8vw,32px);line-height:1.1;letter-spacing:-.03em;margin:0 0 14px;color:var(--on-night);text-wrap:balance}
.aw-cta-card .aw-cta-card__text{margin:0 0 24px;font-size:16px;line-height:1.6;color:var(--on-night-muted);text-wrap:pretty}

/* --------------------------------------------------------------------------
   8. Stat tiles
   -------------------------------------------------------------------------- */
.aw-stats{display:flex;flex-wrap:wrap;gap:12px}
.aw-stat{flex:1 1 200px;min-width:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px}
.aw-stat__value{font-family:var(--f-display);font-weight:800;font-size:clamp(44px,4.6vw,64px);line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.aw-stat__label{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.aw-stat--sm{padding:30px 26px}
.aw-stat--sm .aw-stat__value{font-size:clamp(40px,4.2vw,58px)}
.aw-stat--sm .aw-stat__label{font-size:14.5px}

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
.aw-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.aw-field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13px;font-weight:600;line-height:1.35;color:var(--muted)}
.aw-field--full{grid-column:1 / -1}
.aw-input,.aw-select,.aw-textarea{width:100%;min-width:0;font-family:var(--f-body);font-size:15px;font-weight:400;line-height:1.4;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--paper);color:var(--ink);outline:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.aw-input:focus,.aw-select:focus,.aw-textarea:focus,
.aw-input:focus-visible,.aw-select:focus-visible,.aw-textarea:focus-visible{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.18);background:var(--white);outline:2px solid transparent}
.aw-input[aria-invalid="true"],.aw-select[aria-invalid="true"],.aw-textarea[aria-invalid="true"]{border-color:#C2410C}
.aw-textarea{resize:vertical;min-height:96px}
.aw-select{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;
  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.5l5 5 5-5' fill='none' stroke='%235B5F6B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
.aw-form__actions{grid-column:1 / -1;display:flex;flex-direction:column;gap:12px;margin-top:4px}
.aw-form__note{margin:0;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
/* Honeypot: keep out of sight and out of the accessibility tree (also add aria-hidden + tabindex=-1) */
.aw-hp{position:absolute !important;left:-10000px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important}
/* Pill-shaped inline form on dark (newsletter) */
.aw-inline-form{display:flex;gap:8px;flex-wrap:wrap;padding:8px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:border-color .2s ease,box-shadow .2s ease}
.aw-inline-form:focus-within{border-color:rgba(245,165,36,.6);box-shadow:0 0 0 3px rgba(217,119,6,.22)}
.aw-inline-form input{flex:1 1 220px;min-width:0;border:0;outline:none;background:transparent;padding:12px 18px;font-family:var(--f-body);font-size:15.5px;color:var(--on-night)}
.aw-inline-form input::placeholder{color:var(--on-night-muted)}
.aw-inline-form .aw-btn{padding:14px 22px;font-size:15px}
@media (max-width:480px){
  .aw-inline-form{border-radius:var(--r-xl)}
  .aw-inline-form .aw-btn{flex:1 1 100%}
}
/* Search pill (blog hub) */
.aw-search{display:flex;align-items:center;gap:10px;flex:1 1 260px;max-width:380px;padding:10px 14px 10px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--white);transition:border-color .2s ease,box-shadow .2s ease}
.aw-search:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.18)}
.aw-search__icon{font-family:var(--f-mono);font-size:13px;color:var(--faint)}
.aw-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-family:var(--f-body);font-size:15px;color:var(--ink);padding:0}
.aw-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.aw-search__clear{flex:none;width:24px;height:24px;border:0;border-radius:50%;background:var(--paper);color:var(--muted);font-size:13px;display:grid;place-items:center;cursor:pointer}
/* Status messages */
.aw-alert{display:flex;gap:14px;align-items:center;padding:18px 22px;border-radius:var(--r-lg);font-size:15px;line-height:1.5}
.aw-alert__icon{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700}
.aw-alert--ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3)}
.aw-alert--ok .aw-alert__icon{background:var(--green);color:var(--night)}
/* The error alert carries its own light surface, so it keeps readable text even when
   it sits inside a dark band (where --fg-muted would be #A3A7B3, ~2:1 on this rust). */
.aw-alert--error{background:#FDF0E8;border:1px solid #F3C9AE;color:#7C2D12;
  --fg:#7C2D12; --fg-muted:#93412A; --hairline:#F3C9AE; --accent-text:var(--amber-deep); --focus:var(--amber-deep)}
.aw-alert--error .aw-alert__icon{background:#C2410C;color:var(--white)}
.aw-alert--error a{color:#7C2D12;font-weight:700}
.aw-alert__title{font-weight:700;font-size:16px}
.aw-alert__sub{font-size:14px;color:var(--fg-muted)}

/* --------------------------------------------------------------------------
   10. Lists
   -------------------------------------------------------------------------- */
/* Square amber bullets (service cards) */
.aw-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.5;color:var(--fg)}
.aw-checks > li{display:flex;gap:12px;align-items:flex-start}
.aw-checks > li::before{content:"";flex:none;width:6px;height:6px;border-radius:2px;background:var(--accent-dot);margin-top:8px}
.aw-checks--divided{margin-top:6px;padding-top:18px;border-top:1px solid var(--hairline)}
/* Round ✓ ticks (contact reassurance) */
.aw-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;font-size:15px;line-height:1.5;color:var(--fg)}
.aw-ticks > li{display:flex;gap:12px;align-items:center}
.aw-ticks > li::before{content:"✓";content:"✓" / "";flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;line-height:1;background:var(--amber-tint);color:var(--amber-ink)}
:where(.aw-dark,.aw-band,.aw-card--dark) .aw-ticks > li::before{background:rgba(245,165,36,.15);color:var(--amber-hi)}
/* Numbered steps (article checklist) */
.aw-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:aw-step}
.aw-steps > li{counter-increment:aw-step;display:flex;gap:14px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:16.5px;line-height:1.6}
.aw-steps > li::before{content:counter(aw-step);flex:none;width:22px;height:22px;border-radius:50%;background:var(--amber);color:var(--ink);display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;line-height:1;margin-top:4px}

/* --------------------------------------------------------------------------
   11. Marquee (hero ticker)
   -------------------------------------------------------------------------- */
.aw-marquee{position:relative;overflow:hidden;padding:18px 0;border-top:1px solid rgba(255,255,255,.08);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.aw-marquee__track{display:flex;width:max-content;animation:awMarquee 36s linear infinite}
.aw-marquee:hover .aw-marquee__track,.aw-marquee:focus-within .aw-marquee__track{animation-play-state:paused}
/* padding:0 40px 0 0 — the UA's list padding-left:40px would otherwise double the
   loop seam to 80px and start the track 40px in. */
.aw-marquee__group{display:flex;align-items:center;gap:40px;padding:0 40px 0 0;margin:0;list-style:none;font-family:var(--f-mono);font-size:12px;line-height:1.35;letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-muted);white-space:nowrap}
.aw-marquee__group > *::before{content:"◆\00a0\00a0";content:"◆\00a0\00a0" / "";color:var(--amber-hi)}
.aw-nomotion .aw-marquee{-webkit-mask-image:none;mask-image:none}
.aw-nomotion .aw-marquee__track{animation:none;width:auto;justify-content:center}
.aw-nomotion .aw-marquee__group{flex-wrap:wrap;justify-content:center;row-gap:10px;padding:0 var(--gutter);white-space:normal}
.aw-nomotion .aw-marquee__group[aria-hidden="true"]{display:none}

/* --------------------------------------------------------------------------
   12. Header / nav
   -------------------------------------------------------------------------- */
.aw-nav{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.aw-nav__inner{position:relative;max-width:var(--container);margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.aw-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);border-radius:10px}
.aw-brand:hover{color:var(--ink)}
.aw-brand__name{font-family:var(--f-display);font-weight:700;font-size:17px;line-height:1.2;letter-spacing:-.02em;white-space:nowrap}
/* Brand mark: the [ai] bracket tile. Drawn as an inline SVG background so the
   documented empty <span class="aw-mark"> keeps working everywhere it is reused.
   Colours are baked in (a data URI cannot read custom properties): ink #0E1015
   tile, amber #D97706 brackets, paper #F4F2EC letters. display:block is load-
   bearing — a bare <span> is inline, and width/height would not apply to it
   outside a flex parent. */
.aw-mark{flex:none;display:block;width:30px;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Crect width=%2264%22 height=%2264%22 rx=%2214%22 fill=%22%230E1015%22/%3E%3Cpath d=%22M20.5 20 H15 V44 H20.5%22 stroke=%22%23D97706%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M43.5 20 H49 V44 H43.5%22 stroke=%22%23D97706%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Ccircle cx=%2229%22 cy=%2236.9%22 r=%225.1%22 stroke=%22%23F4F2EC%22 stroke-width=%222.9%22 fill=%22none%22/%3E%3Cpath d=%22M34.1 31.8 V42%22 stroke=%22%23F4F2EC%22 stroke-width=%222.9%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M40.1 31.8 V42%22 stroke=%22%23F4F2EC%22 stroke-width=%222.9%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2240.1%22 cy=%2226.6%22 r=%221.9%22 fill=%22%23F4F2EC%22/%3E%3C/svg%3E") center/contain no-repeat}
.aw-mark--sm{width:26px;height:26px}
/* On the night-coloured footer the ink tile would be invisible against an
   identical background, so the mark is knocked out there: brackets and letters
   only, no tile. Same geometry, same colours. */
.aw-footer .aw-mark{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cpath d=%22M20.5 20 H15 V44 H20.5%22 stroke=%22%23D97706%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M43.5 20 H49 V44 H43.5%22 stroke=%22%23D97706%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 fill=%22none%22/%3E%3Ccircle cx=%2229%22 cy=%2236.9%22 r=%225.1%22 stroke=%22%23F4F2EC%22 stroke-width=%222.9%22 fill=%22none%22/%3E%3Cpath d=%22M34.1 31.8 V42%22 stroke=%22%23F4F2EC%22 stroke-width=%222.9%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M40.1 31.8 V42%22 stroke=%22%23F4F2EC%22 stroke-width=%222.9%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2240.1%22 cy=%2226.6%22 r=%221.9%22 fill=%22%23F4F2EC%22/%3E%3C/svg%3E")}
.aw-nav__panel{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.aw-nav__links{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.aw-nav__link{padding:9px 14px;border-radius:var(--r-pill);font-size:14.5px;font-weight:600;line-height:1.35;color:var(--ink);text-decoration:none;transition:background .2s ease}
.aw-nav__link:hover{background:var(--paper-2);color:var(--ink)}
.aw-nav__link.is-active{background:var(--paper-2)}
.aw-lang{display:flex;align-items:center;gap:2px;margin:0 8px;padding:3px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white)}
.aw-lang__item{display:block;padding:4px 9px;border-radius:var(--r-pill);font-family:var(--f-mono);font-size:11px;line-height:1.35;color:var(--muted);text-decoration:none;transition:color .2s ease}
a.aw-lang__item:hover{color:var(--ink)}
.aw-lang__item[aria-current]{background:var(--ink);color:var(--paper);font-weight:500}
.aw-nav__cta{padding:10px 18px;border-radius:var(--r-pill);background:var(--ink);color:var(--paper);font-size:14.5px;font-weight:600;line-height:1.35;text-decoration:none;white-space:nowrap;transition:background .2s ease}
.aw-nav__cta:hover{background:var(--ink-2);color:var(--paper)}
/* min-height 44px: comfortable tap target. The toggle is mobile-only (display:none
   above 760px), so this never changes the desktop bar. */
.aw-nav__toggle{display:none;align-items:center;gap:10px;min-height:44px;padding:8px 14px 8px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white);color:var(--ink);font-size:14px;font-weight:600;line-height:1.35;cursor:pointer}
.aw-nav__toggle-icon{position:relative;width:16px;height:12px;flex:none}
.aw-nav__toggle-icon::before,.aw-nav__toggle-icon::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .25s var(--ease),top .25s var(--ease),box-shadow .2s ease}
.aw-nav__toggle-icon::before{top:0;box-shadow:0 5px 0 currentColor}
.aw-nav__toggle-icon::after{top:10px}
.aw-nav__toggle[aria-expanded="true"] .aw-nav__toggle-icon::before{top:5px;transform:rotate(45deg);box-shadow:none}
.aw-nav__toggle[aria-expanded="true"] .aw-nav__toggle-icon::after{top:5px;transform:rotate(-45deg)}

@media (max-width:760px){
  .aw-nav__panel{gap:8px}
  .aw-lang{margin:0}
  /* With JS: collapse into a dropdown panel under the bar */
  .aw-js .aw-nav__inner{flex-wrap:nowrap}
  .aw-js .aw-nav__toggle{display:inline-flex}
  .aw-js .aw-nav__panel{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:12px;
    padding:12px var(--gutter) 20px;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 24px 48px rgba(18,20,26,.1);
    max-height:calc(100vh - var(--nav-h));max-height:calc(100dvh - var(--nav-h));overflow-y:auto}
  .aw-js .aw-nav.is-open .aw-nav__panel{display:flex}
  .aw-motion .aw-nav.is-open .aw-nav__panel{animation:awFadeUp .3s var(--ease) both}
  .aw-js .aw-nav__links{flex-direction:column;align-items:stretch;gap:2px}
  .aw-js .aw-nav__link{padding:12px 14px;font-size:16px;border-radius:var(--r-sm)}
  .aw-js .aw-lang{align-self:flex-start}
  /* 44×44 tap targets in the dropdown panel; the desktop pill keeps its design size. */
  .aw-js .aw-lang__item{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:7px 12px;font-size:12px}
  .aw-js .aw-nav__cta{padding:14px 18px;font-size:15.5px;text-align:center}
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.aw-footer{background:var(--night);color:var(--on-night-muted);border-top:1px solid rgba(255,255,255,.08)}
.aw-footer__inner{max-width:var(--container);margin:0 auto;padding:40px var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.aw-footer__brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--on-night)}
.aw-footer__name{font-family:var(--f-display);font-weight:700;font-size:15px;line-height:1.2;letter-spacing:-.02em}
.aw-footer__copy{font-size:13.5px;line-height:1.4;color:var(--on-night-muted);margin-left:6px}
.aw-footer__links{display:flex;gap:4px 22px;flex-wrap:wrap;font-size:14px;line-height:1.4}
.aw-footer__links a{display:inline-block;padding:4px 0;color:var(--on-night-muted);text-decoration:none;transition:color .2s ease}
.aw-footer__links a:hover,.aw-footer__links a[aria-current]{color:var(--on-night)}
@media (max-width:560px){
  .aw-footer__copy{flex-basis:100%;margin-left:0}
}

/* --------------------------------------------------------------------------
   14. Blog cards (markup contract: SPEC §6, rendered by blog_card())
   -------------------------------------------------------------------------- */
.aw-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.aw-card-grid--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}  /* related posts */
.aw-post-card{container-type:inline-size;display:flex;flex-direction:column;gap:14px;min-width:0;min-height:250px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);padding:28px 26px;text-decoration:none;color:var(--ink);
  transition:transform .25s ease,box-shadow .25s ease}
.aw-post-card:hover{color:var(--ink)}
@media (hover:hover){.aw-post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}}
.aw-post-card:focus-visible{outline-offset:4px}
.aw-post-card__meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--f-mono);font-size:11.5px;line-height:1.35;letter-spacing:.06em}
.aw-post-card__meta .aw-chip{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Below ~252px of card content the chip and the date cannot share a row: HR loses
   "AI PREGL…", and EN/DE dates ("September 18, 2026") leave the chip ~77px. Stack them.
   Browsers without container queries keep the ellipsis, which is still readable. */
@container (max-width:251px){
  .aw-post-card__meta{flex-direction:column;align-items:flex-start;gap:8px}
}
.aw-post-card__date{color:var(--faint);white-space:nowrap}
.aw-post-card__title{font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.02em;margin:0;color:var(--ink);text-wrap:pretty}
.aw-post-card__excerpt{margin:0;font-size:15px;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.aw-post-card__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}
.aw-post-card__more{font-size:14.5px;font-weight:700;color:var(--amber-ink)}
.aw-post-card__rt{font-family:var(--f-mono);font-size:11.5px;color:var(--faint);white-space:nowrap}
.aw-post-card--compact{gap:12px;min-height:180px;padding:26px 24px}
.aw-post-card--compact .aw-post-card__title{font-size:18px;line-height:1.3}
.aw-post-card--lg .aw-post-card__title{font-size:20px}

/* Archive rows */
.aw-archive{border-top:1px solid var(--line)}
.aw-archive-row{display:grid;grid-template-columns:minmax(120px,160px) minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:16px 8px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:background .2s ease}
.aw-archive-row:hover{background:var(--white);color:var(--ink)}
.aw-archive-row__date{font-family:var(--f-mono);font-size:12.5px;color:var(--faint);white-space:nowrap}
.aw-archive-row__title{font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.01em;min-width:0}
.aw-archive-row__cat{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber-deep);white-space:nowrap}
@media (max-width:600px){
  .aw-archive-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"date cat" "title title";gap:6px 12px;padding:14px 4px}
  .aw-archive-row__date{grid-area:date}
  .aw-archive-row__cat{grid-area:cat}
  .aw-archive-row__title{grid-area:title}
}

/* Featured (hub, newest post) */
.aw-featured{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(24px,4vw,56px);align-items:end;
  background:var(--night);color:var(--on-night);border-radius:var(--r-2xl);padding:clamp(28px,4vw,48px);text-decoration:none;margin-bottom:16px;transition:transform .25s ease}
.aw-featured::before{content:"";position:absolute;z-index:-1;top:-40%;right:-10%;width:60vw;height:60vw;max-width:700px;max-height:700px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(217,119,6,.3),rgba(217,119,6,0) 62%)}
.aw-featured:hover{color:var(--on-night)}
@media (hover:hover){.aw-featured:hover{transform:translateY(-3px)}}
/* Negative offset: this is a dark card on light paper, so a ring drawn outside it
   would sit on --paper, where --amber-hi is 1.87:1. Inside its own surface it is 9.3:1. */
.aw-featured:focus-visible{outline-offset:-4px}
.aw-featured__body,.aw-featured__side{min-width:0}
.aw-featured__chips{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-family:var(--f-mono);font-size:11.5px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase}
.aw-featured__chips .aw-chip{padding:5px 10px;letter-spacing:.08em}
.aw-featured__meta{color:var(--on-night-muted)}
.aw-featured__title{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,3.6vw,48px);line-height:1.04;letter-spacing:-.03em;margin:22px 0 0;color:var(--on-night);text-wrap:balance}
.aw-featured__excerpt{margin:0 0 22px;font-size:16.5px;line-height:1.6;color:var(--on-night-muted);text-wrap:pretty}
.aw-featured__btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--r-pill);background:var(--on-night);color:var(--ink);font-size:14.5px;font-weight:700;line-height:1.3;transition:background .2s ease}
.aw-featured:hover .aw-featured__btn{background:var(--white)}

/* --------------------------------------------------------------------------
   15. Article chrome (article-start.php / article-end.php)
   -------------------------------------------------------------------------- */
/* Reading progress: <div class="aw-progress"><div class="aw-progress__bar" data-progress="#main"></div></div> */
.aw-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:transparent}
.aw-progress__bar{height:100%;width:0;background:var(--amber);transition:width .1s linear}

.aw-article-head{max-width:var(--container);margin:0 auto;padding:clamp(40px,6vw,80px) var(--gutter) clamp(28px,4vw,48px);border-bottom:1px solid var(--line)}
.aw-article-head__inner{max-width:900px}
.aw-crumbs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0;padding:0;list-style:none;font-family:var(--f-mono);font-size:12px;line-height:1.35;letter-spacing:.06em;color:var(--faint)}
.aw-crumbs a{color:var(--muted);text-decoration:none}
.aw-crumbs a:hover{color:var(--ink)}
.aw-crumbs .aw-chip{font-size:11px}
.aw-article-title{font-family:var(--f-display);font-weight:800;font-size:clamp(32px,4.6vw,60px);line-height:1.02;letter-spacing:-.035em;margin:22px 0 24px;color:var(--ink);text-wrap:balance}
.aw-byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.aw-avatar{flex:none;width:44px;height:44px;border-radius:50%;background:var(--amber);color:var(--ink);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:15px;line-height:1;letter-spacing:-.01em}
.aw-avatar--lg{width:64px;height:64px;font-size:21px}
.aw-byline__who{font-size:14.5px;line-height:1.4}
.aw-byline__name{font-weight:700;color:var(--ink)}
.aw-byline__role{color:var(--muted)}
.aw-byline__sep{width:1px;height:28px;background:var(--line);margin:0 6px}
.aw-byline__meta{font-family:var(--f-mono);font-size:12.5px;line-height:1.4;color:var(--muted);letter-spacing:.02em}
@media (max-width:560px){
  .aw-byline__sep{display:none}
  .aw-byline__meta{flex-basis:100%}
}

/* Two-column layout: TOC aside + article (stacks below 1000px) */
.aw-article-layout{max-width:var(--container);margin:0 auto;padding:clamp(28px,4vw,56px) var(--gutter) 0;display:flex;flex-direction:column;gap:24px}
.aw-article-layout > article,.aw-article-layout > .aw-prose{flex:1 1 560px;min-width:0;max-width:760px;width:100%}
.aw-toc{min-width:0}
.aw-toc__details{margin:0}
.aw-toc__label{display:block;font-family:var(--f-mono);font-size:11.5px;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 14px;list-style:none}
.aw-toc__label::-webkit-details-marker{display:none}
.aw-toc__label::marker{content:""}
.aw-toc__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-left:1px solid var(--line)}
.aw-toc__link{display:block;padding:8px 0 8px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;font-weight:500;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .2s ease,border-color .2s ease}
.aw-toc__link:hover{color:var(--ink)}
.aw-toc__link.is-active{color:var(--ink);font-weight:700;border-left-color:var(--amber)}
.aw-toc-cta{display:block;margin-top:24px;padding:16px 18px;border-radius:var(--r-md);background:var(--ink);color:var(--on-night);text-decoration:none;font-size:14px;line-height:1.5;transition:background .2s ease}
.aw-toc-cta:hover{background:var(--ink-2);color:var(--on-night)}
/* Dark card on light paper — keep the amber-hi ring on its own surface (see .aw-featured). */
.aw-toc-cta:focus-visible{outline-offset:-3px}
.aw-toc-cta strong{display:block;font-family:var(--f-display);font-size:15px;font-weight:700;line-height:1.3;margin-bottom:4px}
.aw-toc-cta span{color:var(--on-night-muted)}
@media (min-width:1000px){
  .aw-article-layout{flex-direction:row;align-items:flex-start;gap:clamp(32px,5vw,72px)}
  .aw-toc{flex:0 1 250px;min-width:220px;position:sticky;top:calc(var(--nav-h) + 23px);align-self:flex-start;max-height:calc(100vh - var(--nav-h) - 46px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:4px}
  .aw-toc__label{pointer-events:none;cursor:default}
}
@media (max-width:999.98px){
  .aw-toc-cta{display:none}
  .aw-toc__details{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md)}
  .aw-toc__label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:14px 18px;color:var(--muted);cursor:pointer;border-radius:var(--r-md)}
  .aw-toc__label::after{content:"+";font-family:var(--f-body);font-size:18px;line-height:1;letter-spacing:0;color:var(--muted);transition:transform .25s ease}
  .aw-toc__details[open] > .aw-toc__label::after{transform:rotate(45deg)}
  .aw-toc__nav{padding:0 18px 14px}
}

/* Author bio row at the end of the article */
/* End-of-post "next step" services CTA (includes/article-end.php) — light card, so it
   does not stack a second dark card under a post's own .cta-section */
.aw-post-next{margin:48px 0 0;padding:clamp(24px,4vw,36px);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--r-lg,18px);background:#fff}
.aw-post-next .aw-post-next__title{margin:10px 0 10px;font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.6vw,28px);line-height:1.2;letter-spacing:-.02em;color:var(--ink);scroll-margin-top:96px}
.aw-post-next .aw-post-next__text{margin:0 0 22px;font-size:16px;line-height:1.6;color:var(--muted)}
.aw-post-next .aw-actions{margin:0}
.aw-post-next .aw-btn--outline{white-space:normal}
@media print{.aw-post-next{display:none}}
.aw-author.aw-author{display:flex;gap:18px;align-items:center;margin:40px 0 0;padding-top:32px;border-top:1px solid var(--line)}
.aw-author .aw-author__name{font-family:var(--f-display);font-weight:700;font-size:17px;line-height:1.35;color:var(--ink);margin:0}
.aw-author .aw-author__bio{margin:2px 0 4px;font-size:15px;line-height:1.5;color:var(--muted)}
.aw-author .aw-author__link{font-size:15px;font-weight:700;text-decoration:none;color:var(--amber-ink)}
.aw-author .aw-author__link:hover{color:var(--amber-deep)}
@media (max-width:480px){.aw-author.aw-author{align-items:flex-start}}

/* Related articles section */
.aw-related{max-width:var(--container);margin:0 auto;padding:clamp(56px,7vw,96px) var(--gutter) clamp(72px,9vw,128px)}
.aw-related__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:24px}

/* Horizontal scroll wrapper for tables (added by aw.js [data-table-wrap]) */
.aw-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 28px;border:1px solid var(--line);border-radius:18px;background:var(--white)}
.aw-table-wrap:focus-visible{outline-offset:2px}
.aw-table{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.aw-table thead tr{background:var(--ink);color:var(--on-night);text-align:left}
.aw-table th{padding:14px 18px;font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-align:left}
.aw-table td{padding:14px 18px;color:var(--muted);vertical-align:top}
.aw-table tbody tr{border-top:1px solid var(--line)}
.aw-table td:first-child{font-weight:700;color:var(--ink)}
.aw-table tr.is-highlight{background:var(--amber-tint)}

/* --------------------------------------------------------------------------
   16. Accordion ([data-accordion], see aw.js)
   -------------------------------------------------------------------------- */
.aw-acc{display:flex;flex-direction:column;gap:10px}
.aw-acc__item{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .2s ease}
.aw-acc__item:hover{border-color:var(--stone)}
.aw-acc__heading{margin:0;font:inherit}
.aw-acc__btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;border:0;background:transparent;cursor:pointer;padding:20px 22px;font-family:var(--f-display);font-weight:700;font-size:17.5px;line-height:1.3;letter-spacing:-.015em;color:var(--ink);border-radius:18px}
.aw-acc__btn:focus-visible{outline-offset:-3px}
.aw-acc__icon{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-body);font-size:18px;font-weight:400;line-height:1;background:var(--paper);color:var(--muted);transition:transform .3s ease,background .2s ease,color .2s ease}
.aw-acc__btn[aria-expanded="true"] .aw-acc__icon{transform:rotate(45deg);background:var(--amber);color:var(--ink)}
.aw-acc__panel{padding:0 22px 22px;font-size:15.5px;line-height:1.65;color:var(--muted)}
.aw-acc__panel > :first-child{margin-top:0}
.aw-acc__panel > :last-child{margin-bottom:0}
.aw-motion .aw-acc__item.is-open .aw-acc__panel{animation:awFadeUp .35s ease both}

/* --------------------------------------------------------------------------
   17. Motion: reveal-on-scroll, reduced motion, print
   -------------------------------------------------------------------------- */
/* Content is only hidden when motion is allowed (html.aw-motion, set in head.php).
   aw.js mirrors the design's setupReveal():
     in view at load  → .aw-in--now : awFadeUp .8s, staggered min(i,6)*90ms (--aw-delay)
     below the fold   → .aw-in      : .75s opacity/transform transition when 10% visible
     finished         → .aw-done    : all reveal styles removed (own hover transitions work again) */
.aw-motion [data-reveal]:not(.aw-done){opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.aw-motion [data-reveal].aw-in:not(.aw-done){opacity:1;transform:none}
.aw-motion [data-reveal].aw-in--now:not(.aw-done){animation:awFadeUp .8s var(--ease) var(--aw-delay,0ms) both}

.aw-nomotion *,.aw-nomotion *::before,.aw-nomotion *::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
  .aw-marquee{-webkit-mask-image:none;mask-image:none}
  .aw-marquee__track{animation:none !important;width:auto;justify-content:center}
  .aw-marquee__group{flex-wrap:wrap;justify-content:center;row-gap:10px;padding:0 var(--gutter);white-space:normal}
  .aw-marquee__group[aria-hidden="true"]{display:none}
  .aw-motion [data-reveal]{opacity:1 !important;transform:none !important}
}

@media print{
  .aw-nav,.aw-skip,.aw-progress,.aw-toc,.aw-marquee{display:none !important}
  [data-reveal]{opacity:1 !important;transform:none !important;animation:none !important}
  .aw-band,.aw-footer{background:#fff !important;color:#000 !important}
}