/* main.css v2.0 (classic look) */
:root{
  --bg: #eef0f2;              /* page background (soft grey) */
  --surface: #ffffff;         /* card surface */
  --text: #111827;            /* body text */
  --muted: #4b5563;           /* secondary text */
  --border: #d2d6dc;          /* frame border */
  --brand: #0f172a;           /* headings */
  --accent: #303d50;          /* links & buttons (navy) */
  --radius: 16px;             /* rounder corners to match screenshot */
  --shadow: 0 2px 14px rgba(5, 10, 25, .06);
  --gap: clamp(16px, 2vw, 22px);
  --peek-desktop: clamp(10px, 1.8vw, 22px);
  --peek-vert: clamp(10px, 3vh, 24px);
  --gap-mobile: clamp(16px, 3.2vw, 24px);
  --vh: 1vh;
  --header-h: 0px;

  --toolbar-top: #d7d8dc;
  --toolbar-bottom: #eef0f2;

  --font-body: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,Ubuntu,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --font-heading: var(--font-body);
  --base-size: 16px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:var(--font-body); font-size:var(--base-size); color:var(--text); background:var(--bg); line-height:1.6; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); text-decoration:none; } a:hover{ text-decoration:underline; }

.container{ width:min(1180px, 92%); margin:0 auto; }

/* Header */
.site-header{ position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--border); }
.site-header-inner{ display:flex; align-items:center; gap:18px; padding:8px 0; }
.brand a{ color:var(--brand); font-weight:800; font-size:1.2rem; text-decoration:none; font-family:var(--font-heading); }
.site-nav{ margin-left:auto; }
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.site-nav a{ color:var(--brand); text-decoration:none; font-weight:600; padding:6px 2px; }
.site-nav a:hover{ color:var(--accent); }
.header-socials{ display:flex; gap:10px; margin-left:14px; }
.header-socials a{ width:20px; height:20px; display:inline-flex; opacity:.9; }
.header-socials a:hover{ opacity:1; transform:translateY(-1px); }
.header-socials svg{ width:100%; height:100%; fill:var(--brand); }

/* Window */
.window{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:visible; box-shadow:var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.window:hover{ transform: translateY(-2px); box-shadow: 0 6px 22px rgba(5,10,25,.10); }
.window .toolbar{ background:linear-gradient(var(--toolbar-top),var(--toolbar-bottom)); border-bottom:1px solid var(--border); padding:.6rem .9rem; border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); }
.window-title{ font-weight:800; font-size:1.02rem; color:var(--brand); font-family:var(--font-heading); }
.window .body{ padding:.85rem 1rem 1rem; }
.window figure{ margin:0; } .window figure img{ border-radius:calc(var(--radius) - 6px); }
.window .intro p{ margin:.5rem 0; }

/* Hero & Carousel (desktop & tablet) */
.hero{ padding: clamp(6px, 2.2vw, 16px) 0; }
.cubes-wrap{ position:relative; }
.cubes{
  display:flex; gap:var(--gap); overflow-x:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:6px 8px 2px var(--peek-desktop);
  scrollbar-width: none; -ms-overflow-style: none;
}
.cubes::-webkit-scrollbar{ display:none; height:0; }
.cube-item{ scroll-snap-align:start; flex: 0 0 calc(50% - var(--gap)/2); }
.cubes.has-many .cube-item{ flex: 0 0 calc(50% - var(--gap)); }

.cubes-nav{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.cubes-nav button{ pointer-events:auto; border:1px solid var(--border); background:#fff; border-radius:999px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); cursor:pointer; }
.cubes-nav button[disabled]{ opacity:.4; cursor:not-allowed; } .cubes-nav svg{ width:18px; height:18px; }

/* Equal height (desktop only) */
.cube-item .window{ min-height:100%; display:flex; flex-direction:column; }
.cube-item .window .body{ flex:1; display:flex; flex-direction:column; }
.cube-item .intro{ flex:1; }

/* Subtitle scaling */
.cube-subtitle{ font-weight:800; line-height:1.18; margin:.2rem 0 .55rem; font-family:var(--font-heading);
  font-size: clamp(calc(0.45rem * var(--scale,1)), calc((0.4rem + 1.3vw) * var(--scale,1)), calc(2.7rem * var(--scale,1)));
}

/* Buttons */
.cta-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.6rem; }
.btn{ display:inline-block; padding:.58rem .9rem; border-radius:9px; border:1px solid var(--border); background:#fff; color:#111; text-decoration:none; }
.btn:hover{ box-shadow:0 2px 8px rgba(0,0,0,.09); transform: translateY(-1px); text-decoration:none; }
.btn-outline{ background:#fff; }
.btn-solid{ color:#fff; border-color:transparent; }

/* MOBILE: vertical list; page scroll; variable height allowed */
@media (max-width: 800px){
  .container{ width:100%; }
  .cubes{
    flex-direction:column;
    overflow:visible;
    gap: var(--gap-mobile);
    scroll-snap-type: none;
    padding: var(--peek-vert) 12px;
  }
  .cube-item{ flex: 0 0 auto; }
  .cube-item .window{
    min-height: calc((var(--vh) * 100) - var(--header-h) - (var(--peek-vert) * 2));
    height:auto;
  }
  .cubes-nav{ display:none !important; }
}

/* Page wrappers */
.page-wrap, .single-wrap, .archive-wrap, .search-wrap, .error-wrap{ padding: clamp(8px, 2.4vw, 18px) 0; }

/* Footer */
.site-footer{ border-top:1px solid var(--border); background:#fff; color:#4b5563; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; }
.footer-menu ul{ list-style:none; margin:0; padding:0; display:flex; gap:16px; }
.footer-menu a{ color:#4b5563; text-decoration:none; } .footer-menu a:hover{ text-decoration:underline; }

/* Footer sizing — make links same size as identity text */
.site-footer{ font-size:.875rem; }
.site-footer small{ font-size:inherit; }
.footer-menu a{ font-size:inherit; }

/* Slightly smaller top nav links */
.site-nav a{ font-size:.95rem; }



/* v2.1.7 — Mobile single-column: no equal-height flex, tighter spacing */
@media (max-width: 800px){
  .cube-item .window{ min-height:auto; display:block; }
  .cube-item .window .body{ display:block; }
  .cube-item .intro{ flex:unset; }
  /* Tighter vertical rhythm on mobile */
  .window .body{ padding: .85rem; }
  .cube-subtitle{ margin:.3rem 0 .5rem; }
  .window figure{ margin:.5rem 0 .5rem; }
  .cta-row{ margin-top:.5rem; }
}