/*
Theme Name: Sentient Spaces
Theme URI: https://sentientspaces.design
Author: Orion Hansen
Description: Block theme for Sentient Spaces — ceramics grown by rule, then fired. Carries the morphogen entry gate and the single-scroll front page.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: sentient-spaces
*/

:root {
  --ss-page: #07080a;
  --ss-panel: #0b0d10;
  --ss-rule: #171b21;
  --ss-rule-strong: #262c34;
  --ss-ink: #e8e4dc;
  --ss-ink-soft: #b6bcc6;
  --ss-ink-mute: #8b919b;
  --ss-ink-faint: #6d7480;
  --ss-accent: #9fd8c3;
  --ss-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ss-fade-delay: 1.5s;
  --ss-fade: 5s;
  --ss-nav-h: 60px;
}

html { scroll-behavior: smooth; scroll-padding-top: var(--ss-nav-h); }
html.ss-gate-locked { overflow: hidden; }
body { margin: 0; background: var(--ss-page); color: var(--ss-ink); text-wrap: pretty; }

/* ---------- entry gate ---------- */
.ss-gate {
  position: fixed; inset: 0; z-index: 100;
  cursor: pointer; touch-action: none; user-select: none;
}
/* The dark ground is its own layer so it can clear while the colony stays.
   Do NOT fade .ss-gate itself: gate.js dissolves the growth per-pixel over
   its own much longer window (fade delay + crossfade), and fading the
   container as well cut that moment short and left a gap before the
   photograph arrived. */
.ss-gate::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 50% 46%, #101619 0%, #0a0c0f 60%, #07080a 100%);
  transition: opacity 1.2s ease-out;
}
.ss-gate.is-open { pointer-events: none; }
.ss-gate.is-open::before { opacity: 0; }
.ss-gate.is-open .ss-gate__copy { opacity: 0; transition: opacity 0.8s ease-out; }
.ss-gate canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ss-gate__copy {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 30px; text-align: center;
  pointer-events: none;
}
.ss-gate__mark { font-size: 26px; font-weight: 200; letter-spacing: 0.16em; text-transform: uppercase; text-shadow: 0 2px 30px rgba(7,8,10,0.95); }
.ss-gate__spacer { height: 196px; }
.ss-gate__prompt { font-family: var(--ss-mono); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: #c3c8d0; text-shadow: 0 2px 24px rgba(7,8,10,0.95); }

/* ---------- landing ---------- */
.ss-hero { position: relative; height: 100vh; min-height: 720px; overflow: hidden; }
.ss-hero__frame { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity var(--ss-fade) ease-in var(--ss-fade-delay); }
.ss-hero.is-in .ss-hero__frame { opacity: 1; }
.ss-hero.is-instant .ss-hero__frame { transition: none; }
.ss-hero__layer { position: absolute; inset: -8%; will-change: transform; background-size: cover; background-position: center; }
.ss-hero__layer img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ss-hero__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(7,8,10,0.92) 0%, rgba(7,8,10,0.66) 42%, rgba(7,8,10,0.22) 78%, rgba(7,8,10,0.34) 100%); }
.ss-hero__copy { position: absolute; left: 40px; top: 116px; max-width: 520px; display: flex; flex-direction: column; gap: 22px; }
.ss-hero__copy h1 { margin: 0; text-shadow: 0 2px 34px rgba(7,8,10,0.9); }
.ss-hero__copy p { margin: 0; max-width: 430px; font-size: 19px; line-height: 1.55; color: #c3c8d0; text-shadow: 0 2px 26px rgba(7,8,10,0.92); }
.ss-hero__notes { position: absolute; left: 40px; bottom: 44px; font-family: var(--ss-mono); font-size: 10px; line-height: 1.9; letter-spacing: 0.14em; text-transform: uppercase; color: #5d646e; }
/* Only the front page has a gate to grow. Without .home here, every other
   page kept its navigation hidden for ever, because nothing there ever adds
   .ss-entered. */
body.home:not(.ss-entered) .ss-hero__copy,
body.home:not(.ss-entered) .ss-hero__notes,
body.home:not(.ss-entered) .ss-nav { opacity: 0; }
.ss-entered .ss-hero__copy, .ss-entered .ss-hero__notes, .ss-entered .ss-nav {
  animation: ss-chrome-in 1.8s ease-out both;
  animation-delay: calc(var(--ss-fade-delay) - 0.9s);
}
@keyframes ss-chrome-in { from { opacity: 0 } to { opacity: 1 } }

/* ---------- sticky nav ---------- */
/* Fixed rather than sticky, so it is present from the first screen and the
   landing photograph still runs the full height of the viewport behind it.
   The translucent, blurred background is what makes that read. */
.ss-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px; background: rgba(7,8,10,0.9); border-bottom: 1px solid var(--ss-rule);
  backdrop-filter: blur(14px);
}
/* Only the landing runs underneath it; every other page starts below. */
body:not(.home) { padding-top: var(--ss-nav-h); }
.ss-nav__mark { display: flex; align-items: center; gap: 12px; }
.ss-nav__mark img { width: 26px; height: 26px; display: block; opacity: 0.9; }
.ss-nav__mark span { font-size: 17px; }
.ss-nav__links { display: flex; gap: 30px; font-family: var(--ss-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.ss-nav__links a { color: #a8aeb8; }
.ss-nav__links a:hover { color: var(--ss-ink); }
.ss-nav__links a.is-current { color: var(--ss-ink); font-weight: 600; }

/* ---------- sections ---------- */
.ss-section { background: var(--ss-panel); scroll-margin-top: 60px; }
.ss-section + .ss-section { border-top: 1px solid var(--ss-rule); }
.ss-section__head { padding: 56px 40px 34px; display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.ss-section__head h2 { margin: 0; }
.ss-section__head p { margin: 0; max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--ss-ink-soft); }
.ss-body { padding: 0 40px 40px; }
.ss-rule-label { display: flex; align-items: baseline; gap: 22px; padding: 26px 40px; font-family: var(--ss-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ss-ink-faint); }
.ss-rule-label span:first-child { color: var(--ss-accent); }
.ss-rule-label hr { flex: 1; border: 0; height: 1px; background: var(--ss-rule); margin: 0; }

.ss-mono { font-family: var(--ss-mono); }
.ss-meta { font-family: var(--ss-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ss-ink-faint); }
.ss-chip { font-family: var(--ss-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 9px 14px; border: 1px solid #1e232a; color: var(--ss-ink-mute); }
.ss-chip.is-on { border-color: #3b4149; color: var(--ss-ink); }
.ss-badge { font-family: var(--ss-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid var(--ss-rule-strong); padding: 7px 11px; color: var(--ss-ink-soft); }
.ss-badge.is-open { color: var(--ss-accent); border-color: #2f4a42; }
.ss-button { font-family: var(--ss-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 18px; border: 1px solid #3b4149; color: var(--ss-ink); display: inline-block; }
.ss-button--solid { background: var(--ss-accent); color: var(--ss-panel); border-color: var(--ss-accent); }

/* photo tiles keep the layer-line texture until a photograph is set */
.ss-tile { position: relative; overflow: hidden; background-image:
  repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, rgba(0,0,0,0) 1px 5px),
  linear-gradient(150deg, #1c2129, #0b0e11); }
.ss-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- drops ---------- */
.ss-drop { display: grid; grid-template-columns: 150px 300px 1fr 150px; gap: 32px; padding: 28px 0; border-top: 1px solid var(--ss-rule-strong); align-items: start; }
.ss-drop.is-closed { opacity: 0.6; }
.ss-drop__dates { font-family: var(--ss-mono); font-size: 12px; line-height: 1.8; color: var(--ss-ink-soft); }
.ss-drop__tile { height: 230px; }
.ss-drop__body { display: flex; flex-direction: column; gap: 14px; }
.ss-drop__body h3 { margin: 0; font-size: 30px; font-weight: 300; }
.ss-drop__body p { margin: 0; max-width: 460px; font-size: 16px; line-height: 1.6; color: var(--ss-ink-soft); }
.ss-drop__side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* ---------- single drop ---------- */
.ss-drop-full { display: grid; grid-template-columns: 820px 1fr; }
.ss-drop-full__photo { position: relative; min-height: 720px; }
.ss-drop-full__panel { padding: 48px 40px; display: flex; flex-direction: column; gap: 30px; }
.ss-colourways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ss-colourway__swatch { height: 120px; }
.ss-buy { display: flex; flex-direction: column; gap: 16px; padding: 26px 0; border-top: 1px solid var(--ss-rule-strong); border-bottom: 1px solid var(--ss-rule-strong); }
.ss-spec { display: grid; grid-template-columns: 112px 1fr; gap: 10px 20px; font-family: var(--ss-mono); font-size: 12px; line-height: 1.65; }
.ss-spec dt { color: var(--ss-ink-faint); margin: 0; }
.ss-spec dd { margin: 0; }

/* ---------- portfolio ---------- */
.ss-year { display: flex; align-items: center; gap: 20px; padding: 14px 0; border-top: 1px solid var(--ss-rule-strong); font-family: var(--ss-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ss-ink-faint); }
.ss-year hr { flex: 1; border: 0; height: 1px; background: var(--ss-rule); margin: 0; }
.ss-grid { display: grid; gap: 16px; padding: 16px 0 34px; }
.ss-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ss-grid--6 { grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ss-work { display: flex; flex-direction: column; gap: 10px; }
.ss-work__tile { height: 300px; }
.ss-grid--6 .ss-work__tile { height: 190px; }
.ss-work h3 { margin: 0; font-size: 19px; font-weight: 300; }
.ss-grid--6 .ss-work h3 { font-size: 15px; color: #d8d4cc; }
.ss-work__meta { font-family: var(--ss-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ss-ink-faint); }

/* ---------- single piece ---------- */
.ss-piece__hero { height: 640px; }
.ss-piece { display: grid; grid-template-columns: 1fr 480px; gap: 70px; padding: 56px 40px; }
.ss-piece__lead { display: flex; flex-direction: column; gap: 26px; }
.ss-piece__lead h2 { margin: 0; font-size: 52px; }
.ss-piece__lead p { margin: 0; max-width: 620px; font-size: 20px; line-height: 1.6; color: #cfcbc3; }
.ss-piece__details { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ss-piece__details .ss-tile { height: 320px; }
.ss-piece__side { display: flex; flex-direction: column; gap: 34px; }
.ss-provenance { display: grid; grid-template-columns: 70px 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ss-rule); font-family: var(--ss-mono); font-size: 11px; align-items: baseline; }

/* ---------- cards: about, talks, news, contact ---------- */
.ss-card { background: var(--ss-panel); border: 1px solid #1a1e24; margin: 0 40px 24px; }
.ss-card__head { padding: 22px 32px; border-bottom: 1px solid var(--ss-rule); display: flex; justify-content: space-between; font-family: var(--ss-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ss-ink-faint); }
.ss-card__body { padding: 36px 32px; }
.ss-about { display: grid; grid-template-columns: 1fr 320px; gap: 32px; }
.ss-about .ss-tile { height: 340px; }
.ss-talk { display: grid; grid-template-columns: 120px 1fr auto; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--ss-rule); align-items: baseline; }
.ss-talk.is-past { opacity: 0.62; }
.ss-post { display: grid; grid-template-columns: 150px 1fr; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--ss-rule); }
.ss-post .ss-tile { height: 110px; }
.ss-contact { display: grid; grid-template-columns: 1fr 280px; gap: 36px; }
.ss-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.ss-field label { font-family: var(--ss-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ss-ink-faint); }
.ss-field input, .ss-field textarea {
  border: 1px solid var(--ss-rule-strong); background: transparent; color: var(--ss-ink);
  padding: 13px 14px; font-family: var(--ss-mono); font-size: 13px;
}
.ss-field textarea { min-height: 120px; resize: vertical; }

/* ---------- footer ---------- */
.ss-footer { display: flex; align-items: center; justify-content: space-between; padding: 26px 40px 40px; border-top: 1px solid var(--ss-rule); font-family: var(--ss-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #5d646e; background: var(--ss-page); }

@media (max-width: 1100px) {
  .ss-drop, .ss-drop-full, .ss-piece, .ss-about, .ss-contact { grid-template-columns: 1fr; }
  .ss-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ss-grid--6 { grid-template-columns: repeat(3, 1fr); }
  .ss-hero__copy { left: 24px; right: 24px; max-width: none; }
}

/* The plugin's contact form, wearing the theme's field design.
   Its <form> carries .ss-contact, which is a grid at card level — reset it. */
.ss-contact-form form.ss-contact { display: block; grid-template-columns: none; gap: 0; }
.ss-contact-form form p { display: flex; flex-direction: column; gap: 7px; margin: 0 0 18px; }
.ss-contact-form form label {
  font-family: var(--ss-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ss-ink-faint);
}
.ss-contact-form form input[type="text"],
.ss-contact-form form input[type="email"],
.ss-contact-form form textarea {
  background: transparent; border: 1px solid var(--ss-rule-strong); color: var(--ss-ink);
  font-family: var(--ss-mono); font-size: 13px; padding: 13px 14px; width: 100%;
}
.ss-contact-form form textarea { min-height: 120px; resize: vertical; }
.ss-contact-form form button[type="submit"] {
  font-family: var(--ss-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 12px 18px; background: var(--ss-accent); color: var(--ss-panel);
  border: 1px solid var(--ss-accent); cursor: pointer;
  align-self: flex-start;   /* the field wrappers are columns; don't stretch the button */
}
.ss-contact-form .cf-turnstile { margin: 0 0 18px; }
.ss-contact-sent, .ss-contact-error { font-family: var(--ss-mono); font-size: 12px; letter-spacing: 0.1em; }
.ss-contact-sent { color: var(--ss-accent); }
.ss-contact-error { color: #e0b3a4; }

/* ---------- reduced motion ---------- */
/* The gate reveals instantly in JS; this removes the transitions it would
   otherwise fade through, and stops the photograph drifting. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ss-gate { display: none; }
  html.ss-gate-locked { overflow: auto; }
  .ss-hero, .ss-hero__frame, .ss-hero__layer, .ss-hero__scrim {
    transition: none !important; animation: none !important;
  }
  .ss-hero__layer { transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}