/* Streaman.com
   "Made in MS Paint, c. 2002." Real HTML text, inline SVG doodles, no frameworks, no external requests.

   Two layouts:
   1. POSTER (landscape screens 900px+ wide): the whole page is an 80rem x 50rem poster. The root font size is tied to BOTH
      the window width and height, so everything scales together and fits on one screen with no scrolling.
   2. STACKED (phones, portrait tablets, narrow windows): compact single column that reads top to bottom. */

:root{
  --paper:#ffffff; --ink:#000000;
  --blue:#0033cc;       /* 8.7:1 on white */
  --red:#e10600;        /* strokes and big marks */
  --red-ink:#b00000;    /* red for text, 7.4:1 on white */
  --yellow:#fff200;     /* highlighter; black text on it is 19:1 */
  --comic:"Comic Sans MS","Comic Sans","Chalkboard SE","Comic Neue","Marker Felt","Trebuchet MS",sans-serif;
  --times:"Times New Roman",Times,"Liberation Serif","Nimbus Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1.125rem/1.4 var(--times);overflow-wrap:break-word}
h1,h2,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
svg{display:block;max-width:100%}
a{color:var(--blue)}
a:hover{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:4px solid var(--ink);outline-offset:4px}
main:focus{outline:none}  /* only receives focus from the skip link */

.skip{position:absolute;left:.5rem;top:-5rem;z-index:10;padding:.6rem 1rem;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);font:700 1rem var(--comic)}
.skip:focus{top:.5rem}
.page{overflow-x:clip}
@supports not (overflow:clip){.page{overflow-x:hidden}}

/* =========================================================
   STACKED layout (default): phones, portrait tablets
   ========================================================= */
.poster{
  max-width:46rem;margin:0 auto;padding:1rem 1rem 1.75rem;
  display:grid;gap:1.15rem .9rem;
  grid-template-columns:minmax(0,1fr) 6.4rem;
  grid-template-areas:
    "head    head"
    "blurb   burst"
    "services me"
    "charts  charts"
    "shiny   shiny"
    "box     box"
    "contact contact"
    "ps      dog";
}
.head{grid-area:head}
.burst{grid-area:burst}
.blurb{grid-area:blurb}
.me{grid-area:me}
.services{grid-area:services}
.charts{grid-area:charts}
.shiny{grid-area:shiny}
.help{grid-area:box}
.contact{grid-area:contact}
.ps{grid-area:ps}
.dog{grid-area:dog}

/* title: ONE h1 holding the brand and the tagline */
.head h1{font-weight:400}
.brand{position:relative;display:inline-block;margin:.3rem 0 1.25rem .2rem;font:700 clamp(1.6rem,8.8vw,3.4rem)/1 var(--comic);color:var(--blue);text-shadow:.045em .045em 0 var(--yellow);transform:rotate(-2deg)}
.under{position:absolute;left:-2%;bottom:-.3em;width:104%;height:.36em;overflow:visible}
.tagline{display:block;font:700 clamp(1.12rem,5vw,1.9rem)/1.18 var(--comic)}
.tagline span{display:block}
.tagline span+span{margin-left:1rem;color:var(--red-ink)}

.burst{position:relative;justify-self:end;padding:0;border:0;background:none;color:inherit;cursor:pointer;width:6.3rem;height:6.3rem;margin:-.3rem 0 0;display:grid;place-items:center;transform:rotate(8deg)}
.burst svg{position:absolute;inset:0;width:100%;height:100%}
.burst .moon{display:none}
.burst-text{position:relative;display:block;margin-top:-.45em;text-align:center;font:700 .72rem/1.05 var(--comic);transform:rotate(-12deg)}
.burst-text span{display:block}
@media (prefers-reduced-motion:no-preference){
  .burst{animation:jiggle 1.6s steps(1,end) infinite}
}
@keyframes jiggle{0%{transform:rotate(8deg)}50%{transform:rotate(3deg)}}

.blurb{font-size:1.08rem;line-height:1.38;text-wrap:balance}

.me{justify-self:end;text-align:center;transform:rotate(2deg)}
.me figcaption{display:flex;align-items:flex-end;justify-content:center;gap:.15rem;font:700 1rem/1 var(--comic);color:var(--ink)}
.mini-arrow{width:1.6rem;height:auto;flex:none}
.me-btn{position:relative;display:block;margin:0 auto;padding:0;border:0;background:none;cursor:pointer}
.me .person{width:5.4rem;height:auto;margin:.1rem auto 0}

h2{font-family:var(--comic)}
.services h2{margin:0 0 .5rem;font-size:1.5rem;line-height:1.1;color:var(--ink)}
.hl{position:relative;isolation:isolate;display:inline-block;padding:0 .1em}
.hl::before{content:"";position:absolute;z-index:-1;left:-.25em;right:-.25em;bottom:.02em;height:.62em;background:var(--yellow);clip-path:polygon(0 24%,100% 0,97% 100%,3% 80%)}
.checks li{position:relative;margin:.35rem 0;padding-left:1.75rem;font-size:1.08rem;line-height:1.25}
.checks li::before{content:"";position:absolute;left:0;top:.08em;width:1.2rem;height:1.2rem;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2028%2028%27%20shape-rendering%3D%27crispEdges%27%3E%3Cpolygon%20points%3D%273%2C6%2022%2C3%2024%2C23%205%2C25%27%20fill%3D%27white%27%20stroke%3D%27%230033cc%27%20stroke-width%3D%273%27/%3E%3Cpolyline%20points%3D%277%2C14%2012%2C20%2026%2C3%27%20fill%3D%27none%27%20stroke%3D%27%23e10600%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center/contain no-repeat}

.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.chart svg{width:100%;height:auto}
.chart figcaption{margin-top:.3rem;font:700 .95rem/1.15 var(--comic)}
.chart--up figcaption{color:#00701f}
.chart--down figcaption{color:var(--red-ink)}
.chart--up{transform:rotate(.8deg)}
.chart--down{transform:rotate(-1deg)}

.shiny{transform:rotate(-.6deg)}
.q{font-size:1.1rem;font-style:italic}
.a{margin:0 0 .45rem;font:700 1.5rem/1.1 var(--comic)}
.a--red{color:var(--red-ink)}
.a--blue{color:var(--blue);text-decoration:underline 4px var(--red);text-decoration-skip-ink:none;text-underline-offset:.16em}

/* the blue box */
.help{position:relative;isolation:isolate;padding:1.4rem 1.3rem 1.2rem;transform:rotate(.5deg)}
.help .box{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible}
.help h2{margin:0 0 .6rem;font-size:1.2rem;line-height:1.1;color:var(--blue)}
.arrows{margin:0 0 .7rem}
.arrows li{position:relative;display:flex;align-items:center;gap:.4rem;margin:.25rem 0;padding-left:1.9rem;font:700 1.12rem/1.2 var(--comic)}
.arrows li::before{content:"";position:absolute;left:0;top:.3em;width:1.45rem;height:1rem;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2030%2022%27%20shape-rendering%3D%27crispEdges%27%3E%3Cpolyline%20points%3D%272%2C12%2014%2C9%2024%2C11%27%20fill%3D%27none%27%20stroke%3D%27%23e10600%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27/%3E%3Cpolyline%20points%3D%2717%2C2%2027%2C11%2016%2C19%27%20fill%3D%27none%27%20stroke%3D%27%23e10600%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center/contain no-repeat}
.flame{width:1.1rem;height:auto;flex:none}
.help-line{font:700 1.3rem/1.15 var(--comic)}

/* the red circle: heading, email and the "no pop-up" line all live inside it */
.contact h2{font-size:1.5rem;line-height:1;color:var(--red-ink);transform:rotate(-1.5deg)}
.loop-wrap{position:relative;display:grid;justify-items:center;gap:.45rem;margin:0 .5rem;padding:2.5rem 1.2rem 2.4rem;text-align:center}
.loop{position:absolute;inset:-4% -2%;width:104%;height:108%;overflow:visible}
.mail-row{position:relative;display:flex;align-items:center;justify-content:center;gap:.4rem;max-width:100%}
.mail-arrow{width:1.4rem;height:auto;flex:none}
.mail{position:relative;display:block;padding:.15em .2em;font:700 clamp(1.05rem,5.4vw,2rem)/1.15 var(--comic);color:var(--blue);text-decoration:underline 3px;text-underline-offset:.16em;white-space:nowrap}
.mail::after{content:"";position:absolute;inset:-1rem -1.2rem}  /* tap target = a generous area around the address */
.mail:hover,.mail:focus-visible{background:var(--yellow);color:var(--ink)}
.nopopup{position:relative;max-width:17rem;font-size:1.02rem;font-style:italic;line-height:1.3;text-wrap:balance}

.ps p{font:700 1rem/1.3 var(--comic)}
.ps p+p{margin-top:.1rem}
.ps .fancy-link{margin-top:.45rem}
.ps .legal-links{margin-top:.35rem;font:400 .85rem/1.3 var(--times)}
.legal-links a{color:var(--ink)}
.fancy-link a{font-size:1.15em;color:var(--blue);text-decoration:underline 3px var(--red);text-underline-offset:.18em}

.dog{display:flex;flex-direction:column;align-items:center;justify-self:end;gap:.1rem;text-align:center}
.dog figcaption{display:flex;align-items:center;justify-content:center;gap:.2rem;font:italic 700 .8rem/1.05 var(--comic)}
.dog-arrow{display:none;width:1.4rem;height:auto;flex:none}

/* wider stacked layouts (tablet portrait): more room, same order */
@media (min-width:36rem){
  .poster{padding:1.5rem 1.75rem 2.25rem;gap:1.6rem 1.4rem;grid-template-columns:minmax(0,1fr) 9rem}
  .burst{width:8rem;height:8rem}
  .burst-text{font-size:1rem}
  .blurb{font-size:1.3rem}
  .me .person{width:7.5rem}
  .me figcaption{font-size:1.25rem}
  .services h2{font-size:1.9rem}
  .checks li{font-size:1.3rem;margin:.45rem 0}
  .charts{gap:1.6rem}
  .chart figcaption{font-size:1.15rem}
  .q{font-size:1.3rem}
  .a{font-size:2rem}
  .help{padding:1.8rem 1.8rem 1.5rem}
  .help h2{font-size:1.5rem}
  .arrows li{font-size:1.3rem}
  .help-line{font-size:1.6rem}
  .contact h2{font-size:2rem}
  .loop-wrap{padding:3rem 2.5rem 2.8rem;margin:0 1.5rem}
  .nopopup{max-width:22rem;font-size:1.2rem}
  .mail{font-size:clamp(1.6rem,5vw,2.6rem)}
  .ps p{font-size:1.15rem}
  .dog figcaption{font-size:1rem}
}
@media (max-width:21.5rem){ .mail-arrow{display:none} .loop-wrap{padding-inline:.6rem} }

/* the text wraps on very narrow phones: highlight every line instead of one block */
@media (max-width:23.5rem){
  .help-line .hl{display:inline;padding:0;background:linear-gradient(transparent 52%,var(--yellow) 52%,var(--yellow) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .help-line .hl::before{display:none}
}

/* =========================================================
   POSTER layout: landscape screens, 900px+ wide.
   Everything below is in rem, and the root font size scales
   with the window, so the 80 x 50 poster always fits in view.
   ========================================================= */
@media (min-width:900px) and (min-aspect-ratio:5/4){
  html{font-size:min(1.25vw,1.88vh)}
  .page{min-height:100vh;display:grid;place-items:center}
  .poster{
    width:80rem;max-width:none;min-height:50rem;margin:0;padding:1.4rem 2rem 1.1rem;gap:.55rem 1.2rem;
    grid-template-columns:22rem 27rem minmax(0,1fr);
    grid-template-rows:auto auto 1fr auto auto;
    grid-template-areas:
      "head  head     burst"
      "blurb blurb    charts"
      "me    services charts"
      "box   shiny    contact"
      "ps    ps       dog";
  }
  .brand{margin:.1rem 0 1.95rem .3rem;font-size:4.6rem}
  .tagline{font-size:1.8rem;line-height:1.16}
  .tagline span+span{margin-left:1.2rem}

  .burst{width:12rem;height:12rem;margin:-.7rem -.4rem 0 0;justify-self:end;align-self:start}
  .burst-text{margin-top:-.7em;font-size:1.28rem;line-height:1}
  .blurb{max-width:49rem;font-size:1.2rem;line-height:1.32}

  .me{justify-self:center;align-self:start;margin-top:.4rem}
  .me figcaption{font-size:1.35rem;justify-content:flex-start;padding-left:.5rem}
  .mini-arrow{width:2.3rem}
  .me .person{width:9.2rem;margin-top:-.2rem}

  .services{align-self:start}
  .services h2{margin-bottom:.6rem;font-size:1.75rem}
  .checks li{margin:.3rem 0;padding-left:1.9rem;font-size:1.13rem}
  .checks li::before{width:1.25rem;height:1.25rem}

  .charts{grid-template-columns:minmax(0,1fr);gap:.5rem;align-self:start;margin-top:.9rem}
  .chart{display:flex;align-items:center;gap:.8rem}
  .chart svg{width:12.6rem;flex:none}
  .chart figcaption{margin:0;max-width:8.6rem;font-size:1.12rem;line-height:1.12}

  .shiny{align-self:center}
  .q{font-size:1.1rem;line-height:1.25}
  .a{margin:.05rem 0 .45rem;font-size:1.55rem}

  .help{align-self:stretch;padding:1.15rem 1.3rem 1rem}
  .help h2{margin-bottom:.5rem;font-size:1.2rem}
  .arrows{margin-bottom:.45rem}
  .arrows li{margin:.18rem 0;font-size:1.1rem}
  .help-line{font-size:1.3rem}

  .contact{align-self:stretch}
  .loop-wrap{height:100%;margin:0;padding:1.5rem 2.2rem 1.3rem;align-content:center;gap:.3rem}
  .contact h2{font-size:1.6rem}
  .mail{font-size:1.5rem}
  .mail-arrow{width:1.5rem}
  .nopopup{max-width:19rem;font-size:1.06rem}

  .ps{align-self:end}
  .ps p{font-size:1.08rem}
  .dog{flex-direction:row;align-self:end;gap:.35rem;text-align:left}
  .dog figcaption{font-size:.95rem;max-width:5rem}
  .dog-arrow{display:block}
}

/* =========================================================
   Clickable bits: speech bubbles, the dogs, night mode
   ========================================================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.bubble{position:absolute;z-index:5;padding:.2em .6em .25em;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:1.1em;font:700 1rem/1.1 var(--comic);white-space:nowrap;pointer-events:none;visibility:hidden;transform:rotate(-3deg)}
.bubble::after{content:"";position:absolute;bottom:-.48em;right:.9em;width:.75em;height:.75em;background:var(--paper);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg)}
.is-talking .bubble{visibility:visible}
@media (prefers-reduced-motion:no-preference){
  .is-talking .bubble{animation:pop .3s steps(2,end)}
}
@keyframes pop{0%{transform:rotate(-3deg) scale(.5)}100%{transform:rotate(-3deg) scale(1)}}
.bubble--me{top:1.2rem;right:72%}

.pups{display:flex;align-items:flex-end;gap:.15rem}
.pup{position:relative;display:block;padding:0;border:0;background:none;cursor:pointer;line-height:0}
.pup svg{height:auto}
.pup--a svg{width:2.9rem}
.pup--b svg{width:3.15rem}
.pup .bubble{bottom:92%;right:35%;line-height:1.1}

/* night mode: switched on by clicking the sun */
html.dark{
  color-scheme:dark;
  --paper:#12141c; --ink:#f4f1e8;
  --blue:#82a6ff; --red-ink:#ff8080;
}
.dark .burst .sun{display:none}
.dark .burst .moon{display:block}
.dark .burst-text{color:#000}
.dark svg [stroke="#000"]{stroke:var(--ink)}
.dark svg [stroke="#0033cc"]{stroke:var(--blue)}
.dark .person [fill="#000"]{fill:var(--ink)}
.dark .person [fill="#fff"]{fill:var(--paper)}
.dark .hl,.dark .skip,.dark a:hover,.dark .mail:hover,.dark .mail:focus-visible{color:#000}
.dark .chart--up figcaption{color:#4cd37a}
.dark .hl::before{top:-.02em;bottom:-.06em;height:auto}

@media (min-width:36rem){
  .pup--a svg{width:4rem}
  .pup--b svg{width:4.3rem}
}

/* poster layout: bigger dogs, and Craig's bubble goes to the right of his head */
@media (min-width:900px) and (min-aspect-ratio:5/4){
  .bubble{font-size:1.2rem}
  .pup--a svg{width:5.4rem}
  .pup--b svg{width:5.9rem}
  .bubble--me{top:2.2rem;right:auto;left:74%}
  .bubble--me::after{right:auto;left:.9em}
}

@media (forced-colors:active){
  .hl::before{display:none}
  .hl{text-decoration:underline}
}
@media print{ .burst{animation:none} a{color:#000} }