/* nancyhopkinsreily.com — small-screen layer (added 2026-10-20 with the static conversion).
   Applies only at <=768px wide; the desktop layout (nancy.css) is untouched. */
@media screen and (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-width: 0; font-size: 1.6em; line-height: 1.55; background: #fff url(/img/bg-header.gif) repeat-x 50% 0; }
  img { max-width: 100%; height: auto; }
  #wrapper { overflow: visible; }
  .page-holder, .page-frame { width: auto; float: none; left: auto; }
  .page { background: none; overflow: visible; }
  .page-container { margin: 0; width: auto; background: #fff; }
  .page-section { width: auto; }
  .page-include { float: none; margin: 0; }

  /* logo + nav */
  .logo-holder { position: static; text-align: center; padding: 6px 0 0; }
  .logo { float: none; display: inline-block; width: 110px; height: 150px; background-size: 110px auto; }
  #header { width: auto; overflow: visible; padding: 8px 10px 12px; }
  #nav { float: none; width: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  #nav li { float: none; margin: 0; display: block; }
  #nav li a, #nav li a.home, #nav li a.about, #nav li a.books, #nav li a.writing, #nav li a.blog, #nav li a.contact {
    float: none; display: block; width: auto; height: auto; min-height: 44px; line-height: 44px; padding: 0 14px;
    text-indent: 0; overflow: visible; background: #f3efe6; border: 1px solid #c3b5a1; border-radius: 4px;
    font: 15px/44px Arial, Helvetica, sans-serif; color: #766c55; text-decoration: none; }
  #nav li a:hover, #nav .active a, #nav .active a:hover { background: #932c36; border-color: #932c36; color: #fff; }

  /* main column */
  #main { width: auto; padding: 0 12px 24px; overflow: visible; }
  .visual, .visual-inner { width: auto; margin: 0 0 12px; }
  #top-feature { height: auto !important; width: auto !important; margin-left: 0; position: relative; aspect-ratio: 942 / 277; overflow: hidden; }
  #top-feature img, #top-feature a { width: 100% !important; height: auto !important; }
  .blocks { width: auto; padding: 0; overflow: visible; }
  .block-about, .block-books, .block-blog { float: none; width: auto; margin: 0 0 24px; }
  .blocks h2 { font-size: 22px; line-height: 1.3; }
  .books-list { width: auto; }
  .books-list li { width: 46%; height: auto; vertical-align: top; margin: 0 2% 12px 0; }
  .books-list li p { width: auto; font-size: 14px; line-height: 1.3; }
  .block-blog .list { width: auto; margin: 6px 0 8px 0; }
  .block-blog .list li { font-size: 16px; line-height: 1.4; margin: 0 0 4px; padding-left: 12px; background-position: 0 10px; }
  .block-blog .list li a { display: block; padding: 10px 0; }
  .block-blog .box, .box .box-holder, .box .box-frame, .box .box-container { width: auto; margin-left: 0; }
  .block-blog .box { background: none; padding: 0; }
  .box .box-holder, .box .box-frame { background: none; padding: 0; }
  .box .box-container { padding: 12px 16px; line-height: 1.5; }
  .facebook a { display: inline-block; min-height: 44px; line-height: 44px; }
  .button { float: none; display: inline-block; width: auto; min-width: 148px; min-height: 44px; line-height: 44px; padding: 0 16px;
    font-size: 13px; background: #8f846c; border-radius: 4px; box-sizing: border-box; }
  a.button, a.button:link, a.button:visited { color: #fff; text-decoration: none; }
  a.button:hover { color: #fff; background: #766c55; }

  /* inner pages: content + sidebar stack */
  #content-wrap { width: auto; margin: 0; }
  #content, #content[style] { width: auto !important; float: none; border-right: 0; padding-right: 0; min-height: 0; }
  #content h1 { font-size: 28px; line-height: 1.2; }
  #content p, .entry p, #right p, #right ul li { font-size: 16px; line-height: 1.55; }
  .entry { font-size: 16px; line-height: 1.55; }
  #right-wrap { width: auto; float: none; margin-top: 1.5em; border-top: 1px dotted #c4c4c4; padding-top: 1em; }
  .photo-sets { margin-left: 0; margin-top: 0; }
  .photo-single-r, .photo-single-l { max-width: 45%; }
  .covers-home { float: none; width: auto; min-height: 0; margin: 0 0 20px; }
  .covers img { max-width: 40%; }
  #blogtitle { width: auto; float: none; }
  .P13 { text-indent: 1em; } .P14 { text-indent: 2em; } .P15 { text-indent: 3em; } .P16 { text-indent: 4em; }
  .P17 { margin-left: 2em; text-indent: -1em; }
  #content table, #content iframe, #content object, #content embed { max-width: 100%; }
  #content pre { white-space: pre-wrap; }

  /* forms: full width, 16px text (no iOS zoom), 44px targets */
  .contactForm, .contactSide { padding: 0; margin: 12px 0; font-size: 16px; line-height: 1.4; }
  .contactForm ul label, .contactSide ul label { float: none; width: auto; padding: 8px 0 2px; }
  .contactForm .txtField, .contactSide .txtField { float: none; width: 100%; box-sizing: border-box; min-height: 44px; font-size: 16px; padding: 8px; }
  .contactForm ul li, .contactSide ul li { padding: 4px 0 8px; }
  .contactForm div[style*="margin-left"], .contactSide div[style*="margin-left"] { margin-left: 0 !important; }
  .contactForm .button, .contactSide .button { display: block; width: 100%; text-align: center; }
  .pd-turnstile { margin: 12px 0 !important; max-width: 100%; }

  #footer .holder { width: auto; padding: 16px 12px; font-size: 13px; line-height: 1.5; background-size: auto; }
  #designcredit { float: none; }
  #footer a { display: inline-block; min-height: 44px; line-height: 44px; }
}