/* Rickhouse site. Tokens come from DESIGN.md: ivory paper, navy ink, one
   color per category. Light only: the dark palette is still undecided. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: optional; src: url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: optional; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-display: swap; src: url("fonts/SourceSerif4Display-Semibold.woff2") format("woff2"); }

:root {
  color-scheme: only light;
  --paper: #FFF8E7;
  --ink: #14213D;
  --ink-soft: #3A4560;      /* body secondary; 8.6:1 on paper */
  --hairline: rgba(20, 33, 61, .22);
  --accent: #FC9350;        /* Bourbon: the one accent, as in the logo */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --gutter: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans); font-feature-settings: "tnum" 1;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 42rem; }

/* shell: header and footer */
.site-header { padding: 6px 0; border-bottom: 1px solid var(--hairline); position: relative; z-index: 1; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-header .logo { display: block; }
.site-header img { height: 64px; width: auto; display: block; }
.site-header .gh { font-size: .9375rem; font-weight: 600; text-decoration: none; padding: 12px 4px; }
.site-header .gh:hover { text-decoration: underline; }

/* type */
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(2.25rem, 6.4vw, 4rem); max-width: 18ch; text-wrap: balance; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); text-wrap: balance; }
h3 { font: 600 1rem/1.3 var(--sans); margin: 0 0 6px; }
.kick { font: 600 .8125rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 16px; }
.lede { font-size: 1.25rem; line-height: 1.5; color: var(--ink-soft); max-width: 40rem; margin: 20px 0 0; text-wrap: pretty; }
p { margin: 0 0 1em; text-wrap: pretty; }

/* hero */
.hero { padding: 0 0 88px; text-align: center; }
.stage { position: relative; z-index: 3; padding-top: 28px; }
.wall { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.wall i { display: block; height: 250px; border: 1px solid var(--ink); border-radius: 3px; box-shadow: 2px 2px 0 rgba(20, 33, 61, .18); }
.wall i:nth-child(1) { background: #56B7E6; }
.wall i:nth-child(2) { background: #48D597; }
.wall i:nth-child(3) { background: #9678D3; }
.wall i:nth-child(4) { background: #FC9350; }
.wall i:nth-child(5) { background: #1CAA3D; }
.wall i:nth-child(6) { background: #F4633A; }
.wall i:nth-child(7) { background: #A6DD45; }
.wall i:nth-child(8) { background: #BA0C2F; }
.wall i:nth-child(9) { background: #CA9A8E; }
.wall i:nth-child(10) { background: #5461C8; }
.wall i:nth-child(11) { background: #EAB8E4; }
.wall i:nth-child(12) { background: #EF426F; }
.wall i:nth-child(13) { background: #E93CAC; }
.wall i:nth-child(14) { background: #50A684; }
.wall i:nth-child(15) { background: #61007D; }
.wall i:nth-child(16) { background: #F7EA48; }

/* phone frame: plain, flat shadow, the screenshot uncropped inside */
.phone { border: 3px solid var(--ink); border-radius: 40px; background: var(--paper); box-shadow: 3px 3px 0 rgba(20, 33, 61, .25); overflow: hidden; }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 920 / 2000; }
.hero-phone { position: absolute; left: 50%; top: calc(28px + 253px); transform: translate(-50%, -50%); width: 290px; z-index: 3; }

.hero-copy { padding-top: 96px; }
.hero h1 { max-width: 20ch; margin: 0 auto; }
.lede { font-size: 1.25rem; line-height: 1.5; color: var(--ink-soft); max-width: 36rem; margin: 18px auto 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: center; margin: 0; }
.btn { display: inline-block; padding: 14px 22px; min-height: 48px; border: 2px solid var(--ink); border-radius: 4px; font-weight: 600; text-decoration: none; line-height: 1.2; box-shadow: 2px 2px 0 rgba(20, 33, 61, .18); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn:hover { background: var(--accent); color: var(--ink); text-decoration: none; }
.soon { font-size: .9375rem; color: var(--ink-soft); }
.honest { font-size: .9375rem; color: var(--ink-soft); margin: 16px 0 0; }

/* feature rows: each phone hangs past the dividers above and below it */
.row { border-top: 1px solid var(--hairline); padding: 36px 0; position: relative; }
.row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-inline: 64px; }
.row.flip .copy { order: 2; }
.row .copy p:not(.kick) { font-size: 1.0625rem; max-width: 30rem; margin: 0; }
.row h2 { margin: 6px 0 12px; }
.shot { margin: -100px 0; position: relative; z-index: 3; display: flex; justify-content: center; }
.row .phone { width: 270px; }
.has-rows + .site-footer { margin-top: 30px; padding-top: 50px; }

/* prose pages */
.prose { padding: 56px 0 80px; }
.prose h1 { font-size: clamp(2rem, 5vw, 3rem); max-width: none; margin-bottom: 8px; }
.prose h2 { font-size: 1.5rem; margin: 44px 0 12px; }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: .5em; }
.prose .updated { color: var(--ink-soft); font-size: .9375rem; margin-bottom: 32px; }

.site-footer { border-top: 1px solid var(--hairline); padding: 40px 0 56px; font-size: .9375rem; color: var(--ink-soft); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer a { color: var(--ink); }
.motto { font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 1.0625rem; margin: 0 0 4px; }

/* small screens: a plain stacked layout (the overlaps are a desktop idea) */
@media (max-width: 900px) {
  .stage { padding-top: 20px; }
  .wall { grid-template-columns: repeat(4, 1fr); }
  .wall i { height: 84px; }
  .hero-phone { position: relative; left: auto; top: auto; transform: none; width: min(290px, 72%); margin: -48px auto 0; }
  .hero-copy { padding-top: 32px; }
  .hero { padding-bottom: 56px; }
  .row { padding: 40px 0; }
  .row-grid { grid-template-columns: 1fr; gap: 28px; padding-inline: var(--gutter); }
  .row.flip .copy { order: 0; }
  .shot { margin: 0; }
  .row .phone { width: min(270px, 78%); }
  .has-rows + .site-footer { margin-top: 0; padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 480px) { .site-header img { height: 48px; } }