:root {
  --ink: #1a1a1a;
  --accent: #8b5e34;
  --paper: #fffdf7; /* light paper like the first version */
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: var(--ink);

  /* Lighter background with more detailed, widely spaced baguettes */
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27240%27%20height%3D%27100%27%20viewBox%3D%270%200%20240%20100%27%3E%0A%20%20%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27none%27/%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%27dough%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23fff7e9%27/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23f3e3cc%27/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%3CradialGradient%20id%3D%27shine%27%20cx%3D%2735%25%27%20cy%3D%2725%25%27%20r%3D%2770%25%27%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27white%27%20stop-opacity%3D%270.35%27/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27white%27%20stop-opacity%3D%270%27/%3E%0A%20%20%20%20%3C/radialGradient%3E%0A%20%20%3C/defs%3E%0A%20%20%3C%21--%20Single%20baguette%20centered%20in%20the%20tile%20--%3E%0A%20%20%3Cg%20transform%3D%27translate%2830%2C22%29%20rotate%28-8%29%27%3E%0A%20%20%20%20%3C%21--%20body%20--%3E%0A%20%20%20%20%3Crect%20x%3D%270%27%20y%3D%270%27%20rx%3D%2726%27%20ry%3D%2726%27%20width%3D%27180%27%20height%3D%2756%27%20fill%3D%27url%28%23dough%29%27%20stroke%3D%27%23c79b62%27%20stroke-width%3D%272.5%27%20opacity%3D%270.92%27/%3E%0A%20%20%20%20%3C%21--%20crust%20cuts%20--%3E%0A%20%20%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23875a2a%27%20stroke-width%3D%272%27%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M34%2010%20C%2044%2018%2C%2044%2038%2C%2034%2046%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M74%208%20C%2084%2016%2C%2084%2040%2C%2074%2048%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M114%2010%20C%20124%2018%2C%20124%2038%2C%20114%2046%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M154%208%20C%20164%2016%2C%20164%2040%2C%20154%2048%27/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C%21--%20soft%20highlight%20--%3E%0A%20%20%20%20%3Crect%20x%3D%270%27%20y%3D%270%27%20rx%3D%2726%27%20ry%3D%2726%27%20width%3D%27180%27%20height%3D%2756%27%20fill%3D%27url%28%23shine%29%27%20opacity%3D%270.35%27/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-repeat: repeat;
  background-size: 240px 100px; /* more space between baguettes */
  background-attachment: fixed;

  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 6rem 1.25rem 3rem;
}

.card {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 20px;
  padding: 2.25rem 2rem;
  max-width: 720px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  text-align: center;
}

.logo {
  width: clamp(160px, 40vw, 300px);
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.05));
  margin: 0 auto 1.25rem;
  display: block;
}

h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: 0.02em;
  margin: 0.2rem 0 0.35rem;
}

.subtitle { font-size: clamp(1rem, 1.8vw, 1.1rem); color: #4a4a4a; margin: 0 0 1.25rem; }
.copy { font-size: clamp(.95rem, 1.6vw, 1.05rem); color: #333; margin-bottom: 1rem; }

a.inline { color: inherit; border-bottom: 1px dotted rgba(0,0,0,0.25); text-decoration: none; }
a.inline:hover { border-bottom-color: transparent; }

.footer { margin-top: 1.2rem; font-size: 0.9rem; color: #6b6b6b; }

.small { font-size: 0.85rem; }
.socials { display:flex; gap:.75rem; justify-content:center; margin-top: .75rem; }
.socials a { color: inherit; opacity: .75; text-decoration: none; border-bottom: 1px dotted rgba(0,0,0,0.2); }
.socials a:hover { opacity: 1; border-bottom-color: transparent; }

/* Optional dark-mode override kept subtle; page stays light by default */
@media (prefers-color-scheme: dark) {
  :root { --ink: #eae7e2; --paper: #121212; }
  body {
    background-color: #141414;
    /* Dimmer baguettes for dark mode */
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27240%27%20height%3D%27100%27%20viewBox%3D%270%200%20240%20100%27%3E%0A%20%20%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27none%27/%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%27dough%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23fff7e9%27/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23f3e3cc%27/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%20%20%3CradialGradient%20id%3D%27shine%27%20cx%3D%2735%25%27%20cy%3D%2725%25%27%20r%3D%2770%25%27%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27white%27%20stop-opacity%3D%270.18%27/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27white%27%20stop-opacity%3D%270%27/%3E%0A%20%20%20%20%3C/radialGradient%3E%0A%20%20%3C/defs%3E%0A%20%20%3C%21--%20Single%20baguette%20centered%20in%20the%20tile%20--%3E%0A%20%20%3Cg%20transform%3D%27translate%2830%2C22%29%20rotate%28-8%29%27%3E%0A%20%20%20%20%3C%21--%20body%20--%3E%0A%20%20%20%20%3Crect%20x%3D%270%27%20y%3D%270%27%20rx%3D%2726%27%20ry%3D%2726%27%20width%3D%27180%27%20height%3D%2756%27%20fill%3D%27url%28%23dough%29%27%20stroke%3D%27%23c79b62%27%20stroke-width%3D%272.5%27%20opacity%3D%270.8%27/%3E%0A%20%20%20%20%3C%21--%20crust%20cuts%20--%3E%0A%20%20%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23875a2a%27%20stroke-width%3D%272%27%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M34%2010%20C%2044%2018%2C%2044%2038%2C%2034%2046%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M74%208%20C%2084%2016%2C%2084%2040%2C%2074%2048%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M114%2010%20C%20124%2018%2C%20124%2038%2C%20114%2046%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M154%208%20C%20164%2016%2C%20164%2040%2C%20154%2048%27/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C%21--%20soft%20highlight%20--%3E%0A%20%20%20%20%3Crect%20x%3D%270%27%20y%3D%270%27%20rx%3D%2726%27%20ry%3D%2726%27%20width%3D%27180%27%20height%3D%2756%27%20fill%3D%27url%28%23shine%29%27%20opacity%3D%270.18%27/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  }
  .card { background: rgb(26 24 24 / 87%); border-color: rgba(255,255,255,0.06);}
  .subtitle, .copy, .footer { color: #efe9e0; }
}