:root{
  --brand: #0B2D4D;    /* Tune to match bigmarlin.group primary (deep navy) */
  --accent: #0FB8D3;   /* Marlin teal */
  --ink: #0F172A;
  --ink-2: #1E293B;
  --paper: #F8FAFC;
  --muted: #94A3B8;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--paper);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(15,184,211,.25), transparent 60%), #0B1C2E;
  line-height: 1.6;
}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.wrap{max-width:1200px;margin:0 auto;padding:32px 20px}
.site-header{
  position: sticky; top:0; z-index: 40;
  background: linear-gradient(180deg, rgba(11,29,45,.95), rgba(11,29,45,.75));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand__mark{width:28px;height:28px;fill:var(--accent);filter:drop-shadow(0 2px 8px rgba(15,184,211,.5))}
.brand__name{font-weight:800;letter-spacing:.4px}
.nav{display:flex;gap:18px}
.nav a{color:#cfe7ff;text-decoration:none;font-weight:500;opacity:.9}
.nav a:hover{opacity:1;color:#fff}

.site-footer{padding:32px 20px;background:#091827;color:#9fb8c9;border-top:1px solid rgba(255,255,255,.06)}

/* Hero */
.hero{padding:40px 0 10px}
.hero--home .headline{font-size:clamp(32px,6vw,72px);line-height:1.05;margin:0;
  background:linear-gradient(90deg,#fff,#a7eaff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero--home .subhead{color:#C9E6F5;max-width:640px}
.hero--archive .headline{font-size:42px;margin:0 0 8px}

.section{padding:18px 0}
.section__title{font-size:22px;margin:0 0 12px;color:#bfeeff}

/* Buttons */
.btn{
  appearance:none;border:0;cursor:pointer;
  padding:10px 16px;border-radius:12px;
  background:#12283C;color:#E6F3FA;font-weight:600;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 20px rgba(0,0,0,.25);
  transition: transform .12s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px);background:#16324B}
.btn:active{transform:translateY(0)}
.btn--accent{background:linear-gradient(135deg,var(--accent),#59E3F9);color:#003045}

/* Inputs & Chips */
.input{
  width:100%;max-width:540px;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.1);background:#0E2234;color:#E6F3FA;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.chip-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{
  padding:8px 12px;border-radius:999px;background:#102538;color:#d1ecf7;border:1px solid rgba(255,255,255,.08);cursor:pointer
}
.chip.is-active{background:linear-gradient(135deg,var(--accent),#6fe7ff);color:#003045}

/* Grid/cards */
.pen-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px
}
.pen-card{
  background: radial-gradient(600px 240px at 10% -20%, rgba(15,184,211,.18), transparent 60%), #0E2032;
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.pen-card:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18);}
.pen-card a{display:block; padding:14px 14px 18px; text-decoration:none; color:inherit}
.pen-card__thumb{height:140px;border-radius: 12px;background:
  linear-gradient(180deg, rgba(255,255,255,.06), transparent),
  repeating-linear-gradient(45deg, rgba(15,184,211,.15) 0 2px, transparent 2px 6px),
  #0B1C2E; border:1px solid rgba(255,255,255,.06);}
.pen-card__title{margin:12px 0 6px; font-size:18px; color:#DDF3FF}
.pen-card__excerpt{margin:0; color:#b7d3e6; min-height:42px}
.pen-card__meta{margin-top:12px; display:flex; justify-content:space-between; color:#94b8cc; font-size:12px}

/* Single Pen */
.pen__header{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:12px}
.pen__title{margin:0;font-size:clamp(24px,4.5vw,40px);color:#E8F8FF}
.pen__meta{display:flex;gap:10px;align-items:center;color:#b8dfff;flex-wrap:wrap}
.pen__tags a{display:inline-block;margin-left:8px;color:#a7eaff}
.pen__actions{display:flex;gap:10px;flex-wrap:wrap}

.pen__preview{margin:12px 0 10px}
.pen__preview iframe{width:100%;height:420px;border:1px solid rgba(255,255,255,.1);background:#fff;border-radius:12px;box-shadow: var(--shadow)}

.pen__editor{
  display:grid; gap:0; grid-template-rows:auto 1fr;
  background: #0A1B2B; border:1px solid rgba(255,255,255,.06); border-radius: 16px; overflow:hidden;
}
.tabs{display:flex;gap:8px;padding:10px;background:#0C2032;border-bottom:1px solid rgba(255,255,255,.06)}
.tab{padding:8px 12px;border-radius:10px;background:#0E2438;color:#bfeaff;border:1px solid rgba(255,255,255,.06);cursor:pointer}
.tab.is-active{background:linear-gradient(135deg,var(--accent),#6fe7ff);color:#003045}
.tabpanes{display:block}
.tabpane{display:none}
.tabpane.is-active{display:block}
.tabpane textarea{
  width:100%; min-height:300px; padding:12px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  border:0; outline:0; resize:vertical; color:#e6f3fa; background:#071420;
}

/* Utilities */
.hidden{display:none}
@media (min-width: 900px){
  .pen__preview iframe{height:540px}
}
.pen-form label{display:block;margin:8px 0 6px;color:#cfe7ff;font-weight:600}
.file-item{margin:8px 0;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#0b2032}