/* Lochindaal Seafood Kitchen – preview site.
   Palette is taken from the restaurant's own wordmark: pale ice blue #b9e2e9 and black on
   white. The deep blue is a darkened reading of the same hue, used wherever pale blue would
   fail contrast.
   Layout note: the largest photograph recoverable from the client's site is 950x154, and the
   rest are about 400px square. Nothing here scales an image past its native width, so the
   design uses framed plates and one native-height panorama band instead of full-bleed heroes. */

:root {
  --ink: #10242f;
  --ink-soft: #3d5967;
  --ink-faint: #6a828d;
  --paper: #ffffff;
  --wash: #eef7f9;
  --wash-deep: #dceef2;
  --brand: #b9e2e9;
  --deep: #17566e;
  --deep-dark: #0f3f52;
  --rule: #d3e6eb;
  --coral: #a8503a;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --measure: 1080px;
  --gap: clamp(3rem, 7vw, 5.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  line-height: 1.65;
  overflow-wrap: break-word;
}

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

a { color: var(--deep); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--deep-dark); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { width: min(100% - 2.5rem, var(--measure)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 0.7rem 1.1rem; z-index: 50;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}

h1, h2, h3 { font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3.1vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 1.25rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem); }

section { padding-block: var(--gap); }

.lede { font-size: 1.12em; color: var(--ink-soft); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 0.9rem; letter-spacing: 0.04em;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--deep);
  border-radius: 2px;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.btn-solid { background: var(--deep); color: #fff; }
.btn-solid:hover { background: var(--deep-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--deep); }
.btn-ghost:hover { background: var(--wash); color: var(--deep-dark); }

/* ---------- header ---------- */

.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.header-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap; padding-block: 1.1rem;
}
.logo { display: inline-block; }
.logo img { width: 232px; }
.site-nav { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.06em;
  color: var(--ink); text-decoration: none; padding-block: 0.2rem;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--brand); color: var(--deep); }
/* The nav link rule above is more specific than .btn-solid, so the button's own colours have
   to be restated here or the label renders dark ink on the dark blue fill. */
.site-nav a.btn { font-size: 0.85rem; padding: 0.6rem 1.1rem; border-bottom-color: var(--deep); }
.site-nav a.btn-solid, .site-nav a.btn-solid:hover { color: #fff; }
.site-nav a.btn-solid:hover { background: var(--deep-dark); border-color: var(--deep-dark); }

/* ---------- hero ---------- */

.hero { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
}
.hero h1 { margin-bottom: 1.1rem; }
.hero p { margin: 0 0 1.1rem; max-width: 34em; }
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.8rem; }

/* The photograph is 282x322 native; the frame never lets it draw wider than that. */
.hero-figure { margin: 0; justify-self: center; }
.hero-figure .frame {
  padding: 0.85rem; background: var(--wash); border: 1px solid var(--rule);
}
.hero-figure img { width: 282px; max-width: 100%; }
.hero-figure figcaption {
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 0.75rem; text-align: center;
}

.facts {
  display: flex; flex-wrap: wrap; gap: 0 2rem; align-items: baseline;
  border-top: 1px solid var(--rule); padding-top: 1.1rem; margin-top: 1.8rem;
  font-family: var(--sans); font-size: 0.83rem; color: var(--ink-soft);
}
.facts strong { font-weight: 600; color: var(--ink); }

/* ---------- panorama band ---------- */
/* loch.webp is 950x154 native. It is a real <img> so it carries alt text, and it is capped at
   its own width rather than stretched across the viewport: upscaling a 950px photo to 1900px
   would show, and the audit this site supports objects to exactly that. */
.band { padding-block: 0; }
.band img {
  width: 950px; max-width: 100%; margin-inline: auto;
  border-block: 1px solid var(--rule);
}

/* ---------- hours ---------- */

.hours-section { background: var(--wash); }
.hours-grid {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
}
.hours-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.95rem; }
.hours-table th, .hours-table td { text-align: left; padding: 0.62rem 0; border-bottom: 1px solid var(--wash-deep); font-weight: 400; }
.hours-table td { text-align: right; font-variant-numeric: tabular-nums; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }
.hours-table .closed { color: var(--ink-faint); }

.note {
  border-left: 3px solid var(--brand);
  padding: 0.1rem 0 0.1rem 1.1rem;
  margin: 1.5rem 0 0;
  color: var(--ink-soft);
}

/* ---------- menu ---------- */

.menu-head { max-width: 46em; margin-bottom: clamp(2rem, 4vw, 3rem); }
.menu-cols { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.course + .course { margin-top: 2.75rem; }
.course > h3 {
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--deep); padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.4rem;
}
.dish { margin: 0 0 1.35rem; }
.dish-line { display: flex; align-items: baseline; gap: 0.6rem; }
.dish-name { font-size: 1.06rem; }
.dish-dots { flex: 1 1 auto; border-bottom: 1px dotted var(--rule); transform: translateY(-0.22em); min-width: 1.5rem; }
.dish-price { font-family: var(--sans); font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.dish-desc { margin: 0.28rem 0 0; font-size: 0.94rem; color: var(--ink-soft); line-height: 1.55; }
.tag { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ink-faint); }

.platters { background: var(--wash); border: 1px solid var(--rule); padding: clamp(1.5rem, 3vw, 2.25rem); margin-top: 2.75rem; }
.platters .dish-desc { color: var(--ink-soft); }
.platters > h3 {
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--deep); margin: 0 0 1.4rem;
}
.sides-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.35rem 2rem;
  font-size: 0.97rem;
}
.sides-list li { display: flex; align-items: baseline; gap: 0.5rem; padding-block: 0.2rem; }

.menu-notes {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--rule);
  display: grid; gap: 1rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  font-size: 0.94rem; color: var(--ink-soft);
}
.menu-notes p { margin: 0; }
.menu-notes strong { color: var(--ink); }

/* ---------- the room ---------- */

.room-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.room-copy p { max-width: 34em; }
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.plates figure { margin: 0; }
.plates img { width: 100%; border: 1px solid var(--rule); }
.plates figcaption {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--ink-faint); margin-top: 0.5rem;
}
.detail-list { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.detail-list li { padding: 0.55rem 0 0.55rem 1.4rem; border-bottom: 1px solid var(--rule); position: relative; font-size: 0.98rem; }
.detail-list li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 8px; height: 1px; background: var(--brand); }
.detail-list li:last-child { border-bottom: 0; }

/* ---------- reputation ---------- */

.rep { background: var(--ink); color: #e9f4f6; }
.rep h2 { color: #fff; }
.rep .eyebrow { color: #8fb2bf; }
.rep a { color: var(--brand); }
.rep-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
.score { font-size: 3.6rem; line-height: 1; color: #fff; margin: 0.2rem 0 0.6rem; }
.score-sub { font-family: var(--sans); font-size: 0.85rem; color: #a9c8d2; margin: 0 0 0.55rem; max-width: 28em; }
.quotes { margin: 0; display: grid; gap: 1.5rem; }
.quotes blockquote { margin: 0; padding-left: 1.2rem; border-left: 2px solid var(--brand); }
.quotes p { margin: 0; font-size: 1.05rem; }
.quotes cite { display: block; margin-top: 0.5rem; font-family: var(--sans); font-size: 0.78rem; font-style: normal; color: #a9c8d2; letter-spacing: 0.05em; }
.hygiene {
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #2b4655;
  font-family: var(--sans); font-size: 0.85rem; color: #a9c8d2;
}
.hygiene strong { color: #fff; }

/* ---------- find us + booking ---------- */

.visit-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.contact-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.15rem; }
.contact-list dt, .contact-label {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.2rem;
}
.contact-value { font-size: 1.05rem; }

.booking { background: var(--wash); border: 1px solid var(--rule); padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.booking h3 { margin-bottom: 0.6rem; }
.booking > p { margin-top: 0; color: var(--ink-soft); font-size: 0.97rem; }
.field { display: block; margin-bottom: 1.05rem; }
.field span {
  display: block; font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.4rem;
}
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: 0.65rem 0.75rem; background: #fff;
  border: 1px solid var(--rule); border-radius: 2px;
}
.field textarea { resize: vertical; min-height: 5.5rem; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--deep); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.booking .btn { width: 100%; justify-content: center; margin-top: 0.35rem; }
.booking-fallback { font-size: 0.88rem; color: var(--ink-soft); margin: 1rem 0 0; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--rule); padding-block: 2.75rem; font-size: 0.92rem; color: var(--ink-soft); }
.footer-in { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; justify-content: space-between; align-items: flex-start; }
.footer-in p { margin: 0 0 0.35rem; }
.footer-brand img { width: 190px; margin-bottom: 0.9rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-family: var(--sans); font-size: 0.85rem; }

/* ---------- 404 ---------- */

.oops { min-height: 68vh; display: grid; place-content: center; text-align: center; gap: 1.1rem; padding-block: 4rem; }
.oops img { width: 250px; margin-inline: auto; }
.oops p { margin: 0; color: var(--ink-soft); }
.oops .btn { justify-self: center; margin-top: 0.75rem; }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .hero-grid, .hours-grid, .room-grid, .rep-grid, .visit-grid, .menu-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The headline leads on narrow screens; the photograph follows it rather than pushing it
     under the fold. */
  .hero-figure { justify-self: start; }
  .hero-actions { margin-top: 1.4rem; }
}

@media (max-width: 560px) {
  .header-in { justify-content: center; text-align: center; gap: 0.9rem; padding-block: 0.9rem; }
  .site-nav { gap: 0.9rem 1.1rem; justify-content: center; }
  .logo img { width: 186px; }
  .hero { padding-top: 2rem; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .facts { gap: 0.35rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}