/* ===================================
   CSS Custom Properties
   =================================== */
   :root {
	/* Colors */
	--color-background: #EAE7DC;
	--color-text: #3D3D3D;
	--color-accent: #8B7355;
  
	/* Typography */
	--font-primary: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
	--font-fallback: Georgia, serif;
  
	/* Spacing */
	--spacing-xs: 10px;
	--spacing-sm: 20px;
	--spacing-md: 40px;
	--spacing-lg: 60px;
  
	/* Font Sizes - Mobile First */
	--font-size-header: 12px;
	--font-size-message: 36px;
	--font-size-follow: 10px;
	--font-size-instagram: 14px;
  
	/* Logo Size */
	--logo-width: 150px;
  
	/* Transitions */
	--transition-fade: 0.3s ease;
  }
  
  /* ===================================
	 Base Styles
	 =================================== */
  * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  }
  
  html,
  body {
	width: 100%;
	height: 100%;
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }
  
  /* ===================================
	 Main Container
	 =================================== */
  .container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: var(--spacing-sm);
	text-align: center;
  }
  
  /* ===================================
	 Header Styles
	 =================================== */
  .header {
	font-size: var(--font-size-header);
	font-weight: 400;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: var(--spacing-md);
  }
  
  /* ===================================
	 Message Section
	 =================================== */
  .message {
	margin-bottom: var(--spacing-lg);
  }
  
  .message-line-1,
  .message-line-2,
  .message-line-3 {
	font-size: var(--font-size-message);
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	transition: opacity var(--transition-fade);
  }
  
  .message-line-2 {
	font-weight: 700;
  }
  
  /* ===================================
	 Social Section
	 =================================== */
  .social-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-sm);
  }
  
  .follow-text {
	font-size: var(--font-size-follow);
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: var(--spacing-xs);
  }
  
  /* ===================================
	 Brand Logo
	 =================================== */
  .brand-logo {
	width: var(--logo-width);
	height: auto;
	display: block;
	margin-bottom: var(--spacing-xs);
  }
  
  .logo-fallback {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-text);
	padding: var(--spacing-sm);
	margin-bottom: var(--spacing-xs);
	border: 2px solid var(--color-text);
	border-radius: 4px;
  }
  
  /* ===================================
	 Instagram Link
	 =================================== */
  .instagram-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--color-text);
	transition: color var(--transition-fade);
	cursor: pointer;
  }
  
  .instagram-link:hover {
	color: var(--color-accent);
  }
  
  .instagram-link:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
  }
  
  .instagram-icon {
	width: 24px;
	height: 24px;
	transition: transform var(--transition-fade);
  }
  
  .instagram-link:hover .instagram-icon {
	transform: scale(1.1);
  }
  
  .instagram-handle {
	font-size: var(--font-size-instagram);
	font-weight: 400;
  }
  
  /* ===================================
	 Responsive Design - Tablet
	 =================================== */
  @media (min-width: 768px) {
	:root {
	  --font-size-header: 14px;
	  --font-size-message: 54px;
	  --font-size-follow: 12px;
	  --logo-width: 180px;
	  --spacing-sm: 30px;
	}
  }
  
  /* ===================================
	 Responsive Design - Desktop
	 =================================== */
  @media (min-width: 1024px) {
	:root {
	  --font-size-header: 14px;
	  --font-size-message: 72px;
	  --font-size-follow: 12px;
	  --logo-width: 240px;
	  --spacing-sm: 40px;
	}
  }