/* joshtified.com - frame.css: layout only, never colour.
 *
 * The pages grew up on two stylesheets (future.css for the home and Why me pages,
 * site.css + site-2026.css for the rest), and each had its own page width: 1280px,
 * 1240px or 1160px, with 64, 56 or 28px of side margin. Moving between pages, the
 * logo, the menu and the first line of text all jumped sideways. This file is loaded
 * last on every page and sets one frame for all of them.
 */

/* one page width and one side margin everywhere, so the header, the content and the
   footer line up on every page */
.wrap { width: min(1280px, calc(100% - 64px)) !important; margin-inline: auto !important; }
@media (max-width: 760px) { .wrap { width: calc(100% - 36px) !important; } }

/* one rhythm between home-page sections: the old 150px above and below made a 300px
   hole between every two sections */
body .section { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }

/* on a phone the 3D sphere sits behind the hero text: keep it, but quiet, so the text
   on top of it reads */
@media (max-width: 760px) { .has-3d .f3d-core { opacity: .3; } }

/* one header: the menu on every page uses the home page's measurements (68px bar,
   14.5px links with the same spacing), so the menu does not change size or shift
   when you move from the home page to a project or your account */
.site-head .head-in { min-height: 68px !important; gap: 20px !important; }
.site-head .nav { gap: 2px !important; }
.site-head .nav a { font-size: 14.5px !important; padding: 8px 12px !important; line-height: 1.4 !important; }
.site-head .nav a.nav-mail { margin-left: 10px !important; font-weight: 600 !important; border-radius: 3px 12px 3px 3px !important; }
.site-head .brand { gap: 10px !important; font-size: 18px !important; }
.site-head .nav a:not(.nav-mail):not(.current):not([aria-current]) { color: #c4bcd8 !important; }
.site-head .nav a:not(.nav-mail):hover { color: #f4f1f9 !important; }

/* project pages: read top to bottom as what it is, how to get it, then the details.
   The links used to sit above the description in a pile, with the PayPal note wedged
   between two rows of buttons. */
.project-page .project-case .case-body { padding-top: 14px; }
.project-page .project-case .case-body > .case-top { order: 0 !important; }
.project-page .project-case .case-body > .p-desc { order: 1 !important; }
.project-page .project-case .case-body > .p-links { order: 2 !important; margin: 6px 0 24px !important; align-items: center; }
.project-page .project-case .case-body > .p-points { order: 3 !important; }
.project-page .project-case .case-body > .facts { order: 4 !important; }
/* a note inside the links (how buying works) gets its own full line under the buttons */
.project-page .project-case .p-links > p { flex: 1 0 100%; order: 10; margin: 4px 0 0 !important; font-size: 14.5px; color: #a99fc2; }
/* the main action first, then the rest in one even row */
.project-page .project-case .p-links > .accent { order: -1; }

/* the menu button reads the same on every page (one page had it in the pixel face) */
.menu-btn .menu-label { font-family: 'Bricolage', 'Segoe UI', system-ui, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }

@media (max-width: 760px) {
  /* project pages on a phone: the words first, the screenshots after them, and the
     buttons as one even column instead of a ragged stack */
  .project-page .project-case { display: flex !important; flex-direction: column; }
  .project-page .project-case .case-body { order: 1 !important; max-width: none !important; }
  .project-page .project-case .case-media { order: 2 !important; position: static !important; }
  .project-page .project-case .p-links > a { flex: 1 1 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------------ the hub
   Same idea for the hub: one button size on every hub page (they came in at 49px and
   38px side by side), and on a phone the sideways section strip shows that it scrolls. */
body.hub-app .hub-btn { min-height: 40px; padding: 8px 16px; font-size: 14px; line-height: 1.2; }
body.hub-app .hub-btn--quiet { min-height: 34px; padding: 6px 12px; font-size: 13px; }
@media (max-width: 900px) {
  body.hub-app .hub-rail-nav { scroll-behavior: smooth; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}