@charset "utf-8";
/* Литорина - янтарная мастерская. Тёплая ручная вёрстка «домашнего» сайта:
   антиква, медовая бумага, врезки на полях, неровные блоки, рисованные разделители. */

:root{
  --paper:#f7efdd; --paper2:#f1e4c6; --card:#fffaf0; --ink:#3a2c18; --soft:#6a5636;
  --faint:#8a7552; --rule:#d8c49a; --rule2:#c6ac78; --amber:#c9801b; --amber-d:#9c5f12;
  --cherry:#8a3220; --leaf:#5c6b2e; --tag:#efe0bd; --note:#fbf3dc;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#201a12; --paper2:#2a2217; --card:#272015; --ink:#ecdfc6; --soft:#c3b088;
    --faint:#9c885f; --rule:#473a26; --rule2:#5a4a30; --amber:#e3a24a; --amber-d:#f0b968;
    --cherry:#d98060; --leaf:#a6b472; --tag:#322817; --note:#2c2316;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  font:17px/1.68 Georgia,"Iowan Old Style",Palatino,"Palatino Linotype","Times New Roman",ui-serif,serif;
  background:
    repeating-linear-gradient(0deg,transparent 0 33px,rgba(155,120,40,.045) 33px 34px),
    radial-gradient(120% 90% at 50% 0,var(--paper) 0,var(--paper2) 100%) fixed;
}
img,svg{max-width:100%}
a{color:var(--amber-d);text-decoration:underline;text-decoration-color:var(--rule2);text-underline-offset:2px}
a:hover{color:var(--cherry)}
h1,h2,h3{font-weight:normal;letter-spacing:.01em}
code,.mono{font-family:ui-monospace,"Courier New",monospace;font-size:.92em}

.page{max-width:720px;margin:0 auto;padding:0 20px}

/* шапка - вывеска и рукописное меню */
header.m{padding:22px 0 10px}
.sign{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink)}
.sign:hover{color:var(--ink)}
.sign svg{flex:none;filter:drop-shadow(0 1px 0 rgba(120,80,20,.18))}
.sign b{font-size:27px;font-style:italic;letter-spacing:.02em;color:var(--amber-d)}
.sign span{font-size:12.5px;color:var(--faint);letter-spacing:.14em;text-transform:lowercase;
  border-left:1px solid var(--rule2);padding-left:11px;margin-left:2px}
nav.menu{margin-top:14px;padding:9px 0 0;border-top:1px dashed var(--rule2);
  display:flex;flex-wrap:wrap;gap:3px 2px;font-size:14.5px}
nav.menu a{padding:2px 10px;color:var(--soft);text-decoration:none;border-right:1px solid var(--rule)}
nav.menu a:last-child{border-right:0}
nav.menu a:hover{color:var(--cherry);background:var(--note)}
nav.menu a[aria-current]{color:var(--cherry);font-style:italic}

/* контент (одна колонка) */
main{padding:10px 0 4px}

h1{font-size:30px;line-height:1.22;margin:4px 0 12px;color:var(--ink)}
h2{font-size:21px;margin:30px 0 9px;color:var(--amber-d);
  border-bottom:1px solid var(--rule);padding-bottom:4px}
h2::before{content:"❧ ";color:var(--rule2);font-size:.9em}
h3{font-size:17.5px;font-style:italic;margin:19px 0 6px;color:var(--cherry)}
p{margin:0 0 13px}
.intro{font-size:19px;line-height:1.56;color:var(--soft);font-style:italic;margin-bottom:16px}
.sm{font-size:14.5px}
.mut{color:var(--faint)}
strong,b{font-weight:bold;color:var(--ink)}

/* рисованные разделители */
hr{border:0;height:0;border-top:1px solid var(--rule);margin:22px 0}
hr.dot{border-top:1px dashed var(--rule2);margin:20px 0}
hr.dot::after{content:""}

/* врезки «на полях» внутри текста */
.aside-note{float:right;width:210px;margin:4px 0 14px 22px;background:var(--note);
  border:1px solid var(--rule);padding:11px 14px;font-size:14px;line-height:1.5;color:var(--soft)}
.aside-note b{display:block;font-style:italic;color:var(--amber-d);font-weight:normal;margin-bottom:4px}
.by{background:var(--tag);border-left:3px solid var(--cherry);padding:10px 15px;margin:0 0 15px;
  font-size:15.5px;font-style:italic;color:var(--soft)}
.by b{font-style:normal;color:var(--cherry);font-weight:normal}

/* списки */
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin:0 0 6px}
ul.no{list-style:none;padding-left:0}
ul.no li{padding-left:22px;position:relative}
ul.no li::before{content:"×";position:absolute;left:4px;color:var(--cherry);font-size:1.1em}

/* две колонки «чем занимаемся» */
.two{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0 0 6px}
.two>div{flex:1;min-width:220px}
.two h3{margin-top:4px}

/* кнопка-ссылка */
.cta{display:inline-block;background:var(--amber);color:#2a1c08;text-decoration:none;
  padding:8px 18px;border:1px solid var(--amber-d);font-style:italic;font-size:15.5px}
.cta:hover{background:var(--amber-d);color:#fff}

/* каталог/таблицы данных */
table{border-collapse:collapse;width:100%;font-size:14.5px;margin:0 0 16px;background:var(--card)}
caption{text-align:left;font-style:italic;color:var(--faint);padding:0 0 7px}
th{text-align:left;font-weight:normal;font-style:italic;color:var(--amber-d);
  border-bottom:2px solid var(--rule2);padding:7px 9px}
td{padding:6px 9px;border-bottom:1px solid var(--rule);vertical-align:top}
tr:hover td{background:var(--note)}
td.n,th.n{text-align:right;font-family:ui-monospace,"Courier New",monospace;white-space:nowrap}

/* страница изделия */
.crumb{font-size:13.5px;color:var(--faint);margin:0 0 16px;font-style:italic}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{color:var(--cherry);text-decoration:underline}
.itemtop{align-items:flex-start;margin-bottom:12px}
.itemfig{margin:0}
.plate{background:var(--paper2);border:1px solid var(--rule);text-align:center;padding:14px}
.itemfacts{min-width:200px}
dl.facts{margin:0 0 12px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14.5px}
dl.facts dt{color:var(--faint);font-style:italic}
dl.facts dd{margin:0}
.pricebig{font-size:19px;color:var(--amber-d)}

/* формы - гостевая и «вход» */
form.hand{background:var(--card);border:1px solid var(--rule2);padding:16px 18px;margin:0 0 16px;max-width:460px}
form.hand label{display:block;font-size:14px;font-style:italic;color:var(--soft);margin:0 0 3px}
form.hand input,form.hand textarea{width:100%;font:inherit;font-size:15px;padding:7px 9px;
  background:var(--paper);border:1px solid var(--rule2);color:var(--ink);margin:0 0 11px}
form.hand textarea{min-height:84px;resize:vertical;line-height:1.5}
form.hand button{font:inherit;font-size:15px;font-style:italic;background:var(--amber);
  color:#2a1c08;border:1px solid var(--amber-d);padding:8px 20px;cursor:pointer}
form.hand button:hover{background:var(--amber-d);color:#fff}
.formout{margin:10px 0 0;padding:10px 13px;border:1px dashed var(--rule2);background:var(--note);
  font-size:14.5px;color:var(--soft);display:none}
.formout.show{display:block}
.formout.err{border-color:var(--cherry);color:var(--cherry)}

/* гостевая книга */
.gb{list-style:none;padding:0;margin:0 0 18px}
.gb li{border-top:1px dashed var(--rule2);padding:12px 0}
.gb li:first-child{border-top:0}
.gb .who{font-style:italic;color:var(--amber-d)}
.gb .when{font-size:12.5px;color:var(--faint);font-family:ui-monospace,"Courier New",monospace}
.gb p{margin:4px 0 0}

/* подвал - компактный, тёплый */
footer.m{margin-top:32px;border-top:3px double var(--rule2);background:var(--paper2)}
footer.m .page{padding:16px 20px 20px}
.fnav{font-size:14px;margin:0 0 8px;line-height:1.95}
.fnav a{color:var(--soft);text-decoration:none}
.fnav a:hover{color:var(--cherry);text-decoration:underline}
.fnote{font-size:13.5px;color:var(--soft);margin:0 0 7px}
.fbot{font-size:12.5px;color:var(--faint);line-height:1.6;margin:0}
.fbot a{color:var(--soft);text-decoration:none}

@media (max-width:760px){
  .aside-note{float:none;width:auto;margin:0 0 14px}
  .two>div{min-width:0}
}
@media (max-width:440px){
  body{font-size:16px}
  .page{padding:0 14px}
  h1{font-size:25px}
  .tile{width:100%}
  nav.menu a{border-right:0;padding:2px 8px 2px 0}
}

/* ===== данные: каталог-фильтр, витрина, журнал, сорта, хронологии ===== */
.flt{background:var(--note);border:1px solid var(--rule);padding:12px 14px;margin:0 0 12px}
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px}
.frow:last-child{margin-bottom:0}
.fl{font-style:italic;color:var(--amber-d);font-size:14px;min-width:66px}
.fb{font:inherit;font-size:14px;background:var(--card);color:var(--soft);
  border:1px solid var(--rule2);padding:4px 11px;cursor:pointer}
.fb:hover{color:var(--cherry);border-color:var(--cherry)}
.fb.on{background:var(--amber);color:#2a1c08;border-color:var(--amber-d)}
#pmax{font:inherit;font-size:14px;width:92px;padding:4px 8px;background:var(--card);
  border:1px solid var(--rule2);color:var(--ink)}
#reset{font:inherit;font-size:14px;font-style:italic;background:none;border:0;
  color:var(--amber-d);cursor:pointer;text-decoration:underline;text-decoration-color:var(--rule2)}
#reset:hover{color:var(--cherry)}
.cnt{font-style:italic;color:var(--faint);font-size:14.5px;margin:0 0 12px}
#empty{display:none;font-style:italic;color:var(--cherry)}
.goods{display:flex;flex-wrap:wrap;gap:16px}
.good{width:calc(50% - 8px);background:var(--card);border:1px solid var(--rule);padding:12px 14px 14px}
.good .plate{display:block;text-decoration:none;margin:0 0 9px;padding:12px}
.good .plate svg{width:100%;height:auto;max-height:96px;color:var(--rule2)}
.good h3{margin:0 0 4px;font-size:16.5px;font-style:italic}
.good h3 a{text-decoration:none}
.good h3 a:hover{text-decoration:underline}
.good p{margin:0;font-size:13.5px;color:var(--faint);line-height:1.45}
.good .price{margin-top:5px;color:var(--amber-d);font-style:normal}
.good .price b{color:var(--cherry);font-weight:normal}

.lead-note{background:var(--tag);border:1px solid var(--rule);border-left:3px solid var(--amber);
  padding:11px 15px;margin:0 0 15px;font-size:15px;color:var(--soft)}
.lead-note p{margin:0}

.log{list-style:none;padding:0;margin:0 0 16px}
.log li{border-top:1px dashed var(--rule2);padding:14px 0}
.log li:first-child{border-top:0}
.log time{display:block;font-size:12.5px;color:var(--faint);
  font-family:ui-monospace,"Courier New",monospace;margin:0 0 3px}
.log .jt{margin:0 0 5px;font-size:17.5px;color:var(--cherry);font-style:italic}
.log p{margin:0}

.grade{border-top:1px dashed var(--rule2);padding:4px 0 2px;margin:0 0 6px}
.grade:first-of-type{border-top:0}
.sw{display:inline-block;width:15px;height:15px;border-radius:3px;border:1px solid rgba(90,60,20,.35);
  vertical-align:-2px;margin-right:8px}
.badge{display:inline-block;font-size:11.5px;font-style:italic;background:var(--cherry);color:#fff;
  padding:1px 8px;border-radius:2px;vertical-align:2px;margin-left:6px;letter-spacing:.02em}

ul.tl{list-style:none;padding-left:0;margin:0 0 16px}
ul.tl li{border-left:2px solid var(--rule2);padding:0 0 13px 16px;position:relative}
ul.tl li::before{content:"";position:absolute;left:-5px;top:7px;width:8px;height:8px;
  border-radius:50%;background:var(--amber);border:1px solid var(--amber-d)}
ul.tl b{color:var(--amber-d);font-weight:normal;font-style:italic}

dl.steps{margin:0 0 16px}
dl.steps dt{font-style:italic;color:var(--cherry);margin:14px 0 3px;font-size:16px}
dl.steps dt:first-child{margin-top:0}
dl.steps dd{margin:0 0 4px;color:var(--soft)}

@media (max-width:460px){
  .good{width:100%}
  .itemtop{flex-direction:column}
}