@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
/* Prevent FOUF: hide logo letters until JS controls the font */
.bl{opacity:0}

/* ── LIGHT THEME ── */
:root,[data-theme="light"]{
  --bg:#f7f4ef;--surface:#fdfcfb;--surface2:#ece9e3;--border:rgba(0,0,0,.1);--border2:rgba(0,0,0,.2);
  --ink:#0d0d0d;--text:#0d0d0d;--muted:#6b6259;--muted2:#a09790;--paper:#f7f4ef;
  --icon:#2a2a2a;--danger:#b91c1c;
  --age1-title:#2a2a2a;--age1-body:#7a7268;
  --age2-title:#5a5a5a;--age2-body:#9a9290;
  --age3-title:#7a7a7a;--age3-body:#b0aaa5;
  --age4-title:#999;   --age4-body:#bbb;
  --blackletter:'Cormorant Garamond',Georgia,serif;
  --aptos:'Aptos Display','Aptos','Noto Sans','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* ── DARK THEME ── */
[data-theme="dark"]{
  --bg:#111110;--surface:#1a1917;--surface2:#222120;--border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.16);
  --ink:#f0ece4;--text:#e8e4dc;--muted:#9a9088;--muted2:#6a6460;--paper:#111110;
  --icon:#d0ccc4;--danger:#f87171;
  --age1-title:#ddd;--age1-body:#8a8480;
  --age2-title:#aaa;--age2-body:#706c68;
  --age3-title:#888;--age3-body:#585450;
  --age4-title:#666;--age4-body:#484440;
}

*{margin:0;padding:0;box-sizing:border-box}
html{transition:background .25s,color .25s;-webkit-text-size-adjust:100%;text-size-adjust:100%}

body{
  background:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  font-family:var(--aptos);color:var(--text);min-height:100vh;
  transition:background .25s,color .25s;
}

.wrap{max-width:100%;margin:0;padding:0 clamp(.8rem,3vw,2.5rem) 4rem;position:relative;z-index:1;overflow-x:hidden}

/* ── THEME TOGGLE ── */
.corner-controls{
  position:fixed;bottom:1.5rem;right:1.5rem;
  display:flex;flex-direction:column;gap:.5rem;
  z-index:900;
}
#themeToggle{
  width:40px;height:40px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.15);
  transition:background .25s,border-color .25s,box-shadow .25s;
}
#themeToggle:hover{box-shadow:0 3px 16px rgba(0,0,0,.22)}
#themeToggle svg{transition:opacity .2s}
#settingsBtn{
  width:40px;height:40px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.15);
  transition:background .25s,border-color .25s,box-shadow .25s,transform .25s;
}
#settingsBtn:hover{box-shadow:0 3px 16px rgba(0,0,0,.22);transform:rotate(45deg)}

/* ── MASTHEAD ── */
.top-bar{text-align:left;padding:1.5rem 0 0;animation:mastheadReveal .7s cubic-bezier(.22,1,.36,1) both;position:relative}
.top-bar::before{content:'';display:block;height:4px;background:var(--ink);margin-bottom:.5rem;transition:background .25s}
.masthead-meta{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;font-family:var(--aptos);font-size:clamp(.65rem,2vw,.85rem);font-weight:500;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;padding:.6rem 0;border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);margin-bottom:.6rem;transition:color .25s,border-color .25s}
.masthead-date-left,.masthead-edition{flex:1}
.masthead-edition{text-align:right}
.logo-name-wrap{display:inline-flex;align-items:center;line-height:1;gap:.04em}
.logo-name{font-family:var(--blackletter);font-weight:600;font-size:clamp(2rem,7vw,4.2rem);letter-spacing:0;color:var(--ink);display:inline-flex;align-items:flex-end;line-height:1;transition:color .25s;gap:.04em}
.logo-tag{font-family:var(--aptos);font-size:clamp(.75rem,5vw,1rem);font-weight:500;color:var(--muted2);letter-spacing:.08em;text-transform:uppercase;margin-top:.4rem;display:block;transition:color .25s}
.masthead-bottom-rule{height:1px;background:var(--ink);margin:1rem 0 2rem;transition:background .25s}
@keyframes mastheadReveal{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

/* ── BEACON FLIP CLOCK CARDS ── */
.bl{display:inline-block;position:relative;vertical-align:middle;perspective:800px;margin:0 .05em}
.bl-card{display:block;position:absolute;left:0;width:100%;overflow:hidden;background:var(--bl-bg);border-radius:var(--bl-r)}
.bl-card-top{top:0;height:50%;border-radius:var(--bl-r) var(--bl-r) 0 0;border-bottom:1.5px solid rgba(0,0,0,.5)}
.bl-card-bot{top:50%;height:50%;border-radius:0 0 var(--bl-r) var(--bl-r)}
.bl-card span,.bl-flap span{display:block;position:absolute;left:0;width:100%;text-align:center;font-family:var(--blackletter);font-weight:600;color:#ede8d8;line-height:1;white-space:nowrap}
.bl-card-top span{bottom:1%}
.bl-card-bot span{top:-50%}
.bl-flap{display:block;position:absolute;left:0;width:100%;height:50%;overflow:hidden;background:var(--bl-bg);backface-visibility:hidden;z-index:4}
.bl-flap-top{top:0;transform-origin:bottom center;transform:rotateX(0deg);border-radius:var(--bl-r) var(--bl-r) 0 0;border-bottom:1.5px solid rgba(0,0,0,.5)}
.bl-flap-bot{top:50%;transform-origin:top center;transform:rotateX(90deg);border-radius:0 0 var(--bl-r) var(--bl-r)}
.bl-flap-top span{bottom:1%}
.bl-flap-bot span{top:-50%}
.bl-outer{position:absolute;inset:0;border-radius:var(--bl-r);box-shadow:0 6px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);pointer-events:none;z-index:8}
.bl{--bl-bg:#26203d;--bl-r:6px;--bl-txt:#ede8d8}
[data-theme="dark"] .bl{--bl-bg:#e8e2d4;--bl-r:6px;--bl-txt:#1a1520}




/* ── GRID ── */
.posts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border);align-items:start;transition:border-color .25s}
.grid-item{background:var(--paper);border-bottom:1px solid var(--border);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:1.2rem 1.3rem;height:auto;transition:background .2s,border-color .25s}
.grid-item:hover{background:var(--surface2)}
.grid-item--featured{grid-column:span 2;grid-row:span 2}

/* ── FEED TYPOGRAPHY ── */
.item-title{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;margin-bottom:.3rem}
/* Base: older/smaller items */
.item-title-text{font-family:var(--aptos);font-weight:700;font-size:clamp(.82rem,1.8vw,.98rem);color:var(--ink);line-height:1.3;letter-spacing:-.015em;transition:color .25s}
.item-content{font-size:clamp(.72rem,1.6vw,.82rem);color:var(--muted);line-height:1.65;white-space:pre-wrap;word-break:break-word;transition:color .25s}
/* Older posts collapse to a 3-line summary until "Show more…" is tapped */
.item-content--clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.item-content--clamp.item-content--open{display:block;-webkit-line-clamp:unset;overflow:visible}
.show-more{margin-top:.5rem;align-self:flex-start;background:none;border:none;padding:.1rem 0;font-family:var(--aptos);font-size:.7rem;font-weight:600;letter-spacing:.02em;color:var(--ink);cursor:pointer;transition:color .2s}
.show-more:hover{text-decoration:underline;opacity:.8}
/* Secondary items (age=1, non-featured) */
.grid-item[data-rank="2"] .item-title-text,.grid-item[data-rank="3"] .item-title-text{font-size:clamp(.88rem,2vw,1.02rem)}
.grid-item[data-rank="2"] .item-content,.grid-item[data-rank="3"] .item-content{font-size:clamp(.76rem,1.7vw,.86rem)}
/* Featured/latest — largest, and content-aware: short headlines grow, long ones stay readable */
.grid-item--featured .item-title-text{font-size:clamp(1.5rem,4vw,2.6rem);letter-spacing:-.03em;line-height:1.18}
.grid-item--featured[data-tlen="short"] .item-title-text{font-size:clamp(1.9rem,6vw,3.4rem)}
.grid-item--featured[data-tlen="long"]  .item-title-text{font-size:clamp(1.35rem,3.2vw,2.1rem);line-height:1.22}
.grid-item--featured .item-content{font-size:clamp(1.05rem,2.6vw,1.25rem);color:var(--text);line-height:1.72}
.grid-item--featured[data-tlen="short"] .item-content{font-size:clamp(1.1rem,2.8vw,1.35rem)}

/* Aging */
.grid-item[data-age="1"] .item-title-text{color:var(--age1-title)}
.grid-item[data-age="1"] .item-content{color:var(--age1-body)}
.grid-item[data-age="2"] .item-title-text{color:var(--age2-title)}
.grid-item[data-age="2"] .item-content{color:var(--age2-body)}
.grid-item[data-age="3"] .item-title-text{color:var(--age3-title)}
.grid-item[data-age="3"] .item-content{color:var(--age3-body)}
.grid-item[data-age="4"] .item-title-text{color:var(--age4-title)}
.grid-item[data-age="4"] .item-content{color:var(--age4-body)}

/* ── META TAGS ── */
.item-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin:.3rem 0 .6rem;align-items:center}
.role-tag{font-size:.6rem;font-weight:700;padding:.1rem .38rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--aptos);border:1px solid currentColor;transition:opacity .25s}
.role-CEO{color:#8b1a0a;background:rgba(139,26,10,.07);border-color:#8b1a0a}
[data-theme="dark"] .role-CEO{color:#e07060;background:rgba(224,112,96,.1);border-color:#e07060}
.role-CIO,.role-CTO,.role-CAIO,.role-CDAIO,.role-CISO,.role-CTrO,.role-CDO,.role-CFO,.role-CEA{color:#0a4a44;background:rgba(10,74,68,.07);border-color:#0a4a44}
[data-theme="dark"] .role-CIO,[data-theme="dark"] .role-CTO,[data-theme="dark"] .role-CAIO,[data-theme="dark"] .role-CDAIO,[data-theme="dark"] .role-CISO,[data-theme="dark"] .role-CTrO,[data-theme="dark"] .role-CDO,[data-theme="dark"] .role-CFO,[data-theme="dark"] .role-CEA{color:#4db8b0;background:rgba(77,184,176,.1);border-color:#4db8b0}
.type-Announcement{color:#0a4a44;background:rgba(10,74,68,.07);border-color:#0a4a44}
[data-theme="dark"] .type-Announcement{color:#4db8b0;background:rgba(77,184,176,.1);border-color:#4db8b0}
.type-Notice{color:#8b1a0a;background:rgba(139,26,10,.07);border-color:#8b1a0a}
[data-theme="dark"] .type-Notice{color:#e07060;background:rgba(224,112,96,.1);border-color:#e07060}
.type-Event{color:#1a4a8b;background:rgba(26,74,139,.07);border-color:#1a4a8b}
.event-date-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:600;color:#1a4a8b;background:rgba(26,74,139,.07);border:1px solid rgba(26,74,139,.2);border-radius:2px;padding:.25rem .55rem;margin-bottom:.6rem;letter-spacing:.01em}
[data-theme="dark"] .event-date-badge{color:#6090e0;background:rgba(96,144,224,.1);border-color:rgba(96,144,224,.25)}
.event-date-badge svg{stroke:#1a4a8b;flex-shrink:0}
[data-theme="dark"] .event-date-badge svg{stroke:#6090e0}
[data-theme="dark"] .type-Event{color:#6090e0;background:rgba(96,144,224,.1);border-color:#6090e0}
.type-Award{color:#7a4a00;background:rgba(122,74,0,.07);border-color:#7a4a00}
[data-theme="dark"] .type-Award{color:#c8901a;background:rgba(200,144,26,.1);border-color:#c8901a}
.meta-date{font-size:.7rem;color:var(--muted2);font-weight:400;transition:color .25s}

/* ── MEDIA ── */
/* Images are 1:1 squares — show them as tidy squares, capped so they don't
   dominate wide cards; full-width on narrow (phone) columns. */
.attached-media{width:100%;max-width:460px;margin:0 0 .75rem;background:var(--surface2);border:1px solid var(--border);overflow:hidden;border-radius:2px;transition:border-color .25s}
.attached-media video,.attached-media img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block}
.grid-item--featured .attached-media{max-width:560px}

/* ── AWARD POSTER ── */
.award-poster{aspect-ratio:2/3;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;border-radius:4px;margin:.5rem auto;padding:2.2rem 1.8rem 2rem;background:linear-gradient(168deg,#1c1530 0%,#0d0a14 50%,#14101f 100%);border:1px solid rgba(200,144,26,.55);box-shadow:0 0 0 1px rgba(0,0,0,.9),0 0 0 5px rgba(200,144,26,.08),0 24px 60px rgba(0,0,0,.65)}
.award-poster::before{content:'';position:absolute;inset:8px;border:1px solid rgba(224,178,96,.16);border-radius:2px;pointer-events:none;z-index:0}
.award-poster::after{content:'';position:absolute;top:18%;left:50%;transform:translateX(-50%);width:260px;height:260px;background:radial-gradient(circle,rgba(224,178,96,.09) 0%,transparent 70%);border-radius:50%;pointer-events:none;z-index:0}
.award-poster>*{position:relative;z-index:1}
.award-poster-ornament{display:flex;align-items:center;gap:.55rem;width:72%;margin:0 auto .9rem;font-size:.72rem;color:rgba(224,178,96,.5);letter-spacing:.15em}
.award-poster-ornament::before,.award-poster-ornament::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(224,178,96,.4))}
.award-poster-ornament::after{background:linear-gradient(270deg,transparent,rgba(224,178,96,.4))}
.award-poster-brand{display:flex;flex-direction:column;align-items:center;gap:.38rem;margin-bottom:1.1rem}
.award-poster-logo{width:40px;height:40px;border-radius:10px;box-shadow:0 2px 16px rgba(224,178,96,.28),0 0 0 1px rgba(224,178,96,.18)}
.award-poster-orgname{font-size:.48rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(224,178,96,.75);font-weight:700}
.award-medal{position:relative;width:84px;height:108px;margin:0 auto 1.2rem;filter:drop-shadow(0 6px 22px rgba(200,144,26,.5))}
.award-medal-ribbon{position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:52px;background:linear-gradient(to right,#6b3a00 0%,#c8901a 18%,#f3d9a6 36%,#e0b260 50%,#f3d9a6 64%,#c8901a 82%,#6b3a00 100%);clip-path:polygon(0 0,100% 0,100% 86%,50% 100%,0 86%)}
.award-medal-ribbon::after{content:'';position:absolute;top:0;left:26%;width:20%;height:100%;background:rgba(255,255,255,.22)}
.award-medal-disc{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:72px;height:72px;border-radius:50%;background:conic-gradient(from 40deg,#6b3a00,#c8901a 20%,#f3d9a6 36%,#e0b260 50%,#c8901a 68%,#f3d9a6 82%,#e0b260 90%,#6b3a00);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 18px rgba(0,0,0,.55),inset 0 1.5px 5px rgba(255,255,255,.28),inset 0 -1px 4px rgba(0,0,0,.25)}
.award-medal-disc::before{content:'';position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#f3d9a6 0%,#e0b260 46%,#b07010 100%);z-index:0}
.award-medal-disc::after{content:'';position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.35) 0%,transparent 55%);z-index:1}
.award-medal-star{position:relative;z-index:2}
.award-poster-rule{width:62%;height:1px;background:linear-gradient(90deg,transparent,rgba(224,178,96,.5),transparent);margin:.65rem auto}
.award-poster-type{font-size:.46rem;letter-spacing:.24em;text-transform:uppercase;color:#e0b260;font-weight:700;margin-bottom:.28rem}
.award-poster-name{font-family:var(--blackletter);font-size:clamp(1.45rem,5.5vw,2.1rem);font-weight:600;color:#f3d9a6;line-height:1.1;letter-spacing:.025em;margin-bottom:.1rem;text-shadow:0 2px 22px rgba(224,178,96,.32)}
.award-poster-presented{font-size:.42rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(237,232,216,.28);margin:.5rem 0 .2rem}
.award-poster-recipient{font-family:var(--blackletter);font-size:clamp(1.75rem,7vw,2.8rem);font-weight:600;color:#fff;line-height:1;letter-spacing:.015em;text-shadow:0 2px 22px rgba(255,255,255,.12);margin-bottom:.08rem}
.award-poster-category{font-size:.44rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(224,178,96,.58);margin:.45rem 0 0}
.award-poster-year{font-size:.4rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(237,232,216,.18);margin-top:.85rem}

/* ── ADMIN ── */
.admin-layout{display:grid;grid-template-columns:1fr 340px;gap:2rem;align-items:start}
.card{background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:1rem 1.2rem;transition:background .25s,border-color .25s}
.form-group{margin-bottom:1.2rem}
.form-group label{font-size:.6rem;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:.4rem;margin-bottom:.5rem;letter-spacing:.08em;text-transform:uppercase;transition:color .25s}
.form-group input,.form-group textarea,.form-group select,.form-group .rich-editor{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:3px;color:var(--text);font-family:var(--aptos);font-size:.85rem;padding:.7rem .8rem;transition:all .2s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus,.form-group .rich-editor:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 2px rgba(128,128,128,.12);background:var(--surface)}
/* ── RICH MESSAGE EDITOR ── */
.rich-editor{min-height:5.5rem;max-height:18rem;overflow:auto;line-height:1.6;cursor:text;white-space:pre-wrap;word-break:break-word}
.rich-editor:empty:before{content:attr(data-ph);color:var(--muted2);pointer-events:none}
.rich-editor b,.rich-editor strong{font-weight:700}
/* Floating selection toolbar */
.fmt-bar{position:fixed;z-index:2500;display:none;gap:.12rem;padding:.25rem;background:var(--ink);border-radius:6px;box-shadow:0 4px 18px rgba(0,0,0,.3);align-items:center}
.fmt-bar.show{display:flex}
.fmt-bar button{min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:4px;color:var(--bg);cursor:pointer;font-family:var(--aptos);line-height:1;padding:0 .35rem;transition:background .15s}
.fmt-bar button:hover{background:rgba(150,150,150,.28)}
.fmt-sep{width:1px;height:18px;background:rgba(150,150,150,.4);margin:0 .15rem}

/* ── ICON BUTTON BASE ── */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border2);border-radius:3px;
  color:var(--muted);cursor:pointer;padding:.45rem .7rem;
  transition:all .18s;font-family:var(--aptos);font-size:.75rem;font-weight:500;
  gap:.35rem;white-space:nowrap;min-height:36px;min-width:36px;
}
.icon-btn:hover{border-color:var(--ink);color:var(--ink);background:var(--surface2)}
.icon-btn--primary{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.icon-btn--primary:hover{opacity:.82}
/* primary button checkmark stays bg-colored */
.icon-btn--primary svg{stroke:var(--bg)}
.icon-btn--danger:hover{color:var(--danger);border-color:var(--danger)}

/* Single sync button states: red=offline · amber=connecting · green=connected+auto-committing */
#gistSaveBtn{transition:background .2s,border-color .2s,color .2s,opacity .2s}
.sync-red{background:#b91c1c;border-color:#b91c1c;color:#fff}
.sync-red:hover{background:#a11717;border-color:#a11717;color:#fff}
.sync-red svg{stroke:#fff}
.sync-amber{background:#d97706;border-color:#d97706;color:#fff;cursor:wait}
.sync-amber:hover{background:#d97706;border-color:#d97706;color:#fff}
.sync-amber svg{stroke:#fff}
.sync-green{background:#15803d;border-color:#15803d;color:#fff;cursor:default}
.sync-green:hover{background:#15803d;border-color:#15803d;color:#fff;opacity:1}
.sync-green svg{stroke:#fff}

/* SVG icons inherit --icon color via CSS currentColor trick */
.icon-btn svg,.adm-tab svg,.msg-type-pill svg,.file-label svg,.form-group label svg{
  stroke:var(--icon);transition:stroke .2s;flex-shrink:0
}
.icon-btn:hover svg{stroke:var(--ink)}
.icon-btn--primary svg{stroke:var(--bg)}
.icon-btn--danger:hover svg{stroke:var(--danger)}
.msg-type-pill.active svg{stroke:var(--bg)}

/* ── TABS ── */
.admin-tabs{display:flex;gap:0;border-bottom:1px solid var(--border2);margin-bottom:.75rem;transition:border-color .25s}
.adm-tab{background:transparent;border:none;border-bottom:2px solid transparent;padding:.45rem .75rem;cursor:pointer;transition:border-color .14s;margin-bottom:-1px;display:inline-flex;align-items:center;gap:.35rem;min-height:36px}
.adm-tab.active{border-bottom-color:var(--ink)}

.card-header{display:flex;justify-content:space-between;align-items:center;padding:0 0 .6rem;border-bottom:2px solid var(--ink);flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem;transition:border-color .25s}
.card-header h2{font-family:var(--aptos);font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);transition:color .25s}

.msg-type-pills{display:flex;gap:.5rem;flex-wrap:wrap}
.msg-type-pill{font-size:.85rem;padding:.4rem .55rem;border:1px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer;transition:all .14s;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;min-height:36px;min-width:36px}
.msg-type-pill.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.file-label{background:none;border:1px solid var(--border2);border-radius:3px;padding:.45rem .7rem;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:.4rem;min-height:36px;color:var(--muted)}
.file-label:hover{border-color:var(--ink);background:var(--surface2);color:var(--ink)}
.file-label:hover svg{stroke:var(--ink)}

/* ── TOAST ── */
.toast{position:fixed;bottom:5rem;right:1.5rem;background:var(--ink);color:var(--bg);padding:.55rem 1rem;border-radius:2px;font-size:.7rem;z-index:1100;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}

/* ── MAGIC MODAL ── */
.magic-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);z-index:2000;align-items:center;justify-content:center}
[data-theme="light"] .magic-overlay{background:rgba(245,242,238,.6)}
.magic-overlay.open{display:flex}
.magic-modal{background:var(--surface);border:1px solid var(--border2);padding:1.8rem 2rem;width:min(300px,90vw);box-shadow:0 8px 32px rgba(0,0,0,.2);border-radius:4px}
.magic-modal input{width:100%;margin:.6rem 0;padding:.5rem .7rem;border:1px solid var(--border2);border-radius:3px;background:var(--bg);color:var(--text);font-size:.9rem;font-family:var(--aptos)}
.magic-modal input:focus{outline:none;border-color:var(--ink)}

/* ── DOT BUTTON (LIVE BEACON) ── */
#dotBtn{display:inline-block;width:10px;height:10px;border-radius:50%;border:none;cursor:pointer;margin-left:2px;background:var(--ink);transition:opacity .15s,background .25s;align-self:flex-end;position:relative;bottom:2px;flex-shrink:0;animation:beaconCore 2.4s ease-in-out infinite;opacity:0}
/* Dot stays hidden until the flip animation finishes, then fades in */
#dotBtn.revealed{opacity:1;transition:opacity .9s ease,background .25s}
#dotBtn::before,#dotBtn::after{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;border:1px solid var(--ink);transform:translate(-50%,-50%) scale(1);opacity:0;pointer-events:none;animation:beaconPing 2.4s cubic-bezier(.36,.11,.25,1) infinite}
#dotBtn::after{animation-delay:1.2s}
#dotBtn:hover{opacity:.5}
#dotBtn:hover::before,#dotBtn:hover::after{animation-play-state:paused}
@keyframes beaconCore{0%,100%{box-shadow:0 0 2px 0 var(--ink)}50%{box-shadow:0 0 8px 1.5px var(--ink)}}
@keyframes beaconPing{0%{opacity:.55;transform:translate(-50%,-50%) scale(1)}70%{opacity:0;transform:translate(-50%,-50%) scale(4.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(4.2)}}
@media(prefers-reduced-motion:reduce){#dotBtn,#dotBtn::before,#dotBtn::after{animation:none}}

/* ── FOOTER ── */
footer{margin-top:3rem;text-align:center;font-size:.6rem;color:var(--muted2);border-top:3px double var(--ink);padding-top:1rem;transition:color .25s,border-color .25s}

/* ── RESPONSIVE ── */
@media(max-width:1000px){
  .posts-grid{grid-template-columns:repeat(2,1fr)}
  .grid-item--featured{grid-column:span 2;grid-row:span 1}
  .admin-layout{grid-template-columns:1fr;gap:1.5rem}
}
@media(max-width:700px){
  .posts-grid{grid-template-columns:1fr}
  .grid-item--featured{grid-column:span 1}
  .grid-item--featured .item-title-text{font-size:clamp(1.25rem,6vw,1.8rem)}
  .grid-item--featured .item-content{font-size:clamp(.9rem,3.5vw,1.05rem)}
}
@media(max-width:480px){
  .wrap{padding:0 .9rem 2rem}
  .grid-item{padding:.85rem .9rem}
  .corner-controls{bottom:1rem;right:1rem}
  .masthead-meta{font-size:.6rem}
}
@media(max-width:360px){
  .wrap{padding:0 .7rem 1.5rem}
  .grid-item{padding:.7rem .75rem}
  .grid-item--featured .item-title-text{font-size:clamp(1.1rem,7vw,1.5rem)}
}
/* Landscape phones */
@media(max-height:500px) and (orientation:landscape){
  .logo-name{font-size:clamp(1.6rem,7vh,3.2rem)}
  .attached-media,.grid-item--featured .attached-media{max-width:240px}
  .grid-item--featured .item-title-text{font-size:clamp(1.1rem,3vh,1.8rem)}
}
/* Tablet portrait */
@media(min-width:600px) and (max-width:900px) and (orientation:portrait){
  .posts-grid{grid-template-columns:repeat(2,1fr)}
  .grid-item--featured{grid-column:span 2;grid-row:span 1}
  .grid-item--featured .item-title-text{font-size:clamp(1.3rem,4vw,2rem)}
}
/* Tablet landscape */
@media(min-width:900px) and (max-width:1200px) and (orientation:landscape){
  .posts-grid{grid-template-columns:repeat(4,1fr)}
  .grid-item--featured{grid-column:span 2;grid-row:span 2}
  .grid-item--featured .item-title-text{font-size:clamp(1.4rem,3.5vw,2.2rem)}
}
@media(min-width:1400px){.wrap{padding:0 4rem 5rem}}
@media(min-width:1800px){
  .wrap{padding:0 6rem 5rem}
}
/* Ultra-wide desktops / 4K: use the extra width, keep columns readable */
@media(min-width:2100px){
  .wrap{max-width:2400px;margin:0 auto;padding:0 4rem 5rem}
  .posts-grid{grid-template-columns:repeat(4,1fr)}
  .grid-item--featured{grid-column:span 2;grid-row:span 2}
}