/* ============================================================================
   Mega Monki — homepage layout
   Loaded after _design.css and _page-styles.css. Layout only.

   Structure over decoration:
   - one accent (--accent), inherited from _design.css
   - near-square corners (--r-md) with a solid 4px bar on one edge
   - no emoji in headings
   - five big sections instead of twenty-one equal tiles
   ========================================================================== */

body { overflow-x: hidden; }

/* ---------- shared inner width ---------- */
.wrap { max-width: 1180px; margin: 0 auto; width: 100%; }

/* ---------- top bar, overlaid on the hero ---------- */
.site-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 6vw;
  border-bottom: none;
  margin: 0;
}
.site-top .brand-text .name { text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.site-top .brand-text .tagline {
  color: var(--ink-dim);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}
.site-top .meta {
  color: var(--ink-dim);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}

/* ---------- hero ---------- */
.lead { min-height: 92svh; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.lead__inner { max-width: 1180px; margin: 0 auto; width: 100%; }
.lead h1 {
  margin: 14px 0 0 0;
  max-width: 16ch;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .8);
}
.lead__sub {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 20px 0 0 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}
.lead__cue {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
}
.lead__cue i {
  display: block;
  width: 34px;
  height: var(--bar);
  background: var(--accent);
  animation: cueSlide 2.4s var(--ease) infinite;
}
@keyframes cueSlide {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50%      { transform: translateX(8px); opacity: .55; }
}

/* ---------- section rhythm ----------
   The accent bar marks a major beat, not every block. Secondary sections get a
   hairline instead, so the red rule keeps meaning something. */
.section { padding: 84px 6vw 76px; border-top: 1px solid var(--line); }
.section--major { border-top: var(--bar) solid var(--accent); }
.section--tight { padding-top: 64px; padding-bottom: 60px; }
.section__head { margin-bottom: 34px; }
.section__head h2 { margin-bottom: 10px; }
.section__sub {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0;
  max-width: 62ch;
}
.section__link {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.section__link:hover { text-decoration: underline; }
.head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 22px;
  flex-wrap: wrap;
}

/* ---------- generic tile ----------
   Default: neutral bar on the left edge, which lights up to the accent on
   hover. Featured tiles carry the accent bar permanently. This keeps the
   "solid bar on one edge" rule without printing twenty red stripes. */
.mtile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: var(--bar) solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-left-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
a.mtile:hover {
  border-left-color: var(--accent);
  background: var(--panel-2);
  transform: translateY(-2px);
}
.mtile--featured { border-left-color: var(--accent); }
.mtile h3 { color: var(--ink); }
.mtile p { margin: 0; }
.mtile__foot {
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--mut);
  letter-spacing: .4px;
}

/* ---------- 2. Indonesia story, full width ---------- */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-left: var(--bar) solid var(--accent);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast) var(--ease);
}
.story:hover { transform: translateY(-2px); }
.story:hover .story__shots img { filter: brightness(1.06); }
.story__body { padding: 40px 42px; display: flex; flex-direction: column; gap: 16px; }
.story__body h2 { margin: 0; }
.story__body p { margin: 0; max-width: 52ch; }
.story__stats { display: flex; gap: 30px; flex-wrap: wrap; font-family: var(--font-mono); margin-top: 4px; }
.story__stats b { display: block; font-size: 26px; color: var(--ink); line-height: 1.1; font-weight: 500; }
.story__stats span {
  font-size: 10px;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 1.6px;
}
.story__cta {
  margin-top: auto;
  align-self: flex-start;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  transition: filter var(--t-fast);
}
.story:hover .story__cta { filter: brightness(1.14); }
.story__shots { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; min-height: 340px; }
.story__shots img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: filter var(--t-mid) var(--ease);
}
.story__shots img:first-child { grid-row: span 2; }

/* ---------- 3. intro + amigo, side by side ---------- */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.intro { gap: 18px; }
.intro h2 { margin: 0; }
.intro__row { display: flex; gap: 22px; align-items: flex-start; }
.intro__row img {
  width: 148px;
  height: 178px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.amigo { min-height: 100%; }
.amigo__wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--panel-2);
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 210px;
}
.amigo__wrap img {
  width: 100%;
  height: 100%;
  max-height: 300px;
  object-fit: cover;
  display: block;
}
.amigo__wrap p { margin: 0; padding: 20px; color: var(--mut); font-style: italic; font-size: 13px; }

/* ---------- chip rows (travel + events) ---------- */
.chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 10px;
}
.chip {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: var(--bar) solid var(--line);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 13.4px;
  transition: border-left-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.chip:hover { border-left-color: var(--accent); background: var(--panel-2); }
.chip .ico { font-size: 15px; flex-shrink: 0; line-height: 1; }
.chip .tname { flex: 1; }
.chip .tdate {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mut);
  letter-spacing: .6px;
  white-space: nowrap;
}

/* ---------- weather strip ---------- */
.weather-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.weather-place {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: var(--bar) solid var(--line);
  border-radius: var(--r-sm);
  transition: border-left-color var(--t-fast) var(--ease);
}
a.weather { text-decoration: none; display: block; }
a.weather:hover .weather-place { border-left-color: var(--accent); }
.weather-place .place-icon { font-size: 22px; line-height: 1; }
.weather-place .place-info { flex: 1; min-width: 0; }
.weather-place .place-name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--mut);
}
.weather-place .place-temp { font-size: 24px; color: var(--ink); line-height: 1.15; }
.weather-place .place-cond { font-size: 12px; color: var(--ink-soft); }
.weather-place .cat-reaction { font-size: 20px; line-height: 1; }

/* ---------- projects grid ---------- */
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px;
}
.mtile--wide { grid-column: span 2; }
.mtile--dim { opacity: .62; }
.mtile__shot {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  line-height: 0;
}
.mtile__shot img { width: 100%; height: auto; display: block; }

/* crypto */
.crypto-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.crypto-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mut);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-rail);
  animation: livePulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.coin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 8px; }
.coin-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.coin-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.coin-card-head img { width: 16px; height: 16px; }
.coin-card-head .fx-flag { font-size: 14px; line-height: 1; }
.coin-card-head .name {
  font-size: 10.5px;
  color: var(--mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coin-card-head .sym {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--mut-deep);
  margin-left: auto;
}
.coin-price { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
.coin-change { font-family: var(--font-mono); font-size: 10.5px; margin-top: 3px; }
.coin-change.up { color: var(--c-rail); }
.coin-change.down { color: var(--accent); }
.coin-change.flat { color: var(--mut); }
.crypto-loading, .crypto-error { font-size: 12.5px; color: var(--mut); font-style: italic; }

/* espresso digest */
.espresso-brief { display: flex; flex-direction: column; gap: 12px; }
.espresso-brief .brief-sec { border-left: 2px solid var(--line); padding-left: 12px; }
.espresso-brief .brief-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--accent);
  margin-bottom: 5px;
}
.espresso-brief .brief-lead { font-size: 12.6px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 3px; }
.espresso-brief .placeholder { color: var(--mut); font-style: italic; font-size: 12.5px; margin: 0; }

/* reading */
.book-row { display: flex; gap: 16px; align-items: flex-start; }
.book-row img {
  width: 76px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.book-row p { margin: 0 0 4px 0; font-size: 13px; }
.book-row__author { color: var(--mut); }

/* ---------- contact ---------- */
.contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.contact .links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 11px 20px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.contact .links a:hover { background: var(--accent); color: #fff; }

/* ---------- page footer ---------- */
.site-foot {
  padding: 26px 6vw 34px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--mut-deep);
  letter-spacing: .4px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- reveal on scroll ----------
   Scoped to html.js so the page is fully readable if JavaScript never runs. */
html.js .reveal { opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js .reveal.in-view { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .story { grid-template-columns: 1fr; }
  .story__shots { min-height: 260px; order: -1; }
  .story__body { padding: 30px 26px; }
  .duo { grid-template-columns: 1fr; }
  .mtile--wide { grid-column: span 1; }
}
@media (max-width: 620px) {
  .section { padding: 56px 20px 52px; }
  .site-top { padding: 16px 20px; }
  .site-top .meta { display: none; }
  .lead { padding: 40px 20px calc(52px + env(safe-area-inset-bottom)); min-height: 88svh; }
  .story__body { padding: 24px 20px; }
  .intro__row { flex-direction: column; }
  .intro__row img { width: 100%; height: 200px; }
  .site-foot { padding: 22px 20px 30px; }
  .projects { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo, .lead__cue i, .live-dot { animation: none; }
  html.js .reveal { opacity: 1; transform: none; }
}