/* Line & Lustre — shared site styles
   This file is used by both index.html and brand_story.html.
*/

:root { --bg: #EAE6E1; --text: #1b1b1b; }

* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Shared layout */
.wrap{
  min-height: 100svh;
  display:flex;
  justify-content:center;
  padding: clamp(20px, 6vw, 56px);
  align-items: stretch; 
}

.card{
  width: min(720px, 100%);
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Page variants */
.page-home .wrap{ align-items: stretch;  }
.page-home .card{
  width: min(720px, 100%);
  text-align:center;
}

.page-about .wrap{ align-items:flex-start; }
.page-about .card{
  width: min(820px, 100%);
  text-align:left;
}

/* Home page (index.html) */
.page-home h1{
  margin: 0 0 14px 0;
  font-size: clamp(18px, 3.2vw, 22px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.92;
}

.logo{
  display:block;
  margin:0 auto;
  width: min(520px, 88vw);
  max-height: 50svh;
  height:auto;
}

.text{
  margin-top: clamp(14px, 3.5vw, 18px);
  font-size: clamp(14px, 3.8vw, 18px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.content{
  margin-top: clamp(14px, 3.5vw, 18px);
  font-size: clamp(14px, 3.8vw, 18px);
  letter-spacing: 0.14em;
  opacity: 0.85;
}

/* Visually hidden (SEO helper) */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

    .hero-svg {
  display: block;
  margin: 0 auto;
  width:340px;   /* <- this matches Image 2 size */
  max-width: 80vw;
  height: auto;
}
.hero-svg text,
.hero-svg .wordmark {
  font-family: "Montserrat", sans-serif;
  font-weight: 100;
}

/* About / Brand story page (brand_story.html) */
.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.brand{
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin:0;
}

.nav{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.nav a{
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.85;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.08);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, opacity 140ms ease;
}

.nav a:hover{
  background: rgba(255,255,255,0.16);
  border-color: rgba(0,0,0,0.22);
  transform: translateY(-1px);
  opacity: 0.92;
}

.nav a:focus-visible{
  outline: 2px solid rgba(0,0,0,0.55);
  outline-offset: 3px;
}

.page-about h1{
  margin: 6px 0 18px 0;
  font-size: clamp(18px, 3.0vw, 26px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 200;
}

/* Body copy */
.prose{
  font-size: clamp(10px, 1.5vw, 12px);
  line-height: 1.75;
  max-width: 90ch;
  opacity: 0.92;
}

.prose p{ margin: 0 0 16px 0; }
.prose p:last-child{ margin-bottom: 0; }

/* Subtle divider */
.divider{
  margin: 18px 0 18px 0;
  height: 1px;
  background: rgba(0,0,0,0.10);
  width: min(520px, 100%);
}

/* Signature / closing */
.signature{
  margin-top: 18px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 13px;
  opacity: 0.9;
}

.signature strong{ font-weight: 600; }

/* Links / pills (shared) */
.links,
.social_links{
  margin-top: 18px;
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: 14px;
}

.page-about .links{
  width: 100%;
  justify-content:flex-start;
  gap: 12px;
}

.social_links{
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.buttons__item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  line-height: 1;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.10);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, opacity 140ms ease;
}

.buttons__item:hover{
  background: rgba(255,255,255,0.18);
  border-color: rgba(0,0,0,0.26);
  transform: translateY(-1px);
  opacity: 0.95;
}

.buttons__item:active{ transform: translateY(0px); }

.buttons__item:focus-visible{
  outline: 2px solid rgba(0,0,0,0.55);
  outline-offset: 3px;
}

.links__item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  line-height: 1;
  gap: 10px;
  padding: 10px 16px;
  color: var(--text);
  text-decoration: none;
  
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, opacity 140ms ease;
}
.links__item:hover{
  background: rgba(255,255,255,0.18);
  border-color: rgba(0,0,0,0.26);
  transform: translateY(-1px);
  opacity: 0.95;
}

.links__item:active{ transform: translateY(0px); }

.links__item:focus-visible{
  outline: 2px solid rgba(0,0,0,0.55);
  outline-offset: 3px;
}

.links__icon{
  display:block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
  transform: translateY(0.5px); /* tweak if needed */
}

.links__text{
  display:inline-block;
  line-height: 1;
  letter-spacing: 0.10em;
  opacity: 0.92;
}

.page-about .links__text{
  text-transform: uppercase;
  font-size: 13px;
}

.page-home .links__text{
  font-size: 14px;
  text-transform: none;
}

@keyframes pIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.p-anim {
  opacity: 0;
  animation: pIn 700ms ease forwards;
}

@media (max-width: 520px){
  .nav a{ padding: 8px 10px; }
  .page-about .links{ justify-content: center; }
  .page-about .card{ text-align:left; }
}

@media (max-width: 360px){
  .text{ letter-spacing: 0.12em; }
}