@font-face {
  font-family:Space;
  src:url('/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight:300 700;
  font-display:swap;
}

@font-face {
  font-family:Mono;
  src:url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  font-weight:100 800;
  font-display:swap;
}

:root {
  --paper:#eeede5;
  --ink:#141412;
  --red:#b63135;
  --muted:#62615b;
  --line:#b8b7ae;
  --display:Space,'Arial Black','PingFang SC','Microsoft YaHei',sans-serif;
  --body:Space,'PingFang SC','Microsoft YaHei',sans-serif;
  --mono:Mono,monospace;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

body:before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10;
  opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.4' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

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

button,input {
  font:inherit;
}

button,a,input {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid var(--red);
  outline-offset:5px;
}

main:focus {
  outline:none;
}

::selection {
  background:var(--red);
  color:var(--paper);
}

[hidden] {
  display:none!important;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  line-height:1.2;
}

img {
  display:block;
  max-width:100%;
}

#site {
  max-width:1240px;
  margin:auto;
  padding:0 40px;
}

.site-header {
  min-height:108px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:2px solid var(--ink);
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  font-size:19px;
  letter-spacing:-.7px;
  white-space:nowrap;
}

.seal {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  color:var(--paper);
  background:var(--ink);
  font-size:26px;
  line-height:1;
}

.site-nav {
  display:flex;
  gap:24px;
  margin-left:auto;
}

.site-nav a {
  min-height:44px;
  display:flex;
  align-items:center;
  position:relative;
  font-weight:600;
  font-size:14px;
}

.site-nav a[aria-current]:after {
  content:'';
  height:3px;
  background:var(--red);
  position:absolute;
  bottom:3px;
  left:0;
  right:0;
}

.site-nav a:hover {
  color:var(--red);
}

.contact-stamp {
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  font:700 11px var(--mono);
  padding:13px 14px;
  white-space:nowrap;
  transition:transform .15s,box-shadow .15s;
}

.contact-stamp:hover {
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink);
}

.contact-stamp span {
  margin-left:10px;
  font-size:17px;
}

.cover-intro {
  padding:36px 0 30px;
}

.issue-line {
  display:flex;
  justify-content:space-between;
  font:500 10px var(--mono);
  letter-spacing:1.7px;
  margin-bottom:24px;
}

.cover-intro h1 {
  font-family:var(--display);
  font-size:clamp(44px,7.7vw,100px);
  font-weight:700;
  letter-spacing:-5px;
  line-height:.98;
  transform-origin:left center;
}

.cover-intro h1>span {
  color:var(--red);
}

.cover-caption {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-top:22px;
}

.cover-caption p {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
}

.edition {
  text-align:right;
  font:500 11px var(--mono);
  letter-spacing:1px;
}

.edition b {
  display:block;
  font-family:var(--body);
  font-size:12px;
  margin-top:8px;
  font-weight:500;
  letter-spacing:2px;
}

.chapter-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  padding-right:7px;
}

.chapter {
  display:block;
  min-width:0;
  border:4px solid var(--ink);
  box-shadow:7px 7px 0 var(--ink);
  background:var(--paper);
  transition:transform .2s,box-shadow .2s;
}

.chapter-projects {
  box-shadow:7px 7px 0 var(--red);
}

.chapter:hover {
  transform:translate(-3px,-3px);
  box-shadow:10px 10px 0 var(--ink);
}

.chapter-projects:hover {
  box-shadow:10px 10px 0 var(--red);
}

.chapter-art {
  height:225px;
  overflow:hidden;
  border-bottom:4px solid var(--ink);
  position:relative;
  background:#deded6;
}

.chapter-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s;
}

.chapter:hover img {
  transform:scale(1.035);
}

.panel-label {
  position:absolute;
  top:13px;
  left:13px;
  background:var(--paper);
  border:1.5px solid var(--ink);
  padding:3px 7px;
  font:700 8px var(--mono);
  letter-spacing:1px;
}

.sound-effect {
  position:absolute;
  right:12px;
  top:13px;
  font-size:39px;
  font-weight:900;
  line-height:1;
  transform:rotate(9deg);
  text-shadow:2px 2px var(--paper),-2px -2px var(--paper);
}

.chapter-info {
  padding:22px 20px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.chapter-info h2 {
  font-size:clamp(19px,2.4vw,30px);
  font-weight:700;
  letter-spacing:-1.1px;
}

.chapter-info p {
  font:500 10px var(--mono);
  letter-spacing:1.2px;
  margin-top:9px;
}

.chapter-arrow {
  width:48px;
  height:48px;
  flex-shrink:0;
  background:var(--ink);
  color:var(--paper);
  display:grid;
  place-items:center;
  font-size:34px;
  font-weight:700;
  line-height:1;
}

.chapter-projects .chapter-arrow {
  background:var(--red);
}

.latest-section {
  margin-top:65px;
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:2px solid var(--ink);
  padding-bottom:16px;
  gap:16px;
}

.section-heading h2 {
  font-size:20px;
  font-weight:700;
}

.section-heading h2 span {
  font:12px var(--mono);
  color:var(--red);
  margin-right:14px;
}

.section-heading>a {
  font:600 11px var(--mono);
  padding:10px 0;
}

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

.latest-note {
  display:flex;
  flex-direction:column;
  padding:23px 24px 20px 0;
  min-width:0;
  border-bottom:1px solid var(--line);
}

.latest-note+.latest-note {
  border-left:1px solid var(--line);
  padding-left:24px;
}

.latest-note:last-child {
  padding-right:0;
}

.note-meta {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font:10px var(--mono);
  color:var(--muted);
}

.note-meta>span {
  color:var(--red);
}

.latest-note h3 {
  font-size:20px;
  line-height:1.5;
  margin:16px 0 10px;
  transition:color .15s;
}

.latest-note:hover h3 {
  color:var(--red);
}

.latest-note p {
  font-size:13px;
  color:var(--muted);
  line-height:1.9;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.note-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  padding-top:23px;
  font:10px var(--mono);
}

.note-bottom b {
  font-size:21px;
}

.author-strip {
  display:flex;
  align-items:center;
  gap:24px;
  margin:44px 0;
  background:var(--ink);
  color:var(--paper);
  padding:27px 30px;
}

.author-mark {
  font-size:42px;
  border:2px solid var(--paper);
  width:65px;
  height:65px;
  display:grid;
  place-items:center;
  transform:rotate(-5deg);
  flex-shrink:0;
}

.author-strip h2 {
  font-size:22px;
  margin-bottom:8px;
}

.author-strip p {
  font-size:13px;
  color:#c7c6bb;
}

.author-strip>a {
  margin-left:auto;
  font-size:13px;
  white-space:nowrap;
  padding:12px 0;
}

.site-footer {
  border-top:2px solid var(--ink);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:24px 0 30px;
  font-size:10px;
  color:var(--muted);
}

.footer-note {
  font:700 12px var(--mono);
  color:var(--ink);
}

.page {
  padding:52px 0 64px;
  min-height:70vh;
}

.page-intro,.page-heading {
  margin-bottom:40px;
}

.kicker {
  font:600 11px var(--mono);
  letter-spacing:2px;
  color:var(--red);
  margin-bottom:18px;
}

.page-intro h1,.page-heading h1 {
  font-size:clamp(30px,4.6vw,58px);
  font-weight:700;
  line-height:1.35;
  letter-spacing:-1.5px;
}

.lead,.page-heading>p:last-child {
  color:var(--muted);
  max-width:640px;
  margin-top:20px;
  font-size:15px;
}

.index-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:22px;
  flex-wrap:wrap;
}

.chip-row {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.chip {
  border:1.5px solid var(--ink);
  background:none;
  min-height:44px;
  padding:8px 14px;
  font-size:13px;
}

.chip span {
  font:10px var(--mono);
  margin-left:10px;
  opacity:.7;
}

.chip.active {
  background:var(--ink);
  color:var(--paper);
}

.chip:hover:not(.active) {
  background:#dfded5;
}

.search-field input {
  min-height:44px;
  max-width:100%;
  width:240px;
  border:1.5px solid var(--ink);
  background:transparent;
  padding:8px 14px;
  border-radius:0;
  font-size:14px;
}

.post-index {
  border-top:3px solid var(--ink);
}

.post-row {
  display:grid;
  grid-template-columns:65px minmax(0,1fr) 100px 32px;
  gap:24px;
  align-items:center;
  padding:29px 0;
  border-bottom:1px solid var(--line);
}

.row-date {
  font-family:var(--mono);
}

.row-date em {
  font-size:17px;
  font-style:normal;
  display:block;
}

.row-date small {
  font-size:11px;
  color:var(--muted);
}

.row-main h2 {
  font-size:23px;
  margin-bottom:8px;
  line-height:1.45;
}

.row-main p {
  font-size:14px;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.row-tag {
  font-size:12px;
  color:var(--red);
}

.row-arrow {
  font-size:27px;
}

.post-row:hover h2 {
  color:var(--red);
}

.empty {
  padding:44px 0;
  color:var(--muted);
}

.project-grid {
  display:grid;
  gap:24px;
}

.project-card {
  display:flex;
  gap:30px;
  align-items:start;
  border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--red);
  padding:32px;
}

.project-index {
  font:16px var(--mono);
  color:var(--red);
}

.project-body {
  flex:1;
  min-width:0;
}

.project-body h2 {
  font-size:40px;
  margin-bottom:16px;
}

.project-body p {
  color:var(--muted);
  max-width:650px;
}

.project-body footer {
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:30px;
  font:11px var(--mono);
}

.project-link {
  font:11px var(--mono);
  white-space:nowrap;
}

.project-status {
  color:var(--red);
}

.about-layout {
  display:grid;
  grid-template-columns:340px 1fr;
  gap:56px;
}

.about-card {
  border:3px solid var(--ink);
  padding:26px;
  box-shadow:6px 6px 0 var(--ink);
}

.about-seal {
  background:var(--red);
  color:var(--paper);
  font-size:60px;
  text-align:center;
  margin-bottom:24px;
}

.about-id>div {
  display:flex;
  flex-direction:column;
  margin:14px 0;
}

.about-id small {
  font:10px var(--mono);
  color:var(--muted);
}

.about-id strong {
  font-size:16px;
}

.about-log {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:11px/1.8 var(--mono);
  border-top:1px solid var(--line);
  padding-top:20px;
}

.about-copy p {
  margin-bottom:25px;
  line-height:2;
}

.shortcut-row {
  display:flex;
  gap:24px;
  margin-top:32px;
  color:var(--red);
  font-weight:600;
}

.mail-hero {
  display:block;
  font-size:clamp(20px,4vw,50px);
  border-bottom:3px solid var(--ink);
  padding-bottom:20px;
  overflow-wrap:anywhere;
}

.port-list {
  list-style:none;
  padding:0;
  margin:24px 0;
}

.port-list a {
  display:flex;
  align-items:center;
  gap:25px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}

.port-index {
  font:12px var(--mono);
  color:var(--red);
}

.port-body {
  min-width:0;
  flex:1;
  overflow-wrap:anywhere;
}

.port-body small,.port-body strong {
  display:block;
}

.port-body small {
  font:10px var(--mono);
  color:var(--muted);
  margin-bottom:6px;
}

.port-open {
  font:11px var(--mono);
  white-space:nowrap;
}

.post-page {
  max-width:820px;
  margin:auto;
}

.article-head {
  border-bottom:3px solid var(--ink);
  padding-bottom:30px;
  margin-bottom:30px;
}

.back-link {
  display:inline-block;
  font-size:13px;
  margin-bottom:34px;
  color:var(--muted);
  padding:8px 0;
}

.article h1 {
  font-size:clamp(30px,4.5vw,52px);
  line-height:1.35;
  letter-spacing:-1px;
  margin-bottom:20px;
}

.article-summary {
  color:var(--muted);
  font-size:16px;
}

.article-media {
  margin:30px 0;
}

.article-media img {
  width:100%;
  height:auto;
  border:2px solid var(--ink);
}

.article-media figcaption {
  font-size:12px;
  text-align:center;
  color:var(--muted);
  margin-top:10px;
}

.prose {
  font-size:17px;
  line-height:1.95;
  overflow-wrap:anywhere;
}

.prose p,.prose ul,.prose ol {
  margin:20px 0;
}

.prose h2 {
  font-size:29px;
  margin:40px 0 20px;
}

.prose h3 {
  font-size:23px;
  margin:30px 0 16px;
}

.prose a {
  text-decoration:underline;
  text-underline-offset:4px;
  color:var(--red);
}

.prose blockquote {
  border-left:4px solid var(--red);
  margin:26px 0;
  padding:10px 24px;
  background:#e3e2d9;
}

.prose pre {
  overflow:auto;
  background:var(--ink);
  color:var(--paper);
  padding:22px;
  font:13px/1.8 var(--mono);
}

.prose code {
  font-family:var(--mono);
  font-size:.85em;
}

.prose :not(pre)>code {
  background:#deddd3;
  padding:3px 5px;
}

.prose table {
  display:block;
  overflow:auto;
  border-collapse:collapse;
  max-width:100%;
  font-size:14px;
}

.prose th,.prose td {
  border:1px solid var(--line);
  padding:10px 15px;
}

.post-nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  border-top:3px solid var(--ink);
  margin-top:52px;
  padding-top:25px;
}

.post-nav-card small {
  display:block;
  color:var(--red);
  font-size:12px;
  margin-bottom:10px;
}

.post-nav-card strong {
  font-size:16px;
  line-height:1.5;
}

.post-nav-card.next {
  text-align:right;
}

.reading-progress {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:4px;
  z-index:20;
}

.reading-progress span {
  display:block;
  height:100%;
  background:var(--red);
  transform-origin:left;
  transform:scaleX(0);
}

.post-card {
  padding:25px 0;
  border-bottom:1px solid var(--line);
}

.post-card-meta {
  font-size:12px;
  color:var(--muted);
}

.post-card h2 {
  margin:10px 0;
}

.noscript-note {
  padding:24px;
  text-align:center;
}

.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  background:var(--ink);
  color:var(--paper);
  padding:12px 20px;
  z-index:30;
}

.skip-link:focus {
  top:10px;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media(min-width:1500px) {
  #site {
    max-width:1320px;
  }
  .cover-intro h1 {
    font-size:108px;
  }
  .chapter-art {
    height:250px;
  }
}

@media(max-width:900px) {
  #site {
    padding:0 24px;
  }
  .site-header {
    gap:15px;
    min-height:90px;
  }
  .brand {
    font-size:16px;
  }
  .site-nav {
    gap:16px;
  }
  .contact-stamp {
    font-size:9px;
    padding:11px;
  }
  .cover-intro h1 {
    letter-spacing:-3px;
  }
  .chapter-grid {
    gap:20px;
  }
  .chapter-art {
    height:200px;
  }
  .chapter-info {
    padding:17px 13px;
  }
  .chapter-info h2 {
    font-size:21px;
  }
  .chapter-info p {
    font-size:8px;
    letter-spacing:.6px;
  }
  .chapter-arrow {
    width:40px;
    height:40px;
  }
  .latest-note h3 {
    font-size:18px;
  }
  .note-meta {
    flex-wrap:wrap;
  }
  .about-layout {
    grid-template-columns:280px 1fr;
    gap:28px;
  }
  .site-footer {
    flex-wrap:wrap;
  }
}

@media(max-width:640px) {
  #site {
    padding:0 20px;
  }
  .site-header {
    flex-wrap:wrap;
    gap:0;
    min-height:110px;
    padding-top:18px;
  }
  .brand {
    font-size:16px;
  }
  .seal {
    width:29px;
    height:29px;
    font-size:22px;
  }
  .contact-stamp {
    margin-left:auto;
    padding:9px;
    font-size:9px;
    min-height:36px;
  }
  .contact-stamp span {
    margin-left:4px;
  }
  .site-nav {
    order:3;
    width:100%;
    justify-content:space-between;
    margin-top:10px;
  }
  .site-nav a {
    font-size:12px;
  }
  .cover-intro {
    padding:25px 0;
  }
  .issue-line {
    font-size:8px;
    letter-spacing:.6px;
    margin-bottom:22px;
  }
  .cover-intro h1 {
    font-size:clamp(34px,9.2vw,58px);
    letter-spacing:-1.8px;
    line-height:1.05;
  }
  .cover-caption {
    margin-top:19px;
    gap:12px;
  }
  .cover-caption p {
    font-size:11px;
  }
  .edition {
    font-size:9px;
    white-space:nowrap;
  }
  .edition b {
    font-size:10px;
    letter-spacing:0;
  }
  .chapter-grid {
    grid-template-columns:1fr;
    gap:24px;
  }
  .chapter-art {
    height:auto;
    aspect-ratio:960/340;
  }
  .chapter-art img {
    height:100%;
    object-fit:contain;
  }
  .panel-label {
    top:8px;
    left:8px;
    font-size:7px;
    padding:2px 5px;
  }
  .chapter-info {
    padding:17px;
  }
  .chapter-info h2 {
    font-size:24px;
  }
  .chapter-info p {
    font-size:9px;
    letter-spacing:.8px;
  }
  .chapter-arrow {
    width:43px;
    height:43px;
  }
  .sound-effect {
    font-size:32px;
  }
  .latest-section {
    margin-top:44px;
  }
  .section-heading h2 {
    font-size:18px;
  }
  .section-heading h2 span {
    font-size:10px;
    margin-right:8px;
  }
  .section-heading>a {
    font-size:9px;
  }
  .latest-grid {
    grid-template-columns:1fr;
  }
  .latest-note,.latest-note+.latest-note {
    border-left:0;
    padding:22px 0;
  }
  .note-meta {
    font-size:10px;
  }
  .latest-note h3 {
    font-size:21px;
    margin-top:14px;
  }
  .note-bottom {
    padding-top:14px;
  }
  .author-strip {
    margin:32px 0;
    flex-wrap:wrap;
    padding:22px;
    gap:16px;
  }
  .author-mark {
    width:45px;
    height:45px;
    font-size:30px;
  }
  .author-strip>div {
    flex:1;
  }
  .author-strip h2 {
    font-size:17px;
  }
  .author-strip p {
    font-size:11px;
  }
  .author-strip>a {
    width:100%;
    margin:0;
    border-top:1px solid #54544d;
    padding:13px 0 0;
    text-align:right;
    font-size:12px;
  }
  .site-footer {
    padding:20px 0;
    gap:8px;
    font-size:9px;
  }
  .footer-note {
    font-size:10px;
  }
  .site-footer>a {
    width:100%;
  }
  .page {
    padding:32px 0 45px;
  }
  .page-intro {
    margin-bottom:30px;
  }
  .page-intro h1 {
    font-size:29px;
    letter-spacing:-.7px;
  }
  .lead {
    font-size:14px;
  }
  .kicker {
    font-size:10px;
  }
  .index-toolbar {
    gap:15px;
  }
  .search-field,.search-field input {
    width:100%;
  }
  .chip {
    font-size:12px;
    padding:7px 10px;
  }
  .post-row {
    grid-template-columns:48px minmax(0,1fr) 20px;
    gap:14px;
    padding:23px 0;
  }
  .row-tag {
    grid-column:2;
    font-size:11px;
  }
  .row-arrow {
    grid-column:3;
    grid-row:1;
  }
  .row-date em {
    font-size:13px;
  }
  .row-main h2 {
    font-size:19px;
  }
  .row-main p {
    font-size:12px;
  }
  .row-date small {
    font-size:9px;
  }
  .project-card {
    padding:22px;
    gap:14px;
    flex-wrap:wrap;
  }
  .project-body h2 {
    font-size:32px;
  }
  .project-body p {
    font-size:14px;
  }
  .project-link {
    width:100%;
    text-align:right;
  }
  .project-body footer {
    font-size:9px;
    gap:12px;
  }
  .about-layout {
    grid-template-columns:1fr;
  }
  .about-card {
    padding:24px;
  }
  .about-copy {
    font-size:15px;
  }
  .port-open {
    font-size:9px;
  }
  .port-list a {
    gap:15px;
  }
  .port-body strong {
    font-size:13px;
  }
  .article h1 {
    font-size:29px;
  }
  .article-summary {
    font-size:14px;
  }
  .prose {
    font-size:16px;
  }
  .prose h2 {
    font-size:24px;
  }
  .prose pre {
    padding:16px;
    font-size:11px;
  }
  .post-nav-card strong {
    font-size:14px;
  }
  .post-nav {
    gap:18px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important;
  }
}

/* Keep the cover focused on its two primary destinations. */
.notebook-home { padding-bottom: 48px; }
.cover-intro { padding: 44px 0 36px; }
@media (max-width: 640px) {
  .cover-intro { padding: 32px 0; }
  .notebook-home { padding-bottom: 32px; }
}

@font-face { font-family:Dela; src:url('/fonts/dela-gothic-one-display.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
:root { --paper:#f1efe8; --ink:#111; --red:#c42932; }
#site { max-width:1160px; padding:0 30px; }
.quiet-header { display:flex; align-items:center; justify-content:space-between; min-height:82px; }
.quiet-header nav { display:flex; align-items:center; gap:20px; margin-left:auto; }
.quiet-header a { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; font-size:13px; font-weight:600; }
.quiet-header a:hover { color:var(--red); }
.github-link { border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:#fffdf8; }
.github-link svg { width:22px; height:22px; }
.home-back { color:var(--muted); }
.comic-title { margin:20px 0 34px; }
.comic-title h1 { font:400 clamp(40px,7vw,82px)/.97 Dela,'Arial Black',sans-serif; letter-spacing:-2.8px; }
.comic-title h1 span { color:var(--red); }
.comic-spread { display:grid; grid-template-columns:1fr 1fr; gap:25px; margin:0 8px 60px 0; }
.comic-frame { position:relative; isolation:isolate; overflow:hidden; display:block; height:320px; border:5px solid var(--ink); box-shadow:8px 8px 0 var(--ink); background:#fffdf8; transition:transform .16s,box-shadow .16s; }
.comic-frame img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:50% 16%; filter:grayscale(1); mix-blend-mode:multiply; transition:transform .35s; }
.frame-point { box-shadow:8px 8px 0 var(--red); }
.frame-point img { object-position:50% 30%; }
.comic-frame:hover { transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--ink); }
.frame-point:hover { box-shadow:11px 11px 0 var(--red); }
.comic-frame:hover img { transform:scale(1.045); }
.comic-frame:active { transform:translate(3px,3px); }
.speed-lines { position:absolute; inset:-30%; opacity:.38; background:repeating-conic-gradient(from 0deg at 50% 45%,var(--ink) 0deg .45deg,transparent .45deg 3.4deg); mask-image:radial-gradient(circle at 50% 45%,transparent 0 30%,#000 64%); }
.comic-sfx { position:absolute; right:12px; top:12px; writing-mode:vertical-rl; font:400 clamp(38px,5vw,60px)/1 Dela,sans-serif; -webkit-text-stroke:8px #fffdf8; paint-order:stroke fill; transform:rotate(7deg); }
.comic-frame:hover .comic-sfx { animation:comic-impact .3s steps(2,end); }
@keyframes comic-impact { 0% { transform:rotate(7deg) scale(1); } 50% { transform:rotate(2deg) scale(1.15); } 100% { transform:rotate(7deg) scale(1); } }
.home-notes>h2 { font-size:23px; margin-bottom:20px; }
.home-notes .index-toolbar { padding-bottom:8px; }
.home-notes .chip { border:0; min-height:36px; padding:4px 10px; font-size:12px; }
.home-notes .search-field input { border:0; border-bottom:1px solid var(--line); width:190px; min-height:36px; padding:6px 0; background:none; font-size:12px; }
.home-notes .row-tag { color:var(--muted); }
.home-notes .post-row { padding:26px 0; }
.home-notes .row-main h2 { font-size:21px; }
.home-notes .row-main p { font-size:13px; }
.about-page { max-width:760px; margin:30px auto 60px; min-height:55vh; }
.about-page>h1 { font-size:36px; line-height:1.4; margin-bottom:36px; }
.about-page .about-copy { font-size:18px; }
@media(max-width:760px) {
  #site { padding:0 22px; }
  .quiet-header { min-height:68px; }
  .comic-title { margin:16px 0 27px; }
  .comic-title h1 { font-size:clamp(29px,6.9vw,54px); letter-spacing:-1.5px; }
  .comic-spread { grid-template-columns:1fr; gap:20px; margin-bottom:45px; }
  .comic-frame { height:190px; }
  .comic-sfx { font-size:42px; }
  .about-page { margin:12px 0 30px; }
  .about-page>h1 { font-size:28px; margin-bottom:26px; }
  .about-page .about-copy { font-size:16px; }
}
@media(max-width:440px) {
  #site { padding:0 17px; }
  .comic-title h1 { font-size:7.5vw; letter-spacing:-1px; }
  .comic-frame { height:165px; border-width:4px; box-shadow:6px 6px 0 var(--ink); }
  .frame-point { box-shadow:6px 6px 0 var(--red); }
  .home-notes .index-toolbar { gap:10px; }
  .home-notes .search-field input { width:100%; }
  .home-notes .row-main h2 { font-size:18px; }
}
/* Original folio: a typographic cover paired with an ink-and-paper illustration. */
:root { --paper:#eeeae0; --red:#b92f32; }
#site { max-width:1200px; }
.quiet-header { min-height:84px; border-bottom:1px solid #141412; }
.quiet-header nav { gap:28px; }
.github-link { box-shadow:none; border:0; background:none; }
.folio-home { padding:30px 0 40px; }
.folio-cover { display:grid; grid-template-columns:1.2fr 1fr; border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); margin-right:8px; min-height:510px; }
.folio-copy { position:relative; padding:39px 40px; display:flex; flex-direction:column; align-items:flex-start; overflow:hidden; }
.folio-copy:after { content:''; position:absolute; width:240px; height:180px; bottom:-30px; right:-60px; transform:rotate(-22deg); background-image:radial-gradient(var(--ink) .8px,transparent 1px); background-size:6px 6px; opacity:.13; pointer-events:none; }
.folio-byline { font-size:11px; letter-spacing:3px; font-weight:600; }
.folio-copy h1 { margin:45px 0 25px; font-family:'PingFang SC','Microsoft YaHei',sans-serif; font-size:clamp(48px,6.8vw,82px); font-weight:900; line-height:1.2; letter-spacing:-4px; transform:rotate(-3deg); }
.folio-copy h1 span { color:var(--red); }
.folio-copy>p { font-size:13px; color:var(--muted); line-height:1.8; }
.folio-read { position:relative; z-index:1; background:var(--ink); color:var(--paper); display:flex; align-items:center; gap:52px; padding:14px 20px; font-size:15px; font-weight:700; margin-top:auto; transition:background .2s,transform .2s; }
.folio-read span { font-size:23px; }
.folio-read:hover { background:var(--red); transform:translateY(-3px); }
.folio-art { position:relative; background:#151513; border-left:3px solid var(--ink); overflow:hidden; }
.folio-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.2,.7,.2,1); }
.folio-cover:hover .folio-art img { transform:scale(1.025) rotate(.7deg); }
.art-caption { position:absolute; bottom:29px; right:24px; color:var(--paper); font-size:13px; letter-spacing:6px; writing-mode:vertical-rl; }
.folio-links { display:grid; grid-template-columns:1.2fr 1fr; gap:20px; margin:30px 8px 0 0; }
.folio-links a { min-height:105px; border:2px solid var(--ink); display:flex; gap:20px; align-items:center; padding:24px 27px; transition:transform .2s,box-shadow .2s; }
.folio-links a:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
.folio-link-label { font-size:23px; font-weight:800; }
.folio-link-detail { font-size:12px; color:var(--muted); }
.folio-link-arrow { margin-left:auto; font-size:29px; }
.folio-random { background:var(--red); color:var(--paper); }
.random-icon { font-size:39px; line-height:1; transition:transform .35s; }
.folio-random:hover .random-icon { transform:rotate(90deg); }
.essays-heading { margin-bottom:40px; }
.essays-heading h1 { font-size:62px; font-weight:900; letter-spacing:-3px; }
.essays-heading h1 span { color:var(--red); }
.essays-heading p { color:var(--muted); font-size:14px; margin-top:18px; }
.essays-page .chip { border:0; padding:6px 12px; }
.essays-page .search-field input { border-width:0 0 1px; width:200px; }
@media(max-width:760px) {
  .quiet-header { min-height:66px; }
  .folio-home { padding-top:24px; }
  .folio-cover { min-height:435px; grid-template-columns:1.1fr 1fr; }
  .folio-copy { padding:28px 24px; }
  .folio-copy h1 { font-size:clamp(42px,7.3vw,60px); letter-spacing:-3px; margin:48px 0 22px; }
  .folio-byline { font-size:9px; letter-spacing:1px; }
  .folio-copy>p { font-size:11px; }
  .folio-read { gap:20px; padding:10px 15px; font-size:13px; }
  .folio-links { gap:16px; }
  .folio-links a { padding:18px; gap:12px; min-height:86px; }
  .folio-link-label { font-size:20px; }
  .folio-link-detail { display:none; }
  .random-icon { font-size:28px; }
}
@media(max-width:520px) {
  .folio-cover { grid-template-columns:1fr; min-height:0; }
  .folio-copy { padding:28px 25px 30px; min-height:335px; }
  .folio-copy h1 { font-size:62px; margin:29px 0 19px; }
  .folio-copy>p { font-size:12px; }
  .folio-read { margin-top:25px; }
  .folio-art { height:215px; border-left:0; border-top:3px solid var(--ink); }
  .folio-art img { object-position:50% 38%; }
  .art-caption { bottom:20px; right:18px; font-size:11px; }
  .folio-links { grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
  .folio-links a { padding:16px 12px; gap:8px; min-height:74px; }
  .folio-link-label { font-size:17px; }
  .folio-link-arrow { font-size:22px; }
  .random-icon { display:none; }
  .essays-heading h1 { font-size:46px; }
  .essays-page .search-field input { width:100%; }
}
/* Selected candidate A: preserve the portrait and let it occupy the cover. */
.folio-cover { grid-template-columns:1fr 1.12fr; min-height:550px; }
.folio-art { margin:0; background:#f5f4ef; }
.folio-art img { object-fit:cover; object-position:50% 46%; }
.folio-cover:hover .folio-art img { transform:scale(1.018); }
.folio-art figcaption { position:absolute; right:14px; bottom:12px; z-index:1; font:10px var(--mono); background:var(--paper); padding:6px 9px; color:var(--ink); }
.folio-art figcaption a:hover { text-decoration:underline; }
@media(max-width:760px) and (min-width:521px) {
  .folio-cover { min-height:450px; grid-template-columns:1fr 1.12fr; }
}
@media(max-width:520px) {
  .folio-cover { grid-template-columns:1fr; min-height:0; }
  .folio-art { grid-row:1; height:auto; aspect-ratio:1 / 1; border-top:0; border-bottom:3px solid var(--ink); }
  .folio-art img { object-position:50% 46%; }
  .folio-copy { min-height:0; padding:25px; }
  .folio-copy h1 { margin:20px 0 15px; font-size:54px; }
  .folio-read { margin-top:22px; }
}
/* Image-only home. Text is limited to the hover sound effects and utility links. */
.portrait-mode #site { max-width:none; padding:0 24px; }
.portrait-mode .quiet-header { min-height:60px; border:0; }
.portrait-mode .quiet-header nav { gap:18px; }
.portrait-mode .quiet-header a { font-size:12px; }
.portrait-home { margin:0 7px 0 0; }
.portrait-door { position:relative; display:block; height:calc(100svh - 115px); min-height:420px; max-height:1000px; border:5px solid var(--ink); box-shadow:7px 7px 0 var(--ink); background:#eeede7; overflow:hidden; isolation:isolate; }
.portrait-image { width:100%; height:100%; object-fit:cover; object-position:50% 45%; transform:scale(1.025); transition:transform .5s cubic-bezier(.2,.65,.25,1); }
.portrait-door:is(:hover,:focus-visible) .portrait-image { transform:translate(var(--pan-x,0px),var(--pan-y,0px)) scale(1.055); }
.portrait-speed { position:absolute; inset:-35%; opacity:0; pointer-events:none; background:repeating-conic-gradient(from 2deg at 50% 51%,#111 0deg .18deg,transparent .21deg 4deg); mask-image:radial-gradient(ellipse at 50% 51%,transparent 0 35%,#000 72%); transition:opacity .2s; }
.portrait-door:is(:hover,:focus-visible) .portrait-speed { opacity:.38; }
.portrait-sfx { position:absolute; pointer-events:none; font-family:Dela,'Arial Black','Hiragino Kaku Gothic ProN',sans-serif; font-weight:900; line-height:1; paint-order:stroke fill; -webkit-text-stroke:10px #f5f3eb; opacity:0; transition:opacity .15s,transform .24s cubic-bezier(.16,1,.3,1); }
.sfx-watch { top:7%; right:5%; font-size:clamp(60px,9vw,130px); writing-mode:vertical-rl; transform:translateY(15px) rotate(12deg) scale(.85); }
.sfx-heart { bottom:8%; left:5%; font-size:clamp(55px,8vw,115px); color:var(--red); transform:translateX(-20px) rotate(-12deg) scale(.85); }
.portrait-door:is(:hover,:focus-visible) .sfx-watch { opacity:1; transform:translateY(0) rotate(12deg) scale(1); }
.portrait-door:is(:hover,:focus-visible) .sfx-heart { opacity:1; transform:translateX(0) rotate(-12deg) scale(1); transition-delay:65ms; }
.portrait-corner { position:absolute; bottom:19px; right:19px; width:50px; height:50px; display:grid; place-items:center; background:var(--ink); color:var(--paper); font-size:32px; transition:background .2s; }
.portrait-door:hover .portrait-corner { background:var(--red); }
.portrait-door:active { box-shadow:3px 3px 0 var(--ink); transform:translate(3px,3px); }
.portrait-mode .site-footer { border:0; padding:19px 0 8px; font-size:9px; }
@media(max-width:640px) {
  .portrait-mode #site { padding:0 12px; }
  .portrait-mode .quiet-header { min-height:53px; }
  .portrait-door { height:calc(100svh - 110px); min-height:360px; border-width:4px; }
  .portrait-image { object-position:50% 48%; }
  .portrait-corner { bottom:13px; right:13px; width:42px; height:42px; font-size:28px; }
  .portrait-sfx { -webkit-text-stroke:6px #f5f3eb; }
  .portrait-mode .site-footer { gap:3px; padding-top:17px; }
  .portrait-mode .site-footer>a { width:auto; }
}
@media(hover:none) {
  .portrait-door:active .portrait-sfx { opacity:1; }
}
@media(prefers-reduced-motion:reduce) {
  .portrait-door:is(:hover,:focus-visible) .portrait-image { transform:none; }
}

@font-face { font-family:DelaSfx; src:url('/fonts/dela-sfx.ttf') format('truetype'); font-weight:400; font-display:swap; }
.portrait-sfx { font-family:DelaSfx,sans-serif; font-weight:400; }
/* A small second frame gives the cover a manga-page rhythm without adding copy. */
.portrait-inset { position:absolute; z-index:1; left:3.5%; bottom:7%; width:25%; height:23%; border:4px solid var(--ink); box-shadow:7px 7px 0 var(--red); overflow:hidden; background:var(--paper); transform:rotate(-5deg); transition:transform .35s; pointer-events:none; }
.portrait-inset img { width:100%; height:100%; object-fit:cover; object-position:52% 43%; transform:scale(1.7); }
.portrait-door:is(:hover,:focus-visible) .portrait-inset { transform:rotate(-2deg) translateY(-6px); }
.sfx-heart { bottom:31%; left:5%; z-index:2; font-size:clamp(48px,6vw,90px); }
/* Reading index: quiet side rail, aligned metadata, generous text measure. */
.essays-page { display:grid; grid-template-columns:225px minmax(0,1fr); gap:64px; padding:64px 0 80px; min-height:75vh; }
.essays-heading { position:sticky; top:34px; align-self:start; margin:0; }
.essays-heading h1 { font-size:58px; line-height:1.2; letter-spacing:-3px; }
.archive-count { display:block; font:11px var(--mono); color:var(--muted); margin:16px 0 30px; }
.archive-portrait { height:150px; border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); overflow:hidden; transform:rotate(-3deg); margin-right:6px; }
.archive-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 43%; }
.essays-content { min-width:0; }
.essays-page .index-toolbar { display:flex; flex-direction:column-reverse; align-items:stretch; gap:20px; margin-bottom:24px; }
.essays-page .search-field { width:100%; }
.essays-page .search-field input { width:100%; min-height:48px; border:1px solid #b8b3a8; background:#fffdf52b; padding:12px 16px; font-size:13px; }
.essays-page .chip-row { gap:7px; }
.essays-page .chip { padding:7px 13px; font-size:12px; min-height:36px; }
.essays-page .chip.active { background:var(--ink); color:var(--paper); }
.essays-page .post-index { border-top:2px solid var(--ink); }
.essays-page .post-row { display:grid; grid-template-columns:30px minmax(0,1fr) 28px; column-gap:22px; align-items:start; padding:29px 0 31px; transition:background .2s; }
.row-number { padding-top:3px; font:11px var(--mono); color:#79766d; }
.essay-meta { display:flex; gap:15px; align-items:center; margin-bottom:11px; font:11px var(--mono); color:var(--muted); }
.essay-meta>span { color:var(--red); font-family:var(--body); }
.essays-page .row-main h2 { font-size:23px; line-height:1.45; font-weight:650; margin:0 0 10px; letter-spacing:-.4px; }
.essays-page .row-main p { font-size:13px; line-height:1.9; color:var(--muted); max-width:55ch; }
.essays-page .row-arrow { font-size:24px; margin-top:30px; transition:transform .2s,color .2s; }
.essays-page .post-row:hover .row-arrow { transform:translateX(5px); color:var(--red); }
.essays-page .post-row:hover { background:#ffffff25; }
@media(max-width:900px) {
  .essays-page { grid-template-columns:170px minmax(0,1fr); gap:35px; }
  .essays-heading h1 { font-size:48px; }
  .archive-portrait { height:125px; }
}
@media(max-width:640px) {
  .portrait-inset { width:37%; height:18%; left:5%; bottom:6%; border-width:3px; box-shadow:4px 4px 0 var(--red); }
  .sfx-heart { bottom:26%; font-size:48px; }
  .essays-page { display:block; padding:31px 0 45px; }
  .essays-heading { position:relative; display:flex; align-items:baseline; gap:16px; margin-bottom:28px; }
  .essays-heading h1 { font-size:43px; }
  .archive-count { margin:0; }
  .archive-portrait { display:none; }
  .essays-page .index-toolbar { gap:14px; margin-bottom:20px; }
  .essays-page .chip { min-height:40px; padding:8px 10px; }
  .essays-page .post-row { grid-template-columns:22px minmax(0,1fr) 20px; gap:12px; padding:24px 0; }
  .essays-page .row-main h2 { font-size:20px; line-height:1.5; }
  .essays-page .row-main p { font-size:12px; }
  .essays-page .row-arrow { grid-column:3; grid-row:1; font-size:21px; margin-top:31px; }
  .essay-meta { font-size:10px; gap:12px; }
  .row-number { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .portrait-door:is(:hover,:focus-visible) .portrait-inset { transform:rotate(-5deg); } }
/* Keep the selected square artwork complete at every screen size. */
.portrait-mode #site { max-width:1060px; padding:0 28px; }
.portrait-home { width:min(100%, 740px, calc(100svh - 132px)); margin:8px auto 12px; }
.portrait-door { width:100%; height:auto; min-height:0; max-height:none; aspect-ratio:1; border-width:3px; box-shadow:6px 6px 0 var(--ink); overflow:visible; }
.portrait-image, .portrait-door:is(:hover,:focus-visible) .portrait-image { display:block; width:100%; height:100%; object-fit:contain; object-position:center; transform:none; transition:none; }
.portrait-speed { inset:0; mask-image:radial-gradient(ellipse at center,transparent 0 55%,#000 100%); }
.portrait-door:is(:hover,:focus-visible) { box-shadow:6px 6px 0 var(--red); }
.sfx-watch { right:-5%; top:10%; font-size:clamp(40px,6vw,76px); }
.sfx-heart { left:-8%; bottom:10%; font-size:clamp(36px,5vw,66px); }
.portrait-corner { width:38px; height:38px; bottom:10px; right:10px; font-size:25px; }
.portrait-mode .site-footer { padding:16px 0; font-size:10px; }
/* Comfortable reading column, shared with the article page. */
body:not(.portrait-mode) { background:#f7f5ef; }
body:not(.portrait-mode):before { opacity:.025; }
body:not(.portrait-mode) #site { max-width:1020px; padding:0 36px; }
body:not(.portrait-mode) .quiet-header { border-bottom:1px solid #dedbd2; }
.essays-page { display:block; width:100%; max-width:740px; margin:0 auto; padding:54px 0 72px; }
.essays-heading { position:static; display:flex; align-items:baseline; gap:18px; margin:0 0 34px; }
.essays-heading h1 { font-size:40px; font-weight:700; letter-spacing:-1px; }
.archive-count { margin:0; font:13px var(--body); color:#77736b; }
.essays-page .index-toolbar { flex-direction:column; gap:15px; margin-bottom:14px; }
.essays-page .search-field input { min-height:46px; background:#fffdf9; border:1px solid #dedbd2; border-radius:5px; font-size:15px; padding:10px 15px; }
.essays-page .chip-row { gap:5px; }
.essays-page .chip { min-height:42px; padding:8px 13px; font-size:14px; border-radius:4px; }
.essays-page .chip.active { background:#eae6dc; color:#25231f; }
.essays-page .chip span { font-size:11px; }
.essays-page .post-index { border-top:1px solid #dedbd2; }
.essays-page .post-row { grid-template-columns:minmax(0,1fr) 22px; gap:22px; padding:30px 0 32px; border-bottom:1px solid #e3e0d8; }
.essay-meta { font:13px/1.5 var(--body); color:#77736b; margin-bottom:10px; }
.essay-meta>span { color:#77736b; }
.essays-page .row-main h2 { font-size:24px; line-height:1.5; font-weight:600; letter-spacing:0; margin-bottom:9px; }
.essays-page .row-main p { display:block; overflow:visible; font-size:16px; line-height:1.85; color:#59564f; max-width:none; }
.essays-page .row-arrow { grid-column:2; grid-row:1; font-size:20px; color:#8d887e; margin-top:34px; }
.essays-page .post-row:hover { background:transparent; }
.post-page { max-width:720px; padding-top:42px; }
.article-head { border-bottom:1px solid #dedbd2; padding-bottom:28px; margin-bottom:32px; }
.article h1 { font-size:36px; line-height:1.45; letter-spacing:-.5px; }
.article-summary { font-size:17px; line-height:1.9; color:#625e56; }
.prose { font-size:18px; line-height:1.95; color:#302e29; }
.prose p { margin:0 0 1.5em; }
.prose h2 { font-size:26px; line-height:1.5; margin:1.8em 0 .75em; }
.prose h3 { font-size:22px; line-height:1.5; }
.prose li { margin:.5em 0; }
.prose blockquote { background:#eeeae1; padding:15px 23px; }
.prose blockquote p:last-child { margin-bottom:0; }
.post-nav { border-top:1px solid #dedbd2; }
@media(max-width:640px) {
  .portrait-mode #site { padding:0 22px; }
  .portrait-home { width:min(100%,calc(100svh - 144px)); margin:22px auto 28px; }
  .portrait-mode .quiet-header { min-height:60px; }
  .sfx-watch { right:-4%; font-size:44px; }
  .sfx-heart { left:-4%; font-size:38px; }
  .portrait-mode .site-footer { flex-wrap:wrap; gap:8px; }
  body:not(.portrait-mode) #site { padding:0 23px; }
  .essays-page { padding:32px 0 45px; }
  .essays-heading { margin-bottom:26px; }
  .essays-heading h1 { font-size:34px; }
  .essays-page .post-row { grid-template-columns:minmax(0,1fr) 18px; gap:12px; padding:26px 0; }
  .essays-page .row-main h2 { font-size:21px; }
  .essays-page .row-main p { font-size:15px; line-height:1.85; }
  .essay-meta { font-size:12px; }
  .essays-page .chip { font-size:13px; padding:8px 10px; }
  .article h1 { font-size:28px; }
  .prose { font-size:17px; line-height:1.95; }
  .article-summary { font-size:16px; }
}

/* Two full artworks, one shared frame, equal rendered image heights. */
.portrait-mode #site { max-width:1280px; min-height:100svh; display:flex; flex-direction:column; padding:0 32px; }
.portrait-mode .quiet-header { min-height:72px; }
.portrait-gallery { width:min(100% - 8px,1100px,calc((100svh - 155px) * 1.5033333333333334)); max-width:none; margin:auto; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); background:#f5f3ed; }
.portrait-gallery .portrait-door { width:100%; height:100%; min-height:0; max-height:none; aspect-ratio:auto; border:0; box-shadow:none; overflow:visible; background:transparent; }
.portrait-gallery .portrait-panel-1:before { content:''; position:absolute; top:0; bottom:0; left:-1.5px; width:3px; background:var(--ink); z-index:3; pointer-events:none; }
.portrait-gallery .portrait-image { display:block; width:100%; height:auto; object-fit:contain; transform:none; }
.portrait-gallery .portrait-door:is(:hover,:focus-visible,:active) { transform:none; box-shadow:none; z-index:2; }
.portrait-gallery .portrait-door:is(:hover,:focus-visible) .portrait-image { transform:none; }
.portrait-gallery .sfx-watch { font-size:clamp(34px,5vw,70px); right:3%; top:7%; -webkit-text-stroke:6px #f5f3eb; z-index:2; }
.portrait-gallery .portrait-panel-0 .sfx-watch { color:var(--red); }
.portrait-gallery .portrait-corner { width:36px; height:36px; font-size:24px; bottom:10px; right:10px; }
.portrait-mode .site-footer { margin-top:auto; padding:22px 0 16px; }
@media(max-width:640px) {
  .portrait-mode #site { padding:0 18px; }
  .portrait-gallery { width:calc(100% - 6px); margin:auto; border-width:2px; box-shadow:5px 5px 0 var(--ink); }
  .portrait-gallery .portrait-panel-1:before { width:2px; left:-1px; }
  .portrait-gallery .sfx-watch { font-size:30px; -webkit-text-stroke:4px #f5f3eb; }
  .portrait-gallery .portrait-corner { width:27px; height:27px; font-size:20px; bottom:7px; right:7px; }
}