/* ==========================================================================
   PLUNGĖS JONIS — design system
   Direction: Swiss / International Typographic, re-tooled for linear
   infrastructure. Ink is rail-green, not black. Field is concrete, not cream.
   Structure device: chainage (PK) — every section is stationed.
   ========================================================================== */

/* ---- 1. TOKENS ---------------------------------------------------------- */
:root{
  /* colour — 6 named values, no more */
  --ink:        #0E2A22;   /* Bėgių žalia — rail green-black. All type. */
  --ink-2:      #0F5136;   /* Pušynas — primary green, links & fills. */
  --field:      #E4E4DF;   /* Betonas — cool concrete page ground. */
  --plane:      #F6F6F3;   /* Popierius — raised planes, cards. */
  --signal:     #EDB700;   /* Signalinė — road-marking yellow. Accent only. */
  --oxide:      #A8452A;   /* Oksidas — rail rust. Data emphasis, rare. */
  --rule:       rgba(14,42,34,.22);
  --rule-soft:  rgba(14,42,34,.10);
  --ink-on-dark:#EDEDE7;

  /* type */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-hero: clamp(2.75rem, 7.2vw, 6.5rem);
  --t-h1:   clamp(2.1rem, 4.6vw, 3.9rem);
  --t-h2:   clamp(1.5rem, 2.6vw, 2.3rem);
  --t-h3:   clamp(1.05rem, 1.5vw, 1.3rem);
  --t-lead: clamp(1.05rem, 1.5vw, 1.35rem);
  --t-body: clamp(.95rem, 1.05vw, 1.05rem);
  --t-data: .74rem;

  /* structure */
  --shell: 1440px;
  --gut:   clamp(18px, 3.4vw, 48px);
  --rail:  clamp(0px, 7vw, 104px);   /* chainage spine width */
  --step:  clamp(52px, 7vw, 104px);  /* vertical rhythm between sections */
}

/* ---- 2. RESET ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--field); color:var(--ink);
  font-family:var(--body); font-size:var(--t-body); line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul{padding:0; list-style:none}
button{font:inherit}
::selection{background:var(--signal); color:var(--ink)}
:focus-visible{outline:3px solid var(--signal); outline-offset:3px}

/* ---- 3. TYPE ROLES ------------------------------------------------------ */
.display{
  font-family:var(--display); font-weight:800;
  font-stretch:112%; letter-spacing:-.022em; line-height:1.0;
  text-transform:uppercase; text-wrap:balance;
}
.hero-type{font-size:var(--t-hero)}
.h1{font-size:var(--t-h1)}
.h2{font-size:var(--t-h2)}
.h3{
  font-family:var(--display); font-weight:700; font-stretch:106%;
  font-size:var(--t-h3); line-height:1.15; letter-spacing:-.008em;
  text-transform:uppercase;
}
.lead{font-size:var(--t-lead); line-height:1.5; max-width:64ch; text-wrap:pretty}
.prose p + p{margin-top:.9em}
.prose{max-width:68ch}
.data{
  font-family:var(--data); font-size:var(--t-data); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
}
.muted{color:rgba(14,42,34,.76)}

/* ---- 4. SHELL + GRID ---------------------------------------------------- */
.shell{
  max-width:var(--shell); margin-inline:auto;
  padding-inline:var(--gut);
}
.cols{display:grid; gap:var(--gut); grid-template-columns:repeat(12,1fr)}
.c-4{grid-column:span 4} .c-5{grid-column:span 5} .c-6{grid-column:span 6}
.c-7{grid-column:span 7} .c-8{grid-column:span 8} .c-12{grid-column:span 12}
@media (max-width:900px){
  .c-4,.c-5,.c-6,.c-7,.c-8{grid-column:span 12}
}

/* ---- 5. CHAINAGE SPINE (signature) -------------------------------------- */
/* A surveyor's kilometrage rule. Ticks every 20px, labelled every 100m.
   A marker rides the rule at the page's scroll position. Desktop only —
   on narrow screens it degrades to a 2px progress rule under the header. */
.spine{
  position:fixed; inset:0 auto 0 0; width:var(--rail); z-index:30;
  border-right:1px solid var(--rule-soft);
  pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,
      var(--rule) 0 1px, transparent 1px 22px);
  background-position:right 0 top 0; background-size:14px 100%;
  background-repeat:repeat-y;
  display:none;
}
.spine__mark{
  position:absolute; right:0; width:100%; height:1px; background:var(--ink);
  transform:translateY(0);
}
.spine__mark::after{
  content:""; position:absolute; right:-4px; top:-3.5px;
  width:8px; height:8px; background:var(--signal);
  border:1px solid var(--ink);
}
.spine__pk{
  position:absolute; right:12px; top:6px;
  font-family:var(--data); font-size:.62rem; letter-spacing:.1em;
  color:var(--ink);
  /* the marker travels the full rail, so it must stay legible where it
     crosses the vertical caption */
  background:var(--field); padding:2px 4px;
}
.spine__cap{
  position:absolute; left:10px; bottom:18px;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--data); font-size:.6rem; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(14,42,34,.45);
}
@media (min-width:1100px){
  .spine{display:block}
  .page{margin-left:var(--rail)}
}
.progress{
  position:fixed; top:0; left:0; height:2px; background:var(--signal);
  width:0; z-index:40;
}
@media (min-width:1100px){ .progress{display:none} }

/* ---- 6. HEADER ---------------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:35; background:var(--field);
  border-bottom:1px solid var(--rule);
}
.hdr__bar{
  display:flex; align-items:center; gap:12px;
  min-height:66px; flex-wrap:nowrap;
}
@media (min-width:1180px){ .hdr__bar{gap:var(--gut)} }
.mark{display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; flex:0 1 auto}
.mark__glyph{width:26px; height:26px; flex:0 0 auto}
.mark__word{
  font-family:var(--display); font-weight:800; font-stretch:114%;
  text-transform:uppercase; letter-spacing:-.01em; font-size:.94rem; line-height:1;
  white-space:nowrap;
}
@media (min-width:640px){ .mark__word{font-size:1.02rem} }
.mark__sub{
  display:none; font-family:var(--data); font-size:.56rem;
  letter-spacing:.24em; color:rgba(14,42,34,.74); margin-top:3px;
}
@media (min-width:640px){ .mark__sub{display:block} }
.nav{display:none; margin-left:auto; align-items:center; gap:clamp(10px,1.5vw,22px)}
.nav a{
  text-decoration:none; font-family:var(--data); font-size:var(--t-data);
  letter-spacing:.1em; padding:6px 0; position:relative; white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--signal); transition:right .25s ease;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
@media (min-width:1180px){ .nav{display:flex} }
.lang{display:flex; gap:6px; margin-left:auto; align-items:center; flex:0 0 auto}
@media (min-width:1180px){ .lang{margin-left:0} }
.lang a{
  font-family:var(--data); font-size:var(--t-data); text-decoration:none;
  padding:5px 8px; border:1px solid var(--rule);
}
.lang a[aria-current="true"]{background:var(--ink); color:var(--ink-on-dark); border-color:var(--ink)}
.burger{
  margin-left:0; flex:0 0 auto; background:none; border:1px solid var(--rule);
  padding:8px 12px; font-family:var(--data); font-size:var(--t-data);
  letter-spacing:.1em; cursor:pointer;
}
@media (min-width:1180px){ .burger{display:none} }
.drawer{display:none; border-top:1px solid var(--rule); padding-block:18px}
.drawer.is-open{display:block}
.drawer a{
  display:flex; justify-content:space-between; gap:16px;
  text-decoration:none; padding:11px 0; border-bottom:1px solid var(--rule-soft);
  font-family:var(--display); font-weight:700; font-stretch:106%;
  text-transform:uppercase; font-size:1rem;
}
.drawer a span{font-family:var(--data); font-size:.62rem; font-weight:500; color:rgba(14,42,34,.72)}

/* ---- 7. SECTIONS -------------------------------------------------------- */
.sec{padding-block:var(--step); border-top:1px solid var(--rule); scroll-margin-top:80px}
#main{scroll-margin-top:80px}
.sec--flush{border-top:0}
.sec__head{display:flex; gap:14px; align-items:baseline; margin-bottom:26px; flex-wrap:wrap}
.sec__pk{
  font-family:var(--data); font-size:var(--t-data); color:var(--oxide);
  flex:0 0 auto;
}
.band{background:var(--ink); color:var(--ink-on-dark)}
.band .muted{color:rgba(237,237,231,.62)}
.band .sec__pk{color:var(--signal)}
.band a{color:var(--ink-on-dark)}

/* ---- 8. HERO ------------------------------------------------------------ */
.hero{padding-block:clamp(38px,6vw,84px) clamp(28px,4vw,56px)}
.hero__eyebrow{display:flex; gap:12px; align-items:center; margin-bottom:22px; flex-wrap:wrap}
.hero__rule{flex:1 1 60px; height:1px; background:var(--rule); min-width:40px}
.hero__title{margin-bottom:22px; line-height:.98}
.hero__title em{font-style:normal; color:var(--ink-2)}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:0 28px; margin-top:26px;
  border-top:1px solid var(--rule); padding-top:14px;
}
.hero__meta div{padding-block:6px}
.hero__meta b{display:block; font-family:var(--display); font-weight:800; font-size:1.5rem; font-stretch:110%}

/* ---- 9. BUTTONS --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--data); font-size:var(--t-data); letter-spacing:.12em;
  padding:13px 20px; border:1px solid var(--ink); background:var(--ink);
  color:var(--ink-on-dark); transition:background .2s ease, color .2s ease;
}
.btn:hover{background:var(--signal); color:var(--ink); border-color:var(--signal)}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:var(--ink-on-dark)}
.btn__arrow{transition:transform .2s ease}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}

/* ---- 10. CARDS + LISTS -------------------------------------------------- */
.cards{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
.cards::after{content:""; background:var(--plane); grid-column:1/-1; display:none}
@media (min-width:720px){ .cards--2{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .cards--3{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--plane); padding:clamp(20px,2.4vw,32px); display:flex; flex-direction:column; gap:12px; text-decoration:none}
.card__pk{font-family:var(--data); font-size:var(--t-data); color:var(--oxide)}
.card__more{margin-top:auto; font-family:var(--data); font-size:var(--t-data); letter-spacing:.12em; display:flex; gap:8px; align-items:center}
a.card{transition:background .2s ease}
a.card:hover{background:#fff}
a.card:hover .card__more{color:var(--ink-2)}

.deflist{border-top:1px solid var(--rule)}
.deflist div{
  display:grid; gap:4px 24px; padding-block:14px; border-bottom:1px solid var(--rule-soft);
}
@media (min-width:720px){ .deflist div{grid-template-columns:minmax(160px,26%) 1fr} }
.deflist dt{font-family:var(--data); font-size:var(--t-data); color:rgba(14,42,34,.76)}
.band .deflist dt{color:rgba(237,237,231,.6)}
.deflist dd{margin:0}
.deflist--tight{margin-top:6px}
.deflist--tight dd a{text-decoration:none; border-bottom:1px solid var(--rule)}
.deflist--tight dd a:hover{border-color:var(--signal)}

.ticks{display:grid; gap:0; border-top:1px solid var(--rule)}
.ticks li{
  display:grid; gap:6px 20px; padding-block:13px; border-bottom:1px solid var(--rule-soft);
  grid-template-columns:auto 1fr; align-items:baseline;
}
.ticks li::before{
  content:""; width:14px; height:2px; background:var(--signal); transform:translateY(-4px);
}
.steps{counter-reset:s; border-top:1px solid var(--rule)}
.steps li{
  counter-increment:s; padding-block:18px; border-bottom:1px solid var(--rule-soft);
  display:grid; gap:8px 22px; grid-template-columns:1fr; align-items:start;
}
@media (min-width:720px){ .steps li{grid-template-columns:88px minmax(0,1fr)} }
.steps li h3{margin-bottom:5px}
.steps li p{max-width:66ch}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--display); font-weight:800; font-size:1.6rem; font-stretch:110%;
  color:var(--ink-2); line-height:1;
}
/* on the dark band the green numeral all but disappears — the accent carries it */
.band .steps li::before{color:var(--signal)}
.band .steps{border-top-color:rgba(237,237,231,.3)}
.band .steps li{border-bottom-color:rgba(237,237,231,.16)}
.band .ticks{border-top-color:rgba(237,237,231,.3)}
.band .ticks li{border-bottom-color:rgba(237,237,231,.16)}
.band .deflist{border-top-color:rgba(237,237,231,.3)}
.band .deflist div{border-bottom-color:rgba(237,237,231,.16)}

.stats{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
@media (min-width:640px){ .stats{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stat{background:var(--plane); padding:22px}
.stat b{display:block; font-family:var(--display); font-weight:800; font-stretch:112%; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1}
.stat span{display:block; margin-top:8px}
.band .stat{background:#12332a}

.table{width:100%; border-collapse:collapse; font-size:.94rem}
.table th,.table td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--rule-soft); vertical-align:top}
.table th{font-family:var(--data); font-size:var(--t-data); color:rgba(14,42,34,.76); border-bottom:1px solid var(--rule)}
.table td:first-child{font-family:var(--data); font-size:.78rem; color:var(--oxide); white-space:nowrap}
.tablewrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--rule); background-color:var(--plane);
  /* scroll shadows: the plane-coloured "cover" layers scroll with the content
     (local), so the shading only shows while there is more table off-screen */
  background-image:
    linear-gradient(to right, var(--plane), rgba(246,246,243,0)),
    linear-gradient(to left,  var(--plane), rgba(246,246,243,0)),
    linear-gradient(to right, rgba(14,42,34,.16), rgba(14,42,34,0)),
    linear-gradient(to left,  rgba(14,42,34,.16), rgba(14,42,34,0));
  background-position:left center, right center, left center, right center;
  background-size:28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-repeat:no-repeat;
  background-attachment:local, local, scroll, scroll;
}
@media (max-width:600px){ .table th,.table td{padding:10px 12px} .table{font-size:.88rem} }

.band .tablewrap{
  background-color:#12332a; border-color:rgba(237,237,231,.22);
  background-image:
    linear-gradient(to right, #12332a, rgba(18,51,42,0)),
    linear-gradient(to left,  #12332a, rgba(18,51,42,0)),
    linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,0)),
    linear-gradient(to left,  rgba(0,0,0,.35), rgba(0,0,0,0));
}
.band .table th{color:rgba(237,237,231,.78); border-bottom-color:rgba(237,237,231,.3)}
.band .table td{border-bottom-color:rgba(237,237,231,.14)}
.band .table td:first-child{color:var(--signal)}

.quote{border-left:3px solid var(--signal); padding-left:22px; max-width:56ch}
.quote p{font-family:var(--display); font-weight:700; font-stretch:104%; font-size:clamp(1.1rem,1.9vw,1.55rem); line-height:1.24; text-transform:none; letter-spacing:-.01em}
.quote cite{display:block; margin-top:14px; font-style:normal; font-family:var(--data); font-size:var(--t-data); color:rgba(14,42,34,.76)}

/* ---- 11. DIAGRAMS ------------------------------------------------------- */
.fig{border:1px solid var(--rule); background:var(--plane); padding:clamp(14px,2vw,26px)}
.fig__cap{display:flex; justify-content:space-between; gap:16px; margin-top:14px; padding-top:10px; border-top:1px solid var(--rule-soft)}
.band .fig{background:#12332a; border-color:rgba(237,237,231,.18)}
.band .fig__cap{border-color:rgba(237,237,231,.14)}

/* draw-on: strokes reveal when the figure scrolls into view */
.js .draw{stroke-dasharray:var(--len,900); stroke-dashoffset:var(--len,900)}
.in-view .draw{animation:draw 1.5s cubic-bezier(.6,.05,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.js .rise{opacity:0; transform:translateY(10px)}
.in-view .rise{animation:rise .55s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1; transform:none}}
.pulse{animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35} 50%{opacity:1}}
.flow{stroke-dasharray:6 8; animation:flow 2.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
.js .reveal{opacity:0; transform:translateY(16px)}
.reveal{transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in-view{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .draw{stroke-dashoffset:0}
  .in-view .draw,.in-view .rise{animation:none}
  .js .rise{opacity:1; transform:none}
  .pulse,.flow{animation:none}
  .js .reveal{opacity:1; transform:none; transition:none}
}

/* ---- 12. FOOTER --------------------------------------------------------- */
.ftr{background:var(--ink); color:var(--ink-on-dark); padding-block:var(--step) 30px; margin-top:var(--step)}
.ftr a{color:inherit; text-decoration:none}
.ftr a:hover{color:var(--signal)}
.ftr__grid{display:grid; gap:var(--gut); grid-template-columns:1fr}
@media (min-width:820px){ .ftr__grid{grid-template-columns:1.4fr 1fr 1fr} }
.ftr__list li{padding-block:5px; font-size:.94rem}
.ftr__legal{
  margin-top:44px; padding-top:16px; border-top:1px solid rgba(237,237,231,.18);
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between;
  font-family:var(--data); font-size:.64rem; letter-spacing:.1em; color:rgba(237,237,231,.6);
}

/* accessible skip link — off-screen without creating a scroll region */
.skip{
  position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.skip:focus{
  position:fixed; top:10px; left:10px; width:auto; height:auto; padding:12px 18px;
  clip-path:none; z-index:60;
}