/* Self-hosted, so the site keeps its own typeface with no internet at all.
   See assets/css/fonts.css for why this is not a Google Fonts @import. */
@import url("fonts.css");

:root{
  /* ---- Krobodan token system ---- */
  /* grounded in the actual materials: fired glass beads, red Krobo clay, kiln light */
  --ink:        #14100D;   /* near-black, kiln-shadow */
  --ink-soft:   #211A15;
  --clay:       #C23B22;   /* Krobo red earth */
  --clay-deep:  #8E2A18;
  --kiln:       #E8A33D;   /* fired amber glass bead */
  --kiln-light: #F4C468;
  --teal:       #276A66;   /* cobalt/teal recycled-glass bead */
  --bone:       #F4ECDD;   /* bone / cream text on dark */
  --bone-dim:   #CFC2AC;

  /* ---- readable-on-dark variants ----
     --clay and --teal are bead colours, and they are right for a fill, a
     border or a tinted pill. As *text* on --ink they are not: measured against
     #14100D, --teal lands at 3.01:1 and --clay at 3.55:1, both under the 4.5:1
     WCAG AA needs for body text. These are the same hues lifted until they
     pass — 6.0:1 and 6.2:1 — and they are what any text token should use.
     Keep the originals for anything that is not read. */
  --teal-text:  #4E9E97;
  --clay-text:  #E8705A;

  --glass-bg:      rgba(244,236,221,0.06);
  --glass-bg-2:    rgba(244,236,221,0.10);
  --glass-border:  rgba(244,236,221,0.14);
  --glass-shadow:  0 8px 32px rgba(0,0,0,0.35);

  --font-display: "Fraunces", "Georgia", serif;
  --font-body:    "Work Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", monospace;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --container: 1240px;

  /* ---- motion ----
     One easing curve and three durations for the whole site, so a hover, a
     card lift and a page change all feel like the same material moving.
     Everything stays inside 200–400ms; anything slower reads as lag. */
  --ease-glass:   cubic-bezier(.22,.61,.36,1);
  --dur-fast:     200ms;
  --dur:          300ms;
  --dur-slow:     400ms;

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
#root, .app-shell{ min-height:100dvh; display:flex; flex-direction:column; }

img{
  max-width:100%; display:block;
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none; /* iOS: disables the long-press "Save Image" menu */
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight:600;
  line-height:1.05;
  margin:0 0 .4em;
  letter-spacing:-0.01em;
}
p{ margin:0 0 1em; line-height:1.6; color: var(--bone-dim); }

.eyebrow{
  font-family: var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color: var(--kiln);
}

.container{
  max-width: var(--container);
  margin:0 auto;
  padding: 0 24px;
}

/* ---------- background atmosphere ---------- */
.mesh-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(60% 45% at 12% 8%, rgba(194,59,34,0.28), transparent 60%),
    radial-gradient(50% 40% at 92% 18%, rgba(232,163,61,0.22), transparent 60%),
    radial-gradient(70% 55% at 50% 100%, rgba(39,106,102,0.24), transparent 60%),
    var(--ink);
}

/* ---------- glass primitives ---------- */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}
.glass-panel{
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-radius: var(--radius-md);
}

/* Shared hover behaviour for anything built on .glass / .glass-panel: the
   surface lifts, warms toward kiln-amber and frosts a little harder. Put it
   on the element alongside .glass-panel rather than restyling each card. */
.glass-hover{
  transition:
    transform var(--dur) var(--ease-glass),
    box-shadow var(--dur) var(--ease-glass),
    border-color var(--dur) var(--ease-glass),
    background var(--dur) var(--ease-glass),
    backdrop-filter var(--dur) var(--ease-glass);
  will-change: transform;
}
.glass-hover:hover,
.glass-hover:focus-visible{
  transform: translateY(-5px);
  background: var(--glass-bg-2);
  border-color: rgba(232,163,61,0.34);
  backdrop-filter: blur(30px) saturate(165%);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  box-shadow: 0 18px 44px rgba(0,0,0,0.42), 0 0 30px rgba(232,163,61,0.12);
}
.glass-hover:active{ transform: translateY(-2px); }

/* ---------- page transition ----------
   Entering is pure CSS so it starts at first paint with no flash — waiting
   for the JS module to boot would show an un-animated frame first. Leaving
   is driven by PageTransition.js, which holds the navigation for one frame
   set so the outgoing page fades instead of hard-cutting.

   Both effects stay on #main-content: the navbar deliberately does not move
   between pages, and keeping transform off the shell means an open modal
   (position:fixed) can never get re-parented mid-transition. */
#main-content{ animation: page-enter var(--dur-slow) var(--ease-glass); }
@keyframes page-enter{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: none; }
}
html.is-leaving #main-content{ opacity:0; transition: opacity 180ms ease; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family: var(--font-mono);
  font-size:.82rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding: .95em 1.6em;
  border-radius: 999px;
  border:1px solid var(--glass-border);
  cursor:pointer;
  transition: transform var(--dur) var(--ease-glass), background var(--dur) var(--ease-glass), border-color var(--dur) var(--ease-glass), box-shadow var(--dur) var(--ease-glass);
  background:none;
  color:inherit;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn-primary{
  background: linear-gradient(135deg, var(--clay), var(--clay-deep));
  color: var(--bone);
  border-color: transparent;
}
.btn-primary:hover{ box-shadow: 0 10px 30px rgba(194,59,34,0.35); }
.btn-ghost{
  background: var(--glass-bg);
  color: var(--bone);
}
.btn-ghost:hover{ background: var(--glass-bg-2); border-color: var(--kiln); }
.btn-kiln{
  background: linear-gradient(135deg, var(--kiln), #c97f22);
  color: var(--ink);
  border-color:transparent;
  font-weight:600;
}
.btn-block{ width:100%; justify-content:center; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

/* ---------- bead-strand divider (signature element) ---------- */
.bead-strand{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 0;
  overflow:hidden;
}
.bead-strand span{
  width:9px; height:9px; border-radius:50%;
  flex:none;
  box-shadow: inset -2px -2px 3px rgba(0,0,0,.35), 0 0 6px rgba(0,0,0,.2);
}
.bead-strand.thread::before,
.bead-strand.thread::after{
  content:"";
  height:1px;
  flex:1;
  background: var(--glass-border);
}

/* utility */
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:999;
  background:var(--kiln); color:var(--ink); padding:10px 16px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline: 2px solid var(--kiln);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* page bottom padding on mobile so content clears the tab bar */
.page{
  flex:1;
  width:100%;
}
@media (max-width: 780px){
  .page{ padding-bottom: 84px; }
}