/* laia socials link page. Standalone: this repo serves one page, so the
   stylesheet carries only what that page uses. It is a trimmed copy of the
   main site's styles.css, not a fork; keep the tokens in step with it. */

/* ─── FONTS ─── */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/cormorant-garamond-vf-latin.woff2') format('woff2');
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/cormorant-garamond-italic-vf-latin.woff2') format('woff2');
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

/* ─── TOKENS ─── */
:root {
  --cream:      #F6F0E6;
  --cream-soft: #F0E8DA;
  --sand:       #EAE0D0;
  --clay:       #373E02;
  --clay-deep:  #242801;
  --clay-light: #A9B36B;
  --sage:       #6E7A5A;
  --sage-light: #A8B496;
  --sage-pale:  #E8EDE4;
  --ink:        #4a3a31;
  --ink-deep:   #372B24;
  --ink-soft:   #6e5f52;
  --ink-muted:  #9a8d80;
  --white:      #FFFDF9;
  --line:       rgba(74, 58, 49, .12);
  --line-light: rgba(74, 58, 49, .06);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --nav-height: 72px;
  --section-gap: clamp(4rem, 8vw, 8rem);
  --content-width: 1200px;
  --content-narrow: 800px;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ─── TYPOGRAPHY ─── */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

.dk-eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dk-body-large {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ─── LINK PAGE ─── */
/* socials.laiabali.com. Opened from an Instagram profile, on a phone, almost
   without exception, so it is designed at phone width and merely kept tidy on
   anything larger. One column, large tap targets, no nav and no scroll
   animation to sit through. */
.dk-links-body { background: var(--cream-soft); }

.dk-links {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 18px clamp(3rem, 12vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* ── header ── */
.dk-links-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Full bleed past the page gutter, so the photo reads as a cover rather than
   a card floating at the top. */
.dk-links-cover {
  width: calc(100% + 36px);
  margin: 0 -18px 1.25rem;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0 0 22px 22px;
  background: var(--sand);
}

.dk-links-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lifted over the cover's bottom edge to tie the two together. */
.dk-links-logo {
  width: auto;
  height: 46px;
  margin-top: -2.6rem;
  padding: 0.7rem 1.1rem;
  background: var(--cream-soft);
  border-radius: 14px;
  margin-bottom: 0.85rem;
}

.dk-links-sub {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}

/* ── sections ── */
.dk-links-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.dk-links-label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin-bottom: 0.4rem;
}

/* ── list rows: menus and reviews ── */
/* Left aligned with a chevron, so a list of five reads as a menu rather than
   five identical slabs. */
.dk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 54px;
  padding: 0.85rem 1.1rem;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(74, 58, 49, .05), 0 6px 18px -14px rgba(74, 58, 49, .3);
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}

.dk-row em {
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-left: 0.5rem;
}

.dk-row::after {
  content: "→";
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--clay-light);
  flex: none;
  transition: transform .18s ease;
}

.dk-row:active { transform: scale(.985); }
.dk-row:hover::after,
.dk-row:focus-visible::after { transform: translateX(3px); }

/* ── location card ── */
.dk-place {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(74, 58, 49, .05), 0 10px 28px -18px rgba(74, 58, 49, .4);
}

/* The map is the pin. Lazy, because three Google embeds on a phone is real
   weight and none of them is above the fold. */
.dk-place-map {
  height: 150px;
  line-height: 0;
  background: var(--sand);
}

.dk-place-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(.3) contrast(.96);
}

.dk-place-body {
  padding: 1.15rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.dk-place-body h3 {
  font-size: 1.5rem;
  line-height: 1.15;
  margin: -0.2rem 0 0;
}

.dk-place-address {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}

/* ── buttons inside a card ── */
.dk-btn-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.75rem 1rem;
  background: var(--clay);
  border: 1px solid var(--clay);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--white);
  transition: background .18s ease, transform .18s ease;
}

.dk-btn-link:active { transform: scale(.985); }
.dk-btn-link:hover,
.dk-btn-link:focus-visible { background: var(--clay-deep); border-color: var(--clay-deep); }

/* Directions is the fallback action, not the one we are asking for. */
.dk-btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
}

.dk-btn-ghost:hover,
.dk-btn-ghost:focus-visible {
  background: var(--cream);
  border-color: var(--line);
  color: var(--ink);
}

/* ── footer ── */
.dk-links-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.dk-links-foot a { color: var(--ink-soft); }
.dk-links-foot a:hover { color: var(--clay); }

@media (prefers-reduced-motion: reduce) {
  .dk-row, .dk-row::after, .dk-btn-link { transition: none; }
}