/* home-mobile.css — the HOMEPAGE's own mobile SITE (loaded in place of responsive.css for .IsHome).
   NOT a reflow of the desktop. A dense antique COLLAGE in the site's OWN palette (cream + dark-brown
   ink, B&W dithered photos): the real desktop content/components (welcome essay, calendar, audio
   player, buttons) are reused verbatim but recomposed for the phone as an illuminated
   commonplace-book of double-ruled "leaves". Square corners, Times, no emoji, no rewritten text.
   The DESKTOP homepage is unchanged (this file carries over responsive.css's global tail).
   NOTE: floating ornaments intentionally removed for now — art treatment being decided with owner. */

/* ---- carried over VERBATIM from responsive.css's global tail (all widths → desktop unchanged) ---- */
.hamburger { display: none !important; }
.mobile-featured-widget { display: none !important; }
img { max-width: 100%; height: auto; }
.on-this-day-widget { grid-column: 1 / -1; width: 100% !important; box-sizing: border-box; }
.on-this-day-content { padding: 8px; }
.otd-entry { display: block; margin-bottom: 4px; font-size: 11px; }
.otd-year, .otd-type { display: inline; min-width: auto; font-size: 11px; }
.otd-year::after { content: " "; }
.otd-type::after { content: ": "; }
.otd-entry a { display: inline; font-size: 11px; }
.name-header { font-size: 11px !important; padding: 4px !important; }

/* ============================ PHONE — the collage (≤600px) ============================ */
@media screen and (max-width: 600px) {

  /* ---------- the page: the site's own cream, dark-brown ink ---------- */
  body {
    width: 100%; max-width: 100%; margin: 0; padding: 0 0 10px; box-sizing: border-box;
    overflow-x: hidden;
    background-color: var(--cream);
    color: var(--darkbrown);
  }

  /* ---------- COVER: the vanitas plate (B&W, as on desktop) ---------- */
  .header-image {
    display: block; width: calc(100% - 24px); height: 172px; object-fit: cover;
    object-position: center 38%;
    margin: 18px auto 0 !important;
    border: 1px solid var(--darkbrown);
    box-shadow: 0 0 0 5px var(--cream), 0 0 0 6px var(--darkbrown);
    filter: contrast(1.05);
  }

  /* ---------- MASTHEAD ---------- */
  .header { flex-direction: column; width: 100%; position: static; margin-top: 22px; }
  .left-header {
    width: 100%; border: none !important; text-align: center; padding: 4px 6px 0;
    font-weight: bold; font-size: 20px; letter-spacing: 3px;
  }

  /* ---------- NAV — an engraved table of contents ---------- */
  .right-header {
    width: calc(100% - 24px); margin: 12px auto 0; display: grid;
    grid-template-columns: 1fr 1fr; position: static;
    border: 3px double var(--darkbrown); background: rgba(255,255,255,.4);
  }
  .right-header .nav-link {
    width: auto; text-align: center;
    border-right: 1px dotted var(--darkbrown); border-bottom: 1px dotted var(--darkbrown);
  }
  .right-header .nav-link:nth-child(2n) { border-right: none; }
  .right-header .nav-link:nth-last-child(-n + 2) { border-bottom: none; }
  .right-header .nav-link a { padding: 11px 6px; font-size: 14px; letter-spacing: 1px; }

  /* ---------- THE FOLD: welcome -> identity -> almanac/ledger/wall ---------- */
  .content { display: flex; flex-direction: column; width: 100%; }
  .right, .main-content { display: contents; }
  .main-content-left  { order: 1; }
  .main-content-right { order: 2; width: 100%; border-left: none; }
  .left               { order: 3; width: 100%; border: none; }

  /* shared "illuminated leaf": a double-ruled card */
  .main-content-left, .about, .calendar-widget, .on-this-day-widget, .neighbors-widget {
    width: calc(100% - 24px) !important; margin: 22px auto 0; box-sizing: border-box;
    border: 3px double var(--darkbrown); background: rgba(255,255,255,.5);
    padding: 16px 14px; position: relative;
  }

  /* ---------- WELCOME leaf — featuring the La Vita Nouva wordmark, large ---------- */
  .main-content-left > img {           /* welcome.png — the hero title (442px native) */
    display: block; margin: 8px -8px 18px !important; width: calc(100% + 16px); max-width: 442px; height: auto;
  }
  .welcome { padding: 0; text-align: justify; font-size: 15px; line-height: 1.66; }
  .welcome p { margin: 0 0 1em; }
  .welcome blockquote { margin: 0 0 1em 1em; font-style: italic; }
  .welcome::before {                   /* a framed pressed rose the text flows around */
    content: ""; float: right; width: 96px; height: 120px; margin: 3px 0 8px 14px;
    background-image: url(/media/images/ornaments/rose-botanical.png);
    background-position: center; background-size: cover; background-repeat: no-repeat;
    background-color: #e7e7e4; background-blend-mode: luminosity;
    border: 1px solid var(--darkbrown); box-shadow: 2px 2px 0 rgba(25,5,3,.22);
    transform: rotate(2deg); shape-outside: margin-box;
  }

  /* ---------- IDENTITY leaf ---------- */
  .about { display: block; }
  .about > img {                       /* lr0 portrait — fills the leaf, mounted like a plate (B&W) */
    display: block; width: 100%; max-width: none; margin: 6px 0 14px; height: auto;
    border: 1px solid var(--darkbrown);
    box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px var(--darkbrown);
    filter: contrast(1.05);
  }
  .about-desc { text-align: center; border: none !important; font-style: italic; }
  #github-activity { margin-top: 8px; }
  .about-statuses { margin-top: 14px; border: 1px dotted var(--darkbrown); padding: 8px 10px; }
  .about-status { padding: 5px 0; }
  .about-status img { width: 16px; height: 16px; vertical-align: middle; margin-right: 7px; }
  .audio-player { width: 100%; margin: 14px 0 4px; }
  .about .featured-image { width: 100%; height: auto; overflow: hidden;
    border-top: 1px dotted var(--darkbrown); margin-top: 14px; }
  .about .featured-image img { width: 100%; height: auto; display: block; }

  /* ---------- ALMANAC (calendar) — fills the leaf edge-to-edge ---------- */
  #calendar { display: block; width: 100%; }
  #calendar section { width: 100%; }
  #calendar h1 { text-align: center; font-size: 16px; margin: 0 0 8px; }
  #calendar table { width: 100% !important; max-width: none; }
  #calendar td { max-width: none !important; width: 14.28%; padding: 12px 0; text-align: center; font-size: 14px; }
  .calendar-buttons { display: flex; width: 100%; margin: 8px 0 0; }
  .calendar-buttons button { flex: 1; width: auto !important; padding: 11px; font-size: 16px; }

  /* ---------- THE STAMP WALL (buttons & propaganda) ---------- */
  .neighbors { border: none; }
  .neighbors-buttons {
    min-height: 0; max-height: none; overflow: visible;
    display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; padding-top: 6px;
  }
  .neighbors-buttons img { width: auto; height: auto; }

  /* ---------- FOOTER ---------- */
  .footer { flex-direction: column; width: 100%; position: static; border: none;
    margin-top: 22px; padding-bottom: 20px; }
  .footer-left, .footer-middle, .footer-right {
    width: 100%; border: none !important; text-align: center; padding: 3px;
  }
}