/* ==========================
   Base & Typography
   ========================== */
@font-face {
  font-family: "AmerigoBT";
  src: url("amerigo-bt.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Billistone";
  src: url("Billistone.otf") format("opentype"),
       url("Billistone.woff2") format("woff2");
  font-display: swap;
}

:root{
  --bg: #102245;
  --accent: #ff9f00;
  --light: #ffffff;
  --muted: #4d4d4d;
  --container: 800px;
  --site-max: min(94vw, 1000px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--bg);
  color: var(--light);
  font-family: "AmerigoBT", Georgia, "Times New Roman", Times, serif;
  line-height: 1.6;
}

img {
  max-width:100%;
  height:auto;
  display:block;
}

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:fixed;left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:#000;color:#fff;z-index:10000;border-radius:.25rem;
}

/* Containers */
.container{
  max-width: var(--site-max);
  margin-inline: auto;
  padding: .5rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}
.container.narrow {
  max-width:var(--container);
  display:block;
  padding: 0 1rem;
  margin-left:auto;
  margin-right:auto;
}

/* Header */
.site-header{
  background: var(--bg);
  padding: .75rem 0;
}
.branding img{
  width: auto;
  height: clamp(100px, 10vw, 130px);
  aspect-ratio: 132 / 92;
  display: block;
  margin: 0;
}

/* ==========================
   Orange headlines
   ========================== */
.tagline,
.hero-slogan,
.coming-soon {
  font-family:"Billistone","Brush Script MT",cursive;
  color: var(--accent);
  font-weight:400;
  margin: .5rem 0;
  line-height: 1.05;
  letter-spacing: .01em;
}

/* First headline: biggest */
.tagline {
  font-size: clamp(4.25rem, 9vw, 7rem);
  text-align: right;
}

/* Second headline: a bit smaller */
.hero-slogan {
  font-size: clamp(3.75rem, 8vw, 6rem);
  text-align: left;
}

/* Third headline: visually match body size across fonts */
.coming-soon {
  font-size: clamp(4.6rem, 3.5vw, 3.4rem); /* adjusted for Billistone */
  text-align: center;
  line-height: 1.2;
}

/* Hero */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.hero picture, .gallery picture{display:block}
.hero img, .gallery img{
  width:100%;
  height:auto;
  object-fit:cover;
}
.hero-overlay{
  position:absolute;
  left:0;right:0;bottom:0;
  padding: 0 1rem 1.25rem; /* default bottom padding */
  display:flex;
  justify-content:flex-start;
  align-items:flex-end;
  max-width: var(--site-max);
  margin-left:auto;
  margin-right:auto;
  width:100%;
  z-index: 1;
}

/* Image credit — bottom-right, vertical, rotated 180°, slight inset */
.image-credit{
  position: absolute;
  right: 4px;            /* slight gap from viewport edge */
  bottom: .5rem;
  z-index: 3;
  pointer-events: none;
  max-width: 40vw;
  transform: rotate(180deg);
}
.image-credit span{
  display: inline-block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--muted);
  font-size: .9rem;
  font-family: "AmerigoBT", Georgia, "Times New Roman", Times, serif;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width:640px){
  .image-credit span{ font-size: .5rem; }
}

/* Content */
.content{
  background: var(--bg);
  padding: clamp(1.5rem, 5vw, 3rem) 1rem;
}
.lede{
  margin:.5rem 0 2.25rem 0;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight:400;
  line-height: 1.4;
}
p.contact {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 400;
  margin: 1rem 0;
}
.contact a{
  color: var(--light);
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.contact a:focus, .contact a:hover{
  outline:none;
  text-decoration: underline;
}

/* Gallery strip full width */
.gallery{line-height:0}

/* Footer */
.site-footer{
  background: var(--bg);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1rem 0 1.5rem;
  font-size:.9rem;
  text-align:center;
}

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

/* Content alignment */
.content .container.narrow{
  max-width: var(--site-max);
  padding: .5rem 1rem;
  margin-inline: auto;
  display: block;
  text-align: center;
}
.content .container.narrow > *{
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

/* ==========================
   Responsive refinements
   ========================== */
@media (max-width: 900px){
  .tagline { font-size: clamp(3.5rem, 8vw, 5.5rem); }
  .hero-slogan { font-size: clamp(3.25rem, 7.5vw, 5rem); }
  .hero-overlay{ padding-bottom: 1.25rem; }
}

@media (max-width: 640px){
  .branding img{ height: clamp(85px, 20vw, 110px); }
  .site-header{ padding:.5rem 0; }

  .tagline {
    font-size: clamp(2.25rem, 9vw, 3.25rem);
    line-height: 1.08;
  }
  .hero-slogan {
    font-size: clamp(2rem, 8vw, 2.9rem);
    line-height: 1.08;
  }
  .hero-overlay{ padding-bottom: .75rem; }
}

/* ==========================
   Ultra-small phones: only <429px
   ========================== */
.mobile-only-br { display: none; }

@media (max-width: 429px) {
  .mobile-only-br { display: inline; }

  .tagline {
    font-size: clamp(2.1rem, 10vw, 3rem);
    line-height: 1.08;
  }
  .hero-slogan {
    font-size: clamp(2.1rem, 9.5vw, 3rem);
    line-height: 1.08;
    color: white;
  }

  .hero-overlay{ padding-bottom: 0.6rem; }
}

@media (max-width: 495px){
  .tagline {
    font-size: clamp(2.3rem, 8.5vw, 2.5rem);
    line-height: 1.1;
  }
  .hero-overlay{ padding-bottom: 0; }
}