/*
Theme Name: Kraken Legends
Theme URI: https://krakenlegends.com
Author: Kraken Legends
Description: Двуязычная тема для архива рыб, вод и сказаний. Светлая палитра «Морская наука», Newsreader + Literata + Manrope, круглая печать в колофоне.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: krakenlegends
Tags: two-columns, custom-menu, translation-ready, editor-style
*/

/* ==========================================================================
   1. Токены
   ========================================================================== */

:root{
  --bg:#FCFDFD;
  --bg2:#EFF4F5;
  --bg3:#E3EBED;
  --fg:#0E2029;
  --fg2:#516A73;
  --fg3:#7E939A;
  --acc:#0E7A89;
  --acc-soft:rgba(14,122,137,.11);
  --amber:#A4701A;
  --amber-soft:rgba(164,112,26,.13);
  --line:rgba(14,32,41,.13);
  --line-soft:rgba(14,32,41,.07);
  --ink-draw:#2A4A55;

  --display:"Newsreader",Georgia,serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1160px;
  --gap:30px;
}

/* Русские заголовки — Literata: у Newsreader нет кириллицы */
html[lang^="ru"]{
  --display:"Literata",Georgia,serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-weight:300;
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gap)}
.wrap--narrow{max-width:820px}

h1,h2,h3,h4,.dsp{
  font-family:var(--display);
  font-weight:300;
  letter-spacing:-.015em;
  text-wrap:balance;
  margin:0 0 .5em;
  color:var(--fg);
}
h1{font-size:clamp(34px,5vw,58px);line-height:1.04}
h2{font-size:clamp(26px,3.4vw,38px);line-height:1.1}
h3{font-size:clamp(21px,2.4vw,27px);line-height:1.18}
h4{font-size:19px;line-height:1.25}

p{margin:0 0 1.15em}
a{color:var(--acc);text-decoration:none;border-bottom:1px solid var(--acc-soft);transition:border-color .18s,color .18s}
a:hover,a:focus-visible{border-color:var(--acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

img{max-width:100%;height:auto;display:block}
hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

blockquote{
  margin:1.8em 0;padding:0 0 0 22px;
  border-left:3px solid var(--acc);
  font-family:var(--display);font-size:1.22em;line-height:1.45;color:var(--fg);
}
blockquote p:last-child{margin-bottom:0}
blockquote cite{
  display:block;margin-top:.7em;font-family:var(--body);font-size:13px;
  font-style:normal;color:var(--fg3);letter-spacing:.04em;
}

code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
pre{background:var(--bg2);padding:16px 18px;border-radius:4px;overflow-x:auto}
code{background:var(--bg2);padding:.12em .35em;border-radius:3px}
pre code{background:none;padding:0}

table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line-soft);text-align:left}
th{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}
.table-scroll{overflow-x:auto;margin:1.6em 0}

.label{
  font-size:10.5px;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--fg3);
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--fg);color:var(--bg);padding:10px 16px;border:0;
}
.skip-link:focus{left:8px;top:8px}

/* ==========================================================================
   2. Шапка
   ========================================================================== */

.masthead{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.mark{display:flex;align-items:center;gap:10px;border:0}
.mark svg{display:block;width:32px;height:32px;color:var(--acc);flex:0 0 auto}
.mark b{font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:-.01em;color:var(--fg)}
.mark:hover b{color:var(--acc)}

.head-right{display:flex;align-items:center;gap:22px}

.nav-main{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav-main a{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg2);border-bottom:1px solid transparent;padding:4px 0;
}
.nav-main a:hover,.nav-main .current-menu-item > a{color:var(--acc);border-color:var(--acc)}

.langs{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;list-style:none;margin:0;padding:0}
.langs li + li{border-left:1px solid var(--line)}
.langs a,.langs .current-lang span{
  display:block;padding:5px 11px;border:0;
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--fg3);
}
.langs a:hover{color:var(--fg)}
.langs .current-lang a,.langs .current-lang span{background:var(--acc);color:var(--bg)}

.nav-toggle{display:none;appearance:none;background:none;border:1px solid var(--line);border-radius:3px;padding:7px 11px;cursor:pointer;color:var(--fg2);font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}

/* ==========================================================================
   3. Герой и тома
   ========================================================================== */

.hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);
  gap:54px;align-items:center;padding:56px 0 62px;
}
.hero h1{font-size:clamp(44px,6.4vw,74px);line-height:1.02;margin:16px 0 0}
.hero .motto{font-family:var(--display);font-style:italic;font-size:20px;color:var(--acc);margin:18px 0 0}
.hero .lede{max-width:52ch;margin:22px 0 0;color:var(--fg2);text-wrap:pretty}

.badges{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.badge{
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 11px;border-radius:2px;background:var(--bg2);color:var(--fg2);
}
.badge--on{background:var(--acc-soft);color:var(--acc)}

.plate{
  position:relative;background:var(--bg2);border-radius:5px;padding:22px 22px 16px;margin:0;
}
.plate figcaption{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-top:13px;margin-top:6px;border-top:1px solid var(--line);
}
.plate figcaption em{font-style:italic;color:var(--fg2);font-size:13px;font-family:var(--display)}

.volumes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;background:var(--line-soft);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.vol{background:var(--bg);padding:30px 26px 32px;transition:background .2s;border:0}
.vol:hover{background:var(--bg2)}
.vol .num{font-family:var(--display);font-size:12px;letter-spacing:.2em;color:var(--acc);text-transform:uppercase}
.vol h3{font-size:26px;margin:10px 0 9px;line-height:1.15}
.vol p{margin:0;font-size:14.5px;line-height:1.65;color:var(--fg2)}
.vol .count{
  display:block;margin-top:16px;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   4. Секции и списки записей
   ========================================================================== */

.section{padding:56px 0}
.section-head{display:flex;align-items:baseline;gap:16px;margin-bottom:28px}
.section-head h2{margin:0}
.section-head .rule{flex:1;height:1px;background:var(--line-soft)}

.entries{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.entry{background:var(--bg);padding:24px 24px 26px;display:flex;flex-direction:column;gap:9px;transition:background .18s}
.entry:hover{background:var(--bg2)}
.entry .kicker{font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--acc)}
.entry h2,.entry h3{font-size:23px;margin:0;line-height:1.16}
.entry h2 a,.entry h3 a{color:var(--fg);border:0}
.entry:hover h2 a,.entry:hover h3 a{color:var(--acc)}
.entry .bi{font-family:var(--display);font-style:italic;font-size:14.5px;color:var(--acc);margin:0}
.entry p{margin:0;font-size:14.5px;line-height:1.6;color:var(--fg2)}
.entry .meta{margin-top:auto;padding-top:12px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}
.entry .thumb{margin:-24px -24px 4px;background:var(--bg3)}

/* ==========================================================================
   5. Одиночная запись
   ========================================================================== */

.single-head{padding:46px 0 30px;border-bottom:1px solid var(--line-soft)}
.single-head .kicker{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.single-head h1{margin:12px 0 0}
.single-head .bi{font-family:var(--display);font-style:italic;font-size:19px;color:var(--acc);margin:8px 0 0}
.single-head .dek{max-width:60ch;margin:16px 0 0;color:var(--fg2);font-size:18px}
.single-head .byline{margin:18px 0 0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}

.entry-content{max-width:68ch;padding:34px 0 10px;font-size:17.5px}
.entry-content > *:first-child{margin-top:0}
.entry-content h2{margin-top:1.7em}
.entry-content h3{margin-top:1.5em}
.entry-content ul,.entry-content ol{padding-left:1.3em;margin:0 0 1.15em}
.entry-content li{margin-bottom:.4em}
.entry-content figure{margin:2em 0}
.entry-content figcaption{margin-top:9px;font-size:13px;color:var(--fg3);font-family:var(--body)}
.wp-caption-text{font-size:13px;color:var(--fg3)}
.alignleft{float:left;margin:.4em 1.6em 1.2em 0}
.alignright{float:right;margin:.4em 0 1.2em 1.6em}
.aligncenter{margin-left:auto;margin-right:auto}
.alignwide,.alignfull{max-width:none}

/* Паспорт экземпляра */
.datasheet{
  display:flex;flex-direction:column;margin:0 0 26px;
  background:var(--bg2);border-radius:5px;padding:6px 20px;
}
.datasheet div{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
}
.datasheet div:last-child{border-bottom:0}
.datasheet .k{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);white-space:nowrap}
.datasheet .v{font-size:14.5px;color:var(--fg);text-align:right;font-variant-numeric:tabular-nums;line-height:1.35}

/* Блок атрибуции — сердце проекта */
.record{
  border-left:3px solid var(--acc);background:var(--bg2);
  border-radius:0 5px 5px 0;padding:26px 30px;margin:2.2em 0;
}
.record blockquote{margin:0;padding:0;border:0;font-size:clamp(19px,2.2vw,25px);line-height:1.45}
.attr{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:18px 26px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
}
.attr div{display:flex;flex-direction:column;gap:3px}
.attr .k{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.attr .v{font-size:14.5px;color:var(--fg2);line-height:1.45}

.status{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;
  padding:5px 12px;border-radius:2px;background:var(--amber-soft);color:var(--amber);
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
}
.status::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.status--verified{background:var(--acc-soft);color:var(--acc)}

/* Перелинковка */
.crossrefs{margin:2.4em 0 0;padding-top:22px;border-top:1px solid var(--line)}
.crossrefs h2{font-size:19px;margin:0 0 14px}
.crossrefs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.crossrefs a{
  display:inline-block;padding:6px 12px;background:var(--bg2);border:0;border-radius:2px;
  font-size:13px;color:var(--fg2);
}
.crossrefs a:hover{background:var(--acc-soft);color:var(--acc)}

.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin:40px 0}
.post-nav a{display:block;background:var(--bg);padding:20px 22px;border:0}
.post-nav a:hover{background:var(--bg2)}
.post-nav .dir{font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--fg3)}
.post-nav .ttl{display:block;margin-top:6px;font-family:var(--display);font-size:18px;color:var(--fg);line-height:1.25}
.post-nav .next{text-align:right}

/* ==========================================================================
   6. Архивы, пагинация, поиск
   ========================================================================== */

.archive-head{padding:44px 0 26px;border-bottom:1px solid var(--line-soft);margin-bottom:30px}
.archive-head h1{margin:10px 0 0}
.archive-head .desc{max-width:58ch;margin:14px 0 0;color:var(--fg2)}
.archive-count{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);font-variant-numeric:tabular-nums}

.pagination{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:44px 0 0}
.pagination .page-numbers{
  display:inline-block;padding:8px 13px;border:1px solid var(--line);border-radius:2px;
  font-size:13px;color:var(--fg2);font-variant-numeric:tabular-nums;
}
.pagination .current{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pagination a:hover{border-color:var(--acc);color:var(--acc)}

.searchform{display:flex;gap:8px;margin:0}
.searchform input[type=search]{
  flex:1;min-width:0;padding:10px 14px;border:1px solid var(--line);border-radius:3px;
  background:var(--bg);color:var(--fg);font-family:inherit;font-size:15px;
}
.searchform button{
  appearance:none;border:0;border-radius:3px;background:var(--acc);color:#fff;cursor:pointer;
  padding:10px 18px;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.searchform button:hover{filter:brightness(1.08)}

.notice{padding:40px 0 60px;color:var(--fg2)}
.notice h1{margin-bottom:.3em}

/* ==========================================================================
   7. Колофон
   ========================================================================== */

.colophon{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:52px 0 58px;margin-top:20px;border-top:1px solid var(--line);text-align:center;
}
.seal-full{width:168px;height:auto;color:var(--acc);opacity:.92}
.colo-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;
  font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);
}
.colo-row .dot{color:var(--acc);margin:0 8px}
.colo-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;list-style:none;margin:0;padding:0}
.colo-nav a{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);border:0}
.colo-nav a:hover{color:var(--acc)}

/* ==========================================================================
   8. Адаптив
   ========================================================================== */

@media (max-width:900px){
  :root{--gap:18px}
  .hero{grid-template-columns:1fr;gap:34px;padding:38px 0 44px}
  .nav-main{display:none}
  .nav-main.is-open{
    display:flex;position:absolute;left:0;right:0;top:100%;z-index:20;
    flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 18px 16px;
  }
  .nav-main.is-open a{display:block;padding:10px 0;border-bottom:1px solid var(--line-soft)}
  .nav-toggle{display:block}
  .masthead{position:relative}
  .post-nav{grid-template-columns:1fr}
  .post-nav .next{text-align:left}
  .entry-content{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

@media print{
  .masthead,.post-nav,.crossrefs,.pagination,.searchform{display:none}
  body{background:#fff;color:#000;font-size:12pt}
  a{color:#000;border:0}
}