/* Olnesta Ltd — editorial site styles
 * Single shared stylesheet for home, practice, about.
 * Legal pages (/privacy, /terms, /support) keep their own inline CSS.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..700,0..100;1,9..144,300..700,0..100&family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --paper:       #f6f1e6;
    --paper-soft:  #ede6d3;
    --paper-card:  #fbf7ec;
    --ink:         #1d1a13;
    --ink-soft:    #6a6356;
    --ink-muted:   #9b9485;
    --rule:        #d8cfb8;
    --rule-soft:   #e6decc;
    --accent:      #8a4a32;
    --accent-soft: #b9745b;
    --highlight:   #e8d4ad;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper:       #14110c;
        --paper-soft:  #1c1812;
        --paper-card:  #1d1913;
        --ink:         #ece5d3;
        --ink-soft:    #908976;
        --ink-muted:   #5e574b;
        --rule:        #2b2620;
        --rule-soft:   #221e18;
        --accent:      #d8927a;
        --accent-soft: #a86a51;
        --highlight:   #3a2f1f;
    }
}

* { box-sizing: border-box; }
*::selection { background: var(--highlight); color: var(--ink); }

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

body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Newsreader', 'Iowan Old Style', 'Charter', Georgia, serif;
    font-variation-settings: 'opsz' 18;
    font-size: 18px;
    line-height: 1.62;
    font-feature-settings: 'kern', 'liga', 'onum';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* faint paper grain — subtle, only visible at close inspection */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.035;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
    mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
    body::before { mix-blend-mode: screen; opacity: 0.06; }
}

/* ───────────────────────────────────────────── masthead */

.masthead {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 40px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
}

.masthead .wordmark {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 400;
    font-size: 22px;
    letter-spacing: -0.005em;
    color: var(--ink);
    text-decoration: none;
    line-height: 1;
}

.masthead .wordmark em {
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 400;
}

.masthead nav {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    display: flex;
    gap: 26px;
}

.masthead nav a {
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 180ms ease;
}

.masthead nav a:hover,
.masthead nav a[aria-current="page"] {
    color: var(--accent);
}

@media (max-width: 640px) {
    .masthead { padding: 22px 22px 0; flex-wrap: wrap; }
    .masthead nav { gap: 18px; font-size: 10px; }
}

/* ───────────────────────────────────────────── containers */

main {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    padding: 80px 40px 96px;
}

main.wide { max-width: 880px; }

@media (max-width: 640px) {
    main { padding: 48px 24px 64px; }
}

/* ───────────────────────────────────────────── typography */

h1, h2, h3 {
    font-family: 'Fraunces', 'Iowan Old Style', Palatino, serif;
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
}

.hero-title {
    font-variation-settings: 'opsz' 144, 'SOFT' 40, 'wght' 380;
    font-size: clamp(54px, 9.5vw, 104px);
    line-height: 0.96;
    letter-spacing: -0.025em;
    margin: 0 0 28px;
    color: var(--ink);
}

.hero-title em {
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 380;
    color: var(--accent);
}

.page-title {
    font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 380;
    font-size: clamp(42px, 6.4vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.022em;
    margin: 0 0 20px;
}

.page-title em {
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 380;
}

h2 {
    font-variation-settings: 'opsz' 60, 'wght' 420;
    font-size: clamp(26px, 3.4vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.012em;
    margin: 0 0 14px;
}

h3 {
    font-variation-settings: 'opsz' 36, 'wght' 500;
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 8px;
}

p {
    margin: 0 0 18px;
    color: var(--ink);
    hyphens: auto;
}

p.deck {
    font-size: clamp(20px, 2.6vw, 24px);
    line-height: 1.4;
    color: var(--ink-soft);
    font-variation-settings: 'opsz' 28;
    margin-bottom: 36px;
    max-width: 32ch;
    text-wrap: balance;
}

p.lede {
    font-size: 21px;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 24px;
}

.drop p:first-of-type::first-letter {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 380;
    float: left;
    font-size: 4.6em;
    line-height: 0.86;
    padding: 0.08em 0.12em 0 0;
    margin-right: 0.04em;
    color: var(--accent);
}

a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--rule);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-color 200ms ease, color 200ms ease;
}

a:hover {
    text-decoration-color: var(--accent);
    color: var(--accent);
}

em { font-style: italic; }
strong { font-weight: 500; }

.tabular { font-variant-numeric: tabular-nums; }

/* ───────────────────────────────────────────── sections */

.section {
    margin: 80px 0 0;
}

.section-rule {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 36px;
}

.section-rule::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--rule);
    transform: translateY(-3px);
}

.section-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--accent);
    text-transform: uppercase;
    white-space: nowrap;
}

.section-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
    text-transform: uppercase;
    white-space: nowrap;
}

.section-heading {
    margin-bottom: 24px;
}

/* ───────────────────────────────────────────── practice cards */

.practice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 8px;
}

.practice-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 32px;
    padding: 36px 0;
    border-top: 1px solid var(--rule);
    align-items: start;
}

.practice-item:last-child {
    border-bottom: 1px solid var(--rule);
}

.practice-illo {
    width: 110px;
    height: 110px;
    display: block;
    object-fit: contain;
    margin-top: -8px;
}

@media (prefers-color-scheme: dark) {
    .practice-illo { filter: brightness(1.08) saturate(0.92); }
}

.practice-roman {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 350;
    font-style: italic;
    font-size: 44px;
    line-height: 1;
    color: var(--accent);
    padding-top: 4px;
}

.practice-body .practice-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 6px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.practice-body .practice-tag .roman {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

.practice-body h3 {
    font-variation-settings: 'opsz' 60, 'wght' 480;
    font-size: 24px;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.practice-body p {
    color: var(--ink-soft);
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .practice-item { grid-template-columns: 72px 1fr; gap: 18px; padding: 26px 0; }
    .practice-illo { width: 72px; height: 72px; }
    .practice-body h3 { font-size: 21px; }
}

/* ───────────────────────────────────────────── practice deep page */

.practice-deep {
    padding: 72px 0 8px;
    border-top: 1px solid var(--rule);
    position: relative;
}

.practice-deep:first-of-type { border-top: none; padding-top: 32px; }

.practice-deep-header {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 40px;
    align-items: start;
    margin-bottom: 28px;
}

.practice-deep-text { min-width: 0; }

.practice-deep-illo {
    width: 200px;
    height: 200px;
    object-fit: contain;
    justify-self: end;
    margin-top: -16px;
}

@media (prefers-color-scheme: dark) {
    .practice-deep-illo { filter: brightness(1.08) saturate(0.92); }
}

@media (max-width: 720px) {
    .practice-deep-header { grid-template-columns: 1fr; gap: 8px; }
    .practice-deep-illo { width: 96px; height: 96px; justify-self: start; order: -1; margin-top: 0; margin-bottom: 4px; }
}

.practice-deep .practice-roman {
    font-size: 64px;
    padding-top: 0;
    display: block;
    margin-bottom: 14px;
}

.practice-deep h2 {
    margin-bottom: 8px;
}

.practice-deep .subtitle {
    font-style: italic;
    font-variation-settings: 'opsz' 28, 'SOFT' 80, 'wght' 380;
    font-family: 'Fraunces', serif;
    color: var(--ink-soft);
    font-size: 22px;
    margin: 0 0 0;
    line-height: 1.3;
}

.practice-deep .prose {
    margin-top: 4px;
}

.practice-deep .prose p {
    color: var(--ink);
    margin-bottom: 16px;
}

.feature-list,
.refusal-list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.feature-list li,
.refusal-list li {
    position: relative;
    padding: 4px 0 4px 22px;
    color: var(--ink);
    line-height: 1.5;
}

.feature-list li::before {
    content: '+';
    position: absolute;
    left: 0;
    top: 4px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent);
    font-weight: 500;
}

.refusal-list li::before {
    content: '−';
    position: absolute;
    left: 0;
    top: 4px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--ink-muted);
    font-weight: 500;
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 18px;
}

.two-col .col-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 6px;
}

@media (max-width: 640px) {
    .two-col { grid-template-columns: 1fr; gap: 14px; }
    .practice-deep { padding-top: 48px; }
    .practice-deep:first-of-type { padding-top: 20px; }
    .practice-deep .practice-roman { font-size: 38px; margin-bottom: 8px; }
    .practice-deep .subtitle { font-size: 18px; }
    .practice-deep h2 { font-size: 26px; }
}

/* ───────────────────────────────────────────── detailed features list */

.features-block {
    margin-top: 36px;
}

.features-block .features-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 4px;
}

.features-block h4 {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 36, 'wght' 480;
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 14px;
    color: var(--ink);
}

.feature-list-detailed {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}

.feature-list-detailed li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    padding: 16px 0;
    border-top: 1px solid var(--rule-soft);
    align-items: baseline;
}

.feature-list-detailed li::before {
    content: '+';
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
}

.feature-list-detailed strong {
    display: block;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 28, 'wght' 500;
    font-size: 18px;
    color: var(--ink);
    margin-bottom: 4px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

.feature-list-detailed .feat-desc {
    display: block;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.55;
}

.refusals-line {
    margin-top: 26px;
    padding: 18px 0 4px;
    border-top: 1px solid var(--rule-soft);
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.55;
}

.refusals-line .refusals-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 4px;
    display: block;
}

.refusals-line em {
    color: var(--ink);
    font-style: italic;
}

/* ───────────────────────────────────────────── contact grid */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 12px;
}

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

.contact-card {
    padding: 22px 0 0;
    border-top: 1px solid var(--rule);
}

.contact-card .label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 8px;
}

.contact-card .email {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 32, 'wght' 400;
    font-size: 19px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
}

.contact-card .email:hover {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

.contact-card .descriptor {
    font-size: 14px;
    color: var(--ink-soft);
    margin: 8px 0 0;
}

/* ───────────────────────────────────────────── colophon (footer) */

.colophon {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--rule);
    background: var(--paper-soft);
    margin-top: 96px;
}

.colophon-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 56px 40px 48px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.colophon h4 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 500;
    margin: 0 0 14px;
}

.colophon .mark {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 380;
    font-size: 28px;
    line-height: 1;
    margin-bottom: 14px;
    color: var(--ink);
    display: inline-block;
    text-decoration: none;
}

.colophon .mark em {
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 380;
}

.colophon p {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 6px;
}

.colophon a {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 180ms ease, color 180ms ease;
}

.colophon a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.colophon ul { list-style: none; padding: 0; margin: 0; }
.colophon li { font-size: 15px; line-height: 1.9; color: var(--ink-soft); }

.colophon-baseline {
    border-top: 1px solid var(--rule);
    max-width: 1120px;
    margin: 0 auto;
    padding: 22px 40px 32px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .colophon-inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px 32px; }
    .colophon-baseline { padding: 22px 24px 28px; flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ───────────────────────────────────────────── hero block */

.hero {
    padding-top: 24px;
    padding-bottom: 0;
}

.hero.has-art {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 48px;
    align-items: start;
}

.hero .hero-text { min-width: 0; }

.hero-illo {
    width: 240px;
    height: 240px;
    margin-top: 8px;
    align-self: start;
    justify-self: end;
}

.hero-illo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (prefers-color-scheme: dark) {
    .hero-illo img { filter: brightness(1.08) saturate(0.92); }
}

@media (max-width: 720px) {
    .hero.has-art { grid-template-columns: 1fr; gap: 8px; }
    .hero-illo { order: -1; width: 128px; height: 128px; justify-self: start; margin: 0 0 4px -6px; }
}

.hero .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero .eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--accent);
    display: inline-block;
}

/* ───────────────────────────────────────────── breadcrumb back link */

.back {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
}

.back:hover { color: var(--accent); }

/* ───────────────────────────────────────────── meta panel (about) */

.facts-panel {
    margin-top: 18px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 28px 0;
    display: grid;
    grid-template-columns: 160px 1fr;
    row-gap: 16px;
    column-gap: 28px;
    font-size: 16px;
}

.facts-panel dt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-top: 3px;
}

.facts-panel dd {
    margin: 0;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .facts-panel { grid-template-columns: 1fr; row-gap: 4px; column-gap: 0; }
    .facts-panel dt { padding-top: 14px; }
    .facts-panel dt:first-of-type { padding-top: 0; }
}

/* ───────────────────────────────────────────── pull / quote */

.pull {
    margin: 40px 0;
    padding: 28px 0 28px 28px;
    border-left: 2px solid var(--accent);
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 60, 'SOFT' 70, 'wght' 380;
    font-style: italic;
    font-size: 24px;
    line-height: 1.4;
    color: var(--ink);
    max-width: 32ch;
}

@media (max-width: 640px) {
    .pull { padding: 20px 0 20px 18px; font-size: 20px; margin: 28px 0; }
}

/* ───────────────────────────────────────────── spacing utilities */

.mt-md { margin-top: 28px; }
.mt-lg { margin-top: 48px; }

/* ───────────────────────────────────────────── print niceties */

@media print {
    body::before { display: none; }
    .masthead nav { display: none; }
    main { max-width: 100%; padding: 0; }
    .colophon { background: transparent; border-top: 1px solid #000; }
}