/* === Sylfaen Advisory — Quiet Authority === */

:root {
  /* Palette — Sylfaen brand */
  --bg: #ECEAE3;
  --bg-deep: #DDDBD3;
  --paper: #F5F3EC;
  --ink: #1F2E37;
  --ink-soft: #3D4A52;
  --slate: #5A7080;
  --slate-soft: #8A9AA8;
  --rule: rgba(31, 46, 55, 0.16);
  --rule-soft: rgba(31, 46, 55, 0.08);
  --accent: #1F8A99;
  --accent-deep: #0E5A77;
  --accent-bright: #0ABFBF;
  --warn: #8C5A3D;

  /* Type */
  --serif: "Newsreader", "Source Serif 4", Georgia, serif;
  --sans: "Geist", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale */
  --gutter: clamp(20px, 4vw, 64px);
  --max-w: 1320px;
  --section-pad: clamp(80px, 10vw, 160px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "kern";
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* === Layout === */

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  position: relative;
}

.section + .section {
  padding-top: 0;
}

.section-rule {
  border-top: 1px solid var(--rule);
}

.section-head {
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: clamp(24px, 5vw, 80px);
  margin-bottom: clamp(40px, 6vw, 80px);
  align-items: baseline;
}

@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; }
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 500;
}

.eyebrow .num {
  color: var(--ink);
  margin-right: 14px;
  display: inline-block;
}

.section-title {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
}

.section-title em {
  font-style: italic;
  font-weight: 380;
  color: var(--ink-soft);
}

.section-sub {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--slate);
  max-width: 56ch;
  margin-top: 24px;
  font-weight: 380;
  text-wrap: pretty;
}

/* === Nav === */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--rule-soft);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  height: 76px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 16px;
  letter-spacing: -0.005em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.wordmark .mark-svg {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
}

.wordmark .mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
}

.wordmark .label {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  gap: 3px;
}

.wordmark .label > span:first-child {
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 14px;
  color: var(--ink);
}

.wordmark .label .sub {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 500;
  margin-top: 2px;
}

.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}

.nav-links a {
  font-size: 13.5px;
  color: var(--ink-soft);
  position: relative;
  transition: color 160ms ease;
  white-space: nowrap;
}

.nav-links a:hover { color: var(--ink); }

.nav-links a .num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--slate);
  margin-right: 6px;
  letter-spacing: 0.08em;
}

.nav-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate);
}

.nav-status .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (max-width: 980px) {
  .nav-links { display: none; }
}

/* === Buttons === */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  border: 1px solid var(--ink);
  transition: all 200ms ease;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 450;
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}

.btn-primary:hover {
  background: var(--ink-soft);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--bg);
}

.btn .arrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-0.5px);
  transition: transform 200ms ease;
}

.btn:hover .arrow { transform: translate(2px, -0.5px); }

/* === Hero === */

.hero {
  padding-top: clamp(80px, 9vw, 140px);
  padding-bottom: clamp(80px, 9vw, 140px);
  position: relative;
}

/* === Hero — image behind === */

.hero-imaged {
  padding-top: clamp(120px, 12vw, 200px);
  padding-bottom: clamp(120px, 12vw, 180px);
  background: #0a0807;
  color: #f0ebe1;
  margin-bottom: 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.06);
}

.hero-bg-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg,
      rgba(10, 8, 7, 0.86) 0%,
      rgba(10, 8, 7, 0.72) 32%,
      rgba(10, 8, 7, 0.5) 58%,
      rgba(10, 8, 7, 0.68) 100%
    ),
    radial-gradient(ellipse at 25% 50%, rgba(10,8,7,0.4) 0%, transparent 60%);
}

.hero-imaged .wrap {
  position: relative;
  z-index: 1;
}

.hero-imaged .hero-eyebrow {
  color: rgba(240, 235, 225, 0.72);
}

.hero-imaged .hero-eyebrow::after {
  background: rgba(240, 235, 225, 0.28);
}

.hero-imaged .hero-headline {
  color: #f4eee2;
  text-shadow: 0 1px 30px rgba(0,0,0,0.35);
}

.hero-imaged .hero-headline em {
  color: rgba(244, 238, 226, 0.82);
}

.hero-imaged .hero-lead {
  color: rgba(240, 235, 225, 0.86);
}

.hero-imaged .hero-lead strong {
  color: #f4eee2;
}

.hero-imaged .hero-meta {
  border-left-color: rgba(240, 235, 225, 0.22);
}

.hero-imaged .hero-meta .row .k {
  color: rgba(240, 235, 225, 0.55);
}

.hero-imaged .hero-meta .row .v {
  color: #f4eee2;
}

.hero-imaged .btn-primary {
  background: #f4eee2;
  color: #1F2E37;
  border-color: #f4eee2;
}

.hero-imaged .btn-primary:hover {
  background: #fff;
  border-color: #fff;
}

.hero-imaged .btn-ghost {
  color: #f4eee2;
  border-color: rgba(240, 235, 225, 0.45);
}

.hero-imaged .btn-ghost:hover {
  background: #f4eee2;
  color: #1F2E37;
  border-color: #f4eee2;
}

.hero-imaged .hero-strip {
  border-top-color: rgba(240, 235, 225, 0.22);
}

.hero-imaged .hero-strip-label {
  color: rgba(240, 235, 225, 0.55);
}

.hero-imaged .hero-strip-item {
  color: rgba(240, 235, 225, 0.78);
}

.hero-imaged .hero-strip-item .v {
  color: #f4eee2;
}

.hero-imaged .hero-strip-item .k {
  color: rgba(240, 235, 225, 0.5);
}

.hero-imaged + .section {
  border-top: 1px solid var(--rule-soft);
}

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
  max-width: 220px;
}

.hero-headline {
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(48px, 7.5vw, 116px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 14ch;
  text-wrap: balance;
}

.hero-headline em {
  font-style: italic;
  font-weight: 380;
  color: var(--ink-soft);
}

.hero-headline .underline {
  position: relative;
  white-space: nowrap;
}

.hero-headline .underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.05em;
  height: 1px;
  background: var(--ink);
  opacity: 0.4;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: end;
  margin-top: clamp(48px, 6vw, 80px);
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-lead {
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.45;
  color: var(--slate);
  max-width: 46ch;
  font-weight: 380;
  text-wrap: pretty;
}

.hero-lead strong {
  color: var(--ink);
  font-weight: 480;
  font-style: italic;
}

.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-left: 1px solid var(--rule);
  padding-left: 28px;
}

.hero-meta .row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-meta .row .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

.hero-meta .row .v {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
}

.hero-cta {
  display: flex;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* Hero ticker / sample data strip */

.hero-strip {
  margin-top: clamp(60px, 7vw, 100px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: baseline;
}

.hero-strip-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
}

.hero-strip-content {
  display: flex;
  gap: 40px;
  overflow: hidden;
}

.hero-strip-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.hero-strip-item .v {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 420;
  color: var(--ink);
}

.hero-strip-item .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

/* === Practice / About === */

.practice-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

@media (max-width: 880px) {
  .practice-grid { grid-template-columns: 1fr; }
}

.practice-aside {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.etymology {
  border: 1px solid var(--rule);
  padding: 28px;
  background: var(--paper);
}

.etymology .word {
  font-family: var(--serif);
  font-size: 32px;
  font-style: italic;
  font-weight: 380;
  color: var(--ink);
  margin-bottom: 4px;
}

.etymology .pron {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate);
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.etymology .def {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.etymology .def .pos {
  font-family: var(--serif);
  font-style: italic;
  color: var(--slate);
  margin-right: 6px;
}

.practice-body p {
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.45;
  font-weight: 380;
  color: var(--ink);
  text-wrap: pretty;
}

.practice-body p + p { margin-top: 28px; }

.practice-body .lead::first-letter {
  font-family: var(--serif);
  font-size: 4.6em;
  float: left;
  line-height: 0.88;
  padding-right: 12px;
  padding-top: 4px;
  font-weight: 380;
}

.practice-stats {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

@media (max-width: 760px) {
  .practice-stats { grid-template-columns: repeat(2, 1fr); }
}

.practice-stat .v {
  font-family: var(--serif);
  font-size: clamp(32px, 3vw, 44px);
  font-weight: 380;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.practice-stat .v .suffix {
  font-size: 0.5em;
  color: var(--slate);
  font-style: italic;
}

.practice-stat .k {
  font-size: 12.5px;
  color: var(--slate);
  margin-top: 10px;
  line-height: 1.4;
  max-width: 22ch;
}

/* === Engagements === */

.engagements {
  background: var(--bg-deep);
}

#engagements.section,
#awen.section {
  padding-top: 0;
  padding-bottom: 0;
}

.engagements-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

.tiers {
  border-top: 1px solid var(--ink);
}

.tier {
  display: grid;
  grid-template-columns: 60px 1.6fr 1fr 220px;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(32px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
  position: relative;
  transition: background 200ms ease;
  cursor: pointer;
}

.tier:hover {
  background: color-mix(in oklab, var(--bg-deep) 50%, var(--bg) 50%);
}

@media (max-width: 880px) {
  .tier { grid-template-columns: 40px 1fr; }
  .tier > .tier-meta, .tier > .tier-price { grid-column: 2; }
}

.tier-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--slate);
  padding-top: 8px;
}

.tier-title {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.tier-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tier-tag::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
}

.tier-meta {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate);
  padding-top: 8px;
  max-width: 42ch;
}

.tier-meta strong {
  color: var(--ink);
  font-weight: 480;
}

.tier-includes {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tier-pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  color: var(--slate);
}

.tier-price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.tier-price .amount {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 380;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1;
}

.tier-price .unit {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

.tier-price .arrow {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 200ms ease;
}

.tier:hover .tier-price .arrow { gap: 10px; }

/* === Awen interactive === */

.awen {
  background: var(--ink);
  color: var(--bg);
}

.awen-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

.awen .eyebrow { color: rgba(241, 237, 227, 0.55); }
.awen .eyebrow .num { color: var(--bg); }
.awen .section-title { color: var(--bg); }
.awen .section-title em { color: rgba(241, 237, 227, 0.68); }
.awen .section-sub { color: rgba(241, 237, 227, 0.62); }

.awen-frame {
  margin-top: clamp(40px, 5vw, 64px);
  background: #0E1014;
  border: 1px solid rgba(241, 237, 227, 0.12);
  overflow: hidden;
}

.awen-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(241, 237, 227, 0.08);
  background: #0A0C10;
}

.awen-chrome-left {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(241, 237, 227, 0.6);
}

.awen-chrome-dots {
  display: flex;
  gap: 6px;
}

.awen-chrome-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(241, 237, 227, 0.18);
}

.awen-chrome-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(241, 237, 227, 0.5);
}

.awen-chrome-right .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(95, 107, 90, 0.18);
}

.awen-tabs {
  display: flex;
  border-bottom: 1px solid rgba(241, 237, 227, 0.08);
  padding: 0 20px;
}

.awen-tab {
  padding: 16px 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(241, 237, 227, 0.45);
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.awen-tab .num {
  color: rgba(241, 237, 227, 0.3);
}

.awen-tab:hover { color: rgba(241, 237, 227, 0.8); }

.awen-tab.active {
  color: var(--bg);
  border-bottom-color: var(--accent);
}

.awen-tab.active .num { color: var(--accent); }

.awen-body {
  padding: clamp(24px, 3vw, 40px);
  min-height: 540px;
}

/* Awen — Documents tab */

.awen-doc-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  min-height: 480px;
}

@media (max-width: 880px) {
  .awen-doc-grid { grid-template-columns: 1fr; }
}

.awen-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.awen-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(241, 237, 227, 0.08);
}

.awen-panel-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(241, 237, 227, 0.65);
}

.awen-panel-aux {
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(241, 237, 227, 0.4);
  letter-spacing: 0.04em;
}

.awen-doc-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  gap: 14px;
  padding: 11px 8px;
  font-size: 12.5px;
  font-family: var(--mono);
  align-items: center;
  cursor: pointer;
  border-radius: 2px;
  transition: background 160ms ease;
  color: rgba(241, 237, 227, 0.82);
}

.awen-doc-row:hover { background: rgba(241, 237, 227, 0.04); }
.awen-doc-row.selected { background: rgba(95, 107, 90, 0.12); color: var(--bg); }

.awen-doc-row .status {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.status.pass { background: #6FA37A; }
.status.warn { background: #C9A24A; }
.status.fail { background: #B8694D; }

.awen-doc-row .name { color: inherit; }
.awen-doc-row .rule { color: rgba(241, 237, 227, 0.4); font-size: 10.5px; }
.awen-doc-row .conf {
  font-size: 10.5px;
  color: rgba(241, 237, 227, 0.4);
  font-variant-numeric: tabular-nums;
}

.awen-detail {
  background: #060709;
  border: 1px solid rgba(241, 237, 227, 0.08);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.awen-detail-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.awen-detail-name {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--bg);
  line-height: 1.3;
  word-break: break-all;
}

.awen-detail-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(241, 237, 227, 0.4);
}

.awen-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.awen-check {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(241, 237, 227, 0.07);
  font-size: 12px;
  align-items: start;
}

.awen-check:last-child { border-bottom: none; }

.awen-check .icon {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.2;
  margin-top: 1px;
}
.awen-check.pass .icon { color: #87B58E; }
.awen-check.warn .icon { color: #C9A24A; }
.awen-check.fail .icon { color: #C77D5F; }

.awen-check .lbl { color: rgba(241, 237, 227, 0.82); font-size: 12.5px; line-height: 1.4; }
.awen-check .lbl .det { color: rgba(241, 237, 227, 0.45); font-family: var(--mono); font-size: 10.5px; margin-top: 4px; display: block; }
.awen-check .pct { font-family: var(--mono); font-size: 11px; color: rgba(241, 237, 227, 0.65); }

/* Awen — Compliance bars */

.awen-comp {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 40px;
  min-height: 480px;
}

@media (max-width: 880px) {
  .awen-comp { grid-template-columns: 1fr; }
}

.awen-comp-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.awen-score {
  border: 1px solid rgba(241, 237, 227, 0.1);
  padding: 28px;
}

.awen-score .label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(241, 237, 227, 0.5);
}

.awen-score .v {
  font-family: var(--serif);
  font-size: 88px;
  font-weight: 360;
  line-height: 1;
  margin-top: 12px;
  letter-spacing: -0.03em;
  display: flex;
  align-items: baseline;
}
.awen-score .v .pct { font-size: 28px; color: rgba(241, 237, 227, 0.5); margin-left: 4px; }

.awen-score .trend {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(241, 237, 227, 0.6);
}

.awen-score .trend .delta { color: #87B58E; }

.awen-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.awen-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.awen-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(241, 237, 227, 0.78);
}

.awen-bar-head .pct {
  color: var(--bg);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.awen-bar-track {
  height: 4px;
  background: rgba(241, 237, 227, 0.08);
  position: relative;
  overflow: hidden;
}

.awen-bar-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--accent);
  transition: width 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.awen-bar-fill.warn { background: #C9A24A; }
.awen-bar-fill.fail { background: #B8694D; }

.awen-bar-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(241, 237, 227, 0.42);
  letter-spacing: 0.04em;
}

/* Awen — Activity / Timeline */

.awen-act {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  min-height: 480px;
}

@media (max-width: 880px) {
  .awen-act { grid-template-columns: 1fr; }
}

.awen-feed {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.awen-feed-item {
  display: grid;
  grid-template-columns: 64px 14px 1fr auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(241, 237, 227, 0.06);
  align-items: center;
  font-size: 12.5px;
}

.awen-feed-item .time {
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(241, 237, 227, 0.4);
  letter-spacing: 0.04em;
}

.awen-feed-item .glyph {
  width: 8px; height: 8px;
  margin-left: 3px;
  border-radius: 50%;
}

.awen-feed-item .body {
  color: rgba(241, 237, 227, 0.82);
  line-height: 1.45;
}

.awen-feed-item .body strong {
  color: var(--bg);
  font-weight: 480;
}

.awen-feed-item .user {
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(241, 237, 227, 0.5);
  letter-spacing: 0.04em;
}

.awen-sparkstack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.awen-spark-card {
  border: 1px solid rgba(241, 237, 227, 0.1);
  padding: 20px;
}

.awen-spark-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.awen-spark-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(241, 237, 227, 0.5);
}

.awen-spark-v {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 380;
  color: var(--bg);
  line-height: 1;
  letter-spacing: -0.02em;
}

.awen-spark-svg {
  width: 100%;
  height: 60px;
  display: block;
}

/* ============================================================
   === Awen product mock — Document generation workspace ===
   Self-contained light-theme product UI (matches platform).
   All classes prefixed .awn- and scoped under .awn-app.
   ============================================================ */

.awn-app {
  --awn-navy: #112532;
  --awn-navy-2: #0c1c27;
  --awn-teal: #2db8bf;
  --awn-teal-deep: #0d6e75;
  --awn-teal-tint: #e6f6f6;
  --awn-paper: #ffffff;
  --awn-bg: #f4f6f8;
  --awn-border: #e5e7eb;
  --awn-border-2: #eef1f3;
  --awn-ink: #1f2a33;
  --awn-ink-2: #3a4954;
  --awn-slate: #6b7780;
  --awn-faint: #9aa6ad;
  --awn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;

  margin-top: clamp(40px, 5vw, 64px);
  background: var(--awn-paper);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  height: clamp(580px, 74vh, 740px);
  font-family: var(--awn-font);
  color: var(--awn-ink);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
}
.awn-app *, .awn-app *::before, .awn-app *::after { box-sizing: border-box; }
.awn-app button { font-family: inherit; }

/* --- Top bar --- */
.awn-topbar {
  flex-shrink: 0;
  height: 46px;
  background: var(--awn-paper);
  border-bottom: 1px solid var(--awn-border);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 14px;
  font-size: 12.5px;
}
.awn-tb-label {
  font-size: 9.5px;
  letter-spacing: 0.13em;
  font-weight: 600;
  color: var(--awn-faint);
  text-transform: uppercase;
}
.awn-tb-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--awn-border);
  border-radius: 6px;
  background: var(--awn-paper);
  font-weight: 600;
  color: var(--awn-ink);
  cursor: pointer;
  white-space: nowrap;
  max-width: 210px;
  transition: border-color 150ms ease, background 150ms ease;
}
.awn-tb-pill:hover { border-color: #cdd4d9; }
.awn-tb-pill .caret { color: var(--awn-faint); font-size: 9px; }
.awn-tb-pill .v { overflow: hidden; text-overflow: ellipsis; }
.awn-tb-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--awn-ink-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.awn-tb-action:hover { background: var(--awn-bg); }
.awn-tb-action svg { color: var(--awn-slate); }
.awn-tb-spacer { flex: 1; }
.awn-tb-right { display: flex; align-items: center; gap: 4px; }
.awn-tb-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: none; border: none; cursor: pointer;
  color: var(--awn-slate);
}
.awn-tb-icon:hover { background: var(--awn-bg); color: var(--awn-ink); }
.awn-tb-conf {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 11px; border-radius: 6px;
  border: 1px solid var(--awn-border);
  font-size: 11.5px; font-weight: 600; color: var(--awn-slate);
  cursor: default;
}
.awn-crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--awn-slate);
}
.awn-crumb .back {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--awn-teal-deep); font-weight: 600; cursor: pointer;
  background: none; border: none; padding: 4px 6px; border-radius: 5px;
}
.awn-crumb .back:hover { background: var(--awn-teal-tint); }
.awn-crumb .sep { color: var(--awn-faint); }
.awn-crumb .cur { color: var(--awn-ink); font-weight: 600; }

/* --- Main row: rail + stage --- */
.awn-row { flex: 1; display: flex; min-height: 0; }

.awn-rail {
  flex-shrink: 0;
  width: 54px;
  background: var(--awn-navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 14px;
  gap: 4px;
}
.awn-rail-logo { margin-bottom: 14px; display: block; }
.awn-rail-btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; cursor: pointer;
  color: rgba(255,255,255,0.5);
  background: none; border: none;
  transition: background 150ms ease, color 150ms ease;
}
.awn-rail-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
.awn-rail-btn.active { background: rgba(45,184,191,0.16); color: var(--awn-teal); }
.awn-rail-sp { flex: 1; }

.awn-stage { flex: 1; min-width: 0; background: var(--awn-bg); overflow: auto; position: relative; }

/* --- Picker view --- */
.awn-picker { padding: 26px 30px 60px; }
.awn-picker h1 {
  font-size: 21px; font-weight: 650; letter-spacing: -0.01em;
  margin: 0 0 4px; color: var(--awn-ink);
}
.awn-picker .sub { font-size: 13px; color: var(--awn-slate); margin: 0 0 18px; }

.awn-filters { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; }
.awn-seg { display: inline-flex; background: var(--awn-paper); border: 1px solid var(--awn-border); border-radius: 7px; padding: 3px; gap: 2px; }
.awn-seg button {
  border: none; background: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--awn-slate);
  padding: 5px 12px; border-radius: 5px;
}
.awn-seg button.on { background: var(--awn-navy); color: #fff; }
.awn-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--awn-slate); cursor: pointer; font-weight: 500; user-select: none; }
.awn-chk .box {
  width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid #c4ccd1; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px;
}
.awn-chk.on .box { background: var(--awn-teal-deep); border-color: var(--awn-teal-deep); }
.awn-filters .sp { flex: 1; }

.awn-party { display: inline-flex; border: 1px solid var(--awn-border); border-radius: 7px; overflow: hidden; }
.awn-party button {
  border: none; background: var(--awn-paper); cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--awn-slate); padding: 6px 13px;
}
.awn-party button.on { background: var(--awn-navy); color: #fff; }
.awn-party button + button { border-left: 1px solid var(--awn-border); }

.awn-group-label {
  font-size: 10px; letter-spacing: 0.13em; font-weight: 700;
  color: var(--awn-faint); text-transform: uppercase; margin: 0 0 14px;
}
.awn-group-label.second { margin-top: 38px; }

.awn-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 14px;
}
.awn-card {
  background: var(--awn-paper);
  border: 1px solid var(--awn-border);
  border-radius: 9px;
  padding: 16px 17px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 196px;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.awn-card:hover {
  border-color: #c4d7d8;
  box-shadow: 0 8px 24px -12px rgba(17,37,50,0.18);
  transform: translateY(-1px);
}
.awn-card.feature {
  border-color: var(--awn-teal);
  background: var(--awn-teal-tint);
  box-shadow: 0 0 0 1px var(--awn-teal);
}
.awn-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; min-height: 0; }
.awn-badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.01em;
  padding: 3px 8px; border-radius: 20px;
  background: var(--awn-bg); color: var(--awn-slate);
}
.awn-badge.teal { background: var(--awn-teal-tint); color: var(--awn-teal-deep); }
.awn-card-icon { color: var(--awn-teal-deep); margin-bottom: 12px; }
.awn-card.feature .awn-card-icon { color: var(--awn-teal-deep); }
.awn-card-title { font-size: 15px; font-weight: 650; line-height: 1.25; color: var(--awn-ink); margin: 0 0 5px; }
.awn-card-abbr { font-size: 12.5px; font-weight: 700; color: var(--awn-teal-deep); letter-spacing: 0.02em; margin-bottom: auto; }
.awn-card-desc { font-size: 12px; line-height: 1.45; color: var(--awn-slate); margin: 14px 0 0; }

.awn-footbar {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 30px; margin: 0 -30px -60px;
  background: var(--awn-bg);
  border-top: 1px solid var(--awn-border);
  font-size: 11.5px; color: var(--awn-slate);
}
.awn-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2bb673; box-shadow: 0 0 0 3px rgba(43,182,115,0.18); }

/* --- Builder view --- */
.awn-builder { display: flex; flex-direction: column; height: 100%; background: var(--awn-bg); }
.awn-build-head {
  flex-shrink: 0; background: var(--awn-paper); border-bottom: 1px solid var(--awn-border);
  padding: 14px 20px; display: flex; align-items: flex-start; gap: 20px;
}
.awn-build-head .ttl { font-size: 17px; font-weight: 650; color: var(--awn-ink); margin: 0; line-height: 1.2; }
.awn-build-head .meta { font-size: 11.5px; color: var(--awn-slate); margin-top: 4px; }
.awn-build-head .meta b { color: var(--awn-ink-2); font-weight: 600; }
.awn-build-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.awn-prog { display: flex; flex-direction: column; gap: 5px; min-width: 130px; }
.awn-prog .track { height: 4px; border-radius: 3px; background: var(--awn-border); overflow: hidden; }
.awn-prog .fill { height: 100%; background: var(--awn-teal); border-radius: 3px; transition: width 600ms cubic-bezier(.4,0,.2,1); }
.awn-prog .lbl { font-size: 10.5px; color: var(--awn-slate); text-align: right; font-weight: 600; }
.awn-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--awn-border); background: var(--awn-paper); color: var(--awn-ink-2);
  transition: background 150ms ease, border-color 150ms ease;
}
.awn-btn:hover { background: var(--awn-bg); }
.awn-btn.icon { width: 34px; padding: 0; justify-content: center; }
.awn-btn.teal { background: var(--awn-teal-deep); border-color: var(--awn-teal-deep); color: #fff; }
.awn-btn.teal:hover { background: #0a5b61; }

.awn-gensettings {
  flex-shrink: 0; background: var(--awn-bg); border-bottom: 1px solid var(--awn-border);
  padding: 9px 20px; font-size: 12px; font-weight: 600; color: var(--awn-ink-2);
  display: flex; align-items: center; gap: 7px;
}

.awn-build-body { flex: 1; display: flex; min-height: 0; }

/* section tree */
.awn-tree { flex-shrink: 0; width: 224px; background: var(--awn-bg); border-right: 1px solid var(--awn-border); overflow: auto; padding: 6px 0; }
.awn-tree-grp { padding: 10px 16px 5px; display: flex; align-items: center; justify-content: space-between; }
.awn-tree-grp .g-name { font-size: 12px; font-weight: 700; color: var(--awn-ink); display: flex; align-items: center; gap: 6px; }
.awn-tree-grp .g-name .chev { color: var(--awn-faint); font-size: 9px; }
.awn-tree-grp .g-badge { font-size: 10.5px; font-weight: 600; color: var(--awn-slate); }
.awn-tree-grp .g-badge.done { color: var(--awn-teal-deep); }
.awn-sec {
  display: flex; gap: 9px; padding: 7px 16px 7px 18px; cursor: pointer;
  border-left: 2px solid transparent; align-items: flex-start;
}
.awn-sec:hover { background: rgba(17,37,50,0.04); }
.awn-sec.active { background: var(--awn-teal-tint); border-left-color: var(--awn-teal-deep); }
.awn-sec .dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #c4ccd1; flex-shrink: 0; margin-top: 4px; }
.awn-sec .dot.done { background: var(--awn-teal-deep); border-color: var(--awn-teal-deep); }
.awn-sec.active .dot { border-color: var(--awn-teal-deep); }
.awn-sec .sec-txt { min-width: 0; }
.awn-sec .sec-code { font-size: 10px; color: var(--awn-faint); font-weight: 600; }
.awn-sec.active .sec-code { color: var(--awn-teal-deep); }
.awn-sec .sec-name {
  font-size: 12px; color: var(--awn-ink-2); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.awn-sec.active .sec-name { color: var(--awn-teal-deep); font-weight: 600; }

/* document pane */
.awn-doc { flex: 1; min-width: 0; background: var(--awn-bg); overflow: auto; }
.awn-doc-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 24px; font-size: 12px; color: var(--awn-slate);
  position: sticky; top: 0; background: var(--awn-bg); z-index: 2;
  border-bottom: 1px solid var(--awn-border-2);
}
.awn-doc-top .crumbs b { color: var(--awn-ink-2); font-weight: 600; }
.awn-doc-nav { display: flex; gap: 6px; }
.awn-doc-nav button {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--awn-border);
  background: var(--awn-paper); cursor: pointer; color: var(--awn-slate);
  display: inline-flex; align-items: center; justify-content: center;
}
.awn-doc-nav button:hover { background: var(--awn-bg); color: var(--awn-ink); }

.awn-card-doc {
  background: var(--awn-paper); border: 1px solid var(--awn-border); border-radius: 10px;
  margin: 18px 24px 28px; overflow: hidden;
}
.awn-sec-head {
  display: flex; gap: 14px; padding: 18px 26px; border-bottom: 1px solid var(--awn-border-2);
  align-items: flex-start;
}
.awn-sec-num {
  width: 30px; height: 30px; border-radius: 50%; background: var(--awn-teal-deep); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.awn-sec-head .h-ttl { font-size: 15px; font-weight: 650; color: var(--awn-ink); margin: 0; }
.awn-sec-head .h-sub { font-size: 12px; color: var(--awn-slate); margin: 4px 0 0; line-height: 1.4; }
.awn-sec-head .h-gen { font-size: 11px; color: var(--awn-faint); margin-top: 5px; font-style: italic; }
.awn-sec-head .h-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.awn-pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 20px;
  border: 1px solid var(--awn-border); color: var(--awn-slate); white-space: nowrap;
}
.awn-pill.draft { color: var(--awn-teal-deep); border-color: #b6dadc; background: var(--awn-teal-tint); }
.awn-pill.approved { color: #1d7d4f; border-color: #b7e0c8; background: #e9f7ef; }

.awn-sec-body { padding: 22px 26px 30px; }

/* empty state */
.awn-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 46px 20px; gap: 16px;
}
.awn-empty .ghost {
  width: 100%; max-width: 460px; border: 1px dashed #d4dade; border-radius: 8px;
  padding: 30px; color: var(--awn-faint); font-size: 13px; background:
    repeating-linear-gradient(135deg, transparent, transparent 9px, rgba(17,37,50,0.018) 9px, rgba(17,37,50,0.018) 18px);
}
.awn-gen-row { display: flex; align-items: center; gap: 14px; }
.awn-cost { font-size: 11.5px; color: var(--awn-faint); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.awn-gen-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: 8px;
  background: var(--awn-teal-deep); color: #fff; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 20px -8px rgba(13,110,117,0.6);
  transition: background 150ms ease, transform 120ms ease;
}
.awn-gen-btn:hover { background: #0a5b61; transform: translateY(-1px); }
.awn-gen-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.awn-gen-btn .spark { font-size: 13px; }

/* generated content typography */
.awn-content { font-size: 13.5px; color: var(--awn-ink-2); line-height: 1.62; }
.awn-content .h2 { font-size: 15px; font-weight: 700; color: var(--awn-teal-deep); margin: 26px 0 10px; }
.awn-content .h2:first-child { margin-top: 0; }
.awn-content .h3 { font-size: 13px; font-weight: 700; color: var(--awn-ink); margin: 18px 0 8px; }
.awn-content p { margin: 0 0 13px; }
.awn-content .clause { margin: 0 0 9px; padding-left: 18px; position: relative; }
.awn-content .clause::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: #c4d2d4; }
.awn-content .mark { color: var(--awn-teal-deep); border-bottom: 1px solid rgba(13,110,117,0.35); }
.awn-content .confirm {
  background: #fbf0d8; color: #8a6516; padding: 1px 5px; border-radius: 3px;
  font-size: 12.5px; font-weight: 500;
}
.awn-content .callout {
  border-left: 3px solid var(--awn-teal); background: #f3fafa; border-radius: 0 6px 6px 0;
  padding: 12px 16px; margin: 0 0 14px; font-size: 13px; color: var(--awn-ink-2);
}
.awn-content .callout b { color: var(--awn-ink); }
.awn-caret {
  display: inline-block; width: 7px; height: 15px; background: var(--awn-teal-deep);
  margin-left: 1px; vertical-align: text-bottom; animation: awn-blink 1s steps(2) infinite;
}
@keyframes awn-blink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
.awn-genbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-size: 11.5px; color: var(--awn-teal-deep); font-weight: 600;
}
.awn-genbar .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--awn-teal); animation: awn-pulse 1.1s ease-in-out infinite; }
@keyframes awn-pulse { 0%,100% { opacity: 0.3; transform: scale(0.8);} 50% { opacity: 1; transform: scale(1.1);} }
.awn-genbar .skip { margin-left: auto; color: var(--awn-slate); cursor: pointer; text-decoration: underline; font-weight: 500; }

.awn-approve-row { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--awn-border-2); }
.awn-approve-row .note { font-size: 11.5px; color: var(--awn-faint); margin-left: auto; }

@media (max-width: 760px) {
  .awn-rail { display: none; }
  .awn-tb-label, .awn-tb-action span, .awn-tb-conf span { display: none; }
  .awn-cards { grid-template-columns: 1fr; }
  .awn-tree { width: 150px; }
  .awn-build-actions .awn-prog { display: none; }
  .awn-build-head { flex-wrap: wrap; }
}

/* === Credentials === */

.credentials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

@media (max-width: 880px) {
  .credentials { grid-template-columns: 1fr; }
}

.cred {
  padding: 40px;
  border: 1px solid var(--rule);
  margin-left: -1px;
  margin-top: -1px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--paper);
  transition: background 200ms ease;
  position: relative;
  min-height: 360px;
}

.cred:hover { background: var(--bg); }

.cred-glyph {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 380;
  font-size: 56px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.cred-glyph .small { font-size: 28px; vertical-align: super; color: var(--slate); }

.cred-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.cred-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate);
}

.cred-list {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
}

.cred-list li {
  list-style: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--slate);
  text-transform: uppercase;
}

/* === Contact === */

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

@media (max-width: 880px) {
  .contact { grid-template-columns: 1fr; }
}

.contact-aside .section-title {
  font-size: clamp(36px, 4.8vw, 72px);
  margin-bottom: 28px;
}

.contact-modes {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-top: 1px solid var(--rule);
}

/* Principal card in Contact */

.principal-card {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  align-items: start;
}

.principal-photo {
  width: 140px;
  height: 140px;
  border: 1px solid var(--rule);
  background: var(--bg-deep);
  overflow: hidden;
  position: relative;
  border-radius: 50%;
}

.principal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.02);
}

.principal-photo image-slot {
  display: block;
  width: 100%;
  height: 100%;
}

.principal-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.principal-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 6px;
}

.principal-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
}

.principal-role {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--slate);
  margin-bottom: 10px;
}

.principal-bio {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 42ch;
}

@media (max-width: 540px) {
  .principal-card {
    grid-template-columns: 1fr;
  }
  .principal-photo {
    width: 140px;
  }
}

.contact-mode {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
  cursor: pointer;
  transition: padding 200ms ease;
}

.contact-mode:hover { padding-left: 12px; }

.contact-mode .ix {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate);
  letter-spacing: 0.08em;
}

.contact-mode .lbl {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-mode .lbl .t {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
}

.contact-mode .lbl .s {
  font-size: 13px;
  color: var(--slate);
}

.contact-mode .arr {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  transition: transform 200ms ease;
}

.contact-mode:hover .arr { transform: translateX(6px); }

/* Contact form */

.form-card {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: clamp(28px, 3vw, 40px);
}

.form-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}

.form-head .t {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.form-head .ref {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--slate);
  letter-spacing: 0.06em;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.form-row.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.form-row.split > * { padding: 0; border: 0; }

.form-row label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

.form-row input,
.form-row textarea,
.form-row select {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  padding: 4px 0;
  width: 100%;
  resize: none;
}

.form-row textarea { min-height: 80px; line-height: 1.5; }

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: var(--slate-soft);
  font-style: italic;
}

.form-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.form-chip {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 11px;
  border: 1px solid var(--rule);
  cursor: pointer;
  color: var(--slate);
  background: transparent;
  transition: all 160ms ease;
}

.form-chip:hover { color: var(--ink); border-color: var(--ink); }
.form-chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.form-foot {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.form-foot .note {
  font-size: 12px;
  color: var(--slate);
  font-style: italic;
  font-family: var(--serif);
  max-width: 28ch;
}

.form-success {
  text-align: center;
  padding: 40px 20px;
}

.form-success .glyph {
  font-family: var(--serif);
  font-style: italic;
  font-size: 60px;
  font-weight: 380;
  color: var(--accent-deep);
}

.form-success .t {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 380;
  margin-top: 8px;
  margin-bottom: 12px;
  color: var(--ink);
}

.form-success .s {
  font-size: 14px;
  color: var(--slate);
  font-family: var(--serif);
  max-width: 36ch;
  margin: 0 auto;
  line-height: 1.55;
}

/* === Footer === */

.footer {
  border-top: 1px solid var(--rule);
  padding: 60px 0 40px;
  margin-top: 60px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 64px;
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

.footer-col h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 14px;
  font-weight: 500;
}

.footer-col ul li {
  list-style: none;
  font-size: 14px;
  padding: 4px 0;
  color: var(--ink-soft);
}

.footer-col ul li a:hover { color: var(--accent-deep); }

.footer-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--slate);
  text-transform: uppercase;
}

.footer-mono-title {
  font-family: var(--serif);
  font-size: clamp(64px, 14vw, 220px);
  font-weight: 360;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  white-space: nowrap;
  margin-bottom: 40px;
  font-style: italic;
}

/* === Plate (editorial figure) === */

.plate {
  position: relative;
  margin: 0;
  padding: 0;
}

.plate-frame {
  position: relative;
  width: 100%;
  height: clamp(380px, 60vh, 720px);
  overflow: hidden;
  background: #0a0807;
}

.plate-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.04);
}

.plate-frame::after {
  /* gentle vignette + bottom fade for caption legibility */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(10,8,7,0.55) 100%),
    linear-gradient(to bottom, rgba(10,8,7,0.2) 0%, transparent 28%, transparent 70%, rgba(10,8,7,0.7) 100%);
}

.plate-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(20px, 3vw, 40px) var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
  color: rgba(245, 240, 230, 0.92);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  max-width: var(--max-w);
  margin: 0 auto;
}

.plate-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 380;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.1;
  color: rgba(245, 240, 230, 0.96);
}

.plate-label .roman {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-style: normal;
  color: rgba(245, 240, 230, 0.55);
  display: block;
  margin-bottom: 8px;
}

.plate-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgba(245, 240, 230, 0.55);
  align-self: end;
}

.plate-meta .v { color: rgba(245, 240, 230, 0.88); }

.plate-marker {
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(245, 240, 230, 0.6);
  letter-spacing: 0.18em;
  text-align: right;
  align-self: end;
}

/* Narrow divider variant */
.plate-divider .plate-frame img {
  filter: saturate(0.92) contrast(1.02) brightness(0.85);
}

.plate-divider .plate-frame::after {
  background:
    linear-gradient(to right, rgba(10,8,7,0.7) 0%, rgba(10,8,7,0.2) 45%, rgba(10,8,7,0.2) 55%, rgba(10,8,7,0.65) 100%),
    linear-gradient(to bottom, rgba(10,8,7,0.15) 0%, transparent 35%, transparent 65%, rgba(10,8,7,0.6) 100%);
}

.plate-caption-tight {
  grid-template-columns: 1fr;
  padding: clamp(14px, 2vw, 26px) var(--gutter);
}

@media (max-width: 760px) {
  .plate-caption { grid-template-columns: 1fr; gap: 12px; }
  .plate-marker { text-align: left; }
}

.plate-top-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 18px var(--gutter);
  display: flex;
  justify-content: space-between;
  color: rgba(245, 240, 230, 0.55);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  max-width: var(--max-w);
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

/* === image-slot styling === */

image-slot {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg-deep);
}

.is-portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
}

.is-wide {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.is-square {
  aspect-ratio: 1 / 1;
  width: 100%;
}

/* Misc */

.placeholder {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(22,24,29,0.04) 0 6px,
    transparent 6px 12px
  );
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--slate);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}