/* BoardKub — sky edition
   Deep sky at the top, haze below, clouds along the bottom edge.
   Content lives in one frosted "window"; the yellow pill is reserved
   for the single most important action on a page. */

:root {
  --sky-deep: #2559bf;
  --sky-mid: #3b74d3;
  --sky-light: #8db9f0;
  --haze: #e4eefb;

  --glass: rgba(255, 255, 255, .80);
  --glass-strong: rgba(255, 255, 255, .92);
  --white: #ffffff;

  --ink: #13233f;
  --ink-2: #33445f;
  --muted: #5d6d86;
  --line: rgba(19, 35, 63, .10);
  --line-strong: rgba(19, 35, 63, .18);
  --tint: #eef4fd;

  --link: #1f5bc4;
  --sun: #f7c948;
  --sun-hover: #f2bb22;
  --danger: #b4321f;
  --ok: #1d7a4c;

  --r-window: 28px;
  --r-row: 18px;
  --r-field: 14px;

  --serif: 'Instrument Serif', 'Noto Serif Thai', Georgia, serif;
  --sans: 'Inter', 'IBM Plex Sans Thai', system-ui, -apple-system, sans-serif;

  --shadow-window: 0 30px 80px -30px rgba(18, 52, 120, .45), 0 2px 0 rgba(255, 255, 255, .6) inset;
}

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

html { background: var(--haze); }

body {
  position: relative;
  isolation: isolate;        /* lets the cloud layers (z-index:-1) paint above the sky */
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background:
    url('../img/clouds-top.svg') top center / 1600px auto no-repeat,
    linear-gradient(180deg, var(--sky-deep) 0, var(--sky-mid) 420px, var(--sky-light) 780px, var(--haze) 1120px) top / 100% 1120px no-repeat,
    var(--haze);
  padding-bottom: 180px;
}

/* Clouds stay along the bottom of the screen, behind everything */
body::before {
  content: "";
  position: fixed; left: 0; right: 0; bottom: 0; height: 260px;
  background: url('../img/clouds-bottom.svg') bottom center / max(1600px, 100%) auto no-repeat;
  pointer-events: none;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent);
          mask-image: linear-gradient(to top, #000 60%, transparent);
}

/* A whisper of grain, like printed sky */
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .05;
  pointer-events: none;
  z-index: -1;
}

/* Thai stacks vowels and tone marks above and below the line, so headings need taller lines than Latin */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.3; letter-spacing: -.01em; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 10px; }

code {
  padding: 2px 8px; border-radius: 999px;
  background: var(--tint); color: var(--ink-2);
  font-family: var(--sans); font-size: .86em;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Top bar: floating pills over the sky ---------- */

.topbar { position: relative; z-index: 2; }
.topbar .inner {
  max-width: 1180px; margin: 0 auto; padding: 22px 28px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--white); }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35);
}
.brand-mark img { width: 22px; height: auto; transform: translateX(-1px); }
.brand-name { font-family: var(--serif); font-size: 28px; letter-spacing: -.02em; }
.brand-tag { display: none; }

.navpill {
  flex: 1 1 380px; max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 18px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.navpill > a { flex-shrink: 0; padding: 0 6px; color: var(--white); font-size: 14px; font-weight: 500; }
.searchbox { flex: 1; min-width: 0; }
.searchbox input {
  width: 100%; padding: 8px 16px;
  border: 0; border-radius: 999px;
  background: var(--glass-strong); color: var(--ink);
  font-family: inherit; font-size: 14px;
}
.searchbox input::placeholder { color: var(--muted); }

.topnav { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.topnav a, .topnav span { color: var(--white); }
.topnav .who {
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .32);
}
.topnav .btn.ghost { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); color: var(--white); }
.topnav .btn.ghost:hover { background: rgba(255, 255, 255, .26); }
.topnav .btn:not(.ghost) { background: var(--white); color: var(--ink); }
.topnav .btn:not(.ghost):hover { background: var(--tint); }

/* ---------- Home hero ---------- */

.hero {
  position: relative; max-width: 900px; margin: 26px auto 46px; padding: 0 28px;
  text-align: center; color: var(--white);
}
.hero h1 {
  font-size: clamp(52px, 8.4vw, 104px);
  line-height: 1.22;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.hero p {
  max-width: 34em; margin: 20px auto 0;
  font-size: 18px; line-height: 1.65; color: #f4f8ff;
}
.hero .btn { margin-top: 30px; }

.plane {
  position: absolute; right: -40px; top: -18px; width: 120px; height: auto;
  filter: drop-shadow(0 12px 18px rgba(16, 48, 110, .35));
  animation: glide 1.6s cubic-bezier(.2, .7, .2, 1) both;
}
.trail {
  position: absolute; right: 66px; top: 28px; width: 220px; height: 70px;
  pointer-events: none; opacity: .85;
  animation: trail-in 1.6s ease-out both;
}
@keyframes glide {
  from { opacity: 0; transform: translate(-160px, 70px) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes trail-in { from { opacity: 0; } to { opacity: .85; } }

/* ---------- Landing page (index.html) ---------- */

.hero-full {
  min-height: calc(100vh - 90px); min-height: calc(100svh - 90px);
  max-width: 980px; margin: 0 auto; padding-top: 9vh;
  display: flex; flex-direction: column; align-items: center;
}
.hero-full h1 { font-size: clamp(52px, min(10vw, 13vh), 132px); }
.hero-full p { font-size: 19px; text-shadow: 0 1px 14px rgba(20, 60, 140, .45); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; margin-top: 34px; }
.hero-actions .btn { margin-top: 0; padding: 15px 30px; font-size: 16px; }
.hero-link { color: var(--white); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255, 255, 255, .5); }
.hero-link:hover { text-decoration-color: var(--white); }
/* Plane and its dotted trail fly in a strip above the headline, never across the text */
.flight { position: relative; width: min(520px, 78%); height: 92px; margin: 0 auto 4px; }
.flight .trail { position: absolute; left: 0; right: 92px; top: auto; bottom: 8px; width: auto; height: 70px; }
.flight .plane { position: absolute; right: 0; top: 0; width: 104px; }
.hero-ghost { background: rgba(19, 35, 63, .28); border-color: rgba(255, 255, 255, .55); color: var(--white); }
.hero-ghost:hover { background: rgba(19, 35, 63, .45); }
.scroll-hint {
  margin-top: auto; margin-bottom: 26px;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--white); color: var(--ink);
  box-shadow: 0 8px 24px -8px rgba(18, 52, 120, .45);
}
.scroll-hint:hover { background: var(--sun); }

.why {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto; padding: 56px 56px 52px;
  background: var(--glass); border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--r-window);
  box-shadow: var(--shadow-window);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.why h2 { max-width: 15em; font-size: clamp(38px, 5vw, 60px); }
.why-lead { max-width: 58ch; margin-top: 16px; font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 44px; }
.why-item { padding: 6px 30px 4px; border-left: 1px solid var(--line-strong); }
.why-item:first-child { padding-left: 0; border-left: 0; }
.why-icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px;
  border-radius: 16px; background: var(--sun);
}
.why-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.why-item h3 { font-size: 30px; }
.why-item p { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--muted); }

.steps { max-width: 1180px; margin: 96px auto 0; padding: 0 28px; text-align: center; }
.steps h2 { font-size: clamp(38px, 5vw, 60px); color: var(--ink); }
.step-list {
  list-style: none; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px;
}
.step-list::before {   /* the line that links the three steps */
  content: ""; position: absolute; left: 16.7%; right: 16.7%; top: 28px;
  border-top: 2px dashed rgba(19, 35, 63, .25);
}
.step-list li { position: relative; padding: 0 10px; }
.step-n {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--ink); color: var(--white);
  font-family: var(--serif); font-size: 28px; line-height: 1;
  box-shadow: 0 0 0 8px var(--haze);
}
.step-list h3 { font-size: 30px; color: var(--ink); }
.step-list p { max-width: 24em; margin: 8px auto 0; font-size: 15px; line-height: 1.7; color: var(--muted); }

.cta-band {
  max-width: 1180px; margin: 96px auto 0; padding: 0 28px;
  display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center;
}
.cta-band h2 { font-size: clamp(44px, 6vw, 76px); color: var(--ink); }
.cta-band .btn { padding: 15px 30px; font-size: 16px; }
.cta-band .footnote { margin-top: 24px; }

/* ---------- The window: one frosted panel for content ---------- */

.wrap, .auth {
  position: relative; z-index: 1;
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--r-window);
  box-shadow: var(--shadow-window);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.wrap {
  max-width: 1180px; margin: 8px auto 0; padding: 30px;
  display: flex; flex-wrap: wrap; gap: 36px;
}
.wrap.narrow { max-width: 860px; display: block; padding: 40px 44px; }

.sidebar { flex: 1 1 210px; min-width: 0; max-width: 250px; }
.content { flex: 999 1 520px; min-width: 0; }

.side-head { margin: 4px 0 10px 12px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted); }
.side-link {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px;
  color: var(--ink); font-size: 14.5px;
}
.side-link:hover { background: var(--tint); text-decoration: none; }
.side-link.active { background: var(--ink); color: var(--white); font-weight: 500; }
.side-link .n { flex-grow: 1; min-width: 0; }
.side-link .c {
  flex-shrink: 0; min-width: 26px; padding: 0 8px; border-radius: 999px;
  background: rgba(19, 35, 63, .07); text-align: center; font-size: 12px; color: var(--muted);
}
.side-link.active .c { background: rgba(255, 255, 255, .18); color: var(--white); }

.side-note {
  margin-top: 22px; padding: 18px;
  background: var(--sun); border-radius: var(--r-row);
  font-size: 13.5px; line-height: 1.6; color: #3a2e05;
}

.crumb { margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.crumb a { color: var(--muted); }

.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: 46px; }
.page-head p { margin-top: 6px; font-size: 15px; color: var(--muted); max-width: 60ch; }

.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.head-row .grow { flex-grow: 1; min-width: 0; }

/* ---------- Category overview (home) ---------- */

.cat-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  padding: 22px 24px; border-radius: var(--r-row);
  background: var(--white); color: inherit;
  box-shadow: 0 1px 0 var(--line);
}
.cat-row + .cat-row { margin-top: 12px; }
.cat-row:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--sky-light); }
.cat-row .grow { flex-grow: 1; min-width: 0; }
.cat-name { display: block; font-family: var(--serif); font-size: 32px; line-height: 1.3; color: var(--ink); }
.cat-row .cat-desc { display: block; margin-top: 4px; font-size: 14.5px; color: var(--muted); }
.cat-boards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip {
  padding: 3px 12px; border-radius: 999px;
  background: var(--tint); color: var(--ink-2); font-size: 13px;
}
.cat-stats { flex-shrink: 0; display: flex; gap: 22px; text-align: center; }
.cat-stats .n { display: block; font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cat-stats .l { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.cat-arrow {
  flex-shrink: 0; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--white); font-size: 20px; line-height: 1;
}
.cat-row:hover .cat-arrow { background: var(--sun); color: var(--ink); }

/* ---------- Popular posts (top of the category page) ---------- */

.more-link { margin-top: 18px; font-size: 14.5px; font-weight: 600; }
.top-list {
  list-style: none; overflow: hidden;
  background: var(--white); border-radius: var(--r-row); box-shadow: 0 1px 0 var(--line);
}
.top-list li + li { border-top: 1px solid var(--line); }
.top-row { display: flex; align-items: center; gap: 18px; padding: 14px 20px; color: inherit; }
.top-row:hover { background: var(--tint); text-decoration: none; }
.top-row:hover .top-title { color: var(--link); }
.top-row .grow { flex-grow: 1; min-width: 0; }
.rank {
  flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  font-family: var(--serif); font-size: 24px; line-height: 1; color: var(--ink);
}
.rank.first { background: var(--sun); border-color: var(--sun); }
.top-title { display: block; font-weight: 600; font-size: 16px; color: var(--ink); }
.top-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.top-meta .chip { padding: 1px 10px; font-size: 12px; }

/* ---------- Board list (category page) ---------- */

.cat-block { margin-bottom: 34px; }
.cat-block h2 { font-size: 32px; margin-bottom: 4px; }
.cat-block .cat-desc { margin-bottom: 14px; font-size: 14px; color: var(--muted); }

.board-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 18px 22px; border-radius: var(--r-row);
  background: var(--white); color: inherit; box-shadow: 0 1px 0 var(--line);
}
.board-row + .board-row { margin-top: 10px; }
.board-row:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--sky-light); }
.board-row .grow { flex-grow: 1; min-width: 0; }
.board-row .b-name { display: block; font-weight: 600; font-size: 16px; color: var(--ink); }
.board-row .b-desc { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.board-row .b-count {
  flex-shrink: 0; padding: 4px 12px; border-radius: 999px;
  background: var(--tint); font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}

/* ---------- Post list ---------- */

.post-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: 16px 20px; border-radius: var(--r-row);
  background: var(--white); box-shadow: 0 1px 0 var(--line);
}
.post-row + .post-row { margin-top: 10px; }
.post-count {
  flex-shrink: 0; width: 58px; padding: 8px 0; border-radius: 14px;
  background: var(--tint); text-align: center;
}
.post-count .n { display: block; font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.post-count .n.zero { color: var(--muted); }
.post-count .l { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.post-main { flex-grow: 1; min-width: 0; }
.post-main .p-title { font-weight: 600; font-size: 16px; color: var(--ink); }
.post-main .p-title:hover { color: var(--link); }
.post-main .p-meta { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }

/* ---------- Post detail ---------- */

.post-detail h1 { font-size: 52px; margin-bottom: 12px; text-wrap: balance; }
.post-detail .meta {
  margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted);
}
.post-body { max-width: 68ch; font-size: 17px; line-height: 1.85; white-space: pre-wrap; word-break: break-word; }

.comments-head { margin: 44px 0 10px; font-size: 34px; }
.comment {
  padding: 18px 20px; border-radius: var(--r-row);
  background: var(--white); box-shadow: 0 1px 0 var(--line);
}
.comment + .comment { margin-top: 10px; }
.comment .c-head { margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; }
.comment .c-author { font-weight: 600; color: var(--ink); }
.comment .c-time { color: var(--muted); }
.comment .c-body { font-size: 15.5px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.comment .c-actions { margin-left: auto; display: flex; gap: 6px; }

.tag-admin {
  padding: 1px 10px; border-radius: 999px;
  background: var(--sun); font-size: 11.5px; font-weight: 600; color: #3a2e05;
}

/* ---------- Forms ---------- */

label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--ink); }

input[type=text], input[type=email], input[type=password], textarea, select {
  width: 100%; padding: 12px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-field);
  background: var(--white); color: var(--ink);
  font-family: inherit; font-size: 15px;
}
textarea { line-height: 1.75; resize: vertical; min-height: 140px; }
input:focus, textarea:focus, select:focus { outline: 3px solid rgba(59, 116, 211, .35); outline-offset: 0; border-color: var(--sky-mid); }

.field { margin-bottom: 18px; }
.hint { margin-top: 6px; font-size: 13px; color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border: 1px solid transparent; border-radius: 999px;
  background: var(--ink); color: var(--white);
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.3;
  cursor: pointer; text-align: center;
  transition: background-color .15s ease, transform .15s ease;
}
.btn:hover { background: #22375e; color: var(--white); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.sun { background: var(--sun); color: var(--ink); }
.btn.sun:hover { background: var(--sun-hover); color: var(--ink); }
.btn.ghost { background: var(--white); color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--tint); color: var(--ink); }
.btn.danger { background: transparent; color: var(--danger); border-color: rgba(180, 50, 31, .35); }
.btn.danger:hover { background: #fdecea; color: var(--danger); }
.btn.sm { padding: 6px 15px; font-size: 13.5px; font-weight: 500; }
.btn.block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }

.pill {
  padding: 6px 15px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--white); color: var(--ink-2); font-family: inherit; font-size: 13.5px; cursor: pointer;
}
.pill.on { background: var(--ink); border-color: var(--ink); color: var(--white); }

.sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13.5px; }
.sortbar .lbl { color: var(--muted); }

/* ---------- Auth pages: headline on the sky, card below ---------- */

.auth {
  max-width: 460px; margin: 28px auto 0; padding: 40px 38px 30px;
  background: var(--glass-strong);
}
.auth h1 { font-size: 52px; color: var(--ink); text-align: center; }
.auth .sub { margin: 8px 0 26px; font-size: 15px; color: var(--muted); text-align: center; }
.auth .panel { padding: 0; background: none; border: 0; box-shadow: none; margin: 0; }
.auth .foot { margin-top: 18px; text-align: center; font-size: 14px; color: var(--muted); }
.auth .footnote { margin-top: 26px; }

.otp-input { letter-spacing: 12px; text-align: center; font-size: 28px; font-family: var(--serif); }

/* ---------- Feedback ---------- */

.alert { display: none; margin-bottom: 18px; padding: 12px 16px; border-radius: var(--r-field); font-size: 14px; }
.alert.show { display: block; }
.alert.error { background: #fdecea; color: #8a2414; }
.alert.ok { background: #e3f4ea; color: #145a37; }

.empty {
  padding: 48px 24px; border-radius: var(--r-row); border: 2px dashed var(--line-strong);
  text-align: center; color: var(--muted);
}
.loading { padding: 32px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- Pager + pod bar ---------- */

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.pager .pinfo { font-size: 13.5px; color: var(--muted); }
.podbar { margin-left: auto; font-size: 12.5px; color: var(--muted); }

.footnote { margin-top: 32px; font-size: 12.5px; color: var(--muted); }

/* ---------- Admin ---------- */

.panel {
  margin-bottom: 18px; padding: 24px 26px;
  background: var(--white); border-radius: var(--r-row); box-shadow: 0 1px 0 var(--line);
}
.panel h2 { font-size: 30px; margin-bottom: 14px; }

/* ---------- Images ---------- */

.hint-inline { font-weight: 400; color: var(--muted); font-size: .92em; }
input[type="file"] {
  display: block; width: 100%; margin: 4px 0 12px; padding: 14px;
  border: 2px dashed var(--line-strong); border-radius: var(--r-field);
  background: var(--tint); font: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 7px 16px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--white); font: inherit; font-weight: 600; cursor: pointer;
}
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.thumb { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--tint); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.new { box-shadow: 0 0 0 3px var(--sun) inset; }
.thumb-x {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: rgba(19, 35, 63, .75); color: var(--white); font-size: 18px; line-height: 28px; cursor: pointer; padding: 0;
}
.thumb-x:hover { background: var(--danger); }
.post-images { display: grid; gap: 10px; margin: 22px 0 8px; max-width: 760px; }
.post-images.count-1 { grid-template-columns: 1fr; }
.post-images.count-2, .post-images.count-4 { grid-template-columns: 1fr 1fr; }
.post-images.count-3 { grid-template-columns: 1fr 1fr 1fr; }
.post-images a { display: block; border-radius: 18px; overflow: hidden; background: var(--tint); }
.post-images img { width: 100%; height: auto; display: block; }
.post-images:not(.count-1) img { aspect-ratio: 4 / 3; object-fit: cover; }
.post-images.count-1 img { max-height: 540px; object-fit: contain; }

/* ---------- Small screens ---------- */

@media (max-width: 760px) {
  body { padding-bottom: 120px; }
  .topbar .inner { padding: 16px; gap: 10px; }
  .navpill { order: 3; flex-basis: 100%; max-width: none; }
  .topnav { margin-left: auto; }
  .hero { margin: 8px auto 30px; padding: 44px 16px 0; }
  .hero:not(.hero-full) .plane { width: 58px; right: 16px; top: 0; }
  .hero:not(.hero-full) .trail { display: none; }
  .wrap { margin: 0 12px; padding: 18px; gap: 22px; border-radius: 22px; }
  .wrap.narrow { padding: 24px 18px; }
  .auth { margin: 16px 12px 0; padding: 30px 20px 22px; }
  .sidebar { max-width: none; flex-basis: 100%; order: 2; }   /* content first on phones */
  .page-head h1, .auth h1 { font-size: 40px; }
  .post-detail h1 { font-size: 38px; }
  .cat-row { padding: 18px; }
  .cat-stats { gap: 16px; }
  .cat-name { font-size: 28px; }
}

@media (max-width: 860px) {
  .why { margin: 0 12px; padding: 34px 22px; border-radius: 22px; }
  .why-grid, .step-list { grid-template-columns: 1fr; gap: 26px; }
  .why-item, .why-item:first-child { padding: 0; border-left: 0; }
  .why-item + .why-item { padding-top: 26px; border-top: 1px solid var(--line-strong); }
  .step-list::before { display: none; }
  .steps, .cta-band { margin-top: 64px; }
  .hero-full { padding-top: 28px; }
  .flight { height: 64px; }
  .flight .plane { width: 66px; }
  .flight .trail { right: 60px; height: 48px; display: block; }
}

/* Short laptop windows: keep the clouds low so they never sit behind white hero text */
@media (max-height: 760px) {
  body::before { display: none; }
  .flight { height: 70px; }
  .flight .plane { width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .plane, .trail { animation: none; }
  .btn { transition: none; }
}