/* ==========================================================================
   SCROLL SYSTEMS & EDITORIAL SECTIONS (css/scherre-scroll.css)
   ==========================================================================
   Scope & Responsibilities:
   - Editorial homepage layout below the hero 3D CRT section.
   - Introduction manifesto block, coordinates lockup, live UTC status.
   - Featured works showcase, work cards, image hover zoom effects.
   - Services directory layout, horizontal accordion track.
   - Parallax curtain footer reveal, studio signature, colophon bar.
   ========================================================================== */

/* ==========================================================================
   FUTURE THREE® Editorial Scrollable Layout & Design System
   Modeled after Future Three Studio (futurethree.studio)
   ========================================================================== */



/* Editorial Container Wrapper */
.f3-editorial-wrapper {
  position: relative;
  width: 100%;
  background-color: var(--f3-bg);
  color: var(--f3-text);
  font-family: var(--font-sans);
  z-index: 10;
  overflow-x: hidden;
}

.f3-container {
  width: 100%;
  max-width: var(--f3-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--f3-gutter-x);
  padding-right: var(--f3-gutter-x);
}

/* ==========================================================================
   1. STUDIO INTRO & CONTINUOUS EDITORIAL PORTFOLIO GRID
   ========================================================================== */
.f3-section-intro {
  padding-top: var(--manifesto-top-margin, 60px);
  padding-bottom: var(--section-intro-padding-bottom, 0px);
  border-bottom: none;
}

/* Top Split: Manifesto Statement on Left */

.f3-intro-right-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.f3-intro-statement {
  font-family: var(--manifesto-font-family, var(--font-retina, 'AT Aero Retina', var(--font-sans)));
  font-size: var(--manifesto-font-size, 43px);
  font-weight: var(--manifesto-font-weight, 400);
  line-height: var(--manifesto-line-height, 1.1);
  letter-spacing: var(--manifesto-letter-spacing, -1.8px);
  color: var(--f3-text);
  margin: var(--manifesto-statement-margin-top, 0px) 0 var(--manifesto-btn-gap, 20px) 0;
  max-width: 100%;
  width: 100%;
  text-align: left;
}

.f3-statement-btn,
.f3-intro-right-col .f3-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rect-btn-gap, 11px);
  background-color: #161616;
  border: none;
  color: #faf9fc;
  font-family: var(--type-mono-light-font, 'Supply-Light', 'PP Supply Mono', monospace);
  font-size: var(--type-mono-a-size, 11px);
  font-weight: var(--type-mono-light-weight, 300);
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  text-transform: uppercase;
  padding: 0 var(--rect-btn-padx, 8px);
  height: var(--rect-btn-height, 22px);
  min-width: var(--rect-btn-min-width, auto);
  box-sizing: border-box;
  border-radius: 0;
  line-height: 1;
  text-decoration: none;
  margin-bottom: var(--manifesto-btn-margin-bottom, 0px);
}

.f3-statement-btn:hover,
.f3-intro-right-col .f3-pill-btn:hover {
  background-color: #161616;
  color: #faf9fc;
  transform: none;
}

.f3-statement-btn .btn-arrow,
.f3-intro-right-col .f3-pill-btn .btn-arrow {
  font-size: var(--type-mono-a-size, 11px);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.f3-statement-btn:hover .btn-arrow,
.f3-intro-right-col .f3-pill-btn:hover .btn-arrow {
  transform: none;
}

/* ==========================================================================
   EDITORIAL INTRO LOCKUP (Coordinates + Ongoing Projects & Manifesto Statement)
   ========================================================================== */
.f3-intro-lockup {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: var(--manifesto-lockup-margin-top, 0px);
  margin-bottom: var(--manifesto-gap, 120px);
  width: 100%;
  gap: var(--f3-works-grid-gap, 25px);
}

/* Left Column: About Link */
.f3-intro-left-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--manifesto-coord-gap, 7px);
  padding-top: var(--manifesto-coord-margin-top, 2px);
}

/* Left Column: Online Status Indicator */
.f3-intro-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  user-select: none;
  line-height: 1;
}

.f3-intro-status-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  background-color: #faf9fc;
  border-radius: 0;
  box-shadow: none;
  flex-shrink: 0;
  transform: translateY(-0.75px);
}

.f3-intro-status-text {
  font-family: var(--type-mono-a-font, var(--font-mono, 'PP Supply Mono', monospace));
  font-size: var(--type-mono-a-size, 11px);
  font-weight: var(--type-mono-a-weight, 400);
  line-height: 1;
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  color: var(--f3-text, #faf9fc);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  text-transform: uppercase;
}

.f3-mono-shuffle-letter {
  display: inline-block;
  cursor: default;
  user-select: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  pointer-events: auto;
}

a .f3-mono-shuffle-letter,
.f3-colophon-privacy-link .f3-mono-shuffle-letter {
  cursor: pointer;
}

.f3-mono-shuffle-space,
.f3-mono-shuffle-static {
  display: inline-block;
  white-space: pre;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  pointer-events: none;
  user-select: none;
}

/* ==========================================================================
   2-COLUMN INTRO SEPARATION LINES
   ========================================================================== */
.f3-intro-divider-row {
  display: flex;
  width: 100%;
  gap: var(--f3-works-grid-gap, 25px);
  margin-top: var(--intro-divider-margin-top, 0px);
  margin-bottom: var(--intro-divider-margin-bottom, 24px);
}

.f3-intro-divider-col-left,
.f3-intro-divider-col-right {
  flex: 1;
  min-width: 0;
  height: 0;
  border-top: var(--intro-divider-thickness, 1px) solid var(--intro-divider-color, #282828);
  position: relative;
}

.f3-intro-divider-col-left::before,
.f3-intro-divider-col-left::after,
.f3-intro-divider-col-right::before,
.f3-intro-divider-col-right::after {
  content: '';
  position: absolute;
  width: var(--f3-divider-square-size, 2px);
  height: var(--f3-divider-square-size, 2px);
  background-color: var(--f3-divider-square-color, #e5e5e6);
  top: -1px;
  pointer-events: none;
  z-index: 2;
}

.f3-intro-divider-col-left::before,
.f3-intro-divider-col-right::before {
  left: 0;
}

.f3-intro-divider-col-left::after,
.f3-intro-divider-col-right::after {
  right: 0;
}

/* Section Header Row: 2-Column layout synchronized with Manifesto and Works Grid */
.f3-featured-tag-row {
  width: 100%;
  display: flex;
  gap: var(--f3-works-grid-gap, 25px);
  align-items: center;
  margin-top: var(--featured-tag-margin-top, 0px);
  margin-bottom: var(--intro-divider-margin-bottom, 24px);
}

.f3-featured-col-left {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.f3-featured-col-right {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.f3-featured-tag {
  font-family: var(--featured-tag-font-family, var(--font-primary, 'AT Aero', sans-serif));
  font-size: var(--featured-tag-font-size, 25px);
  font-weight: var(--featured-tag-font-weight, 400);
  color: var(--featured-tag-color, #faf9fc);
  letter-spacing: var(--featured-tag-letter-spacing, -1.2px);
  line-height: var(--featured-tag-line-height, 27.5px);
}

/* Grid View Toggle Button (Unclickable / In development) */

.f3-featured-more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rect-btn-gap, 11px);
  background-color: #161616;
  border: none;
  color: #faf9fc;
  font-family: var(--type-mono-light-font, 'Supply-Light', 'PP Supply Mono', monospace);
  font-size: var(--type-mono-a-size, 11px);
  font-weight: var(--type-mono-light-weight, 300);
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  text-transform: uppercase;
  padding: 0 var(--rect-btn-padx, 8px);
  height: var(--rect-btn-height, 22px);
  min-width: var(--rect-btn-min-width, auto);
  box-sizing: border-box;
  border-radius: 0;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  width: fit-content;
  transition: background-color var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease);
  cursor: pointer;
}

.f3-featured-more-link:hover {
  background-color: #161616;
  color: #faf9fc;
  opacity: 1;
}

.f3-featured-more-link .btn-arrow,
.f3-featured-more-link .f3-title-arrow {
  font-size: var(--type-mono-a-size, 11px);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}