/* cosy morning — one-page "business card"
   Bento grid of "cosy squares" carried over from the 2024 site.
   Colours: orange #e98f20 verbatim from the old logo SVG; linen #ede5dc and
   slate #46576c sampled from the current brand illustration (instagram);
   navy tiles + yellow follow the shop sign and the yellow chairs/cups. */

@font-face {
  /* Stand-in for the original "CozyRegular" (used in logo + menu).
     Replace once Mia supplies the original font file and its license. */
  font-family: "Cozy";
  src: url("../fonts/gaegu-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Cozy";
  src: url("../fonts/gaegu-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --orange: #e98f20;
  --blue: #23395b;        /* tile background */
  --blue-soft: #2e4a73;   /* placeholder stripes */
  --yellow: #f0bf2e;      /* instagram tile — chairs & cups */
  --cream: #ede5dc;       /* page background — linen of the brand illustration */
  --slate: #46576c;       /* line/lettering colour of the brand illustration */
  --ink: var(--slate);
  --gap: clamp(8px, 1.4vw, 14px);
  --radius: 18px;
  --font: "Cozy", "Comic Neue", "Segoe Print", "Bradley Hand", system-ui, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  line-height: 1.35;
}

a { color: inherit; }
a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--cream); padding: .5em 1em; z-index: 10; }

/* ---------- grid ---------- */

.grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--gap) 16px;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-auto-flow: dense;
}

@media (min-width: 820px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(190px, auto);
    padding-top: calc(var(--gap) * 3);
  }
}

.tile {
  background: var(--blue);
  color: var(--orange);
  border-radius: var(--radius);
  padding: clamp(18px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  overflow: hidden;
}

/* placement: mobile = 2 cols, desktop = 4 cols */
.t-logo   { grid-column: span 2; grid-row: span 2; justify-content: center; align-items: center; }
.t-hours  { grid-column: span 2; }
.t-photo  { grid-column: span 1; }
.t-wide   { grid-column: span 2; }
.t-tall   { grid-row: span 2; }
.t-intro  { grid-column: span 2; }
.t-insta  { grid-column: span 1; }
.t-illu   { grid-column: span 2; grid-row: span 2; }

@media (min-width: 820px) {
  .t-hours  { grid-column: span 2; }
  .t-intro  { grid-column: span 2; grid-row: span 1; }
}

/* ---------- logo ---------- */

.logo {
  margin: 0;
  font-weight: 400;
  line-height: .8;
  text-align: center;
  color: var(--orange);
}
.logo .cosy {
  display: block;
  font-size: clamp(4.5rem, 20vw, 9.5rem);
  font-weight: 700;
  letter-spacing: .03em;
}
/* current logo: small spaced "morning" under the wordmark, with a rule */
.logo .morning {
  display: inline-block;
  margin-top: .2em;
  padding-top: .25em;
  border-top: 2px solid currentColor;
  font-size: clamp(1.1rem, 3.6vw, 1.7rem);
  letter-spacing: .45em;
  padding-left: .45em; /* optical centering against letter-spacing */
}
.tagline { margin: 1.2em 0 0; font-size: 1rem; letter-spacing: .08em; opacity: .9; }

/* ---------- text tiles ---------- */

.tile h2 {
  margin: 0 0 .5em;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1;
}
.tile p { margin: 0; }
.tile p + p { margin-top: .4em; }
.tile a { text-decoration: none; }
.tile a:hover { text-decoration: underline; text-underline-offset: .2em; }

.hours dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .1em 1em; }
.hours dt { opacity: .85; }
.hours dd { margin: 0; }
.address { display: flex; gap: .5em; align-items: flex-start; margin-top: 1em; }
.address svg { flex: none; width: 1.3em; height: 1.3em; margin-top: .1em; }

.t-link {
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}
.t-link:hover { transform: translateY(-3px); background: #1c2f4c; }
.t-link .big { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); font-weight: 700; line-height: 1.05; }
.t-link .small { font-size: 1rem; opacity: .85; margin-top: .4em; }

.t-intro { justify-content: center; text-align: center; }
.t-intro .kicker { letter-spacing: .12em; margin-bottom: .8em; }
.t-intro .lead { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); line-height: 1.25; }

.t-note { justify-content: center; align-items: center; text-align: center; font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); }

.t-insta { background: var(--yellow); color: var(--blue); }
.t-insta:hover { background: #e5b21f; }
.t-insta svg { width: 42%; height: auto; }

/* ---------- photos ---------- */

.photo { margin: 0; padding: 0; position: relative; } /* reset UA figure margin */
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the illustration sits on its own linen background: no crop, blend into page */
.t-illu { background: var(--cream); }
.t-illu img { object-fit: contain; }

/* placeholder tile (unused once all photos are in) */
.photo.placeholder {
  background:
    repeating-linear-gradient(-45deg, var(--blue) 0 14px, var(--blue-soft) 14px 28px);
  display: flex;
  align-items: flex-end;
  padding: 14px;
}
.photo.placeholder span {
  background: var(--cream);
  color: var(--blue);
  font-size: .85rem;
  padding: .2em .6em;
  border-radius: 999px;
}

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

.footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 16px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: .4em 1.5em;
  justify-content: space-between;
  font-size: 1rem;
  color: var(--slate);
}

/* ---------- legal page ---------- */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.legal .back {
  display: inline-block;
  font-family: var(--font);
  font-size: 1.3rem;
  color: var(--orange);
  background: var(--blue);
  padding: .3em 1em;
  border-radius: 999px;
  text-decoration: none;
  margin-bottom: 1.5em;
}
.legal h1, .legal h2 { font-family: var(--font); color: var(--blue); line-height: 1.1; }
.legal h1 { font-size: 2.6rem; margin: .4em 0 .5em; }
.legal h2 { font-size: 1.7rem; margin: 1.8em 0 .4em; }
.legal h3 { font-size: 1.05rem; margin: 1.4em 0 .3em; }
.legal a { color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  .t-link { transition: none; }
  .t-link:hover { transform: none; }
}