/* =========================================================================
   FRUTIGER AERO BLOG — stylesheet
   Colours all come from the six themes in aero.js (html[data-aero="..."]).
   You almost never need to touch this file: change text in the HTML pages
   and change the site name / menu in aero.js.
   ========================================================================= */

@font-face{font-family:'Comfortaa';src:url('fonts/Comfortaa.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Comfortaa';src:url('fonts/Comfortaa-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'InterBlog';src:url('fonts/Inter.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  /* the aqua theme — the other five live at the bottom of this file */
  --baseA:#6fd2ea; --baseB:#54c6a8;
  --blob1:rgba(95,225,180,.60); --blob2:rgba(80,180,255,.55); --blob3:rgba(160,245,225,.42);
  --tbA:rgba(120,200,255,.55); --tbB:rgba(60,150,225,.45);
  --orbHi:#f0feff; --orbMid:#7fdcf0; --orbLo:#2f8fc4; --accent:#2f8fc4; --accent2:#3f9fe0;

  --ink:#10303c; --ink2:#3c5f6c; --line:rgba(255,255,255,.62);
  --glass:rgba(255,255,255,.30); --panel:rgba(255,255,255,.78); --panel2:rgba(255,255,255,.55);
  --shadow:0 12px 34px rgba(16,60,86,.28);
  --r:16px;
  --ui:'Comfortaa','Segoe UI',system-ui,sans-serif;
  --body:'InterBlog','Segoe UI',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100vh;font-family:var(--body);color:var(--ink);line-height:1.65;
  padding:26px 20px 96px;
  background:
    radial-gradient(48% 40% at 80% 6%,rgba(255,255,255,.72),transparent 58%),
    radial-gradient(62% 52% at 12% 86%,var(--blob1),transparent 62%),
    radial-gradient(58% 48% at 90% 94%,var(--blob2),transparent 62%),
    radial-gradient(70% 58% at 46% 40%,var(--blob3),transparent 72%),
    linear-gradient(158deg,var(--baseA),var(--baseB));
  background-attachment:fixed;
}
/* glossy light sweep across the wallpaper */
body::before{content:"";position:fixed;left:-10%;right:-10%;top:34%;height:26%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.34),transparent 62%);transform:rotate(-4deg);filter:blur(8px)}

/* ---------- rising bubbles (drawn by aero.js) ---------- */
.bubbles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bubble{position:absolute;border-radius:50%;bottom:-160px;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.92),rgba(255,255,255,.16) 42%,rgba(120,200,255,.12) 70%);
  box-shadow:inset 0 0 14px rgba(255,255,255,.55),0 0 12px rgba(255,255,255,.28);
  animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.85}88%{opacity:.85}100%{transform:translateY(-118vh) translateX(46px);opacity:0}}
@media (prefers-reduced-motion:reduce){.bubble{animation:none;display:none}}

/* ================= the window that holds the whole site ================= */
.shell{position:relative;z-index:1;max-width:1080px;margin:0 auto;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.75);
  background:var(--glass);backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35)}

/* title bar */
.titlebar{position:relative;display:flex;align-items:center;gap:10px;padding:0 10px 0 14px;height:44px;
  background:linear-gradient(180deg,rgba(255,255,255,.62),var(--tbA) 48%,var(--tbB));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 0 rgba(255,255,255,.35)}
.titlebar::after{content:"";position:absolute;inset:0 0 50% 0;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);pointer-events:none}
.tb-orb{width:20px;height:20px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 26%,var(--orbHi),var(--orbMid) 52%,var(--orbLo));
  box-shadow:0 1px 3px rgba(0,50,80,.4),inset 0 -2px 4px rgba(0,60,90,.35)}
.tb-name{font-family:var(--ui);font-weight:700;font-size:14px;letter-spacing:.3px;color:#0d3a4c;
  text-shadow:0 1px 0 rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-path{font-size:12px;color:#245d75;text-shadow:0 1px 0 rgba(255,255,255,.6);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;flex:1}
.tb-btns{display:flex;gap:6px;flex:none}
.tb-btn{width:24px;height:18px;border-radius:5px;border:1px solid rgba(255,255,255,.75);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.35));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);position:relative}
.tb-btn i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:10px;color:#1d5570}
.tb-btn.x{background:linear-gradient(180deg,#ff9a8a,#e2543f)}
.tb-btn.x i{color:#fff}

/* menu strip */
.menu{display:flex;flex-wrap:wrap;gap:6px;padding:9px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.28));
  border-bottom:1px solid rgba(255,255,255,.5)}
.menu a{font-family:var(--ui);font-weight:700;font-size:12.5px;letter-spacing:.4px;text-decoration:none;color:#14495e;
  padding:7px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.7);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.42));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(20,70,100,.14);transition:.15s}
.menu a:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 5px 12px rgba(20,70,100,.22)}
.menu a[aria-current]{color:#fff;border-color:rgba(255,255,255,.5);
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 9px rgba(20,70,100,.3)}

.stage{padding:22px}
.cols{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}

/* ================= panels ================= */
.panel{position:relative;border-radius:14px;overflow:hidden;margin-bottom:18px;
  background:var(--panel);border:1px solid rgba(255,255,255,.85);
  box-shadow:0 8px 22px rgba(16,60,86,.18),inset 0 1px 0 rgba(255,255,255,.95)}
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent)}
.panel-bar{position:relative;display:flex;align-items:center;gap:9px;padding:10px 14px;
  font-family:var(--ui);font-weight:700;font-size:12.5px;letter-spacing:.5px;color:#0f4257;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.42));
  border-bottom:1px solid rgba(255,255,255,.8)}
.dropbead{width:11px;height:11px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 33% 27%,#fff,var(--orbMid) 55%,var(--orbLo));
  box-shadow:0 1px 2px rgba(0,60,90,.35)}
.panel-body{position:relative;padding:16px 18px}

/* ================= hero ================= */
.hero{position:relative;padding:34px 26px;text-align:center}
.hero h1{font-family:var(--ui);font-weight:700;font-size:clamp(26px,4.4vw,40px);line-height:1.18;
  color:#0c3a4d;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.hero p{max-width:62ch;margin:12px auto 0;color:var(--ink2)}
.hero .btnrow{margin-top:18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.btn{display:inline-block;font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.3px;
  text-decoration:none;color:#fff;padding:11px 22px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.55);
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 5px 14px rgba(16,70,100,.32);transition:.15s}
.btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 8px 18px rgba(16,70,100,.4)}
.btn.ghost{color:#12506a;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.55));
  border-color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 4px 10px rgba(16,70,100,.18)}

/* ================= posts ================= */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:#4d7285;font-weight:600}
.meta .dot{width:4px;height:4px;border-radius:50%;background:#9fc3d2;display:inline-block}
.title{font-family:var(--ui);font-weight:700;line-height:1.28;margin:6px 0 8px}
.title a{color:#0e3d51;text-decoration:none}
.title a:hover{color:var(--accent)}
h2.title{font-size:23px} h3.title{font-size:18px}
.excerpt{color:var(--ink2);font-size:15px}
.more{display:inline-block;margin-top:11px;font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:.4px;
  color:var(--accent);text-decoration:none}
.more::after{content:" ›"}
.more:hover{text-decoration:underline}

.post{display:grid;grid-template-columns:96px 1fr;gap:15px;padding:15px 0;border-top:1px dashed rgba(31,105,140,.24)}
.post:first-of-type{border-top:0;padding-top:4px}
.thumb{width:96px;height:96px;border-radius:13px;display:grid;place-items:center;font-size:38px;
  background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.5));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(16,70,100,.18)}

/* ================= sidebar ================= */
.side .panel-body{font-size:14.5px}
.taglist{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-family:var(--ui);font-weight:700;font-size:11.5px;letter-spacing:.3px;text-decoration:none;color:#12506a;
  padding:6px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.5));
  box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(16,70,100,.14);cursor:pointer;transition:.15s}
.tag:hover{transform:translateY(-1px)}
.tag.on{color:#fff;background:linear-gradient(180deg,var(--accent2),var(--accent));border-color:rgba(255,255,255,.5)}

.mini{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-top:1px dashed rgba(31,105,140,.22)}
.mini:first-child{border-top:0;padding-top:0}
.mini .n{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  color:#fff;background:radial-gradient(circle at 32% 26%,var(--orbHi),var(--orbMid) 50%,var(--orbLo));
  box-shadow:inset 0 -2px 4px rgba(0,60,90,.35)}
.mini a{color:#12506a;text-decoration:none;font-weight:600;font-size:14px;line-height:1.35}
.mini a:hover{color:var(--accent)}

/* profile card */
.avatar{width:82px;height:82px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;font-size:36px;
  background:radial-gradient(circle at 32% 26%,#fff,var(--orbMid) 58%,var(--orbLo));
  box-shadow:inset 0 -4px 10px rgba(0,60,90,.35),0 6px 16px rgba(16,70,100,.3)}

/* ================= single post ================= */
.article{font-size:16.5px;color:#1b4453}
.article p{margin:0 0 15px}
.article h2{font-family:var(--ui);font-weight:700;font-size:21px;color:#0e3d51;margin:24px 0 10px}
.article h3{font-family:var(--ui);font-weight:700;font-size:17px;color:#0e3d51;margin:20px 0 8px}
.article ul,.article ol{margin:0 0 15px 22px}
.article li{margin:5px 0}
.article a{color:var(--accent)}
.article .lead{font-size:18px;color:#154a5f}
.article .lead::first-letter{font-family:var(--ui);font-weight:700;font-size:52px;line-height:.86;float:left;
  margin:5px 10px 0 0;color:var(--accent)}
blockquote{margin:18px 0;padding:15px 18px;border-radius:12px;border-left:4px solid var(--accent);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.5));
  box-shadow:inset 0 1px 0 #fff;font-size:16px;color:#14495e}
.figure{margin:18px 0;border-radius:13px;overflow:hidden;border:1px solid rgba(255,255,255,.95);
  box-shadow:0 6px 18px rgba(16,70,100,.2)}
.figure .ph{height:210px;display:grid;place-items:center;font-size:46px;
  background:linear-gradient(150deg,rgba(255,255,255,.85),var(--blob3))}
.figure figcaption{padding:9px 13px;font-size:12.5px;color:#4d7285;background:rgba(255,255,255,.75)}

/* reading progress — an old-school glossy bar */
.progwrap{position:sticky;top:0;z-index:5;height:8px;background:rgba(255,255,255,.5);
  border-bottom:1px solid rgba(255,255,255,.7)}
.prog{height:100%;width:0;background:linear-gradient(180deg,rgba(255,255,255,.8),var(--accent2) 45%,var(--accent));
  box-shadow:0 0 8px rgba(255,255,255,.6)}

/* ================= gallery ================= */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.tile{border:0;padding:0;border-radius:14px;overflow:hidden;cursor:pointer;background:none;text-align:left;font:inherit}
.tile .ph{height:150px;display:grid;place-items:center;font-size:44px;
  background:linear-gradient(150deg,rgba(255,255,255,.92),var(--blob3));
  border:1px solid rgba(255,255,255,.95);border-radius:14px 14px 0 0;
  box-shadow:inset 0 1px 0 #fff}
.tile .cap{padding:9px 12px;font-size:13px;color:#14495e;background:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.9);border-top:0;border-radius:0 0 14px 14px}
.tile:hover .ph{filter:brightness(1.05)}

.lightbox{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:24px;
  background:rgba(8,42,60,.62);backdrop-filter:blur(6px)}
.lightbox.on{display:grid}
.lightbox .box{max-width:560px;width:100%;border-radius:16px;overflow:hidden;
  background:var(--panel);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow)}
.lightbox .ph{height:280px;display:grid;place-items:center;font-size:88px;
  background:linear-gradient(150deg,rgba(255,255,255,.9),var(--blob3))}
.lightbox .cap{padding:13px 16px;color:#14495e}

/* ================= forms ================= */
label{display:block;font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:.3px;color:#12506a;margin:12px 0 5px}
input,textarea,select{width:100%;font-family:var(--body);font-size:15px;color:var(--ink);
  padding:11px 13px;border-radius:11px;border:1px solid rgba(255,255,255,.95);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.72));
  box-shadow:inset 0 2px 4px rgba(16,70,100,.12)}
input:focus,textarea:focus{outline:2px solid var(--accent2);outline-offset:1px}
textarea{min-height:120px;resize:vertical}

.searchrow{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.searchrow input{flex:1;min-width:190px}

/* link buttons page */
.linkbtn{display:flex;align-items:center;gap:13px;text-decoration:none;color:#12506a;
  padding:13px 16px;border-radius:13px;margin-bottom:10px;
  border:1px solid rgba(255,255,255,.95);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.55));
  box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(16,70,100,.16);transition:.15s}
.linkbtn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(16,70,100,.26)}
.linkbtn .g{font-size:24px;flex:none}
.linkbtn b{display:block;font-family:var(--ui);font-size:14px}
.linkbtn span{font-size:12.5px;color:#4d7285}

/* guestbook */
.gb-entry{padding:11px 0;border-top:1px dashed rgba(31,105,140,.24);font-size:14.5px}
.gb-entry:first-child{border-top:0}
.gb-entry b{font-family:var(--ui);color:#0e3d51}
.gb-entry i{font-style:normal;color:#6a8e9d;font-size:12px;margin-left:6px}

/* ================= taskbar ================= */
.taskbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:10px;
  padding:7px 12px;height:52px;
  background:linear-gradient(180deg,rgba(255,255,255,.5),var(--tbA) 45%,var(--tbB));
  border-top:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 -6px 20px rgba(16,60,86,.22);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.startorb{width:38px;height:38px;border-radius:50%;flex:none;border:0;cursor:pointer;display:grid;place-items:center;
  font-size:17px;color:#fff;text-decoration:none;
  background:radial-gradient(circle at 32% 26%,var(--orbHi),var(--orbMid) 48%,var(--orbLo));
  box-shadow:0 3px 10px rgba(0,50,80,.45),inset 0 -3px 8px rgba(0,60,90,.4),inset 0 2px 4px rgba(255,255,255,.7)}
.startorb:hover{filter:brightness(1.08)}
.tasks{display:flex;gap:7px;flex:1;overflow:hidden}
.task{font-family:var(--ui);font-weight:700;font-size:12px;text-decoration:none;color:#0f4257;white-space:nowrap;
  padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95)}
.task:hover{background:linear-gradient(180deg,#fff,rgba(255,255,255,.6))}
.tray{display:flex;align-items:center;gap:9px;flex:none;padding:6px 12px;border-radius:9px;
  border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.swatches{display:flex;gap:5px}
.sw{width:17px;height:17px;border-radius:50%;border:1px solid rgba(255,255,255,.9);cursor:pointer;padding:0;
  box-shadow:0 1px 3px rgba(0,50,80,.35),inset 0 -2px 3px rgba(0,60,90,.3)}
.sw[aria-pressed="true"]{outline:2px solid #fff;outline-offset:1px}
.clock{font-family:var(--ui);font-weight:700;font-size:12.5px;color:#0f4257;text-shadow:0 1px 0 rgba(255,255,255,.7);
  white-space:nowrap}

/* ================= footer ================= */
.foot{position:relative;padding:16px 22px;text-align:center;font-size:12.5px;color:#1c5066;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.2));
  border-top:1px solid rgba(255,255,255,.6)}
.foot a{color:#12506a}
.counter{display:inline-flex;gap:3px;margin-left:6px;vertical-align:-2px}
.counter span{font-family:var(--ui);font-weight:700;font-size:12px;color:#fff;background:rgba(20,80,110,.75);
  border-radius:4px;padding:2px 5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}

/* ================= responsive ================= */
@media (max-width:860px){
  .cols{grid-template-columns:1fr}
  body{padding:14px 12px 92px}
  .stage{padding:14px}
  .tb-path{display:none}
}
@media (max-width:520px){
  .post{grid-template-columns:64px 1fr}
  .thumb{width:64px;height:64px;font-size:27px}
  .tasks{display:none}
  .hero{padding:26px 16px}
}

/* =========================================================================
   THE SIX THEMES — same family as the Frutiger Aero widgets
   ========================================================================= */
html[data-aero="sky"]{
  --baseA:#7fb8f0;--baseB:#a8d4f5;
  --blob1:rgba(255,255,255,.6);--blob2:rgba(150,210,255,.6);--blob3:rgba(120,180,255,.4);
  --tbA:rgba(150,200,255,.55);--tbB:rgba(90,150,225,.45);
  --orbHi:#f0f8ff;--orbMid:#a8d0f5;--orbLo:#3f7fd0;--accent:#3f7fd0;--accent2:#5a9fe0}
html[data-aero="sunset"]{
  --baseA:#ff9d6a;--baseB:#ff7a9c;
  --blob1:rgba(255,180,120,.6);--blob2:rgba(255,120,160,.55);--blob3:rgba(255,220,150,.45);
  --tbA:rgba(255,190,150,.55);--tbB:rgba(230,120,110,.45);
  --orbHi:#fff0e0;--orbMid:#ffc08a;--orbLo:#d6642a;--accent:#c8541f;--accent2:#f07a45;
  --ink:#42200f;--ink2:#7a452c}
html[data-aero="aurora"]{
  --baseA:#5a4fb0;--baseB:#3a6fb0;
  --blob1:rgba(150,120,240,.6);--blob2:rgba(90,220,180,.5);--blob3:rgba(240,120,200,.45);
  --tbA:rgba(160,140,240,.5);--tbB:rgba(90,80,200,.5);
  --orbHi:#f0eaff;--orbMid:#b0a0f0;--orbLo:#6a40c0;--accent:#6a40c0;--accent2:#8f6fe0;
  --ink:#241a44;--ink2:#4d3f74}
html[data-aero="bubblegum"]{
  --baseA:#f2a0d0;--baseB:#e88fc0;
  --blob1:rgba(255,150,210,.6);--blob2:rgba(200,150,255,.5);--blob3:rgba(255,200,230,.45);
  --tbA:rgba(255,170,220,.55);--tbB:rgba(230,120,190,.45);
  --orbHi:#fff0fa;--orbMid:#ffb0e0;--orbLo:#d040a0;--accent:#c0308c;--accent2:#e35cb0;
  --ink:#41143a;--ink2:#75406a}
html[data-aero="lime"]{
  --baseA:#a0e060;--baseB:#6fc850;
  --blob1:rgba(180,240,90,.6);--blob2:rgba(120,220,140,.55);--blob3:rgba(220,255,160,.45);
  --tbA:rgba(190,240,140,.55);--tbB:rgba(120,200,90,.45);
  --orbHi:#f8ffe8;--orbMid:#c8f090;--orbLo:#5a9e30;--accent:#4a8a26;--accent2:#6fb63c;
  --ink:#1d3812;--ink2:#456034}