/* Yvex, yvex.app. Pocket reference card: two inks on yellow stock, folded once. */
@font-face{font-family:'Fragment Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/fragment-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fragment Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/fragment-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sofia Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/sofia-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sofia Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/sofia-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sofia Sans Extra Condensed';font-style:normal;font-weight:700 900;font-display:swap;src:url(/fonts/sofia-sans-extra-condensed-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sofia Sans Extra Condensed';font-style:normal;font-weight:700 900;font-display:swap;src:url(/fonts/sofia-sans-extra-condensed-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  --stock: #F2CF4A;
  --ink: #16130C;
  --ink-2: #4A3F22;
  --spot: #2236B0;
  --band: #16130C;
  --band-ink: #F2CF4A;
  --screen: #16130C;
  --screen-ink: #F2CF4A;
  --screen-dim: #B39A45;
  --table: #24221C;
  --mark: #8C8366;
  --rule: rgba(22, 19, 12, .9);
  --hair: rgba(22, 19, 12, .32);
  --dot: rgba(22, 19, 12, .16);
  --sel: #16130C;
  --sel-ink: #F2CF4A;

  --f-text: 'Sofia Sans', ui-sans-serif, system-ui, sans-serif;
  --f-cond: 'Sofia Sans Extra Condensed', 'Sofia Sans', ui-sans-serif, sans-serif;
  --f-mono: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: clamp(1.25rem, 4.6vw, 2.75rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

html[data-theme="dark"] {
  --stock: #17150F;
  --ink: #EEE7D2;
  --ink-2: #ABA28A;
  --spot: #A9B6FF;
  --band: #F2CF4A;
  --band-ink: #16130C;
  --screen: #0A0907;
  --screen-ink: #F2CF4A;
  --screen-dim: #A08A3E;
  --table: #0B0A08;
  --mark: #5E584A;
  --rule: rgba(238, 231, 210, .85);
  --hair: rgba(238, 231, 210, .26);
  --dot: rgba(242, 207, 74, .14);
  --sel: #F2CF4A;
  --sel-ink: #16130C;
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--table);
  scrollbar-color: var(--ink-2) var(--stock);
}

body {
  margin: 0;
  background: var(--table);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--f-text);
  font-feature-settings: "kern", "liga";
  overflow-wrap: break-word;
}

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

a {
  color: var(--spot);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .18em;
}
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible {
  outline: 3px solid var(--spot);
  outline-offset: 3px;
  border-radius: 2px;
}

code, kbd, samp, .mono { font-family: var(--f-mono); font-size: .88em; }
code { white-space: nowrap; }

/* language and theme switching */
html[data-lang="de"] [data-l="en"],
html:not([data-lang="de"]) [data-l="de"] { display: none !important; }

.skip {
  position: absolute; left: .75rem; top: -4rem;
  background: var(--ink); color: var(--stock);
  padding: .5rem .75rem; z-index: 10; text-decoration: none;
}
.skip:focus { top: .75rem; }

/* ---------- the card ---------- */
.card {
  position: relative;
  background: var(--stock);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  body { padding: 3.25rem 2rem 4rem; }
  .card {
    box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 22px 50px -18px rgba(0,0,0,.6);
  }
  /* printer's fold marks above and below the crease */
  .card::before, .card::after {
    content: ""; position: absolute; left: 50%; width: 1px; height: 1.6rem;
    background: var(--mark); transform: translateX(-.5px);
  }
  .card::before { top: -2.4rem; }
  .card::after { bottom: -2.4rem; }
}

/* top strip */
.strip {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--pad);
  border-bottom: 1.5px solid var(--rule);
  font: 400 .8125rem/1 var(--f-mono);
  color: var(--ink);
}
.strip .home { color: inherit; text-decoration: none; letter-spacing: .02em; }
.controls { display: flex; align-items: center; gap: .5rem; }

.seg {
  display: inline-flex; border: 1.5px solid var(--ink); border-radius: 3px;
}
.seg button:focus-visible, .iconbtn:focus-visible { outline: 3px solid currentColor; outline-offset: -6px; }
.seg button, .iconbtn {
  appearance: none; border: 0; margin: 0; background: transparent; color: var(--ink);
  font: 400 .875rem/1 var(--f-mono); padding: .55rem .8rem; min-height: 2.75rem; min-width: 2.75rem; cursor: pointer;
}
.seg button + button { border-left: 1.5px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--stock); }
.seg button:hover:not([aria-pressed="true"]) { background: var(--dot); }
.iconbtn {
  border: 1.5px solid var(--ink); border-radius: 3px; display: inline-grid; place-items: center;
  width: 2.75rem; padding: 0;
}
.iconbtn:hover { background: var(--dot); }
.iconbtn svg { width: 1.05rem; height: 1.05rem; }
.iconbtn .moon { display: none; }
html[data-theme="dark"] .iconbtn .sun { display: none; }
html[data-theme="dark"] .iconbtn .moon { display: block; }

/* ---------- spreads: one panel closed, two panels open ---------- */
.spread { display: grid; grid-template-columns: minmax(0, 1fr); }
.panel { padding: calc(var(--pad) * 1.15) var(--pad); min-width: 0; }
.spread + .spread { border-top: 1.5px solid var(--rule); }
.panel + .panel { border-top: 1px dashed var(--hair); }

@media (min-width: 760px) {
  .spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .panel + .panel { border-top: 0; }
  .card { background-image: linear-gradient(var(--hair), var(--hair)); background-size: 1px 100%; background-repeat: no-repeat; background-position: 50% 0; }
  .spread .panel:first-child { padding-right: calc(var(--pad) * 1.1); }
  .spread .panel:last-child { padding-left: calc(var(--pad) * 1.1); }
}

/* panel heads: reversed out of a solid ink band */
.head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin: 0 0 1.1rem;
  background: var(--band); color: var(--band-ink);
  padding: .42rem .7rem .36rem;
}
.head h2 {
  margin: 0;
  font: 800 1.5rem/1.05 var(--f-cond);
  text-transform: uppercase; letter-spacing: .035em;
  text-wrap: balance;
}
.tag {
  flex: none;
  font: 700 .9rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .45rem .22rem; border: 1.5px solid currentColor; border-radius: 2px;
}
.tag.today { background: var(--band-ink); color: var(--band); border-color: var(--band-ink); }

.panel p { margin: 0 0 .9rem; max-width: 62ch; }
.panel p:last-child { margin-bottom: 0; }
.lede { font-size: 1.125rem; }
.small { font-size: .9375rem; color: var(--ink-2); }

/* ---------- cover ---------- */
.cover { position: relative; container-type: inline-size; }
.wordmark {
  margin: 0; line-height: .78;
  font: 900 min(60cqi, 20rem)/.8 var(--f-cond);
  padding-bottom: .2em;
  letter-spacing: -.02em;
  color: var(--ink);
}
.stamp {
  display: inline-block;
  margin: .35rem 0 0;
  font: 800 1.05rem/1 var(--f-cond); letter-spacing: .09em; text-transform: uppercase;
  color: var(--spot);
  border: 2.5px solid var(--spot); border-radius: 4px;
  padding: .42rem .6rem .34rem;
  transform: rotate(-3.5deg); transform-origin: left center;
}
.hook {
  margin: 1.4rem 0 1rem;
  font: 700 clamp(1.45rem, 5.6vw, 2.05rem)/1.14 var(--f-text);
  letter-spacing: -.012em;
  max-width: 22ch; text-wrap: balance;
}
.status-line {
  display: flex; gap: .55rem; align-items: baseline;
  border-top: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule);
  padding: .65rem 0; margin: 1.35rem 0 1.4rem;
  font-size: .9688rem;
}
.status-line b { font: 800 1rem/1.3 var(--f-cond); text-transform: uppercase; letter-spacing: .06em; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.9rem; padding: .7rem 1.05rem;
  font: 700 1rem/1 var(--f-text);
  text-decoration: none; border-radius: 3px;
  border: 2px solid var(--ink);
  transition: transform .15s var(--ease-out), background-color .15s;
}
.btn svg { width: 1rem; height: 1rem; flex: none; }
.btn.primary { background: var(--ink); color: var(--stock); }
.btn.primary:hover { transform: translateY(-1px); }
.btn.ghost { color: var(--ink); }
.btn.ghost:hover { background: var(--dot); }
.btn:active { transform: translateY(1px); }

/* ---------- the fold preview ---------- */
.demo { margin: 0; }
.demo .head { margin-bottom: .55rem; }
.demo-note { margin: 0 0 1rem; font-size: .9375rem; color: var(--ink-2); }
.demo-seg { margin: 0 0 1.1rem; }
.demo-seg button { font: 700 1rem/1 var(--f-text); padding-inline: 1rem; }

.device-wrap { container-type: inline-size; }
.device {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  perspective: 1400px;
}
.half {
  position: relative;
  border: 2px solid var(--ink);
  background: var(--stock);
  padding: 7px;
  min-width: 0;
  transition: transform .8s var(--ease-out), border-radius .8s var(--ease-out);
}
.half.a { border-radius: 16px; transform: translateX(50%); z-index: 1; }
.device[data-state="open"] .half.a { transform: none; border-radius: 16px 0 0 16px; border-right-width: 1px; }
.half.b {
  border-radius: 0 16px 16px 0; border-left-width: 1px;
  transform-origin: left center;
  transform: translateX(-50%) rotateY(-92deg);
  opacity: 0;
  transition: transform .8s var(--ease-out), opacity .25s linear .1s, visibility 0s .8s;
  visibility: hidden;
}
.device[data-state="open"] .half.b {
  transform: none; opacity: 1; visibility: visible;
  transition: transform .8s var(--ease-out), opacity .2s linear, visibility 0s;
}

.screen {
  background: var(--screen); color: var(--screen-ink);
  border-radius: 9px;
  aspect-ratio: 9 / 15;
  padding: 10px 6px;
  font: 400 clamp(10px, 2.6cqi, 13.5px)/1.5 var(--f-mono);
}
.device[data-state="open"] .half.a .screen { border-radius: 9px 0 0 9px; }
.half.b .screen { border-radius: 0 9px 9px 0; }
.screen .tab {
  display: block; color: var(--screen-dim);
  border-bottom: 1px solid var(--screen-dim);
  padding-bottom: .35em; margin-bottom: .7em;
}
.screen pre { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: break-word; }
.screen .ln { display: block; min-height: 1.5em; }
.screen .t-cmd { white-space: pre-wrap; }
.screen .dim { color: var(--screen-dim); }
.cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--screen-ink); }
.device.typing .half.a .ln:not(.on) { visibility: hidden; }
.device.typing .cursor { animation: blink 1.1s steps(1) 6; }
@keyframes blink { 50% { opacity: 0; } }

.crease-note {
  margin: 1rem 0 0; min-height: 1.5em;
  font: 700 1rem/1.3 var(--f-cond); text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; gap: .6rem; justify-content: center;
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s linear, transform .5s var(--ease-out);
}
.crease-note::before { content: ""; width: 1.6rem; height: 2px; background: var(--ink); }
.demo.is-open .crease-note { opacity: 1; transform: none; transition-delay: .5s; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- reference lists with dot leaders ---------- */
.ref-cap, .label-cap {
  max-width: none !important;
  margin: 1.3rem 0 0 !important; padding-bottom: .45rem; border-bottom: 2px solid var(--rule);
  font: 700 1rem/1 var(--f-cond); text-transform: uppercase; letter-spacing: .06em;
}
.ref { margin: 0 0 1rem; font-size: .9688rem; }
.ref > div {
  display: flex; align-items: baseline; gap: .45rem;
  padding: .5rem 0; border-bottom: 1px solid var(--hair);
}
.ref dt { flex: none; white-space: nowrap; }
.ref dt code, .ref dt kbd { font-size: .9rem; }
.ref > div::after { content: none; }
.ref dt::after { content: none; }
.ref .lead { flex: 1 1 1.25rem; min-width: 1.25rem; border-bottom: 2px dotted var(--ink); transform: translateY(-.28em); opacity: .55; }
.ref dd { margin: 0; flex: 0 1 auto; text-align: right; max-width: 68%; }
.ref.wide dd { max-width: 74%; }
kbd { font-size: .9rem; white-space: nowrap; }
.ref td { color: var(--ink); }
kbd {
  display: inline-block; border: 1.5px solid var(--ink); border-radius: 3px;
  padding: .1rem .35rem .05rem; line-height: 1.3; min-width: 1.6em; text-align: center;
}

/* ---------- posture diagrams ---------- */
.postures { list-style: none; margin: 1.25rem 0 1.1rem; padding: 0; display: grid; gap: 1.1rem; }
.postures li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.postures svg { width: 100%; height: auto; color: var(--ink); }
.postures b { display: block; font: 800 1.15rem/1.1 var(--f-cond); text-transform: uppercase; letter-spacing: .035em; margin-bottom: .2rem; }
.postures span { display: block; font-size: .9688rem; }
.halftone {
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.3px);
  background-size: 6px 6px;
  padding: .85rem 1rem; border: 1.5px solid var(--rule);
}

/* ---------- status ---------- */
.today-box { border: 2px solid var(--ink); padding: .9rem 1rem; margin-bottom: 1.3rem; }
.today-box p { margin: 0; }
.today-box p + p { margin-top: .5rem; }
.steps { list-style: none; counter-reset: s; margin: 0 0 1.1rem; padding: 0; }
.steps li {
  counter-increment: s;
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .25rem .6rem;
  padding: .7rem 0; border-bottom: 1px solid var(--hair);
}
.steps li:first-child { border-top: 1.5px solid var(--rule); }
.steps li::before {
  content: counter(s); font: 400 .875rem/1.75 var(--f-mono); color: var(--spot);
  border: 1.5px solid var(--spot); border-radius: 50%; width: 1.75rem; height: 1.75rem; text-align: center;
}
.steps b { display: block; font-weight: 700; }
.steps div > span { display: block; font-size: .9375rem; color: var(--ink-2); }
.steps li.now::before { background: var(--spot); color: var(--stock); }
.now-tag { font: 700 .85rem/1 var(--f-cond); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--spot); border: 1.5px solid var(--spot); border-radius: 2px; padding: .18rem .35rem .1rem; margin-left: .35rem; vertical-align: .1em; }

/* ---------- origin and name ---------- */
.links { list-style: none; margin: 1rem 0 1.1rem; padding: 0; border-top: 1.5px solid var(--rule); }
.links li { border-bottom: 1px solid var(--hair); }
.links a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .7rem 0; text-decoration: none; color: var(--ink);
}
.links a span:first-child { font-weight: 700; }
.links a .mono { color: var(--spot); font-size: .8125rem; }
.links a:hover .mono { text-decoration: underline; }
.name { margin-top: 2rem; }
.name-line { display: flex; gap: .9rem; align-items: baseline; margin: 0; }
.name-line .nm { flex: none; font: 900 2.8rem/1 var(--f-cond); letter-spacing: -.01em; }
.name-line b { font-weight: 800; }

/* ---------- footer ---------- */
footer.foot {
  border-top: 1.5px solid var(--rule);
  padding: 1.25rem var(--pad) 1.5rem;
  display: grid; gap: .6rem;
  font-size: .875rem; color: var(--ink-2);
}
footer.foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .9375rem; }
footer.foot nav a { color: var(--ink); }
footer.foot p { margin: 0; max-width: 80ch; }

/* ---------- legal pages ---------- */
.legal { padding: calc(var(--pad) * 1.15) var(--pad) calc(var(--pad) * 1.5); max-width: 46rem; }
.legal h1 { font: 900 clamp(2.6rem, 11vw, 4rem)/.9 var(--f-cond); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 1.5rem; }
.legal h2 { font: 800 1.3rem/1.15 var(--f-cond); text-transform: uppercase; letter-spacing: .035em; margin: 2rem 0 .6rem; padding-top: .8rem; border-top: 1.5px solid var(--rule); }
.legal p, .legal li { max-width: 66ch; }
.legal p { margin: 0 0 .8rem; }
.legal ul { padding-left: 1.2rem; margin: 0 0 .9rem; }
.legal address { font-style: normal; margin: 0 0 .9rem; }
.legal .back { display: inline-block; margin-bottom: 1.4rem; font-weight: 700; }

@media (min-width: 760px) {
  .legal-card { background-image: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}

@media print {
  body { background: #fff; padding: 0; }
  .card { box-shadow: none; }
  .controls, .demo-seg { display: none; }
}

/* additions */
.postures .inv { stroke: var(--stock); stroke-width: 2; }
.links a .ext { width: .95rem; height: .95rem; color: var(--spot); flex: none; margin-left: -.6rem; }
.links a > span:nth-child(2) { margin-left: auto; }
.wordmark { color: var(--wm, var(--ink)); }
html[data-theme="dark"] { --wm: #F2CF4A; }

/* phone: the card is the page; safe areas in landscape */
@media (max-width: 899px) { html, body { background: var(--stock); } }
.strip, .panel, footer.foot, .legal {
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
}
@media (min-width: 760px) {
  .spread .panel:first-child { padding-right: calc(var(--pad) * 1.1); }
  .spread .panel:last-child { padding-left: calc(var(--pad) * 1.1); }
  .strip, footer.foot { background-color: var(--stock); position: relative; }
}