html { overflow-x: hidden; }

/* Base text reset */
p, span, em, a, address, h2 {
  color: #848586;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* Global body */
body { 
  font-family: 'Sora', sans-serif;
  margin: 0;
}

/* Links */
a:hover, a.active { color: #309AFD; }

/* Portfolio heading */
#portfolio h2 {
  font-family: 'Sora', sans-serif;
  font-size: 2em;           /* adjust to taste */
  font-weight: 700;         /* extra-bold */
  color: #000;              /* force black */
  text-align: right;
  margin-bottom: 60px;
  letter-spacing: 0.05em;
}

/* (Optional) make hero contact links black too */
.hero-contact a { color: #000; text-decoration: none; }
.hero-contact a:hover { text-decoration: underline; }

/* Reveal text (kept as you had it) */
.reveal-text {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  margin-left: 25vw;
  color: #FF0000;
}
.reveal-text:first-of-type { animation: showup 7s infinite; }
.reveal-text:last-of-type { width: 0; animation: reveal 10s infinite; }
.reveal-text:last-of-type span {
  margin-left: 7px;
  animation: slidein 7s infinite;
  position: relative;
  overflow: hidden;
}
@keyframes showup {
  0% {opacity:0;} 20% {opacity:1;} 80% {opacity:1;} 100% {opacity:0;}
}
@keyframes slidein {
  0% { margin-left:-800px; } 20% { margin-left:-800px; }
  35% { margin-left:0; } 100% { margin-left:0; }
}
@keyframes reveal {
  0% {opacity:0;width:0;} 20% {opacity:1;width:0;}
  30% {width:355px;} 80% {opacity:1;} 100% {opacity:0;width:355px;}
}

/* Header + small utilities */
.tm-site-header { padding: 20px 0; }
.about-text { padding: 10px 40px; font-size: 14px; }
.book-a-brew { padding-right: 20px; position: absolute; }
.tm-btn {
  padding: 10px 40px; color: #fff; background-color: #3299CD;
  display: inline-block; border: none; cursor: pointer; font-size: 1rem;
  transition: all 0.3s ease;
}
.tm-btn:hover { background-color: #49b4e9; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
button.tm-btn { padding: 15px 40px; }
h1 { font-size: 3rem; }
em { display: block; }
div { box-sizing: border-box; }
.tm-color-light-gray { color: #000; }
img { max-width: 100%; }
.tm-page-title { font-size: 30px; margin-left: 0; }
body, ul { margin: 0; padding: 0; }
.tm-mt-0 { margin-top: 0; }
.tm-tagline { font-size: 1rem; margin-left: 0; }
.tm-footer {
  display: flex; justify-content: space-between; padding: 25px; font-size: 0.9em;
}
.tm-row { display: flex; }
.column { width: 100%; float: left; }

/* Responsive tweaks */
@media screen and (max-width: 1500px) { .tm-site-header { padding: 10px; } }
@media screen and (max-width: 600px)  { .tm-site-header { padding: 4px 10px; } }
@media (max-width: 768px) { .gallery-grid { grid-template-columns: 1fr; } }

/* Centered content wrapper */
.site-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* HERO (no stripes) */
.hero{
  position:relative;
  height:72vh; min-height:420px; overflow:hidden;
  background:repeating-linear-gradient(90deg,#fdecef 0 60px,#f7dfe4 60px 120px);
}
/* top bar */
.hero-bar {
  display: flex;
  align-items: center;        /* centers logo + nav vertically */
  justify-content: space-between; /* logo left, nav far right */
  padding: 18px 24px;
  font-family: 'Sora', sans-serif;
}

.hero-logo img {
  display: block;     /* removes any inline gap */
  height: 30px;       /* adjust size to taste */
  width: auto;
}

.hero-nav {
  display: flex;
  gap: 20px;}

.hero-nav a {
  font-size: 1.6rem; /* bigger text + decent icon size */
  color: #111;
  text-decoration: none;
  transition: color 0.3s ease;
}

.hero-nav a:hover {
  color: #e11d48; /* highlight on hover */
}

.hero-nav i {
  font-size: 1.5rem; /* Instagram icon slightly larger */
}

/* draggable stage */
.hero-stage { position:relative; height: calc(100% - 64px); }

/* contact block */
.hero-contact {
  position:absolute; right: 24px; bottom: 24px;
  text-align:right; font-family: 'Sora', sans-serif;
}
.hero-contact .eyebrow {
  text-transform:uppercase; letter-spacing:.18em; font-size:12px; margin-bottom:6px;
}

/* Draggable (merged into one block) */
.draggable {
  position: absolute; left: 0; top: 0;
  cursor: grab; user-select: none; touch-action: none;
}
.draggable:active { cursor: grabbing; }

.about img,
.contact img {
  display: block;
  margin: 30px auto;
  width: 260px;
  max-width: 100%;
  border-radius: 12px; /* optional: soft corners */
  box-shadow: 0 6px 16px rgba(0,0,0,0.1); /* subtle lift */
  transform: none;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.col h2 {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  margin-bottom: 20px;
}

.col p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

.polaroid {
  margin-top: 20px;
  width: 260px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transform: rotate(-6deg);
}

.contact a {
  color: #000;
  text-decoration: none;
}
.contact a:hover {
  text-decoration: underline;
}

/* Mobile: stack columns */
@media (max-width: 768px) {
  .two-col {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .polaroid {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}