/* Aristourgima LLC — aristourgima.net
   Design system 1b. No webfonts, no third-party requests, no build step. */

:root {
  --paper: #f4f5f6;
  --panel: #eceef0;
  --rule: #d8dbde;
  --mute: #5c6470;
  --body: #454b53;
  --ink: #17191c;
  --bronze: #886247;
  --disabled: #666d78;

  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* App-brand exception: app pages may set the app's own name in its own voice.
     Astraia's identity is a serif wordmark. System faces only — no webfonts. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --gutter: 44px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--bronze); }
img { max-width: 100%; }

/* ---------- header ---------- */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.lockup { display: flex; align-items: center; gap: 14px; }
.lockup img { height: 21px; width: auto; display: block; flex: none; object-fit: contain; }
.lockup:hover { color: inherit; }

.lockup-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--bronze);
  border-inline-start: 1px solid var(--rule);
  padding-inline-start: 14px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: 12.5px;
}
.nav > a { color: var(--mute); }
/* Documented exception to rule 3: a hairline midway between --rule and
   --mute, used only for this divider. */
.nav-sep { width: 1px; height: 15px; background: #c8ccd1; }

/* ---------- language selector ---------- */

.lang { position: relative; }

.lang-trigger {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
}

.lang-menu {
  position: absolute;
  top: 39px;
  inset-inline-end: 0;
  min-width: 170px;
  margin: 0;
  padding: 20px 0 0;
  list-style: none;
  background: none;
  z-index: 30;
  /* Gradient directions are physical and will not mirror on their own. The
     wash always fades away from the gutter the menu is pinned to, which is
     the left one in Arabic, so the direction travels as a property. */
  --wash-away: left;
}
[dir="rtl"] .lang-menu { --wash-away: right; }

/* The list is a fixed ~516px tall — seventeen names, the current language
   labelling the trigger instead — while the heroes it hangs over are not:
   626px on the home page, 591px on the policy, 532px on the philosophy.
   On the shorter pages its foot lands on the content below. The
   wash below is the paper colour over the paper colour, which is to say
   invisible until something else is behind it, and it ramps in only across
   the bottom third, where an overlap can actually reach. On the home page
   nothing of it shows at all; elsewhere it appears exactly where it is needed. */
.lang-menu::before {
  content: "";
  position: absolute;
  inset-block: 0 -44px;
  inset-inline: -30px -14px;
  z-index: -1;
  background: linear-gradient(
    to var(--wash-away),
    rgba(244, 245, 246, 0.92) 0%,
    rgba(244, 245, 246, 0.78) 38%,
    rgba(244, 245, 246, 0.38) 72%,
    rgba(244, 245, 246, 0) 100%
  );
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
  /* Two masks intersected. The wash has to have no edge in any direction or
     it reads as a box: the first fades it in down the list, the second fades
     it out towards the left. A backdrop filter is clipped to its element's
     box, so the blur only fades where the mask does — the background alpha
     alone would leave the blur ending on a hard line. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, transparent 48%, rgba(0, 0, 0, 0.4) 68%, #000 84%, #000 93%, transparent 100%),
    linear-gradient(to var(--wash-away), #000 0%, #000 40%, rgba(0, 0, 0, 0.35) 74%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, transparent 48%, rgba(0, 0, 0, 0.4) 68%, #000 84%, #000 93%, transparent 100%),
    linear-gradient(to var(--wash-away), #000 0%, #000 40%, rgba(0, 0, 0, 0.35) 74%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.lang-menu li {
  padding: 5px 0;
  text-align: end;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--mute);
}
.lang-menu a { color: inherit; display: block; }
.lang-menu li[aria-disabled="true"] { color: var(--disabled); }


/* RTL: the /slug markers, the "no. 01" label and the row destinations are
   Latin path-like tokens. Left in the RTL run, their leading slash is a
   neutral character and bidi moves it to the other end — "/applications"
   renders as "applications/". Isolating them as LTR keeps the glyphs in
   order; the elements themselves are still placed by the RTL flow. */
[dir="rtl"] .pathlabel,
[dir="rtl"] .bar h2,
[dir="rtl"] .bar a,
[dir="rtl"] .no-label,
[dir="rtl"] .row-go,
[dir="rtl"] .foot-c { direction: ltr; unicode-bidi: isolate; }
/* Those tokens are now LTR boxes, so "start" would put them on the left.
   Block-level ones need pushing back to the RTL start edge. */
[dir="rtl"] .pathlabel { text-align: right; }

/* ---------- section bars ---------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
}
.bar a { color: var(--bronze); }
.bar h2 { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.bar--top { border-top: 1px solid var(--rule); margin-top: 64px; }

/* ---------- hero ---------- */

.hero {
  padding: 124px var(--gutter) 100px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.hero--page { padding: 104px var(--gutter) 76px; }

.eyebrow { font-family: var(--mono); font-size: 12.5px; color: var(--bronze); }
.pathlabel { font-family: var(--mono); font-size: 12px; color: var(--mute); }

h1 {
  margin: 0;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.03;
  font-weight: 500;
  letter-spacing: -0.034em;
  max-width: 21ch;
}
.hero p { margin: 0; font-size: 18px; line-height: 1.62; color: var(--body); max-width: 56ch; }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
}

/* ---------- app rows ---------- */

.rows { padding: 0 var(--gutter); }

.row {
  display: grid;
  grid-template-columns: 44px 210px 1fr 130px 150px;
  gap: 24px;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
}
.row:hover { background: var(--panel); }
.row--off { color: var(--disabled); }
.row--off:hover { background: none; }

.row-no { font-family: var(--mono); font-size: 12px; color: var(--bronze); }
.row--off .row-no { color: inherit; }
.row-name { font-size: 24px; font-weight: 500; letter-spacing: -0.018em; }
.row-desc { font-size: 15px; color: var(--body); line-height: 1.55; }
.row--off .row-desc { color: inherit; }
.row-plat { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.row--off .row-plat { color: inherit; }
.row-go { font-family: var(--mono); font-size: 12px; color: var(--bronze); text-align: end; white-space: nowrap; }

/* two-column app row used on the philosophy page */
.row--pair { grid-template-columns: 210px 1fr 150px; }
.row--pair:last-child { border-bottom: 0; }

/* small utilities — kept as classes so the breakpoint can always win */
.h2-lead { margin: 0; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.06; font-weight: 500; letter-spacing: -0.03em; max-width: 24ch; }
.hero p.lead-copy { margin: 0; font-size: 17px; line-height: 1.64; color: var(--body); max-width: 66ch; }
.band-p { margin: 0; font-size: 16.5px; line-height: 1.64; color: var(--body); max-width: 64ch; }
.link-accent { color: var(--bronze); }
.no-label { color: var(--disabled); }

/* Previous/next through the app catalogue, in the bar's right-hand slot. */
.app-nav { display: flex; align-items: center; gap: 26px; white-space: nowrap; }
/* Two short mono runs of the same weight sit too close to read as separate
   controls, so they take the footer's spacing and the breadcrumb's slash. */
.app-sep { margin-inline-start: 26px; color: var(--disabled); }

/* ---------- grids ---------- */

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  padding: 76px var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.grid3--tiled {
  gap: 1px;
  padding: 0;
  background: var(--rule);
}
.grid3--tiled > * {
  background: var(--paper);
  padding: 52px 34px 58px;
}

.item { display: flex; flex-direction: column; gap: 12px; }
.item-no { font-family: var(--mono); font-size: 12px; color: var(--bronze); }
.item h3 { margin: 0; font-size: 23px; font-weight: 500; letter-spacing: -0.018em; }
.item h3.sm { font-size: 20px; letter-spacing: -0.016em; }
.item p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); }


/* idea card: the term itself is the label, in bronze */
.item p.item-term { margin: 0; display: flex; align-items: baseline; gap: 12px; color: var(--bronze); }
.item-term .n { font-family: var(--mono); font-size: 12px; }
.item-term .t { font-size: 26px; font-weight: 500; letter-spacing: -0.018em; line-height: 1.15; color: var(--ink); }
.idea-gloss { font-family: var(--mono); font-size: 12.5px; color: var(--mute); }

/* ---------- two-up ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--rule);
}
.split > * { padding: 64px var(--gutter); display: flex; flex-direction: column; gap: 14px; }
.split > *:first-child { border-inline-end: 1px solid var(--rule); }
.split h2, .split h3 { margin: 0; }
.split h3 { font-size: 26px; font-weight: 500; letter-spacing: -0.022em; }
.split p { margin: 0; color: var(--body); line-height: 1.62; max-width: 52ch; }

/* ---------- claim band ---------- */

.band {
  padding: 76px var(--gutter);
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 18px;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 500;
  letter-spacing: -0.028em;
}
.band-head em { font-style: normal; color: var(--bronze); }

.claims { display: flex; flex-direction: column; font-family: var(--mono); font-size: 13px; }
.claims div {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.claims div:last-child { border-bottom: 1px solid var(--rule); }
.claims span:first-child { color: var(--mute); }

/* hanging list inside a claims value */
.plain { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }

.more { font-family: var(--mono); font-size: 12.5px; color: var(--bronze); }

/* ---------- key/value prose rows ---------- */

.kv { padding: 0 var(--gutter); border-bottom: 1px solid var(--rule); }
.kv > div {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.kv > div:last-child { border-bottom: 0; }
.kv-key { font-family: var(--mono); font-size: 13px; color: var(--mute); }
.kv-val { color: var(--body); line-height: 1.62; max-width: 64ch; }

/* ---------- app page ---------- */

.app-hero { display: grid; grid-template-columns: 1.1fr 1fr; border-bottom: 1px solid var(--rule); }
.app-hero-text {
  padding: 96px var(--gutter) 88px;
  border-inline-end: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.app-hero-text h1 { font-size: clamp(38px, 5vw, 64px); }
h1.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; }
h1.serif.caps { text-transform: uppercase; letter-spacing: 0.04em; }

/* app lockup: gold ring mark over the app's serif wordmark */
/* Astraia lockup — per the supplied lockup spec.
   Mark: logo-gold.svg, aspect 1:1.1834, fill #C5A059, rendered 120→172px.
   Wordmark: Cinzel 400, all caps, tracking 0.34em, leading 1.0, #FFFFFF.
     Shipped as a trimmed PNG (cropped to the cap line) because the site
     loads no webfonts — Cinzel is a Google font and requesting it would
     falsify the privacy claim. Regenerate from astraia-wordmark-source.dc.html.
   Relationship: wordmark width = 1.209x mark width, vertical gap 30→48px
     (mark's lower edge to the wordmark's cap line), centred shared axis.
   Ground: #141414 — the only value the lockup has been drawn on. */
.app-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(30px, 4vw, 48px);
  width: clamp(145px, 21vw, 208px);
}
.app-lockup .mark { width: 82.7%; height: auto; display: block; }
.app-lockup .wordmark { width: 100%; height: auto; display: block; }
.app-hero-text p { margin: 0; font-size: 19px; line-height: 1.55; color: var(--body); max-width: 40ch; }

.app-mark { display: flex; align-items: center; justify-content: center; padding: 64px; }
.app-mark--dark { background: #141414; }
/* Documented exception to rule 3: the Meaningful Life lockup is drawn on
   pure white, not the site's paper. */
.app-mark--paper { background: #fff; }
.app-mark img, .app-mark svg { width: 56%; height: auto; display: block; }

.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.btn {
  border: 1px solid var(--ink);
  padding: 13px 22px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
.btn:hover { background: var(--panel); color: var(--ink); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--body); color: var(--paper); }

.fineprint { font-family: var(--mono); font-size: 12px; color: var(--mute); line-height: 1.9; margin-top: 8px; }

.shots { padding: 64px var(--gutter); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 22px; }
.shots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* real screenshots */
.shots-grid--real { grid-template-columns: repeat(5, 1fr); gap: 18px; align-items: start; }
.screen { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.screen img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }
.screen figcaption { font-family: var(--mono); font-size: 11px; color: var(--mute); }

/* /screens toggle — one set shows at a time; the bronze switch points at the
   other, set in the same plain text as the app navigators in the bar. */
.shots-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.shots-toggle {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--bronze);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.shots-grid--phones { grid-template-columns: repeat(6, 1fr); gap: 18px; align-items: start; }

/* affiliate / commission disclosure — must stay visible wherever products appear */
.disclosure {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--mute);
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  max-width: 78ch;
}

.linkout { font-family: var(--mono); font-size: 12.5px; color: var(--bronze); }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 26px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
}
.foot-l { color: var(--disabled); }
.foot-c { display: flex; justify-content: center; gap: 16px; }
.foot-c span { color: var(--disabled); }
.foot-r { display: flex; justify-content: flex-end; gap: 26px; }
.foot-r a { color: var(--mute); }

/* Utilities applied inside .split / .item / .app-hero-text must outrank those
   blocks' descendant `p` rules (0,1,1), which otherwise win on specificity. */
.hero p.eyebrow { color: var(--bronze); font-size: 12.5px; line-height: 1.6; }
.hero p.pathlabel { color: var(--mute); font-size: 12px; line-height: 1.6; }
.split p.eyebrow { color: var(--bronze); font-size: 12.5px; line-height: 1.6; }
.item p.idea-gloss { color: var(--bronze); font-size: 12.5px; }
.app-hero-text p.fineprint { color: var(--mute); font-size: 12px; line-height: 1.9; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  /* The header wraps here, so the nav sits on its own row. Let it fill that
     row and push the divider and the language control to the far end, so the
     trigger lands on the gutter like everything else on the page. */
  .nav { width: 100%; }
  .nav-sep { margin-inline-start: auto; }

  /* Anchor the menu to the header rather than the trigger, and pull it out by
     its own padding so the option labels share a right edge with the trigger
     above them rather than sitting inboard of it. */
  .site-header { position: relative; }
  .lang { position: static; }

  .lang-menu {
    top: calc(100% + 10px);
    inset-inline-end: calc(var(--gutter) - 16px);
    padding: 14px 16px 16px;
  }
  /* A phone menu overlaps text down its whole length rather than just at the
     foot, so here the same wash runs across instead of down: solid at the
     right edge, gone by the left. */
  .lang-menu::before {
    inset: 0;
    background: linear-gradient(
      to var(--wash-away),
      rgba(244, 245, 246, 0.80) 0%,
      rgba(244, 245, 246, 0.68) 42%,
      rgba(244, 245, 246, 0.34) 76%,
      rgba(244, 245, 246, 0) 100%
    );
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-mask-image: linear-gradient(to var(--wash-away), #000 0%, #000 42%, rgba(0, 0, 0, 0.4) 76%, transparent 100%);
    mask-image: linear-gradient(to var(--wash-away), #000 0%, #000 42%, rgba(0, 0, 0, 0.4) 76%, transparent 100%);
  }

  /* Side by side they crowd the wrapped breadcrumb, so they stack — the slash
     ending the upper line, the lower one stepped in, echoing how
     "/applications / meaningful-life" already breaks just to their left. */
  .app-nav { flex-direction: column; align-items: flex-end; gap: 3px; }
  .app-nav-next { margin-inline-end: 16px; }

  :root { --gutter: 24px; }

  .site-header { flex-wrap: wrap; gap: 16px; }
  .lockup-tag { display: none; }

  .hero { padding: 72px var(--gutter) 56px; }
  .hero--page { padding: 64px var(--gutter) 48px; }

  .row { grid-template-columns: 32px 1fr; gap: 6px 16px; padding: 24px 0; }
  .row-desc, .row-plat { grid-column: 2; }
  .row-go { grid-column: 2; text-align: start; }
  [dir="rtl"] .row-go { text-align: right; }

  .row--pair { grid-template-columns: 1fr; }
  .row--pair .row-desc,
  .row--pair .row-plat,
  .row--pair .row-go { grid-column: 1; }

  .grid3 { grid-template-columns: 1fr; gap: 40px; padding: 56px var(--gutter); }
  .grid3--tiled { gap: 1px; padding: 0; }
  .grid3--tiled > * { padding: 40px var(--gutter); }

  .split, .app-hero { grid-template-columns: 1fr; }
  .split > *, .app-hero-text { padding: 48px var(--gutter); border-inline-end: 0; }
  .split > *:first-child { border-bottom: 1px solid var(--rule); }

  .claims div, .kv > div { grid-template-columns: 1fr; gap: 8px; }
  .shots-grid { grid-template-columns: 1fr; }
  .shots-grid--real { grid-template-columns: 1fr 1fr; gap: 14px; }
  .shots-grid--phones { grid-template-columns: 1fr 1fr; gap: 14px; }

  .site-footer { grid-template-columns: 1fr; text-align: start; gap: 14px; }
  .foot-c, .foot-r { justify-content: flex-start; }
  .foot-r { flex-wrap: wrap; }
}