/* joelkontio.fi — jaettu pohjakerros.
   Lähde: design_handoff_joelkontio_fi/css/joel-base.css (1:1) + README:n vaatimat
   tuotantolisäykset: self-hostatut fontit (ei Google Fonts -kutsuja selaimesta),
   eksplisiittinen fokusrengas, scroll-behavior reduced-motion-ehdon taakse. */

@font-face{font-family:Fraunces;src:url(/fonts/Fraunces-VF.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(/fonts/Fraunces-Italic-VF.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/InterVariable.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{--ink:#0F1A14;--paper:#F5F3EE;--green:#1F3D2C;--rule:rgba(15,26,20,.13);--rule2:rgba(15,26,20,.28);--muted:rgba(15,26,20,.68);--pad:clamp(22px,5vw,64px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.72;font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,.ser{font-family:Fraunces,Georgia,serif;font-weight:400;font-variation-settings:"SOFT" 0,"WONK" 0;letter-spacing:-.015em;line-height:1.08;margin:0;overflow-wrap:break-word}
p{margin:0}
a{color:var(--green);text-decoration:none;text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--ink);text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.col{max-width:34em}
.eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.stack>*+*{margin-top:var(--gap,1.15em)}
/* header */
.site{position:relative;z-index:5}
.site .bar{display:flex;align-items:baseline;justify-content:space-between;gap:20px 24px;padding:19px 0 15px;flex-wrap:wrap}
.mast{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;min-width:0}
.role{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:500;position:relative;padding-left:14px}
.role::before{content:"";position:absolute;left:0;top:.1em;bottom:.05em;width:1px;background:var(--rule2)}
.brand{font-family:Fraunces,Georgia,serif;font-size:19px;letter-spacing:.01em;color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--green)}
.nav{display:flex;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap}
.nav a{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:500}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a[aria-current]{color:var(--ink)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:.7em;min-height:52px;padding:0 30px;background:var(--green);color:var(--paper);font-size:15px;font-weight:500;letter-spacing:.01em;border:0;border-radius:2px;cursor:pointer;font-family:inherit;transition:background .18s}
.btn:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.btn--ghost{background:none;color:var(--ink);border:1px solid var(--rule2);padding:0 26px}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.meta{font-size:14px;color:var(--muted)}
/* footer */
footer{border-top:1px solid var(--rule);margin-top:clamp(80px,12vw,150px);padding:44px 0 60px}
footer .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px}
footer a{color:var(--muted)}
footer a:hover{color:var(--ink)}
.legalline{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;line-height:1.65;color:var(--muted)}
footer .legalline{border-top:1px solid var(--rule);margin-top:clamp(30px,4vw,40px);padding-top:18px}
.legalbar{border-top:1px solid var(--rule);margin-top:clamp(40px,6vw,70px);padding:15px 0 22px}
.avoin{display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#8A5A12;background:rgba(190,140,40,.13);border:1px solid rgba(190,140,40,.35);padding:3px 8px;border-radius:2px;vertical-align:middle}
.navtog{display:none}
.navcta{display:none}
@media(max-width:640px){
.site{position:sticky;top:0;z-index:60;background:var(--paper)}
.site.hide{transform:translateY(-100%)}
.site{transition:transform .28s cubic-bezier(.4,0,.2,1)}
.site .bar{padding:0;gap:0;flex-wrap:wrap;align-items:center;min-height:0}
.mast{gap:0 10px;padding:0;flex:1 1 0%;min-width:0;min-height:54px;align-items:center;flex-wrap:wrap}
.brand{font-size:18px}
.role{font-size:9.5px;letter-spacing:.12em;padding-left:0}
.role::before{display:none}
.navtog{display:flex;flex:0 0 44px;flex-direction:column;justify-content:center;gap:5px;width:44px;height:54px;margin-right:-10px;padding:0 10px 0 0;background:none;border:0;cursor:pointer;align-items:flex-end}
.navtog i{display:block;width:22px;height:1px;background:var(--ink);transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .18s}
.site.open .navtog i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site.open .navtog i:nth-child(2){opacity:0}
.site.open .navtog i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav{display:none}
.site.open .nav{display:flex;flex:0 0 100%;flex-direction:column;width:100%;gap:0;border-top:1px solid var(--rule);padding-bottom:18px}
.site.open .nav a{display:flex;align-items:center;min-height:52px;font-size:12.5px;letter-spacing:.09em;color:var(--muted);border-bottom:1px solid var(--rule)}
.site.open .nav a[aria-current]{color:var(--ink)}
.site.open .nav .navcta{margin-top:20px;color:var(--paper);letter-spacing:.01em;font-size:15px;border-bottom:0;justify-content:center;min-height:52px}
footer{padding:36px 0 48px}
footer .grid{grid-template-columns:1fr;gap:28px}
footer .stack a{display:inline-flex;align-items:center;min-height:38px}
}
@media(max-width:380px){.site .bar{min-height:0}.mast{min-height:50px}.navtog{height:50px}.brand{font-size:17px}}
@media(prefers-reduced-motion:reduce){.site,.navtog i{transition:none}}
.avoin-box{border:1px dashed rgba(190,140,40,.5);background:rgba(190,140,40,.05);padding:clamp(18px,3vw,28px);border-radius:3px}
@media print{.avoin,.avoin-box{display:none}}
/* tuotantolisäys (handoff-README kohta 4): eksplisiittinen fokusrengas */
:focus-visible{outline:2px solid var(--green);outline-offset:2px}