/* Sotatarinat – sama ilme kuin raporteissa */
:root{--muste:#1a1a1a;--teksti:#2a2a2a;--himmea:#666;--viiva:#cfcfcf;--viiva-tumma:#888;--tausta:#fbfaf7;--pinta:#fff}
*{box-sizing:border-box}
html{font-size:17px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tausta);color:var(--teksti);font-family:Georgia,"Times New Roman",serif;line-height:1.55}
h1{font-size:2.1rem;font-weight:normal;line-height:1.2;margin:0 0 .45em;color:var(--muste)}
h2{font-size:1.35rem;font-weight:normal;color:var(--muste);border-bottom:.6pt solid var(--viiva-tumma);padding-bottom:6px;margin:0 0 16px}
h2 .nro{color:#888;margin-right:10px}
h3{font-size:1rem;margin:18px 0 6px;color:var(--muste)}
p{margin:0 0 .8em}
a{color:var(--muste)}
img{max-width:100%;display:block}
.sisalto{max-width:1040px;margin:0 auto;padding:0 24px}
.pieni{font-size:.85rem;color:#444}
.lahde{font-size:.78rem;color:var(--himmea)}

header{border-bottom:.6pt solid var(--viiva-tumma)}
header .sisalto{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:18px;padding-bottom:14px;flex-wrap:wrap}
.logo{font-size:1.9rem;color:var(--muste);text-decoration:none;letter-spacing:.5px}
.ylarivi{font-size:.72rem;letter-spacing:1.4px;text-transform:uppercase;color:#555}
header nav a{font-size:.85rem;color:#444;margin-left:18px;text-decoration:none}
header nav a:hover{text-decoration:underline}

/* Alku: esittely + tilaus rinnakkain */
.alku{display:grid;grid-template-columns:1fr 430px;grid-template-areas:'esittely tilaus' 'faktat tilaus';grid-template-rows:auto 1fr;column-gap:48px;padding-top:36px;padding-bottom:40px;align-items:start}
.esittely{grid-area:esittely}.tilauslaatikko{grid-area:tilaus}.alku .tosiasiat{grid-area:faktat;margin-top:4px}
.ingressi{font-size:1.08rem}
.tosiasiat{width:100%;border-collapse:collapse;margin:18px 0 0;font-size:.9rem}
.tosiasiat td{padding:7px 0;border-bottom:.4pt solid var(--viiva);vertical-align:top}
.tosiasiat td:first-child{color:var(--himmea);width:34%}
.tosiasiat tr:first-child td{border-top:.4pt solid var(--viiva)}

.tilauslaatikko{background:var(--pinta);border:.6pt solid var(--viiva-tumma);padding:22px 22px 18px}
.tilauslaatikko h2{border:0;padding:0;margin:0 0 4px;font-size:1.25rem}
.tilauslaatikko .hintarivi{font-size:.9rem;color:#444;margin-bottom:14px}
.kentta{margin-bottom:10px}
label{display:block;font-size:.8rem;color:#444;margin-bottom:3px}
input[type=text],input[type=email],input[type=tel],textarea{width:100%;font:inherit;font-size:.95rem;padding:7px 9px;border:.6pt solid #aaa;border-radius:0;background:#fff;color:var(--muste)}
textarea{min-height:70px}
input:focus,textarea:focus{outline:1.5px solid var(--muste);outline-offset:0}
.rivi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.henkilo{border-top:.4pt solid var(--viiva);padding-top:10px;margin-top:6px}
.henkilo .otsake{display:flex;justify-content:space-between;font-size:.8rem;color:var(--himmea);margin-bottom:6px}
.poista,.linkkinappi{background:none;border:0;padding:0;font:inherit;font-size:.82rem;color:var(--muste);text-decoration:underline;cursor:pointer}
.osio-otsake{font-size:.8rem;color:var(--himmea);border-top:.4pt solid var(--viiva);padding-top:10px;margin-top:12px;margin-bottom:6px}
details.lisat summary{font-size:.82rem;cursor:pointer;margin:10px 0 6px;color:#444}
.valinta{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;color:#333;margin:12px 0}
.valinta input{margin-top:3px}
.summa{display:flex;justify-content:space-between;align-items:baseline;border-top:.6pt solid var(--viiva-tumma);padding-top:10px;margin-top:12px}
.summa strong{font-size:1.35rem;font-weight:normal;color:var(--muste)}
.nappi{display:block;width:100%;background:var(--muste);color:#fff;border:0;padding:12px;font:inherit;font-size:1rem;cursor:pointer;margin-top:10px}
.nappi:hover{background:#000}
.nappi[disabled]{opacity:.6;cursor:default}
.virhe{color:#8f2a1d;font-size:.85rem;margin-top:8px}
.kiitos{border:.6pt solid var(--viiva-tumma);padding:14px;background:#f4f3ee}

/* Osiot raportin tapaan */
section.osa{padding:26px 0 18px}
table.taulu{width:100%;border-collapse:collapse;font-size:.92rem;margin:0 0 12px}
table.taulu th,table.taulu td{text-align:left;vertical-align:top;padding:7px 10px 7px 0;border-bottom:.4pt solid var(--viiva)}
table.taulu th{border-bottom:.8pt solid #555;font-weight:bold}
table.taulu td.k{width:30%;color:#444}
.sivut{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:6px 0 10px}
.sivut figure{margin:0}
.sivut img{border:.6pt solid var(--viiva);background:#fff}
.sivut figcaption{font-size:.74rem;color:var(--himmea);margin-top:5px}
blockquote{margin:6px 0 10px;padding-left:12px;border-left:1.5pt solid #999;font-style:italic}
.kaksi{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.arviot{columns:2;column-gap:28px}
.arvio{break-inside:avoid;margin:0 0 12px;padding-top:8px;border-top:.4pt solid var(--viiva)}
.arvio blockquote{border:0;padding:0;margin:0 0 3px;font-size:.92rem}
.arvio figcaption{font-size:.78rem;color:var(--himmea)}
.tahdet{letter-spacing:1px;margin-right:6px;color:#333}
.tahdet .tyhja{color:#c8c8c8}
details.kysymys{border-bottom:.4pt solid var(--viiva);padding:8px 0}
details.kysymys summary{cursor:pointer;color:var(--muste)}
details.kysymys p{margin:.5em 0 .2em;font-size:.95rem}
details.asiakirja{border-top:.4pt solid var(--viiva);padding:10px 0}
details.asiakirja summary{cursor:pointer;color:var(--muste)}
details.asiakirja .teksti{font-size:.88rem;margin-top:8px}
details.asiakirja h3{font-size:.92rem}

footer{border-top:.6pt solid var(--viiva-tumma);margin-top:20px;padding:18px 0 28px;font-size:.8rem;color:var(--himmea)}

@media (max-width:900px){
  .alku{grid-template-columns:1fr;grid-template-areas:'esittely' 'tilaus' 'faktat';row-gap:22px;padding-top:24px}
  .sivut{grid-template-columns:1fr 1fr}
  .kaksi{grid-template-columns:1fr}
  .arviot{columns:1}
  header nav{display:none}
}
@media (max-width:480px){.sisalto{padding:0 14px}.rivi{grid-template-columns:1fr}.tilauslaatikko{padding:16px}}
dialog{max-width:760px;width:calc(100% - 28px);max-height:85vh;border:.6pt solid var(--viiva-tumma);padding:24px 28px;background:var(--pinta);color:var(--teksti)}
dialog::backdrop{background:rgba(0,0,0,.35)}
dialog .teksti{font-size:.9rem}
dialog h2{font-size:1.2rem}
dialog h3{font-size:.92rem}
dialog .nappi{width:auto;padding:8px 22px;margin-top:14px}

/* Kuvat */
figure.nauha{margin:8px 0 0;position:relative}
figure.nauha img{width:100%;height:340px;object-fit:cover;object-position:center 45%;filter:grayscale(1) contrast(1.05)}
figure.nauha figcaption{font-size:.74rem;color:var(--himmea);padding-top:8px}
.kortit{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kortti{margin:0;background:var(--pinta);border:.6pt solid var(--viiva)}
.kortti .kuva{aspect-ratio:4/3;overflow:hidden;background:#eee;border-bottom:.6pt solid var(--viiva)}
.kortti .kuva img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.kortti figcaption{padding:12px 14px 14px;font-size:.88rem;line-height:1.45}
.kortti figcaption strong{display:block;font-weight:normal;font-size:1.02rem;color:var(--muste);margin-bottom:3px}
.galleria{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}
.galleria figure{margin:0}
.galleria img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(1)}
.galleria figcaption{font-size:.74rem;color:var(--himmea);margin-top:5px;line-height:1.35}
.yhteys{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:start}
.yhteys .nimi{font-size:1.8rem;color:var(--muste);letter-spacing:.5px}
@media (max-width:900px){
  .kortit{grid-template-columns:1fr 1fr}
  .galleria{grid-template-columns:1fr 1fr}
  .yhteys{grid-template-columns:1fr;gap:18px}
  figure.nauha img{height:200px}
}
@media (max-width:480px){.kortit{grid-template-columns:1fr}}

/* Ostoskori */
.nappi.toissijainen{background:#fff;color:var(--muste);border:.8pt solid var(--muste)}
.nappi.toissijainen:hover{background:#f1f0eb}
.ostoskori{margin-top:16px;border-top:.6pt solid var(--viiva-tumma);padding-top:12px}
.kori-otsake{display:flex;justify-content:space-between;align-items:baseline;font-size:1.05rem;color:var(--muste)}
.kori-otsake span:last-child{font-size:.82rem;color:var(--himmea)}
#kori-lista{list-style:none;margin:8px 0 0;padding:0}
#kori-lista li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:.4pt solid var(--viiva);font-size:.92rem}
#kori-lista .hinta{text-align:right;white-space:nowrap}
header nav a.korilinkki{color:var(--muste);border:.6pt solid var(--viiva-tumma);padding:5px 10px;margin-left:22px}
@media (max-width:900px){header nav{display:block}header nav a{display:none}header nav a.korilinkki{display:inline-block;margin-left:0}}

/* Ostoskoripaneeli */
.koripaneeli[hidden]{display:none}
.koripaneeli{position:fixed;inset:0;z-index:50}
.koripaneeli .tausta{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.koripaneeli .laatikko{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--pinta);border-left:.6pt solid var(--viiva-tumma);padding:22px 22px 30px;overflow-y:auto}
.koripaneeli .ostoskori{margin:0;border:0;padding:0}
.koripaneeli .sulje{position:absolute;top:10px;right:14px;background:none;border:0;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--muste)}
.koripaneeli .kori-otsake{font-size:1.3rem;padding-right:34px}
.korinappi{display:block;width:100%;margin-top:10px;background:#f4f3ee;border:.6pt solid var(--viiva-tumma);padding:10px;font:inherit;font-size:.92rem;cursor:pointer;color:var(--muste)}
.korinappi:hover{background:#ebe9e2}

.korinappi[hidden],[hidden]{display:none !important}

/* Kokeilu: peilattu arkistokuva, vaalea puoli tekstin takana ja tumma tilauslaatikon takana */
@media (min-width:901px){
  .hero-kuva{position:relative;background:#cfcdc8 url(kuvat/nauha_saaret_peili.jpg) center 55%/cover no-repeat}
  .hero-kuva:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,250,247,.82) 0%,rgba(251,250,247,.55) 45%,rgba(14,15,16,.15) 75%,rgba(14,15,16,.35) 100%)}
  .hero-kuva .alku{position:relative;padding-top:84px;padding-bottom:84px;min-height:600px;align-items:center}
  .hero-kuva h1{color:var(--muste);font-size:2.6rem}
  .hero-kuva .ingressi{color:#222;max-width:30em}
  .hero-kuva .tilauslaatikko{box-shadow:0 24px 60px rgba(0,0,0,.4);border-color:#fff}
  .hero-kuva + figure.nauha{display:none}
  header{background:var(--tausta)}
}

/* Tilauslaatikon otsikko ja painike */
.tilauslaatikko h2{font-size:1.55rem}
#lisaa{display:flex;justify-content:space-between;align-items:center;background:#2b2b2b;font-size:.95rem;padding:12px 16px;letter-spacing:.2px}
#lisaa:hover{background:#1a1a1a}
#lisaa .h{font-size:1.25rem;opacity:1}
/* Tilauslaatikon tekstit isommiksi */
.tilauslaatikko label{font-size:.95rem;color:#333}
.tilauslaatikko input[type=text],.tilauslaatikko input[type=email],.tilauslaatikko input[type=tel],.tilauslaatikko textarea{font-size:1.08rem;padding:9px 11px}
.tilauslaatikko .osio-otsake{font-size:.95rem}
.tilauslaatikko details.lisat summary{font-size:.95rem}
#lisaa{font-size:1.12rem}
.korinappi{font-size:1rem}
/* Taustakuva myös puhelimella */
@media (max-width:900px){
  .hero-kuva{position:relative;background:#cfcdc8 url(kuvat/nauha_saaret_peili.jpg) 30% 60%/cover no-repeat}
  .hero-kuva:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,250,247,.62) 0%,rgba(251,250,247,.42) 30%,rgba(14,15,16,.1) 60%,rgba(14,15,16,.35) 100%)}
  .hero-kuva .alku{position:relative;padding-top:28px;padding-bottom:36px}
  .hero-kuva .ingressi{color:#1d1d1d}
  .hero-kuva .tilauslaatikko{box-shadow:0 18px 44px rgba(0,0,0,.35);border-color:#fff}
  .hero-kuva + figure.nauha{display:none}
}