/*
Theme Name: Saiko Subsidiary Holding Page
Theme URI: https://saikoph.com
Author: J.C. Jordan
Description: Single-template holding page for the four Saiko Prime Holdings subsidiaries. The brand is resolved from the site host, so one identical theme serves builders, elements, tech and media.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: Proprietary
Text Domain: saiko-sub
*/

/* ------------------------------------------------------------------
   FONTS — self-hosted, subset to Latin
------------------------------------------------------------------ */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('assets/cormorant-garamond-500.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Inter var';
  src:url('assets/inter-var.woff2') format('woff2-variations'),
      url('assets/inter-var.woff2') format('woff2');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

:root{
  --gold-light:#f6d67a;
  --gold-mid:#d4a537;
  --gold-dark:#9c7a20;
  --ink:#0a0908;
  --ink-2:#141210;
  --cream:#f4f1ea;
  --line:rgba(212,165,55,0.25);
  --muted:#9a958b;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--ink);
  color:var(--cream);
  font-family:'Inter var','Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

a{color:inherit;text-decoration:none}
img{max-width:100%}

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

/* ------------------------------------------------------------------
   PAGE
------------------------------------------------------------------ */
.page{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  isolation:isolate;
}

.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:-4;
  animation:sub-drift 52s ease-in-out infinite alternate;
}
@keyframes sub-drift{
  from{transform:scale(1.05) translate(0,0)}
  to{transform:scale(1.11) translate(-1.4%,-1.2%)}
}

/* Layer 1 — per-brand darkening. --scrim is set inline from the brand array;
   the gradient profile itself never changes between installs. */
.scrim-dark{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  opacity:var(--scrim,.4);
  background:linear-gradient(92deg,
    rgba(10,9,8,.80) 0%,
    rgba(10,9,8,.66) 34%,
    rgba(10,9,8,.60) 62%,
    rgba(10,9,8,.70) 100%);
}

/* Layer 2 — gold atmosphere, always full strength. Kept out of the scrim
   opacity so a dark photograph does not lose the warmth along with it. */
.scrim-gold{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(58% 54% at 78% 36%,
    rgba(212,165,55,.17) 0%, rgba(212,165,55,.06) 42%, transparent 74%);
}

/* Layer 3 — bottom fade, always full strength, so the group row and footer
   sit on solid ink whatever the brand scrim is doing. */
.scrim-foot{
  position:absolute;left:0;right:0;bottom:0;height:48%;
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,9,8,0) 0%, rgba(10,9,8,.55) 42%, rgba(10,9,8,.92) 78%, var(--ink) 100%);
}

.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 32px;position:relative}

/* --- masthead --- */
.masthead{padding:34px 0 0}
.masthead-link{display:inline-flex;align-items:center;gap:11px;padding:4px 0}
.masthead-link img{height:30px;width:auto;display:block;opacity:.9;transition:opacity .2s ease}
.masthead-link:hover img{opacity:1}
.masthead-link span{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:#b5b0a7;transition:color .2s ease;
}
.masthead-link:hover span{color:var(--gold-light)}

/* --- stage --- */
.stage{
  flex:1;
  display:grid;
  grid-template-columns:1fr 400px;
  align-items:center;
  gap:64px;
  padding:56px 0 72px;
}

.eyebrow{
  font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-mid);margin-bottom:22px;
}

h1{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;
  font-size:clamp(2.6rem,6vw,4.2rem);
  line-height:1.04;
  letter-spacing:.005em;
  background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold-mid) 55%,var(--gold-dark) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:20px;
}

.descriptor{
  font-size:1.06rem;color:var(--cream);max-width:30ch;margin-bottom:30px;
  text-shadow:0 1px 12px rgba(10,9,8,.7);
}

.divider{
  width:64px;height:1px;
  background:linear-gradient(90deg,var(--gold-mid),rgba(212,165,55,0));
  margin-bottom:30px;
}

.status{
  font-size:.95rem;color:#d2cec6;max-width:46ch;margin-bottom:34px;
  text-shadow:0 1px 12px rgba(10,9,8,.7);
}
.status strong{font-weight:500;color:var(--cream)}

.actions{display:flex;flex-wrap:wrap;gap:14px}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.86rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  padding:14px 26px;border-radius:2px;border:1px solid transparent;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,filter .2s ease;
}
.btn-solid{
  background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold-mid) 55%,var(--gold-dark) 100%);
  color:#141210;
}
.btn-solid:hover{filter:brightness(1.08)}
.btn-ghost{
  border-color:var(--line);color:var(--gold-light);
  background:rgba(10,9,8,.45);
  backdrop-filter:blur(2px);
}
.btn-ghost:hover{border-color:var(--gold-mid);background:rgba(20,18,16,.8)}
.btn .arw{font-size:1em;line-height:1;transform:translateY(-1px)}

/* --- mark --- */
.markwell{
  display:flex;align-items:center;justify-content:center;
  position:relative;
}

/* A soft well of ink anchored to the mark rather than the viewport, so the
   mark never competes with the photograph behind it. Strength is per brand. */
.markwell::before{
  content:'';position:absolute;
  left:50%;top:50%;
  width:min(760px,92vw);height:560px;
  transform:translate(-50%,-50%);
  opacity:var(--pool,.3);
  background:radial-gradient(closest-side ellipse at center,
    rgba(10,9,8,1) 0%, rgba(10,9,8,.72) 30%, rgba(10,9,8,.30) 60%, rgba(10,9,8,0) 100%);
  pointer-events:none;z-index:0;
}

.markwell img{
  width:auto;height:var(--markh,166px);
  display:block;position:relative;z-index:1;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.55));
  animation:sub-float 11s ease-in-out infinite alternate;
}
@keyframes sub-float{
  from{transform:translateY(-5px)}
  to{transform:translateY(5px)}
}

/* One-pass gold sweep on load. A loop would read as a banner ad. */
.markwell::after{
  content:'';position:absolute;
  top:-18%;left:-30%;width:44%;height:136%;
  background:linear-gradient(100deg,transparent 0%,rgba(246,214,122,.16) 45%,rgba(246,214,122,.30) 50%,rgba(246,214,122,.16) 55%,transparent 100%);
  filter:blur(14px);
  animation:sub-sweep 2.6s cubic-bezier(.33,0,.2,1) .55s 1 both;
  pointer-events:none;z-index:2;
}
@keyframes sub-sweep{
  from{transform:translateX(0);opacity:0}
  18%{opacity:1}
  82%{opacity:1}
  to{transform:translateX(300%);opacity:0}
}

/* --- group row --- */
.family{border-top:1px solid var(--line);padding:26px 0 40px}
.family-head{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:20px;
}
.family-row{display:flex;align-items:flex-end;flex-wrap:wrap;gap:38px}
.family-item{
  display:flex;flex-direction:column;align-items:center;gap:11px;
  opacity:.42;transition:opacity .2s ease;
}
a.family-item:hover{opacity:.85}
.family-item[aria-current="page"]{opacity:1}
.family-item img{height:var(--fh,26px);width:auto;display:block}
.family-item span{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.family-item[aria-current="page"] span{color:var(--gold-mid)}

/* --- footer --- */
.foot{
  border-top:1px solid rgba(212,165,55,.12);
  padding:22px 0 30px;
  font-size:.8rem;color:#6e6a63;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.foot a:hover{color:var(--gold-light)}

/* ------------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------------ */
@media (max-width:860px){
  .wrap{padding:0 24px}

  /* A directional scrim is meaningless once the columns stack. */
  .scrim-dark{
    background:linear-gradient(180deg,
      rgba(10,9,8,.72) 0%, rgba(10,9,8,.80) 45%, rgba(10,9,8,.88) 100%);
  }
  .scrim-gold{
    background:radial-gradient(70% 40% at 50% 22%,
      rgba(212,165,55,.14) 0%, transparent 70%);
  }
  .hero-photo{object-position:38% center}

  .stage{grid-template-columns:1fr;gap:0;padding:36px 0 56px}
  .markwell{order:-1;justify-content:flex-start;margin-bottom:38px}
  .markwell::before{left:34%;height:380px}
  .markwell img{height:calc(var(--markh,166px) * .68)}
  .markwell::after{left:-40%;width:70%}
  .descriptor,.status{max-width:none}
  .family-row{gap:26px}
  .actions .btn{flex:1 1 auto;justify-content:center}
}

/* Slow drift is a vestibular trigger. */
@media (prefers-reduced-motion:reduce){
  .hero-photo{animation:none}
  .markwell img{animation:none}
  .markwell::after{animation:none;opacity:0}
  *{transition-duration:.01ms !important}
}