/* Decorative pass only: this file must not change layout dimensions or interaction. */

/* Keep the desktop shell at the reference's wide 16:9 proportions. */
body {
  display: grid;
  place-items: center;
}

.app-frame {
  width: min(100%, 1800px, calc(177.6833vh - 28.432px));
  height: auto;
  max-height: calc(100vh - 16px);
  aspect-ratio: 1672 / 941;
}

/* A lightly scanned paper sheet gives the actual homepage content its warm base. */
.browser-content {
  background-color: #efe8d9;
  background-image:
    linear-gradient(#f2eddf88, #f2eddf88),
    url("/assets/img/homepage-paper.png"),
    repeating-linear-gradient(0deg, #81725b08 0 1px, #fff0 1px 4px),
    radial-gradient(ellipse at 50% 46%, transparent 50%, #8d7b632e 100%);
  background-size: 100% 100%, 100% 100%, auto, auto;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-blend-mode: normal, multiply, normal, normal;
}

/* Return the vertical rhythm to the reference while keeping all panes in the grid. */
.browser-content {
  padding-top: 5px;
}

/* The visitor counter gets the little sketched treeline shown in the mockup. */
.visitor {
  position: relative;
  isolation: isolate;
}

.visitor::before,
.visitor::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -3px;
  width: clamp(72px, 11vw, 145px);
  height: clamp(18px, 2.8vw, 32px);
  pointer-events: none;
  background: url("/assets/img/pine-doodle.svg") left bottom / 100% 100% no-repeat;
  opacity: 0.72;
}

.visitor::before {
  left: 0;
}

.visitor::after {
  right: 0;
  transform: scaleX(-1);
}

/* Let the existing illustrated banner pick up a hint of printed paper texture. */
.home-hero {
  isolation: isolate;
  background-image: url("/assets/img/moth-banner-handmade.png");
  background-size: 100% 100%;
  background-position: center;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/assets/img/paper-grain.svg") repeat;
  background-size: 190px 190px;
  opacity: 0.14;
  mix-blend-mode: screen;
}

/* A faint second pencil line makes the notice feel drawn on the paper. */
.construction {
  border-color: #a99caf #b4a8b8 #988ca2 #b8aabc;
  border-radius: 3px 2px 4px 1px;
  outline: 1px dotted #b9aebc;
  outline-offset: 2px;
  transform: none;
}

/* Keep every card squarely aligned; use ink-like edges and paper grain for character. */
.feature,
.feature:nth-child(1),
.feature:nth-child(2) {
  border-radius: 2px 1px 3px 2px;
  transform: none;
  background-image:
    url("/assets/img/paper-grain.svg"),
    linear-gradient(177deg, #f0ebdf, #dfd8ca);
  background-size: 190px 190px, auto;
}

/* The photo keeps its exact box and caption position while the frame gets a pencil edge. */
.mini-photo {
  transform: none;
  border-radius: 2px 1px 3px 2px;
  outline-color: #332c3b;
  box-shadow: 2px 3px 0 #aaa092, 0 0 0 2px #34303b;
}

/* The script note is the one element meant to feel freely hand-written. */
.story-copy .handnote {
  transform: rotate(6deg);
  text-shadow: 0 1px #fff8;
}

@media (max-width: 620px) {
  .story-copy .handnote {
    transform: rotate(4deg);
  }
}

@media (max-width: 900px) {
  body {
    display: block;
  }

  .app-frame {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
  }

  .browser-content {
    padding-top: 11px;
  }

  .visitor::before,
  .visitor::after {
    opacity: 0.42;
  }
}

/* Fine art-direction corrections: decorative only, preserving every DOM hit target. */
.home-hero { background-image: url("/assets/img/moth-banner-handmade-v2.png"); }
.hero-copy { left: 23%; right: 12%; }
.hero-copy h1 { font-size: clamp(34px, 3.4vw, 52px); letter-spacing: 1.2px; }
.hero-copy p { font-size: clamp(11px, .95vw, 15px); letter-spacing: 1.5px; }
.construction-art img { max-height: clamp(47px, 3.7vw, 60px); }
.visitor::before, .visitor::after { width: clamp(110px, 14vw, 190px); height: clamp(25px, 3.2vw, 40px); }
.site-name { font-size: clamp(13px, .86vw, 15px); }
.titlebar { font-size: clamp(13px, .9vw, 16px); }
.page-main { font-size: clamp(14px, .92vw, 16px); }
.page-link { font-size: clamp(13px, .85vw, 15px); }
.post h3 { font-size: clamp(13px, .82vw, 14px); }
.post p { font-size: clamp(13px, .78vw, 14px); }
@media (max-width: 900px) {
  .hero-copy { left: 22%; right: 6%; }
  .hero-copy h1 { font-size: clamp(23px, 3vw, 38px); }
}
@media (max-width: 620px) {
  .hero-copy h1 { font-size: clamp(17px, 5vw, 24px); }
}

/* Whole-screen finish: a faint scan, worn ink edges, and warmer plastic/paper tones. */
.app-frame {
  border-color: #544b5e;
  border-radius: 7px;
  background-color: #100e14;
  background-image: url("/assets/img/paper-grain.svg"), linear-gradient(135deg, #19151e, #0b0a0f 70%);
  background-size: 230px 230px, auto;
  box-shadow: 0 0 0 3px #09080c, 0 18px 70px #000c, inset 0 0 0 1px #d7b0d426, inset 0 0 24px #000a;
}
.topbar {
  background-image: url("/assets/img/paper-grain.svg"), linear-gradient(180deg, #211c27, #111016);
  background-size: 220px 220px, auto;
  border-bottom-color: #66556d;
}
.layout > .window {
  background-image: url("/assets/img/paper-grain.svg"), linear-gradient(145deg, #17151d, #100f15);
  background-size: 240px 240px, auto;
  border-color: #74667a;
  box-shadow: inset 0 0 0 2px #08080c, 2px 2px 0 #08070b, inset 0 0 18px #c28bc10c;
}
.titlebar {
  background-image: url("/assets/img/paper-grain.svg"), linear-gradient(90deg, #392c42, #24202b 70%, #2a2632);
  background-size: 210px 210px, auto;
  border-bottom-color: #74637a;
}
.site-row { border-bottom: 1px dotted #514958; }
.site-icon {
  border-style: ridge;
  border-color: #70677b;
  background-image: url("/assets/img/paper-grain.svg"), linear-gradient(#302b37, #17161e);
  background-size: 120px 120px, auto;
  box-shadow: inset 0 0 0 1px #d8c9e01c, 1px 2px 0 #08070b;
}
.browserbar {
  background-image: url("/assets/img/paper-grain.svg"), linear-gradient(#e4e0d7, #beb8b9);
  background-size: 220px 220px, auto;
  border-bottom-color: #817887;
}
.browserbar button { border-color: #c4bdb7; background-image: linear-gradient(#f5f1e9, #d5ced0); }
.post {
  border-color: #696071;
  border-radius: 2px 3px 2px 4px;
  background-image: url("/assets/img/paper-grain.svg"), linear-gradient(155deg, #211e28, #17151d);
  background-size: 190px 190px, auto;
  box-shadow: inset 0 0 0 1px #ffffff0a, 1px 2px 3px #05040870;
}
.feature { border-color: #9a8f97; box-shadow: inset 0 0 0 1px #fff7, 1px 2px 2px #7b6d5d55; }
.home-hero { border-color: #756982; box-shadow: inset 0 0 0 2px #08070c, inset 0 -9px 18px #090811, 2px 3px 0 #08070b; }
/* The global falloff is deliberately gentle so it never muddies body copy. */
.app-frame:after {
  background: repeating-linear-gradient(0deg, #0000 0 3px, #05040a0a 4px), radial-gradient(ellipse at 50% 48%, transparent 60%, #07060a12 84%, #05040942 125%);
}
@media (max-width: 900px) {
  .app-frame { border-radius: 0; }
}

/* A scrapbook snapshot replaces the geometric placeholder skyline without resizing it. */
.mini-photo {
  background-color: #44374e;
  background-image: url("/assets/img/ridgeview-handdrawn.png");
  background-size: cover;
  background-position: center;
  border: 4px ridge #716778;
  box-shadow: 2px 3px 0 #aaa092, 0 0 0 2px #34303b, inset 0 0 0 1px #fff5;
}
.mini-photo::before { display: none; }
.mini-photo::after { text-shadow: 0 1px #f4eddf; }
/* Print texture reaches the dark chrome too, at a level that does not veil labels. */
.app-frame:after {
  background-image:
    url("/assets/img/paper-grain.svg"),
    repeating-linear-gradient(0deg, #0000 0 3px, #05040a0a 4px),
    radial-gradient(ellipse at 50% 48%, transparent 60%, #07060a12 84%, #05040942 125%);
  background-size: 250px 250px, auto, auto;
  background-repeat: repeat, repeat, no-repeat;
  background-blend-mode: soft-light, normal, normal;
}
.topbar .logo { text-shadow: 2px 2px #76518f, 3px 3px #111, 0 0 9px #dc82d733; }
.page-links .page-link { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.browser-content { box-shadow: inset 0 0 22px #66513b18; }

/* Soft aged-glass falloff like a photographed CRT, concentrated at the corners. */
.app-frame:after {
  background-image:
    url("/assets/img/paper-grain.svg"),
    repeating-linear-gradient(0deg, #0000 0 3px, #05040a0a 4px),
    radial-gradient(ellipse at 50% 46%, transparent 49%, #08070b18 74%, #05040982 112%);
}
/* Double ink rules suggest pencil-built boxes without moving their contents. */
.feature { outline: 1px solid #857a7659; outline-offset: 2px; }
.post { outline: 1px solid #a89aa219; outline-offset: 1px; }
.construction { box-shadow: inset 0 0 0 1px #fff8, 1px 2px 2px #65596a24; }
.mini-photo { filter: saturate(.9) sepia(.06); }