/* =====================================================
   Formatted & Commented CSS
   - All original rules preserved (order intact)
   - Only formatting (indentation/line breaks) and comments added
   - No property/value changes
   ===================================================== */

/* --------------
   Base: layout, colors
   -------------- */
body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  height: fit-content;
  background: #343434;
  color: #fff;
  overflow-x: hidden;
}

/* --------------
   Header
   -------------- */
header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em 2em;
  background-color: rgba(0,0,0,.7);
  font-size: 1.5em;
  font-weight: 700;
  color: #fff;
}

/* --------------
   Container & Hero
   -------------- */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2em;
}

.hero img {
  max-width: 600px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,.5);
  transition: transform .3s ease-in-out;
}

.hero img:hover {
  transform: scale(1.05);
}

/* --------------
   Overlay text
   -------------- */
.overlay-text {
  margin-top: 1em;
  font-size: 1.8em;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  text-shadow: 0 2px 5px rgba(0, 0, 0, .7);
  padding: .5em 1em;
  background: rgba(0, 0, 0, .6);
  border-radius: 8px;
}

/* --------------
   Buttons (flex)
   -------------- */
.buttons {
  margin-top: 2em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.buttons a {
  background-color: #daab75;
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none;
  padding: .8em 1.5em;
  margin: .5em;
  border-radius: 5px;
  transition: background-color .3s;
  display: inline-block;
}

.buttons a:hover {
  background-color: #b48960;
}

/* ==============================
   Responsive: max-width 768px
   ============================== */
@media (max-width:768px) {
  .overlay-text { font-size: 1.2em; }
  .hero img { max-width: 90%; }
  .buttons a { padding: .6em 1.2em; font-size: .9em; }
}

/* ==============================
   Responsive: max-width 480px
   ============================== */
@media (max-width:480px) {
  header { font-size: 1.2em; padding: .8em; }
  .overlay-text { font-size: 1em; }
  .buttons { flex-direction: column; }
  .buttons a { width: 90%; text-align: center; }
}

/* --------------
   Header & logos
   -------------- */
header {
  max-width: fit-content;
  margin: 0 auto;
}

.logo {
  font-weight: 700;
  color: rgba(255,255,255,.8);
}

div.logo {
  font-weight: 700;
  color: rgba(255,255,255,.8);
}

.buttons {
  display: block;
}

#love {
  text-align: center;
}

/* ==============================
   Responsive: max-width 480px
   ============================== */
@media (max-width:480px) {
  .buttons { flex-direction: unset; width: 10em; }
}

/* ==============================
   Responsive: max-width 768px
   ============================== */
@media (max-width:768px) {
  .buttons { display: flex; width: 15em; }
}

/* ==============================
   Responsive: min-height 667px
   ============================== */
@media (min-height:667px) {
  body {
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
    flex-direction: column;
    margin: 1rem auto 1rem auto;
  }
  html { overflow: hidden; }
}

/* ==============================
   Responsive: max-width 768px
   ============================== */
@media (max-width:768px) {
  body { display: block!important; }
}

/* --------------
   Misc borders
   -------------- */
#xboarder {
  border: gold 4px solid;
}

/* ==============================
   Responsive: min-height 1px
   ============================== */
@media (min-height:1px) {
  body { display: block!important; }
}

/* --------------
   Typography
   -------------- */
h2 {
  font-size: 1.8rem;
  margin: auto;
}

.hero img {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,.5);
  display: block;
  max-width: 600px;
  transition: transform .3s ease-in-out;
  width: 100%;
}

.highlight {
  -webkit-text-stroke-color: #fff;
  -webkit-text-stroke: .3px;
  background-color: #000;
  font-size: 14px;
  font-weight: 700;
  margin: -.75rem auto;
  max-width: 22.9em;
  padding: .75rem .25rem;
}

.logo {
  color: #fff!important;
}

.padded-box {
  padding: .25em!important;
  text-wrap: auto;
}

/* --------------
   Underline image
   -------------- */
.underline-image {
  border-radius: 12px;
  border: 2px solid #1e90ff;
  display: block;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.underline-image:hover {
  border-color: #00bfff;
  box-shadow: 0 0 12px #1e90ff;
}

/* ==============================
   Responsive: max-width 480px
   ============================== */
@media (max-width:480px) {
  .highlight { font-size: .88em; }
  .logo { max-width: 14.8em; }
}

/* ==============================
   Responsive: max-width 768px
   ============================== */
@media (max-width:768px) {
  h2 { font-size: 1rem; margin: auto; }
}

/* --------------
   Highlight blocks
   -------------- */
div.highlight {
  margin-top: 1.25rem;
  display: block;
}

div.highlight {
  max-width: 329px;
}

/* --------------
   Themed links & dog
   -------------- */
#dog {
  color: rgba(255,255,255,.9);
  text-shadow: 0 2px 5px rgba(0, 0, 0, .7);
  text-decoration: none;
}

/* --------------
   Fullscreen centering
   -------------- */
body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --------------
   Buttons (grid)
   -------------- */
.buttons {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
  max-width: 400px;
  width: 90%;
}

.buttons a {
  background-color: #daab75;
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none;
  padding: 1em 0;
  text-align: center;
  border-radius: 5px;
  transition: background-color .3s;
  display: block;
  margin: unset;
}

/* --------------
   Texted element
   -------------- */
#texted {
  max-width: fit-content;
  margin: auto;
  padding: 1px .1rem;
  font-weight: 400!important;
}

#texted {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 1.8rem;
  font-weight: 300;
}

#largertext {
  color: gold;
  font-size: inherit;
}

/* ==============================
   Responsive: max-width 468px
   ============================== */
@media (max-width:468px) {
  .buttons { justify-content: center; justify-items: center; }
}

/* ==============================
   Responsive: max-width 468px
   ============================== */
@media (max-width:468px) {
  .buttons { grid-template-columns: repeat(2,1fr); }
}

/* ==============================
   Responsive: min-height 1000px
   ============================== */
@media (min-height:1000px) {
  html { zoom: 1.2; }
}

/* ==============================
   Responsive: min-height 1300px
   ============================== */
@media (min-height:1300px) {
  html { zoom: 1.3; }
}

/* --------------
   Larger text & doc sizing
   -------------- */
#largertext, div.highlight.logo {
  font-size: 1rem;
  line-height: 1;
}

body, html {
  min-height: fit-content!important;
  height: auto!important;
  width: 100%!important;
  margin: 0!important;
}

section.c2 {
  display: block;
}

span.c1 {
  text-decoration: none;
}

/* --------------
   Button grid (alt)
   -------------- */
.button-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(2, auto);
  gap: 10px;
}

.button-grid a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 5em;
}

.buttons {
  height: fit-content;
  width: fit-content;
}

/* ==============================
   Responsive: min-width 768px
   ============================== */
@media (min-width:768px) {
  h2 { font-size: .8em; }
}

/* --------------
   Glass buttons
   -------------- */
.glass {
  color: rgba(128,0,32,1)!important;
  background-color: rgba(218, 171, 117, .9)!important;
}

/* --------------
   Pattern background
   -------------- */
body, html {
  background-image: url(https://www.inconsequential.org/files/1234567/img/pattern-tile.png);
  background-repeat: repeat;
  background-size: 3px;
}

/* --------------
   Center page transform
   -------------- */
html {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: unset;
  width: 99vw;
}

/* ==============================
   Responsive: min-width 1900px landscape
   ============================== */
@media (min-width:1900px) and (orientation:landscape) {
  html {
    zoom: 1;
    overflow: hidden!important;
    height: auto!important;
    width: fit-content!important;
    max-height: 100vh!important;
  }
  body {
    min-height: 75vh;
    min-width: 99vw;
  }
}

/* --------------
   Body sizing & gradient
   -------------- */
body {
  min-height: 100%;
  min-width: 100%;
}

body, html {
  background: -webkit-linear-gradient(45deg,#1a1a1a 0,#2d2d2d 25%,#1a1a1a 50%,#404040 75%,#1a1a1a 100%)!important;
  background: linear-gradient(45deg,#1a1a1a 0,#2d2d2d 25%,#1a1a1a 50%,#404040 75%,#1a1a1a 100%)!important;
  display: block;
  height: 100%!important;
  width: 100%!important;
}

/* --------------
   Header tweak & text size
   -------------- */
header { margin-top: 1px; }
#largertext { font-size: .9rem; }

/* ==============================
   Responsive: tiny portrait
   ============================== */
@media (max-height:1345px) and (max-width:320px) and (orientation:portrait) {
  html {
    left: unset;
    overflow: visible;
    position: relative;
    top: 1px;
    transform: none!important;
    zoom: .8!important;
  }
}

/* ==============================
   Responsive: small portrait image
   ============================== */
@media (max-height:850px) and (max-width:400px) and (orientation:portrait) {
  .hero img { max-width: 200px; }
}

/* ==============================
   Responsive: hide noteded nav
   ============================== */
@media (max-width:1000px) {
  nav.noteded { display: none; }
}

/* ==============================
   Responsive: zoom big height
   ============================== */
@media (min-height:1000px) {
  html { zoom: 1.7!important; }
}

/* ==============================
   Responsive: >=1000px layout helpers
   ============================== */
@media (min-width:1000px) {
  a.glass2 { margin: 1rem; width: 20em; }
  a.glass3 { float: right; height: 10em; margin: 1rem; }
  a.glass4 { float: right; height: 10em; margin: 1rem; }
  a.glass6 { float: left; height: 10em; margin: 1rem; }
  a.glass7 { float: left; height: 10em; margin: 1rem; }
  main.container { padding-top: 1px; }
  nav.btt { display: grid; margin: 0 auto!important; }
  nav.btt2 { display: block; float: right; margin-top: -.5rem; }
  nav.btt4 { display: block; float: left; margin-top: -.5rem; }
  nav.noted { display: none; }
  .button-grid { display: flex; }
}

/* ==============================
   Responsive: 1000px+ tall landscape
   ============================== */
@media (min-width:1000px) and (min-height:1079px) and (orientation:landscape) {
  html {
    left: unset;
    margin: auto!important;
    position: relative;
    top: unset;
    transform-origin: unset;
    transform: none!important;
    translate: unset;
    zoom: 1.75!important;
  }
  #rrr { display: none; }
}

/* ==============================
   Responsive: 1000px+ medium-height landscape
   ============================== */
@media (min-width:1000px) and (min-height:700px) and (max-height:1000px) and (orientation:landscape) {
  html {
    left: unset;
    margin: auto!important;
    position: relative;
    top: unset;
    transform-origin: unset;
    transform: none!important;
    translate: unset;
    zoom: 1.25!important;
  }
  #rrr { display: none; }
}

/* ==============================
   Responsive: ultra-wide landscape (zoom)
   ============================== */
@media (min-width:2400px) and (min-height:1100px) and (orientation:landscape) {
  html { zoom: 2.1!important; }
}

/* --------------
   Heading & spans
   -------------- */
h2.c3 { word-spacing: 1px; letter-spacing: 1px; }
span.c2 { color: red; word-spacing: normal; letter-spacing: normal; }
span.c1 { word-spacing: -.11px; }
#lnk { text-decoration: none; color: red; }

/* ==============================
   Responsive: >=999px background combo
   ============================== */
@media (min-width:999px) {
  body, html {
    background: url(https://www.inconsequential.org/files/1234567/img/iart2.webp),
                linear-gradient(45deg,#1a1a1a 0,#2d2d2d 25%,#1a1a1a 50%,#404040 75%,#1a1a1a 100%)!important;
    background-repeat: no-repeat, repeat!important;
    background-position: center;
    background-size: 50%, auto!important;
    background-origin: padding-box!important;
    background-position-x: 50%!important;
    background-position-y: 30%!important;
  }
}

/* ==============================
   Responsive: portrait mid-height
   ============================== */
@media (min-height:807px) and (orientation:portrait) and (max-height:1023px) {
  body { padding-top: 12.5vh; }
  html { font-size: 21px!important; }
  nav.buttons.button-grid.noted { font-size: .83rem; }
}

/* ==============================
   Responsive: portrait small/mid height
   ============================== */
@media (min-height:694px) and (orientation:portrait) and (max-height:806px) and (min-width:320px) {
  body { padding-top: 5vh; }
  html { font-size: 18px!important; }
  nav.buttons.button-grid.noted { font-size: .75rem; }
}

/* ==============================
   Responsive: small screens portrait
   ============================== */
@media (max-height:699px) and (max-width:500px) {
  html {
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
  }
  body { padding-top: 1px; }
}

/* ==============================
   Responsive: hide #rrr (wide)
   ============================== */
@media (min-width:1000px) and (min-height:595px) and (max-height:2000px) {
  #rrr { display: none; }
}

/* ==============================
   Responsive: narrow landscape special
   ============================== */
@media (min-width:2px) and (max-width:999px) and (min-height:100px) and (max-height:768px) and (orientation:landscape) {
  body, html {
    overflow: visible!important;
    min-height: 100%!important;
    zoom: 1!important;
    background: gray!important;
  }
}

/* --------------
   Repeated heading & spans (kept)
   -------------- */
h2.c3 { word-spacing: 1px; letter-spacing: 1px; }
span.c2 { color: red; word-spacing: normal; letter-spacing: normal; }
span.c1 { word-spacing: -.11px; }
#lnk { text-decoration: none; color: red; }

/* --------------
   Center wrappers
   -------------- */
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.content-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* --------------
   Footer blocks
   -------------- */
#ftc1 {
  margin: 0 auto;
  text-align: center;
  background-color: #000;
}

#ftc2 {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  color: #fff;
}

/* ==============================
   Responsive: >=999px background combo (dup)
   ============================== */
@media (min-width:999px) {
  body, html {
    background: url(https://www.inconsequential.org/files/1234567/img/iart2.webp),
                linear-gradient(45deg,#1a1a1a 0,#2d2d2d 25%,#1a1a1a 50%,#404040 75%,#1a1a1a 100%)!important;
    background-repeat: no-repeat, repeat!important;
    background-position: center;
    background-size: 50%, auto!important;
    background-origin: padding-box!important;
    background-position-x: 50%!important;
    background-position-y: 30%!important;
  }
}

/* ==============================
   Responsive: portrait mid-height (alt)
   ============================== */
@media (min-height:807px) and (orientation:portrait) and (max-height:1023px) {
  body { padding-top: 5vh; }
  html { font-size: 16px!important; }
  nav.buttons.button-grid.noted { font-size: .83rem; }
}

/* ==============================
   Responsive: portrait small/mid height (alt)
   ============================== */
@media (min-height:694px) and (orientation:portrait) and (max-height:806px) and (min-width:320px) {
  body { padding-top: 5vh; }
  html { font-size: 16px!important; }
  nav.buttons.button-grid.noted { font-size: .75rem; }
}

/* ==============================
   Responsive: small screens portrait (alt)
   ============================== */
@media (max-height:699px) and (max-width:500px) {
  html { position: relative; top: unset; left: unset; transform: unset; }
  body { padding-top: 1px; }
}

/* ==============================
   Responsive: hide #rrr (wide) (alt)
   ============================== */
@media (min-width:1000px) and (min-height:595px) and (max-height:2000px) {
  #rrr { display: none; }
}

/* ==============================
   Responsive: narrow landscape special (blue)
   ============================== */
@media (min-width:2px) and (max-width:999px) and (min-height:100px) and (max-height:768px) and (orientation:landscape) {
  body, html {
    min-height: max-content!important;
    overflow: visible!important;
    min-height: 100%!important;
    zoom: 1!important;
    background: #4682b4!important;
  }
}

/* ==============================
   Responsive: >=1000px footer width
   ============================== */
@media (min-width:1000px) {
  footer { max-width: fit-content; }
}

/* ==============================
   Responsive: portrait small image (alt)
   ============================== */
@media (max-height:850px) and (max-width:400px) and (orientation:portrait) {
  .hero img { max-width: fit-content; }
}

/* ==============================
   Responsive: >=1000px wrapper widths
   ============================== */
@media (min-width:1000px) {
  .center-container { align-items: center; justify-content: center; }
  .content-wrapper { max-width: 1000px; }
}

/* ==============================
   Responsive: <=999px portrait wrappers
   ============================== */
@media (max-width:999px) and (orientation:portrait) {
  .center-container { align-items: center; justify-content: center; }
  .content-wrapper { width: 100%; max-width: 1200px; padding: 15px; }
}

/* ==============================
   Responsive: <=999px landscape wrappers
   ============================== */
@media (max-width:999px) and (orientation:landscape) {
  .center-container { align-items: flex-start; padding-top: 20px; }
}

/* ==============================
   Responsive: >=1000px landscape background size
   ============================== */
@media (min-width:1000px) and (orientation:landscape) {
  body {
    background-position-x: 50%!important;
    background-position-y: 50%!important;
    min-height: fit-content!important;
    background-size: 45%, auto!important;
  }
}

/* ==============================
   Responsive: portrait very small
   ============================== */
@media (max-height:850px) and (max-width:400px) and (orientation:portrait) {
  .hero img { max-width: 200px; }
  .content-wrapper { padding-top: 1px; }
  footer { padding: 1em; font-size: .9em; }
}

/* ==============================
   Responsive: portrait 376–999px
   ============================== */
@media (max-width:999px) and (min-width:376px) and (min-height:741px) and (orientation:portrait) {
  footer { bottom: 1px; position: absolute; min-width: 100%; padding: 1em 0; }
  .content-wrapper { padding: 0; }
  body { padding-top: 0; }
}

/* ==============================
   Responsive: portrait <=375px
   ============================== */
@media (min-width:2px) and (max-width:375px) and (max-height:740px) and (orientation:portrait) {
  footer { bottom: 1px; position: absolute; min-width: 100%; padding: 1em 0; }
  .content-wrapper { padding: 0; }
  body { padding-top: 0; }
}

/* ==============================
   Responsive: >=1000px navigation wrapper
   ============================== */
@media (min-width:1000px) {
  .navigation-wrapper {
    padding: 1px;
    margin-bottom: 1px;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
  }
}

/* --------------
   Padding tweaks
   -------------- */
#love, div.logo, header {
  padding: .2rem!important;
}

/* ==============================
   Responsive: <=999px portrait tweaks
   ============================== */
@media (max-width:999px) and (min-width:100px) and (min-height:100px) and (orientation:portrait) {
  footer { bottom: 1px!important; position: absolute; padding: 1em 0; width: 100%; }
  .content-wrapper { padding: 1px!important; }
  section.hero { zoom: 1.2; }
  nav.buttons.button-grid.noted { font-size: .95rem!important; }
  body { overflow-y: visible!important; }
  div.highlight.logo.padded-box { zoom: 1.05; }
}

/* ==============================
   Responsive: >=1000px landscape nav spacing
   ============================== */
@media (min-width:1000px) and (orientation:landscape) {
  .center-container { height: 100%; }
  body { background-size: 520px!important; }
  .navigation-wrapper { margin-top: 1rem; }
  nav.btt2, nav.btt4 { margin-top: -2.2rem; }
}

/* ==============================
   Responsive: min-height 1000px (alt zoom)
   ============================== */
@media (min-height:1000px) {
  html { zoom: 1.25!important; }
}

/* ==============================
   Responsive: portrait hide #ftc1
   ============================== */
@media (min-height:694px) and (orientation:portrait) and (max-height:806px) and (min-width:320px) {
  #ftc1 { display: none; }
}

/* ==============================
   Responsive: small displays hide footer
   ============================== */
@media (max-height:699px) and (max-width:500px) {
  footer { display: none; }
}

/* ==============================
   Responsive: ultra-wide landscape (dup)
   ============================== */
@media (min-width:2400px) and (min-height:1100px) and (orientation:landscape) {
  html { zoom: 2.1!important; }
}