@import url('https://fonts.googleapis.com/css2?family=Anton&family=Instrument+Serif:ital@1&family=Space+Mono:wght@400;700&display=swap');

/* ---------------------------------------------------------------------------
   teineaju.ee
   Design system: Business-OS 01-identity/design-style.md v3.
   Paper is the ground, lavender leads, butter is the second voice.
   Ink is type, 3px rules and offset shadows. Never a background.
   --------------------------------------------------------------------------- */

:root{
  --paper:#F6EEE0;
  --card:#FFFBF2;
  --ink:#1F1A2E;
  --muted:#5C5470;
  --lav:#B5A1E5;
  --lav-soft:#E3DCF4;
  --lav-text:#594184;
  --butter:#FFD666;
  --butter-soft:#FAEFC7;
  --pink-soft:#F5BFD3;
  --rule:3px solid var(--ink);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:2rem}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.23em;text-decoration-thickness:1.5px}
a:hover{color:var(--lav-text)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--lav-text);outline-offset:5px}
p,h1,h2,h3,ul,ol,figure,blockquote{margin:0}
p+p{margin-top:1rem}
p,li,a{overflow-wrap:break-word}
section[id],h2[id],h3[id]{scroll-margin-top:2rem}
.wrap{width:min(100% - 3rem,1160px);margin-inline:auto}

/* ---------- type registers ---------- */
/* Anton in Estonian sits at 1.02 leading, never tighter: the dots on
   Ä/Ö/Õ/Ü crash into the descenders of the line above at 0.92. */
.display{font-family:Anton,'Arial Narrow',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.04}
h1,h2,h3{line-height:1.18;text-wrap:balance}
h2{font-family:Anton,'Arial Narrow',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.06;font-size:clamp(1.7rem,3.4vw,2.9rem)}
h3{font-size:1.22rem}
.eyebrow,.mono{font-family:'Space Mono',monospace}
.eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.14em;line-height:1.6;text-transform:uppercase;margin-bottom:1.15rem}
.muted{color:var(--muted)}
.lead{font-size:clamp(1.125rem,1.8vw,1.3rem);line-height:1.6}
.prose{max-width:65ch}
.mark{background:var(--butter);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .13em}
.accent{color:var(--lav)}
.flourish{font-family:'Instrument Serif',Georgia,serif;font-style:italic;text-transform:none;letter-spacing:0}
.nb{white-space:nowrap}
.skip{position:absolute;left:1rem;top:-6rem;padding:1rem;background:var(--card);z-index:5}
.skip:focus{top:1rem}

/* ---------- masthead ---------- */
.site-header{border-bottom:var(--rule)}
.header-inner{display:flex;gap:1.2rem;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-block:1.05rem}
.brand{font-family:'Space Mono',monospace;font-size:.875rem;font-weight:700;text-decoration:none;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.brand span{color:var(--lav-text);margin-left:.4rem}
.site-nav{display:flex;align-items:center;flex-wrap:wrap;gap:1.3rem;font-size:.9375rem}
.site-nav a{text-decoration:none}
.site-nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--lav-text);text-decoration-thickness:3px}
/* border-radius lives here and nowhere else. */
.site-nav .nav-cta{font-family:'Space Mono',monospace;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.4rem .9rem;border:2px solid var(--ink);border-radius:999px;background:var(--butter);color:var(--ink)}
.site-nav .nav-cta:hover{background:var(--lav);color:var(--ink)}

/* ---------- buttons and links ---------- */
.btn{display:inline-block;font:700 clamp(.875rem,1.1vw,1rem)/1.45 'Space Mono',monospace;letter-spacing:.05em;text-transform:uppercase;background:var(--lav);border:var(--rule);box-shadow:6px 6px 0 var(--ink);padding:1.1rem 1.9rem;text-decoration:none;color:var(--ink);transition:transform .08s ease,box-shadow .08s ease;text-align:center;max-width:100%}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink);color:var(--ink)}
.btn:active{transform:translate(6px,6px);box-shadow:none}
.text-link{font-weight:650;text-decoration-color:var(--lav-text);text-decoration-thickness:3px}
.actions{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-top:1.9rem}

/* ---------- hero ---------- */
.hero{padding-block:4.2rem 4rem;border-bottom:var(--rule)}
.hero h1{font-family:Anton,'Arial Narrow',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.04;font-size:clamp(2.5rem,5.8vw,5rem);margin-bottom:2.4rem}
/* the second sentence starts on its own line, so a sentence end never sits alone at a line start */
.hero h1 .accent{display:block}
.hero .lead{max-width:34em}
.hero .lead strong{background:var(--butter);padding:0 .2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}


/* ---------- bands and section headings ---------- */
.band{border-bottom:var(--rule);padding-block:4rem}
.section-heading{margin-bottom:2.4rem}
.section-heading .eyebrow{margin-bottom:.9rem}
.section-heading h2{max-width:20ch}
.section-heading p{max-width:58ch;margin-top:1.1rem}
.section-tail{margin-top:1.9rem}

/* ---------- definition ---------- */
.definition{background:var(--lav-soft)}
.definition .definition-text{background:var(--card);border:var(--rule);box-shadow:8px 8px 0 var(--ink);padding:2rem 2.15rem;max-width:62ch;font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.45;font-weight:600}
.definition small{font-size:1rem}

/* ---------- ruled panels: ink shows through the 3px gaps ---------- */
.why-grid,.knowledge,.learning-loop,.read-grid,.compare{border:var(--rule);background:var(--ink);display:grid;gap:3px}
.why-grid>div,.knowledge>div,.learning-loop>div,.read-grid a,.compare-pair>div{background:var(--card)}

.why-grid{grid-template-columns:1fr 1fr;margin-top:2rem}
.why-grid>div{padding:1.6rem 1.7rem}
.why-grid h3{font-family:Anton,'Arial Narrow',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;font-size:1.3rem;line-height:1.1;margin-bottom:.8rem}
.why-grid .today{background:var(--butter-soft)}

.compare{gap:0}
.compare-pair{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--ink)}
.compare-pair+.compare-pair{border-top:3px solid var(--ink)}
.compare-pair>div{padding:1.5rem}
.compare-pair .before{color:var(--muted)}
.compare-pair .after{background:var(--butter-soft);font-weight:600}
.compare-label{font:700 .875rem/1.5 'Space Mono',monospace;display:block;margin-bottom:.5rem}
.compare-pair .before .compare-label::before{content:"\2717\00a0";color:var(--lav-text)}
.compare-pair .after .compare-label::before{content:"\2713\00a0"}
.compare-pair h3{font-size:1.05rem;margin-bottom:.5rem}

.learning-loop{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2rem}
.learning-loop>div{padding:1.6rem}
.learning-loop .number{display:inline-block;font:700 .9375rem 'Space Mono',monospace;background:var(--lav);border:2px solid var(--ink);padding:.3rem .55rem;margin-bottom:1rem}
.learning-loop h3{font-family:Anton,'Arial Narrow',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;font-size:1.2rem;line-height:1.1;margin-bottom:.8rem}
.learning-loop p{font-size:1rem}

.knowledge{grid-template-columns:1fr 1fr}
.knowledge>div{padding:1.4rem 1.6rem}
.knowledge h3{font-family:Anton,'Arial Narrow',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;font-size:1.15rem;line-height:1.1;margin-bottom:.5rem}
.knowledge p{font-size:1rem}

.read-grid{grid-template-columns:1fr 1fr}
.read-grid a:only-child{grid-column:1 / -1}
.read-grid a{display:flex;flex-direction:column;padding:1.9rem;text-decoration:none}
.read-grid a:hover{background:var(--lav-soft);color:var(--ink)}
.read-grid h3{font-family:Anton,'Arial Narrow',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;font-size:1.35rem;line-height:1.1;margin-bottom:.8rem}
.read-grid p{font-size:1rem}
.read-grid .text-link{display:inline-block;margin-top:auto;padding-top:1rem;align-self:flex-start}

/* ---------- who: cutout on the soft-pink panel, butter caption strip ---------- */
.who-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr);gap:0;border:var(--rule);background:var(--card)}
.portrait{background:var(--pink-soft);display:flex;flex-direction:column;border-right:var(--rule);justify-content:flex-end;min-width:0}
.portrait img{width:100%;max-height:430px;object-fit:contain;object-position:bottom;margin-top:1rem}
.portrait figcaption{font:700 .8125rem/1.55 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;background:var(--butter);border-top:var(--rule);padding:1rem 1.25rem}
.who-copy{padding:2.6rem}
.who-copy h2{margin-bottom:1.3rem;max-width:30ch;font-size:clamp(1.3rem,2.1vw,1.8rem);line-height:1.1}
.who-copy .text-link{display:inline-block;margin-top:1.5rem}
.proof{margin-top:1.6rem;padding-left:1.2rem;border-left:4px solid var(--lav-text)}
.proof p{font-size:1rem}

/* ---------- faq ---------- */
.faq-list{max-width:850px}
.faq-list details{border-top:3px solid var(--ink);padding-block:1.2rem}
.faq-list details:last-child{border-bottom:3px solid var(--ink)}
summary{font-weight:700;cursor:pointer;font-size:1.1rem;line-height:1.5;padding-right:.5rem}
details[open] summary{margin-bottom:.85rem}
details p{max-width:66ch}

/* ---------- closing cta ---------- */
.cta{background:var(--butter);text-align:center}
.cta h2{font-size:clamp(2.1rem,4.6vw,3.7rem);line-height:1.06;max-width:20ch;margin-inline:auto}
.cta p{max-width:58ch;margin:1.4rem auto 0}
.cta .btn{margin-top:2rem}

/* ---------- footer ---------- */
.site-footer{padding-block:1.8rem 2.4rem}
.footer-inner{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-family:'Space Mono',monospace;font-size:.8125rem;letter-spacing:.05em;color:var(--muted)}
.footer-inner nav{display:flex;gap:1.2rem;flex-wrap:wrap}

/* ---------- article pages ---------- */
/* Long-form headings stay sentence case in system sans: Anton is for the
   hero and the closing CTA, not for something you read for six minutes. */
.article-hero{padding-block:3rem 3.2rem;border-bottom:var(--rule)}
.breadcrumbs{font-size:.9375rem;color:var(--muted);margin-bottom:2rem}
.article-hero h1{font-family:Anton,'Arial Narrow',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.04;font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:20ch;margin-bottom:1.5rem}
.article-hero .lead{max-width:65ch}
.article-meta{font-size:.9375rem;color:var(--muted);margin-top:1.5rem}
.article-layout{display:grid;grid-template-columns:240px minmax(0,760px);gap:4rem;padding-block:3rem 4rem;justify-content:space-between}
.contents{font-size:.9375rem;align-self:start;position:sticky;top:2rem;border-top:var(--rule);padding-top:1.2rem}
.contents p{font-family:'Space Mono',monospace;font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.9rem}
.contents ol{padding-left:1.2rem}
.contents li+li{margin-top:.65rem}
.article-body{min-width:0}
.article-body>section+section{margin-top:3rem;padding-top:2.5rem;border-top:3px solid var(--ink)}
.article-body h2{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-weight:750;text-transform:none;letter-spacing:-.03em;line-height:1.18;font-size:clamp(1.6rem,2.8vw,2.2rem);margin-bottom:1.2rem}
.article-body h3{margin:1.6rem 0 .7rem}
.article-body ul,.article-body ol{padding-left:1.5rem;margin-block:1rem}
.article-body li+li{margin-top:.6rem}
.article-body .callout{padding:1.4rem;background:var(--lav-soft);border:var(--rule);margin-block:1.5rem}
.case{border:var(--rule);background:var(--card);box-shadow:6px 6px 0 var(--ink);padding:1.6rem;margin-top:1.5rem}
.case h3{margin-top:0}
.case dl{margin:0}
.case dt{font-weight:700;margin-top:1rem}
.case dd{margin:.2rem 0 0}
.table-wrap{overflow-x:auto;margin-block:1.4rem;max-width:100%;border:var(--rule)}
table{width:100%;border-collapse:collapse;background:var(--card);font-size:1rem}
th,td{text-align:left;vertical-align:top;padding:1rem;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
th:last-child,td:last-child{border-right:0}
tr:last-child td,tr:last-child th{border-bottom:0}
thead th{background:var(--lav-soft)}
th[scope=row]{font-weight:650}
table caption{text-align:left;padding:1rem;font-weight:700;background:var(--paper)}
.sources{font-size:.9375rem}
.sources li+li{margin-top:.5rem}

/* ---------- 404 ---------- */
.error-page{padding-block:6rem;min-height:65vh}
.error-page h1{font-family:Anton,'Arial Narrow',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.04;font-size:clamp(2.6rem,6vw,4.6rem);margin-bottom:1rem}
.error-page p{max-width:50ch}

@media(max-width:980px){
  .article-layout{grid-template-columns:190px minmax(0,1fr);gap:2rem}
}

@media(max-width:760px){
  .wrap{width:calc(100% - 2.5rem)}
  .header-inner{gap:.85rem}
  .site-nav{gap:.85rem;font-size:.875rem}
  .hero{padding-block:2.8rem}
  .why-grid,.who-grid,.article-layout{grid-template-columns:1fr}
  .definition .definition-text{box-shadow:5px 5px 0 var(--ink);padding:1.5rem 1.4rem}
  .section-heading{margin-bottom:1.6rem}
  .section-heading .eyebrow{margin-bottom:.65rem}
  .section-heading h2{max-width:26ch}
  .band{padding-block:2.8rem}
  .learning-loop{grid-template-columns:1fr}
  .portrait{border-right:0;border-bottom:var(--rule)}
  .portrait img{max-height:300px;max-width:300px;align-self:center}
  .who-copy{padding:1.7rem}
  .contents{position:static}
  .article-layout{gap:2rem}
  .contents ol{columns:2;column-gap:2rem}
  .article-hero{padding-block:2rem 2.5rem}
  .article-hero h1{max-width:22ch}
}

@media(max-width:560px){
  /* before/after pairs stay together on mobile */
  .compare-pair,.knowledge,.read-grid{grid-template-columns:1fr}
  .site-nav{width:100%;justify-content:space-between;gap:.65rem}
  .contents ol{columns:1}
  .compare-pair>div{padding:1.25rem}
  th,td{padding:.75rem}
  .footer-inner{flex-direction:column}
  .hero h1{font-size:clamp(2.1rem,8.5vw,2.9rem)}
  .article-hero h1{font-size:2.1rem}
  .table-wrap table{min-width:510px}
  .btn{padding:1rem 1.3rem}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

@media print{
  .site-nav,.actions,.cta,.site-footer,.skip,.contents{display:none}
  .wrap{width:100%}
  body{font-size:11pt;background:white;color:black}
  .hero,.band,.article-hero{padding-block:1.5rem}
  .article-layout,.who-grid{display:block}
  .portrait{display:none}
  .article-body>section{break-inside:avoid}
  .article-layout{padding:0}
  a{color:inherit}
}