@charset "UTF-8";
/* CSS Document */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Roboto', sans-serif;
	background:rgba(26,26,26,1.00);
	color: white;
	display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  margin: 0;
	scroll-behavior: smooth;
	
	
}

main {display: flex;
flex-direction: column;
flex:1 ;}

h2 {  font-weight: 250;}

/* borders 
header,
main,
footer,
.hero,
.box,
.a1,
.a2-3,
.a2,
.a3,
.b1-2,
.b1,
.b2,
.b3,
.a1-bottom,
.top-story-title,
.a1-middle,
.a1-top{ border: 1px solid red;
 
}

*/


/* Nav bar container */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 16.67vh; /* One-sixth of viewport height */
  background: linear-gradient(to bottom,  
      
    black,  
    rgba(25, 25, 25, 1),
    rgba(37, 37, 37, 0.95)
  );
  padding-top: 6px; /* 6px gap from the top of the viewport */
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  z-index: 1000;
  overflow: visible;
}
/* Nav boxes: start scaled down and grow when the class 'visible' is added */
.nav-box {
  transform: scale(0);
  transition: transform 0.2s ease;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.nav-box.visible {
  transform: scale(1);
}
/* Nav letter images styling */
.nav-letter {
  display: block;
  max-height: calc(22vh - 6px); /* Keeps proportions; adjust as needed */
  animation-iteration-count: infinite;
}
/* Floating animations applied to nav letters */
.nav-letter.float1 {
  animation: float1 20s infinite ease-in-out alternate;
}
.nav-letter.float2 {
  animation: float2 22s infinite ease-in-out alternate;
}
.nav-letter.float3 {
  animation: float3 30s infinite ease-in-out alternate;
}
.nav-letter.float4 {
  animation: float4 35s infinite ease-in-out alternate;
}



/* Hero spans the full viewport width */
.hero {
  display: flex;
  flex-direction: column;
  width: 100vw;
  padding-top: 16.67vh; /* Same height as the navbar */
  background: linear-gradient(30deg, #000000, #556270);
	min-height: auto;        /* roughly 100vh minus navbar */
}

/* Mobile view heights */
/* Box a */

/* HERO CORNER BRACKET */
.a1-box {
  position: relative;
}
.a1-top::before {
  content: "⌜"; /* Top-left corner bracket */
  font-size: 4rem; /* Adjust size as needed */
  position: absolute;
  top: -20px ;
  left: 40px; /* Adjust position of the bracket */
  color: rgb(220, 220, 220);
	opacity: 20%;
}
.a1-bottom::after {
  content: "⌟"; /* Bottom-right corner bracket */
  font-size: 4rem;
  position: absolute;
  right: 30px;
  color: rgb(220, 220, 220);
	opacity: 20%;
}
/* Box b */

/* Top Stories */

/* Ensures a1-boxes stack vertically and never exceed 1/3 of viewport height */
.a1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 33vh; /* Ensures the entire a1 box is 1/3 of viewport height */
}
/* Wrapper to ensure text is centered and flexible */
.a1 .content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Evenly space out the boxes */
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 2vh;
}
/* Ensures all boxes inside a1 take equal height */
.a1-box {
  flex: 1; /* Distributes equal height to each box */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 0 5%;
}
/* Ensure h2 text is aligned to the top */
.a1-middle {
  align-items: flex-start; /* Align content to the top */
  justify-content: flex-start; /* Keep text at the top */
}
/* Add this to ensure h2 stays at the top */
.a1-middle .text-container {
  align-self: flex-start; /* Aligns the text container to the top */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Pushes text to the top */
  width: 100%;
}
/* Ensure p text is aligned to the top */
.a1-bottom {
  align-items: flex-start; /* Align content to the top */
  justify-content: flex-start; /* Keep text at the top */
}
/* Add this to ensure p stays at the top */
.a1-bottom .text-container {
  align-self: flex-start; /* Aligns the text container to the top */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Pushes text to the top */
  width: 100%;
}
/* Ensures text wraps and scales correctly */
.a1-box h1,
.a1-box h2,
.a1-box p {
	justify-content: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: rgb(220, 220, 220);
  letter-spacing: 1px;
  line-height: 1.2;
  margin: 0;
  width: 100%;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: left; /* Align text to the left */
  padding: 2px 10%;
}
/* Adjust sizes to maintain hierarchy while reducing h1 and h2 */
.a1-top h1 {
  font-size: clamp(4rem, 5vw, 5rem); /* Slightly smaller */
  text-transform: uppercase;
	 letter-spacing: 2px;
  line-height: 1.1;
	color: white;
	max-height: 18vh;
}
.a1-middle h2 {
  font-size: clamp(1.8rem, 1.6vw, 4rem); /* Slightly smaller */
  text-transform: none;
		color: whitesmoke;
	 letter-spacing: 2px;
	
	
}
.a1-bottom p {
  font-size: clamp(1.2rem, 1.2vw, 3rem); /* Same as before */
  text-transform: none;
	color:  rgba(200, 200, 200, 1);
}
/* Prevent text from overflowing by adjusting max-height */
.a1-box h1,
.a1-box h2,
.a1-box p {
  max-height: 100%;
  line-height: 1.3;
  overflow: hidden;
  box-sizing: border-box;
}
/* Ensure images shrink to the width of their cells while maintaining aspect ratio */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Apply floating animation to images */
/* Apply different animations to each image */
.a2 img {
  animation: float1 20s infinite ease-in-out alternate;
}
.a3 img {
  animation: float2 22s infinite ease-in-out alternate;
}
.b1 img {
  animation: float3 30s infinite ease-in-out alternate;
}
.b2 img {
  animation: float4 35s infinite ease-in-out alternate;
}
.hero-letter {
  transition: transform 0.3s ease, filter 0.3s ease;
}
.hero-letter:hover {
  transform: scale(1.1);
  filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8)); /* Glow around the image itself */
}
/* Different floating animations with rotation */
@keyframes float1 {
  0% {
    transform: translate(0px, 0px) rotate(0deg) scale(1);
  }
  20% {
    transform: translate(4px, -6px) rotate(2deg) scale(1.02);
  }
  40% {
    transform: translate(-3px, 5px) rotate(-3deg) scale(0.99);
  }
  60% {
    transform: translate(2px, -3px) rotate(1deg) scale(1.01);
  }
  80% {
    transform: translate(-5px, 2px) rotate(-2deg) scale(1);
  }
  100% {
    transform: translate(3px, -4px) rotate(5deg) scale(1.03);
  }
}
@keyframes float2 {
  0% {
    transform: translate(0px, 0px) rotate(0deg) scale(1);
  }
  20% {
    transform: translate(-5px, 3px) rotate(-1deg) scale(1.01);
  }
  30% {
    transform: translate(6px, -4px) rotate(2.5deg) scale(1.07);
  }
  70% {
    transform: translate(-2px, 5px) rotate(-3.2deg) scale(1.2);
  }
  80% {
    transform: translate(3px, -6px) rotate(1.8deg) scale(1.2);
  }
  100% {
    transform: translate(-4px, 2px) rotate(-2.2deg) scale(1.03);
  }
}
@keyframes float3 {
  0% {
    transform: translate(0px, 0px) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(3px, -4px) rotate(-2.5deg) scale(1.02);
  }
  50% {
    transform: translate(-2px, 6px) rotate(2.8deg) scale(1);
  }
  75% {
    transform: translate(5px, -2px) rotate(-3deg) scale(0.98);
  }
  100% {
    transform: translate(-3px, 4px) rotate(1.5deg) scale(1.01);
  }
}
@keyframes float4 {
  0% {
    transform: translate(0px, 0px) rotate(0deg) scale(1);
  }
  15% {
    transform: translate(-3px, 5px) rotate(2deg) scale(1.02);
  }
  20% {
    transform: translate(6px, -3px) rotate(-1.5deg) scale(1);
  }
  35% {
    transform: translate(-4px, 2px) rotate(3deg) scale(0.99);
  }
  50% {
    transform: translate(3px, -6px) rotate(-2.3deg) scale(1.01);
  }
  55% {
    transform: translate(-2px, 4px) rotate(2.8deg) scale(1);
  }
  65% {
    transform: translate(5px, -3px) rotate(-1.7deg) scale(0.88);
  }
	75% {
    transform: translate(0px, 0px) rotate(0deg) scale(1);
  }
  80% {
    transform: translate(3px, -4px) rotate(-4.5deg) scale(0.93);
  }
  90% {
    transform: translate(-2px, 6px) rotate(2.8deg) scale(0.91);
  }
  95% {
    transform: translate(5px, -2px) rotate(-3deg) scale(0.98);
  }
  100% {
    transform: translate(-3px, 4px) rotate(1.5deg) scale(1.01);
  }
}

/* Boxes a and b stack vertically by default */
.box {
  width: 100%;
  display: flex;
  flex-direction: column;
}


/* ─── b3 container ───────────────────────────────────────────────────────────── */
.b3 {
  position: relative;
  width: 100%;
  height: auto;      /* desktop height, will be overridden on mobile */
  overflow: visible; /* allow cards to rise above */
}

/* ─── MOBILE VIEW (default) ────────────────────────────────────────────────── */
/* top-stories fills its container, stacks vertically, height auto */
.top-stories {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

/* each pocket fills width of top-stories, stacks its children vertically */
.top-story-pocket {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  overflow: visible;
	text-decoration: none;
}

/* card stacks its contents, fills pocket width, auto height */
.top-story-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
	 background: linear-gradient(145deg,  rgba(25, 25, 25, 1),
    rgba(37, 37, 37, 0.95)); /* muted grey gradient */
	
  color: lightgray;                            
  border-radius: 1rem;
  padding: 1rem;
	
}

/* hide the cover bar completely */
.cover-bar {
  display: none;
}

.top-story-title {
	
	min-height: 6vh;
display: flex;
  align-items: center;
  justify-content: center; /* optional */
  text-align: center;      /* optional */
	margin: 5px;
}

.top-story-pocket > a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.top-story-card * {
  text-decoration: none !important;
}


.top-story-description {
  font-size: clamp(1rem, 1.2vw, 3rem); /* Same as before */
  text-transform: none;
	color:  rgba(200, 200, 200, 1);
	margin: 10px;
	min-height: 8vh;
}









/* Inside a2-3 and b1-2, stack children vertically by default */
.a2-3,
.b1-2 {
  display: flex;
  flex-direction: column;
}
/* Set image containers to centre align in mobile view */
.a2,
.a3,
.b1,
.b2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}


/* Fade-In Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}












/* Stories Section*/

.stories-section {
	position: relative;
 
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
	z-index: 1;
}

.stories-toggle-btn {
  width: 100%;
  padding: 0.5em 0;
  background: #333;
  color: #fff; /* Make text white */
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif; /* Apply Roboto font */
  letter-spacing: 0.1em; /* Add spacing between letters */
  text-transform: uppercase; /* Optional: makes it look stronger */
}


.stories-window {
  height: 30vh;
  overflow-y: hidden;
  transition: height 0.3s ease;
}

.stories-window.unlock {
  height: 50vh;
  overflow-y: auto;
}

.stories-content {
  min-height: 60vh; /* ensures content is at least 60vh tall */
}

/* Custom scrollbar styling for WebKit browsers (Chrome, Edge, Safari) */
.stories-window::-webkit-scrollbar {
  width: 10px;
}

.stories-window::-webkit-scrollbar-track {
  background: transparent;
}

.stories-window::-webkit-scrollbar-thumb {
  background-color: whitesmoke;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* For Firefox */
.stories-window {
  scrollbar-width: thin;
  scrollbar-color: whitesmoke transparent;
}


.storyboxL {

	padding: 10px 10px 10px 10vw;
}

.storyboxR {
  display: flex;
  justify-content: flex-end;
	padding: 10px 10vw 10px 10px;
}








/* Base section styling */
.unset-scroll-story {
  display: flex;
  flex-direction: column;
  width: 100vw;
  background-color: #000;
  overflow-x: hidden;
}

/* Generic story beat styling */
.story-beat {
  position: relative;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.5s ease, transform 1.5s ease;
	  will-change: opacity, transform;
}

.story-beat.visible {
  opacity: 1;
  transform: translateY(0);
}

.story-image {
  width: 100vw;
  height: auto;
  display: block;
}

/* Beat 1: Fullscreen, centered image, bottom-right text */
.beat-1 {
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}

.beat-1 img {
  max-height: 80vh;
  object-fit: contain;
}

.beat-1-text {
  position: absolute;
  bottom: 15%;
  right: 10%;
  color: #d6faff;
  font-size: 2.5rem;
  text-align: right;
}

/* Beat 2: variable height, left slide-in */
.beat-2 {
  position: relative;
  width: 100vw;
	height: 100vh;
  overflow: hidden;
}

.beat-2-content {
	 will-change: transform, opacity;
  transform: translateX(-30vw);
  opacity: 0;
  transition: transform 1.5s ease-out, opacity 1.5s ease-out;
  position: relative;
}

.beat-2.visible .beat-2-content {
  transform: translateX(0);
  opacity: 1;
}

.beat-2 img {
  width: 110vw;
  height: auto;
  display: block;
	top: 20%;
}

.beat-2-text {
  position: absolute;
  top: 85%;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 2.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.beat-2.visible .beat-2-text {
  opacity: 1;
  transform: translateY(0);
}

/* Beat 3: image section with orange overlay text */
.beat-3 {
  position: relative;
  width: 100vw;
  height: 80vh;
}

.beat-3 img {
 max-height: 100%;
  height: 100%;
  width: auto;
  object-fit: cover; /* or cover, depending on cropping preference */
  overflow-x: visible;
}

.beat-3-text {
  position: absolute;
  top: 90%;
  left: 10%;
  right: 10%;
  text-align: center;
  color: #FFA500;
  font-size: 2.2rem;
}

/* Beat 4: text on bottom, pink */
.beat-4 {
  position: relative;
  height: 90vh;
}

.beat-4 img {
  
  max-height: 100%;
  height: 100%;
  width: auto;
  object-fit: cover; /* or cover, depending on cropping preference */
  overflow-x: visible;
}

.beat-4-text {
  position: absolute;
  bottom: 5%;
  width: 100%;
  text-align: center;
  color: hotpink;
  font-size: 2.5rem;
}







.animateloop{
	transition: transform 0.3s ease, filter 0.3s ease;
animation-iteration-count: infinite;
}

.footer {
  display: flex;
  flex-direction: row; /* Fix this: "flex-: column;" is incorrect */
  min-height: 7vh;
  background: rgba(0, 0, 0, 0.5); /* 50% opacity */
	padding: 20px;
	color: darkgray;
}
.socialmedias{
	flex-grow: 1;
	 display: flex;
	flex-direction: row;
  justify-content: flex-end;
	gap: 15px;
}

.socialmedia{
  width: clamp(30px, 5vw, 60px);
  height: auto;  /* Maintains aspect ratio */
}

.socialmediabox {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-us {
  display: flex;
  flex-direction: column;
  width: 100vw;
	height: 90vh;
	align-items: center;
  justify-content: center;
	 background: linear-gradient(30deg, #000000, #556270);
		padding:20vh 0px 0vh 0px;
}

.description {
	  display: flex;
  flex-direction: column;
  max-width: 900px;
	align-items: center;
  justify-content: center;
	padding: 0vh 0px 20vh 0px;
}

/* Article Container */


.article-section {
  max-width: 1400px;
  margin: 4rem auto;  /* Adjusted from 7rem */
  padding: 20px; /* Slightly reduced padding */
  background: rgba(27, 27, 27, 0.95);
  border-radius: 10px;
  border: 1px solid rgba(70, 70, 70, 0.7);
  color: #DCDCDC;
  line-height: 1.6;
}

/* Article Header */
.article-header {
  margin-bottom: 1.5rem;
}

.article-title {
  font-family: 'Roboto', sans-serif;
  font-size: 2.5rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.5rem;
}

.article-byline {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  color: rgb(180, 180, 180);
  margin-bottom: 1rem;
}

.key-points {
  padding: 15px;
  margin: 20px 0;
	line-height: 1; /* Reduces overall line spacing */
}

.key-point {
  font-size: 18px;
  font-weight: 500;
  padding: 8px 0;
  position: relative;
  padding-left: 25px;
	
}

.key-point::before {
  content: "•";  /* Bullet point */
  font-size: 20px;
  color: #333;
  position: absolute;
  left: 0;
  top: 2px;
}

/* Article Content */
.article-content {
  font-family: 'Roboto', sans-serif;
  font-size: 1.125rem;
  color: rgb(195, 191, 189);
}

.article-content > .article-paragraph:first-of-type::first-letter {
  font-size: 2.5em;
  font-weight: 200;
  float: left;
  margin-right: 5px;
  line-height: 1;
	letter-spacing: 2px;
}

/* Paragraphs within the article */
.article-paragraph {
  margin-bottom: 1.5rem;
}

/* Examples and special text */
.article-example {
  margin-bottom: 1.5rem;
  font-size: 1rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px;
  border-radius: 5px;
}

/* Subtitles for sections */
.article-subtitle {
  font-size: 1.5rem;
  font-weight: 300;
  margin: 2rem 0 1rem 0;
  color: #DCDCDC;
  text-transform: uppercase;
  letter-spacing: 1px;

	
	
	
	}

/* Section Titles within the article */
.article-section-title {
  font-size: 2rem;
  font-weight: 300;
  margin: 1.5rem 0 0.75rem 0;
  color: rgb(220, 220, 220);
}

/* Tablet view: 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
	
	.hero{
	min-height: calc(33vh + 50vw + 50vw + 33vh);
	}
  /* Arrange a2-3 and b1-2 children side by side */
  .a2-3,
  .b1-2 {
    flex-direction: row;
  }
	
  /* Each child takes half the parent's width */
  .a2,
  .a3,
  .b1,
  .b2 {
    width: 50%;
  }
	
  
  /* Override image alignment on tablet view */
  .a2 {
    justify-content: center; /* horizontal centre */
    align-items: flex-start;  /* top */
  }
  .a3 {
    justify-content: flex-end; /* right */
    align-items: center;       /* vertical centre */
  }
  .b1 {
    justify-content: center;
    align-items: center;
  }
  .b2 {
    justify-content: flex-end; /* right */
    align-items: flex-start;   /* top */
  }
/* ─── DESKTOP: Top Stories Pocket/Card Styling ───────────────────────────────── */
.b3 {
  /* make sure b3 stays at 33vh and allows overflow */
  position: relative;
  width: 100%;
  height: 37vh;
  overflow: visible;
}

.top-stories {
  /* fill b3, line up pockets in a row and align their bottoms */
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 39vh;
  align-items: flex-end;      /* align pockets to b3’s bottom */
  gap: 1rem;                  /* optional spacing between pockets */
  padding: 0 1rem;            /* optional horizontal padding */
}
	
	
.top-story-card {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 2rem);
  min-height: 37vh;
  margin: 0 1rem;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg,  rgba(25, 25, 25, 1),
    rgba(37, 37, 37, 0.95)); /* muted grey gradient */
	
  color: lightgray;                            
  border-radius: 1rem;
  padding: 1rem;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.25);       /* depth without being garish */
  z-index: 200;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.top-story-card:hover {
  transform: translateY(-10vh);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.3);
}



	

.top-story-pocket {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(145deg, #2f2f2f, #3a3a3a);
  border-radius: 1rem;
  box-shadow:
    inset 0 0 5px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3);
  overflow: visible;
}

	.top-story-pocket::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url('https://www.transparenttextures.com/patterns/subtle-carbon.png');
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
  border-radius: 1rem;
}

.top-story-pocket .cover-bar {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7vh;
  background: linear-gradient(to top, #2a2a2a 0%, #3b3b3b 100%);
  border-radius: 1rem 1rem 0 0;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.05),
    0 -1px 4px rgba(0, 0, 0, 0.4);
  z-index: 300;
}
	.stories-section {z-index: 400;}
	
}
 

/* Desktop view: 1024px and above */
@media (min-width: 1024px) {
  /* Display boxes a and b side by side */
  .hero {
    flex-direction: row;
	  min-height: 85vh;
  }
	
	.a,
.b{
		background: none;
}
	
	.a1,
	.a2-3,
	.b1-2 {
		background: none;
		
	}
  .box {
    width: 50%;
  }
  /* Display a2-3 and b1-2 children side by side */
  .a2-3,
  .b1-2 {
    flex-direction: row;
    height: 60vh;  /* two-thirds of the viewport height */
  }
  /* Each child takes half the parent's width */
  .a2,
  .a3,
  .b1,
  .b2 {
    width: 50%;
  }
  
  /* Override image alignment on desktop view */
  .a2 {
    justify-content: center; /* horizontal centre */
    align-items: flex-start;  /* top */
	  padding-top: 30px
  }
  .a3 {
    justify-content: flex-end; /* right */
    align-items: center;       /* vertical centre */
  }
  .b1 {
    justify-content: center;
    align-items: center;
  }
  .b2 {
    justify-content: flex-end; /* right */
    align-items: flex-start;   /* top */
  }
/* ─── DESKTOP: Top Stories Pocket/Card Styling ───────────────────────────────── */
.b3 {
  /* make sure b3 stays at 33vh and allows overflow */
  position: relative;
  width: 100%;
  height: 33vh;
  overflow: visible;
}

.top-stories {
  /* fill b3, line up pockets in a row and align their bottoms */
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 33vh;
  align-items: flex-end;      /* align pockets to b3’s bottom */
  gap: 1rem;                  /* optional spacing between pockets */
  padding: 0 1rem;            /* optional horizontal padding */
}
	
	
.top-story-card {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 2rem);
  min-height: 35vh;
  margin: 0 1rem;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg,  rgba(25, 25, 25, 1),
    rgba(37, 37, 37, 0.95)); /* muted grey gradient */
	
  color: lightgray;                            
  border-radius: 1rem;
  padding: 1rem;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.25);       /* depth without being garish */
  z-index: 200;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.top-story-card:hover {
  transform: translateY(-10vh);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.3);
}


	

.top-story-pocket {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(145deg, #2f2f2f, #3a3a3a);
  border-radius: 1rem;
  box-shadow:
    inset 0 0 5px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3);
  overflow: visible;
}

	.top-story-pocket::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url('https://www.transparenttextures.com/patterns/subtle-carbon.png');
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
  border-radius: 1rem;
}

.top-story-pocket .cover-bar {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7vh;
  background: linear-gradient(to top,  black 0%, #3b3b3b 100%);
  border-radius: 1rem 1rem 0 0;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.05),
    0 -1px 4px rgba(0, 0, 0, 0.4);
  z-index: 300;
}




}

/* ── Base Container ───────────────────────────────────────────────────────────── */
body {
  font-family: 'Roboto', sans-serif;
  background-color: #1b1b1b;
  color: #dcdcdc;
  margin: 0;
  padding: 0;
}

.page-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

/* ── Header ───────────────────────────────────────────────────────────────────── */
.longform-header {
  text-align: center;
  margin-bottom: 2rem;
}

.longform-title {
  font-size: 2.5rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.5rem;
}

.longform-byline {
  font-size: 1rem;
  color: #b4b4b4;
  margin-bottom: 1rem;
}

/* ── Main Article Box ─────────────────────────────────────────────────────────── */
.article-box {
  background: rgba(26, 26, 26, 1);
  border: 1px solid rgba(70, 70, 70, 0.7);
  border-radius: 10px;
  padding: 2rem;
  margin-bottom: 3rem;
}

/* ── Content ──────────────────────────────────────────────────────────────────── */
.longform-content {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #c3bfbd;
}

.longform-content h2 {
  font-size: 2rem;
  font-weight: 300;
  color: #dcdcdc;
  margin: 2rem 0 1rem;
  letter-spacing: 1px;
}

.longform-content h3 {
  font-size: 1.5rem;
  font-weight: 300;
  color: #dcdcdc;
  margin: 1.5rem 0 0.75rem;
  letter-spacing: 1px;
}

.longform-paragraph {
  margin-bottom: 1.5rem;
}

.longform-paragraph:first-of-type::first-letter {
  font-size: 2.5em;
  font-weight: 200;
  float: left;
  margin-right: 5px;
  line-height: 1;
  letter-spacing: 2px;
}

/* ── Lists ────────────────────────────────────────────────────────────────────── */
.longform-list {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
}

.longform-list li {
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

/* ── Image Section ────────────────────────────────────────────────────────────── */
.longform-image {
  margin: 2rem 0;
  text-align: center;
}

.longform-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.longform-image figcaption {
  font-size: 0.9rem;
  color: #c8c8c8;
  margin-top: 0.5rem;
}

/* ── Examples and Notes ───────────────────────────────────────────────────────── */
.longform-example {
  background: rgba(0, 0, 0, 0.3);
  padding: 1rem;
  border-radius: 5px;
  font-size: 1rem;
  margin: 1.5rem 0;
}

/* ── Utility ─────────────────────────────────────────────────────────────────── */
.text-center {
  text-align: center;
}

/* ── Toolkit Box ──────────────────────────────────────────────────────────────── */
.toolkit-box {
  background: rgba(34, 34, 34, 1);
  border: 1px solid rgba(80, 80, 80, 0.7);
  border-radius: 10px;
  padding: 2rem;
  margin-bottom: 2rem;
  color: #d0d0d0;
}

.toolkit-box h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  font-weight: 400;
}

.toolkit-box ul {
  list-style: disc;
  padding-left: 1.5rem;
}

.toolkit-box li {
  margin-bottom: 0.75rem;
  line-height: 1.5;
}


/* ── Instruction Page Base ───────────────────────────────────────────────────── */

/* ── Instruction Container ──────────────────────────────────────────────────── */
.instruction {
  margin-bottom: 4rem;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.instruction-header {
  text-align: center;
  margin-bottom: 2rem;
}

.instruction-title {
  font-size: 2.5rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.5rem;
}

.instruction-byline {
  font-size: 1rem;
  color: #b4b4b4;
  margin-bottom: 1rem;
}

.instruction-image {
  margin: 2rem 0;
  text-align: center;
}

.instruction-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.instruction-image figcaption {
  font-size: 0.9rem;
  color: #c8c8c8;
  margin-top: 0.5rem;
}

/* ── Key Points ─────────────────────────────────────────────────────────────── */
.instruction-key-points {
  background: rgba(26, 26, 26, 1);
  border: 1px solid rgba(70, 70, 70, 0.7);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.instruction-key-point {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.instruction-key-point::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: #dcdcdc;
}

/* ── Content Area ───────────────────────────────────────────────────────────── */
.instruction-content {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #c3bfbd;
}

/* ── Sections as Boxes ──────────────────────────────────────────────────────── */
.instruction-section {
  background: rgba(27, 27, 27, 0.95);
  border: 1px solid rgba(70, 70, 70, 0.7);
  border-radius: 10px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.instruction-section-title {
  font-size: 2rem;
  font-weight: 300;
  color: #dcdcdc;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

/* ── Paragraphs ────────────────────────────────────────────────────────────── */
.instruction-paragraph {
  margin-bottom: 1.5rem;
}

/* First-letter drop cap */
.instruction-section .instruction-paragraph:first-of-type::first-letter {
  font-size: 2.5em;
  font-weight: 200;
  float: left;
  margin-right: 5px;
  line-height: 1;
  letter-spacing: 2px;
}

/* ── Examples ───────────────────────────────────────────────────────────────── */
.instruction-example {
  background: rgba(0, 0, 0, 0.3);
  padding: 1rem;
  border-radius: 5px;
  margin-top: 1rem;
  font-size: 1rem;
}

/* ── Summary ────────────────────────────────────────────────────────────────── */
.instruction-summary {
  background: rgba(34, 34, 34, 1);
  border: 1px solid rgba(80, 80, 80, 0.7);
  border-radius: 10px;
  padding: 2rem;
  margin-top: 2rem;
}

.instruction-subtitle {
  font-size: 1.5rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

/* ── Utility ─────────────────────────────────────────────────────────────────── */
.text-center {
  text-align: center;
}






/* ── Angle Page Base ───────────────────────────────────────────────────── */
.angle {
  margin-bottom: 4rem;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.angle-header {
  text-align: center;
  margin-bottom: 2rem;
}

.angle-title {
  font-size: 2.5rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.5rem;
}

.angle-byline {
  font-size: 1rem;
  color: #b4b4b4;
  margin-bottom: 1rem;
}

.angle-image {
  margin: 2rem 0;
  text-align: center;
}

.angle-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Caption and credit on same line, credit styled like caption text */
.angle-image figcaption {
  font-size: 0.9rem;
  color: #c8c8c8;
  margin-top: 0.5rem;
  display: inline; /* Ensures figcaption stays in flow */
  line-height: 1.4;
}

.angle-image figcaption a {
  color: #c8c8c8;         /* Same colour as caption */
  text-decoration: none;  /* No underline */
  margin-left: 0.5rem;    /* Small space before credit */
  font-weight: 400;
}

.angle-image .image-credit {
  color: #c8c8c8;
  text-decoration: none;
  margin-left: 0.3rem;
  white-space: normal; /* Allow wrapping */
}

/* ── Content Area ───────────────────────────────────────────────────────── */
.angle-content {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #c3bfbd;
}

/* ── Sections ───────────────────────────────────────────────────────────── */
.angle-section {
  background: rgba(27, 27, 27, 0.95);
  border: 1px solid rgba(70, 70, 70, 0.7);
  border-radius: 10px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.angle-section-title {
  font-size: 2rem;
  font-weight: 300;
  color: #dcdcdc;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

/* ── Paragraphs ─────────────────────────────────────────────────────────── */
.angle-paragraph {
  margin-bottom: 1.5rem;
}

/* Remove first-letter drop cap */
.angle-section .angle-paragraph:first-of-type::first-letter {
  font-size: initial;
  font-weight: normal;
  float: none;
  margin-right: 0;
  line-height: normal;
  letter-spacing: normal;
}

/* ── Utility ────────────────────────────────────────────────────────────── */
.text-center {
  text-align: center;
}

.angle-image:first-of-type {
  margin-top: 9vh; /* Adjust the value as needed */
}











/* ── Card Container ───────────────────────────────────────────────────────── */
.stories-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

/* ── Individual Card ───────────────────────────────────────────────────────── */
.stories-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;          /* make image match card height */
  max-width: 600px;
  width: 100%;
  background: #333;              /* solid dark grey */
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* Alternate image position */
.stories-card:nth-child(even) {
  flex-direction: row-reverse;
}

/* ── Image ─────────────────────────────────────────────────────────────────── */
.card-image {
  flex: 0 0 33.33%;              /* one third of card width */
  position: relative;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* fill container, clipped as needed */
  display: block;
}

/* ── Text ──────────────────────────────────────────────────────────────────── */
.card-text {
  flex: 1 1 66.67%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-text h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.card-text p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .stories-card {
    flex-direction: column;
  }
  .stories-card:nth-child(even) {
    flex-direction: column;
  }
  .card-image {
    width: 100%;
    flex: 0 0 auto;
    height: 200px;               /* fixed height for mobile */
  }
}