@font-face {
  font-family: 'Inter';
  src: url('inter-var.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@layer reset, shared, room, motion, evolution;
@view-transition { navigation: auto; }
@layer reset {
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 28px; }
  body { margin: 0; color: #000; font-family: 'Inter', Arial, sans-serif; }
  button, input { font: inherit; }
  a { color: inherit; text-underline-offset: .18em; }
  button, a { -webkit-tap-highlight-color: transparent; }
  button { cursor: pointer; }
  img { max-width: 100%; height: auto; }
  a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
    outline: 3px solid #b90018; outline-offset: 5px;
  }
  [hidden] { display: none !important; }
}
@layer shared {
  .skip { position: fixed; z-index: 100; top: 12px; left: 12px; background: #fff; padding: 14px; transform: translateY(-160%); }
  .skip:focus { transform: none; }
  .brandmark { display: block; flex-shrink: 0; line-height: 0; view-transition-name: bad-telly-brand; }
  .brandmark img { display: block; }
  .button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 17px 24px; border: 2px solid #111; background: #111; color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; transition: background .25s, color .25s, transform .25s; }
  .button:hover { background: #b90018; transform: translateY(-2px); }
  .socials { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; }
  .socials a { text-decoration: none; }
  .text-link { display: block; margin: 22px 0 0; }
  dialog { border: 0; padding: 38px; background: #f4e8c6; color: #111; max-height: 90svh; max-width: calc(100% - 28px); overflow-y: auto; box-shadow: 0 16px 80px #0005; opacity: 0; transform: translateY(18px); transition: opacity .28s, transform .35s, display .35s allow-discrete, overlay .35s allow-discrete; }
  dialog[open] { opacity: 1; transform: translateY(0); }
  dialog::backdrop { background: #182526a8; backdrop-filter: blur(5px); }
  @starting-style { dialog[open] { opacity: 0; transform: translateY(18px); } }
  dialog h2 { font-size: clamp(27px, 3vw, 40px); letter-spacing: -.045em; line-height: 1.15; margin: 40px 0 28px; }
  dialog p { font-size: 16px; line-height: 1.7; }
  .dialog-close { display: block; margin-left: auto; background: transparent; border: 0; font-size: 14px; padding: 6px; }
  .side-dialog { margin: 0 0 0 auto; width: min(480px, 100%); max-width: 100%; max-height: 100svh; height: 100svh; padding: 32px; transform: translateX(30px); }
  .side-dialog[open] { transform: translateX(0); }
  .drawer-nav { display: grid; gap: 20px; }
  .drawer-nav a { font-size: 21px; font-weight: 700; text-decoration: none; letter-spacing: -.04em; }
  .banter-menu { border-top: 1px solid #0003; margin: 32px 0; padding-top: 22px; }
  .banter-menu summary { cursor: pointer; font-size: 23px; font-family: Georgia, serif; }
  .banter-menu ul { list-style: none; padding: 0 12px; line-height: 1.8; }
  .menu-aside { font-size: 12px; }
  .search-dialog { width: min(680px, 100%); }
  .search-dialog label { display: block; font-size: 13px; margin-bottom: 10px; }
  .search-dialog input { width: 100%; min-height: 54px; border: 2px solid #111; background: #fff9; border-radius: 0; padding: 12px; font-size: 19px; }
  .search-results { list-style: none; padding: 0; }
  .search-results a { display: block; padding: 15px 0; font-size: 18px; font-weight: 700; }
  .search-results small { display: block; color: #555; font-weight: 400; line-height: 1.5; font-size: 12px; margin: 7px 0; }
  .search-status { font-size: 12px; }
  .store-dialog { width: 600px; text-align: center; border: 3px solid #16130c; }
  .store-dialog img { width: 100%; display: block; }
  .store-dialog .button { display: flex; }
}

@layer room {
  .living-room { position:relative; overflow:hidden; isolation:isolate; }
  .room-header { position:relative; z-index:4; display:flex; align-items:flex-start; justify-content:space-between; }
  .home-brand img { display:block; }
  .room-header nav { display:flex; align-items:center; justify-content:flex-end; color:#fff; font-weight:600; }
  .room-header nav a { text-decoration:none; padding:10px 0; text-shadow:0 1px 3px #263f3d; }
  .room-stage { position:absolute; overflow:clip; }
  .room-title { position:absolute; z-index:3; font-weight:500; margin:0; line-height:1.5; }
  .room-footer { position:absolute; bottom:0; width:100%; display:grid; align-items:center; }
  .room-footer nav { display:flex; flex-wrap:wrap; }
  .room-footer a { text-decoration:none; }
  .room-footer > p { text-align:right; margin:0; }
  .cartoon-picture { display: block; position: absolute; top: 8.8%; width: 18%; text-decoration: none; isolation: isolate; }
  .picture-youtube { left: 1%; }
  .picture-driplips { left: 32%; }
  .frame-motion { display: block; transform-origin: 50% 2%; }
  .wood-frame { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 2%; transition: rotate .45s, filter .45s; }
  .hanging-wire { fill: none; stroke: #181611; stroke-width: 3; stroke-linejoin: round; }
  .frame-shadow { fill: #172b2650; }
  .wood-outer { fill: #9f4905; }
  .wood-top { fill: #d57a22; stroke: #17130e; stroke-width: 4; }
  .wood-left { fill: #c76711; stroke: #17130e; stroke-width: 4; }
  .wood-right { fill: #743306; stroke: #17130e; stroke-width: 4; }
  .wood-bottom { fill: #a9500c; stroke: #17130e; stroke-width: 4; }
  .print-outline { fill: none; stroke: #15130f; stroke-width: 8; stroke-linejoin: round; }
  .wood-grain { fill: none; stroke: #69320c; stroke-width: 2; stroke-linecap: round; opacity: .6; }
  .frame-outline { fill: none; stroke: #11110c; stroke-width: 7; stroke-linejoin: round; }
  .wall-pin { fill: #1c1b14; }
  .cartoon-caption { position: absolute; z-index: 2; top: 100%; left: 50%; translate: -50% 0; width: max-content; max-width: 115%; padding: 9px 13px; border: 2px solid #111; background: #fcf6d9; color: #111; font-size: clamp(9px, .85vw, 13px); text-align: center; opacity: 0; transform: translateY(8px) rotate(-2deg); transition: opacity .2s, transform .3s; box-shadow: 3px 3px 0 #111; pointer-events: none; }
  .cartoon-caption b { padding-left: 6px; }
  .cartoon-picture:focus-visible { outline: 0; }
  .cartoon-picture:focus-visible .wood-frame { filter: drop-shadow(0 0 5px #fff); }
  .cartoon-picture:focus-visible .cartoon-caption { opacity: 1; transform: none; }
}
@layer shared {
  .milk-edge { position: absolute; top: 0; left: 0; right: 0; height: 130px; pointer-events: none; overflow: hidden; }
  .milk-texture { display: block; position: absolute; inset: -2px 0 0; background: url('milky-drip.webp') repeat-x top / 300px auto; transform-origin: center top; }
  .milk-edge i { position: absolute; top: 30px; width: 6px; height: 9px; border-radius: 55% 55% 60% 60%; background: #e7dfc7; box-shadow: inset 1px 1px 2px #ffffffe0; opacity: 0; }
  .milk-edge i:nth-child(2) { left: 8%; }
  .milk-edge i:nth-child(3) { left: 41%; }
  .milk-edge i:nth-child(4) { left: 69%; }
  .milk-edge i:nth-child(5) { left: 88%; }
  .profile-socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; font: 11px 'Inter', Arial, sans-serif; }
  .profile-socials a { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
  .ig-badge, .fb-badge { display: inline-grid; place-items: center; height: 24px; width: 24px; border-radius: 3px; color: white; font: 700 18px Arial, sans-serif; }
  .ig-badge { background: #e62268; }
  .fb-badge { background: #147be5; }

  .share-platforms { display:flex; flex-wrap:wrap; }
  .share-status { display:block; margin-top:15px; font-size:12px; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
}
@layer motion {
  @media (prefers-reduced-motion:no-preference) {
    .milk-texture { animation:milk-breathe 8s ease-in-out infinite; }
    .milk-edge i { animation:milk-bead 9s ease-in infinite; }
    .milk-edge i:nth-child(3) { animation-delay:3.1s; }
    .milk-edge i:nth-child(4) { animation-delay:6.2s; }
    .milk-edge i:nth-child(5) { animation-delay:4.7s; }
    @supports (animation-timeline:scroll()) {
      .read-progress { position:fixed; z-index:10; top:0; left:0; width:100%; height:3px; background:#bb1838; transform-origin:left; animation:reading-progress linear both; animation-timeline:scroll(); }
    }
  }
  @media(hover:hover) {
    .cartoon-picture:hover .wood-frame { rotate:-1deg; filter:drop-shadow(2px 4px 0 #152f2626); }
    .picture-driplips:hover .wood-frame { rotate:1deg; }
    .cartoon-picture:hover .cartoon-caption { opacity:1; transform:none; }
  }
  @keyframes milk-breathe { 0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.045)} }
  @keyframes milk-bead { 0%,64%{opacity:0;transform:translateY(0) scale(.7)}70%{opacity:.8;transform:translateY(10px) scale(.9,1.3)}83%,100%{opacity:0;transform:translateY(95px) scale(.65,1.2)} }
  @keyframes reading-progress { from{transform:scaleX(0)}to{transform:scaleX(1)} }
  @media(prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation:none!important; transition:none!important; }
    @view-transition { navigation:none; }
  }
}