/* Cipresso Group — shared styles (Tailwind utilities load from the CDN on each page) */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }

/* Keep content clear of the notch on phones held sideways */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

/* Keeps footers clear of the iPhone home indicator */
.safe-bottom { padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)); }

.font-serif { font-variant-numeric: lining-nums; }

/* Logo: CIPRESSO over a centered GROUP, same serif and letter-spacing, GROUP smaller */
.logo { display: inline-flex; flex-direction: column; align-items: center; }
.logo span { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; line-height: 0.8; letter-spacing: 0.06em; margin-right: -0.06em; color: #0a0a0a; }
.logo-main { font-size: 30px; }
.logo-sub { margin-top: 8px; font-size: 14px; }
@media (min-width: 640px) {
  .logo-main { font-size: 36px; }
  .logo-sub { font-size: 17px; }
}

.label { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }

.nav-link { transition: color 0.2s, opacity 0.2s; }
.nav-link[aria-current="page"] { color: #0a0a0a; }
.nav-link:active { opacity: 0.55; }
.nav-link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }

.btn { display: inline-flex; align-items: center; gap: 1.5rem; padding: 17px 22px; border: 1px solid transparent; font-size: 14px; font-weight: 600; line-height: 1.25rem; white-space: nowrap; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.2s; }
.btn-dark { background: #0a0a0a; color: #fff; }
.btn-line { border-color: #d4d4d4; color: #0a0a0a; }
.btn:active { opacity: 0.7; }

/* Home: gallery frame around the viewport.
   Inset from the screen edge (16 / 32 / 48px), then a stepped profile: heavy black band,
   white relief channel, black hairline fillet. Square corners throughout. */
.frame-wrap { --pad: 16px; padding: var(--pad); padding-bottom: max(var(--pad), env(safe-area-inset-bottom, 0px)); }
.frame { --band: 8px; position: relative; border: var(--band) solid #0a0a0a; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5.5px #0a0a0a; }
@media (min-width: 640px) { .frame-wrap { --pad: 32px; } .frame { --band: 10px; } }
@media (min-width: 768px) { .frame-wrap { --pad: 48px; } .frame { --band: 12px; } }
@media (max-height: 520px) { .frame-wrap { --pad: 12px; } .frame { --band: 8px; } } /* short screens, e.g. phones held sideways */
/* Miter joints: a fine diagonal seam across each corner of the band, like joined moulding */
.frame::before {
  content: ""; position: absolute; inset: calc(var(--band) * -1); pointer-events: none;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.6px), rgba(255, 255, 255, 0.24) 50%, transparent calc(50% + 0.6px)) top left / var(--band) var(--band) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), rgba(255, 255, 255, 0.24) 50%, transparent calc(50% + 0.6px)) top right / var(--band) var(--band) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), rgba(255, 255, 255, 0.24) 50%, transparent calc(50% + 0.6px)) bottom left / var(--band) var(--band) no-repeat,
    linear-gradient(to top right, transparent calc(50% - 0.6px), rgba(255, 255, 255, 0.24) 50%, transparent calc(50% + 0.6px)) bottom right / var(--band) var(--band) no-repeat;
}

/* Home: the full logo lockup, centered. Everything scales from --logo (the CIPRESSO size),
   so the crest, wordmark, and spacing keep the same proportions on every screen. */
.logo-xl { --logo: clamp(34px, min(10vw, 15vh), 104px); } /* fits inside the frame on small phones; modest on short landscape screens */
.logo-xl .crest { display: block; width: auto; height: calc(var(--logo) * 1.15); margin-bottom: calc(var(--logo) * 0.3); }
.logo-xl .logo-main { font-size: var(--logo); }
.logo-xl .logo-sub { font-size: calc(var(--logo) * 0.472); margin-top: calc(var(--logo) * 0.22); }

/* Hover effects only on devices with a real pointer, so taps on phones don't leave them stuck on */
@media (hover: hover) {
  .nav-link:hover { color: #0a0a0a; }
  .btn:hover svg { transform: translateX(4px); }
  .btn-dark:hover { background: #404040; }
  .btn-line:hover { border-color: #0a0a0a; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
}