/* 哲学与思想 · rice paper, ink and a vermilion seal.
   The title is set vertically like a thread-bound book; it bleeds in like ink, then the seal is pressed. */

.w-phil {
  --bg: #ECE9E1; --paper: #F4F2EC; --ink: #1C1A17; --muted: #5E5850; --line: rgba(28, 26, 23, .22);
  --acc: #A72D27; --acc-ink: #F6EFE6; --f-body: var(--f-serif);
  background: #ECE9E1 url("../img/tex-paper.png");
}
.w-phil .bar { background: rgba(236, 233, 225, .93); border-bottom-color: rgba(28, 26, 23, .4); }
.w-phil .bar__nav .nav__a { font-family: var(--f-serif); }
.w-phil .bar__nav .nav__a[aria-current="page"] { border-bottom-color: var(--acc); }
.w-phil .bar__btn { border-color: rgba(28, 26, 23, .3); border-radius: 2px; }
.w-phil .prog i { background: var(--ink); }

/* hero */
.w-phil .ah { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 72px; align-items: start; width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding-top: 76px; }
.w-phil .ah__v { order: 2; display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 18px; padding-top: 6px; }
.w-phil .ah__t { writing-mode: vertical-rl; display: flex; flex-direction: column; gap: 14px; font-family: var(--f-serif); font-weight: 900; font-size: 66px; line-height: 1.1; letter-spacing: .1em; }
.w-phil .ah__t > span { display: block; animation: phil-ink 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.w-phil .ah__t .tcy { text-combine-upright: all; letter-spacing: 0; }
.w-phil .ah__t > span:nth-child(2) { animation-delay: .45s; }
.w-phil .seal { writing-mode: vertical-rl; margin-top: 22px; padding: 10px 6px; background: var(--acc); color: var(--acc-ink); font-family: var(--f-brush); font-size: 24px; line-height: 1; letter-spacing: .1em; border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(246, 239, 230, .35); transform: rotate(-3deg); animation: phil-stamp .5s cubic-bezier(.2, 1.6, .4, 1) 1.5s both; }
@keyframes phil-ink { from { opacity: 0; filter: blur(16px); transform: scale(1.05); } 55% { opacity: 1; } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes phil-stamp { from { opacity: 0; transform: scale(1.9) rotate(-14deg); } to { opacity: 1; transform: rotate(-3deg); } }

.w-phil .ah__m { padding-top: 10px; }
.w-phil .ah__cat { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--acc); color: var(--acc); font-family: var(--f-serif); font-size: 15px; }
.w-phil .ah__cat:hover { background: var(--acc); color: var(--acc-ink); }
.w-phil .ah__lede { margin-top: 24px; max-width: 29em; font-family: var(--f-serif); font-size: 21px; line-height: 1.95; }
.w-phil .ah__meta { margin-top: 22px; font-family: var(--f-serif); }
.w-phil .ah__fig { position: relative; margin-top: 40px; padding: 26px 30px; background: #D9D1C0; box-shadow: inset 0 0 0 1px rgba(28, 26, 23, .25), inset 0 0 0 9px #E6DFD0, inset 0 0 0 10px rgba(28, 26, 23, .18); }
.w-phil .ah__fig::before, .w-phil .ah__fig::after { content: ""; position: absolute; left: -14px; right: -14px; height: 14px; border-radius: 7px; background: linear-gradient(#5A3D2B, #2E1F15 60%, #5A3D2B); box-shadow: 0 3px 6px rgba(0, 0, 0, .3); }
.w-phil .ah__fig::before { top: -7px; } .w-phil .ah__fig::after { bottom: -7px; }
.w-phil .ah__fig img { width: 100%; height: auto; mix-blend-mode: multiply; filter: saturate(.8) contrast(1.02); }

/* text */
.w-phil.deco .prose h2 { display: flex; gap: 16px; align-items: center; font-weight: 900; }
.w-phil.deco .prose h2 b { flex: none; font-family: var(--f-brush); font-weight: 400; font-size: 48px; line-height: .9; color: var(--acc); }
.w-phil.deco .prose ul { padding-left: 1.4em; }
.w-phil.deco .prose ul li { list-style: none; position: relative; }
.w-phil.deco .prose ul li::before { content: ""; position: absolute; left: -1.1em; top: .82em; width: 7px; height: 7px; background: var(--acc); transform: rotate(45deg); }
.w-phil.deco .prose .ask { margin: 1.6em 0; padding: 22px 0; text-align: center; font-weight: 700; font-size: 23px; line-height: 1.7; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); box-shadow: 0 4px 0 -3px var(--ink), 0 -4px 0 -3px var(--ink); }
.w-phil.deco .prose .ask::before { content: "問"; display: block; margin: 0 auto 6px; width: 36px; height: 36px; line-height: 36px; background: var(--acc); color: var(--acc-ink); font-family: var(--f-brush); font-weight: 400; font-size: 24px; border-radius: 50%; }
.w-phil.deco .prose a { color: inherit; text-decoration-color: var(--acc); text-decoration-thickness: 2px; }

.w-phil .toc a { font-family: var(--f-serif); border-radius: 0; }
.w-phil .toc a[aria-current="true"] { background: none; color: var(--ink); font-weight: 700; }
.w-phil .toc a[aria-current="true"]::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--acc); transform: rotate(45deg); vertical-align: 2px; }

/* margin: red-ink notes, written vertically like 朱批 */
.w-phil .rail__note { writing-mode: vertical-rl; justify-self: end; max-height: 360px; padding: 0 4px; color: var(--acc); font-family: var(--f-serif); font-size: 15px; line-height: 1.9; border-right: 1px solid rgba(167, 45, 39, .45); }
.w-phil .rail__note b { margin: 0 0 0 8px; font-family: var(--f-brush); font-weight: 400; font-size: 20px; }
.w-phil .rail__note p { color: var(--acc); }
.w-phil .rail__btn { justify-self: end; border-color: var(--acc); color: var(--acc); font-family: var(--f-serif); }

/* end matter */
.w-phil .ae h2 { font-family: var(--f-serif); font-weight: 900; font-size: 17px; }
.w-phil .tags a { font-family: var(--f-serif); border-color: rgba(28, 26, 23, .3); }
.w-phil .tags a::before { content: "#"; color: var(--acc); margin-right: 3px; }
.w-phil .author { background: var(--paper); border: 1px solid var(--ink); box-shadow: 6px 6px 0 rgba(28, 26, 23, .1); }
.w-phil .author img { filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; }
.w-phil .author h3 { font-family: var(--f-serif); font-weight: 900; }
.w-phil .cmt__form textarea { background: var(--paper); border-color: rgba(28, 26, 23, .35); font-family: var(--f-serif); }
.w-phil .cmt__form button { background: var(--acc); color: var(--acc-ink); }
.w-phil .cut a { font-family: var(--f-serif); }

@container yh (max-width: 760px) {
  .w-phil .ah { grid-template-columns: minmax(0, 1fr); gap: 26px; width: calc(100% - 32px); padding-top: 36px; }
  .w-phil .ah__v { order: 0; flex-direction: row; align-items: center; padding-top: 0; }
  .w-phil .ah__t { writing-mode: horizontal-tb; gap: 0; font-size: 38px; line-height: 1.25; letter-spacing: .02em; }
  .w-phil .seal { margin-top: 0; align-self: flex-start; font-size: 18px; }
  .w-phil .ah__m { padding-top: 0; }
  .w-phil .ah__lede { font-size: 18px; }
  .w-phil .ah__fig { padding: 14px 16px; margin-top: 30px; }
  .w-phil.deco .prose h2 b { font-size: 38px; }
}

/* long titles run across the top instead of down the side */
.w-phil .ah--h { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.w-phil .ah--h .ah__v { order: 0; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 34px; padding-top: 0; }
.w-phil .ah__t--h { writing-mode: horizontal-tb; display: block; max-width: 21em; font-size: clamp(38px, 4.4vw, 58px); line-height: 1.24; letter-spacing: .03em; text-wrap: balance; animation: phil-ink 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.w-phil .ah--h .seal { flex: none; margin-top: 6px; }
.w-phil .ah--h .ah__m:has(.ah__fig) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-auto-rows: min-content; column-gap: 60px; }
.w-phil .ah--h .ah__m:has(.ah__fig) > :not(.ah__fig) { grid-column: 1; }
.w-phil .ah--h .ah__m:has(.ah__fig) > .ah__cat { justify-self: start; }
.w-phil .ah--h .ah__fig { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; align-self: start; }
@container yh (max-width: 760px) {
  .w-phil .ah--h .ah__m:has(.ah__fig) { display: block; }
  .w-phil .ah--h .ah__fig { margin-top: 30px; }
  .w-phil .ah__t--h { font-size: 32px; }
}