/* Nautiskelija — kevyt ilme: serif-fontti omalta palvelimelta, vanhan sivuston värit
   (kermanvaalea tausta, viininpunainen, oliivi), responsiivinen. Ei inline-tyylejä (CSP). */

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../lib/fonts/source-serif-4-latin-400-normal.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: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../lib/fonts/source-serif-4-latin-ext-400-normal.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: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../lib/fonts/source-serif-4-latin-400-italic.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: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../lib/fonts/source-serif-4-latin-ext-400-italic.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: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../lib/fonts/source-serif-4-latin-700-normal.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: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../lib/fonts/source-serif-4-latin-ext-700-normal.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: "Source Serif 4"; font-style: italic; font-weight: 700; font-display: swap;
  src: url(../lib/fonts/source-serif-4-latin-700-italic.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: "Source Serif 4"; font-style: italic; font-weight: 700; font-display: swap;
  src: url(../lib/fonts/source-serif-4-latin-ext-700-italic.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; }

:root {
  --cream: #fbf0d2;          /* vanha taustaväri, logon tausta */
  --paper: #fffaf0;
  --wine: #990000;           /* vanhat linkit ja korostukset */
  --olive: #666633;
  --olive-light: #cccc99;
  --line: #e3d7b4;
  --text: #2b2118;
  --muted: #6b5d4a;
  --box: #f4ead0;
  --measure: 42rem;
}

* { box-sizing: border-box; }
html { font-size: 112.5%; }
body {
  margin: 0; background: var(--cream); color: var(--text);
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif; line-height: 1.6;
}
a { color: var(--wine); text-underline-offset: .15em; }
a:hover { color: #600; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { line-height: 1.25; color: #3d1f12; }
h1 { font-size: 1.9rem; margin: .2em 0 .5em; }
h2 { font-size: 1.35rem; }

.site-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  max-width: 64rem; margin: 0 auto; padding: .75rem 1rem 0; }
.site-header .logo img { display: block; width: 220px; height: auto; }
.issn { margin: 0 0 .4rem; font-size: .8rem; color: var(--muted); }

.main-nav, .sub-nav { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
.main-nav ul, .sub-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem .9rem; }
.main-nav { border-bottom: 2px solid var(--olive); }
.main-nav a, .sub-nav a { text-decoration: none; display: inline-block; padding: .45rem 0; color: var(--olive); }
.main-nav li.current a { color: var(--wine); font-weight: 700; border-bottom: 3px solid var(--wine); }
.sub-nav { font-size: .9rem; border-bottom: 1px solid var(--line); }
.sub-nav li.current a { color: var(--wine); font-weight: 700; }

main { max-width: 64rem; margin: 0 auto; padding: 1rem 1rem 2rem; background: var(--paper); min-height: 50vh; }
main > * { max-width: var(--measure); }
main > .front { max-width: none; }

.site-footer { max-width: 64rem; margin: 0 auto; padding: 1rem; font-size: .85rem; color: var(--muted);
  border-top: 2px solid var(--olive); }
.site-footer p { margin: .3rem 0; }

.date, .meta { color: var(--muted); font-size: .9rem; }
.subscriber-note, .locked { background: var(--box); border-left: 4px solid var(--wine); padding: .5rem .8rem; font-size: .95rem; }

.story-list { list-style: none; padding: 0; }
.story-list li { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.story-list h2 { font-size: 1.2rem; margin: 0; }
.story-list .date { margin: .1rem 0 .3rem; }
.story-list .excerpt { margin: 0; }

.pager { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; align-items: center; }
.pager a, .pager strong { padding: .15rem .5rem; border: 1px solid var(--olive-light); border-radius: 3px; text-decoration: none; }
.pager strong { background: var(--wine); color: #fff; border-color: var(--wine); }

.story .highlight { float: right; width: 40%; margin: 0 0 1rem 1rem; padding: .8rem; background: #e9eef4; font-style: italic; }
.story .ingress { background: var(--box); padding: .6rem 1rem; margin-bottom: 1rem; }
.story .reference, .wisdom .reference { font-size: .9rem; color: var(--muted); }
.story-notes { clear: both; }
@media (max-width: 40rem) { .story .highlight { float: none; width: auto; margin: 0 0 1rem; } }

.tasting-note { border: 1px solid var(--line); background: #fff; padding: .8rem 1rem; margin: 1rem 0; border-radius: 4px; }
.tasting-note header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.tasting-note h3 { margin: 0; font-size: 1.15rem; padding-left: .6rem; border-left: 6px solid #ccc; }
.tasting-note .np { font-size: 2rem; font-weight: 700; color: var(--wine); margin: 0; line-height: 1; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .1rem .8rem; margin: .6rem 0; font-size: .95rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

/* Pistekortti: isot luvut nimin, rakenne palkkeina (meter: ei inline-tyylejä), luku aina näkyvissä. */
.scorecard { border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .6rem; }
.score-main { display: flex; flex-wrap: wrap; gap: .6rem; }
.score { flex: 1 1 8rem; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--box); border: 1px solid var(--line); border-radius: 4px; padding: .4rem .5rem; }
.score-label { font-size: .85rem; color: var(--muted); }
.score-value { font-size: 2.1rem; font-weight: 700; line-height: 1.1; color: var(--wine); }
.score-note { font-size: .85rem; font-style: italic; }
.abbr { font-size: .8em; color: var(--muted); }
.structure { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem .8rem; margin: .8rem 0 .3rem; align-items: center; }
.structure dt { font-size: .95rem; }
.structure dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; }
.structure meter { flex: 1 1 8rem; max-width: 16rem; height: .8rem; -webkit-appearance: none; appearance: none;
  background: #efe6cd; border: 1px solid var(--olive-light); border-radius: 3px; }
.structure meter::-webkit-meter-bar { background: #efe6cd; border: 0; border-radius: 3px; height: .8rem; }
.structure meter::-webkit-meter-optimum-value, .structure meter::-webkit-meter-suboptimum-value,
.structure meter::-webkit-meter-even-less-good-value { background: var(--olive); border-radius: 2px; }
.structure meter::-moz-meter-bar { background: var(--olive); border-radius: 2px; }
.bar-value { font-weight: 700; min-width: 2ch; }
.bar-level { font-size: .9rem; color: var(--muted); }
.dots { letter-spacing: .15em; color: var(--olive); font-size: 1.05rem; }
.score-help { font-size: .9rem; margin: .3rem 0 0; }
@media (max-width: 34rem) { .structure { grid-template-columns: 1fr; gap: .1rem; } .structure dt { margin-top: .3rem; } }
.classification { font-weight: 700; }
.badge { font-weight: 400; font-size: .8rem; background: var(--olive); color: #fff; padding: .05rem .4rem; border-radius: 3px; margin-left: .3rem; }

/* Viinityyppien värit vanhasta sivustosta (reunaviiva). */
.wt-red { border-left-color: #cc6699 !important; }
.wt-rose { border-left-color: #ff6699 !important; }
.wt-white { border-left-color: #ccff33 !important; }
.wt-medium { border-left-color: #ffff66 !important; }
.wt-sweet { border-left-color: #ff9933 !important; }
.wt-fortified { border-left-color: #cc6633 !important; }
.wt-sparkling { border-left-color: #cccc66 !important; }

.front { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; }
@media (max-width: 52rem) { .front { grid-template-columns: 1fr; } }
.front-side section { margin-bottom: 1.5rem; }
.front-side h2 { font-size: 1.15rem; border-bottom: 1px solid var(--olive-light); padding-bottom: .2rem; }
.front-side ul { list-style: none; padding: 0; margin: 0; }
.front-side li { padding: .3rem 0; border-bottom: 1px dotted var(--line); }
.recommended li { padding-left: .5rem; border-left: 5px solid #ccc; margin-bottom: .2rem; }
.recommended .meta { display: block; }
.np-small { color: var(--wine); margin-left: .3rem; }
.wisdom { background: var(--box); padding: .6rem 1rem; }

.letters { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0; }
.letters a, .letters strong { min-width: 1.8rem; text-align: center; padding: .1rem .3rem; border: 1px solid var(--olive-light); text-decoration: none; }
.letters strong { background: var(--wine); color: #fff; border-color: var(--wine); }
.glossary { columns: 16rem; }

.years { display: flex; flex-wrap: wrap; gap: .4rem; }
.years a, .years strong { padding: .1rem .4rem; }
.archive { list-style: none; padding: 0; }
.archive li { padding: .2rem 0; }
.archive .date { display: inline-block; min-width: 6rem; }
.locked-title { color: var(--muted); }

.feedback { display: grid; gap: .4rem; max-width: 32rem; }
.feedback input, .feedback textarea { font: inherit; padding: .4rem; border: 1px solid var(--olive-light); background: #fff; }
.feedback button { justify-self: start; font: inherit; padding: .3rem 1rem; }
.note { color: var(--muted); font-size: .9rem; }

table { border-collapse: collapse; }
td, th { padding: .2rem .4rem; vertical-align: top; }

/* Sisällön sallitut luokat (HtmlCleaner.ContentClasses): editorin tasaus- ja kelluntatyylit
   tallennetaan luokkina, koska CSP ei salli style-attribuutteja. Koskevat myös editoria. */
.ta-left { text-align: left; }
.ta-center { text-align: center; }
.ta-right { text-align: right; }
.ta-justify { text-align: justify; }
.float-left { float: left; margin: .2rem 1.2rem .8rem 0; }
.float-right { float: right; margin: .2rem 0 .8rem 1.2rem; }
.img-center { display: block; margin: .5rem auto; }
/* Solun pystytasaus valign-attribuutista (yleissääntö td { vertical-align: top } ohittaisi sen). */
td[valign="middle" i], th[valign="middle" i] { vertical-align: middle; }
td[valign="bottom" i], th[valign="bottom" i] { vertical-align: bottom; }
/* Editorilla lisätty taulukko. */
table.grid { width: 100%; margin: 1rem 0; }
table.grid th, table.grid td { border: 1px solid var(--olive-light); padding: .3rem .5rem; }
/* Visailun taulukko: kysymys | vastaus. */
table.visa { width: 100%; margin: 1rem 0; }
table.visa th, table.visa td { border: 1px solid var(--olive-light); padding: .4rem .6rem; }
table.visa th { text-align: left; background: var(--olive-light); }
table.visa td:first-child { width: 60%; }

/* Juomavisailu (/juttu/N, StoryQuizItem): numerointi <ol>:sta, vastaus <details>-elementissä (ei JS:ää).
   Kysymys normaalilla painolla (pitkät kysymykset eivät ole raskaita), järjestysnumero lihavana viininpunaisella,
   avattu vastaus omassa kevyesti sävytetyssä laatikossaan. Kohtien välissä viiva kuten vanhassa. Kuvat pysyvät kohdan sisällä. */
ol.quiz { padding-left: 2.1rem; margin: 1rem 0; }
ol.quiz > li { padding: .9rem 0; border-top: 1px solid var(--olive-light); }
ol.quiz > li:first-child { border-top: 0; }
ol.quiz > li::marker { font-weight: 700; color: var(--wine); }
.quiz-question { color: var(--text); font-weight: 400; }
.quiz-question > :first-child, .quiz-answer > div > :first-child { margin-top: 0; }
.quiz-question > :last-child, .quiz-answer > div > :last-child { margin-bottom: 0; }
.quiz-question::after, .quiz-answer > div::after { content: ""; display: block; clear: both; }
.quiz-answer { margin-top: .5rem; }
.quiz-answer > summary { cursor: pointer; color: var(--olive); font-size: .9rem; }
.quiz-answer[open] > summary { margin-bottom: .35rem; }
.quiz-answer > div { color: var(--wine); background: var(--box); border-left: 3px solid var(--olive-light);
  border-radius: 0 4px 4px 0; padding: .5rem .8rem; overflow-wrap: anywhere; }
ol.quiz img { max-width: 100%; height: auto; }

/* Pohjan esimerkkisivu (/esimerkki). */
#notes form { display: flex; gap: .5rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.error { color: #b00020; }

/* Vanhan sisällön kuvat: väli tuli inline-tyylistä, jonka puhdistus poistaa (CSP).
   Kellutus tulee align-attribuutista; väli lisätään tässä. */
img[align="left" i] { float: left; margin: .2rem 1.2rem .8rem 0; }
img[align="right" i] { float: right; margin: .2rem 0 .8rem 1.2rem; }
.site-text, .body, .ingress, .review, .analysis { display: flow-root; }   /* kelluvat kuvat pysyvät laatikossa */
@media (max-width: 34rem) { img[align] { max-width: 45%; } }

/* Haku */
.header-side { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.site-search { display: flex; gap: .3rem; margin: 0; }
.site-search input { font: inherit; font-size: .9rem; padding: .2rem .4rem; width: 11rem; border: 1px solid var(--olive-light); }
.site-search button, .text-search button, .wine-search button { font: inherit; padding: .25rem .9rem; background: var(--wine); color: #fff; border: 0; border-radius: 3px; cursor: pointer; }
@media (max-width: 34rem) { .header-side { align-items: stretch; width: 100%; } .site-search input { flex: 1; width: auto; } }

.text-search { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.text-search input { flex: 1 1 12rem; font: inherit; padding: .35rem; border: 1px solid var(--olive-light); }

main > .wine-search { max-width: none; }
.wine-search fieldset { border: 1px solid var(--line); padding: .6rem .8rem; margin: 0 0 .8rem; }
.wine-search legend { font-weight: 700; padding: 0 .3rem; }
.wine-search .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem 1rem; }
.wine-search label { display: flex; flex-direction: column; gap: .15rem; font-size: .95rem; }
.wine-search input:not([type=checkbox]), .wine-search select { font: inherit; padding: .3rem .4rem; border: 1px solid var(--olive-light); background: #fff; min-width: 0; }
.wine-search .range { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .4rem; font-size: .95rem; }
.wine-search label.sub { font-size: .8rem; color: var(--muted); gap: .05rem; min-width: 0; }
.wine-search label.sub input { width: 100%; font-size: 1rem; color: var(--text); }
.wine-search .range > span:first-child { grid-column: 1 / -1; }
.wine-search .range .note { grid-column: 1 / -1; font-size: .85rem; }
.wine-search .sellers { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .6rem 0 0; }
.wine-search label.check { flex-direction: row; align-items: center; gap: .35rem; }
.wine-search .advanced { display: block; width: 100%; margin-bottom: .8rem; }
.wine-search .advanced summary { cursor: pointer; color: var(--wine); padding: .3rem 0; }
.wine-search .advanced .fields { margin-top: .5rem; }
.wine-search .checks { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: .6rem; }
.wine-search .actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; }
.wine-search input[type=checkbox] { width: 1.1rem; height: 1.1rem; }

.results { padding-left: 2.2rem; }
.results li { padding: .4rem 0 .4rem .5rem; border-bottom: 1px solid var(--line); border-left: 5px solid #ccc; }
.results .meta { display: block; }
.help { margin: .6rem 0; border-top: 1px solid var(--line); padding-top: .4rem; }
.help summary { cursor: pointer; color: var(--wine); font-weight: 700; }

/* Tili ja lomakkeet (vaihe 4) */
.account-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; font-size: .9rem; }
.account-nav form { display: inline; margin: 0; }
.account-nav .cta { background: var(--wine); color: #fff; padding: .1rem .7rem; border-radius: 3px; text-decoration: none; }
.account-nav .expiring { color: #8a4b00; font-weight: 700; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--wine); text-decoration: underline; cursor: pointer; }
.account-form { display: grid; gap: .5rem; max-width: 30rem; margin: 1rem 0 1.5rem; }
.account-form fieldset { border: 1px solid var(--line); padding: .6rem .8rem; display: grid; gap: .5rem; margin: 0; }
.account-form legend { font-weight: 700; padding: 0 .3rem; }
.account-form label { display: flex; flex-direction: column; gap: .15rem; }
.account-form label.check { flex-direction: row; align-items: center; gap: .4rem; }
.account-form input:not([type=checkbox]), .account-form select, .account-form textarea { font: inherit; padding: .35rem; border: 1px solid var(--olive-light); background: #fff; }
.account-form button, .feedback button { justify-self: start; font: inherit; padding: .35rem 1.1rem; background: var(--wine); color: #fff; border: 0; border-radius: 3px; cursor: pointer; }
.success { background: #e6f2e0; border-left: 4px solid #3b6b2a; padding: .5rem .8rem; }
.error ul { margin: .2rem 0; }
.plan { background: var(--box); padding: .4rem 1rem; margin-bottom: 1rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }