:root {
  --ink: #222624;
  --paper: #eee8d9;
  --red: #446544;
  --cover: #678061;
  --ribbon: #839976;
  --art-tint: hue-rotate(105deg) saturate(.47) brightness(.88);
}

.portfolio-frame {
  background:
    radial-gradient(ellipse 710px 180px at 5% 720px, #647c6330, transparent 95%),
    radial-gradient(ellipse 660px 420px at 98% 300px, #7a8f6e22, transparent 90%),
    radial-gradient(ellipse 900px 180px at 50% 1220px, #7c887521, transparent 90%),
    var(--ink);
}
.portfolio-frame .paper-noise { opacity: .17; }
.stamp img { filter: var(--art-tint); }
.stamp span { color: #b4c7a5; }
.contact-media img, .contact-check img, .contact-email img, .mat-doodles img { filter: var(--art-tint); }
.nav-home img { max-width: none; }
.nav-profiles {
  left: auto;
  right: -17px;
  width: 145px;
  height: 76px;
  border: 1px solid #8f9a8188;
  border-radius: 8px 6px 7px 5px;
  background: #344135;
  transform-origin: bottom center;
  font: 17px/1.2 var(--hand);
  color: #f0ead8;
}
.nav-profiles a { width: 100%; height: 34px; transform: none; }
.nav-profiles a:hover { color: #c7d9b7; }
.nav-profiles::before { width: 30px; height: 30px; left: -38px; bottom: 3px; }
.admin-shortcut {
  position: absolute;
  top: 12px;
  left: calc(100% + 15px);
  white-space: nowrap;
  padding: 3px 8px;
  border: 0;
  border-radius: 2px 3px 2px 1px;
  background: #455b43;
  color: var(--note-paper);
  font: 14px/1.2 var(--hand);
  transform: rotate(-4deg);
}

.qprawl-signature {
  font: 48px/.95 var(--hand);
  letter-spacing: -.06em;
  transform: rotate(-5deg);
  transform-origin: left center;
  color: var(--red);
}
.book-cover {
  background: linear-gradient(var(--cover), var(--cover)) padding-box, linear-gradient(#e3e6d6, var(--cover) 62%) border-box;
}
.book-lower, .cut-mat-back { background: var(--cover); }
.book-ribbon { background: var(--ribbon); }
.book-paper { box-shadow: 0 4px 2px -1px #293a285c, 0 7px 8px #293a283c; }
.book-paper::after { background: linear-gradient(transparent 87%, #3b483214 98%, #26372864); }
.book-grid { filter: grayscale(1); }
.book-lower-paper { background: linear-gradient(#44554150, transparent 46px), var(--paper); }
.home-hero .red-illustration { filter: hue-rotate(117deg) saturate(.3) brightness(.83); }
.value-note--clarity .note-paper { filter: saturate(.65); }
.book-copy .qprawl-signature { height: 52px; }
.book-role { font-family: 'Averia Serif Libre', 'Songti SC', serif; max-width: 350px; overflow-wrap: anywhere; }
.book-copy .book-headline { margin-top: 5px; max-width: min(385px, 45vw); overflow-wrap: anywhere; font: 600 calc(45px * var(--headline-scale, 1))/1.31 "Awesome Serif Semi Bold Tall", "Songti SC", serif; }
.book-copy .book-headline [data-hero-word] { display: inline-block; max-width: 100%; font: 400 calc(51px * var(--headline-scale, 1))/1.2 var(--hand); }
.book-location {
  max-width: 310px;
  font-family: 'Averia Serif Libre', 'Songti SC', serif;
  line-height: 1.2;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.illustration-surface { position: absolute; top: 50%; width: 100%; aspect-ratio: 1024 / 847; transform: translateY(-50%); }
.illustration-surface > img { width: 100%; height: 100%; }
.hero-photo {
  display: none;
  position: absolute;
  left: 40.8%;
  top: 42.2%;
  width: 14.4%;
  height: 25.5%;
  transform: rotate(8deg);
  border-radius: 5px;
  overflow: hidden;
}
.hero-photo:is([data-filled], :has(.photo-edit:not([hidden]))) { display: block; }
.hero-photo .photo-empty { display: none; }
.hero-photo .photo-edit { inset: 0; width: 100%; border: 0; background: #d9e1cdcb; color: var(--red); }
.hero-photo[data-filled] .photo-edit { top: auto; background: #253328c9; color: #f8f7ee; }
.photo-empty {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 7px;
  background: radial-gradient(ellipse at 24% 35%, #f0f2e8ad, transparent 66%), linear-gradient(145deg, #e3e8dd, #c7d4c6);
  color: #536b55;
  font: 12px/1.2 var(--sans);
}
[data-photo]:nth-of-type(2n) .photo-empty { background: linear-gradient(146deg, #e9e9df, #d2d9c9); }
.photo-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-edit {
  position: absolute;
  z-index: 3;
  bottom: 6px;
  right: 6px;
  border: 1px solid #d9e5d3;
  border-radius: 4px;
  padding: 4px 7px;
  background: #293c31e5;
  color: #f4f1e2;
  font: 11px/1.25 var(--sans);
}
.photo-edit:hover { background: #42614d; }
.about-photo, .about-photo-window { position: relative; overflow: hidden; }
.about-photo-mask { pointer-events: none; }
.about-photo-signature { text-align: center; font-size: 30px; transform-origin: center; }
.story-card, .mat-card { border-color: #f9f8ef; background-color: #f9f8ef; }
.story-card:is(:hover, :focus-within), .mat-card:is(:hover, :focus-within) { z-index: 5; transform: rotate(0) scale(1.045); }
.contact-card h2, .contact-card li { border-color: #64816075; }
.contact-choice:is(:hover, :focus-visible) .contact-check { background: #77937328; }
.contact-gif { overflow: hidden; }
.contact-gif .photo-empty { display: none; }
.contact-gif:has(.photo-edit:not([hidden])) { pointer-events: auto; }
.contact-gif[inert] { pointer-events: none; }
.contact-surprise {
  display: grid;
  place-items: center;
  height: 100%;
  background: radial-gradient(ellipse at bottom right, #b1c2a5, transparent 75%), var(--paper);
  color: var(--red);
  font: 34px/1 var(--hand);
}
.contact-gif[data-filled] .contact-surprise { display: none; }
.footer-signature { transform-origin: center; width: fit-content; }
.site-footer .signature { color: #a8bc9c; }

.about-page { --about-red: var(--red); }
.about-cover, .about-tape { background: var(--cover); }
.about-intro {
  width: min(727px, 76%);
  max-height: 96px;
  overflow: auto;
  font-family: "Awesome Serif Semi Bold Extra Tall", 'Songti SC', serif;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.about-note li { color: #587252; }
.about-note button[aria-pressed="true"] { color: #314c32; }
.about-polaroid .about-photo-window .photo-empty {
  background: radial-gradient(ellipse at 38% 30%, #6a7b68, #3e4e43 85%);
}
.about-polaroid .photo-empty img { width: 55%; height: 63%; object-fit: contain; }
.about-landscape .about-photo-window .photo-empty { background: #34443a; }
.about-vertical .about-photo-window .photo-empty { background: #536a55; }
.about-vertical .photo-empty img { width: 72%; height: 82%; }
.about-portrait .about-polaroid-caption { font-size: 34px; }
.about-polaroid:not([hidden]) { animation: return-photo .22s ease-out both; }
@keyframes return-photo { from { opacity: 0; } to { opacity: 1; } }
.about-fuel { background: #55704f; }
.about-interest-card a:hover { text-decoration: underline; }

@media (max-width: 1230px) {
  .about-notebook { width: calc(100% - 48px); }
  .about-cover { width: 98.7%; }
  .about-paper { width: 93.2%; left: 3.4%; }
  .about-paper h1, .about-intro { left: 14%; }
  .about-note { left: 11%; width: min(355px, 41%); }
  .about-tape { left: 23%; }
  .about-portrait { left: 60%; }
  .about-landscape, .about-vertical { left: 56%; }
  .about-landscape { width: min(292px, 42%); }
  .about-interests { width: min(100% - 56px, 1097px); }
  .about-fuel { left: 50%; width: min(402px, 47%); }
  .about-energy { left: 4%; width: min(398px, 47%); }
}

@media (max-width: 809.98px) {
  .portfolio-frame .portfolio-header { height: 138px; }
  .portfolio-nav { top: 67px; font-size: 21px; }
  .portfolio-nav .nav-link { width: min(27vw, 96px); }
  .portfolio-home .nav-home, .portfolio-nav .nav-home { left: -30px; top: 8px; width: 28px; height: 28px; opacity: 1; }
  .nav-art--work img:first-child { top: -62px; width: 48px; }
  .nav-art--work img:nth-child(2) { top: -29px; }
  .nav-profiles { bottom: auto; top: 100%; right: -4px; }
  .nav-profiles::before { display: none; }
  .admin-shortcut { left: auto; right: 0; top: -40px; }
  .stamp-rail { width: 31px; opacity: .77; }
  .stamp { flex-basis: 31px; }
  .stamp img { width: 31px; height: 31px; }
  .stamp-rail--right { display: none; }
  .mobile-book .book-copy { left: 25px; right: 16px; top: 33px; }
  .mobile-book .book-copy .qprawl-signature { height: 45px; font-size: 43px; }
  .mobile-book .book-headline { max-width: none; font-size: calc(38px * var(--headline-scale, 1)); }
  .mobile-book .book-headline [data-hero-word] { font-size: calc(42px * var(--headline-scale, 1)); }
  .mobile-book .book-location { font-size: 15px; max-width: 255px; }
  .mobile-book-illustration { overflow: hidden; }
  .mobile-book-illustration .illustration-surface { top: 0; transform: none; }
  .hero-photo .photo-edit { font-size: 9px; padding: 2px 4px; }
  .story-card { left: clamp(12px, calc(50% + var(--mobile-left)), calc(100% - var(--mobile-width) - 17px)); }
  .home-footer { height: 775px; padding: 45px 15px 0; }
  .contact-wrap { width: min(100%, 500px); margin-inline: auto; }
  .contact-card { height: auto; min-height: 320px; padding: 18px 14px; }
  .contact-copy { width: 61%; }
  .contact-card h2 { font-size: 25px; }
  .contact-choice { font-size: 17px; gap: 6px; padding-inline: 0; }
  .contact-media { left: auto; top: 55px; right: 9px; width: 33%; height: auto; aspect-ratio: 1; }
  .contact-doodle { left: auto; right: -6px; width: 66px; }
  .contact-gif { width: 80%; height: auto; aspect-ratio: 1.77; }
  .contact-wrap[data-checked="3"] .contact-gif { inset-block-start: calc(100% - 14px); transform: translate(-50%, 0) rotate(2deg); }
  .contact-surprise { font-size: 26px; }
  .footer-song { margin-inline: auto; width: 100%; }
  .footer-computer { margin-top: 75px; }
  .about-notebook { width: calc(100% - 36px); height: 850px; }
  .about-cover { top: 44px; height: 774px; }
  .about-paper { inset-block-start: 25px; height: 768px; padding-inline: 20px; }
  .about-paper h1 { inset: 27px auto auto 20px; font-size: 24px; }
  .about-intro { inset: 75px auto auto 20px; width: calc(100% - 40px); font-size: 22px; max-height: 101px; }
  .about-note { inset: 201px auto auto 20px; width: calc(100% - 40px); height: 248px; padding-top: 15px; }
  .about-note ul { height: auto; padding-left: 12px; margin-top: 7px; }
  .about-note h2 { font-size: 21px; }
  .about-note li, .about-note button { font-size: 21px; line-height: 27px; }
  .about-tape { top: 190px; width: 72px; height: 20px; }
  .about-polaroid:is(.about-portrait, .about-landscape, .about-vertical) { inset: 480px auto auto 50%; max-width: 88%; translate: -50% 0; }
  .about-interests { display: grid; gap: 23px; height: auto; padding-block: 20px; width: min(100% - 48px, 410px); }
  .about-interest-card:is(.about-fuel, .about-energy) { position: relative; inset: auto; width: 100%; height: 490px; }
  .about-energy-shapes { transform: scale(clamp(.65, (100vw - 70px) / 350px, 1)); transform-origin: top left; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-ticker { animation: none; }
}