* {
   box-sizing: border-box;
}
:root {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   background: white;
   color: #111827;
}
body {
   margin: 0;
   padding: 0.5rem;
   background: #ffffff;
}
.page {
   width: min(1060px, 92vw);
   margin: 0 auto;
   border: 3px solid #0f172a;
   padding: 0.35rem;
   background: #f9fafb;
}
.layout-grid {
   display: grid;
   gap: 0.3rem;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   grid-template-areas:
      "mast mast mast mast"
      "nav nav nav nav"
      "hero hero card-a sidebar"
      "hero hero card-b sidebar"
      "footer footer footer footer";
   border: 2px solid #0f172a;
   background: #f9f4ea;
   padding: 0.3rem;
}
.mast, .nav, .hero, .card, .sidebar, .footer {
   border: 2px dashed #f3f1e8;
   border-radius: 0;
   background: #f0ebdf;
   color: #202e39;
}
.mast {
   grid-area: mast;
   background: #0f172a;
   color: #f8fafc;
   text-align: center;
   padding: 0.5rem 0.2rem;
   font-size: 0.75rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
}
.nav {
   grid-area: nav;
   background: #ebe6d5;
   border: 2px dashed #f3f1e8;
   text-align: center;
   padding: 0.5rem;
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.12em;
}
.hero {
   grid-area: hero;
   padding: 1rem;
   border: 2px dashed #f3f1e8;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.hero h2 {
   margin: 0;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-size: 1.2rem;
   color: #1f2937;
}
.hero p {
   margin: 0.35rem 0 0;
   font-size: 0.95rem;
   color: #334155;
}
.card {
   padding: 0.6rem;
   border: 2px dashed #f3f1e8;
   background: #f0ebdf;
}
.card h3 {
   margin: 0;
   text-transform: uppercase;
   font-size: 0.9rem;
   letter-spacing: 0.06em;
   text-align: center;
}
.card p {
   margin: 0.4rem 0 0;
   font-size: 0.84rem;
   color: #334155;
}
.card-a {
   grid-area: card-a;
}
.card-b {
   grid-area: card-b;
}
.sidebar {
   grid-area: sidebar;
   padding: 0.6rem;
   border: 2px dashed #f3f1e8;
   background: #f0ebdf;
   text-align: center;
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}
.footer {
   grid-area: footer;
   margin-top: 0.1rem;
   background: #0f172a;
   color: #f8fafc;
   border: 2px dashed #0f172a;
   text-align: center;
   padding: 0.45rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   font-size: 0.8rem;
}
.hint {
   text-align: center;
   margin: 0.4rem 0 0;
   color: #334155;
   text-transform: uppercase;
   font-size: 0.72rem;
   letter-spacing: 0.12em;
}
.mobile-only {
   display: none;
}
@media (max-width: 650px) {
   .mobile-only { display: block; }
}
@media (max-width: 900px) {
   .layout-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
         "mast mast"
         "nav nav"
         "hero hero"
         "card-a card-b"
         "sidebar sidebar"
         "footer footer";
   }
   .hero { min-height: 140px; }
}
@media (max-width: 650px) {
   body { padding: 0.3rem; }
   .page { border-width: 2px; }
   .layout-grid {
      grid-template-columns: 1fr;
      grid-template-areas:
         "mast"
         "nav"
         "hero"
         "card-a"
         "card-b"
         "sidebar"
         "footer";
      padding: 0.2rem;
   }
   .mast, .nav, .hero, .card, .sidebar, .footer { border: 2px dashed #f3f1e8; }
   .hint { margin-top: 0.35rem; }
}