* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #10231d;
  --accent-color: #da5a45;
  --accent-soft: #f6dfd8;
  --bg-color: #f5f6f2;
  --surface: #ffffff;
  --text-color: #17211d;
  --muted-color: #66716c;
  --line-color: #dfe4df;
  --font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  font-family: var(--font-family);
  background: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ========== NAVIGATION ========== */

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  width: 100%;
  color: white;
  background: rgba(16, 35, 29, 0.96);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 30px rgba(15,31,25,.12);
  backdrop-filter: blur(14px);
}

.header-inner {
  max-width: 1240px;
  min-height: 82px;
  margin: 0 auto;
  padding: .8rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: white;
  text-decoration: none;
  min-width: max-content;
}

.site-brand__avatar {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(218,90,69,.45);
}

.site-brand__copy {display:flex;flex-direction:column;line-height:1.15}
.site-brand__copy strong {font-family:Georgia,serif;font-size:1.5rem;letter-spacing:-.02em}
.site-brand__copy small {margin-top:.25rem;color:#aebdb7;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.site-brand:focus-visible,.nav a:focus-visible,.menu-bars:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}

.menu-bars {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  font-size: 1.05rem;
  cursor: pointer;
  color: white;
}

.nav {
  display: flex;
}

.nav ul {
  display:flex;
  align-items:center;
  gap:.25rem;
  list-style: none;
}

.nav li {
  padding: 0;
}

.nav a {
  display:block;
  padding:.65rem .8rem;
  color: #c8d3cf;
  text-decoration: none;
  font-size:.88rem;
  font-weight:650;
  border-radius:.45rem;
  transition:color .15s ease,background .15s ease;
}
.nav a:hover,.nav a.active{color:#fff;background:rgba(255,255,255,.09)}
.nav a.active{box-shadow:inset 0 -2px var(--accent-color)}

/* ========== MAIN IFRAME ========== */
.main {min-height:60vh;padding:2.5rem 0 4rem}

.frame {
  width: 100%;
  height: 80vh;
}

/* ========== FOOTER ========== */
footer {
  background-color: var(--primary-color);
  color: white;
  padding: 2rem 1rem;
  margin-top: 0;
  text-align: center;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  padding: 1rem 0;
}

.social-icon {
  font-size: 1.25rem;
}

#consent-container {
  max-width: 720px;
  margin: 2rem auto 0;
  background: rgba(255, 255, 255, 0.98);
  color: var(--text-color);
  border: 1px solid var(--line-color);
  border-radius: .8rem;
  padding: 1.25rem;
  display: none;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}

#cookie-consent button {
  margin: .75rem .35rem 0 0;
  padding: .65rem 1rem;
  border:0;
  border-radius:.45rem;
  background:var(--primary-color);
  color:#fff;
  cursor: pointer;
}
#cookie-consent button:last-child{background:#e9ece9;color:var(--text-color)}
#policy-pages ul{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;list-style:none}
#policy-pages a{color:#c9d6d1;font-size:.85rem}

.circle.red {
  color: var(--accent-color);
}

.managed-content{max-width:880px;margin:0 auto;padding:2.5rem clamp(1.2rem,4vw,3.5rem);background:var(--surface);border:1px solid var(--line-color);border-radius:1rem;box-shadow:0 18px 50px rgba(25,44,35,.07)}
.managed-content h1{margin:.3rem 0 1.2rem;font:700 clamp(2.2rem,5vw,3.6rem)/1.05 Georgia,serif;letter-spacing:-.035em}.content-kicker{color:var(--accent-color);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.post-list article{padding:1.8rem 0;border-top:1px solid var(--line-color)}.post-list article:first-child{margin-top:1.5rem}.post-list h2{margin:.15rem 0 .5rem;font:700 1.65rem/1.2 Georgia,serif}.post-list h2 a{color:var(--text-color);text-decoration:none}.post-list h2 a:hover{color:var(--accent-color)}.post-list article>p{color:var(--muted-color);font-size:.8rem}.post-list article>a,.post>a{display:inline-block;margin-top:1rem;color:var(--accent-color);font-weight:700;text-decoration:none}.post .lead{font-size:1.2rem;color:var(--muted-color)}.post-body{margin:2.5rem 0;font-family:Georgia,serif;font-size:1.08rem;line-height:1.8}.post-body h2,.post-body h3{margin:2em 0 .6em;line-height:1.2}.post-body img{max-width:100%;height:auto;border-radius:.6rem}.frame{display:block;background:#fff;border-radius:.8rem;box-shadow:0 18px 50px rgba(25,44,35,.08)}

.projects-page{max-width:1100px;margin:0 auto}.projects-intro{max-width:650px;margin-bottom:2.2rem}.projects-intro h1{margin:.25rem 0 .5rem;font:700 clamp(2.5rem,6vw,4.5rem)/1 Georgia,serif;letter-spacing:-.04em}.projects-intro>p:last-child{color:var(--muted-color);font-size:1.08rem}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.project-card{display:flex;gap:1.1rem;min-height:220px;padding:1.6rem;color:var(--text-color);text-decoration:none;background:var(--surface);border:1px solid var(--line-color);border-radius:1rem;box-shadow:0 10px 30px rgba(25,44,35,.05);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.project-card:hover{transform:translateY(-3px);border-color:#b8c8c0;box-shadow:0 18px 40px rgba(25,44,35,.1)}.project-card.featured{background:linear-gradient(145deg,#fff,#edf5f1)}.project-icon{display:grid;place-items:center;flex:0 0 3rem;height:3rem;border-radius:.7rem;background:var(--primary-color);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.08em}.project-card small{color:var(--accent-color);font-weight:800;text-transform:uppercase;letter-spacing:.1em}.project-card h2{margin:.35rem 0 .6rem;font:700 1.4rem/1.15 Georgia,serif}.project-card p{color:var(--muted-color)}.project-card strong{display:inline-block;margin-top:1.2rem;color:var(--accent-color);font-size:.85rem}

@media (max-width: 1120px) {
  .header-inner{min-height:72px;flex-wrap:wrap;gap:.5rem}.site-brand__copy small{display:none}.menu-bars{display:inline-grid;place-items:center}.nav{display:none;width:100%;padding:.5rem 0}.nav.nav-expand{display:block}.nav ul{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}.nav a{padding:.8rem}.main{padding-top:1.5rem}.container{padding:0 1rem}
}

@media (max-width: 700px){.project-grid{grid-template-columns:1fr}.project-card{min-height:0;padding:1.25rem}}

@media (max-width: 520px) {
  .header-inner{padding:.7rem 1rem}.site-brand{min-width:0}.site-brand__avatar{width:2.6rem;height:2.6rem;flex:0 0 auto}.site-brand__copy strong{font-size:1.3rem}.managed-content{padding:1.5rem 1.1rem;border-radius:.7rem}.nav ul{grid-template-columns:1fr}
}

/* Apps page: the release panel, plus the headings that separate installable
   apps from the older browser experiments. */
.app-release{display:flex;gap:1.6rem;margin-bottom:3rem;padding:1.8rem;background:linear-gradient(145deg,#fff,#edf5f1);border:1px solid var(--line-color);border-radius:1rem;box-shadow:0 10px 30px rgba(25,44,35,.05)}.app-release__icon{flex:0 0 auto;width:96px;height:96px;border-radius:1.1rem;box-shadow:0 6px 18px rgba(25,44,35,.16)}.app-release__body{min-width:0}.app-release__body small{color:var(--accent-color);font-weight:800;text-transform:uppercase;letter-spacing:.1em}.app-release__body h2{margin:.35rem 0 .6rem;font:700 1.9rem/1.15 Georgia,serif}.app-release__body>p{color:var(--muted-color);max-width:56ch}.app-release__meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin:1.4rem 0}.app-release__meta div{min-width:0}.app-release__meta dt{color:var(--muted-color);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.app-release__meta dd{margin:.2rem 0 0;font-weight:700}.app-release__actions{margin:1.4rem 0 0}.app-download{display:inline-block;padding:.8rem 1.6rem;background:var(--primary-color);color:#fff;font-weight:700;text-decoration:none;border-radius:.6rem;transition:transform .18s ease,box-shadow .18s ease}.app-download:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(25,44,35,.18)}.app-release__notes{margin-top:1.4rem;font-size:.9rem;color:var(--muted-color)}.app-release__notes summary{color:var(--accent-color);font-weight:700;cursor:pointer}.app-release__notes p{margin:.8rem 0}.app-release__notes pre{margin:.6rem 0;padding:.6rem .8rem;overflow-x:auto;background:rgba(25,44,35,.06);border-radius:.4rem}.app-release__sum code{display:block;overflow-wrap:anywhere;font-size:.78rem}
.app-section-heading{margin:0 0 .3rem;font:700 1.5rem/1.2 Georgia,serif}.app-section-note{margin:0 0 1.4rem;color:var(--muted-color);font-size:.92rem}.app-backlink{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line-color);color:var(--muted-color)}.app-backlink a{color:var(--accent-color);font-weight:700;text-decoration:none}

@media (max-width: 700px){.app-release{flex-direction:column;gap:1.1rem;padding:1.3rem}.app-release__icon{width:72px;height:72px}.app-release__meta{gap:1.1rem}.app-download{display:block;text-align:center}}