/* A restrained editorial type system built around the Golos Text variable font. */
:root{
  --font-heading:var(--font-text);
  --type-display:clamp(2.8rem,4.2vw,4.5rem);
  --type-page:clamp(3.25rem,5vw,4.5rem);
  --type-article-title:clamp(2.625rem,4.4vw,4rem);
  --type-section:clamp(2rem,3vw,2.625rem);
  --type-card-title:clamp(1.5rem,2.1vw,2.125rem);
  --type-lead:clamp(1.125rem,1.25vw,1.25rem);
  --type-body-lg:1.125rem;
  --type-body:1.0625rem;
  --type-body-sm:1rem;
  --type-small:.875rem;
  --type-label:.75rem;
  --type-topic-label:.625rem;
  --weight-regular:400;
  --weight-medium:500;
  --weight-title:560;
  --weight-strong:600;
  --leading-tight:1.08;
  --leading-heading:1.2;
  --leading-body:1.62;
  --leading-reading:1.72;
  --tracking-display:-.035em;
  --tracking-heading:-.022em;
  --tracking-title:-.012em;
}

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-size:var(--type-body);
  font-weight:var(--weight-regular);
  line-height:1.55;
  text-rendering:optimizeLegibility;
  text-wrap:wrap;
}
h1,h2,h3,.home-article-title,.home-project-text strong,.next-project a{font-family:var(--font-heading);overflow-wrap:break-word;text-wrap:balance}
p{overflow-wrap:break-word}
a{
  text-decoration-skip-ink:auto;
  text-decoration-thickness:from-font;
  text-underline-position:from-font;
}
a,button{transition:color .18s ease,background-color .18s ease,text-decoration-color .18s ease}

/* Short supporting copy gets deliberate endings; long-form prose keeps a natural rag. */
.home-intro-description,.page-header p,.about-heading>p,.project-header>p,
.directory-description,.archive-excerpt,.story-intro p,.story-points p,
.demo-intro p,.notes-directory-card p,.note-page header>p,.about-links p{
  text-wrap:pretty;
}
.article-prose p,.note-body p{text-wrap:wrap}

/* Navigation, labels and compact interface text. */
.brand{font-size:1.375rem;font-weight:650;letter-spacing:-.04em;line-height:1.1}
.main-nav a{font-size:var(--type-small);font-weight:var(--weight-title);letter-spacing:0;color:#000000;white-space:nowrap}
.main-nav a[aria-current=page]{font-weight:var(--weight-title);color:#000000}
.main-nav a:hover{color:#000000}
.site-footer nav a:hover{color:var(--accent-dark)}
.footer-signoff p,.site-footer nav a{font-size:var(--type-small);line-height:1.5}
.copyright{font-family:inherit;font-size:var(--type-label);letter-spacing:0}
.back-link,.demo-status,.article-hero-image figcaption{
  font-family:inherit;
  font-size:var(--type-label);
  font-weight:var(--weight-regular);
  letter-spacing:0;
  line-height:1.4;
}
.category,.article-meta>span,.notes-directory-top>span{
  display:inline-flex;
  align-items:center;
  color:var(--accent-dark);
  font-family:inherit;
  font-size:var(--type-topic-label);
  font-weight:var(--weight-strong);
  letter-spacing:.045em;
  line-height:1.4;
  text-transform:uppercase;
  white-space:nowrap;
}
.notes-directory-top>span:last-child{color:var(--accent-dark);font-size:var(--type-topic-label)}
.demo-label{
  color:var(--accent-dark);
  font-family:inherit;
  font-size:var(--type-label);
  font-weight:var(--weight-strong);
  letter-spacing:.04em;
  line-height:1.35;
  text-transform:uppercase;
  white-space:nowrap;
}
.back-link,.demo-status{white-space:nowrap}
.back-link{font-size:var(--type-small);font-weight:var(--weight-regular);letter-spacing:0}

/* Directory and landing-page hierarchy. */
.page-header h1,.about-heading h1{
  font-size:var(--type-page);
  font-weight:var(--weight-title);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-display);
}
.page-header p,.about-heading>p{font-size:var(--type-lead);line-height:1.55}
.directory-copy h2{
  font-size:clamp(2rem,3vw,2.75rem);
  font-weight:var(--weight-title);
  line-height:1.15;
  letter-spacing:var(--tracking-heading);
  margin:12px 0 10px;
}
.directory-description,.archive-excerpt,.about-links p{font-size:var(--type-body-sm);line-height:var(--leading-body)}
.archive-article h2{
  font-size:var(--type-card-title);
  font-weight:var(--weight-title);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading);
}
.archive-article .article-meta{margin:0 0 12px}
.archive-article--text .archive-article-link{display:block;padding-top:24px;border-top:1px solid var(--line)}

/* Project stories and demos. */
.project-header h1{
  font-size:var(--type-page);
  font-weight:var(--weight-title);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-display);
  margin:16px 0 19px;
}
.project-header>p{font-size:var(--type-lead);line-height:1.5;letter-spacing:0}
.story-intro h2,.demo-intro h2{
  font-size:var(--type-section);
  font-weight:var(--weight-title);
  line-height:1.17;
  letter-spacing:var(--tracking-heading);
}
.story-intro p{font-size:var(--type-body);line-height:var(--leading-body)}
.story-points h3{font-size:var(--type-body-lg);font-weight:var(--weight-strong);line-height:1.3;letter-spacing:var(--tracking-title)}
.story-points p,.demo-intro p{font-size:var(--type-body-sm);line-height:1.68}
.demo-toolbar strong,.demo-doc-title{font-size:var(--type-small);font-weight:var(--weight-strong)}
.translation-grid p{font-size:var(--type-body-lg);line-height:1.55;letter-spacing:0}
.service-result h3{font-size:1.75rem;font-weight:var(--weight-title);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading)}
.next-project a{font-size:clamp(2.5rem,4vw,3.75rem);font-weight:var(--weight-title);line-height:1.15;letter-spacing:var(--tracking-display)}
.next-project a:hover{color:var(--accent-dark)}

/* Article and note reading rhythm. */
.article-page{padding-top:30px}
.article-header{max-width:1030px;padding-top:20px}
.article-breadcrumbs{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;color:var(--muted);font-size:var(--type-small);line-height:1.5}
.article-breadcrumbs a:hover{color:var(--accent-dark)}
.article-breadcrumbs [aria-current=page]{color:var(--ink);font-weight:var(--weight-medium)}
.article-header h1{
  font-size:var(--type-article-title);
  font-weight:var(--weight-title);
  line-height:1.13;
  letter-spacing:var(--tracking-display);
  margin:16px 0 22px;
}
.article-header>p{max-width:62ch;color:#5a5a5a;font-size:var(--type-lead);line-height:1.55;text-wrap:pretty}
.article-audio{display:flex;align-items:center;gap:16px;margin-top:28px}
.article-audio-label{color:var(--muted);font-family:var(--mono);font-size:var(--type-label);font-weight:var(--weight-medium);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.article-audio audio{display:block;width:min(100%,340px);height:38px}
.article-content{grid-template-columns:205px minmax(0,690px);gap:clamp(45px,6vw,100px)}
.article-page--text .article-content{padding-top:30px}
.article-content aside p{font-size:var(--type-small);font-weight:var(--weight-strong)}
.article-content aside a{font-size:var(--type-small);line-height:1.5}
.article-prose h2{
  font-size:clamp(1.625rem,2.2vw,2rem);
  font-weight:var(--weight-title);
  line-height:1.25;
  letter-spacing:var(--tracking-heading);
}
.article-prose p{font-size:var(--type-body-lg);line-height:var(--leading-reading);color:#484848}
.article-intro{margin-bottom:62px}
.article-intro p + p,.article-prose section p + p{margin-top:1.15em}
.article-intro .article-paragraph + .article-paragraph,.article-prose section .article-paragraph + .article-paragraph{margin-top:1.15em}
.article-prose section:last-child{margin-bottom:0}
.article-prose section ul{margin:18px 0 0;padding-left:1.4em}
.article-prose section li{font-size:var(--type-body);line-height:1.6;padding-left:.15em;overflow-wrap:anywhere}
.article-prose section li + li{margin-top:8px}
.article-comparison{padding-top:0}
.article-table-hint{display:none}
.article-table-scroll{
  width:100%;
  margin:30px 0 50px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--line);
  scrollbar-color:#ababab transparent;
  scrollbar-width:thin;
}
.article-table-scroll table{width:100%;min-width:660px;table-layout:fixed;border-collapse:collapse;text-align:left}
.article-table-scroll thead{border-bottom:1px solid var(--ink)}
.article-table-scroll thead th{
  color:var(--muted);
  font-size:var(--type-small);
  font-weight:var(--weight-strong);
  letter-spacing:0;
  line-height:1.35;
  text-wrap:balance;
}
.article-table-scroll thead th:first-child{width:22%}
.article-table-scroll thead th:nth-child(2),.article-table-scroll thead th:nth-child(3){width:39%}
.article-table-scroll th,.article-table-scroll td{
  padding:19px 0;
  vertical-align:top;
  border-bottom:1px solid var(--line);
  font-size:var(--type-body-sm);
  line-height:1.55;
}
.article-table-scroll th + th,.article-table-scroll td{padding-left:30px}
.article-table-scroll tbody th{color:var(--ink);font-weight:var(--weight-strong)}
.article-table-scroll tbody td{color:#484848}
.article-table-scroll tbody tr:last-child th,.article-table-scroll tbody tr:last-child td{border-bottom:0}
.article-section-sources{margin-top:18px!important;color:var(--muted)!important;font-size:var(--type-small)!important;line-height:1.6!important}
.article-source{font-size:var(--type-small)!important;line-height:1.6!important}

@media(min-width:1180px){
  .article-table-scroll{width:calc(100% + 144px)}
}

.notes-directory-card h2{
  font-size:clamp(1.5rem,2vw,2rem);
  font-weight:var(--weight-title);
  line-height:1.22;
  letter-spacing:var(--tracking-heading);
  margin:14px 0 12px;
}
.notes-directory-card p{font-size:.9375rem;line-height:1.6}
.notes-directory-bottom{font-size:.8125rem;font-weight:var(--weight-strong)}
.note-page header{max-width:900px}
.note-page h1{
  font-size:var(--type-article-title);
  font-weight:var(--weight-title);
  line-height:1.12;
  letter-spacing:var(--tracking-display);
  margin:16px 0 24px;
}
.note-page header>p{font-size:var(--type-lead);line-height:1.55}
.note-body{max-width:690px}
.note-body p{font-size:var(--type-body-lg);line-height:var(--leading-reading)}
.about-links h2{font-size:1.875rem;font-weight:var(--weight-title);line-height:1.22;letter-spacing:var(--tracking-heading)}

/* Links stay textual. Actions use one quiet filled shape, without iconography. */
.inline-link{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:0;border:0;background:transparent;color:var(--accent-dark);font-size:.9375rem;font-weight:var(--weight-strong);line-height:1.4;text-decoration:none}
.inline-link:hover{text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:4px}
.article-prose a,.article-hero-image figcaption a{color:var(--accent-dark);text-decoration:underline;text-decoration-color:#adadad;text-decoration-thickness:from-font;text-underline-offset:3px}
.article-prose a:hover,.article-hero-image figcaption a:hover{text-decoration-color:currentColor}
.button-link,.demo-button{display:inline-flex;align-items:center;justify-content:center;gap:0;min-height:46px;padding:11px 18px;border:0;border-radius:2px;background:var(--ink);color:#ffffff;font-size:var(--type-small);font-weight:var(--weight-strong);line-height:1.35;letter-spacing:0;white-space:nowrap;cursor:pointer;transform:none;box-shadow:none}
.button-link:hover,.demo-button:hover{background:var(--accent-dark);color:#ffffff;transform:none}
.button-link:active,.demo-button:active{transform:translateY(1px)}
.demo-controls button,.service-tabs button{min-height:44px;padding:9px 13px;border:0;border-radius:2px;background:#e8e8e8;color:var(--ink);font-size:.8125rem;font-weight:var(--weight-medium);line-height:1.35;transform:none}
.demo-controls button:hover,.service-tabs button:hover{background:#dddddd;border:0;color:var(--ink)}
.demo-controls button[aria-pressed=true],.service-tabs button[aria-pressed=true]{background:var(--ink);border:0;color:#ffffff}
.demo-controls button:active,.service-tabs button:active{transform:none}
.back-link:hover,.article-content aside a:hover{color:var(--accent-dark)}

@media(max-width:940px){
  .article-prose .article-table-hint{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:26px 0 9px;
    color:var(--muted);
    font-size:var(--type-label);
    font-weight:var(--weight-medium);
    line-height:1.4;
  }
  .article-table-hint span{color:var(--accent-dark);font-size:1rem}
  .article-table-scroll{margin-top:0}
}

@media(max-width:767px){
  .article-page{padding-top:24px}
  .article-header{padding-top:8px}
  .main-nav a{font-size:.875rem}
  .page-header h1,.about-heading h1,.project-header h1{font-size:clamp(2.7rem,8vw,3.75rem)}
  .page-header p,.about-heading>p,.project-header>p{font-size:1.125rem}
  .directory-copy h2{font-size:2rem}
  .story-intro h2,.demo-intro h2{font-size:2rem}
  .article-header h1,.note-page h1{font-size:clamp(2.5rem,7vw,3.4rem)}
  .article-header>p,.note-page header>p{font-size:1.125rem}
  .article-prose p,.note-body p{font-size:1.0625rem;line-height:1.7}
  .article-intro{margin-bottom:56px}
  .article-prose section li{font-size:1rem}
  .next-project a{font-size:2.75rem}
}
@media(max-width:520px){
  .brand{font-size:1.25rem}
  .main-nav a{font-size:.8125rem}
  .page-header h1,.about-heading h1,.project-header h1{font-size:clamp(2.6rem,9vw,3.25rem)}
  .article-header h1,.note-page h1{font-size:clamp(2.2rem,8vw,2.75rem)}
  .article-audio{align-items:flex-start;flex-direction:column;gap:9px;margin-top:24px}
  .article-audio audio{width:100%}
  .service-result h3{font-size:1.5rem}
}
@media(max-width:360px){.main-nav a{font-size:.75rem}}

.button-link[aria-disabled=true],.demo-button:disabled,
.demo-controls button:disabled,.service-tabs button:disabled{
  background:#e3e3e3;
  color:#747474;
  opacity:1;
  cursor:not-allowed;
  box-shadow:none;
}

/* Media may soften the page edge; controls stay almost square and editorial. */
:root{--radius-media:8px;--radius-control:2px}
.hero-media,.featured-image,.tile-image,.article-card-image,.directory-image,
.archive-article-image,.project-hero-image,.about-page figure,.home-card-media,
.project-cover,.project-screenshot-frame,.doclear-shot-link,.langword-shot-link{border-radius:var(--radius-media)}
.project-screenshot-frame{overflow:hidden}
.home-card--article .home-card-media{border-radius:var(--radius-media)}
.article-hero-image img,.project-screenshot-frame img,.doclear-shot-link img,.langword-shot-link img{border-radius:calc(var(--radius-media) - 3px)}
.button-link,.demo-button,.demo-controls button,.service-tabs button,
.section-link,.directory-arrow{border-radius:var(--radius-control)}
.directory-arrow{border-radius:50%}

/* UI polish: the interaction language stays quiet, direct and interruptible. */
:root{
  --ease:cubic-bezier(0.2,0,0,1);
  --duration-fast:150ms;
  --duration-state:150ms;
}

/* Keep transitions limited to the property that actually changes. */
a,button{
  transition-property:color,background-color,text-decoration-color;
  transition-duration:var(--duration-fast);
  transition-timing-function:var(--ease);
}
.brand,.main-nav a,.site-footer nav a,.inline-link,.back-link,
.article-content aside a,.project-contents a{
  transition-property:color,text-decoration-color;
  transition-duration:var(--duration-fast);
  transition-timing-function:var(--ease);
}
.home-card-link{
  transition-property:transform,background-color;
  transition-duration:var(--duration-fast);
  transition-timing-function:var(--ease);
}
.home-card-media img,.featured-image img,.tile-image img,.article-card-image img,
.directory-image img,.archive-article-image img{
  transition-property:transform;
  transition-duration:300ms;
  transition-timing-function:var(--ease);
}
.directory-item{
  transition-property:background-color;
  transition-duration:var(--duration-state);
  transition-timing-function:var(--ease);
}
.directory-arrow{
  transition-property:background-color,color,transform;
  transition-duration:var(--duration-state);
  transition-timing-function:var(--ease);
}
.archive-read,.notes-directory-bottom{
  transition-property:gap,color;
  transition-duration:var(--duration-state),var(--duration-fast);
  transition-timing-function:var(--ease);
}
.demo-controls button,.service-tabs button,.demo-button,.button-link,
.local-image-studio-trigger,.prompt-dialog-close,.prompt-copy,.prompt-add-image{
  transition-property:background-color,color,border-color,transform,opacity;
  transition-duration:var(--duration-fast);
  transition-timing-function:var(--ease);
  transform-origin:center;
}

/* Nested media follows its parent radius exactly: outer radius = inner radius + padding. */
.article-hero-image img,.project-screenshot-frame img{border-radius:var(--radius-media)}
.doclear-shot-link,.langword-shot-link,.linguarius-shot-link{border-radius:var(--radius-media)}
.doclear-shot-link img,.langword-shot-link img,.linguarius-shot-link img{border-radius:0}

/* Press feedback is tactile without turning a calm editorial interface into a toy. */
.button-link:not(.static):active,.demo-button:not(.static):active,
.demo-controls button:not(.static):active,.service-tabs button:not(.static):active,
.local-image-studio-trigger:not(.static):active,.prompt-dialog-close:not(.static):active,
.prompt-copy:not(.static):active,.prompt-add-image:not(.static):active{
  transform:scale(.96);
}
.static:active{transform:none}

/* The local prompt is a one-off entrance, so its timing mirrors every other state. */
@media(prefers-reduced-motion:no-preference){
  .prompt-dialog[open]::backdrop{animation-timing-function:var(--ease)}
}

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