/* keyboard focus visibility */
:focus-visible{ outline:2px solid #F0D67E; outline-offset:3px; border-radius:2px; }
a:focus-visible, button:focus-visible{ outline:2px solid #F0D67E; outline-offset:4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid #F0D67E; outline-offset:2px; }

/* skip to content link */
.skip-link{position:absolute; left:-9999px; top:0; z-index:10000; background:#F0D67E; color:#0B0907; padding:11px 18px; font-family:var(--mono,monospace); font-size:12px; letter-spacing:.08em; text-transform:uppercase; border-radius:0 0 6px 0;}
.skip-link:focus{left:0;}

/* ===== Page transitions (progressive enhancement) ===== */
@view-transition { navigation: auto; }

@keyframes vtOut { to { opacity: 0; transform: translateY(-10px) scale(.99); } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(14px) scale(.992); } }
::view-transition-old(root){ animation: vtOut .40s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root){ animation: vtIn  .55s cubic-bezier(.16,1,.3,1) both; }

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation: none; }
}

/* ===== Woven loading intro ===== */
#loader{position:fixed;inset:0;z-index:9999;background:#0B0907;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),visibility 0s linear .9s;}
#loader.done{opacity:0;transform:translateY(-24px);visibility:hidden;}
#lweave{position:absolute;inset:0;width:100%;height:100%;filter:blur(.6px);}
.loader-center{position:relative;z-index:2;text-align:center;padding:0 24px;}
.loader-mark{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(54px,11vw,128px);letter-spacing:-.04em;color:#ECE5D4;opacity:0;transform:translateY(14px);animation:wvMarkIn 1.1s cubic-bezier(.16,1,.3,1) .25s forwards;}
.loader-mark em{color:#F0D67E;font-style:italic;}
@keyframes wvMarkIn{to{opacity:1;transform:none;}}
.loader-sub{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:#766E5C;margin-top:20px;opacity:0;animation:wvMarkIn 1s cubic-bezier(.16,1,.3,1) .6s forwards;}
.loader-bar{width:160px;height:1px;background:rgba(233,212,150,.30);margin:26px auto 0;overflow:hidden;opacity:0;animation:wvMarkIn .8s cubic-bezier(.16,1,.3,1) .55s forwards;}
.loader-bar span{display:block;height:100%;width:0;background:linear-gradient(100deg,#8F701B,#C9A227 28%,#F0D67E 52%,#E7D7A8 72%,#C9A227);}
@media (prefers-reduced-motion:reduce){.loader-mark,.loader-sub,.loader-bar{animation-duration:.01ms;}}

/* ============================================================
   Weavo Studio — Base
   Reset, typography, layout primitives, buttons, utilities.
   Shared across every page. Loads after tokens.css.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold, #C9A227); color: var(--ink, #0B0907); text-shadow: none; }
::-moz-selection { background: var(--gold, #C9A227); color: var(--ink, #0B0907); text-shadow: none; }

a { color: inherit; text-decoration: none; }
input, textarea { cursor: text; font-family: inherit; }
button, select { cursor: pointer; font-family: inherit; }
img { max-width: 100%; display: block; }

/* On touch / no-hover devices, restore the normal cursor */
@media (max-width: 1024px) {
  body, a, button, input, select, textarea { cursor: auto; }
}

/* --- Layout primitives --- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: 140px 0; position: relative; }

/* --- Section heading block (used on inner pages) --- */
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 100px;
}
.section-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-num::before { content: ''; width: 40px; height: 1px; background: var(--accent); }
.section-title {
  font-family: var(--serif);
  font-size: clamp(42px, 7vw, 108px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-weight: 400;
  max-width: 1100px;
}
.section-title em { font-style: italic; color: var(--accent); font-weight: 300; }
.section-side {
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  padding-bottom: 18px;
  line-height: 1.8;
}

/* --- Buttons (unified system) --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.35s var(--ease);
  background: transparent;
}
.btn svg { transition: transform 0.3s ease; }
.btn:hover svg { transform: translate(2px, -2px); }

.btn-gold { background: var(--gold); color: var(--black); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--black); box-shadow: 0 16px 46px rgba(201,162,39,.34); transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--bone); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--gold-bright); color: var(--gold-bright); transform: translateY(-2px); }

.btn-ghost-light { background: transparent; color: var(--bone); border-color: rgba(242,237,227,.4); }
.btn-ghost-light:hover { border-color: var(--bone); color: var(--bone); transform: translateY(-2px); }

.btn-muted { background: transparent; color: var(--muted); border-color: var(--muted); }
.btn-muted:hover { color: var(--bone); border-color: var(--bone); }

.btn .btn-arrow { display: inline-block; font-size: 0.9em; opacity: 0.85; transition: transform 0.3s ease; }
.btn:hover .btn-arrow { transform: translateX(2px); }
.btn:hover .btn-arrow--back { transform: translateX(-2px); }

/* --- Gold shimmer text utility --- */
.shine { background: var(--gold-grad); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: shineMove 7s linear infinite; }
@keyframes shineMove { to { background-position: 220% 0; } }

/* --- Scroll-reveal (used with main.js IntersectionObserver) --- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* --- Utilities --- */
/* --- Skip link (keyboard a11y) --- */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 10000;
  background: var(--ink); color: var(--cream);
  padding: 12px 18px; border-radius: var(--radius);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateY(-150%); transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--accent-glow); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Focus-visible (keyboard only, no mouse click ring) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[data-cursor="hover"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}