/* ============================================================
   THEME: house — "Doodle"
   Sergio Aragonés / Mad-margin cartoon on cream paper.
   Contract: every theme CSS defines
     1. page look (colors, fonts, borders, backgrounds, decorations)
     2. the --g-* globe custom properties (read by the globe JS)
     3. styles for the globe chrome classes:
        .g-paper .g-frame-outer .g-frame-inner .g-title .g-subtitle
        .g-stamp-box .g-stamp-text .g-sparkle .g-legend-text
        .g-chip-solid .g-chip-future .g-hint
     4. optionally: #globe .rough { filter:none } to kill the hand-jitter
   ============================================================ */

:root{
  --paper:#FBF5E4; --paper-deep:#F1E8C9; --ink:#1A1A1A; --ink-soft:#3D352A;
  --muted:#6C6033; --red:#C04D3A; --yellow:#F5C84B; --blue:#2A78C2; --green:#2D7A45;

  /* globe */
  --g-ocean-1:#8FC3E8; --g-ocean-2:#2A78C2;
  --g-sphere-stroke:#1A1A1A; --g-sphere-stroke-w:3.2;
  --g-land:#8BBB4E; --g-land-stroke:#1A1A1A; --g-land-stroke-w:1.8;
  --g-grat:#1A1A1A; --g-grat-opacity:0.22;
  --g-arc:#2A78C2; --g-arc-dash:2,6; --g-arc-w:2;
  --g-pin-you:#C04D3A; --g-pin-you-stroke:#1A1A1A; --g-pin-dot:#FBF5E4;
  --g-pin-future:#FBF5E4; --g-pin-future-stroke:#C04D3A; --g-pin-q:#C04D3A;
  --g-label:#3D352A; --g-label-halo:#FBF5E4;
  --g-pennant-bg:#F5C84B; --g-pennant-border:#1A1A1A; --g-pennant-text:#C04D3A;
  --g-rough:1; --g-shadow-opacity:0.12;
}

body{
  background:var(--paper); color:var(--ink-soft);
  font-family:'Marker Felt','Comic Sans MS','Chalkboard SE',cursive;
  background-image:radial-gradient(#C0B27A55 .5px, transparent .6px),
                   radial-gradient(#A8945644 .4px, transparent .5px);
  background-size:6px 6px, 9px 9px;
}

.style-bar{background:rgba(251,245,228,.93);border-bottom:2px solid var(--ink);backdrop-filter:blur(3px)}
.style-bar button{
  font-family:inherit;background:#fff;border:2px solid var(--ink);border-radius:5px;
  color:var(--ink);box-shadow:2px 2px 0 #1a1a1a33;cursor:pointer
}
.style-bar button:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 #1a1a1a33}
.style-bar button.active{background:var(--red);color:#fff;border-color:var(--ink)}

.hero img{border:3px solid var(--ink);border-radius:6px;box-shadow:6px 6px 0 #1a1a1a22}
.tagline{color:var(--ink)}
.tagline b{color:var(--red)}
.subline{color:var(--muted);font-style:italic}
.stamp{
  transform:rotate(-6deg);border:3px solid var(--red);color:var(--red);
  font-weight:900;letter-spacing:3px;border-radius:3px;opacity:.9
}
h2{color:var(--red);letter-spacing:1px}
p.lede{color:var(--muted);font-style:italic}
.globe-box{background:var(--paper-deep);border:3px solid var(--ink);border-radius:8px;box-shadow:6px 6px 0 #1a1a1a22}
figure{background:#fff;border:3px solid var(--ink);border-radius:6px;box-shadow:5px 5px 0 #1a1a1a22;transform:rotate(-.6deg)}
figure:nth-child(even){transform:rotate(.7deg)}
figcaption{color:var(--ink)}
figcaption small{color:var(--muted);font-style:italic}
.promise{background:#fff;border:3px dashed var(--red);border-radius:8px;transform:rotate(-.4deg)}
.promise h3{color:var(--red);letter-spacing:2px}
.promise p{color:var(--ink-soft)}
footer{color:var(--muted);border-top:2px dashed var(--muted)}
footer a{color:var(--blue)}

/* globe chrome */
#globe{font-family:'Marker Felt','Comic Sans MS','Chalkboard SE',cursive}
.g-paper{fill:url(#paper)}
.g-frame-outer{fill:none;stroke:var(--ink);stroke-width:2.6}
.g-frame-inner{fill:none;stroke:var(--ink);stroke-width:1;opacity:.45}
.g-title{fill:var(--red);font-weight:900}
.g-subtitle{fill:var(--ink);font-style:italic}
.g-stamp-box{fill:none;stroke:var(--red);stroke-width:2.4}
.g-stamp-text{fill:var(--red);font-weight:900}
.g-sparkle{fill:var(--yellow);stroke:var(--ink);stroke-width:.8}
.g-legend-text{fill:var(--muted)}
.g-chip-solid{fill:var(--g-pin-you);stroke:var(--ink);stroke-width:1.2}
.g-chip-future{fill:var(--g-pin-future);stroke:var(--ink);stroke-width:1.2;stroke-dasharray:4,3}
.g-hint{fill:var(--red);font-weight:900}