/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; padding-bottom: 92px; font: 16px/1.45 "Times New Roman", Times, serif; color: #000; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: #00e; } a:visited { color: #551a8b; }
#page { outline: none; }
:focus-visible { outline: 2px dotted currentColor; outline-offset: 2px; }

/* ---------- loader: a slow page, 1998 style ---------- */
#loader { position: fixed; inset: 0; z-index: 99; background: #c0c0c0; display: flex; align-items: center; justify-content: center; transition: opacity .35s; }
#loader.gone { opacity: 0; pointer-events: none; }
.ld-box { width: min(360px, 86vw); font: 18px "Times New Roman", serif; }
.ld-title { margin-bottom: 10px; }
.ld-bar { height: 22px; border: 2px inset #fff; background: #fff; padding: 2px; }
.ld-fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, #000080 0 12px, transparent 12px 15px); transition: width .2s; }
.ld-note { margin-top: 8px; font-size: 14px; color: #333; }

/* ---------- the webring bar ---------- */
#ring { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #c0c0c0;
  border-top: 2px solid #fff; box-shadow: 0 -1px 0 #808080, 0 -3px 8px rgba(0,0,0,.25); font: 13px Arial, Helvetica, sans-serif; color: #000; }
#ringLogo { width: 56px; height: 56px; flex: 0 0 auto; }
.ring-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ring-btns { display: flex; gap: 4px; flex-wrap: nowrap; }
.rb { display: inline-block; padding: 5px 10px; background: #c0c0c0; color: #000 !important; text-decoration: none; font: bold 13px Arial, sans-serif; cursor: pointer;
  border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf; white-space: nowrap; line-height: 1.2; }
.rb:active { border-color: #404040 #fff #fff #404040; box-shadow: inset 1px 1px 0 #808080; }
.rb-snd { min-width: 34px; font-size: 15px; }
.rb-snd.off { color: #808080 !important; text-decoration: line-through; }

/* ---------- toys ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.fall { position: absolute; top: -20px; border-radius: 50%; background: #fff; animation: fall linear infinite; opacity: .9; }
.fall.confetti { border-radius: 0; animation-name: fallspin; }
.fall.bubble { top: auto; bottom: -30px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.15) 60%, rgba(255,255,255,.4)); border: 1px solid rgba(255,255,255,.6); animation-name: rise; }
@keyframes fall { to { transform: translate(30px, 110vh); } }
@keyframes fallspin { to { transform: translate(-40px, 110vh) rotate(720deg); } }
@keyframes rise { to { transform: translate(18px, -112vh); } }
.twinkle { position: absolute; width: 2px; height: 2px; background: #fff; animation: tw 2.4s steps(2) infinite; }
@keyframes tw { 50% { opacity: .1; } }
.spark { position: fixed; font-size: 14px; transform: translate(-50%, -50%); animation: spark .8s forwards; text-shadow: 0 0 4px currentColor; }
@keyframes spark { to { opacity: 0; transform: translate(-50%, 20px) scale(.4); } }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

/* ---------- home page ---------- */
body.v-home { background: radial-gradient(circle at 10px 10px, #ffd84d 2px, transparent 3px) 0 0/24px 24px, linear-gradient(90deg, #000060 0, #000060 150px, #f8f6e8 150px); }
body.v-home::before { content: ""; position: fixed; left: 150px; top: 0; bottom: 0; width: 6px; background: linear-gradient(90deg, #808080, #fff); z-index: 0; }
.home { display: flex; position: relative; z-index: 1; }
.h-side { width: 150px; flex: 0 0 150px; }
.h-side-in { position: sticky; top: 0; padding: 22px 10px; display: flex; flex-direction: column; gap: 10px; }
.h-side a { color: #ffd84d; font: bold 15px "Comic Sans MS", "Comic Neue", cursive; text-decoration: none; padding-left: 16px; position: relative; }
.h-side a::before { content: "\2605"; position: absolute; left: 0; color: #fff; }
.h-side a:hover { color: #fff; text-decoration: underline; }
.h-main { flex: 1 1 auto; min-width: 0; padding: 16px 26px 30px; }
.h-head { text-align: center; }
.wordart { margin: 6px 0 0; font: 900 clamp(44px, 7.4vw, 92px)/1 Impact, "Arial Black", "Helvetica Neue", sans-serif; letter-spacing: 2px; position: relative; display: inline-block;
  color: transparent; background: linear-gradient(180deg, #fff200 0%, #ff8a00 45%, #e00000 55%, #800080 100%); -webkit-background-clip: text; background-clip: text;
  transform: perspective(400px) rotateX(14deg) skewX(-6deg); filter: drop-shadow(3px 3px 0 #000060) drop-shadow(2px 2px 0 #4040ff); padding: 0 6px; }
.h-welcome { margin: 10px 0 6px; font: bold 22px "Comic Sans MS", "Comic Neue", cursive; color: #000080; }
.rainbow-hr { height: 8px; margin: 12px 0 18px; background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, violet, red); background-size: 200% 100%; animation: slide 4s linear infinite; border: 1px solid #000; }
@keyframes slide { to { background-position: -200% 0; } }
.h-cols { display: flex; gap: 22px; align-items: flex-start; }
.h-ring { flex: 1 1 auto; min-width: 0; }
.h-about { flex: 0 0 280px; }
.h2 { margin: 0 0 10px; font: bold 22px Arial, sans-serif; color: #fff; background: linear-gradient(90deg, #000080, #1084d0); padding: 4px 10px; border: 2px outset #8080ff; }
.h-ringtop { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 2px 0 4px; }
.h-ringbox { text-align: center; flex: 0 1 360px; min-width: 0; }
.h-ringtop .ringlogo { width: 100%; max-width: 360px; height: auto; aspect-ratio: 1; cursor: pointer; display: block; margin: 0 auto; }
.h-ringcap { display: inline-block; margin-top: 2px; font: bold 18px "Comic Sans MS", "Comic Neue", cursive; color: #c00 !important; }
.h-ringbtns { flex-direction: column; align-items: stretch; }
.h-ringbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.h-ringbtns .btn3d { font-size: 15px; padding: 7px 14px; }
.h-grid { width: 100%; border-collapse: separate; border-spacing: 8px; table-layout: fixed; }
.h-grid td { vertical-align: top; padding: 0; }
.cell { display: block; text-align: center; text-decoration: none; color: #000080 !important; background: #fff; padding: 6px; border: 3px outset #c0c0c0; height: 100%; }
.cell:hover { border-style: inset; background: #ffffcc; }
.cell-pic { position: relative; display: block; line-height: 0; border: 2px solid #000; }
.cell-pic img { width: 100%; height: auto; image-rendering: pixelated; }
.cell-art { position: absolute; right: -10px; bottom: -12px; width: 42% !important; transform: rotate(6deg); filter: drop-shadow(1px 2px 0 rgba(0,0,0,.4)); }
.cell:hover .cell-art { animation: wob .5s steps(2) infinite; }
@keyframes wob { 50% { transform: rotate(-8deg) scale(1.06); } }
.cell-name { display: block; margin-top: 10px; font: bold 15px "Comic Sans MS", "Comic Neue", cursive; text-decoration: underline; }
.cell-client { display: block; font: 11px Arial, sans-serif; color: #555; letter-spacing: 1px; }
.h-card { background: #ffffe0; border: 3px ridge #c0a000; padding: 10px 14px; font: 15px/1.45 Georgia, serif; }
.h-card p { margin: 0 0 10px; }
.h-card ul { margin: 0 0 10px; padding-left: 20px; }
.pin { vertical-align: middle; width: 18px; height: 18px; object-fit: contain; }
.btn3d { display: inline-block; padding: 4px 12px; background: #c0c0c0; color: #000 !important; text-decoration: none; font: bold 13px Arial, sans-serif; border: 2px solid; border-color: #fff #404040 #404040 #fff; cursor: pointer; }
.btn3d:active { border-color: #404040 #fff #fff #404040; }
.construction { margin-top: 16px; padding: 10px; text-align: center; background: repeating-linear-gradient(-45deg, #000 0 14px, #ffd200 14px 28px); border: 2px solid #000; }
.construction span { display: inline-block; background: #ffd200; color: #000; font: 900 14px "Arial Black", Impact, sans-serif; padding: 4px 8px; border: 2px solid #000; letter-spacing: 1px; }

/* ---------- the ring list (a ring hub page) ---------- */
body.v-list { background: #fff; }
.rl { font: 14px/1.4 Arial, Helvetica, sans-serif; }
.rl-bar { background: #336; color: #fff; font: bold 14px Arial, sans-serif; padding: 6px 14px; border-bottom: 3px solid #f90; }
.rl-in { max-width: 980px; margin: 0 auto; padding: 14px; }
.rl-top { display: flex; gap: 16px; align-items: center; }
.rl-top .ringlogo { width: 120px; height: 120px; flex: 0 0 auto; }
.rl h1 { margin: 0 0 6px; font: bold 28px Arial, sans-serif; color: #336; }
.rl-t { width: 100%; border-collapse: collapse; margin-top: 14px; }
.rl-t th { background: #ccd; text-align: left; padding: 4px 8px; border: 1px solid #99a; }
.rl-t td { border: 1px solid #ccd; padding: 6px 8px; vertical-align: top; }
.rl-t tr:nth-child(even) td { background: #f2f2fa; }
.rl-pic img { display: block; width: 160px; image-rendering: pixelated; border: 1px solid #000; }
.rl-name a { font-weight: bold; font-size: 16px; }
.rl-name small { color: #666; letter-spacing: 1px; }

/* ---------- member sites: shared bones ---------- */
.site { color: var(--ink); font-family: var(--font); padding: 18px 12px 10px; position: relative; }
.site a { color: var(--link); } .site a:visited { color: var(--vlink); }
.site .wrap { max-width: 860px; margin: 0 auto; background: var(--panel); padding: 18px 22px; }
.site .main { min-width: 0; }
.hd { text-align: center; position: relative; padding: 4px 0; }
.ca { width: 120px; height: auto; vertical-align: middle; animation: bob 1.4s steps(4) infinite; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.35)); }
.ca2 { transform: scaleX(-1); animation: bob2 1.4s steps(4) infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-3deg); } }
@keyframes bob2 { 50% { transform: scaleX(-1) translateY(-6px) rotate(-3deg); } }
.h1 { display: inline-block; vertical-align: middle; margin: 6px 12px; font-size: clamp(34px, 6vw, 64px); line-height: 1.05; }
.client { font: bold 13px Arial, sans-serif; letter-spacing: 3px; opacity: .85; margin-top: 4px; }
.mq { display: block; margin: 8px 0 14px; padding: 4px 0; font-weight: bold; font-size: 18px; }
.drive { display: block; height: 76px; margin: -6px 0 6px; }
.drive img { height: 70px; width: auto; }
.hero { text-align: center; margin: 8px 0 14px; }
.hero img { width: 480px; image-rendering: pixelated; display: inline-block; }
.hero.portrait img { width: 300px; }
.floaty img { animation: floaty 4s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-10px); } }
.desc { font-size: 18px; margin: 0 0 14px; }
.split { display: flex; gap: 20px; align-items: flex-start; }
.split .hero { margin: 0; flex: 0 0 auto; max-width: 56%; }
.split-r { flex: 1 1 auto; min-width: 0; }
.divr { height: 14px; margin: 16px 0; }
.sec { margin: 0 0 8px; }
.h3 { font-size: 24px; margin: 4px 0 10px; }
.sec p { margin: 0 0 12px; }
.credits p { font-size: 14px; opacity: .9; }
.back { text-align: center; font-weight: bold; }

/* ---------- the real work (the media kit), dressed for the page ---------- */
/* the ring bar pinned to the bottom counts as chrome, so a portrait film and its controls still fit the screen */
.site .work.ab-media { --ab-chrome: 150px; --ab-gap: 12px; gap: 0; }
.site .ab-section { margin: 0 0 8px; }
/* films and spots sit above the snow, bubbles and stars, so nothing falls across their controls */
.site .ab-frame { z-index: 41; border: 3px ridge #888; }
.site .ab-film figcaption { margin: 0; padding: 3px 6px; font: bold 12px Arial, Helvetica, sans-serif; color: #fff; background: #000; }
.site .ab-image img { border: 3px outset #c0c0c0; background: #fff; }
.site .ab-sounds { gap: 10px; }
.site .ab-audio { position: relative; z-index: 41; max-width: 440px; padding: 6px 8px 8px; background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
.site .ab-audio figcaption { margin: 0 0 6px; font: bold 14px Arial, Helvetica, sans-serif; color: #000; }
.site .ab-audio figcaption::before { content: "\266B  "; }
.ab-lightbox img { border: 4px ridge #c0c0c0; background: #fff; }

/* layouts */
.L-nav .wrap, .L-frames .wrap { display: grid; grid-template-columns: 190px 1fr; gap: 0; padding: 0; max-width: 980px; }
.nav { padding: 16px 12px; border-right: 4px ridge #999; text-align: center; }
.nav .ca { width: 130px; }
.nav ul { list-style: none; padding: 0; margin: 14px 0 0; text-align: left; }
.nav li { margin: 0 0 8px; }
.nav li a { display: block; font-weight: bold; }
.L-nav .main, .L-frames .main { padding: 18px 22px; }
.L-frames .nav { position: sticky; top: 0; align-self: start; max-height: calc(100vh - 80px); overflow: auto; background: #200; border-right: 6px ridge #a87b1c; }
.L-frames .main { border-left: 0; }

/* ---------- title treatments ---------- */
.H-gold .h1 { font-family: "Times New Roman", serif; font-style: italic; color: #ffd76a; text-shadow: 0 1px 0 #fff3b0, 0 2px 0 #c9a227, 0 3px 0 #8a6a10, 0 4px 0 #5a4005, 0 6px 8px #000; }
.H-fashion .h1 { font: 200 clamp(30px, 6vw, 58px) Verdana, sans-serif; letter-spacing: .5em; text-transform: uppercase; color: #fff; }
.H-xmas .h1 { font: italic bold clamp(38px, 7vw, 66px) "Brush Script MT", "Snell Roundhand", Georgia, cursive; color: #c00; text-shadow: 2px 2px 0 #063, 4px 4px 0 #fff; }
.H-amason .h1 { font-family: "Press Start 2P", monospace; font-size: clamp(22px, 4.6vw, 44px); color: #1b9a3c; text-transform: uppercase; text-shadow: 3px 3px 0 #0a4a1a; }
.H-amason .h1::after { content: ""; display: inline-block; width: .5em; height: .5em; background: #c99a1e; margin-left: .3em; vertical-align: middle; }
.H-magic .h1 { font-family: Papyrus, "Trebuchet MS", fantasy; color: #fff; text-shadow: 0 0 6px #0ff, 0 0 14px #f0f, 0 0 26px #80f; }
.H-angry .h1 { font-family: Impact, "Arial Black", sans-serif; color: #ff2020; text-transform: uppercase; text-shadow: 3px 3px 0 #000, 5px 5px 0 #600; animation: shake .25s steps(2) 12; }
@keyframes shake { 50% { transform: translate(2px, -1px) rotate(-1deg); } }
.H-crayon .h1 { font-family: "Comic Sans MS", "Comic Neue", cursive; font-weight: 700; background: linear-gradient(90deg, #e33, #f90, #fc0, #3b3, #39f, #93f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 #333); }
.H-stencil .h1 { font-family: Stencil, Impact, "Arial Black", sans-serif; color: #ff6a00; letter-spacing: 3px; text-transform: uppercase; text-shadow: 2px 2px 0 #000; }
.H-awning .h1 { font: bold clamp(32px, 6vw, 56px) Georgia, serif; color: #2a6b3a; }
.H-wave .h1 { font-family: "Courier New", monospace; font-weight: bold; color: #c00; text-shadow: 2px 2px 0 #fff, 4px 4px 0 #49c; }
.H-cheddar .h1 { font: 900 clamp(38px, 7vw, 70px) "Comic Sans MS", "Comic Neue", cursive; color: #ffd200; -webkit-text-stroke: 2px #6a2d00; text-shadow: 4px 4px 0 #6a2d00; }
.H-deal .h1 { font-family: "Arial Black", Impact, sans-serif; color: #fff; background: #d00; padding: 4px 14px; transform: rotate(-2deg); box-shadow: 4px 4px 0 #000; }
.H-forest .h1 { font-family: "Trebuchet MS", sans-serif; font-weight: bold; color: #2a6a2a; text-shadow: 2px 2px 0 #cfe8c0; }
.H-ice .h1 { font-family: "Arial Black", Impact, sans-serif; background: linear-gradient(180deg, #fff, #9ef 50%, #39c 51%, #dff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px #6cf); }
.H-wavy .h1 { font-family: "Comic Sans MS", "Comic Neue", cursive; font-weight: bold; color: #ff6; text-shadow: 3px 3px 0 #036; }
.H-wavy .h1 { animation: sway 2.6s ease-in-out infinite; } @keyframes sway { 50% { transform: rotate(-2deg) translateY(-3px); } }
.H-chrome .h1 { font: bold clamp(30px, 5.6vw, 54px) Verdana, sans-serif; background: linear-gradient(180deg, #fff 0, #999 48%, #333 50%, #ccc 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(1px 1px 0 #000); }
.H-ahh .h1 { font-family: "Arial Black", Impact, sans-serif; color: #fff; text-shadow: 3px 3px 0 #800; }
.H-rainbow .h1 { font-family: "Comic Sans MS", "Comic Neue", cursive; font-weight: bold; background: linear-gradient(90deg, #f0f, #90f, #09f, #0c6, #fc0, #f60); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 #636); }
.H-space .h1 { font: bold clamp(32px, 6vw, 60px) Arial, sans-serif; color: #fff; letter-spacing: 4px; text-shadow: 0 0 8px #cf3, 0 0 20px #8a2; }
.H-sale .h1 { font-family: Impact, "Arial Black", sans-serif; color: #c00; font-size: clamp(42px, 9vw, 86px); text-transform: uppercase; text-shadow: 3px 3px 0 #fff, 6px 6px 0 #000; animation: shake .3s steps(2) 10; }
.H-glitter .h1 { font: italic bold clamp(34px, 6vw, 60px) Georgia, serif; background: linear-gradient(110deg, #c00 0 30%, #fff 40%, #c00 50%, #f9c 60%, #c00 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: glit 2.2s linear infinite; filter: drop-shadow(1px 1px 0 #600); }
@keyframes glit { to { background-position: -250% 0; } }
.H-flame .h1 { font: bold clamp(56px, 11vw, 110px) "Times New Roman", serif; letter-spacing: 6px; color: #fff4c0; animation: flame .18s steps(2) infinite alternate;
  text-shadow: 0 0 4px #fff, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; }
@keyframes flame { to { text-shadow: 0 0 4px #fff, 1px -6px 5px #ff3, -2px -12px 7px #fd3, 2px -18px 12px #f80, -2px -28px 20px #f20; } }
.H-premiere .h1 { font: bold clamp(30px, 5.6vw, 54px) "Times New Roman", serif; color: #fc3; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 0 10px #f90; }
.H-lab .h1 { font-family: "VT323", "Courier New", monospace; font-size: clamp(48px, 9vw, 90px); color: #f33; text-shadow: 0 0 6px #f00; letter-spacing: 6px; }
.H-memo .h1 { font: bold clamp(28px, 5vw, 44px) "Times New Roman", serif; color: #000; text-decoration: underline; }
.H-brass .h1 { font: bold clamp(32px, 6vw, 58px) Georgia, serif; color: #f4d27a; text-shadow: 0 1px 0 #fff3b0, 0 2px 0 #8a6a10, 0 4px 6px #000; }

/* ---------- picture frames ---------- */
.F-gold .hero img { border: 10px ridge #c9a227; box-shadow: 0 0 0 3px #000, 0 6px 16px #000; }
.F-thin .hero img { border: 1px solid #fff; padding: 6px; }
.F-candy .hero img { border: 10px solid; border-image: repeating-linear-gradient(45deg, #c00 0 10px, #fff 10px 20px) 10; }
.F-bevel .hero img { border: 6px outset #c0c0c0; }
.F-glow .hero img { border: 2px solid #7ff; box-shadow: 0 0 18px #0ff, 0 0 40px #80f; }
.F-red .hero img { border: 4px double #f00; }
.F-tape .hero img { border: 10px solid #fff; box-shadow: 3px 4px 0 rgba(0,0,0,.4); transform: rotate(-1.5deg); }
.F-polaroid .hero img { border: 10px solid #fff; border-bottom-width: 40px; box-shadow: 2px 3px 8px rgba(0,0,0,.35); transform: rotate(1.5deg); }
.F-ice .hero img { border: 6px solid #bef; box-shadow: 0 0 0 2px #fff, 0 0 20px #6cf; }
.F-porthole .hero img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: 300px; border: 14px solid #b8860b; box-shadow: inset 0 0 0 4px #000, 0 0 0 4px #5a4000; }
.F-wood .hero img { border: 12px solid #8b5a2b; border-image: repeating-linear-gradient(90deg, #8b5a2b 0 6px, #a0703a 6px 9px, #6b4423 9px 12px) 12; }
.F-white .hero img { border: 6px solid #fff; }
.F-starburst .hero img { border: 8px dashed #c00; background: #fff; padding: 6px; }
.F-filmstrip .hero img { border: 18px solid #000; border-image: repeating-linear-gradient(90deg, #000 0 8px, #eee 8px 14px, #000 14px 22px) 18; }
.F-tank .hero img { border: 6px solid #6cf; box-shadow: 0 0 0 4px #035, 0 0 24px #3af; }
.F-plain .hero img { border: 1px solid #000; }
.F-none .hero img { border: 0; }

/* ---------- dividers ---------- */
.D-stars .divr { background: radial-gradient(circle, #fd5 0 3px, transparent 4px) 0 50%/22px 14px repeat-x; }
.D-line .divr { height: 1px; background: #fff; margin: 22px 20%; }
.D-holly .divr { background: radial-gradient(circle, #c00 0 3px, transparent 4px) 0 50%/26px 14px repeat-x, linear-gradient(transparent 6px, #063 6px 8px, transparent 8px); }
.D-rainbow .divr, .D-sparkle .divr { height: 6px; background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, violet); }
.D-sparkle .divr { box-shadow: 0 0 8px #f0f; }
.D-red .divr { height: 4px; background: #f00; }
.D-crayons .divr { height: 10px; background: linear-gradient(90deg, #e33 0 16%, #f90 16% 33%, #fc0 33% 50%, #3b3 50% 66%, #39f 66% 83%, #93f 83%); border-radius: 0 6px 6px 0; }
.D-hazard .divr, .D-cheese .divr { height: 12px; background: repeating-linear-gradient(-45deg, #000 0 10px, #ff6a00 10px 20px); }
.D-cheese .divr { background: repeating-linear-gradient(90deg, #ff9a1f 0 30px, #ffd200 30px 34px); border: 2px solid #6a2d00; }
.D-awning .divr { height: 16px; background: repeating-linear-gradient(90deg, #2a6b3a 0 20px, #fffaf0 20px 40px); border-radius: 0 0 8px 8px; }
.D-waves .divr { background: radial-gradient(circle at 50% 0, transparent 7px, #49c 8px 10px, transparent 11px) 0 0/22px 14px repeat-x; }
.D-checker .divr { background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0/14px 14px; height: 14px; }
.D-trees .divr { background: linear-gradient(135deg, transparent 50%, #2a6a2a 50%) 0 0/14px 14px repeat-x, linear-gradient(225deg, transparent 50%, #2a6a2a 50%) 0 0/14px 14px repeat-x; }
.D-ice .divr { height: 4px; background: linear-gradient(90deg, transparent, #9ef, #fff, #9ef, transparent); box-shadow: 0 0 10px #6cf; }
.D-bubbles .divr { background: radial-gradient(circle, transparent 3px, #bff 4px 5px, transparent 6px) 0 50%/20px 14px repeat-x; }
.D-chrome .divr { height: 8px; background: linear-gradient(#fff, #999 50%, #444 51%, #ccc); border: 1px solid #666; }
.D-wave .divr { background: radial-gradient(circle at 50% 100%, transparent 7px, #fff 8px 10px, transparent 11px) 0 0/22px 14px repeat-x; }
.D-paws .divr { background: radial-gradient(ellipse 5px 4px at 50% 70%, #a0a 98%, transparent) 0 0/34px 14px repeat-x, radial-gradient(circle 2px at 35% 25%, #a0a 98%, transparent) 0 0/34px 14px repeat-x, radial-gradient(circle 2px at 65% 25%, #a0a 98%, transparent) 0 0/34px 14px repeat-x; }
.D-money .divr { height: 16px; background: repeating-linear-gradient(90deg, #2e8b3a 0 34px, #c7e9b0 34px 36px); border: 2px solid #155; }
.D-flame .divr { height: 10px; background: linear-gradient(90deg, #f20, #f80, #fd3, #f80, #f20); filter: blur(1px); animation: blink 0.4s steps(2) infinite alternate; }
.D-film .divr { height: 18px; background: repeating-linear-gradient(90deg, #000 0 6px, #ddd 6px 12px, #000 12px 18px); border-top: 4px solid #000; border-bottom: 4px solid #000; }
.D-grid .divr { height: 2px; background: #3af; box-shadow: 0 0 6px #3af; }
.D-hr .divr { height: 2px; border-top: 1px solid #808080; border-bottom: 1px solid #fff; margin: 14px 0; }
.D-brass .divr { height: 6px; background: linear-gradient(#fff3b0, #c9a227, #6a4a05); }

/* ---------- per-site touches ---------- */
.s-5star-theater .wrap { border: 6px ridge #a87b1c; }
.s-5star-theater .mq { color: #000; background: #ffd76a; border-top: 3px double #000; border-bottom: 3px double #000; }
.s-basiques .wrap { border: 1px solid #555; max-width: 760px; }
.s-basiques .desc, .s-basiques .sec p { font-size: 14px; letter-spacing: .08em; }
.s-basiques .h3 { font-weight: 200; letter-spacing: .3em; text-transform: uppercase; font-size: 16px; }
.s-amasongs .wrap { border: 8px solid #c00; outline: 6px solid #063; outline-offset: 0; }
.s-amason .wrap { border: 4px dashed #1b9a3c; }
.s-amason .h3 { color: #c00; font-family: "Comic Sans MS", "Comic Neue", cursive; }
.s-alexa-transforms .wrap { border: 2px solid #80f; box-shadow: 0 0 30px #80f; }
.s-superbowlsnub .wrap { border: 6px solid #f00; }
.s-superbowlsnub .h3 { color: #ff3; text-transform: uppercase; }
.poll { margin: 10px auto 16px; max-width: 320px; background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; padding: 10px 14px; font: 15px Arial, sans-serif; }
.poll-h { font-weight: bold; margin-bottom: 8px; }
.poll label { display: inline-block; margin: 0 16px 8px 0; font-weight: bold; }
.poll-r { margin-top: 8px; font-weight: bold; color: #c00; min-height: 1.2em; }
.s-happyschoolyear .wrap { background: transparent; padding-left: 74px; }
.s-happyschoolyear .h3 { color: #c33; }
.s-gerber .wrap { border: 2px solid #ff6a00; }
.s-gerber .mq { background: #ff6a00; color: #000; font-family: Stencil, Impact, sans-serif; letter-spacing: 2px; }
.s-gerber .h3 { color: #ff6a00; text-transform: uppercase; letter-spacing: 2px; }
.s-storefronts .wrap { border: 3px solid #2a6b3a; border-top: 0; }
.s-storefronts .hd { background: repeating-linear-gradient(90deg, #2a6b3a 0 26px, #fffaf0 26px 52px); padding: 10px; border-radius: 0 0 18px 18px; }
.s-storefronts .h1 { background: #fffaf0; padding: 4px 14px; border: 3px solid #2a6b3a; }
.s-amazon .wrap { border: 6px ridge #c00; }
.s-amazon .mq { color: #c00; }
.s-tillamook .wrap { border: 8px ridge #ff9a1f; box-shadow: 6px 6px 0 #6a2d00; }
.s-tillamook .h3 { color: #c40; text-decoration: underline wavy #ffd200; }
.clock { margin: 10px 0 16px; text-align: center; }
.clock span { display: inline-block; font: 40px/1 "VT323", "Courier New", monospace; color: #f22; background: #000; padding: 6px 16px; border: 4px inset #888; letter-spacing: 3px; text-shadow: 0 0 6px #f00; }
.s-deals-all-day .wrap { border: 6px solid #000; }
.s-rei .wrap { border: 10px solid #6b4423; }
.s-rei .mq { color: #2a6a2a; font-size: 22px; }
.s-nike-getouthere .wrap { border: 3px solid #9ef; box-shadow: 0 0 22px #6cf; }
.s-nike-getouthere .mq { color: #fff; }
.s-aquarium .wrap { border: 8px solid #b8860b; border-radius: 22px; }
.s-aquarium .mq { color: #ff6; }
.s-aquarium .h3 { color: #ff6; }
.s-nikedotcom .wrap { border: 2px solid #000; box-shadow: 6px 6px 0 #999; }
.s-nikedotcom .nav { background: #e4e4e4; }
.s-nikedotcom .nav li a { background: #c0c0c0; color: #000; padding: 4px 8px; border: 2px solid; border-color: #fff #404040 #404040 #fff; text-decoration: none; }
.s-cocacola .wrap { border: 6px solid #fff; border-radius: 24px; }
.s-cocacola .h3 { text-transform: uppercase; }
.s-oregon-humane-society .wrap { border: 6px dotted #a0a; border-radius: 16px; }
.s-oregon-humane-society .h3 { color: #a0a; }
.s-nike .wrap { border: 1px solid #555; }
.s-nike .mq { color: #cf3; letter-spacing: 6px; }
.s-bedmart .wrap { border: 10px dashed #c00; }
.s-bedmart .mq { background: #c00; color: #ff0; font-family: Impact, sans-serif; font-size: 26px; letter-spacing: 2px; }
.s-bedmart .desc { font-size: 22px; }
.s-target .wrap { border: 10px solid #c00; }
.s-target .h3 { color: #c00; font-style: italic; }
.s-ullr .wrap { border: 1px solid #400; }
.s-ullr .mq { color: #f60; font-style: italic; font-size: 22px; letter-spacing: 6px; }
.s-ullr .h3 { color: #f60; }
.s-northwest-film-fest .wrap { border-left: 22px solid #000; border-right: 22px solid #000; border-image: repeating-linear-gradient(180deg, #000 0 8px, #ddd 8px 14px, #000 14px 22px) 22; }
.s-northwest-film-fest .mq { color: #fc3; letter-spacing: 3px; }
.s-northwest-film-fest .h3 { color: #fc3; font-variant: small-caps; }
.s-adidas .wrap { border: 2px solid #6cf; background-image: linear-gradient(rgba(60,170,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(60,170,255,.12) 1px, transparent 1px); background-size: 20px 20px; }
.s-adidas .h3 { font-family: "VT323", monospace; font-size: 32px; color: #f33; }
.s-adidas .desc { font-family: "VT323", monospace; font-size: 24px; }
.s-nfl .wrap { border: 1px solid #000; }
.s-nfl .nav { background: #eee; border-right: 1px solid #000; }
.s-nfl .mq { color: #000080; font-family: "Times New Roman", serif; letter-spacing: 2px; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.s-ods .wrap { border: 8px ridge #a87b1c; }
.s-ods .mq { color: #f4d27a; font-style: italic; }
.s-ods .h3 { color: #f4d27a; }

/* ---------- phones: one column, every panel scrolls, the ring stays at hand ---------- */
@media (max-width: 760px) {
  body { padding-bottom: 104px; font-size: 16px; }
  body.v-home { background: radial-gradient(circle at 10px 10px, #ffd84d 2px, transparent 3px) 0 0/24px 24px, #000060; }
  body.v-home::before { display: none; }
  .home { display: block; }
  .h-side { display: none; }
  .h-main { padding: 12px 12px 24px; background: #f8f6e8; }
  .h-cols { display: block; }
  .h-about { margin-top: 18px; }
  .h-ringtop { flex-direction: column; gap: 10px; }
  .h-ringbox { width: 100%; flex: none; }
  .h-ringtop .ringlogo { max-width: 320px; }
  .h-ringbtns { flex-direction: row; justify-content: center; }
  .h-grid, .h-grid tbody, .h-grid tr { display: contents; }
  .h-grid tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .h-grid td { display: block; }
  .h-ring table.h-grid { display: block; }
  .cell-name { font-size: 14px; }
  .rl-t thead { display: none; }
  .rl-t, .rl-t tbody, .rl-t tr, .rl-t td { display: block; width: 100%; }
  .rl-t tr { border: 1px solid #ccd; margin-bottom: 10px; }
  .rl-t td { border: 0; }
  .rl-pic img { width: 100%; }
  .rl-top .ringlogo { width: 80px; height: 80px; }
  #ring { flex-wrap: wrap; gap: 6px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  #ringLogo { width: 40px; height: 40px; }
  .ring-txt { flex: 1 1 calc(100% - 50px); font-size: 12px; }
  .ring-btns { width: 100%; justify-content: space-between; }
  .rb { flex: 1 1 auto; text-align: center; padding: 9px 4px; font-size: 13px; }
  .site { padding: 8px 6px; }
  .site .wrap { padding: 12px; }
  .L-nav .wrap, .L-frames .wrap { display: flex; flex-direction: column; padding: 0; }
  .L-nav .nav, .L-frames .nav { order: 2; border-bottom: 0; border-top: 4px ridge #999; }
  .nav { border-right: 0 !important; border-bottom: 4px ridge #999; position: static !important; max-height: none !important; }
  .nav .ca { width: 90px; }
  .nav ul { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; }
  .L-nav .main, .L-frames .main { padding: 12px; }
  .ca { width: 76px; }
  .split { display: block; }
  .split .hero { max-width: 100%; margin-bottom: 12px; }
  .hero img { width: 100%; }
  .hero.portrait img { width: 70%; }
  .F-porthole .hero img { width: 76%; }
  .desc { font-size: 16px; }
  .s-happyschoolyear .wrap { padding-left: 66px; }
  .h1 { margin: 6px 4px; overflow-wrap: anywhere; }
  .H-fashion .h1 { letter-spacing: .25em; }
  .drive { height: 56px; } .drive img { height: 50px; }
  .s-northwest-film-fest .wrap { border-left-width: 12px; border-right-width: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.readout span { font-size: 96px; padding: 4px 26px; }
@media (max-width: 760px) { .readout span { font-size: 72px; } }