/* GENERATED by bin/build-css.php from design/tokens.json — do not edit by hand */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-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:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600-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:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/fraunces-600-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/fraunces-600-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:'Inter-fallback';src:local('Arial');size-adjust:106.5%;ascent-override:90%;descent-override:22%}
@font-face{font-family:'Fraunces-fallback';src:local('Georgia');size-adjust:99.5%;ascent-override:94%;descent-override:24%}

:root{
  --color-surface: #F7F5EF;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: #EFEBE0;
  --color-ink: #1E2B26;
  --color-ink-muted: #51645B;
  --color-accent: #2F6B4F;
  --color-accent-strong: #24533D;
  --color-accent-ink: #FFFFFF;
  --color-water: #2C5F7C;
  --color-water-ink: #FFFFFF;
  --color-border: #D8D2C2;
  --color-focus: #B0782A;
  --color-success: #2F6B4F;
  --color-warn: #8A5A1E;
  --color-danger: #9B3232;
  --shadow-soft: 0 1px 3px rgba(30,43,38,0.08);
  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 2rem;
  --space-xl: 4rem;
  --space-xxl: 6rem;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-pill: 999px;
  --type-display: 'Fraunces', 'Fraunces-fallback', 'Iowan Old Style', Georgia, serif;
  --type-body: 'Inter', 'Inter-fallback', system-ui, 'Segoe UI', sans-serif;
  --type-s: 0.875rem;
  --type-m: 1.0625rem;
  --type-l: 1.25rem;
  --type-xl: 1.75rem;
  --type-xxl: 2.5rem;
  --type-hero: 3.5rem;
  --line-tight: 1.2;
  --line-body: 1.6;
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration: 200ms;
}

[data-theme="dark"]{
  --color-surface: #0E1B18;
  --color-surface-raised: #16251F;
  --color-surface-sunken: #0A1513;
  --color-ink: #E9F0EA;
  --color-ink-muted: #9DB4A8;
  --color-accent: #7FB98E;
  --color-accent-strong: #93CDA3;
  --color-accent-ink: #0E1B18;
  --color-water: #7FA8C4;
  --color-water-ink: #0E1B18;
  --color-border: #2A3B33;
  --color-focus: #E4B45C;
  --color-success: #7FB98E;
  --color-warn: #E4B45C;
  --color-danger: #E08A8A;
  --shadow-soft: 0 1px 3px rgba(0,0,0,0.4);
}

@media (prefers-color-scheme: dark){
[data-theme="auto"]{
  --color-surface: #0E1B18;
  --color-surface-raised: #16251F;
  --color-surface-sunken: #0A1513;
  --color-ink: #E9F0EA;
  --color-ink-muted: #9DB4A8;
  --color-accent: #7FB98E;
  --color-accent-strong: #93CDA3;
  --color-accent-ink: #0E1B18;
  --color-water: #7FA8C4;
  --color-water-ink: #0E1B18;
  --color-border: #2A3B33;
  --color-focus: #E4B45C;
  --color-success: #7FB98E;
  --color-warn: #E4B45C;
  --color-danger: #E08A8A;
  --shadow-soft: 0 1px 3px rgba(0,0,0,0.4);
}
}

/* === 01-base.css === */
/* Base — reset, typography, chrome. Colors ONLY via var(--color-*) (AC-5). */
*,
*::before,
*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--color-surface);
  color:var(--color-ink);
  font-family:var(--type-body);
  font-size:var(--type-m);
  line-height:var(--line-body);
  transition:background-color var(--duration) var(--ease-standard),color var(--duration) var(--ease-standard);
}
h1,h2,h3{
  font-family:var(--type-display);
  font-weight:600;
  line-height:var(--line-tight);
  margin:0 0 var(--space-m);
}
h1{font-size:var(--type-xxl)}
h2{font-size:var(--type-xl);margin-top:var(--space-l)}
h3{font-size:var(--type-l)}
p,ul,ol{max-width:66ch;margin:0 0 var(--space-m)}
strong{font-weight:600}
a{color:var(--color-accent);text-underline-offset:.15em}
a:hover{color:var(--color-accent-strong)}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:2px;
  border-radius:var(--radius-s);
}
.skip-link{
  position:absolute;
  left:var(--space-m);
  top:-5rem;
  z-index:10;
  background:var(--color-accent);
  color:var(--color-accent-ink);
  padding:var(--space-s) var(--space-m);
  border-radius:var(--radius-s);
  transition:top var(--duration) var(--ease-standard);
}
.skip-link:focus{top:var(--space-m)}
.site-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-m);
  max-width:72rem;
  margin:0 auto;
  padding:var(--space-m);
}
.site-mark{
  display:inline-flex;
  align-items:center;
  gap:var(--space-s);
  font-family:var(--type-display);
  font-weight:600;
  font-size:var(--type-l);
  color:var(--color-ink);
  text-decoration:none;
}
.site-mark img{width:2.25rem;height:2.25rem}
.site-header nav{margin-left:auto}
.site-header nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xs) var(--space-m);
  list-style:none;
  margin:0;
  padding:0;
  max-width:none;
}
.site-header nav a{
  color:var(--color-ink);
  text-decoration:none;
  padding:var(--space-xs) var(--space-s);
  border-radius:var(--radius-s);
}
.site-header nav a:hover{color:var(--color-accent-strong)}
.site-header nav a[aria-current="page"]{
  color:var(--color-accent);
  box-shadow:inset 0 -2px 0 var(--color-accent);
}
.language-switcher{
  color:var(--color-ink-muted);
  text-decoration:none;
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  padding:var(--space-xs) var(--space-s);
}
/* The full-bleed hero uses 100vw; under browser zoom vw stops tracking the
   zoomed layout width, so the page would scroll sideways (VAR-13 finding).
   Clip horizontal overflow — the hero is decorative, text never is. */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
main{max-width:72rem;margin:0 auto;padding:0 var(--space-m) var(--space-xl)}
main section{padding:var(--space-l) 0}
.table-wrap{overflow-x:auto;max-width:44rem;margin:0 0 var(--space-m)}
table{
  border-collapse:collapse;
  width:100%;
  margin:0;
  font-size:var(--type-s);
}
th,td{
  text-align:left;
  padding:var(--space-s) var(--space-m) var(--space-s) 0;
  border-bottom:1px solid var(--color-border);
  vertical-align:top;
}
th{font-weight:600}
.site-footer{
  background:var(--color-surface-sunken);
  color:var(--color-ink-muted);
  font-size:var(--type-s);
  padding:var(--space-l) var(--space-m);
  text-align:center;
}
.site-footer p{margin:0 auto;max-width:66ch}
.site-footer a{color:inherit}

/* === 02-components.css === */
/* Components — hero, cards, badges, CTA, forms, notices, pending, toggle. */

/* Full-bleed hero band; dark variant swapped by [data-theme] (no-JS safe). */
.hero-band{
  position:relative;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
}
.hero-band picture,
.hero-band img{display:block;width:100%;height:auto}
/* Specificity scar (2026-10-07): the hide rule must out-specify
   `.hero-band img` (0-1-1) or BOTH banners render in light/auto-light.
   Pinned by gate/hero-visibility.mjs. */
.hero-band .hero-img-dark{display:none}
[data-theme="dark"] .hero-img-light{display:none}
[data-theme="dark"] .hero-img-dark{display:block}
@media (prefers-color-scheme: dark){
  [data-theme="auto"] .hero-img-light{display:none}
  [data-theme="auto"] .hero-img-dark{display:block}
}
/* Hero caption (2026-10-07 ruling): the slogan rides the banner itself.
   A bottom fade of the surface color reads as mist over the water and
   keeps the text AA-legible on both the day and the night artwork. */
.hero-caption{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:var(--space-m) max(var(--space-m), calc((100vw - 72rem) / 2 + var(--space-m)));
  background:linear-gradient(to top, color-mix(in oklab, var(--color-surface) 85%, transparent), transparent 55%);
}
.hero-caption h1{
  margin:0 0 var(--space-xs);
  font-size:var(--type-l);
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.hero-caption p{
  margin:0;
  max-width:22ch;
  font-family:var(--type-display);
  font-weight:600;
  font-size:var(--type-xl);
  line-height:var(--line-tight);
}
@media (min-width:48rem){
  .hero-caption{padding-bottom:var(--space-l)}
  .hero-caption p{font-size:var(--type-hero)}
}
/* Narrow screens: the artwork alone (~144px at 320w) is too short for the
   caption — give the band a real height and center-right crop (frog zone). */
@media (max-width:47.99rem){
  .hero-band{min-height:17rem}
  .hero-band img{height:17rem;object-fit:cover;object-position:62% 50%}
}
.hero-text h1{font-size:var(--type-hero);margin-top:var(--space-m)}
.hero-text p{font-size:var(--type-l);max-width:52ch}

/* Project cards (home grid + /projektai detail cards) */
.card-grid{
  list-style:none;
  padding:0;
  margin:0 0 var(--space-m);
  max-width:none;
  display:grid;
  gap:var(--space-l);
  grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr));
}
.card{
  background:var(--color-surface-raised);
  border:1px solid var(--color-border);
  border-radius:var(--radius-l);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform var(--duration) var(--ease-standard);
}
.card:hover{transform:translateY(-2px)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.card-link{display:block;color:inherit;text-decoration:none;height:100%}
.card-body{display:block;padding:var(--space-m) var(--space-l) var(--space-l)}
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-s);
  font-family:var(--type-display);
  font-size:var(--type-l);
  font-weight:600;
  margin-bottom:var(--space-s);
}
.card-blurb{display:block;color:var(--color-ink-muted)}
.project-cards{display:grid;gap:var(--space-xl)}
.project-card{
  background:var(--color-surface-raised);
  border:1px solid var(--color-border);
  border-radius:var(--radius-l);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.project-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media (min-width:48rem){
  .project-card{display:grid;grid-template-columns:2fr 3fr}
  .project-card img{aspect-ratio:auto;height:100%}
}
.project-card-body{padding:var(--space-l)}
.project-card-body h2{margin-top:0}

/* Status badges */
.badge{
  display:inline-block;
  font-family:var(--type-body);
  font-size:var(--type-s);
  font-weight:600;
  line-height:1;
  padding:var(--space-xs) var(--space-s);
  border-radius:var(--radius-pill);
  white-space:nowrap;
}
.badge-veikia{background:var(--color-accent);color:var(--color-accent-ink)}
.badge-eksperimentas{background:var(--color-water);color:var(--color-water-ink)}
/* Kuriama (2026-10-07 ruling): active build — warn outline chip, token-pure */
.badge-kuriama{
  background:var(--color-surface-sunken);
  color:var(--color-warn);
  border:1px solid var(--color-warn);
}
.badge-planuojamas{
  background:var(--color-surface-sunken);
  color:var(--color-ink-muted);
  border:1px solid var(--color-border);
}

/* CTA + links from deck directives */
.cta .button,
button.button{
  display:inline-block;
  background:var(--color-accent);
  color:var(--color-accent-ink);
  font-weight:600;
  text-decoration:none;
  padding:var(--space-s) var(--space-l);
  border-radius:var(--radius-pill);
  border:0;
  cursor:pointer;
  transition:background-color var(--duration) var(--ease-standard);
}
.cta .button:hover{background:var(--color-accent-strong);color:var(--color-accent-ink)}
.more-link a,.ext-link a{font-weight:600}

/* Forms (contact + notify share the vocabulary) */
form{max-width:34rem}
/* Both public forms read as deliberate raised blocks: the notify form follows
   the project cards detached from them (2026-10-07 visual sweep), and the
   contact form sat bare on the page background (2026-10-07 form polish). */
.notify-form form,
.contact-form form{
  background:var(--color-surface-raised);
  border:1px solid var(--color-border);
  border-radius:var(--radius-l);
  padding:var(--space-l);
}
form p{margin:0 0 var(--space-m)}
form label{display:block;font-weight:600;margin-bottom:var(--space-xs)}
form input[type="text"],
form input[type="email"],
form select,
form textarea{
  width:100%;
  padding:var(--space-s) var(--space-m);
  border:1px solid var(--color-border);
  border-radius:var(--radius-s);
  background:var(--color-surface-raised);
  color:var(--color-ink);
  font:inherit;
}
form input[type="checkbox"]{width:1.15rem;height:1.15rem;vertical-align:-0.2em;margin-right:var(--space-xs)}
form input[type="checkbox"] + label{display:inline;font-weight:400}
/* Contact page and the notify block: copy and the form side by side at
   ≥48rem (2026-10-07 "padaryk dvi kolonas kontaktų puslapyje" + the
   notify-grid ruling below the project cards); stacked below that. */
@media (min-width:48rem){
  .contact-grid,
  .notify-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:start}
}
/* Consent rows: checkbox in its own column, the long label wraps beside it
   instead of sliding underneath; the error line drops below both. */
.check-row{display:flex;flex-wrap:wrap;align-items:flex-start}
.check-row input[type="checkbox"]{flex:none;margin-top:0.2em}
.check-row label{flex:1;min-width:0;margin-bottom:0}
.check-row .field-error{flex-basis:100%}
.field-error{display:block;color:var(--color-danger);font-size:var(--type-s);margin-top:var(--space-xs)}
/* Project pick chips (2026-10-07 ruling): real checkboxes in labels, one
   row per project; the checked state rides :has() so no JS is involved. */
.notify-picks{border:0;margin:0 0 var(--space-m);padding:0}
.notify-picks legend{font-weight:600;margin-bottom:var(--space-xs);padding:0}
.notify-picks .chip{
  display:flex;
  align-items:flex-start;
  gap:var(--space-xs);
  font-weight:400;
  margin:0 0 var(--space-xs);
  padding:var(--space-s) var(--space-m);
  border:1px solid var(--color-border);
  border-radius:var(--radius-m);
  cursor:pointer;
  transition:border-color var(--duration) var(--ease-standard),background-color var(--duration) var(--ease-standard);
}
.notify-picks .chip input{margin:0.2em 0 0}
.notify-picks .chip:has(input:checked){border-color:var(--color-accent);background:var(--color-surface)}
.notify-picks .chip:has(input:focus-visible){outline:2px solid var(--color-focus);outline-offset:2px}
.notify-picks .chip-name{display:block;font-weight:600}
.notify-picks .chip-blurb{display:block;color:var(--color-ink-muted);font-size:var(--type-s)}
.hp{position:absolute;left:-100vw;width:1px;height:1px;overflow:hidden}

/* Notices */
.notice{
  max-width:44rem;
  padding:var(--space-m) var(--space-l);
  border-radius:var(--radius-m);
  background:var(--color-surface-raised);
  border:1px solid var(--color-border);
  border-left-width:4px;
}
.notice-ok{border-left-color:var(--color-success)}
.notice-saved{border-left-color:var(--color-water)}
.notice-error{border-left-color:var(--color-danger)}

/* Operator-pending copy — dev/stage-only visibility (D-17) */
.pending-copy{
  display:block;
  border:2px dashed var(--color-warn);
  border-radius:var(--radius-m);
  padding:var(--space-m);
  background:var(--color-surface-sunken);
}
span.pending-copy{display:inline;border-width:1px;padding:0 var(--space-xs)}

/* Theme toggle */
.theme-toggle{
  border:1px solid var(--color-border);
  background:var(--color-surface-raised);
  color:var(--color-ink);
  border-radius:var(--radius-pill);
  padding:var(--space-xs) var(--space-s);
  font:inherit;
  cursor:pointer;
}
.theme-toggle:hover{background:var(--color-surface-sunken)}

/* Progress scale on in-development project cards (operator ruling
   2026-10-07): the fill grows once on load; the global reduced-motion
   collapse below tames the animation and `forwards` keeps the end state.
   CSP forbids inline styles, so the target width comes from a per-value
   class — add a .p<N> rule when copy uses a new percentage. */
.progress{display:flex;align-items:center;gap:var(--space-s)}
.progress-track{
  flex:1;height:.5rem;border-radius:var(--radius-pill);
  background:var(--color-surface-sunken);overflow:hidden;
}
.progress-fill{
  display:block;height:100%;width:0;border-radius:var(--radius-pill);
  background:var(--color-accent);
  animation:progress-grow 1.4s ease-out .15s forwards;
}
.progress-fill.p10{--progress-target:10%}
.progress-fill.p75{--progress-target:75%}
@keyframes progress-grow{to{width:var(--progress-target)}}
.progress-num{font-size:.875em;white-space:nowrap}

/* Motion collapses under prefers-reduced-motion (AC-5/FR-11) */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto}
}