:root{
  --bg: #0e0d0b;
  --bg-2: #15130f;
  --panel: #1a1813;
  --ink: #ebe3d0;
  --ink-soft: #b8ad95;
  --ink-mute: #6f6552;
  --rule: rgba(235,227,208,.10);
  --rule-soft: rgba(235,227,208,.05);
  --accent: #ff6b3d;
  --ok: #67c98a;
  --warn: #d8b75a;

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Inter", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1200px;
  --pad: clamp(20px, 4vw, 56px);
}
html.light{
  --bg: #f4ede0; --bg-2: #ebe2d1; --panel: #fbf6ec;
  --ink: #1c1612; --ink-soft: #4a3f36; --ink-mute: #8a7a68;
  --rule: rgba(28,22,18,.16); --rule-soft: rgba(28,22,18,.06);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a{color: inherit; text-decoration: none}
button{font: inherit; color: inherit; background: none; border: 0; cursor: pointer}
.mono{font-family: var(--mono); letter-spacing: .02em;}
.serif{font-family: var(--serif);}

.l-ru,.l-en{display:none}
html[lang="en"] .l-en{display:initial}
html[lang="ru"] .l-ru{display:initial}

/* top bar */
.top{
  position: sticky; top:0; z-index: 20;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: .5px solid var(--rule);
}
.top-in{
  max-width: var(--maxw); margin: 0 auto; padding: 12px var(--pad);
  display:flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--mono); font-size: 12.5px;
}
.brand{display:flex; align-items: center; gap: 10px; font-weight: 500; letter-spacing: .04em;}
.brand .sq{width:10px; height:10px; background: var(--accent); display:inline-block; transform: rotate(45deg);}
.brand .ver{color: var(--ink-mute);}
.top-right{display:flex; align-items: center; gap: 6px;}
.top-right a{padding: 6px 10px; color: var(--ink-soft); border-radius: 4px;}
.top-right a:hover{background: var(--rule-soft); color: var(--ink);}
.seg{display:inline-flex; border: .5px solid var(--rule); border-radius: 4px; padding: 2px; gap: 2px;}
.seg button{padding: 4px 9px; border-radius: 3px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute); letter-spacing: .04em;}
.seg button[aria-pressed="true"]{background: var(--ink); color: var(--bg);}

/* hero */
.hero{
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(56px, 10vw, 120px) var(--pad) clamp(48px, 8vw, 96px);
  display:grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px); align-items: end;
}
.hero h1{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(42px, 6.4vw, 84px);
  line-height: 1.02; letter-spacing: -0.025em;
  margin: 24px 0 28px; text-wrap: balance;
}
.hero h1 em{font-style: italic; color: var(--accent);}
.hero .lede{font-family: var(--serif); font-size: clamp(18px,1.5vw,22px); line-height: 1.5; color: var(--ink-soft); max-width: 50ch;}
.eyebrow{
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
  display:flex; align-items: center; gap: 10px;
}
.eyebrow::before{content:""; width: 22px; height: 1px; background: currentColor; opacity:.5}

/* spec panel */
.spec{
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  background: var(--panel); border: .5px solid var(--rule); border-radius: 6px;
  padding: 20px 22px;
}
.spec h4{
  margin: 0 0 14px; font-size: 10.5px; letter-spacing: .14em;
  color: var(--ink-mute); text-transform: uppercase; font-weight: 500;
}
.spec dl{margin: 0; display:grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: baseline;}
.spec dt{color: var(--ink-mute);}
.spec dd{margin: 0; color: var(--ink); text-align: right; font-feature-settings: "tnum";}
.spec dd em{color: var(--accent); font-style: normal;}
.spec hr{border: 0; border-top: .5px dashed var(--rule); margin: 12px 0;}

/* manifest band */
.manifest{
  border-top: .5px solid var(--rule); border-bottom: .5px solid var(--rule);
  background: var(--bg-2);
}
.manifest-in{
  max-width: var(--maxw); margin: 0 auto; padding: clamp(40px,6vw,72px) var(--pad);
  display:grid; grid-template-columns: 220px 1fr; gap: clamp(24px,4vw,60px);
}
.manifest p{
  font-family: var(--serif); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.5;
  margin: 0 0 .7em; text-wrap: pretty;
}
.manifest p + p{color: var(--ink-soft); font-size: clamp(17px,1.3vw,19px);}
.manifest em{color: var(--accent); font-style: italic;}

/* catalogue */
.cat{max-width: var(--maxw); margin: 0 auto; padding: clamp(56px,8vw,96px) var(--pad);}
.cat-head{display:flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: clamp(32px,5vw,56px);}
.cat-head h2{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(28px,3.6vw,44px); line-height: 1.05;
  letter-spacing: -0.02em; margin: 12px 0 0;
}
.cat-head h2 em{color: var(--accent); font-style: italic;}
.cat-head .filter{display:flex; gap: 18px; font-family: var(--mono); font-size: 12px; color: var(--ink-mute);}
.cat-head .filter b{color: var(--ink); font-weight: 500;}

/* table-like row index */
.index-head{
  display:grid;
  grid-template-columns: 60px minmax(220px, 1.5fr) minmax(160px, 1fr) 100px 100px 110px;
  gap: 24px;
  padding: 10px 4px;
  border-top: .5px solid var(--rule); border-bottom: .5px solid var(--rule);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
}

/* card */
.card{border-bottom: .5px solid var(--rule);}
.card-row{
  display:grid;
  grid-template-columns: 60px minmax(220px, 1.5fr) minmax(160px, 1fr) 100px 100px 110px;
  gap: 24px;
  padding: 24px 4px;
  align-items: start;
  grid-template-areas: "num id blurb tag status toggle";
}
.card-num    { grid-area: num; }
.card-id     { grid-area: id; }
.card-blurb  { grid-area: blurb; }
.card-tag    { grid-area: tag; }
.card-status { grid-area: status; }
.card-toggle { grid-area: toggle; }
.card-row:hover{background: var(--rule-soft);}
.card-num{font-family: var(--mono); font-size: 13px; color: var(--ink-mute); padding-top: 4px;}
.card-id .name{
  font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.1;
  letter-spacing: -0.01em; margin: 0 0 6px;
}
.card-id .url{
  font-family: var(--mono); font-size: 12px; color: var(--accent);
  display:inline-flex; align-items: center; gap: 6px;
}
.card-id .url::after{content:"↗"; opacity:.6}
.card-id .url:hover{text-decoration: underline;}
.card-blurb{font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink-soft); padding-top: 2px;}
.card-blurb em{color: var(--accent); font-style: italic;}
.card-tag{font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); padding-top: 6px; letter-spacing: .04em;}
.card-status{padding-top: 4px;}
.status-pill{
  display:inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 10px;
  border-radius: 999px; border: .5px solid var(--rule); color: var(--ink-soft);
}
.status-pill .dot{width: 6px; height: 6px; border-radius: 50%; background: var(--ink-mute);}
.status-pill.live{color: var(--ink); border-color: rgba(103,201,138,.4);}
.status-pill.live .dot{background: var(--ok); box-shadow: 0 0 8px rgba(103,201,138,.6);}
.status-pill.draft{color: var(--ink-mute);}
.status-pill.draft .dot{background: var(--warn);}

.card-toggle{
  display:flex; align-items: center; justify-content: flex-end; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--ink); padding: 8px 12px; border-radius: 4px;
  border: .5px solid var(--rule); height: fit-content;
}
.card-toggle:hover{background: var(--ink); color: var(--bg); border-color: var(--ink);}
.card-toggle .chev{transition: transform .25s;}
.card.open .card-toggle .chev{transform: rotate(180deg);}
.card-toggle .l-open, .card.open .card-toggle .l-closed{display:none;}
.card.open .card-toggle .l-open{display: inline;}
.card-toggle:disabled{opacity: .35; cursor: default;}
.card-toggle:disabled:hover{background: transparent; color: var(--ink); border-color: var(--rule);}

/* expanded */
.body{
  display:grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.2,.7,.3,1);
  background: var(--bg-2);
}
.card.open .body{grid-template-rows: 1fr;}
.body > div{overflow: hidden;}
.body-pad{
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
  display:grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 4vw, 56px);
  border-top: .5px dashed var(--rule);
}
.body-text{font-family: var(--serif); font-size: 18px; line-height: 1.65; color: var(--ink-soft);}
.body-text p{margin: 0 0 1em;}
.body-text em{color: var(--accent); font-style: italic;}
.body-text h5{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute); margin: 1.5em 0 .6em; font-weight: 500;
}
.body-text ul{padding-left: 1.2em; margin: 0 0 1em; font-family: var(--sans); font-size: 14.5px; color: var(--ink-soft);}
.body-text ul li{margin: 4px 0;}
.body-text ul li::marker{color: var(--accent);}

.body-side{display:flex; flex-direction: column; gap: 16px;}
.thumb{
  background: var(--panel); border: .5px solid var(--rule); border-radius: 6px;
  aspect-ratio: 4/3; overflow: hidden; position: relative;
  display:flex; flex-direction: column;
}
.thumb .cap{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 8px 12px; border-top: .5px solid var(--rule-soft);
  background: var(--bg);
  display:flex; justify-content: space-between;
}
.thumb-row{display:grid; grid-template-columns: 1fr 1fr; gap: 12px;}

.fridge{
  flex:1; padding: 14px 16px; background: var(--bg-2);
  display:flex; flex-direction: column; gap: 6px;
  font-family: var(--serif); color: var(--ink);
}
.fridge .t{font-style: italic; font-size: 13px; line-height: 1;}
.fridge .t em{color: var(--accent);}
.fridge table{width:100%; border-collapse: collapse; font-size: 7px;}
.fridge th{font-family: var(--mono); font-size: 5.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); text-align: left; padding: 3px 4px; border-top: .5px solid var(--rule);}
.fridge td{padding: 3px 4px; border-top: .5px solid var(--rule); vertical-align: top;}
.fridge td.day{font-style: italic; font-size: 9px;}
.fridge td.we{background: rgba(255,107,61,.08);}
.fridge .box{display:inline-block; width:5px; height:5px; border:.5px solid var(--ink); margin-right:3px; vertical-align: middle;}

.harbour{
  flex:1; padding: 16px; background: linear-gradient(180deg, #1d2a31, #2b2418);
  color: #ebe3d0; display:flex; flex-direction: column; justify-content: space-between;
}
html.light .harbour{background: linear-gradient(180deg, #cfd7d6, #e7ddc7); color: #2a2a2e;}
.harbour .stamp{font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; opacity: .7;}
.harbour .name{font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1;}
.harbour .lines{font-family: var(--serif); font-size: 9px; line-height: 1.45; opacity: .8;}

/* meta strip */
.meta-strip{
  display:flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-mute);
  padding: 10px 0; border-top: .5px dashed var(--rule); margin-top: 12px;
}
.meta-strip span.k{color: var(--ink-mute);}
.meta-strip span.v{color: var(--ink);}
.meta-strip span.sep{opacity: .4;}

/* footer */
.foot{border-top: .5px solid var(--rule); background: var(--bg-2);}
.foot-in{max-width: var(--maxw); margin: 0 auto; padding: clamp(64px, 10vw, 120px) var(--pad) 36px;}
.foot h2{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px,4vw,52px); line-height: 1.08; letter-spacing: -0.02em;
  margin: 16px 0 36px; max-width: 22ch; text-wrap: balance;
}
.foot h2 em{color: var(--accent); font-style: italic;}
.foot .email{
  font-family: var(--mono); font-size: clamp(22px, 3vw, 32px); font-weight: 500;
  color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 6px;
  display:inline-flex; align-items: baseline; gap: 12px;
}
.foot .email:hover{color: var(--accent); border-color: var(--accent);}
.foot .email .arrow{font-size: .7em; color: var(--ink-mute);}
.foot-meta{
  margin-top: clamp(48px, 8vw, 84px); padding-top: 24px;
  border-top: .5px solid var(--rule);
  display:flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
}
.foot-meta .links{display:flex; gap: 18px;}
.foot-meta .links a:hover{color: var(--ink);}

/* responsive */
@media (max-width: 1080px){
  .hero{grid-template-columns: 1fr;}
  .index-head{display: none;}
  .card-row{
    grid-template-columns: 40px 1fr auto;
    grid-template-areas:
      "num   id      status"
      ".     blurb   blurb"
      ".     tag     toggle";
    gap: 10px 18px;
    padding: 22px 4px;
  }
  .card-num{padding-top: 6px; font-size: 12px;}
  .card-id .name{font-size: 22px;}
  .card-blurb{padding-top: 2px; font-size: 16px;}
  .card-tag{padding-top: 12px; align-self: center;}
  .card-status{padding-top: 4px; justify-self: end;}
  .card-toggle{padding-top: 8px; justify-self: end;}
  .body-pad{grid-template-columns: 1fr;}
  .manifest-in{grid-template-columns: 1fr;}
  .top-right a{display: none;}
}

@media (max-width: 520px){
  .top-in{gap: 8px;}
  .brand .ver{display: none;}
  .card-row{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "id     status"
      "blurb  blurb"
      "tag    tag"
      "toggle toggle";
    gap: 10px 16px;
  }
  .card-num{display: none;}
  .card-tag{align-self: start; padding-top: 4px;}
  .card-toggle{justify-self: stretch; justify-content: center; padding-top: 6px;}
  .hero h1{font-size: 38px;}
  .body-pad{padding: 24px 16px;}
  .thumb-row{grid-template-columns: 1fr;}
}