/* Shared styles for the private design preview site (scripts/design-preview/).
   Colors, type and texture match design/admin/admin.css. */
  :root {
    --noir: #0b0b0a; --side: #121210; --cream: #f6f3ec; --card: #fffdf8; --ink: #17160f;
    --muted: #6d695f; --line: #e4dfd3; --gold: #c9a24f; --gold-soft: #f4ead3;
    --head: "Big Shoulders Display", "Barlow Condensed", system-ui, sans-serif;
    --body: "Barlow", system-ui, sans-serif;
  }
  * { box-sizing: border-box; }
  body { margin: 0; font: 15px/1.45 var(--body); color: var(--ink); -webkit-font-smoothing: antialiased;
         background: var(--cream) url("admin/assets/topo.svg") 0 0 / 900px 900px repeat; min-height: 100vh; }
  a { color: inherit; text-decoration: none; }
  h1, h2 { font-family: var(--head); text-transform: uppercase; letter-spacing: .01em; line-height: 1; margin: 0; }

  header { background: var(--side); color: #efe9dc; border-bottom: 3px solid var(--gold); }
  .bar { max-width: 960px; margin: 0 auto; padding: 18px 16px; display: flex; align-items: center; gap: 12px; }
  .bar img { width: auto; }
  .bar .ss { height: 72px; }
  .bar .fam { height: 58px; }
  .bar .x { font: 800 26px/1 var(--head); font-style: normal; color: var(--gold); }
  .bar span { margin-left: 6px;  font: 700 11px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
              border-left: 1px solid rgba(201,162,79,.4); padding-left: 12px; }
  .bar .tag { margin-left: auto; font: 700 10.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
              color: var(--noir); background: var(--gold); border-radius: 999px; padding: 6px 10px; }

  /* Tabs under the logo bar */
  .tabs { max-width: 960px; margin: 0 auto; padding: 0 16px; display: flex; gap: 26px; }
  .tabs a { font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #a39d8f;
            padding: 4px 0 13px; border-bottom: 3px solid transparent; margin-bottom: -3px; }
  .tabs a:hover { color: #efe9dc; }
  .tabs a.on { color: #fff; border-bottom-color: var(--gold); }

  main { max-width: 960px; margin: 0 auto; padding: 36px 16px 56px; }
  .intro h1 { font-size: clamp(38px, 7vw, 56px); }
  .intro p { color: var(--muted); margin: 10px 0 0; max-width: 560px; }

  section { margin-top: 34px; }
  section > small { display: block; font: 700 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase;
                    color: var(--muted); margin-bottom: 12px; }
  .grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  @media (min-width: 700px) { .grid { grid-template-columns: 1fr 1fr; } }

  .tile { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--line);
          border-radius: 14px; padding: 18px; transition: border-color .15s, transform .15s, box-shadow .15s; }
  .tile:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(23,22,15,.08); }
  .tile h2 { font-size: 26px; }
  .tile p { margin: 0; color: var(--muted); font-size: 14px; }
  .tile .go { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 13px; color: var(--ink);
              display: flex; align-items: center; gap: 6px; }
  .tile .go::after { content: "\2192"; color: var(--gold); transition: transform .15s; }
  .tile:hover .go::after { transform: translateX(3px); }

  .tile.feature { grid-column: 1 / -1; background: var(--noir); border-color: var(--noir); color: #fff; padding: 24px;
                  background-image: linear-gradient(90deg, var(--noir) 45%, rgba(11,11,10,.75)), url("admin/assets/topo.svg"); background-size: auto, 900px 900px; }
  .tile.feature h2 { font-size: clamp(34px, 5vw, 46px); }
  .tile.feature small { font: 700 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
  .tile.feature p { color: #b9b2a3; max-width: 480px; }
  .tile.feature .go { color: #fff; }
  .tile.feature:hover { border-color: var(--gold); }

  @media (max-width: 560px) {
    .bar { gap: 10px; }
    .bar .ss { height: 56px; }
    .bar .fam { height: 44px; }
    .bar .x { font-size: 20px; }
    .bar .tag { display: none; }
  }

  footer { max-width: 960px; margin: 0 auto; padding: 0 16px 32px; color: var(--muted); font-size: 13px; }