/* Curious Lab — общий слой для всех страниц renatgalin.pro: палитры, типографика,
   секции-свиток, строки-проекты, микроблог. Шапка и футер — в chrome.css.
   Страницы добавляют к нему только своё (главная — первый экран, 龙 и терминал). */
/* Палитры. По умолчанию — «киноварь»: бумага, тушь и красная печать (龙).
   Для сравнения: ?palette=riso|kurai|steppe|ember|velvet|lacquer.
   Выбор запоминается; ?palette=cinnabar — вернуть. */
:root{
  --bg:#F2EDE3;
  --ink:#15120E;
  --muted:#5F5A52;
  --soft:#A09A90;
  --hair:#DDD6C9;
  --accent:#C4361C;     /* киноварь: «Curious», печать, дракон, ссылки */
  --on-accent:#FFF6EC;
  --pop:#1F7A5A;        /* нефрит: след курсора, звёздочки, «live» */
  --live:#1F7A5A;
  --wip:#B26A12;
  --dot:#15120E;
  --navy:var(--accent); /* i18n.js и palette.js читают --navy/--ink/--soft */

  --sans:'Geist','Noto Sans SC',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,'Noto Sans SC',monospace;

  --gut:clamp(16px,3.4vw,48px);
  --gap:clamp(14px,1.8vw,28px);

  --dur-fast:150ms;
  --ease-snap:cubic-bezier(0.33,1,0.68,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-io:cubic-bezier(0.65,0,0.35,1);
}
html[data-palette="riso"]{
  --bg:#F4EFE6; --ink:#1A1A1A; --muted:#6B645C; --soft:#A39B90; --hair:#DED7CB;
  --accent:#D01F55; --on-accent:#FFF4F2; --pop:#0070B8;
  --live:#0070B8; --wip:#C2570C; --dot:#1A1A1A;
}
/* китайско-башкирские: курай (флаг РБ — зелёный и золото), степь (войлок, марена) */
html[data-palette="kurai"]{
  --bg:#F4EEE2; --ink:#16181D; --muted:#5F5E5A; --soft:#A29E94; --hair:#DDD5C6;
  --accent:#0F7A4F; --on-accent:#F4EEE2; --pop:#D99A12;
  --live:#0F7A4F; --wip:#B0640E; --dot:#16181D;
}
html[data-palette="steppe"]{
  --bg:#EADBC0; --ink:#22170F; --muted:#5E4E3C; --soft:#9A876D; --hair:#D5C29F;
  --accent:#A8231C; --on-accent:#F6EBD6; --pop:#1D5E8C;
  --live:#1D6E4E; --wip:#9A5A0C; --dot:#22170F;
}
/* всегда тёмные: бархат (башкирская вышивка по чёрному), лак (китайский красно-чёрный лак, золото, нефрит) */
html[data-palette="velvet"]{
  color-scheme:dark;
  --bg:#0F0C0C; --ink:#F3E8DA; --muted:#A89C90; --soft:#6A5F57; --hair:#29211F;
  --accent:#E8412F; --on-accent:#0F0C0C; --pop:#2DB37E;
  --live:#2DB37E; --wip:#F0B429; --dot:#F3E8DA;
}
html[data-palette="lacquer"]{
  color-scheme:dark;
  --bg:#1C0A08; --ink:#F6E7CE; --muted:#B39A85; --soft:#74594B; --hair:#36180F;
  --accent:#F2B233; --on-accent:#1C0A08; --pop:#3CC4A2;
  --live:#3CC4A2; --wip:#FF7A4D; --dot:#F6E7CE;
}
html[data-palette="ember"]{
  color-scheme:dark;
  --bg:#17110E; --ink:#F3E6D8; --muted:#A89583; --soft:#6B5A4C; --hair:#2B211B;
  --accent:#FF7A1A; --on-accent:#17110E; --pop:#2EC4B6;
  --live:#2EC4B6; --wip:#FFB547; --dot:#F3E6D8;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#110F0C;
    --ink:#F0E9DC;
    --muted:#A59E91;
    --soft:#6B655B;
    --hair:#2A2620;
    --accent:#FF5B3A;
    --on-accent:#110F0C;
    --pop:#5CC49A;
    --live:#5CC49A;
    --wip:#E8A64A;
    --dot:#F0E9DC;
  }
  html[data-palette="kurai"]{
    --bg:#0C1512; --ink:#EEF0E6; --muted:#98A69E; --soft:#5C6B63; --hair:#1C2A24;
    --accent:#3FC98A; --on-accent:#0C1512; --pop:#F2C14E;
    --live:#3FC98A; --wip:#F2C14E; --dot:#EEF0E6;
  }
  html[data-palette="steppe"]{
    --bg:#1A130D; --ink:#F0E2C8; --muted:#A8977F; --soft:#6B5C49; --hair:#2E2419;
    --accent:#FF5A40; --on-accent:#1A130D; --pop:#5AA8E0;
    --live:#6CCB9A; --wip:#F0B040; --dot:#F0E2C8;
  }
  html[data-palette="riso"]{
    --bg:#130E12; --ink:#F3EAE6; --muted:#A99DA4; --soft:#6A5F66; --hair:#2A2128;
    --accent:#FF5C93; --on-accent:#130E12; --pop:#4FB3FF;
    --live:#4FB3FF; --wip:#FFA24C; --dot:#F3EAE6;
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);color:var(--ink);scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
a{color:inherit}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Фон: пиксельное поле (canvas) + зерно ── */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme: dark){ .grain{opacity:.07;filter:invert(1)} }
html[data-palette="ember"] .grain,html[data-palette="velvet"] .grain,html[data-palette="lacquer"] .grain{opacity:.07;filter:invert(1)}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline: scroll()){
  .progress{animation:prog linear both;animation-timeline:scroll(root)}
  @keyframes prog{to{transform:scaleX(1)}}
}
.page{position:relative;z-index:1}


/* маска для въезда слов: сохраняет кернинг внутри слова */
.ai{color:var(--accent)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.02em .06em .16em;margin:-.02em -.06em -.16em}
.w > span{display:inline-block;transform-origin:0 100%}
html.js .name .w > span,html.js .ptitle .w > span{transform:translateY(112%) rotate(6deg);animation:wordUp 1.25s var(--ease-out) forwards;animation-delay:calc(.12s + var(--i) * .09s)}
@keyframes wordUp{to{transform:none}}
.hero-tag{margin:0 0 clamp(14px,2.4vh,26px);font:12.5px/1.4 var(--mono);letter-spacing:.02em;color:var(--soft)}

/* статусы — общая разметка cards.js */
.st-meta{display:flex;align-items:center;gap:10px;font:11.5px var(--mono);color:var(--soft)}
.st-date{color:var(--muted);font-variant-numeric:tabular-nums}
.st-tag{border:1px solid var(--hair);border-radius:999px;padding:2px 8px 1px;text-transform:lowercase}
.st-text{margin:10px 0 0;font-size:17px;line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.st-link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.st-link:hover,.st-link:focus-visible{text-decoration:none}

/* «показать все» → раздел */
.more{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font:12.5px var(--mono);color:var(--accent);text-decoration:none;
}
.more::after{content:"→";transition:transform .35s var(--ease-out)}
.more:hover::after,.more:focus-visible::after{transform:translateX(4px)}
.more.more-end{color:var(--soft);cursor:default}
.more.more-end::after{content:none}

/* ── Секции ── */
.sec{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);
  padding:clamp(80px,15vh,168px) var(--gut) 0;
}
.sec-h{grid-column:1 / span 3;align-self:start;position:sticky;top:28px;isolation:isolate;
  --gs:clamp(130px,15vw,250px);padding-top:calc(var(--gs) * .5)}
/* свиток: иероглиф секции, заголовок лежит на его нижней половине */
.sec-h .glyph{position:absolute;z-index:-1;left:calc(var(--gs) * -.1);top:0;width:var(--gs);height:var(--gs);pointer-events:none}
.sec-n{font:12px var(--mono);color:var(--accent)}
.sec-h h2{position:relative;isolation:isolate;width:max-content;margin:12px 0 0;font-size:clamp(30px,3.2vw,50px);font-weight:500;letter-spacing:-.045em;line-height:1}
/* мазок кисти под заголовком (рисует JS) */
.sec-h h2 .swipe{position:absolute;z-index:-1;left:-.08em;bottom:-.36em;width:calc(100% + .24em);height:.34em;pointer-events:none}
.sec-h .more{margin-top:18px}
.sec-body{grid-column:4 / span 9;position:relative;min-width:0}
.sec-body::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.4s var(--ease-out)}
.sec.in .sec-body::before{transform:none}
html:not(.js) .sec-body::before{transform:none}

/* projects — строки-таблица, заливка снизу на ховере */
/* проекты: крупное имя на всю строку, под ним описание и мета; при наведении кисть пишет
   иероглиф проекта рядом с курсором (JS), имя окрашивается основным цветом */
.rows{list-style:none;margin:0;padding:0;counter-reset:row;position:relative;z-index:1}
.rows li{counter-increment:row;border-bottom:1px solid var(--hair)}
.rows a,.rows .dead{
  display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;
  column-gap:var(--gap);row-gap:12px;align-items:baseline;padding:clamp(26px,3.4vh,40px) 0;
  text-decoration:none;color:var(--ink);position:relative;
}
.rows a::before,.rows .dead::before{content:counter(row,decimal-leading-zero);grid-column:1;grid-row:1;font:12px var(--mono);color:var(--soft);transition:color .3s ease,transform .55s var(--ease-out)}
.rows .n{grid-column:2;grid-row:1;display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;font-size:clamp(30px,4.4vw,72px);font-weight:500;letter-spacing:-.05em;line-height:.98;transition:transform .55s var(--ease-out),color .3s ease}
.rows .d{grid-column:2;grid-row:2;max-width:46ch;font-size:15.5px;line-height:1.42;color:var(--muted)}
.rows .m{grid-column:3;grid-row:2;font:12px/1.5 var(--mono);color:var(--soft);text-align:right;white-space:nowrap}
.rows a::after{content:"→";grid-column:3;grid-row:1;justify-self:end;align-self:center;font:20px var(--mono);color:var(--ink);transform:translateX(-8px) rotate(-45deg);opacity:.35;transition:transform .55s var(--ease-out),opacity .3s ease,color .3s ease}
.rows a[target="_blank"]::after{content:"↗";transform:translateX(-8px)}
@media (hover:hover){
  .rows li:hover .n,.rows a:focus-visible .n{transform:translateX(18px);color:var(--accent)}
  .rows li:hover a::before,.rows li:hover .dead::before,.rows a:focus-visible::before{color:var(--accent);transform:translateX(18px)}
  .rows a:hover::after,.rows a:focus-visible::after{color:var(--accent);opacity:1;transform:translateX(0) rotate(0)}
}
/* плавающий иероглиф проекта (следует за курсором, лежит под текстом) */
.proj-ink{position:absolute;left:0;top:0;width:clamp(200px,19vw,300px);aspect-ratio:1;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s ease;will-change:transform}
.proj-ink.on{opacity:1}
.proj-ink canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.proj-ink canvas.cur{opacity:1}
.rows a:focus-visible{outline-offset:-2px}
.soon{font:10.5px/1 var(--mono);font-weight:500;letter-spacing:.03em;text-transform:lowercase;border:1px solid currentColor;border-radius:999px;padding:4px 8px 3px;color:var(--soft)}
.chip-live{color:var(--live)}
.chip-wip{color:var(--wip)}
.rows-note{display:flex;justify-content:flex-end}


/* ── Появление при скролле ── */
html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform 1.2s var(--ease-out);transition-delay:var(--d,0s)}
html.js [data-reveal].in{opacity:1;transform:none}
html.js .fade{opacity:0;animation:fadeIn 1s var(--ease-out) forwards;animation-delay:var(--d,.6s)}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* тушь: бледная, как часть бумаги */
html{--brush:color-mix(in srgb,var(--ink) 16%,var(--bg))}

@media (max-width:760px){
  .sec{grid-template-columns:1fr;gap:36px}
  .sec-h,.sec-body{grid-column:1}
  .sec-h{position:relative;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;--gs:120px}
  .sec-h h2{margin:0}
  .sec-h .more{margin:0 0 0 auto}
  .rows a,.rows .dead{grid-template-columns:2.2rem minmax(0,1fr) 1.4rem;row-gap:8px;padding:22px 0}
  .rows .m{grid-column:2;grid-row:3;text-align:left}
}

/* ── Плавные переходы между страницами (cross-document View Transitions) ── */
/* ── Внутренние страницы ── */

/* первый экран страницы: заголовок в две строки (вторая — с отступом, как на главной),
   под ним лид; справа бледной тушью пишется иероглиф раздела */
.phero{position:relative;isolation:isolate;padding:clamp(56px,13vh,150px) var(--gut) 0;--nfs:clamp(3.2rem,10.4vw,11.5rem);--ind:.5}
.phero-ink{position:absolute;z-index:-1;right:calc(var(--gut) - 1vw);top:clamp(0px,2vh,24px);width:min(64svh,44vw);aspect-ratio:1;pointer-events:none;will-change:transform,opacity}
.phero-ink canvas{display:block;width:100%;height:100%}
.ptitle{margin:0;font-weight:500;font-size:var(--nfs);line-height:.86;letter-spacing:-.058em;color:var(--ink)}
.ptitle .ln{display:block;white-space:nowrap}
.ptitle .ln2{padding-left:calc(var(--ind) * 1em)}
.plede{margin:clamp(20px,3.4vh,36px) 0 0 calc(var(--nfs) * var(--ind) + .04em);max-width:30ch;
  font-size:clamp(19px,1.9vw,30px);font-weight:450;letter-spacing:-.03em;line-height:1.2;color:var(--ink)}
.plede .mute{color:var(--soft)}
.phero + .sec{padding-top:clamp(64px,12vh,136px)}
.sec-h:not([data-glyph]){padding-top:0}
/* тихие строки под заголовком секции: счётчики, кнопки */
.sec-note{margin-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;font:12px/1.5 var(--mono);color:var(--soft)}


@media (max-width:760px){
  .phero{--ind:.06;padding-top:clamp(40px,9vh,80px)}
  .phero-ink{width:66vw;right:-6vw;top:0}
  .plede{margin-left:calc(var(--nfs) * .08)}
  .sec-note{margin:0;flex-basis:100%;flex-direction:row;flex-wrap:wrap;align-items:center}
}

@view-transition{navigation:auto}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html.js .name .w > span,html.js .fade{opacity:1;transform:none;animation:none}
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}