/* ============================================================
   视觉语言与形式 · 课程平台 · 共享样式
   骨架：方向 A 构成主义 ｜ 阅读：方向 B 杂志节律 ｜ 展区：方向 C 展墙
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* 纸面与墨色（构成主义骨架） */
  --paper: #f7f5f0;
  --paper-raise: #ffffff;
  --paper-deep: #eeebe3;
  --ink: #111111;
  --ink-2: #333330;
  --muted: #6b6862;
  --hairline: #d8d4cc;
  /* 三原色（低频点缀，各有角色） */
  --red: #d93a2b;      /* 行动、强调、"点" */
  --blue: #1f4fa8;     /* 链接态、"线"、理性信息 */
  --yellow: #e8b90c;   /* 高亮、悬停底、"面" */
  /* 展墙（画廊模式） */
  --wall: #17171a;
  --wall-2: #1f1f24;
  --wall-text: #ecebe7;
  --wall-muted: #8f8e88;
  --spot: #e8c66b;
  /* 字体 */
  --sans: "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --serif: "Songti SC", "STSong", "Source Han Serif SC", "SimSun", serif;
  --latin-serif: Georgia, "Times New Roman", serif;
  /* 节律 */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 6rem;
  --line-strong: 2px solid var(--ink);
  --line-thin: 1px solid var(--ink);
  --line-hair: 1px solid var(--hairline);
  --max-read: min(42rem, 100%);
  --max-page: min(78rem, 100%);
  --shadow-paper: 0 .8rem 2.4rem rgba(57, 45, 25, .08);
  /* 动效（全站唯一一套）：即时反馈 / 局部过渡 / 展开 / 构成变换 */
  --t-1: 120ms; --t-2: 240ms; --t-3: 480ms; --t-4: 720ms;
  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Reset 与中文排版铁律（最高优先级） ----------
   注意：word-break 用 normal 而非 keep-all。
   实测（Playwright chromium + webkit，2026-08-07）：WebKit 的 keep-all
   会把整句中文（含标点）视为一个不可断词，整段单行溢出（375px 视口溢出 369px）；
   normal + line-break:strict 在双内核下行为一致：避头尾生效、逐字可断、pretty 防孤字。 */
* { margin: 0; padding: 0; box-sizing: border-box; min-width: 0; }
html {
  line-break: strict;
  word-break: normal;
  text-wrap: pretty;
}
/* 铁律：禁用 text-wrap: balance；overflow-wrap 只给可能含长英文串或网址的白名单元素。 */
.wrap-any, .media-credit, .ident, .site-footer a { overflow-wrap: anywhere; }
.teacher-session { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-size:.8rem; }
.teacher-session button { padding:.3rem .65rem; background:var(--paper); border:1px solid var(--ink); font:inherit; cursor:pointer; }
.site-nav .teacher-session.in-drawer { display:none; }
@media (max-width: 768px) {
  .site-header > .teacher-session { display:none; }
  .site-nav .teacher-session.in-drawer { display:flex; justify-content:space-between; padding:.8rem var(--s3); color:var(--muted); }
  .site-nav .teacher-session.in-drawer button { min-height:2.75rem; padding-inline:1rem; color:var(--ink); }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  background:
    radial-gradient(circle at 8% -10%, rgba(232, 185, 12, .08), transparent 24rem),
    radial-gradient(circle at 96% 18%, rgba(31, 79, 168, .055), transparent 30rem),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 1500;
  pointer-events: none;
  opacity: .16;
  background-image: radial-gradient(rgba(17, 17, 17, .16) .45px, transparent .45px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

main { isolation: isolate; }

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
::selection { background: var(--yellow); color: var(--ink); }

.nowrap { display: inline-block; white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 2000;
  padding: .65rem 1rem;
  border: 2px solid var(--ink);
  background: var(--yellow); color: var(--ink);
  font-weight: 800; text-decoration: none;
  transform: translateY(-180%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- 顶栏（构成骨架） ---------- */
.site-header {
  display: flex; justify-content: space-between; align-items: center;
  height: 4rem;
  padding: 0 var(--s4);
  border-bottom: var(--line-strong);
  background: rgba(247, 245, 240, .9);
  backdrop-filter: blur(14px) saturate(120%);
  position: sticky; top: 0; z-index: 50;
}
.brand {
  display: flex; align-items: center; gap: .75rem;
  min-height: 2.75rem;
  font-weight: 700; letter-spacing: .1em;
  text-decoration: none; font-size: 1rem;
}
.brand > span:last-child { text-wrap: nowrap; }
.brand .g-dot { width: .85rem; height: .85rem; border-radius: 50%; background: var(--red); }
.brand .g-bar { width: 1.5rem; height: .18rem; background: var(--ink); }
.brand .g-tri {
  width: 0; height: 0;
  border-left: .5rem solid transparent;
  border-right: .5rem solid transparent;
  border-bottom: .9rem solid var(--blue);
}
.site-nav { display: flex; gap: var(--s3); font-size: .9rem; letter-spacing: .12em; }
.site-nav a { text-decoration: none; padding: .35rem .2rem; border-bottom: 2px solid transparent; }
.site-nav a { transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.site-nav a:hover { color: var(--red); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--red); font-weight: 600; }

/* 移动端抽屉 */
.nav-toggle {
  display: none;
  background: none; border: 2px solid var(--ink);
  font: inherit; font-weight: 700; letter-spacing: .2em;
  padding: .35rem .8rem; cursor: pointer;
}
@media (max-width: 768px) {
  .site-header { padding: 0 var(--s3); }
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute; top: 4rem; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--paper);
    border-bottom: var(--line-strong);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 1rem var(--s3); border-bottom: var(--line-hair); }
}

/* ---------- 页脚 ---------- */
.site-footer {
  border-top: var(--line-strong);
  padding: var(--s3) var(--s4);
  display: flex; justify-content: space-between; gap: var(--s2);
  flex-wrap: wrap;
  font-size: .8rem; letter-spacing: .15em; color: var(--muted);
}
.site-footer a { color: var(--muted); }

/* ---------- 通用构件 ---------- */
.btn {
  display: inline-block;
  padding: .85rem 2.2rem;
  border: 2px solid var(--ink);
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .2em;
  cursor: pointer;
  min-height: 3rem;
  transition: background var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out), transform var(--t-1) var(--ease-out);
}
.btn:hover { background: var(--yellow); }
.btn:active { transform: scale(.97); transition-duration: 60ms; }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn.tertiary { border-color: transparent; padding-inline: .65rem; }
.btn.tertiary::after { content: " ↗"; color: var(--red); }
.btn.tertiary:hover { background: transparent; color: var(--red); }

.kicker { font-size: .85rem; letter-spacing: .38em; color: var(--muted); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  padding: var(--s4) var(--s4) var(--s2);
}
.section-head h2 { font-size: 1.35rem; letter-spacing: .3em; font-weight: 700; }
.section-head .note { font-size: .82rem; color: var(--muted); letter-spacing: .1em; }

/* ---------- 周次索引网格（首页/课程总览） ---------- */
.week-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--line-thin); }
.week-cell {
  border-right: var(--line-thin);
  border-bottom: var(--line-thin);
  padding: 1.5rem 1.3rem 1.7rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out);
  background: transparent;
}
.week-cell::after {
  content: "↗";
  position: absolute; right: 1.15rem; bottom: 1rem;
  color: var(--red); font-weight: 800;
  opacity: 0; transform: translate(-.35rem, .35rem);
  transition: opacity var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out);
}
.week-cell:nth-child(4n) { border-right: none; }
.week-cell:hover { background: var(--paper-raise); }
.week-cell:hover::after { opacity: 1; transform: translate(0, 0); }
.week-cell .num { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.week-cell .name { margin-top: .7rem; font-size: .98rem; font-weight: 600; line-height: 1.6; }
.week-cell .phase { margin-top: .4rem; font-size: .75rem; color: var(--muted); letter-spacing: .15em; }
.week-cell .tag { position: absolute; top: 1.2rem; right: 1.2rem; }
.tag-dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--red); }
.tag-line { width: 1.2rem; height: .2rem; background: var(--blue); }
.tag-face { width: .65rem; height: .65rem; background: var(--yellow); }
.tag-mix {
  width: .7rem; height: .7rem;
  background: linear-gradient(135deg, var(--red) 33%, var(--yellow) 33% 66%, var(--blue) 66%);
}
@media (max-width: 768px) {
  .week-grid { grid-template-columns: repeat(2, 1fr); }
  .week-cell:nth-child(2n) { border-right: none; }
}

/* ---------- 杂志阅读页（周次学习页 · 方向 B 材质） ---------- */
.read-page {
  max-width: var(--max-read);
  margin: 0 auto;
  padding: var(--s5) var(--s3) var(--s6);
}
.read-page .week-no {
  font-family: var(--latin-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--muted);
}
.read-page h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  margin-top: var(--s2);
}
.read-page .lede {
  margin-top: var(--s3);
  font-size: 1.1rem;
  line-height: 2.2;
  color: var(--ink-2);
}
.read-section { margin-top: var(--s5); }
.read-section > h2 {
  font-size: 1.15rem;
  letter-spacing: .3em;
  font-weight: 700;
  padding-bottom: .8rem;
  border-bottom: var(--line-thin);
  display: flex; align-items: center; gap: .8rem;
}
.read-section > h2 .no {
  font-family: var(--latin-serif); font-style: italic;
  font-weight: 400; color: var(--red); font-size: 1.3rem;
}
.read-section p { margin-top: var(--s2); }
.read-section ul, .read-section ol { margin: var(--s2) 0 0 1.4em; }
.read-section li { margin-top: .5rem; }
.read-section li::marker { color: var(--red); }

/* 卡片仅用于练习/资源等确需边界的对象 */
.res-card {
  border: var(--line-thin);
  padding: 1.2rem 1.4rem;
  margin-top: var(--s2);
  display: flex; justify-content: space-between; gap: var(--s2);
  align-items: baseline;
  text-decoration: none;
  transition: background var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out);
}
.res-card:hover { background: var(--paper-raise); border-color: var(--red); transform: translateX(.2rem); }
.res-card .t { font-weight: 600; }
.res-card .d { font-size: .85rem; color: var(--muted); margin-top: .3rem; }
.res-card .go { flex: 0 0 auto; color: var(--red); font-weight: 700; letter-spacing: .1em; white-space: nowrap; }

/* ---------- 展墙模式（画廊 · 方向 C 材质） ---------- */
body.wall-mode { background: var(--wall); color: var(--wall-text); }
body.wall-mode::before { opacity: .08; mix-blend-mode: screen; }
body.wall-mode .site-header {
  background: rgba(23, 23, 26, .9); border-bottom: 1px solid #2a2a30;
}
body.wall-mode .brand .g-bar { background: var(--wall-text); }
body.wall-mode .site-nav a:hover { color: var(--spot); }
body.wall-mode .site-nav a[aria-current="page"] { border-bottom-color: var(--spot); }
body.wall-mode .site-footer { border-top: 1px solid #2a2a30; color: var(--wall-muted); }
body.wall-mode .nav-toggle { border-color: var(--wall-text); color: var(--wall-text); }
body.wall-mode ::selection { background: var(--spot); color: var(--wall); }
@media (max-width: 768px) {
  body.wall-mode .site-nav { background: var(--wall); border-bottom: 1px solid #2a2a30; }
  body.wall-mode .site-nav a { border-bottom: 1px solid #26262c; }
}

/* ---------- 网格揭示层（全站签名 · 按 G 或按钮切换） ---------- */
.grid-reveal {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 999;
  visibility: hidden; opacity: 0;
  transition: opacity var(--t-2) var(--ease-out), visibility 0s linear var(--t-2);
}
.grid-reveal.on { visibility: visible; opacity: 1; transition-delay: 0s; }
.grid-reveal .cols i { transform: scaleY(0); transform-origin: top; transition: transform var(--t-3) var(--ease-out) calc(var(--i, 0) * 28ms); }
.grid-reveal.on .cols i { transform: scaleY(1); }
.grid-reveal .baseline { opacity: 0; transition: opacity var(--t-3) ease 200ms; }
.grid-reveal.on .baseline { opacity: 1; }
.grid-reveal .cols {
  height: 100%;
  max-width: var(--max-page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  padding: 0 var(--s4);
}
.grid-reveal .cols i { background: rgba(217, 58, 43, .07); border-left: 1px solid rgba(217, 58, 43, .3); border-right: 1px solid rgba(217, 58, 43, .3); }
.grid-reveal .baseline {
  position: absolute; inset: 0;
  background-image: linear-gradient(to bottom, rgba(31, 79, 168, .18) 1px, transparent 1px);
  background-size: 100% 1.9rem;
}
.grid-toggle {
  position: fixed; right: 1.2rem; bottom: 1.2rem;
  z-index: 1000;
  width: 3rem; height: 3rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
  font-weight: 800; font-size: 1rem; font-family: var(--sans);
  letter-spacing: 0;
}
.grid-toggle:hover, .grid-toggle.on { background: var(--yellow); }
body.wall-mode .grid-toggle { border-color: var(--wall-text); background: var(--wall-2); color: var(--wall-text); }
body.wall-mode .grid-toggle:hover, body.wall-mode .grid-toggle.on { background: var(--spot); color: var(--wall); }
@media (max-width: 768px) {
  .grid-reveal .cols { grid-template-columns: repeat(4, 1fr); padding: 0 var(--s3); }
}

@media (max-width: 768px) {
  .site-header { height: 4rem; }
  .brand { gap: .55rem; letter-spacing: .06em; }
  .brand > span:last-child { font-size: .94rem; }
  .brand .g-bar { width: 1.15rem; }
  .brand .g-tri { border-left-width: .42rem; border-right-width: .42rem; border-bottom-width: .76rem; }
  .nav-toggle { min-width: 4.25rem; min-height: 2.85rem; }
  .site-nav a { display: flex; align-items: center; min-height: 3.25rem; }
  .section-head { align-items: flex-start; flex-direction: column; padding: var(--s4) var(--s3) var(--s2); }
  .section-head h2 { letter-spacing: .2em; }
  .read-page { padding: var(--s4) var(--s3) var(--s5); }
  .read-section { margin-top: var(--s4); }
  .read-section > h2 { align-items: flex-start; letter-spacing: .18em; }
  .res-card { align-items: flex-start; flex-direction: column; padding: 1.15rem; }
  .res-card .go { align-self: flex-start; min-width: 4.5rem; padding-top: .25rem; }
  .site-footer { padding: var(--s3); }
  .grid-toggle { width: 3rem; height: 3rem; right: .8rem; bottom: .8rem; }
}

@media (hover: none) {
  .res-card:hover { transform: none; }
}

/* 固定导航下的锚点、窄屏菜单与对话框。 */
[hidden] { display:none !important; }
[id] { scroll-margin-top:5.5rem; }
button:disabled { cursor:default; opacity:.4; }
html:has(dialog[open]) { overflow:hidden; }
.site-nav { white-space:nowrap; }
@media (min-width:769px) and (max-width:1100px) {
  .site-header { padding-inline:1.25rem; }
  .site-nav { gap:.8rem; font-size:.85rem; letter-spacing:0; }
  .brand { gap:.5rem; font-size:.9rem; letter-spacing:0; }
}
@media(max-width:768px) { .site-nav { max-height:calc(100dvh - 4rem); overflow-y:auto; overscroll-behavior:contain; } }
.lesson-context { display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between; align-items:center; font-size:.85rem; margin-bottom:1.5rem; }
.lesson-context select { max-width:100%; font:inherit; padding:.5rem; background:var(--paper); color:var(--ink); border:var(--line-hair); }
.case-zoom { display:block; width:100%; border:0; padding:0; background:transparent; cursor:zoom-in; }
.case-zoom span { display:block; padding:.5rem; font:600 .8rem var(--sans); color:var(--blue); }
.media-viewer { width:min(94vw,90rem); max-width:none; max-height:94dvh; margin:auto; padding:1rem; background:var(--paper); color:var(--ink); border:var(--line-strong); }
.media-viewer::backdrop { background:rgba(0,0,0,.85); }
.media-viewer header { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.media-viewer h2 { font-size:1.1rem; }
.media-viewer img { display:block; width:100%; max-height:75dvh; object-fit:contain; }
.media-credit { font-size:.78rem; margin-top:.5rem; }
.lab-return { padding:.8rem 1.5rem; border-bottom:var(--line-hair); font-size:.9rem; }
.lab-return a { font-weight:700; }
.draft-status { padding:.75rem 1rem; font-size:.85rem; color:var(--muted); }


/* ---------- 全站动效与细节（2026-09-29） ---------- */
/* 正文链接：一条细线常在，悬停时一笔红线从左画过去 */
main :is(p, li, dd, small, figcaption, .d, .a) > a:not([class]),
.home-lab-link, .hw-folio a, .downloads a, .site-footer a {
  text-decoration: none;
  background-image: linear-gradient(var(--red), var(--red)), linear-gradient(currentColor, currentColor);
  background-size: 0 2px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  padding-bottom: .1em;
  transition: background-size var(--t-3) var(--ease-out), color var(--t-2) var(--ease-out);
}
main :is(p, li, dd, small, figcaption, .d, .a) > a:not([class]):hover,
.home-lab-link:hover, .hw-folio a:hover, .downloads a:hover, .site-footer a:hover { background-size: 100% 2px, 100% 1px; color: var(--red); }

/* 区块标题：像一笔线那样从左展开，只在第一次进入视口时播放 */
html.motion-ok [data-reveal] { clip-path: inset(0 100% 0 0); transition: clip-path var(--t-4) var(--ease-out); }
html.motion-ok [data-reveal].is-in { clip-path: inset(0 0 0 0); }

/* 每周格子的标记：点放大、线伸长、面转动，各做一次自己的动作 */
.week-cell .tag { transition: transform var(--t-3) var(--ease-out); }
.week-cell:hover .tag-dot { transform: scale(1.9); }
.week-cell:hover .tag-line { transform: scaleX(2.2); transform-origin: right; }
.week-cell:hover .tag-face { transform: rotate(45deg) scale(1.3); }
.week-cell:hover .tag-mix { transform: rotate(90deg); }
.week-cell .num { transition: transform var(--t-3) var(--ease-out); transform-origin: left bottom; }
.week-cell:hover .num { transform: translateX(.25rem); }

/* 键盘焦点与按下 */
button:not(.btn):not(:disabled):active { transform: scale(.97); }
:focus-visible { transition: outline-offset var(--t-1) var(--ease-out); }

/* 学生界面：教师入口默认隐藏；16 周格子对学生是路线图，不是链接 */
.teacher-only[hidden] { display: none !important; }
div.week-cell { cursor: default; }
div.week-cell::after { content: none; }
div.week-cell:hover { background: transparent; }
div.week-cell.exam:hover { background: var(--ink); }

@media print { [data-reveal] { clip-path: none !important; } }