/* ============================================================
   Ampolio · 实验记录本
   颜色和尺寸都集中在 :root 里，改这里就能整体调整。
   ============================================================ */

:root {
  --paper: #F7F5EF;      /* 纸 */
  --grid: rgba(120, 140, 165, .16); /* 方格线 */
  --ink: #1D232B;        /* 蓝黑墨水：正文 */
  --muted: #5B6470;      /* 次要文字 */
  --pen: #2B4A8B;        /* 钢笔蓝：链接与交互 */
  --margin-red: #E39A9F; /* 页边红线 */
  --note: #B9505A;       /* 页边编号 */
  --rule: rgba(29, 35, 43, .22);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6'%3E%3Cpath d='M0 3q4-3 8 0t8 0' fill='none' stroke='%232B4A8B' stroke-width='1.4'/%3E%3C/svg%3E");

  --serif: "Ampolio Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --mono: "Ampolio Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --margin: 5.5rem;   /* 红线左侧页边宽度 */
  --gutter: 1.5rem;   /* 红线到正文的距离 */
  --measure: 40rem;   /* 正文最大宽度 */
  --cell: 24px;       /* 方格大小 */

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161A20;
    --grid: rgba(150, 170, 200, .07);
    --ink: #E7E4DA;
    --muted: #A2A9B3;
    --pen: #93B1EE;
    --margin-red: #8E4A51;
    --note: #E0838C;
    --rule: rgba(231, 228, 218, .24);
    --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6'%3E%3Cpath d='M0 3q4-3 8 0t8 0' fill='none' stroke='%2393B1EE' stroke-width='1.4'/%3E%3C/svg%3E");
  }
}

@media (max-width: 40rem) {
  :root {
    --margin: 2.75rem;
    --gutter: .875rem;
    --cell: 20px;
  }
}

/* ---------- 基础 ---------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.8;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; margin: 0; padding: 0; }

h1, h2, p { margin: 0; }

/* ---------- 纸张与页边 ---------- */

.sheet {
  position: relative;
  max-width: calc(var(--margin) + var(--gutter) + var(--measure) + 2rem);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 0 1.25rem 0 env(safe-area-inset-left);
  display: flex;
  flex-direction: column;
}

.margin-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--margin) + env(safe-area-inset-left));
  width: 1.5px;
  background: var(--margin-red);
  transform-origin: top;
}

/* 红线右侧的正文列 */
.masthead,
.block-title,
.links,
.end-mark,
.noscript,
.foot {
  margin-left: calc(var(--margin) + var(--gutter));
  max-width: var(--measure);
}

/* ---------- 抬头 ---------- */

.masthead {
  padding: clamp(3.5rem, 12vh, 7rem) 0 clamp(2.5rem, 7vh, 4rem);
}

.logo {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 0 0 1.25rem -.4rem;
  overflow: visible;
}
.logo-ink   { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.logo-wave  { fill: none; stroke: var(--pen); stroke-width: 2.4; stroke-linecap: round; }
.logo-liquid{ fill: var(--pen); fill-opacity: .18; }
.logo-bubble{ fill: var(--pen); }

.name {
  font-size: clamp(2.75rem, 8vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
}

.tagline {
  margin-top: .75rem;
  color: var(--muted);
  font-size: 1.125rem;
  letter-spacing: .12em;
}

/* ---------- 分节 ---------- */

.block + .block { margin-top: 3rem; }

.block-title {
  margin-bottom: 1rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.ord { color: var(--muted); font-weight: 400; }

/* ---------- 联系方式 ---------- */

.links { max-width: 26rem; }

.link {
  display: flex;
  align-items: baseline;
  padding: .3rem 0;
}
.link-label { flex: none; }
.leader {
  flex: 1;
  min-width: 1.5rem;
  margin: 0 .6rem;
  border-bottom: 2px dotted var(--rule);
  transform: translateY(-.3em);
}
.link-text {
  flex: none;
  font-family: var(--mono);
  font-size: .9375rem;
  color: var(--pen);
}
.link:hover .link-text,
.link:focus-visible .link-text {
  background: var(--wave) repeat-x 0 100% / 16px 6px;
  padding-bottom: 4px;
  margin-bottom: -4px;
}

/* ---------- 小工具条目 ---------- */

.tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.entry-link {
  position: relative;
  display: grid;
  grid-template-columns: var(--margin) minmax(0, 1fr);
  column-gap: var(--gutter);
  padding: 1rem 0 1.125rem;
}

.entry-no {
  justify-self: end;
  padding-right: .875rem;
  font-family: var(--mono);
  font-size: .8125rem;
  line-height: 1.85rem;
  color: var(--note);
  font-variant-numeric: tabular-nums;
}

.entry-body { display: block; min-width: 0; container-type: inline-size; }

/* 条目较窄时（手机、两列），链接文字统一放到名称下方 */
@container (max-width: 26rem) {
  .entry-head { flex-direction: column; align-items: flex-start; }
  .entry-host { order: 2; margin-top: .125rem; }
}

.entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 1rem;
}

.entry-name {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.55;
  padding-bottom: 3px;
  background: var(--wave) repeat-x 0 100% / 0 6px;
  transition: background-size .45s cubic-bezier(.4, .1, .2, 1);
}

.entry-host {
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--pen);
  white-space: nowrap;
}

.entry-desc {
  display: block;
  margin-top: .125rem;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.7;
}

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  margin-top: .375rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}
.tag::before { content: "〔"; }
.tag::after  { content: "〕"; }

.entry-link:hover .entry-name,
.entry-link:focus-visible .entry-name {
  background-size: 16px 6px;
  background-image: var(--wave);
}

:focus-visible {
  outline: 2px dashed var(--pen);
  outline-offset: 3px;
  border-radius: 2px;
}
.entry-link:focus-visible { outline-offset: -2px; }

/* 两列：只在宽屏、且条目数达到 data.js 里 twoColumnsFrom 时启用 */
@media (min-width: 64rem) {
  .sheet:has(.tools.is-two-col) {
    max-width: calc((var(--margin) + var(--gutter)) * 2 + var(--measure) * 1.5 + 2rem);
  }
  .tools.is-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tools.is-two-col .entry:nth-child(even) .entry-link::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--margin);
    width: 1px;
    background: var(--margin-red);
    opacity: .55;
  }
  .sheet:has(.tools.is-two-col) .masthead,
  .sheet:has(.tools.is-two-col) .block-title,
  .sheet:has(.tools.is-two-col) .end-mark,
  .sheet:has(.tools.is-two-col) .foot {
    max-width: none;
  }
}

/* ---------- 结尾 ---------- */

.end-mark {
  margin-top: .75rem;
  color: var(--muted);
  font-size: .875rem;
  letter-spacing: .2em;
}

.noscript { color: var(--muted); }
.noscript a { color: var(--pen); }

.foot {
  margin-top: auto;
  padding: 4.5rem 0 calc(2.5rem + env(safe-area-inset-bottom));
  color: var(--muted);
  font-size: .875rem;
}

/* ---------- 唯一的入场动效：红线落下，条目被“写”出来 ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .margin-line { transform: scaleY(0); }
  .js .entry,
  .js .end-mark { opacity: 0; }

  .is-ready .margin-line {
    animation: draw-line .9s cubic-bezier(.6, 0, .2, 1) forwards;
  }
  .is-ready .entry,
  .is-ready .end-mark {
    animation: write-in .6s cubic-bezier(.3, .1, .2, 1) forwards;
    animation-delay: calc(.35s + var(--i, 0) * 90ms);
  }
}

@keyframes draw-line {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes write-in {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}