/* ===== AAA Martinez — fake Windows 98 desktop shell =====
   Loads AFTER style.css (reuses its tokens, bevels, typography, taskbar, buttons).
   The teal desktop matches the Design Pusher demo; the AAA site lives in a floating
   Internet Explorer window that can drag / minimize / maximize / close, with the
   portfolio as desktop files peeking out behind it. */

body.d98{ background:#008080; overflow:hidden; --wm-size:min(58vw,620px); --wm-opacity:.07; }
/* Desktop wallpaper: the white AAA MARTINEZ lockup, behind the icons (.wm is
   z-index:0, .desk is 1). Size / position / opacity match the /review/ portal's
   .desktop::before on the same #008080 teal — keep them in sync.
   Scoped to .d98 — the older non-desktop pages keep style.css's Georgia "AAA". */
.d98 .wm{ background:url("assets/aaa-lockup.svg") no-repeat center 42%; background-size:var(--wm-size) auto; opacity:var(--wm-opacity); }
/* taskbar always on top of floating windows (windows live at z=100+) */
.d98 .taskbar{ z-index:100000; }
.d98 .startmenu{ z-index:100001; }
.d98 .sm-item{ cursor:pointer; }

/* discovery hint (top-left, like a sticky note) */
.desk-hint{ position:fixed; left:14px; top:12px; z-index:2; color:rgba(255,255,255,.9); font-size:12px; line-height:1.65; text-shadow:1px 1px 0 rgba(0,0,0,.35); pointer-events:none; }
.desk-hint b{ color:#fff; }

/* ===== desktop icons (the portfolio, as files) ===== */
.desk{ position:fixed; inset:0 0 34px 0; z-index:1; }
.dicon{ position:absolute; width:86px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 3px 3px; cursor:pointer; text-align:center; }
.dicon .ic{ font-size:38px; line-height:1; filter:drop-shadow(1px 1px 0 rgba(0,0,0,.35)); }
.dicon .lb{ font-size:11.5px; color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,.6); padding:1px 4px; max-width:100%; }
.dicon:hover .lb{ text-decoration:underline; }
/* being dragged — Win98 showed a translucent ghost of the icon under the cursor */
.dicon.drag{ opacity:.6; cursor:move; z-index:9; }
.dicon.drag .lb{ text-decoration:none; }
/* Line Up Icons → they glide home with a hair of overshoot, no teleporting */
.dicon.snap{ transition:left .28s cubic-bezier(.2,.7,.3,1.15), top .28s cubic-bezier(.2,.7,.3,1.15); z-index:9; }

/* desktop right-click menu — where Win98 actually kept "Line Up Icons" */
.ctx{ position:fixed; z-index:12000; min-width:170px; background:var(--face); box-shadow:var(--bevel-up), 2px 2px 0 rgba(0,0,0,.25); padding:2px; }
.ctx-i{ display:block; width:100%; text-align:left; font-family:var(--ui); font-size:12px; color:#000; padding:5px 18px 5px 24px; background:none; border:0; cursor:pointer; }
.ctx-i:hover{ background:var(--navy); color:#fff; }
.ctx-rule{ height:0; border-top:1px solid #808080; border-bottom:1px solid #fff; margin:3px 1px; }

/* ---- Cartel Masks pop-up: the sello banner (bottom-left) ----
   The background is the brand's READY-MADE email tile (bold crests baked onto
   black, proven legible in the wire tests) — used as-is at natural size.
   Two attempts at deriving a pattern from the raw tile SVG failed; don't
   re-derive, just use the baked art. */
.cmw{ position:fixed; width:min(400px, 92vw); }
.cm-ad{ position:relative; background:#0b0b0b url('assets/cartel-sello-tile.png') repeat; background-size:128px 148px; padding:20px 18px 17px; text-align:center; overflow:hidden; }
.cm-in{ position:relative; }
.cm-burst{ position:absolute; top:-10px; right:-8px; z-index:2; background:#ffd400; color:#7a0f0f;
  font-family:var(--head); font-size:11px; font-weight:900; letter-spacing:.05em; line-height:1.1;
  padding:6px 9px; transform:rotate(8deg); box-shadow:2px 2px 0 rgba(0,0,0,.55);
  animation:blink 1.4s steps(1) infinite; }
/* aspect-ratio = the SVG's own viewBox (946.5x144.5). Like the photo below,
   the box must exist BEFORE the file loads: the ad seats itself against the
   taskbar by measuring its height at spawn, and on a real network the lockup
   arrives late — an unreserved box measured 0 and hung the ad's bottom under
   the taskbar. Headless tests never catch this (local images decode instantly). */
.cm-lock{ display:block; width:330px; max-width:96%; margin:2px auto 0; aspect-ratio:946.5/144.5; }
/* the product, finally — a mask shot in a white polaroid frame, tipped a few
   degrees so it reads as taped onto the sello wall rather than laid out by CSS.
   (A floating alpha-cutout skull was tried 2026-08-06 and REVERTED same day —
   Uriel prefers the polaroid. Don't re-cut it.) */
.cm-row{ display:flex; align-items:center; gap:12px; margin:13px 0; text-align:left; }
.cm-shot{ flex:none; width:104px; padding:5px 5px 8px; background:#fff;
  box-shadow:2px 3px 0 rgba(0,0,0,.5); transform:rotate(-3deg); }
/* aspect-ratio matters — the ad is bottom-anchored by measuring its height at
   spawn, and an undecoded image with no reserved box measures 0 tall, seating
   the window under the taskbar. Same trick .dip-bird uses. Photo is square. */
.cm-shot img{ display:block; width:100%; height:auto; aspect-ratio:1/1; }
.cm-tag{ color:#e8e8e8; font-size:12.5px; line-height:1.55; }
.cm-tag b{ color:#ff4040; }
.cm-cta{ display:inline-block; background:#d02020; color:#fff; font-weight:bold; font-size:13px; text-decoration:none; padding:9px 20px; box-shadow:var(--bevel-up); }
.cm-cta:active{ box-shadow:var(--bevel-dn); }
.cm-marquee{ overflow:hidden; white-space:nowrap; margin-top:11px; padding:3px 0;
  background:#1a0000; color:#ff4040; font-family:"Courier New",monospace; font-size:11px;
  box-shadow:inset 1px 1px rgba(0,0,0,.8), inset -1px -1px rgba(255,255,255,.08); }
.cm-marquee span{ display:inline-block; padding-left:100%; animation:dpscroll 11s linear infinite; }
.cm-fine{ color:#8f8f8f; font-size:10px; margin-top:9px; letter-spacing:.02em; }
.dicon.sel .ic{ filter:drop-shadow(1px 1px 0 rgba(0,0,0,.35)) brightness(.82) sepia(1) hue-rotate(175deg) saturate(3); }
.dicon.sel .lb{ background:#000080; color:#fff; outline:1px dotted #fff; outline-offset:-1px; }

/* ===== colored Windows flag logo ===== */
.winflag{ display:inline-block; width:17px; height:15px; position:relative; transform:skewX(-9deg) rotate(-1deg); flex:none; }
.winflag i{ position:absolute; width:7.5px; height:6.5px; }
.winflag i:nth-child(1){ left:0; top:0; background:#f24b3a; border-top-left-radius:3px 5px; }
.winflag i:nth-child(2){ right:0; top:0; background:#57b846; border-top-right-radius:5px 4px; }
.winflag i:nth-child(3){ left:0; bottom:0; background:#2b95e0; }
.winflag i:nth-child(4){ right:0; bottom:0; background:#f4c009; }

/* ===== Internet Explorer window (holds the AAA site) ===== */
.ie-win{ position:absolute; z-index:100; display:flex; flex-direction:column; background:var(--face);
  box-shadow:var(--bevel-up); padding:3px; min-width:340px; min-height:220px; }
.ie-win.min{ display:none; }
.ie-win.max{ left:0 !important; top:0 !important; width:100vw !important; height:calc(100vh - 34px) !important; }
.ie-win.max .ie-title{ cursor:default; }

.ie-title{ display:flex; align-items:center; gap:7px; padding:3px 3px 3px 6px; cursor:move; color:#fff;
  background:linear-gradient(90deg,var(--navy),var(--navy2)); }
.ie-title .ie-ico{ display:inline-flex; }
/* Internet Explorer "e" browser icon */
.ie-e{ display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 50% 36%,#6bbcff,#0353b4); color:#fff; font-style:italic; font-weight:bold; font-size:11px; line-height:1;
  box-shadow:0 0 0 1.5px #f4c009, 0 0 0 2.5px #003a7a; }
.ie-title .ie-name{ flex:1; font-weight:bold; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ie-title.blur{ background:linear-gradient(90deg,#7a7a90,#a8a8bd); }
.ie-ctrls{ display:flex; gap:2px; }
.ie-btn{ width:19px; height:16px; display:grid; place-items:center; font-size:10px; font-weight:bold; color:#000; background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; line-height:1; }
.ie-btn:active{ box-shadow:var(--bevel-dn); }
.ie-btn.ie-close{ font-size:11px; }

/* menu + toolbars */
.ie-menubar{ display:flex; gap:2px; padding:2px 4px; font-size:12px; }
.ie-menubar span{ padding:1px 7px; }
.ie-menubar span u{ text-decoration:underline; }
.ie-toolbar{ display:flex; align-items:center; gap:3px; padding:3px 5px; box-shadow:inset 0 1px 0 var(--white), inset 0 -1px 0 var(--silver-lo); }
.ie-tb{ display:flex; align-items:center; gap:5px; font-size:11.5px; padding:4px 9px; color:#000; background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.ie-tb:active{ box-shadow:var(--bevel-dn); }
.ie-tb[disabled]{ color:#808080; cursor:default; box-shadow:var(--bevel-up); opacity:.7; }
.ie-address{ display:flex; align-items:center; gap:6px; padding:3px 6px 5px; }
.ie-address .lab{ font-size:11.5px; color:#404040; }
.ie-addr{ flex:1; display:flex; align-items:center; gap:6px; background:#fff; box-shadow:var(--bevel-dn); padding:3px 6px; min-width:0; }
.ie-addr .e{ width:15px; height:15px; flex:none; display:grid; place-items:center; color:#fff; background:radial-gradient(circle at 50% 40%,#3aa0ff,#0353b4); border-radius:50%; font-weight:bold; font-style:italic; font-size:11px; }
.ie-addr .u{ font-size:12px; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ie-go{ font-size:11.5px; font-weight:bold; padding:4px 12px; background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.ie-go:active{ box-shadow:var(--bevel-dn); }

/* page viewport — each site "page" fills the window; no scroll */
.ie-page{ flex:1; min-height:0; overflow:hidden; background:var(--face); box-shadow:var(--bevel-dn); display:flex; flex-direction:column; }
/* Portfolio/folder windows scroll when the content is taller than the frame —
   without this a long caption is simply unreachable. Scoped to .scrolls so the
   scale-to-fit windows are untouched. */
.ie-page.scrolls{ overflow:auto; }
/* Win98 scrollbars, so a modern rounded bar doesn't break the illusion */
.ie-page.scrolls::-webkit-scrollbar{ width:16px; height:16px; }
.ie-page.scrolls::-webkit-scrollbar-track{
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='%23dfdfdf'/%3E%3Crect width='1' height='1' fill='%23fff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E") repeat; }
.ie-page.scrolls::-webkit-scrollbar-thumb{ background:var(--face); box-shadow:var(--bevel-up); }
.ie-page.scrolls::-webkit-scrollbar-corner{ background:var(--face); }
/* Firefox ONLY. Setting the standard `scrollbar-color` unconditionally makes
   Chrome ignore every ::-webkit-scrollbar rule above and fall back to its
   modern rounded overlay bar — which is exactly what happened the first time.
   The @supports guard fails in Chrome (it does support the pseudo-element),
   so Chrome keeps the Win98 bar and Firefox still gets the grey approximation. */
@supports not selector(::-webkit-scrollbar){
  .ie-page.scrolls{ scrollbar-color:var(--face) #dfdfdf; scrollbar-width:auto; }
}
.gb-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; gap:12px;
  padding:13px clamp(14px,2.6vw,22px) 14px; overflow:auto; background:var(--face); }   /* inline guestbook fills the window & scrolls */
.gb-wrap .gb-intro{ margin:0; }
.gb-wrap .gb{ flex:1; min-height:0; }
.ie-status{ display:flex; align-items:center; gap:8px; padding:3px 7px; font-size:11px; color:#303030; box-shadow:inset 0 1px 0 var(--white); }
.ie-status .z{ box-shadow:var(--bevel-dn); padding:1px 9px; }
.ie-status .grow{ flex:1; }
/* the fine print lives in the status bar, like every good 90s site */
.ie-status .fineprint a{ color:#000080; text-decoration:underline; }
.ie-status .fineprint a:hover{ color:#1084d0; }
/* legal / fine-print lines inside the IE pages (contact + how-it-works) */
.legal-line{ margin-top:18px; font-size:11px; color:#555; }
.legal-line a{ color:#0000c8; text-decoration:underline; }
.legal-line a:hover{ color:#1084d0; }

/* the AAA site content inside the browser */
.ie-nav{ flex:none; display:flex; gap:4px; padding:6px; flex-wrap:wrap; border-bottom:1px solid var(--silver-lo); box-shadow:0 1px 0 var(--white); }
.ie-nav a{ font-size:12px; padding:5px 12px; color:#000; background:var(--face); box-shadow:var(--bevel-up); cursor:pointer; }
.ie-nav a.on{ font-weight:bold; box-shadow:var(--bevel-dn); }
.pg{ position:relative; flex:1; min-height:0; overflow:hidden; padding:clamp(14px,3vw,34px); display:flex; flex-direction:column; justify-content:center; }
.pg[hidden]{ display:none !important; }   /* must beat .pg.center's display */
.pg.center{ text-align:center; align-items:center; }
/* inner wrapper that JS scales down so the page always fits the window (no scroll, no clip) */
.pg-in{ width:100%; transform-origin:center center; }
.pg.center .pg-in{ display:flex; flex-direction:column; align-items:center; }
/* tighten the shared typography for the smaller browser viewport */
.ie-page h1{ font-size:clamp(1.5rem,3.3vw,2.5rem); max-width:20ch; }
.ie-page h2{ font-size:clamp(1.3rem,2.9vw,2rem); }
.ie-page .lead{ margin-top:16px; max-width:52ch; }
.ie-page .btns{ margin-top:22px; }
.ie-page .btn{ padding:9px 16px; font-size:13px; }
.ie-page .grid{ margin-top:18px; gap:9px; }
.ie-page .steps{ margin-top:16px; gap:10px 22px; }

/* ===== Start button flag + generic small window (portfolio / folders) ===== */
.start .winflag{ margin-right:2px; }
.folder-list{ padding:8px; display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:6px; }
.folder-item{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 4px; cursor:pointer; text-align:center; }
.folder-item:hover{ background:#000080; color:#fff; }
.folder-item .ic{ font-size:34px; line-height:1; }
.folder-item .lb{ font-size:11.5px; }
.shot{ padding:14px; }
.shot .frame{ background:#fff; box-shadow:var(--bevel-dn); padding:0; overflow:hidden; }
.shot .cap{ background:linear-gradient(180deg,#2b6fb0,#0a3f7a); color:#fff; padding:10px 12px; }
.shot .cap b{ display:block; font-size:15px; }
.shot .cap span{ font-size:11.5px; opacity:.9; }
.shot .pic{ height:180px; display:grid; place-items:center; text-align:center; color:#fff; font-family:var(--head); font-size:1.4rem; letter-spacing:.02em; }
.shot .meta{ padding:11px 13px; font-size:12.5px; color:#1c1c1c; line-height:1.5; }
.shot .meta .yr{ display:inline-block; font-size:11px; font-weight:bold; color:#00006a; background:#e7e7e7; box-shadow:var(--bevel-dn); padding:1px 7px; margin-bottom:7px; }
.shot .go{ display:inline-flex; align-items:center; gap:7px; margin-top:10px; font-size:12.5px; font-weight:bold; padding:8px 15px; color:#053d05; background:#c9e7c9; box-shadow:var(--bevel-up); }
.shot .go:active{ box-shadow:var(--bevel-dn); }
/* ===== My Pictures: logo thumbnails =====
   Tiles are DARK on purpose. The AAA lockup and the Cartel sello are both solid
   white and vanish on a white tile; all four marks were checked on white and on
   dark before this was picked. Dark also keeps the grid looking like one set. */
.pics-grid{ padding:10px; display:grid; grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:10px; }
.pic-tile{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:7px 4px; cursor:pointer; text-align:center; }
.pic-tile:hover{ background:#000080; color:#fff; }
.pic-tile .th{ width:100%; aspect-ratio:4/3; display:grid; place-items:center; background:#1a1a1a; box-shadow:inset -1px -1px #808080, inset 1px 1px #0a0a0a; overflow:hidden; }
.pic-tile .th img{ max-width:78%; max-height:78%; object-fit:contain; display:block; }
.pic-tile .lb{ font-size:11.5px; word-break:break-all; }
/* sub-folder tile: no image, so it gets the Win98 face rather than the dark
   photo field, and reads as a container instead of an artwork */
.pic-tile .th.folder-th{ background:var(--face); box-shadow:inset -1px -1px #808080, inset 1px 1px #fff; font-size:44px; line-height:1; }

/* single logo, opened from a tile */
.logo-view{ background:#1a1a1a; padding:26px; display:grid; place-items:center; min-height:190px; }
.logo-view img{ max-width:74%; max-height:210px; object-fit:contain; display:block; }

/* artwork rather than a mark — light field, more room. Print pieces are mostly
   white-background documents, so a dark surround fights them. */
.logo-view.piece-view{ background:#efefef; padding:14px; min-height:0; }
/* 340 not 400: at 400 a tall piece pushes its own caption below the window
   floor. Window heights below are set against this number — change both. */
.logo-view.piece-view img{ max-width:100%; max-height:340px; }

/* before/after pair in the Recycle Bin */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:#808080; }
.ba figure{ margin:0; background:#fff; }
.ba figure img{ width:100%; height:auto; display:block; }
.ba figcaption{ font-size:11px; padding:5px 7px; background:#e7e7e7; color:#00006a; font-weight:bold; }
@media (max-width:640px){ .ba{ grid-template-columns:1fr; } }

.note-body{ padding:14px 16px; font-size:12.5px; line-height:1.6; color:#111; background:#fff; box-shadow:var(--bevel-dn); margin:8px; }
.note-body h4{ font-family:var(--head); color:var(--navy); font-size:1.1rem; margin-bottom:6px; }

/* taskbar task buttons (one per open window) */
.tasks{ display:flex; gap:4px; flex:1; padding-left:4px; overflow:hidden; }
.task-btn{ display:flex; align-items:center; gap:6px; max-width:200px; font-size:12px; padding:4px 10px; color:#000; background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; overflow:hidden; }
.task-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-btn.active{ box-shadow:var(--bevel-dn); font-weight:bold; }
.task-btn .ie-ico{ display:inline-flex; flex:none; }

/* ===== shared pop-up entrance =====
   A 150ms scale-in on everything that arrives UNINVITED — the ads, the mail
   alert, the IM windows. Win98 zoomed a rectangle out of the taskbar when a
   window opened; this is that gesture at desktop-toy scale, and it's the
   difference between a pop-up LANDING and one just being there on the next
   glance. Regular portfolio windows open from a double-click the visitor just
   made, so they don't need an entrance. */
@keyframes adpop{ from{ transform:scale(.85); opacity:0; } to{ transform:scale(1); opacity:1; } }
.dpw,.dipw,.cmw,.cgw,.mw,.aim-win{ animation:adpop .15s ease-out; }
@media(prefers-reduced-motion:reduce){ .dpw,.dipw,.cmw,.cgw,.mw,.aim-win{ animation:none; } }

/* ===== Design Pusher popup (spawns on the desktop) ===== */
.dpw{ min-width:0; min-height:0; width:330px; }
.dp-body{ padding:12px; background:var(--face); }
.dp-row{ display:flex; gap:11px; align-items:flex-start; }
.dp-icon{ width:74px; height:74px; flex:none; display:grid; place-items:center; overflow:hidden; background:#fff; box-shadow:inset -1px -1px #808080, inset 1px 1px #0a0a0a; }
.dp-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.dp-head{ font-size:13px; font-weight:bold; margin:0 0 4px; color:var(--navy); }
.dp-txt{ margin:0; line-height:1.45; font-size:12px; }
.dp-txt .shop,.shop{ color:#a00; font-weight:bold; }
.dp-new{ display:inline-block; background:#ff0; color:#a00; font-weight:bold; padding:0 4px; margin-left:5px; border:1px solid #a00; font-size:10px; animation:blink 1s steps(1) infinite; }
.dp-coupon{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:6px 11px; background:#fffbe6; border:2px dashed #a00; }
.dp-coupon .tag{ font-size:20px; line-height:1; }
.dp-coupon b{ color:#a00; font-size:14px; letter-spacing:.08em; }
.dp-coupon small{ color:#333; }
.dp-marquee{ overflow:hidden; white-space:nowrap; margin-top:10px; padding:3px 0; background:#000; color:#0f0; font-family:"Courier New",monospace; font-size:11px; box-shadow:inset 1px 1px #0a0a0a, inset -1px -1px #808080; }
.dp-marquee span{ display:inline-block; padding-left:100%; animation:dpscroll 9s linear infinite; }
@keyframes dpscroll{ to{ transform:translateX(-100%); } }
.dp-cta{ display:block; width:100%; margin-top:11px; padding:7px; text-align:center; font-size:12px; font-weight:bold; color:#000; background:var(--face); box-shadow:var(--bevel-up); }
.dp-cta:active{ box-shadow:var(--bevel-dn); }
.dp-url{ margin-top:7px; text-align:center; font-size:10px; color:#333; }
.toast{ position:fixed; left:50%; bottom:46px; transform:translateX(-50%); z-index:100002; background:var(--face); padding:7px 14px; box-shadow:var(--bevel-up); opacity:0; transition:opacity .2s; pointer-events:none; font-size:12px; }
.toast.show{ opacity:1; }

/* ===== Yellow Pages window (AAA is first in the book) ===== */
.yp{ background:#ffd400; color:#1a1a1a; }
.yp-head{ font-family:var(--head); font-size:1.3rem; color:#000; padding:12px 14px 3px; }
.yp-head span{ display:block; font-family:var(--ui); font-size:11px; font-style:italic; font-weight:normal; color:#5a4a00; }
.yp-cat{ padding:3px 14px 8px; font-size:12px; font-weight:bold; color:#3a3000; border-bottom:2px solid #000; }
.yp-list{ list-style:none; margin:0; padding:6px 14px; }
.yp-list li{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:8px; padding:7px 0; border-bottom:1px dotted #7a6a00; font-size:13px; }
.yp-list .nm{ font-weight:bold; }
.yp-list .dots{ border-bottom:2px dotted #8a7500; height:0; align-self:center; }
.yp-list .ph{ font-size:12px; color:#3a3000; white-space:nowrap; }
.yp-first{ background:#fff6b0; box-shadow:0 0 0 2px #000; padding:9px 10px !important; margin:4px 0; border-bottom:0 !important; }
.yp-first .nm{ color:#a00; font-size:15px; }
.yp-ad{ grid-column:1 / -1; margin-top:5px; font-size:12px; line-height:1.45; }
.yp-ad a{ color:#0000c8; text-decoration:underline; font-weight:bold; }
.yp-foot{ padding:10px 14px; font-size:11.5px; font-style:italic; color:#5a4a00; }

/* ===== per-page 90s flourishes ===== */
/* HOME: row of 88×31 web badges */
.badges{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:22px; }
.badge88{ width:88px; height:31px; display:grid; place-items:center; text-align:center; padding:2px; font-size:8.5px; font-weight:bold; line-height:1.06; letter-spacing:.02em; text-transform:uppercase; color:#fff; box-shadow:var(--bevel-up); }
.badge88.b1{ background:linear-gradient(180deg,#5a5ab0,#000080); }
.badge88.b2{ background:#000; color:#0f0; font-family:"Courier New",monospace; }
.badge88.b3{ background:linear-gradient(180deg,#2a9ce0,#003a7a); }
.badge88.b4{ background:linear-gradient(180deg,#c81212,#6a0000); }

/* THE METHOD: green-on-black marquee ticker */
.mq{ overflow:hidden; white-space:nowrap; width:min(560px,92%); margin-top:20px; padding:4px 0; background:#000; color:#0f0; font-family:"Courier New",monospace; font-size:12px; box-shadow:inset 1px 1px #0a0a0a, inset -1px -1px #808080; }
.mq span{ display:inline-block; padding-left:100%; animation:dpscroll 13s linear infinite; }

/* WHAT I DO: gold award seal, slapped in the corner */
.seal{ position:absolute; top:12px; right:14px; width:84px; height:84px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1px; font-size:9.5px; font-weight:bold; line-height:1.08; text-transform:uppercase; color:#6a4700; background:radial-gradient(circle at 50% 34%,#ffe9a0,#e3a900); box-shadow:0 0 0 3px #b98600, 0 0 0 6px #ffd865, 2px 3px 6px rgba(0,0,0,.35); transform:rotate(-9deg); z-index:2; }
.seal .stars{ color:#a00; font-size:11px; letter-spacing:.04em; }

/* HOW IT WORKS: Win98 "building…" progress bar */
.build{ margin-top:18px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.build .lbl{ font-size:11px; font-weight:bold; color:var(--navy); }
.progress98{ width:min(340px,100%); height:18px; background:#fff; box-shadow:var(--bevel-dn); padding:2px; }
.progress98 i{ display:block; height:100%; background:repeating-linear-gradient(90deg,#000080 0 11px, transparent 11px 15px); animation:prog98 3.2s ease-in-out infinite; }
@keyframes prog98{ 0%{ width:6%; } 50%{ width:94%; } 100%{ width:6%; } }

/* ===== Assets folder — the shop (audition free, buy the file) ===== */
.as-shop{ flex:1; min-height:0; overflow:auto; padding:8px; background:var(--face); }
.as-head{ display:flex; align-items:center; gap:11px; padding:9px 11px; margin-bottom:9px; color:#fff;
  font-size:12px; line-height:1.45; background:linear-gradient(90deg,var(--navy),var(--navy2)); }
.as-head-ic{ font-size:26px; line-height:1; flex:none; }
.as-head b{ color:#ff0; }

/* price + buy are FIXED widths, not auto: every row is its own grid, so only a
   fixed track makes the column header line up with the values underneath it. */
.as-row,.as-cols{ display:grid; grid-template-columns:26px 24px 1fr 52px 84px; align-items:center; gap:10px; }
.as-cols{ padding:3px 8px; font-size:11px; font-weight:bold; background:var(--face); box-shadow:var(--bevel-up); }
.as-cols .as-price{ font-size:11px; color:#000; }

.as-row{ margin-top:5px; padding:8px; background:#fff; box-shadow:var(--bevel-dn); }
.as-row:hover{ background:#f3f3ff; }
.as-ic{ font-size:20px; line-height:1; text-align:center; }
.as-nm{ min-width:0; }
.as-nm b{ display:block; font-size:12.5px; color:#00006a; }
.as-desc{ display:block; margin-top:2px; font-size:12px; line-height:1.45; color:#1c1c1c; }
.as-desc i{ color:#555; }
.as-meta{ display:block; margin-top:2px; font-family:"Courier New",monospace; font-size:10.5px; color:#666; }
.as-price{ font-size:14px; font-weight:bold; color:#053d05; text-align:right; }

.as-play{ width:26px; height:26px; display:grid; place-items:center; font-size:11px; line-height:1; color:#000;
  background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.as-play:active,.as-play.on{ box-shadow:var(--bevel-dn); }
.as-play.on{ color:#a00; }
.as-pack-ic{ font-size:19px; background:transparent; box-shadow:none; cursor:default; }

.as-buy{ width:100%; font-size:12px; font-weight:bold; padding:7px 6px; color:#053d05; background:#c9e7c9;
  box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.as-buy:active{ box-shadow:var(--bevel-dn); }

.as-pack{ margin-top:9px; background:#fffbe6; border:2px dashed #a00; box-shadow:none; }
.as-pack:hover{ background:#fff8d6; }
.as-pack .as-nm b{ color:#a00; }
.as-pack .as-meta{ color:#a00; font-weight:bold; }

.as-lic{ margin-top:10px; padding:9px 11px; font-size:11.5px; line-height:1.55; color:#111;
  background:#fff; box-shadow:var(--bevel-dn); }
.as-lic b{ color:#00006a; }

/* ===== checkout dialog — card in, file out, without leaving the desktop ===== */
.as-dlg{ min-width:0; min-height:0; width:400px; }
.as-dlg-body{ padding:12px; background:var(--face); }

.as-co-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; background:#fff; box-shadow:var(--bevel-dn); }
.as-co-item .ic{ flex:none; font-size:22px; line-height:1; }
.as-co-item div{ flex:1; min-width:0; }
.as-co-item b{ display:block; font-size:12.5px; color:#00006a; }
.as-co-item span{ font-size:11px; color:#555; }

.as-co-form label{ display:block; margin:10px 0 3px; font-size:11.5px; font-weight:bold; }
.as-co-form label small{ font-weight:normal; color:#555; }
.as-in{ width:100%; padding:5px 7px; border:0; font-family:var(--ui); font-size:13px; color:#000;
  background:#fff; box-shadow:var(--bevel-dn); user-select:text; }
/* Stripe mounts its card iframe in here — it needs a real box to land in */
.as-card{ min-height:32px; padding:8px 7px; font-size:11.5px; color:#888; background:#fff; box-shadow:var(--bevel-dn); }

.as-co-status{ min-height:16px; margin-top:10px; font-size:11.5px; line-height:1.4; }
.as-co-status.err{ color:#a00; font-weight:bold; }
.as-co-status.ok{ color:#053d05; font-weight:bold; }

.as-pay{ width:100%; margin-top:8px; padding:9px; border:0; font-size:13px; font-weight:bold; color:#053d05;
  background:#c9e7c9; box-shadow:var(--bevel-up); cursor:pointer; }
.as-pay:active{ box-shadow:var(--bevel-dn); }
.as-pay[disabled]{ color:#808080; background:var(--face); cursor:default; }
.as-co-safe{ margin-top:8px; text-align:center; font-size:10.5px; color:#444; }
.as-co-legal{ margin-top:4px; text-align:center; font-size:10.5px; color:#555; }
.as-co-legal a{ color:#0000c8; text-decoration:underline; }

/* the payoff — paid, and the file is one click away */
.as-paid{ padding:6px 4px; text-align:center; }
.as-paid-tick{ font-size:34px; line-height:1; color:#053d05; }
.as-paid h3{ margin:6px 0 4px; font-family:var(--head); font-size:1.1rem; color:var(--navy); }
.as-paid p{ font-size:12px; line-height:1.5; }
.as-dl{ display:block; margin:12px 0 10px; padding:11px; font-size:13px; font-weight:bold; color:#053d05;
  background:#c9e7c9; box-shadow:var(--bevel-up); }
.as-dl:active{ box-shadow:var(--bevel-dn); }
.as-paid-note{ padding:7px 9px; font-size:11px; line-height:1.5; text-align:left; background:#fffbe6; border:2px dashed #a00; }
.as-paid-note.as-warn{ background:#ffe6e6; }        /* the email didn't go — say so, don't dress it up */

/* ═══ Dippy — the pop-up ad ══════════════════════════════════════════════════
   How the drinking bird would actually have been sold online in 1997: a pop-up
   that shows up uninvited, with sunburst rays, Impact, an AS-SEEN-ON-TV seal,
   a starburst price badge and a coupon you cut out with scissors.
   Colours are the bird's own — the same eight bird.py draws him with — so the
   ad and the product are literally the same palette. */
/* The ad is a fixed piece of artwork: it only works at ONE size, because the
   headline, the seal and the coupon are all tuned to each other. So it is never
   reflowed — it is drawn at its natural 560px and then scaled bodily to whatever
   room the screen has, and .dip-fit is the box that holds the scaled result.
   desktop.js sets the two sizes; the proportions never change. */
.dipw{ min-width:0; min-height:0; }
.dip-fit{ overflow:hidden; }
.dip{
  --dip-red:#d8261c; --dip-ink:#101010; --dip-gold:#ffd24a;
  --dip-display:Impact,Haettenschweiler,"Franklin Gothic Bold","Arial Narrow Bold","Arial Black",sans-serif;
  --dip-serif:"Times New Roman",Times,serif;
  width:560px; transform-origin:top left;
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--dip-gold); color:var(--dip-ink);
}
/* the rays turn, slowly, forever — the one thing every sunburst ad has done since 1955 */
.dip-rays{ position:absolute; inset:-70% -30%; z-index:0; pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 40%, #ffe796 0deg 4.5deg, #f6a12c 4.5deg 9deg);
  transform-origin:50% 40%; animation:dipspin 90s linear infinite; }
@keyframes dipspin{ to{ transform:rotate(360deg); } }
/* without this the type sits on a strobing pinwheel and is unreadable */
.dip-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 54% 46% at 50% 40%, rgba(255,248,214,.95), rgba(255,240,190,.5) 55%, rgba(255,230,160,0) 80%),
             radial-gradient(ellipse 120% 90% at 50% 50%, rgba(0,0,0,0) 52%, rgba(120,60,0,.22)); }
.dip-in{ position:relative; z-index:2; padding:15px 14px 10px; }

.dip-tv{ position:absolute; top:7px; left:5px; z-index:4; transform:rotate(-13deg);
  background:var(--dip-ink); color:#fff; border:2px solid #fff; box-shadow:0 2px 0 rgba(0,0,0,.35);
  padding:4px 7px 3px; text-align:center; line-height:1; }
.dip-tv .a{ display:block; font-family:var(--dip-display); font-size:8px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dip-gold); }
.dip-tv .b{ display:block; font-family:var(--dip-display); font-size:17px; letter-spacing:.02em;
  text-transform:uppercase; margin-top:1px; }
.dip-new{ position:absolute; top:11px; right:10px; z-index:4; background:#ff0; color:#a00;
  border:1px solid #a00; font-weight:bold; font-size:11px; padding:1px 5px;
  animation:blink 1s steps(1) infinite; }

.dip-kick{ width:fit-content; margin:0 auto; padding:3px 10px; text-align:center;
  font-family:var(--dip-display); text-transform:uppercase; letter-spacing:.14em; font-size:9.5px;
  color:#b0180f; background:rgba(255,255,255,.55);
  border-top:2px solid var(--dip-ink); border-bottom:2px solid var(--dip-ink); }
.dip-h{ margin:11px 0 6px; text-align:center; font-family:var(--dip-display); font-weight:400;
  text-transform:uppercase; font-size:38px; line-height:.9; letter-spacing:.01em; color:var(--dip-ink);
  text-shadow:2px 2px 0 #fff, 4px 4px 0 rgba(216,38,28,.75); }
.dip-sub{ max-width:44ch; margin:0 auto; text-align:center; font-family:var(--dip-serif);
  font-style:italic; font-size:13px; line-height:1.4; color:#5a2708; }

/* He outsizes the price badge on purpose: the product is the hero of the ad,
   not the number. */
.dip-body{ display:grid; grid-template-columns:126px minmax(0,1fr) 136px; gap:10px;
  align-items:center; margin-top:12px; }
/* aspect-ratio, not height:auto — the ad's height is measured to scale it, and an
   unloaded image with no reserved box would measure short and over-scale it. */
.dip-bird{ display:block; width:126px; aspect-ratio:570/720; filter:drop-shadow(0 8px 8px rgba(120,50,0,.35)); }
.dip-bullets{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.dip-bullets li{ display:flex; gap:5px; align-items:flex-start; font-family:var(--dip-display);
  text-transform:uppercase; letter-spacing:.02em; font-size:13px; line-height:1.1; }
.dip-bullets .tk{ flex:none; color:#0f8a3c; font-size:1.1em; line-height:1; }

.dip-seal{ position:relative; display:grid; place-items:center; transform:rotate(-8deg); }
.dip-seal svg{ display:block; filter:drop-shadow(0 6px 8px rgba(120,50,0,.4)); }
.dip-seal-t{ position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  pointer-events:none; }
.dip-seal-t .only{ font-family:var(--dip-display); text-transform:uppercase; letter-spacing:.18em;
  font-size:10px; }
.dip-seal-t .price{ display:flex; align-items:flex-start; justify-content:center; gap:1px;
  margin:2px 0 3px; font-family:var(--dip-display); color:var(--dip-red); font-size:44px;
  line-height:.82; letter-spacing:-.02em; }
.dip-seal-t .price .c{ font-size:18px; line-height:1; margin-top:.28em; }
.dip-seal-t .foot{ font-family:var(--dip-display); text-transform:uppercase; letter-spacing:.05em;
  font-size:8px; line-height:1.35; }

/* the coupon — dashed, with a pair of scissors on the cut line */
.dip-coupon{ position:relative; z-index:2; margin:14px 14px 0; padding:12px 13px 13px;
  border:3px dashed var(--dip-ink); background:rgba(255,252,236,.95); }
.dip-coupon::before{ content:"✂"; position:absolute; top:-13px; left:16px; padding:0 5px;
  background:var(--dip-gold); font-size:16px; line-height:1; }
.dip-cp-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  flex-wrap:wrap; padding-bottom:5px; border-bottom:2px solid var(--dip-ink); }
.dip-cp-head h3{ font-family:var(--dip-display); font-weight:400; text-transform:uppercase;
  font-size:19px; letter-spacing:.02em; }
.dip-cp-head span{ font-family:var(--dip-serif); font-style:italic; font-size:11px; color:#6b4a1e; }
.dip-check{ list-style:none; margin:9px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.dip-check li{ display:flex; gap:6px; align-items:flex-start; font-size:12px; line-height:1.35; color:#241a08; }
.dip-check .bx{ flex:none; width:13px; height:13px; margin-top:1px; display:grid; place-items:center;
  border:2px solid var(--dip-ink); background:#fff; color:var(--dip-red); font-size:10px;
  font-weight:bold; line-height:1; }
.dip-buy{ display:block; width:100%; margin-top:11px; padding:11px 8px 9px; text-align:center;
  font-family:var(--dip-display); text-transform:uppercase; letter-spacing:.05em; font-size:19px;
  line-height:1; color:#fff; background:var(--dip-red); border:2px solid var(--dip-ink);
  box-shadow:4px 4px 0 var(--dip-ink); transition:transform .08s ease, box-shadow .08s ease; }
.dip-buy:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--dip-ink); }
.dip-buy:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--dip-ink); }
.dip-note{ margin-top:8px; text-align:center; font-family:var(--dip-serif); font-size:11.5px;
  line-height:1.4; color:#6b4a1e; }
.dip-note b{ color:#241a08; }

.dip-marquee{ position:relative; z-index:2; margin-top:12px; padding:3px 0; overflow:hidden;
  white-space:nowrap; background:var(--dip-ink); color:var(--dip-gold);
  font-family:"Courier New",monospace; font-size:11px; }
.dip-marquee span{ display:inline-block; padding-left:100%; animation:dpscroll 13s linear infinite; }
/* the fine print sits on solid stock — over the rays it's an unreadable smear,
   and this is the paragraph a buyer is entitled to actually read */
.dip-fine{ position:relative; z-index:2; padding:8px 14px 9px; background:#fdf6e3;
  border-top:2px solid var(--dip-ink); font-family:var(--dip-serif); font-size:9.5px;
  line-height:1.5; color:#3d2a0c; text-align:center; }

/* he gets a real portrait on the desktop, not an emoji */
.dicon .ic.dip-ic{ font-size:0; }
.dicon .ic.dip-ic img{ display:block; height:46px; width:auto; }
/* a REAL 32×32 icon, shown at 32×32 with no smoothing — the way 1998 drew them.
   The bitmap is hand-baked from the sello blanco with the engraving fattened
   so it survives the shrink (the raw SVG's hairlines just mush to fuzz). */
.dicon .ic.px-ic{ font-size:0; }
.dicon .ic.px-ic img{ display:block; width:32px; height:32px; image-rendering:pixelated; margin:7px auto; }

@media(prefers-reduced-motion:reduce){
  .dip-rays{ animation:none; }
  .dip-new{ animation:none; }
  .dip-marquee span{ animation:none; padding-left:0; }
}

/* ===================== AAA ONLINE — MAIL =====================================
   The "you've got mail" bit. Alert lives bottom-right ON PURPOSE: Dippy is centred
   and the Design Pusher chain stacks top-left, so the one corner nobody else uses is
   the one corner the mail can always arrive in without landing on top of an ad. */

/* unread badge on the desktop mailbox + the Start menu */
.dicon.mail-ic .ic{ position:relative; display:inline-block; }
.mail-dot{ position:absolute; top:-2px; right:-6px; min-width:15px; height:15px; padding:0 3px;
  display:grid; place-items:center; font-size:10px; font-weight:bold; line-height:1;
  color:#fff; background:#d8261c; border:1px solid #fff; border-radius:8px;
  text-shadow:none; filter:none; box-shadow:1px 1px 0 rgba(0,0,0,.4); }
.sm-new{ margin-left:6px; font-size:10px; font-weight:bold; color:#fff; background:#d8261c;
  padding:1px 5px; border-radius:7px; }

/* ---- the alert ---- */
.mw{ min-width:0; min-height:0; width:336px; }
.mw-body{ padding:14px 14px 12px; text-align:center;
  /* AOL-sunrise wash behind the mailbox — the one alert on the site that's a
     welcome, not a pitch, so it gets warmth instead of a starburst */
  background:linear-gradient(to bottom, #fff8e0 0, var(--face) 58px, var(--face) 100%); }
.mw-art{ position:relative; display:inline-block; font-size:48px; line-height:1; margin:2px 0 8px; animation:mwjig .7s ease-in-out 3; }
.mw-art .mw-box{ filter:drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
.mw-badge{ position:absolute; top:-4px; right:-30px; background:#d8261c; color:#fff;
  font-size:10px; font-weight:bold; letter-spacing:.05em; padding:2px 6px;
  border:1px solid #fff; border-radius:8px; transform:rotate(8deg);
  box-shadow:1px 1px 0 rgba(0,0,0,.4); animation:blink 1.2s steps(1) infinite; }
@keyframes mwjig{ 0%,100%{ transform:rotate(0) } 25%{ transform:rotate(-9deg) } 75%{ transform:rotate(9deg) } }
.mw-h{ margin:0 0 3px; font-size:17px; font-weight:bold; color:#000080; }
.mw-p{ margin:0 0 11px; font-size:11.5px; color:#303030; }
.mw-btns{ display:flex; gap:7px; justify-content:center; }
.mw-btns button{ font-size:11.5px; padding:5px 14px; background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.mw-btns .mw-go{ font-weight:bold; }
.mw-btns button:active{ box-shadow:var(--bevel-dn); }

/* ---- the inbox ---- */
.ml{ flex:1; min-height:0; display:flex; flex-direction:column; background:var(--face); }
/* The panes swap with [hidden], and .ml-compose sets display:flex — a class beats the
   UA sheet's [hidden]{display:none}, so without this the reply form never hides and
   both panes stack. Cheap rule, nasty bug. */
.ml [hidden]{ display:none !important; }
.ml-bar{ flex:none; display:flex; align-items:center; gap:4px; padding:4px 6px;
  box-shadow:inset 0 1px 0 var(--white), inset 0 -1px 0 var(--silver-lo); }
.ml-tb{ font-size:11.5px; padding:4px 9px; background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.ml-tb:active{ box-shadow:var(--bevel-dn); }
.ml-grow{ flex:1; }
.ml-count{ font-size:11px; font-weight:bold; color:#a00; }

.ml-list{ flex:none; margin:6px; background:#fff; box-shadow:var(--bevel-dn); }
.ml-cols,.ml-row{ display:grid; grid-template-columns:26px 130px 1fr 92px; align-items:center; gap:6px; }
.ml-cols{ font-size:11px; font-weight:bold; padding:3px 6px; background:var(--face);
  box-shadow:inset 0 -1px 0 var(--silver-lo); }
.ml-row{ padding:5px 6px; font-size:12px; cursor:default; }
.ml-row.unread{ font-weight:bold; }
.ml-row.unread .ml-subj{ color:#000080; }
.ml-row.read .ml-ic{ opacity:.45; }
.ml-ic{ font-size:14px; }
.ml-from,.ml-subj,.ml-date{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ml-date{ font-size:11px; color:#505050; font-weight:normal; }

/* the message itself — a 1997 HTML email, which means it is doing a LOT */
.ml-read{ flex:1; min-height:0; overflow:auto; margin:0 6px 6px; padding:0; background:#fff; box-shadow:var(--bevel-dn); }
.ml-hdrs{ padding:8px 12px; font-size:11.5px; line-height:1.6; background:#eceadb;
  border-bottom:1px solid #c0c0c0; }
.ml-body{ padding:14px 18px 18px; font-size:13px; line-height:1.6; color:#111; }
.ml-body p{ margin:0 0 11px; }
.ml-nospam{ text-align:center; font-weight:bold; color:#b00000; font-size:12px; letter-spacing:.5px;
  border:2px dashed #b00000; padding:7px; margin:0 0 14px !important; background:#fffbe0; }
.ml-nospam small{ display:block; font-weight:normal; letter-spacing:0; color:#555; font-size:10.5px; margin-top:2px; }
.ml-big{ font-size:22px; font-weight:bold; color:#b00000; font-family:Georgia,"Times New Roman",serif;
  margin:14px 0 !important; }
.ml-svc{ border-collapse:collapse; margin:12px 0 14px; background:#f4f6ff;
  border:2px solid #000080; width:100%; }
.ml-svc td{ padding:4px 8px; font-size:12.5px; vertical-align:top; }
.ml-svc td:first-child{ width:20px; color:#0a7d29; font-weight:bold; }
.ml-pitch{ text-align:center; font-family:Georgia,serif; font-size:17px; line-height:1.45;
  color:#000080; padding:11px; margin:14px 0 !important;
  border-top:3px double #000080; border-bottom:3px double #000080; }
.ml-pitch b{ font-size:20px; }
.ml-sig{ margin-top:16px !important; }
.ml-sig small{ color:#555; line-height:1.5; display:block; margin-top:2px; }
.ml-foot{ margin-top:16px !important; padding-top:8px; border-top:1px solid #ddd;
  font-size:10px; color:#888; line-height:1.5; }

/* ---- reply ---- */
.ml-compose{ flex:1; min-height:0; overflow:auto; margin:0 6px 6px; padding:10px 12px;
  background:#fff; box-shadow:var(--bevel-dn); display:flex; flex-direction:column; gap:7px; }
.ml-cf{ display:grid; grid-template-columns:52px 1fr; align-items:center; gap:7px; }
.ml-cf label{ font-size:11.5px; font-weight:bold; text-align:right; }
.ml-in,.ml-ro,.ml-ta{ font:inherit; font-size:12px; padding:4px 6px; border:0;
  box-shadow:var(--bevel-dn); background:#fff; width:100%; }
.ml-ro{ background:#eceadb; color:#555; cursor:default; }
.ml-ta{ flex:1; min-height:110px; resize:none; line-height:1.5; }
.ml-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.ml-actions{ display:flex; gap:7px; }
.ml-send,.ml-cancel{ font-size:12px; padding:6px 16px; background:var(--face);
  box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.ml-send{ font-weight:bold; }
.ml-send:active,.ml-cancel:active{ box-shadow:var(--bevel-dn); }

.ml-sent{ flex:1; min-height:0; overflow:auto; margin:0 6px 6px; padding:24px 20px;
  background:#fff; box-shadow:var(--bevel-dn); text-align:center; font-size:13px; line-height:1.6; }
.ml-sent-h{ font-size:19px; font-weight:bold; color:#0a7d29; margin:0 0 10px; }
.ml-sent-f{ margin-top:16px; color:#555; font-size:12px; }

/* let tiny screens scroll rather than clip the desktop */
@media(max-height:520px),(max-width:520px){ body.d98{ overflow:auto; } }

/* ===== phones (≤640px): fitting 1998 into a 2026 pocket =====
   The desktop never scrolls sideways — tiny-screen Windows (CE) didn't scroll
   a desktop, it ran everything maximized, and that's the homage here too:
   windows open centered at phone width (JS places them), the funnel window
   fills the screen, and its pages SCALE their content bodily to fit. */
@media (max-width:640px){
  /* nothing may create sideways pan — AIM windows are absolute in the body,
     so anything past the right edge would widen the page without this */
  html, body{ overflow-x:hidden; }
  /* the funnel sits vertically centered in the desk (50% minus half the
     taskbar), with breathing room above and below for the peeking icons */
  #aaaWin{ left:2vw !important; width:96vw !important;
           height:min(600px, calc(100vh - 234px)) !important;
           top:calc(50% - 17px) !important; transform:translateY(-50%); }
  #ypWin{  left:2vw !important; width:96vw !important;
           height:min(430px, calc(100vh - 234px)) !important;
           top:calc(50% - 17px) !important; transform:translateY(-50%); }
  #aaaWin.max, #ypWin.max{ transform:none !important; }
  .dpw{ width:min(330px, 94vw); }
  .cmw{ width:min(400px, 94vw); }
  /* icons peeking above AND below the centered funnel — four corners, four doors */
  .dicon[data-open="work"]{   left:2vw !important;  right:auto !important; top:6px !important; }
  .dicon[data-open="dippy"]{  left:auto !important; right:2vw !important;  top:6px !important; }
  .dicon[data-open="cartel"]{ left:2vw !important;                         top:auto !important; bottom:8px; }
  .dicon[data-open="pusher"]{ left:auto !important; right:2vw !important;  top:auto !important; bottom:8px; }
}

/* ---------- resize grips ----------
   Win98 let you grab any of the eight edges and corners, not just the buttons.
   The grips are invisible and sit just inside the frame; the cursor is the only
   thing that announces them, exactly as it did then. .ie-ctrls is lifted above
   them so the top-right corner grip can never swallow a click on ✕. */
.ie-grip{ position:absolute; z-index:4; }
.ie-grip-n { top:0; left:12px; right:12px; height:5px; cursor:ns-resize; }
.ie-grip-s { bottom:0; left:12px; right:12px; height:5px; cursor:ns-resize; }
.ie-grip-w { left:0; top:12px; bottom:12px; width:5px; cursor:ew-resize; }
.ie-grip-e { right:0; top:12px; bottom:12px; width:5px; cursor:ew-resize; }
.ie-grip-nw{ top:0; left:0;  width:12px; height:12px; cursor:nwse-resize; }
.ie-grip-se{ bottom:0; right:0; width:12px; height:12px; cursor:nwse-resize; }
.ie-grip-ne{ top:0; right:0; width:12px; height:12px; cursor:nesw-resize; }
.ie-grip-sw{ bottom:0; left:0; width:12px; height:12px; cursor:nesw-resize; }
.ie-ctrls{ position:relative; z-index:6; }
/* A maximized window has no edges to grab — same as the real thing. */
.ie-win.max .ie-grip{ display:none; }
/* Touch: the grips would fight the page for scroll gestures, and a phone has no
   cursor to reveal them anyway. Windows there are effectively full-width already. */
@media(max-width:640px){ .ie-grip{ display:none; } }

/* ---------- CanniGrow "GROW YOUR OWN" pop-up ----------
   Straight out of the back pages: the grow-supply classifieds that ran in every
   cannabis magazine of the era, then moved onto the web as loud green banner ads.
   Garish on purpose — starburst, all-caps headline, screaming CTA. The restraint
   is in the fine print, which is real: CanniGrow is a licensed-market consultancy,
   so the ad sells CONSULTING and grow guides, never seeds or product. */
.cgw{ position:fixed; width:min(410px, 92vw); }
.cg-ad{ position:relative; padding:22px 18px 15px; text-align:center; overflow:hidden;
  border-top:3px solid #34a853;
  /* Layered, top to bottom: soil darkening at the base, a blueprint grid, then the
     near-black green base. Dippy owns the spinning sunburst — going anywhere near a
     conic gradient here just makes two ads that look like the same ad. This is a
     GRID and a vertical light wash instead: different geometry, different axis. */
  background:
    linear-gradient(to bottom, transparent 58%, rgba(0,0,0,.62) 100%),
    repeating-linear-gradient(to right,  rgba(52,168,83,.15) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to bottom, rgba(52,168,83,.15) 0 1px, transparent 1px 26px),
    #07160b; }
/* The lamp. An HPS hood hanging just off the top edge, washing warm light down over
   the plant — which is what a grow ad is actually a picture of. Warm and vertical,
   the opposite temperature and the opposite axis to Dippy's cold radial gold. */
.cg-ad::before{ content:''; position:absolute; left:0; right:0; top:0; height:66%;
  pointer-events:none;
  background:radial-gradient(ellipse 74% 100% at 50% -20%,
    rgba(255,238,178,.44) 0%, rgba(255,214,120,.17) 44%, rgba(255,200,90,0) 74%); }
/* (A hot yellow-white filament line used to sit here under the window chrome. Cut —
   it read as a stray browser border rather than a lamp. The warm wash above does the
   job on its own.) */
.cg-in{ position:relative; }
.cg-burst{ position:absolute; top:-8px; right:-6px; background:#ffd400; color:#0d2a12;
  font-family:var(--head); font-size:10px; font-weight:900; letter-spacing:.06em;
  padding:5px 8px; transform:rotate(9deg); box-shadow:2px 2px 0 rgba(0,0,0,.45); }
/* 76px, up from 62: the 2026 mark is a solid coin (white base, green art) and
   holds detail at size — at 62 the roots under the soil line read as smudge */
.cg-logo{ display:block; width:76px; height:76px; margin:2px auto 9px; border-radius:50%;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.cg-h{ font-family:var(--head); font-weight:900; color:#fff; line-height:.94;
  font-size:34px; letter-spacing:-.02em; text-shadow:2px 2px 0 #0a1f0d, 4px 4px 0 rgba(0,0,0,.35); }
.cg-h span{ color:#7be08f; }
.cg-sub{ color:#cfe9d4; font-size:12.5px; line-height:1.5; margin:9px 0 10px; }
.cg-sub b{ color:#fff; }
.cg-bul{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 6px; margin:0 0 12px; }
.cg-bul span{ font-size:10.5px; color:#0d2a12; background:#7be08f; padding:3px 7px;
  font-weight:bold; letter-spacing:.02em; }
.cg-cta{ display:inline-block; background:#34a853; color:#fff; font-weight:bold; font-size:13.5px;
  text-decoration:none; padding:9px 20px; box-shadow:var(--bevel-up); }
.cg-cta:active{ box-shadow:var(--bevel-dn); }
.cg-marquee{ overflow:hidden; white-space:nowrap; margin-top:11px; padding:3px 0;
  background:#03130a; color:#3ee06a; font-family:"Courier New",monospace; font-size:11px;
  box-shadow:inset 1px 1px rgba(0,0,0,.8), inset -1px -1px rgba(255,255,255,.06); }
.cg-marquee span{ display:inline-block; padding-left:100%; animation:dpscroll 11s linear infinite; }
.cg-fine{ color:#8fb598; font-size:9.5px; margin-top:9px; line-height:1.45; letter-spacing:.02em; }
@media(prefers-reduced-motion:reduce){
  .cg-ad::before{ display:none; }
  .cg-marquee span,.cm-marquee span{ animation:none; padding-left:0; }
  .cm-burst{ animation:none; }
}