/* ============================================================
   wyo.town / homepage
   Layered on brand/brand.css (sheet 001, rev B). This file adds
   only the components the homepage needs: the masthead, the four
   numbered steps, the numbered product entry and its hero, and the
   section statement.

   House rules held here:
     - one field per sheet, one accent per sheet
     - rules, not shadows; dither is the only texture
     - type is ink or snow, never a third color per sheet
   ============================================================ */

/* ------------------------------------------------------------
   the masthead
   ------------------------------------------------------------ */

.masthead .mast {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 34px;
  padding-left: 150px;
}

.mast-copy { min-width: 0; }

.mast-copy .sign {
  margin-top: 6px;
  font-size: 92px;
}

.mast-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 26px;
}

.mast-meta { opacity: 0.8; }

/* the desert masthead: a sand field with the pricklypear standing on it.
   Type is INK on sand (house rule: type is ink or snow, never a third
   color), so the plant's green pads and amber fruit are the only color in
   the scene. */
.masthead { overflow: visible; }

/* the saguaro bleeds off the left edge of the field, so the page itself
   must not grow a horizontal scrollbar to chase it. */
html { overflow-x: clip; }

.masthead .mast .brand,
.masthead .mast-copy .sign,
.masthead .mast-bottom .placard { color: var(--ink); }
.masthead .mast-meta { color: var(--ink); opacity: 0.72; }

/* the plant, standing in the sand at the right of the field. The bottom
   line of type is held clear of it so the two don't collide. */
.mast-bottom { padding-left: 150px; padding-right: 150px; }

.mast-cactus {
  position: absolute;
  right: -14px;
  bottom: -16px;
  width: 150px;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* the saguaro is the tall one, planted at the left of the field and free
   to run up into the banner and off the trim. The bottom line of type is
   held clear of it so the two don't collide. It sways into the wind. */
.mast-saguaro {
  position: absolute;
  left: -140px;
  bottom: -20px;
  width: 400px;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* the still is the fallback for reduced motion; the sway is the default */
.mast-cactus--still { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mast-cactus--sway { display: none; }
  .mast-cactus--still { display: block; }
  .mast-fish { animation: none; }
}

/* the fish is not of the desert but visits often, drifting across the
   sky of the masthead on a slow bob between the saguaro and the pear */
.mast-fish {
  position: absolute;
  top: -78px;
  right: 132px;
  width: 132px;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  animation: mast-fish-float 7s ease-in-out infinite;
}

@keyframes mast-fish-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-16px) rotate(3deg); }
}

/* the tuna can, likewise off its shelf: a small still life in the banner
   sky on the left of the field, balancing the fish on the right */
.mast-tuna {
  position: absolute;
  top: -72px;
  left: 251px;
  width: 82px;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* ------------------------------------------------------------
   the section head, with the field's one accent as the rule
   ------------------------------------------------------------ */

.section-head[style*="--accent"] {
  border-bottom-color: var(--accent, currentColor);
}

.section-head .section-no { color: var(--accent, currentColor); opacity: 1; }

/* a lede needs air before the body that follows it */
.lede { margin-bottom: 14px; }

/* ------------------------------------------------------------
   an entry name that opens its product page
   ------------------------------------------------------------ */

.entry-link { color: inherit; text-decoration: none; }
.entry-link:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 5px; }

/* ------------------------------------------------------------
   the statement: the thesis of a section, set at placard size
   (the same voice and size as "Super Intelligence" in the masthead)
   ------------------------------------------------------------ */

.statement {
  max-width: 26ch;
  margin: 4px 0 16px;
}

/* ------------------------------------------------------------
   our approach: four numbered steps, one field
   ------------------------------------------------------------ */

.manifesto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  margin-top: 26px;
  border-top: 1px solid currentColor;
}

.plank {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  align-content: start;
  padding: 22px 0 24px;
  border-bottom: 1px solid currentColor;
}

.plank-no {
  grid-row: 1 / 3;
  font-family: var(--placard);
  font-size: 40px;
  line-height: 1;
  color: var(--accent, var(--rust));
}

.plank-title {
  margin: 0;
  font-family: var(--placard);
  font-size: 21px;
  line-height: 1.15;
}

.plank-body {
  grid-column: 2;
  margin: 0;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0.88;
}

/* ------------------------------------------------------------
   an entry: the hero and the prose
   ------------------------------------------------------------ */

.entry-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 38px;
  align-items: center;
}

/* the model's own plate: an opaque render, so it is shown framed,
   the way a specimen is framed, rather than cut out */
.plate {
  border: 2px solid currentColor;
  background: var(--chrome);
  padding: 0;
  line-height: 0;
}

.plate .model {
  display: block;
  width: 100%;
  height: auto;
}

.entry-prose p { margin: 0 0 12px; }
.entry-prose p:last-child { margin-bottom: 0; }
.entry-prose .lede { font-size: 17px; max-width: 60ch; }
.entry-prose--wide { max-width: 74ch; }

.closing-contact {
  margin-top: 14px;
  letter-spacing: 0.06em;
}

.closing-contact a {
  color: inherit;
}

/* ------------------------------------------------------------
   responsive
   ------------------------------------------------------------ */

@media (max-width: 880px) {
  .masthead .mast { padding-left: 150px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .mast-copy .sign { font-size: 52px; }
  .mast-bottom { padding-left: 150px; flex-direction: column; align-items: flex-start; padding-right: 0; }
  .mast-cactus { width: 110px; max-width: none; bottom: 0; }
  .mast-saguaro { left: -90px; width: 320px; max-width: none; bottom: 0; }
  .mast-fish { top: -72px; right: 84px; width: 100px; max-width: none; }
  .mast-tuna { top: -54px; left: 196px; width: 60px; max-width: none; }
  .manifesto { grid-template-columns: 1fr; gap: 0; }
  .entry-hero { grid-template-columns: 1fr; gap: 24px; }
  .plate { max-width: 320px; }
}

@media (max-width: 560px) {
  .mast-copy .sign { font-size: 40px; }
  .masthead .mast { padding-left: 100px; }
  .mast-cactus { width: 85px; max-width: none; }
  .mast-saguaro { left: -80px; width: 260px; max-width: none; }
  .mast-fish { top: -64px; right: 56px; width: 72px; max-width: none; }
  .mast-tuna { top: -40px; left: 152px; width: 44px; max-width: none; }
  .mast-bottom { padding-left: 100px; padding-right: 0; }
  .plank-no { font-size: 30px; }
  .plank-title { font-size: 18px; }
}