/* Envisionera Studios — attachment v1 (repaired) site stylesheet */
/* Fonts: self-hosted Instrument Sans + Newsreader + Spectral (woff2) */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Instrument-Sans-normal-400-1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Instrument-Sans-normal-400-2.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Instrument-Sans-normal-500-3.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Instrument-Sans-normal-500-4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 400;
  font-display: swap;
  src: url("../fonts/Newsreader-italic-200_400-1.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 400;
  font-display: swap;
  src: url("../fonts/Newsreader-italic-200_400-2.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 400;
  font-display: swap;
  src: url("../fonts/Newsreader-italic-200_400-3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url("../fonts/Newsreader-normal-200_500-4.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url("../fonts/Newsreader-normal-200_500-5.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url("../fonts/Newsreader-normal-200_500-6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Spectral-normal-400-1.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Spectral-normal-400-2.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Spectral-normal-400-3.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Spectral-normal-400-4.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Base site styles (preserved from original design) */
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
  body { margin: 0; background: #F8F5F0; }
  * { box-sizing: border-box; }
  a { color: #24352E; text-decoration: none; }
  a:hover { color: #6B6459; }
  input, textarea, button { font-family: inherit; }
  input:focus, textarea:focus { outline: none; }
  ::selection { background: #E2D9CD; }
  select:focus { outline: none; }
  select { font-family: inherit; }
  [data-cf-field]::placeholder { color: rgba(221,210,196,.45); }
  [data-cf-field]:hover { border-bottom-color: rgba(221,210,196,.6) !important; }
  [data-cf-field]:focus { border-bottom-color: #DDD2C4 !important; }
  [data-cf] option { background: #24352E; color: #DDD2C4; }
  [data-cf] ::selection, #contact ::selection { background: rgba(221,210,196,.3); }
  @keyframes eeBreath { 0%,100% { opacity: .38 } 50% { opacity: 1 } }
  @keyframes eeRise { from { transform: translateY(108%); } to { transform: translateY(0); } }
  @keyframes eeTrack { from { transform: translateX(var(--x)); } to { transform: none; } }
  @keyframes eeOpen { from { transform: translateX(var(--x)); } to { transform: none; } }
  @keyframes eeOpenM { from { transform: translateX(var(--xm)); } to { transform: none; } }
  @keyframes eeBloom { 0% { opacity: 0; transform: scale(.955); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
  @keyframes eePop { 0% { opacity: .15; transform: scale(.82); } 100% { opacity: 1; transform: none; } }
  @keyframes eeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes eeNav { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  [data-nav-in] { animation: eeNav .9s cubic-bezier(.16,1,.3,1) both; }
  @keyframes eeSoft { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes eeLine { from { transform: translateY(1.7em); } to { transform: none; } }
  [data-hero-seq="1"] { animation: eeSoft 1.1s cubic-bezier(.22,1,.36,1) 1.65s both; }
  [data-hl-r="1"] { animation: eeLine 1.25s cubic-bezier(.16,1,.3,1) 1.8s both; }
  [data-hl-r="2"] { animation: eeLine 1.25s cubic-bezier(.16,1,.3,1) 1.95s both; }
  [data-hero-seq="3"] { animation: eeSoft 1.1s cubic-bezier(.22,1,.36,1) 2.2s both; }
  [data-hero-seq="4"] { animation: eeSoft 1s cubic-bezier(.22,1,.36,1) 2.4s both; }
  @media (max-width: 600px) { [data-wm-word] { display: block !important; width: max-content; margin-right: -.35em !important; } [data-wm-t] { animation-name: eeOpenM !important; } }
  @keyframes eeFoldA { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-1.2%, -1.5%, 0) scale(1.03); } }
  @keyframes eeFoldB { from { transform: translate3d(0,0,0); } to { transform: translate3d(1.5%, 1.2%, 0); } }
  [data-fold-a] { animation: eeFoldA 38s ease-in-out infinite alternate; }
  @keyframes eeSilkA { from { transform: translate3d(-2%, 0, 0) rotate(-.6deg) scaleY(1); } to { transform: translate3d(2%, -1.6%, 0) rotate(.5deg) scaleY(1.045); } }
  @keyframes eeSilkB { from { transform: translate3d(2.4%, 1%, 0) rotate(.55deg) scaleY(1.01); } to { transform: translate3d(-2%, -2%, 0) rotate(-.7deg) scaleY(1.055); } }
  @keyframes eeSilkC { from { transform: translate3d(-1.6%, -1%, 0) rotate(.45deg) scaleY(1); } to { transform: translate3d(2%, 1.6%, 0) rotate(-.5deg) scaleY(1.06); } }
  [data-silk="a"] { animation: eeSilkA 8s cubic-bezier(.45,0,.55,1) -3s infinite alternate; }
  [data-silk="b"] { animation: eeSilkB 7s cubic-bezier(.45,0,.55,1) -5s infinite alternate; }
  [data-silk="c"] { animation: eeSilkC 9s cubic-bezier(.45,0,.55,1) -1s infinite alternate; }
  [data-fold-b] { animation: eeFoldB 46s ease-in-out infinite alternate; }
  @keyframes eeDrift { 0%,100% { transform: translateY(0) } 50% { transform: translateY(5px) } }
  [data-armed] [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); }
  [data-armed] [data-reveal][data-in="1"] { opacity: 1; transform: none; }
  [data-opt][data-selected="1"] { background: #24352E !important; border-color: #24352E !important; color: #F8F5F0 !important; }
  nav[data-over="1"] [data-nav-ink] { color: #DDD2C4 !important; }
  nav[data-over="1"] [data-menubtn] { color: #DDD2C4 !important; border-color: rgba(221,210,196,.4) !important; }
  nav[data-over="1"] [data-nav-cta] { background: #DDD2C4 !important; color: #24352E !important; }
  [data-navlink]::after { content: ""; display: block; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
  [data-navlink]:hover::after { transform: scaleX(1); }
  @media (max-width: 900px) { [data-journey-bridge] { margin-top: 12px !important; margin-left: 0 !important; } }
  @media (max-width: 1040px) {
    [data-navlinks] { display: none !important; }
    [data-menubtn] { display: block !important; }
  }
  @media (max-width: 900px) {
    [data-two] { grid-template-columns: minmax(0,1fr) !important; }
    [data-exp-grid] { grid-template-columns: minmax(0,1fr) !important; }
    [data-exp-panel-wrap] { order: -1 !important; height: auto !important; position: static !important; }
    [data-exp-img] { height: 300px !important; }
    [data-principles] { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
    [data-footcols] { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-armed] [data-reveal] { opacity: 1; transform: none; transition: none; }
    [data-breath] { animation: none !important; }
    [data-fold-a], [data-fold-b], [data-silk] { animation: none !important; }
    [data-wm-l], [data-wm-t], [data-wm-c], [data-hero-seq], [data-hl-r], [data-nav-in] { animation: none !important; }
    [data-hl-r] { transform: none !important; }
  }
  html[data-ee-intro="off"] [data-intro] { display: none !important; }
  html[data-ee-intro="on"] { overflow: hidden; }
  html[data-ee-intro="on"] [data-nav-in], html[data-ee-intro="on"] [data-wm-c], html[data-ee-intro="on"] [data-hero-seq], html[data-ee-intro="on"] [data-hl-r] { animation-play-state: paused !important; }

/* ================================================================
   Additions by the attachment-v1-fixed repair pass
   (accessibility, mobile tap targets, skip-intro, menu visibility)
   ================================================================ */

/* --- Visible keyboard focus states (spec #11) --- */
:focus-visible {
  outline: 3px solid #cbb68a;
  outline-offset: 3px;
}
/* No permanent outlines for mouse users; :focus-visible already limits
   this to keyboard/assistive-tech focus in modern browsers. */

/* --- Mobile menu accessibility (spec #12): closed menu must not be
   keyboard-focusable. Toggled between this hidden state and an open
   state entirely via JS (site.js), using visibility + pointer-events
   rather than display, so transitions remain possible if ever added. */
#mobile-menu[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
}
#mobile-menu[aria-hidden="false"] {
  visibility: visible;
  pointer-events: auto;
  display: flex;
}

/* --- Footer mobile tap targets (spec #10): ~44px practical tap targets
   via padding, not font-size, so the visual type size is untouched. */
@media (max-width: 820px) {
  footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
  }
}

/* --- Skip Intro control --- */
#skip-intro:hover { background: rgba(43,40,37,.06); }

/* --- 44px mobile tap targets for header/intro micro-controls, via
   padding/min-height rather than font-size (same approach as the
   footer links above), so none of these visually grow. --- */
@media (max-width: 820px) {
  #skip-intro,
  #menu-btn {
    min-height: 44px;
    padding-top: 13px;
    padding-bottom: 13px;
    box-sizing: border-box;
  }
  #nav-logo-link {
    min-height: 44px;
  }
}

/* Reduced-motion users: intro never blocks, per spec #13 */
@media (prefers-reduced-motion: reduce) {
  #intro-overlay { display: none !important; }
}

/* --- Belt-and-suspenders guarantee that the intro can never
   permanently block the page, even if JavaScript fails entirely
   (spec #13: "the page cannot remain permanently blocked if
   animation initialization fails"). Pure CSS, independent of JS. --- */
@keyframes ee-intro-autoclear { to { opacity: 0; pointer-events: none; } }
#intro-overlay { animation: ee-intro-autoclear 0.01s linear 8s forwards; }