/* ============================================================================
   UnregisteredHyperCameron — stylesheet
   STYLE DIRECTION: "DESKTOP ERA", roughly 1998-2002.
   ----------------------------------------------------------------------------
   The idea: your blog looks like a program running on an old computer. Silver
   window chrome, blue title bars, a tiled teal desktop behind it, warm paper
   under the text. Busy and fun, but easy on the eyes — no neon, no starfield.

   HOW TO USE THIS FILE
   Everything you'll want to change day-to-day lives in SECTION 1 (THE CONTROL
   PANEL). Change a colour there and it updates everywhere at once. The rest is
   organised into labelled sections that say what they control.

   TABLE OF CONTENTS
     1. THE CONTROL PANEL ....... colours, fonts, sizes, speeds. Start here.
     2. THE BEVEL RECIPE ........ how the 3D edges work. Read once, then ignore.
     3. DESKTOP BACKGROUND ...... the tiled pattern + your custom cursor
     4. BASIC TEXT .............. paragraphs, headings, links, lists
     5. IMAGES .................. frames + your .left/.right/.center helpers
     6. THE WINDOW .............. #container and its fake title bar
     7. HEADER & NAV ............ the toolbar Zonelets injects
     8. SCROLLING BANNERS ....... the marquee bars, styled as status bars
     9. POST LISTS & NEXT/PREV
    10. FOOTER
    11. DECORATION TOOLKIT ...... optional classes for inside your posts
    12. MOBILE + ACCESSIBILITY .. don't delete this, it's what keeps phones happy
   ========================================================================== */


/* ============================================================================
   1. THE CONTROL PANEL
   ----------------------------------------------------------------------------
   Change these and the whole site follows. Colours are hex codes — grab new
   ones from any colour picker and paste them in.
   ========================================================================== */

:root {

  /* --- THE DESKTOP (behind the window) --- */
  --desktop:      #5E8A8C;   /* the teal-ish backdrop */
  --desktop-tile: #55807F;   /* the woven pattern on top of it */

  /* --- WINDOW CHROME (the silver furniture) --- */
  --silver:       #C6C6C6;   /* toolbars, buttons, window edges */
  --silver-light: #E4E4E4;   /* the lit edge of a bevel */
  --silver-dark:  #848484;   /* the shaded edge of a bevel */

  /* --- TITLE BARS --- */
  --title-a:      #1F3A93;   /* left end of the title bar gradient */
  --title-b:      #4A8FD4;   /* right end of the title bar gradient */
  --title-text:   #FFFFFF;

  /* --- THE PAGE ITSELF --- */
  --paper:        #F3EFE3;   /* warm off-white behind your writing */
  --paper-alt:    #E8E2D2;   /* slightly darker, for list rows and boxes */
  --ink:          #22242B;   /* main reading text */
  --ink-quiet:    #6A6A66;   /* captions, footer, small print */

  /* --- ACCENTS --- */
  --maroon:       #7A2029;   /* headings and emphasis */
  --teal:         #176C6C;   /* secondary accent */
  --mustard:      #D8A227;   /* construction stripes, highlights */
  --link:         #14349C;   /* classic unvisited blue */
  --link-visited: #6B2C91;   /* classic visited purple */
  --alert:        #B22222;   /* the blinking NEW tag */

  /* --- FONTS ---
     Tahoma does the interface furniture, Georgia does the reading. That split
     is deliberate — it's what made 2001 websites feel like 2001 websites. */
  --font-ui:    Tahoma, "MS Sans Serif", Geneva, Verdana, sans-serif;
  --font-body:  Georgia, "Times New Roman", serif;
  --font-mono:  "Courier New", Courier, monospace;

  /* --- SIZES --- */
  --text-size:     17px;    /* base font size for the whole site */
  --container-max: 720px;   /* how wide the window gets on desktop */

  /* --- SPEED DIALS ---
     Higher number = slower. Try 12s for lively, 40s for sleepy. */
  --marquee-speed: 24s;     /* scrolling banner text */
  --stripe-speed:  1.1s;    /* construction stripe crawl */
}


/* ============================================================================
   2. THE BEVEL RECIPE
   ----------------------------------------------------------------------------
   Everything 3D-looking on this site is the same trick: a 2px border where the
   top-left edges are light and the bottom-right edges are dark, which reads as
   "lit from the top-left". Flip which side is light and the thing looks pushed
   IN instead of popping OUT.

     RAISED (buttons, the window) ... light on top-left, dark on bottom-right
     SUNKEN (photo frames, inputs) .. dark on top-left, light on bottom-right

   You'll see this pattern repeated below. Now you know what it's doing.
   ========================================================================== */


/* ============================================================================
   3. DESKTOP BACKGROUND
   ----------------------------------------------------------------------------
   A soft woven crosshatch, like a tiled desktop wallpaper. Deliberately low
   contrast so it sits behind the window instead of fighting it.

   WANT YOUR bg_diamond.png BACK? It'd suit this style well. Replace the whole
   background-image and background-size blocks with:
       background-image: url('../images/bg_diamond.png');
       background-position: top;
   Or list your tile FIRST and it'll sit on top of the weave.
   ========================================================================== */

body {
  margin: 0;
  font-size: var(--text-size);
  font-family: var(--font-body);
  color: var(--ink);

  background-color: var(--desktop);
  background-image:
    repeating-linear-gradient( 45deg, var(--desktop-tile) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, var(--desktop-tile) 0 2px, transparent 2px 8px);
  background-size: 16px 16px, 16px 16px;
  background-attachment: fixed;

  /* YOUR CUSTOM CURSOR. The "0 0" is the click point (top-left corner of the
     image). The ", default" at the end is the fallback if the image ever
     fails to load. */
  cursor: url("https://unregisteredhypercameron.neocities.org/style_stuff/bn_180_cursor.png") 0 0, default;
}

/* Keeps your cursor over links and buttons too, instead of the browser
   swapping in the pointing hand. DELETE THIS RULE if you'd rather have the
   normal hand cursor on links. */
a, a:hover, button {
  cursor: url("https://unregisteredhypercameron.neocities.org/style_stuff/bn_180_cursor.png") 0 0, pointer;
}


/* ============================================================================
   4. BASIC TEXT
   ========================================================================== */

p {
  line-height: 1.65em;   /* default HTML line-height is a bit claustrophobic */
  margin: 0 0 1em;
}

h1, h2, h3, h4, h5 { line-height: 1.2; }

/* Page and post titles. Maroon Georgia with a dotted rule under it —
   restrained, so the title bars below can be the loud bit. */
h1 {
  font-family: var(--font-body);
  font-size: 1.85em;
  font-weight: bold;
  color: var(--maroon);
  margin: 0.5em 0 0.4em;
  padding-bottom: 0.25em;
  border-bottom: 3px dotted var(--silver-dark);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
}

/* SIGNATURE MOVE: every h2 renders as a little window title bar, complete
   with a close button on the right. You write a normal <h2> and get this
   for free. To go back to a plain heading, delete this rule and the
   h2::after rule below it. */
h2 {
  position: relative;
  font-family: var(--font-ui);
  font-size: 0.85em;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: var(--title-text);
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
  margin: 1.8em 0 0.7em;
  padding: 5px 30px 5px 8px;
  border: 2px solid;
  border-color: var(--silver-light) var(--silver-dark) var(--silver-dark) var(--silver-light);
}
h2::after {
  content: "×";
  position: absolute;
  top: 3px;
  right: 4px;
  width: 17px;
  height: 15px;
  line-height: 13px;
  text-align: center;
  font-size: 12px;
  color: #000;
  background: var(--silver);
  border: 1px solid;
  border-color: var(--silver-light) #000 #000 var(--silver-light);
}

h3 {
  font-family: var(--font-ui);
  font-size: 1.02em;
  color: var(--maroon);
  margin: 1.4em 0 0.4em;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--silver-dark);
}

h4, h5 {
  font-family: var(--font-mono);
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--teal);
  margin: 1.1em 0 0.3em;
}

/* Classic web link colours. Yes, they're plain. That's the point. */
a { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover { background-color: var(--mustard); color: #201800; text-decoration: none; }
/* Keyboard users need to see where they are. Please keep this. */
a:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }

strong, b { color: var(--maroon); }
em, i     { color: var(--teal); }

blockquote {
  margin: 1.2em 0;
  padding: 10px 14px;
  background: var(--paper-alt);
  border-left: 5px solid var(--teal);
  font-size: 0.95em;
}

code, pre {
  font-family: var(--font-mono);
  background: #FCFBF6;
  color: #303030;
  /* SUNKEN bevel — see SECTION 2 */
  border: 2px solid;
  border-color: var(--silver-dark) var(--silver-light) var(--silver-light) var(--silver-dark);
}
code { padding: 1px 4px; }
pre  { padding: 9px; overflow-x: auto; }

ul, ol { padding-left: 1.5em; }
li     { margin-bottom: 0.35em; }

/* A grooved divider instead of a rainbow. Two hairlines, one light one dark —
   the same bevel logic as everything else. */
hr {
  height: 0;
  border: 0;
  border-top: 1px solid var(--silver-dark);
  border-bottom: 1px solid var(--silver-light);
  margin: 1.6em 0;
}


/* ============================================================================
   5. IMAGES
   ----------------------------------------------------------------------------
   Your images stay hosted exactly where they always were. These rules only
   decorate the <img> tags already in your posts. Nothing about how you write
   a post changes — .left, .right, .center, .small and .caption all behave
   the same as they always did.
   ========================================================================== */

img {
  max-width: 100%;       /* never overflows a phone screen */
  height: auto;
  margin: 0.7em 0;
  padding: 4px;
  background: #FFFFFF;
  /* SUNKEN frame — the photo sits in a little well */
  border: 2px solid;
  border-color: var(--silver-dark) var(--silver-light) var(--silver-light) var(--silver-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

img:hover {
  border-color: var(--teal);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.32);
}

/* Small stuff — 88x31 web buttons, icons, inline images — should NOT get the
   photo frame. Add class="badge" or class="inline" to those images. */
img.badge, img.button, img.icon, img.inline {
  display: inline-block;
  margin: 2px;
  padding: 0;
  border: 1px solid var(--silver-dark);
  box-shadow: none;
}

/* --- YOUR ORIGINAL LAYOUT HELPERS --- */
.right  { float: right; margin-left: 1em; }
.left   { float: left;  margin-right: 1em; }
.center { display: block; margin-right: auto; margin-left: auto; text-align: center; }

/* .small only kicks in above 600px wide, so phones still get full-width
   photos. This rule does a lot of your mobile heavy lifting. */
@media only screen and (min-width: 600px) {
  .small { max-width: 60%; height: auto; }
}

.caption {
  margin-top: 0;
  font-size: 0.8em;
  font-style: italic;
  font-family: var(--font-ui);
  color: var(--ink-quiet);
}


/* ============================================================================
   6. THE WINDOW
   ----------------------------------------------------------------------------
   #container is the rectangle holding everything except the background. Here
   it becomes a program window, with a title bar generated purely in CSS —
   your HTML doesn't need a single extra tag.

   TO CHANGE THE TITLE BAR TEXT: edit the content: "..." line below.
   TO REMOVE THE TITLE BAR: delete the #container::before and ::after rules.
   ========================================================================== */

#container {
  position: relative;
  margin: 2em auto;
  width: 92%;
  max-width: var(--container-max);
  background-color: var(--paper);
  color: var(--ink);
  /* RAISED bevel, doubled up for a chunkier edge */
  border: 2px solid;
  border-color: var(--silver-light) #4A4A4A #4A4A4A var(--silver-light);
  box-shadow: inset 1px 1px 0 #FFFFFF,
              inset -1px -1px 0 var(--silver-dark),
              4px 4px 14px rgba(0, 0, 0, 0.4);
  padding: 3px;
}

/* The title bar itself. Change the text between the quotes. */
#container::before {
  content: "UnregisteredHyperCameron  —  Microsoft Internet Explorer";
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: bold;
  color: var(--title-text);
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
  padding: 4px 74px 4px 7px;   /* right padding leaves room for the buttons */
  margin-bottom: 3px;
}

/* The minimize / maximize / close buttons. Purely decorative. */
#container::after {
  content: "_  □  ×";
  position: absolute;
  top: 6px;
  right: 7px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: bold;
  color: #000;
  letter-spacing: 4px;
  background: var(--silver);
  padding: 1px 5px;
  border: 1px solid;
  border-color: var(--silver-light) #000 #000 var(--silver-light);
}

#content {
  padding: 14px 5% 22px 5%;
  background: var(--paper);
}


/* ============================================================================
   7. HEADER & NAV
   ----------------------------------------------------------------------------
   Zonelets injects the nav links into <div id="header">. The script.js patch
   also injects two scrolling banners in there — styled in SECTION 8.

   To change WHICH links appear, edit the navLinks array in script.js.
   To change how they LOOK, edit here.
   ========================================================================== */

#header {
  background-color: var(--silver);
  padding: 0 5%;
  border-style: solid;
  border-width: 0 0 2px 0;
  border-color: var(--silver-dark);
}

#header ul {
  list-style-type: none;
  padding: 6px 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;      /* links wrap to a second row on narrow phones */
  gap: 4px;
  justify-content: center;
}

#header li { display: inline-block; margin: 0; }

/* Toolbar buttons. RAISED bevel — see SECTION 2. */
#header li a {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.78em;
  font-weight: bold;
  letter-spacing: 0.5px;
  padding: 6px 13px;
  color: #1A1A1A;
  background-color: var(--silver);
  text-decoration: none;
  border: 2px solid;
  border-color: var(--silver-light) var(--silver-dark) var(--silver-dark) var(--silver-light);
}

/* On hover the button looks pressed IN — bevel flipped, content nudged down
   and right by a pixel. That nudge is what sells it. */
#header li a:hover {
  background-color: var(--silver-light);
  border-color: var(--silver-dark) var(--silver-light) var(--silver-light) var(--silver-dark);
  padding: 7px 12px 5px 14px;
  text-decoration: none;
}


/* ============================================================================
   8. SCROLLING BANNERS (the marquee bars)
   ----------------------------------------------------------------------------
   Styled as browser status bars. No <marquee> tag involved — that's been
   deprecated for 20 years and behaves badly on phones. This is pure CSS and
   scrolls smoothly everywhere.

   TO CHANGE THE TEXT:  edit the banner variables in script.js.
   TO CHANGE THE SPEED: edit --marquee-speed in SECTION 1.

   Classes you can mix and match on a banner:
     .mq                     required base
     .right                  scrolls left-to-right instead of right-to-left
     .fast / .slow           double speed / roughly half speed
     .silver / .navy / .sand colour schemes

   The old names .yell, .cyan and .pink still work as aliases, so if your
   script.js already uses them you don't need to change anything.
   ========================================================================== */

.mq {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  background: var(--silver);
  font-family: var(--font-ui);
  /* SUNKEN bevel, like a real status bar */
  border: 2px solid;
  border-color: var(--silver-dark) var(--silver-light) var(--silver-light) var(--silver-dark);

  /* Negative margins cancel out #header's 5% padding so banners run edge to
     edge. Delete these two lines to inset them instead. */
  margin-left: -5.5%;
  margin-right: -5.5%;
}

.mq span {
  display: inline-block;
  padding-left: 100%;      /* starts the text off-screen to the right */
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 0.62em;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #1A1A1A;
  animation: slide-left var(--marquee-speed) linear infinite;
}

.mq.right span { animation-name: slide-right; }
.mq.fast  span { animation-duration: calc(var(--marquee-speed) / 2); }
.mq.slow  span { animation-duration: calc(var(--marquee-speed) * 1.8); }

.mq.silver, .mq.yell { background: var(--silver); }
.mq.silver span, .mq.yell span { color: #1A1A1A; }

.mq.navy, .mq.cyan { background: var(--title-a); }
.mq.navy span, .mq.cyan span { color: #FFFFFF; }

.mq.sand, .mq.pink { background: var(--paper-alt); }
.mq.sand span, .mq.pink span { color: var(--maroon); }


/* ============================================================================
   9. POST LISTS & NEXT/PREV
   ========================================================================== */

#postlistdiv ul,
#recentpostlistdiv ul {
  font-size: 0.95em;
  padding: 0;
  list-style-type: none;
}

/* List rows shaded like an old file browser. */
#postlistdiv li,
#recentpostlistdiv li {
  padding: 6px 9px;
  margin-bottom: 3px;
  background: var(--paper-alt);
  border-left: 5px solid var(--teal);
  border-bottom: 1px solid var(--silver-dark);
}

#postlistdiv li:hover,
#recentpostlistdiv li:hover {
  background: #FFFDF4;
  border-left-color: var(--maroon);
}

.moreposts {
  font-size: 0.8em;
  margin-top: 0.5em;
  border-left-color: var(--mustard) !important;
}

/* The date Zonelets prints on a post page — a little sunken readout. */
#postDate {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75em;
  letter-spacing: 1.5px;
  color: #2A2A2A;
  background: #FCFBF6;
  padding: 2px 9px;
  margin-bottom: 0.7em;
  border: 2px solid;
  border-color: var(--silver-dark) var(--silver-light) var(--silver-light) var(--silver-dark);
}

#nextprev {
  text-align: center;
  margin-top: 1.6em;
  padding: 10px 6px;
  background: var(--silver);
  font-family: var(--font-ui);
  font-size: 0.85em;
  font-weight: bold;
  border: 2px solid;
  border-color: var(--silver-light) var(--silver-dark) var(--silver-dark) var(--silver-light);
}

#disqus_thread { margin-top: 1.6em; }


/* ============================================================================
   10. FOOTER
   ========================================================================== */

#footer {
  font-size: 0.78em;
  font-family: var(--font-ui);
  padding: 10px 5% 12px 5%;
  color: var(--ink-quiet);
  background: var(--silver);
  border-top: 2px solid var(--silver-dark);
  text-align: center;
}

#footer a { color: var(--link); }


/* ============================================================================
   11. DECORATION TOOLKIT
   ----------------------------------------------------------------------------
   Optional classes. Drop them into any post whenever you feel like it.

     <span class="blink">NEW!</span>
     <span class="new-tag">NEW</span>
     <hr class="hazard">
     <span class="construction"></span>
     <span class="wobble">an emoji or a little image</span>
     <div class="box">a bordered box for asides</div>
     <div class="box window" data-title="README.TXT">a box with a title bar</div>
     <a href="#" class="badge b1">MY<br>BUTTON</a>
   ========================================================================== */

/* --- ANIMATION DEFINITIONS (the engine — no need to edit these) --- */
@keyframes blink       { 50% { opacity: 0; } }
@keyframes stripes     { to { background-position: 56px 0; } }
@keyframes spin        { to { transform: rotate(360deg); } }
@keyframes bob         { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes wobble      { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes slide-left  { from { transform: translateX(100%); }  to { transform: translateX(-100%); } }
@keyframes slide-right { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.blink  { animation: blink 1.1s steps(1) infinite; }
.wobble { display: inline-block; animation: wobble 1.5s ease-in-out infinite; }
.bob    { display: inline-block; animation: bob 1.2s ease-in-out infinite; }
.spin   { display: inline-block; animation: spin 3.4s linear infinite; }

.new-tag {
  display: inline-block;
  background: var(--alert);
  color: #FFFFFF;
  font-family: var(--font-ui);
  font-size: 0.58em;
  font-weight: bold;
  padding: 1px 5px;
  letter-spacing: 1px;
  vertical-align: middle;
  animation: blink 1.1s steps(1) infinite;
}

/* Mustard-and-grey construction tape. Softer than the old yellow-and-black. */
hr.hazard {
  height: 13px;
  border: 0;
  border-top: 1px solid var(--silver-dark);
  border-bottom: 1px solid var(--silver-dark);
  background: repeating-linear-gradient(45deg,
              var(--mustard) 0 14px, #5A5348 14px 28px);
  background-size: 56px 100%;
  animation: stripes var(--stripe-speed) linear infinite;
  margin: 1.4em 0;
}

/* Under-construction bar. Use as <span class="construction"></span> */
.construction {
  display: block;
  width: 100%;
  height: 22px;
  margin: 0.6em 0;
  background: repeating-linear-gradient(45deg,
              var(--mustard) 0 11px, #5A5348 11px 22px);
  background-size: 44px 100%;
  animation: stripes 0.9s linear infinite;
  border: 2px solid;
  border-color: var(--silver-dark) var(--silver-light) var(--silver-light) var(--silver-dark);
}

/* A bordered box for asides. RAISED bevel. */
.box {
  background: var(--paper-alt);
  padding: 11px;
  margin: 1.2em 0;
  border: 2px solid;
  border-color: var(--silver-light) var(--silver-dark) var(--silver-dark) var(--silver-light);
}
.box.teal  { border-left: 5px solid var(--teal); }
.box.maroon{ border-left: 5px solid var(--maroon); }

/* A box that gets its own title bar. Write the title in the data-title
   attribute and it appears in the bar:
       <div class="box window" data-title="NOTES.TXT">...</div>   */
.box.window { padding: 0; background: var(--silver); }
.box.window::before {
  content: attr(data-title);
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: bold;
  color: var(--title-text);
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
  padding: 4px 8px;
}
.box.window > * { margin-left: 11px; margin-right: 11px; }
.box.window > *:last-child { margin-bottom: 11px; }

/* Classic 88x31 web buttons made from text — no image file needed. */
.badge {
  display: inline-block;
  width: 88px;
  height: 31px;
  margin: 2px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: bold;
  line-height: 1.05;
  text-align: center;
  padding-top: 5px;
  color: #1A1A1A;
  text-decoration: none;
  border: 1px solid var(--silver-dark);
}
.badge:hover { color: #1A1A1A; }
.b1 { background: linear-gradient(180deg, #E8CE7A, #B58E2E); }
.b2 { background: linear-gradient(180deg, #7FA9CF, #2C4E7A); color: #FFFFFF; }
.b3 { background: linear-gradient(180deg, #9CC2A8, #3E7357); color: #FFFFFF; }
.b4 { background: repeating-linear-gradient(45deg, #5A5348 0 6px, var(--mustard) 6px 12px); color: #FFFFFF; }
.b5 { background: linear-gradient(180deg, #FFFFFF, var(--silver-dark)); }


/* ============================================================================
   12. MOBILE + ACCESSIBILITY
   ----------------------------------------------------------------------------
   This section is what keeps your site pleasant on a phone. Be careful editing
   it — it's doing more work than it looks like.
   ========================================================================== */

@media only screen and (max-width: 600px) {

  body       { font-size: 16px; background-attachment: scroll; }
  #container { margin: 0.7em auto; width: 96%; }
  #content   { padding: 12px 5% 20px 5%; }

  h1 { font-size: 1.5em; }

  /* The title bar text is too long for a phone. Shorten it and tuck the
     fake buttons in closer. */
  #container::before { content: "UnregisteredHyperCameron"; padding-right: 66px; }
  #container::after  { letter-spacing: 3px; font-size: 10px; }

  img { margin: 0.6em 0; }

  /* Floats squeeze text into unreadable slivers on a phone, so wrapped
     images go full width instead. */
  .left, .right { float: none; display: block; margin: 0.7em auto; }

  #header li a { font-size: 0.74em; padding: 6px 10px; }
  /* Keep the pressed-in nudge consistent at the smaller size. */
  #header li a:hover { padding: 7px 9px 5px 11px; }

  .mq span { font-size: 0.58em; }
}

/* Respects the "reduce motion" setting people can turn on in their phone or
   OS accessibility settings. Slows everything right down and stops the
   blinking outright. Please keep this. */
@media (prefers-reduced-motion: reduce) {
  *                { animation-duration: 12s !important; }
  .blink, .new-tag { animation: none !important; }
  img              { transition: none; }
}