:root{
  --w: 720px;
  --bg: #fbfcfe;
  --fg: #13161a;
  --muted: #5c6673;
  --hair: #e5eaf1;
  --chip: #f2f6fb;
  --focus: #2f6ea3;
  --grad1: #f4f7fc;
  --grad2: #fdfefe;
  color-scheme: light dark;
}
html[data-theme="dark"]{
  --bg: #0c0f13;
  --fg: #e6eaf0;
  --muted: #9aa3ad;
  --hair: #20262c;
  --chip: #131820;
  --focus: #6aa3d6;
  --grad1: #12161c;
  --grad2: #0b0f13;
}
@media (prefers-contrast: more){ :root{ --hair:#cfd6df } }

*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.65 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display:flex; min-height:100svh;
}
main{
  margin:auto; width:min(100% - 32px, var(--w));
  padding:clamp(20px,6vw,56px);
  border-radius:16px; border:1px solid transparent;
  background:
    linear-gradient(var(--bg),var(--bg)) padding-box,
    linear-gradient(120deg,var(--grad1),var(--grad2)) border-box;
  position:relative;
}

::selection{ background:rgba(47,110,163,.2) }
html[data-theme="dark"] ::selection{ background:rgba(106,163,214,.25) }

h1{ margin:0 0 .5rem; font-size:clamp(30px,6vw,44px); text-wrap:balance }
p{ margin:.6rem 0; text-wrap:pretty }
.muted{ color:var(--muted) }
.bar{ height:1px; background:var(--hair); margin:1.15rem 0 }

a{ color:inherit; text-underline-offset:2px }
a.btn{
  display:inline-block; text-decoration:none;
  margin:.2rem 0 1rem; padding:.6rem .9rem;
  border:1px solid var(--hair); border-radius:10px;
  background:linear-gradient(to bottom,transparent,transparent);
  transition:transform .15s ease, opacity .15s ease;
}
a.btn:hover{ transform:translateY(-2px); opacity:.98 }
a.btn:focus-visible{ outline:3px solid var(--focus) }

button.toggle{
  position:absolute; top:20px; right:20px;
  border:1px solid var(--hair); background:var(--chip);
  border-radius:10px; font:inherit; color:inherit;
  padding:.45rem .7rem; cursor:pointer;
  transition:background .2s ease, transform .1s ease, opacity .2s ease;
}
button.toggle:hover{ transform:translateY(-1px); opacity:.95 }
button.toggle:focus-visible{ outline:3px solid var(--focus) }

.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem }
.tag{
  border:1px solid var(--hair); background:var(--chip);
  border-radius:999px; padding:.25rem .6rem; font-size:.95rem;
}

/* Responsive footer: wraps on small screens */
footer{
  margin-top:1rem; display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:center;
  gap:.4rem .75rem; color:var(--muted); font-size:.95rem; text-align:center;
}
footer span{ flex:1 1 100% }
@media (min-width:480px){
  footer span{ flex:0 0 auto }
  footer{ text-align:initial }
}

/* Monogram */
.mono-wrap{ display:flex; justify-content:center; align-items:center; margin-bottom:.85rem }
.monogram{ width:64px; height:64px; color:var(--fg); display:block; transition:transform .15s ease, opacity .15s ease }
.monogram :is(rect,path,line){ vector-effect:non-scaling-stroke }
.monogram rect{ rx:12; ry:12; stroke:var(--hair); fill:none; stroke-width:1.25 }
.monogram .mark{ stroke:currentColor; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.75; opacity:.92 }
.monogram:hover{ transform:translateY(-1px); opacity:.98 }

/* Print */
@media print{
  body{ background:#fff; color:#000 }
  main{ border:0; background:none }
  a.btn, button.toggle{ display:none !important }
  .bar{ background:#000 }
}