/* ============================================================
   Daniel Southam — site.css
   Neumorphic (soft UI) on warm sand.

   The whole page is one continuous surface. Nothing is "on top of"
   the background — panels are pressed out of it or sunk into it,
   sculpted with a warm highlight from the top-left and a warm
   shadow to the bottom-right. Three core hues (clay, forest,
   ochre) used only as accents. Deep espresso ink, never pure
   black. Minimal motion; press states do the talking.
   ============================================================ */

:root{
  /* ---- The surface -------------------------------------------------
     Neumorphism only works if element and ground share one colour.
     Everything that looks like a "card" is this exact value. */
  --surface:      #E9E0CE;
  --surface-sink: #E3D9C5;

  /* ---- Ink ---- */
  --ink:       #2B2318;
  --ink-soft:  #5A5145;
  --ink-faint: #6E6453;

  /* ---- Sculpting light ---- */
  --hi:      rgba(255,252,243,.95);
  --hi-soft: rgba(255,252,243,.6);
  --lo:      rgba(168,146,109,.42);
  --lo-soft: rgba(168,146,109,.26);

  /* ---- Core hues (max 3) ---- */
  --clay:      #B5502E;
  --clay-deep: #8E3E22;
  --clay-tint: #EFDCCB;
  --forest:    #4A5D3A;
  --forest-deep:#374829;
  --forest-tint:#DEE4D0;
  --ochre:     #B9862C;
  --ochre-tint:#F0E3C6;

  /* ---- Elevation recipes -------------------------------------------
     raise = pressed out of the surface. sink = pressed into it. */
  --raise:    7px 7px 16px var(--lo), -7px -7px 16px var(--hi);
  --raise-lg: 13px 13px 30px var(--lo), -11px -11px 26px var(--hi);
  --raise-sm: 4px 4px 9px var(--lo-soft), -4px -4px 9px var(--hi);
  --sink:     inset 5px 5px 11px var(--lo), inset -5px -5px 11px var(--hi);
  --sink-sm:  inset 3px 3px 7px var(--lo-soft), inset -3px -3px 7px var(--hi);

  /* ---- Dark panel (its own little soft-UI world) ---- */
  --dark:    #2E251A;
  --dark-hi: rgba(86,70,48,.65);
  --dark-lo: rgba(11,8,4,.75);
  --raise-dark: 8px 8px 18px var(--dark-lo), -8px -8px 18px var(--dark-hi);
  --sink-dark:  inset 5px 5px 12px var(--dark-lo), inset -5px -5px 12px var(--dark-hi);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius: 26px;
  --radius-sm: 16px;

  /* ---- Compatibility aliases -------------------------------------
     Page-level <style> blocks still refer to these names. Mapping
     them here converts those panels to soft UI automatically. */
  --paper:      var(--surface);
  --paper-deep: var(--surface-sink);
  --white:      var(--surface);
  --line:       rgba(168,146,109,.20);
  --line-soft:  rgba(168,146,109,.12);
  --shadow:     var(--raise);
  --shadow-sm:  var(--raise-sm);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--surface);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* A whisper of grain so the soft plastic reads as a material,
   not as a render. Kept very low — grain fights neumorphism. */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.02; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:920px;margin:0 auto;padding:0 32px;position:relative;z-index:1}
.wrap-narrow{max-width:740px;margin:0 auto;padding:0 32px;position:relative;z-index:1}

::selection{background:var(--clay-tint);color:var(--clay-deep)}

/* ---------- Header / nav ---------- */
header.site{
  background:var(--surface);
  position:sticky;top:0;z-index:20;
  box-shadow:0 6px 18px -8px var(--lo);
}
.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 32px;max-width:1040px;margin:0 auto;
}
.brand{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--serif);font-weight:600;font-size:1.12rem;letter-spacing:-.01em;
}
.brand img{
  width:38px;height:38px;padding:5px;border-radius:50%;
  background:var(--surface);box-shadow:var(--raise-sm);
  transition:box-shadow .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover img{box-shadow:var(--sink-sm);transform:rotate(10deg)}

.nav-links{display:flex;gap:6px;font-size:.92rem;font-weight:500}
.nav-links a{
  color:var(--ink-soft);padding:8px 16px;border-radius:100px;
  transition:color .25s ease, box-shadow .3s ease;
}
.nav-links a:hover{color:var(--ink);box-shadow:var(--raise-sm)}
.nav-links a.active{color:var(--clay-deep);box-shadow:var(--sink-sm)}
.nav-links a:active{box-shadow:var(--sink-sm)}
.nav-toggle{display:none}

/* ---------- About sub-nav ----------
   A second-tier strip beneath the header, used on the About page and
   the three pages it links to (Personal Portfolio, Developer, Vaelis
   Gate) so visitors can move between them without doubling back.
   Sunk into a slightly deeper tone of the surface so it reads as
   "nested under About" rather than a second primary nav. */
.subnav-wrap{
  background:var(--surface-sink);
  box-shadow:inset 0 3px 8px -4px var(--lo), inset 0 -1px 0 var(--hi-soft);
}
.subnav{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  padding:13px 32px;max-width:1040px;margin:0 auto;
}
.subnav-label{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-right:8px;
}
.subnav a{
  font-size:.85rem;font-weight:500;color:var(--ink-soft);
  padding:7px 15px;border-radius:100px;
  transition:color .25s ease, box-shadow .3s ease;
}
.subnav a:hover{color:var(--ink);box-shadow:var(--raise-sm)}
.subnav a.active{color:var(--clay-deep);box-shadow:var(--sink-sm)}
@media(max-width:760px){
  .subnav{padding:11px 22px}
  .subnav-label{width:100%;margin:0 0 4px}
}

/* ---------- Eyebrow / headings ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--forest-deep);margin-bottom:22px;
}
.eyebrow::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--clay);box-shadow:var(--raise-sm)}

h1{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;color:var(--ink)}
h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
h3{font-family:var(--serif);font-weight:500;letter-spacing:-.005em;color:var(--ink)}

.lede{font-size:1.2rem;color:var(--ink-soft);max-width:600px}

/* ---------- Buttons ----------
   The signature soft-UI interaction: raised at rest, pressed in on
   click. The primary action stays a solid clay fill so the most
   important control never relies on shadow alone to be noticed. */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:.95rem;padding:15px 30px;border-radius:100px;
  background:var(--surface);color:var(--ink);
  box-shadow:var(--raise);
  transition:box-shadow .28s ease, transform .18s ease, color .2s ease;
}
.btn:active{box-shadow:var(--sink);transform:translateY(1px)}

.btn.primary{
  background:var(--clay);color:#FFF9EE;
  box-shadow:6px 6px 14px rgba(120,60,32,.4), -5px -5px 12px var(--hi-soft);
}
.btn.primary:hover{
  background:var(--clay-deep);
  box-shadow:9px 9px 20px rgba(120,60,32,.45), -6px -6px 15px var(--hi-soft);
}
.btn.primary:active{
  box-shadow:inset 5px 5px 11px rgba(96,46,24,.55), inset -4px -4px 10px rgba(224,140,105,.35);
  transform:translateY(1px);
}

.btn.ghost{color:var(--ink)}
.btn.ghost:hover{box-shadow:var(--raise-lg);color:var(--clay-deep)}

/* "coming soon" is carved in, not raised — it isn't pressable */
.btn.soon{
  background:var(--surface);color:var(--ink-faint);cursor:default;
  box-shadow:var(--sink-sm);
}

/* ---------- Chips (pills & tags) ----------
   Sunk into the surface: read as labels, not buttons. */
.pill,.tag{
  display:inline-block;
  font-size:.82rem;font-weight:500;color:var(--forest-deep);
  background:var(--surface);
  padding:8px 18px;border-radius:100px;
  box-shadow:var(--sink-sm);
}

/* ---------- Index rows (landing links) ----------
   Each row is its own soft slab. Hover lifts it; click presses it. */
.index{margin-top:10px;display:flex;flex-direction:column;gap:18px}
.index-row{
  display:grid;grid-template-columns:64px 1fr auto;gap:24px;align-items:center;
  padding:30px 32px;border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--raise);
  transition:box-shadow .32s ease, transform .32s ease;
}
.index-row:hover{box-shadow:var(--raise-lg);transform:translateY(-3px)}
.index-row:active{box-shadow:var(--sink);transform:translateY(0)}
.index-mark{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--clay-deep);
  font-family:var(--serif);font-size:1.05rem;
  box-shadow:var(--sink-sm);
  transition:box-shadow .32s ease, color .32s ease;
}
.index-row:hover .index-mark{box-shadow:var(--raise-sm);color:var(--clay)}
.index-title{font-family:var(--serif);font-weight:500;font-size:1.55rem;letter-spacing:-.01em}
.index-desc{font-size:.97rem;color:var(--ink-soft);margin-top:5px;max-width:52ch}
.index-arrow{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:var(--clay);
  box-shadow:var(--raise-sm);
  transition:transform .32s ease, box-shadow .32s ease;
}
.index-row:hover .index-arrow{transform:translateX(5px);box-shadow:var(--sink-sm)}

/* ---------- Generic soft panel ---------- */
.card,.soft{
  background:var(--surface);border-radius:var(--radius);
  box-shadow:var(--raise);
}

/* Shared hover behaviour for the content panels defined per page */
.card,.feature,.philosophy,.press,.realm,.forge{
  transition:box-shadow .35s ease, transform .35s ease;
}
.card:hover,.feature:hover,.philosophy:hover,.press:hover,.realm:hover,.forge:hover{
  box-shadow:var(--raise-lg);
  transform:translateY(-3px);
}

/* Banner imagery sits flush inside its panel and eases in on hover */
.feature-banner,.press-banner{transition:transform .6s ease}
.feature:hover .feature-banner,.press:hover .press-banner{transform:scale(1.03)}

/* ---------- Work rows ---------- */
.work-row{
  border-radius:var(--radius-sm);padding:24px 26px;
  background:var(--surface);box-shadow:var(--raise-sm);
  transition:box-shadow .3s ease, transform .3s ease;
}
.work-row:hover{box-shadow:var(--raise);transform:translateY(-2px)}
.work-row .name a{transition:color .25s ease}
.work-row .name a:hover{color:var(--clay-deep)}

/* ---------- Footer ---------- */
footer.site{padding:56px 0 44px;margin-top:56px;box-shadow:inset 0 8px 16px -12px var(--lo)}
.foot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
  font-size:.88rem;color:var(--ink-soft);max-width:1040px;margin:0 auto;padding:0 32px;
}
.foot a{
  padding:6px 14px;border-radius:100px;
  box-shadow:var(--raise-sm);transition:box-shadow .28s ease, color .2s ease;
}
.foot a:hover{box-shadow:var(--sink-sm);color:var(--clay-deep)}

/* ---------- Motion (minimal by design) ----------
   Progressive enhancement: .reveal elements are fully visible by
   default. site.js adds .reveal-ready — which is what actually
   hides them — only after confirming JS and IntersectionObserver
   both work, then adds .in as each scrolls into view. If the
   script never runs, everything simply stays visible. */
.reveal.reveal-ready{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal.reveal-ready.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ---------- Responsive ----------
   Soft UI needs room: shadows are shrunk on small screens so
   panels don't crowd each other or bleed off the viewport. */
@media(max-width:760px){
  :root{
    --raise:    5px 5px 12px var(--lo), -5px -5px 12px var(--hi);
    --raise-lg: 8px 8px 20px var(--lo), -7px -7px 18px var(--hi);
    --raise-sm: 3px 3px 7px var(--lo-soft), -3px -3px 7px var(--hi);
    --sink:     inset 4px 4px 9px var(--lo), inset -4px -4px 9px var(--hi);
    --radius: 22px;
  }
  .nav{padding:12px 18px;flex-wrap:wrap;row-gap:10px}
  .nav-links{gap:4px;font-size:.82rem;flex-wrap:wrap;width:100%}
  .nav-links a{padding:7px 13px}
  .brand{font-size:1.02rem;white-space:nowrap}
  .brand img{width:34px;height:34px}
  .wrap,.wrap-narrow{padding:0 22px}
  .foot{padding:0 22px}
  .index{gap:14px}
  .index-row{grid-template-columns:52px 1fr;row-gap:6px;padding:24px 22px;gap:18px}
  .index-mark{width:48px;height:48px}
  .index-arrow{display:none}
  .btn{padding:14px 26px}
}
@media(max-width:420px){
  .nav-links{gap:3px;font-size:.78rem}
  .nav-links a{padding:6px 11px}
  .index-title{font-size:1.35rem}
}