/*
Theme Name: Amethyst
Theme URI: https://amethystmtn.com
Author: Valerie Mars
Author URI: https://amethystmtn.com
Description: Custom theme for Amethyst Mountain — digital strategy and creative.
Version: 1.0.0
License: Proprietary
Text Domain: amethyst
*/


/* ============================================================
   FONT DECLARATIONS
   All font files live in /fonts/ inside the theme folder.
   Browser uses the first format it supports.
   Never load from Google CDN.
   ============================================================ */

/* Fraunces — Variable (display + body) */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-VariableFont_SOFT,WONK,opsz,wght.woff2') format('woff2'),
       url('fonts/Fraunces-VariableFont_SOFT,WONK,opsz,wght.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
    font-variation-settings: 'opsz' 144, 'WONK' 1, 'SOFT' 0;
}

/* Fraunces — Variable Italic */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.woff2') format('woff2'),
       url('fonts/Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.woff') format('woff');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
    font-variation-settings: 'opsz' 144, 'WONK' 1, 'SOFT' 0;
}

/* Archivo — Variable (header tagline) */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-VariableFont_wdth,wght.woff2') format('woff2'),
       url('fonts/Archivo-VariableFont_wdth,wght.woff') format('woff');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   CSS CUSTOM PROPERTIES
   Edit all colors, spacing, and timing values here.
   ============================================================ */
:root {

  /* — Colors — */
  --color-purple-brand:   #6b4ca5;  /* official logo/brand purple */
  --color-purple-web:     #9066de;  /* UI elements, links, icons, tagline */
  --color-purple-hover:   #b09de8;  /* hover state for purple elements */
  --color-highlight:      #b7a484;  /* display headings (Fraunces) */
  --color-white:          #ffffff;  /* body text, box titles */
  --color-off-white:      rgba(255, 255, 255, 0.88);
  --color-bg-fallback:    #0a0814;  /* deep dark background fallback */

  /* Box fill — semi-transparent dark purple */
  --color-box-bg:         rgba(20, 10, 40, 0.5);
  --color-box-border:     rgba(159, 134, 188, 0.15);
  --color-box-glow:       rgba(144, 102, 222, 0.25);

  /* — Typography — */
  --font-display:         'Fraunces', Georgia, serif;
  --font-tagline:         'Archivo', sans-serif;
  --font-body:            'Fraunces', Georgia, serif;

  /* Fraunces optical sizing — auto lets browser optimize per size */
  --font-optical-sizing:  auto;

  /* — Fraunces weight variants — */
  --weight-thin:          100;
  --weight-light:         300;
  --weight-regular:       400;
  --weight-bold:          700;

  /* — Spacing — */
  --header-padding:       2rem;
  --footer-padding-top:       1rem;
  --footer-padding-bottom:    2.5rem;
 --content-padding-h:    8vw;   /* horizontal content padding */
  --safe-area-bottom:     env(safe-area-inset-bottom, 0px);

  /* — Transitions — */
  --transition-fast:      0.2s ease;
  --transition-mid:       0.4s ease;
  --transition-slow:      0.6s ease;

  /* — Z-index layers — */
  --z-bg:                 0;
  --z-content:            10;
  --z-header:             100;
  --z-footer:             100;
  --z-overlay:            200;

  /* Other */
    --glow-purple: rgba(144, 104, 222, 1);


}


/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  /* Prevents scrollbar from shifting layout on overflow change */
  scrollbar-gutter: stable;
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* body never scrolls — only .am-content scrolls */
  background-color: var(--color-bg-fallback);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-optical-sizing: var(--font-optical-sizing);
  color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
    font-variation-settings: 'opsz' 72, 'WONK' 0, 'SOFT' 20;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-purple-web);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--color-purple-hover);
}

ol {
  list-style-position: outside;
  padding-left: 3rem;
}

ul {
  list-style-position: outside;
  padding-left: 3rem;
  margin-bottom: 2rem;
}


.am-button {
  background: var(--color-purple-web);
  color: var(--color-white);
  padding: 4px 8px;
  font-family: var(--font-tagline);
  font-weight: var(--weight-thin);
  font-size: clamp(1rem, 1vw, 2rem);
  font-stretch: expanded;
  border: 0px;
  border-radius: 4px;
  transition: all var(--transition-mid);
}

.am-button:hover {
  cursor: pointer;
  transform: scale(1.04);
  filter: drop-shadow(0 0 8px var(--color-purple-web));
}


/* ============================================================
   IMAGE ALIGNMENT
   Standard classes added by WP visual editor
   ============================================================ */
.alignleft {
  float: left;
  margin: 0 1.5rem 1rem 0;
}

.alignright {
  float: right;
  margin: 0 0 1rem 1.5rem;
}

.aligncenter {
  display: block;
  margin: 1rem auto;
}

.alignnone {
  margin: 0 0 1rem 0;
}

/* WP image captions */
.wp-caption {
  max-width: 100%;
}

.wp-caption img {
  display: block;
  width: 100%;
}

.wp-caption-text {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1.2vw, 0.85rem);
  color: var(--color-off-white);
  text-align: center;
  margin-top: 0.4rem;
  font-style: italic;
}

/* Clearfix for floated images in content */
.am-open-content::after,
.am-longform-content::after {
  content: '';
  display: table;
  clear: both;
}



/* ============================================================
   BACKGROUND IMAGE
   Fixed behind everything. Always visible.
   cover: fills full viewport, crops top/bottom before leaving gaps.
   Mobile: shifted left to keep mountain face + campfire visible.
   ============================================================ */
#am-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-bg);
  background-image: url('images/AM-bkgd.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}


/* ============================================================
   SITE HEADER
   Fixed, full width, transparent. Logo + tagline centered.
   ============================================================ */
#am-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-header);
  background: transparent;
  padding: var(--header-padding) var(--content-padding-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none; /* allows click-through to content below */
}

/* Logo — pointer events re-enabled for the link */
#am-header .am-logo-link {
  pointer-events: auto;
  display: inline-block;
  transition: all var(--transition-mid);
}

#am-header .am-logo-link:hover {
  /*transform: scale(1.04);*/
  filter: drop-shadow(0 0 8px var(--color-white));
}

#am-header .am-logo {
  width: clamp(280px, 36vw, 420px);
  height: auto;
}

/* Tagline — pulled from WP site tagline setting */
#am-tagline {
  font-family: var(--font-tagline);
  font-weight: var(--weight-thin);
  font-stretch: expanded; /* Archivo Expanded */
  font-size: clamp(0.7rem, 1.4vw, 1.1rem);
  color: var(--color-purple-web);
  text-shadow: 0 0 20px var(--glow-purple), 0 0 40px var(--glow-purple), 0 0 8px rgba(159, 134, 188, 0.5);
  letter-spacing: 0.02em;
  text-align: center;
  margin-top: 1rem;
  pointer-events: none;
}


/* ============================================================
   SITE FOOTER
   Fixed, full width, transparent. Three icons centered.
   ============================================================ */
#am-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-footer);
  background: transparent;
  padding-bottom: calc(var(--footer-padding-bottom) + var(--safe-area-bottom));
  padding-top: var(--footer-padding-top);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}

/* Footer icon links */
.am-footer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity var(--transition-fast), filter var(--transition-fast);
}

.am-footer-icon:hover {
  opacity: 1;
  filter: drop-shadow(0 0 8px var(--color-purple-web));
}

.am-footer-icon svg,
.am-footer-icon img {
  width: 50px;
  height: 50px;
  color: var(--color-purple-web);
}

.am-footer-icon.am-footer-icon--connect img {
  width: 42px;
  height: 42px;
}

.am-footer-icon.am-footer-icon--home:hover {
  filter: drop-shadow(0 0 4px var(--color-off-white));
}


/* ============================================================
   PORTAL OVERLAY
   Full viewport overlay triggered by portal icon click.
   Fades in over current page content.
   ============================================================ */
#am-portal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-overlay);
  background: rgba(10, 8, 20, 0.5); /* dark bg, lets mountain show faintly */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 6vw;

  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-mid);
}

#am-portal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Inner content wrapper */
#am-portal-overlay-inner {
  width: 100%;
  /*max-width: 900px;*/
  display: flex;
  flex-direction: column;
  /*gap: 0.5rem;*/
}

/* Close button — top right */
#am-portal-close {
  position: absolute;
  bottom: 1.5rem;
  right: 2rem;
  left: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 5rem;
  color: var(--color-highlight);
  opacity: 1;
  transition: opacity var(--transition-mid);
  letter-spacing: 0.1em;
}

#am-portal-close:hover {
    color: var(--color-white);

}

/* Optional title inside overlay */
#am-portal-overlay .am-portal-title {
  margin-bottom: 2rem;
}




/* ============================================================
   CONTENT AREA
   Sandwiched between header and footer.
   The ONLY section that scrolls (where applicable).
   Top/bottom offsets are set via JS after measuring header/footer.
   ============================================================ */
#am-content {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: var(--z-content);
  /* top and bottom set dynamically by main.js after header/footer measure */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 60px,
    black calc(100% - 60px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 60px,
    black calc(100% - 60px),
    transparent 100%
  );
  /* Custom scrollbar — subtle */
  scrollbar-width: thin;
  scrollbar-color: var(--color-purple-brand) transparent;
}

#am-content::-webkit-scrollbar {
  width: 4px;
}

#am-content::-webkit-scrollbar-track {
  background: transparent;
}

#am-content::-webkit-scrollbar-thumb {
  background-color: var(--color-purple-brand);
  border-radius: 2px;
}

.page-template-page-portal #am-content {
  overflow-y: hidden;
}

.am-portal-wrap {
  /*margin-top: 4rem;*/
}

.am-intro-g-content {
  display: none;
}


/* Soft fade edges on scrollable content — signals more content above/below */
.am-content-scrollable {
  margin: 0 auto;
  width: 100%;
  padding-top: 5rem;
  max-width: 1000px;
  overflow-y: auto;
}

.am-aot-header .am-heading-display,
.am-aot-header p {
  text-align: center;
}

.am-aot-header p {
  text-align: center;
  font-variation-settings: 'opsz' 72, 'WONK' 0, 'SOFT' 20;
}


/* Non-scrolling content — no mask needed */
.am-content-fixed {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  margin-top: 5rem;
}

#am-intro-shell.am-content-fixed {
  justify-content: flex-start;
  margin-top: 5rem;
}

/* ============================================================
   OPEN PAGE TEMPLATE
   Scrollable, no box container. Full width editorial flow.
   Used for Angel in the Details, Cartography index, etc.
   ============================================================ */
.am-open-wrap {
  padding: 0 10vw; /* generous side margins, no box needed */
}

.am-open-inner {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 5rem 0 4rem;
}

.am-open-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 2.5rem;
  text-align: center;
}


/* CONTENT AREA TYPOGRAPHY */

.am-body-text {
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  line-height: 1.9;
  font-variation-settings: 'opsz' 72, 'WONK' 0, 'SOFT' 20;
}

.am-body-text p {
  margin-bottom: 1.4rem;
}

.am-body-text h2,
.am-body-text h3 {
  color: var(--color-highlight);
  margin: 2rem 0 1rem;
}

.am-body-text h2 {
  font-size: clamp(1.2rem, 2.3vw, 3rem);
  font-variation-settings: 'opsz' 144, 'WONK' 1;
  font-family: var(--font-display);
  font-weight: 400;
}

.am-body-text h3 {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 2.5rem);
  font-weight: var(--weight-light);
  font-stretch: expanded; /* Archivo Expanded */
  font-variation-settings: 'opsz' 72, 'WONK' 1;
  /*font-size: clamp(0.7rem, 1.4vw, 1.1rem);*/
  /*color: var(--color-purple-web);*/
  /*letter-spacing: 0.02em;*/
}

.am-longform-wrap {
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center; /* right offset */
  padding: 2rem 3vw 2rem 0;
}


.am-longform-container {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--color-purple-brand) transparent;
}

.industry-tag {
  text-align: center;
}

/* Mobile */
@media (max-width: 768px) {
  .am-open-wrap {
    padding: 0 6vw;
  }
}



/* ============================================================
   SHARED COMPONENT — .am-box
   Used across Portal, AoT, Quotes, and longform container.
   One class to rule them all.
   Exact values tuned during build.
   ============================================================ */
.am-box {
  background: var(--color-box-bg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 0px solid rgba(107, 76, 165, 0.15);
  border-radius: 0px;
  box-shadow: inset 0 0 30px 20px rgba(107, 76, 165, 0.15);
  transition: all var(--transition-mid),
}

.am-box:hover {
  background: var(--color-box-bg);
  border-color: rgba(159, 134, 188, 0.35);
  box-shadow: inset 0 0 20px 10px rgba(107, 76, 165, 0.3);
  border: 0px solid rgba(107, 76, 165, 0.4);
}



/* ============================================================
   SHARED GRID LAYOUTS
   Used by Portal, AoT, archives, quotes — any box grid.
   ============================================================ */

/* Universal grid container */
.am-grid {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  gap: 1.5rem 1.5rem; /* row-gap column-gap */
  justify-content: center;
  padding: 0 2vw;
  flex-direction: column;
}

/* Universal grid card/box */
.am-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  text-decoration: none;
  cursor: pointer;
  min-height: 170px;
  max-width: 360px;
  transition: all 0.2s;
}

/* ============================================================
   PORTAL GRID — overrides universal grid for 2-over-3 layout
   ============================================================ */
.am-portal-grid {
}

.am-portal-row {
  display: flex;
  flex-direction: row;
  gap: 1.5rem 1.5rem; /* row-gap column-gap */
  justify-content: center;
  align-items: stretch; /* makes all boxes in a row equal height */
}

.am-portal-door {
  flex: 0 0 calc(33.333% - 1rem); /* same width as bottom row */
  max-width: calc(33.333% - 1rem);
 }



/* ============================================================
   LIST Layout
   Orderly list layout for content archives, etc.
   ============================================================ */
.am-list-subtitle {
  margin-bottom: 2.5rem;
}

.am-list-type-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-thin);
  font-variation-settings: 'opsz' 72, 'WONK' 1;
  color: var(--color-highlight);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-box-border);
}

.am-list-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 2rem;
  text-align: center;
}

.am-list-item {
  border-bottom: 1px solid var(--color-box-border);
}

.am-list-item:last-of-type {
  border-bottom: 0px solid var(--color-box-border);
}


.am-list-link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 0;
  text-decoration: none;
  /*transition: padding-left var(--transition-fast);*/
}

.am-list-link:hover {
  /*padding-left: 0.5rem;*/
}

.am-list-title {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-variation-settings: 'opsz' 36, 'WONK' 1;
  color: var(--color-highlight);
  font-size: clamp(1rem, 2vw, 2.2rem);
  transition: color var(--transition-fast);
}

.am-list-link:hover .am-list-title {
  color: var(--color-purple-web);
}

.am-list-excerpt.am-accent-text {
  font-size: clamp(0.8rem, 1.3vw, 1.2rem);
  color: var(--color-white);
}


/* AOT Grid */

#am-aot-grid {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  gap: 1.5rem 1.5rem;
  justify-content: center;
  padding: 0 2vw;
  flex-direction: row;
}


/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */

/* Display heading — Fraunces thin, highlight gold */
.am-heading-display {
  font-family: var(--font-display);
 /* font-weight: var(--weight-thin);*/
  font-weight: 400;
  /*font-optical-sizing: var(--font-optical-sizing);*/
  color: var(--color-highlight);
  line-height: 1.2;
  margin-bottom: 2rem;
  font-variation-settings: 'opsz' 144, 'WONK' 1, 'SOFT' 0;
  font-size: 3rem;
  text-align: center;
}

/* Subtitle / descriptor text */
.am-subtitle {
  font-family: var(--font-body);m
  font-weight: var(--weight-light);
  color: var(--color-off-white);
  font-size: clamp(0.85rem, 1.4vw, 2rem);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

/* Body text within boxes */
.am-body-text {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-optical-sizing: var(--font-optical-sizing);
  color: var(--color-white);
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  line-height: 1.8;
}

/* Purple accent text — excerpts, secondary labels */
.am-accent-text {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  color: var(--color-purple-web);
  font-size: clamp(0.8rem, 1.3vw, 0.95rem);
  line-height: 1.6;
}

h2.am-portal-door-title {
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'WONK' 1, 'SOFT' 20;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.am-portal-door-excerpt {
  font-weight: 400;
  font-variation-settings: 'opsz' 72, 'WONK' 1, 'SOFT' 0;
  color: var(--color-purple-web);
  font-size: 1.1rem;
  line-height: 1.6rem;
} 

.am-accent-text.am-aot-card-excerpt.aot-card-text {
  color: var(--color-off-white);
}

.am-aot-card:hover .am-accent-text.am-aot-card-excerpt.aot-card-text {
  color: var(--color-purple-web);
  transition: all 0.3s;
}


/* Purple accent in page title */
.am-purple {
  color: var(--color-purple-web);
}


/* ============================================================
   CINEMATIC TEXT GROUPS
   ============================================================ */
.am-cinema-group {
  opacity: 0;
  transition: opacity 0.6s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-variation-settings: 'opsz' 12, 'WONK' 0, 'SOFT' 20;
}

.am-cinema-group.is-active {
  opacity: 1;
}

#am-intro-stage {
  width: 85%;
  max-width: 900px;
  min-width: 300px;
  text-align: center;
  display: flex;
  justify-content: center;
}

.am-cinema-wrap {
  width: 100%;
}

.am-cinema-line {
    opacity: 0;
    transition: opacity 0.5s ease;
    margin-bottom: 0.5rem;
}

.am-cinema-line.is-active {
    opacity: 1;
}

#cinematic-stage {
  position: relative;
  min-height: 200px;
  font-size: 1.2rem;
  line-height: 1.5rem;
}

#cinematic-stage.is-read-mode .am-cinema-group {
  position: relative;
  opacity: 1;
  margin-bottom: 1.5rem;
}

.am-cinema-controls {
  /*margin-top: -1.5rem;*/
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  padding-bottom: 3rem;
}

.am-cinema-controls.is-visible {
  opacity: 1;
}

#btn-read {
  border: 0px;
  background: none;
  color: var(--color-purple-web);
  font-family: var(--font-body);
  text-align: center;
  font-size: 0.8rem;;
  text-transform: uppercase;
  font-variation-settings: 'opsz' 72, 'WONK' 0, 'SOFT' 20;
  cursor: pointer;
  margin-bottom: 1rem;
  padding: 2px 10px;
  border: 1px solid var(--color-purple-brand);
}

#btn-read:hover {
  color: var(--color-purple-web);
  filter: drop-shadow(0 0 8px var(--color-purple-web));
}


/* ============================================================
   NEXT ARROW (intro pages only)
   Centered below content area, above footer.
   Pulses after cinematic sequence ends.
   ============================================================ */
#am-next {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
}

#am-next:hover {
  opacity: 1;
  filter: drop-shadow(0 0 10px var(--color-purple-web));
}

#am-next img,
#am-next svg {
  width: clamp(36px, 4vw, 56px);
  height: auto;
}

/* Pulse animation — fires when cinematic sequence ends */
@keyframes am-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.12); }
}

#am-next.is-pulsing {
  animation: am-pulse 1.8s ease-in-out infinite;
}


/* ============================================================
   QUOTE BOXES — fly-in animation
   ============================================================ */

#am-quotes-stage {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-left: -1vw;
  margin-right: -1vw;
}

.am-quotes-wrap {
  flex-shrink: 0;
  max-width: 90vw;
}

.am-quotes-row {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}

.am-quote-box {
  flex: 0 0 calc(33.333% - 1rem);
  max-width: calc(33.333% - 1rem);
  opacity: 0;
  transition: opacity 0.5s ease, transform 1s ease;
  padding: 1rem;
}   

.am-box.am-quote-box:hover {
  background: inherit;
  cursor: default;
}

.am-quote-box .am-body-text {
  font-size: clamp(0.9rem, 1.2vw, 1.2rem);
  /*line-height: 1.4;*/
  text-align: left;
}

.am-quote-box .am-body-text p:last-of-type {
  margin-bottom: 0;
}

/* Starting positions based on data-fly-from attribute */
.am-quote-box[data-fly-from="left"] {
  transform: translateX(-100px);
}

.am-quote-box[data-fly-from="right"] {
  transform: translateX(100);
}

.am-quote-box[data-fly-from="bottom"] {
  transform: translateY(80px);
}

/* Landing state — JS adds this class */
.am-quote-box.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Quotes attribution */

/* Attribution — Fraunces thin italic */
.am-attribution {
  font-family: var(--font-display);
  font-weight: var(--weight-thin);
  font-style: italic;
  font-optical-sizing: var(--font-optical-sizing);
  color: var(--color-off-white);
  font-size: clamp(1.1rem, 1.5vw, 3rem);
  text-align: center;
  font-variation-settings: 'opsz' 12, 'WONK' 1, 'SOFT' 20;
}

.am-quotes-attribution {
  opacity: 0;
  transition: opacity 0.6s ease;
  margin-top: 2rem;
}

.am-quotes-attribution.is-visible {
  opacity: 1;
}

/* ============================================================
   FADE-IN UTILITY
   ============================================================ */
@keyframes am-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.am-fade-in {
  opacity: 0;
  animation: am-fadeIn 0.6s ease-out 0.3s forwards;
}


/* ============================================================
   IN PROGRESS MESSAGE
   Shown when a template has no content to display.
   ============================================================ */
.am-in-progress {
  font-family: var(--font-display);
  font-weight: var(--weight-thin);
  font-style: italic;
  color: var(--color-white);
  font-size: clamp(1rem, 2vw, 1.4rem);
  text-align: center;
  opacity: 0.6;
  padding: 4rem var(--content-padding-h);
  font-variation-settings: 'opsz' 72, 'WONK' 0, 'SOFT' 20;
}


/* ============================================================
   SEO FOOTER LINE
   Below footer icons. Full width, centered, unobtrusive.
   ============================================================ */
#am-seo-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: calc(var(--z-footer) + 1);
  text-align: center;
  font-family: var(--font-tagline);
  font-weight: var(--weight-thin);
  font-size: clamp(0.55rem, 0.9vw, 0.7rem);
  color: rgba(255, 255, 255, 0.5);
  padding-top: 1rem;
  padding-bottom: calc(0.5rem + var(--safe-area-bottom));
  pointer-events: none;
  letter-spacing: 0.05em;
}

#am-seo-footer a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  pointer-events: auto;
}

#am-seo-footer a:hover {
  color: rgba(255, 255, 255, 1);
}



/* ============================================================
   RESPONSIVE — 768px and below
   ============================================================ */
@media (max-width: 768px) {

  /* ── BACKGROUND ─────────────────────────────────────── */
  #am-bg {
    background-position: left center;
  }

  /* ── HEADER ─────────────────────────────────────────── */
  #am-header {
    padding: 1rem 5vw;
  }

  #am-header .am-logo {
    width: clamp(200px, 70vw, 300px);
  }

  #am-tagline {
    font-size: clamp(0.6rem, 3vw, 0.78rem);
    max-width: clamp(200px, 70vw, 300px); /* conforms to logo width */
    text-shadow: 0 0 20px var(--glow-purple), 0 0 40px var(--glow-purple);
  }

  /* ── FOOTER ─────────────────────────────────────────── */
  #am-footer {
    gap: 2rem;
    padding-top: 0.75rem;
    padding-bottom: calc(2rem + var(--safe-area-bottom));
  }

  /* Uniform icon sizing — all three consistent */
  .am-footer-icon svg,
  .am-footer-icon img {
    width: 36px;
    height: 36px;
  }

  .am-footer-icon.am-footer-icon--connect img {
    width: 28px;
    height: 28px;
  }

  /* SEO footer — more breathing room, consistent text size */
  #am-seo-footer {
    font-size: 0.6rem;
    padding-bottom: calc(0.4rem + var(--safe-area-bottom));
  }

  #am-seo-footer a {
    font-size: 0.6rem; /* match surrounding text */
  }

  /* ── CONTENT AREA ───────────────────────────────────── */
  #am-content {
    padding: 0 4vw;
    /*top: 90px !important;*/
    mask-image: linear-gradient( to bottom, transparent 0%, black 40px, black calc(100% - 40px), transparent 100% );
    -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 40px, black calc(100% - 40px), transparent 100% );
  }

  .page-template-page-portal #am-content {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .am-content-fixed {
    margin-top: 2rem;
  }

  .am-content-scrollable {
    padding-top: 2rem;
  }

  .am-open-inner {
    padding: 0rem 0 4rem;
  }

  .am-open-content {
    margin-top: 3rem;
  }


  /* ── TYPOGRAPHY ─────────────────────────────────────── */
  .am-heading-display {
    font-size: clamp(1.8rem, 7vw, 4rem);
    margin-bottom: 1rem;
  }

  .am-body-text {
    font-size: clamp(1.1rem, 4vw, 1.15rem);
  }

  .am-subtitle {
    font-size: clamp(0.9rem, 3.5vw, 1rem);
  }

  /* ── CINEMATIC / INTRO ─────────────────────── */
 
  #cinematic-stage {
    margin-top: 2rem;
  }

  #am-intro-shell.am-content-fixed {
    margin-top: 2rem;
  }

  #am-intro-stage {
    width: 100%;
    padding: 0 3vw;
  }

  .am-cinema-controls.is-visible {
    bottom: 0rem !important;
  }

  .is-read-mode .am-cinema-controls.is-visible {
    bottom: auto;
  }

  /* Controls lowered so content doesn't overlap */
  .am-cinema-controls {
    bottom: 0rem;
  }

  .am-cinema-title {
    /*will-change: opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;*/
  }

  .am-aot-header {
    max-width: 80vw;
    margin: 0 auto;
  }
  
  /* ── QUOTES PAGE ────────────────────────────────────── */
  /* Scrollable, stacked full-width boxes */
  #am-quotes-stage {
    overflow-y: scroll;
  }
  
  .am-quotes-wrap {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: auto;
    max-height: 100%;
  }

  .am-quotes-row {
    flex-direction: column;
    align-items: stretch;
  }

  .am-quote-box {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Next arrow falls below quotes naturally */
  .am-quotes-wrap .am-cinema-controls {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin-top: 1.5rem;
  }

  /* ── GRID PAGES (AoT, Cartography — not portal) ─────── */
  .am-aot-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .am-aot-grid .am-grid-item,
  .page-template-page-cartography .am-grid-item,
  .am-aot-card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .am-aot-card-title,
  .am-cartography-title {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    line-height: 1.2;
  }

  .am-grid-item {
    min-height: auto;
  } 
  

  /* ── PORTAL ─────────────────────────────────────────── */
  .am-portal-grid {
    gap: 0.75rem;
    align-items: stretch;
  }

  .am-portal-row {
    gap: 0.75rem;
    align-items: stretch;
  }

  .am-portal-door {
/*    flex: 0 0 calc(50% - 0.375rem);
    max-width: calc(50% - 0.375rem);*/
    flex: 0 0 calc(33.333% - 0.5rem);
    max-width: calc(33.333% - 0.5rem);
    padding: 0.75rem 0.5rem;
    min-height: 100px;
    min-height: 0;
  }

  h2.am-portal-door-title {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }

  .am-accent-text.am-portal-door-excerpt {
    font-family: var(--font-tagline);
    font-size: clamp(0.8rem, 2.6vw, 3rem);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;           /* Adjust this number to change visible lines. */
    -webkit-box-orient: vertical;    /* Required to set the direction. */
    overflow: hidden;                /* Hides text beyond the specified lines. */
  }

  /* Top row */
  .am-portal-row--top .am-portal-door {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
  }

  /* Bottom row */
   .am-portal-row--bottom {
    flex-wrap: wrap;
   }
  .am-portal-row--bottom .am-portal-door {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
  }
  .am-portal-row--bottom .am-portal-door:last-child {
    flex-basis: 100%;
    max-width: none;
  }

}

/* ============================================================
   VERY SMALL SCREENS — 375px and below
   ============================================================ */
@media (max-width: 375px) {

  #am-header .am-logo {
    width: clamp(180px, 80vw, 280px);
  }

  #am-footer {
    gap: 1.4rem;
  }
}