/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/*
 * Print sensibility on a screen: a warm paper ground, one ink, one accent, and
 * type doing the work that borders and boxes would otherwise be asked to do.
 *
 * The listing is a calendar, and calendars are read by scanning down a column
 * for a date. So the date is the loudest thing on the page, every event is a
 * row under its day rather than a card in a grid, and there is exactly one
 * colour that is not ink — used for links and nothing else, so that "coloured"
 * reliably means "you can click this".
 */

:root {
  --paper: #f6f2ea;
  --paper-deep: #ede6d9;
  --ink: #1c1a17;
  --ink-soft: #5c564c;
  --ink-faint: #8c8478;
  --rule: #d8cfbe;
  --accent: #a8331d;

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

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16140f;
    --paper-deep: #1e1b15;
    --ink: #ece6da;
    --ink-soft: #a9a094;
    --ink-faint: #7b7368;
    --rule: #322d24;
    --accent: #e4785c;
  }
}

:root[data-theme="dark"] {
  --paper: #16140f;
  --paper-deep: #1e1b15;
  --ink: #ece6da;
  --ink-soft: #a9a094;
  --ink-faint: #7b7368;
  --rule: #322d24;
  --accent: #e4785c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
/*
 * Every hover rule in this file is gated on a pointer that can really hover.
 * A tap on a touch screen leaves :hover stuck on whatever the finger last
 * crossed, so an underline that means "this is a link" ends up sitting under
 * a row nobody chose.
 */
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 2px; }
}

/* Above the drift, which is a fixed layer at z-index 0. */
.page {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
}

/* ---- the drifting food ------------------------------------------------- */

/*
 * Decoration, and held to a decoration's budget: one ink at around a tenth
 * opacity, dashed so it reads as a sketch in the margin rather than as art the
 * page is asking you to look at. Everything about the weight here is in service
 * of the masthead and the dates staying the loudest things on the paper — see
 * `drift.tsx` for what moves it.
 *
 * Lifted slightly in the dark palette. The same alpha over ink reads fainter
 * against a near-black ground than against paper, so matching the numbers would
 * mean losing the drawing at night.
 */
.drift {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--ink);
  /* Faint on purpose, and how faint is set by the hairline stroke below rather
   * than by taste: at a 1px line there is very little ink to make transparent,
   * so this is close to the floor — much under it and the dishes stop reading
   * as drawings and become a smudge in the paper. */
  opacity: 0.06;
  /* Layout and paint only. `contain: strict` adds size containment, which an
   * inset-0 fixed box does not need and which invites the wrong argument about
   * whether it still fills the viewport. */
  contain: layout paint style;
}

/* Lower again over ink. A pale line on a dark ground carries further than a
 * dark one on paper at the same figure, so matching the two numbers does not
 * match what they look like. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .drift { opacity: 0.04; }
}

:root[data-theme="dark"] .drift { opacity: 0.04; }

/*
 * Transparent until the script has somewhere to put it. Positions are assigned
 * on the client, so every item's first frame is at the origin; the fade means
 * that frame is never seen, and the field arrives rather than appearing.
 */
.drift-item {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1.2s ease-out;
  will-change: transform;
}

/*
 * The one place the line style is set, for all eleven dishes. Stroke and colour
 * are inherited properties, so they reach every path from here and the markup
 * in `drift.tsx` stays pure geometry.
 *
 * The weight is not here: `drift.tsx` sets `stroke-width` per dish, in the
 * units the paths are drawn in, so that every dish comes out at one pixel
 * whatever size it ended up. It has to be done there rather than with
 * `vector-effect` because the shapes are reached through a `use`, and only
 * inherited properties cross into one.
 */
.drift-item svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The shared geometry. Present in the layer and taking up none of it: a `defs`
 * inside a `display: none` subtree is gone in some engines, and takes every
 * `use` that points at it with it. */
.drift-defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* Paper, not ink: nothing decorative survives a print. */
@media print {
  .drift { display: none; }
}

/* ---- masthead ---------------------------------------------------------- */

/*
 * No rule of its own. The first day's heading brings one three pixels below
 * where the masthead's would have sat, and two near-identical lines separated
 * by a band of empty paper read as a mistake rather than as structure. The
 * padding and margin below add up to the same 4.5rem that separates every
 * other day, so the masthead sits in the rhythm instead of interrupting it.
 */
.masthead {
  padding: 4rem 0 2rem;
  margin-bottom: 2.5rem;
}

.masthead h1 {
  font-size: clamp(2.75rem, 11vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
  font-weight: 600;
}

.masthead h1 a { color: inherit; text-decoration: none; }

.masthead .standfirst {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.25rem 0 0;
}

/* ---- day headings ------------------------------------------------------ */

/*
 * A day has to read as a chapter break, not as one more row.
 *
 * The listing separates events with a hairline, so a day heading that also sat
 * on a hairline was competing with the rows it was supposed to be introducing —
 * every line on the page weighed the same and the eye had nothing to catch on.
 * Three things fix that, and all three are needed: a heavy rule the hairlines
 * cannot be confused with, a band of empty paper above it that no event ever
 * has, and the date set in the accent so it is the one coloured thing in a
 * column of ink.
 *
 * The last event of a day drops its hairline too, so each day closes cleanly
 * against the next day's rule instead of stacking two lines a few pixels apart.
 */

.day-block { margin-top: 4.5rem; }
.day-block:first-child { margin-top: 0; }
.day-block .entry:last-child { border-bottom: none; }

.day {
  border-top: 3px solid var(--ink);
  padding-top: 0.9rem;
  margin: 0 0 0.5rem;
  display: flex;
  /*
   * Centred, not baselined: on the heading's baseline the tag hangs a
   * descender's worth below a word set three times its size, reading as a
   * footnote to the date rather than a label on the day. Centring sits it in
   * the optical middle of the weekday instead.
   */
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.day h2 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* The half you scan for. Ink, so the accent below stays the louder of the two. */
.day .weekday {
  font-size: clamp(1.75rem, 5.5vw, 2.25rem);
  line-height: 1.1;
}

/* The half you confirm with, and the only colour in the column. */
.day .date {
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  color: var(--accent);
  font-weight: 500;
}

.day .tag {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--accent);
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  white-space: nowrap;
}

/* ---- an event in the listing ------------------------------------------- */

/*
 * Read top to bottom: when, who, where. The title is not in that list on most
 * rows, and where it is it rides the meta line as an occasion rather than
 * taking a line of its own — see `titleAddsSomething`.
 */

.entry {
  display: block;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}

/*
 * The link is the row's first three lines, not the whole row: the tags below
 * carry a button, which cannot live inside an anchor. It still covers
 * everything a reader is likely to aim at, and the hover underline below still
 * tells them the row is one.
 */
.entry-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .entry-link:hover h3 {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
  }
}

.entry .when {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.45rem;
}

/* The one title worth printing: a festival, a theme, a competition. */
.entry .occasion { color: var(--accent); }

/* Who is cooking. The headline, because it is the reason to go. */
.entry h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.3rem;
  letter-spacing: -0.015em;
}

/* Where. Second only to who, so it stays full ink rather than dropping to grey. */
.entry .where {
  font-size: 1.0625rem;
  color: var(--ink);
  margin: 0;
}

/*
 * What is cooking. Set like the time above it — sans, tracked, faint — because
 * the two are the same kind of line: facts about the row rather than the row
 * itself. A size smaller, so the pair frames the name and the venue instead of
 * bracketing them with two equal shouts, and uppercased here rather than in the
 * data, where the tags are stored exactly as the announcement wrote them.
 */
.entry .cuisine {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0.4rem 0 0;
  /* A market's full bill is twenty tags; expanded, they wrap as a paragraph. */
  line-height: 1.7;
}

/*
 * "+12 more" — a word, not a control.
 *
 * Set in the accent because that is this page's one promise: coloured means you
 * can click it. Everything else about it is the line it sits on, so an
 * unexpanded row reads as a sentence of tags with one clickable word at the
 * end, rather than as a form. The generous padding is for a thumb; the negative
 * margin keeps that padding from pushing the row's rhythm around.
 */
.entry .more {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  margin: -0.35rem 0 -0.35rem 0.35rem;
}

@media (hover: hover) and (pointer: fine) {
  .entry .more:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.entry .more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- detail page ------------------------------------------------------- */

/*
 * No padding of its own: the masthead already sets the distance from the
 * wordmark to whatever follows, and the listing spends exactly that. Adding
 * more here opened a band of empty paper under the standfirst that only the
 * detail page had, which read as a missing element rather than as space.
 */
.detail { padding-top: 0; }

.back {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 2.5rem;
}

.detail h1 {
  font-size: clamp(2rem, 6vw, 2.875rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 1rem;
}

/* "at Original Pattern Brewing · Oakland" — the headline's second half. */
.detail .at {
  font-size: 1.25rem;
  color: var(--ink-soft);
  margin: -0.5rem 0 1.5rem;
}

.detail .dateline {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}

.detail .dateline .occasion { color: var(--accent); }

.detail .body {
  font-size: 1.125rem;
  line-height: 1.65;
  margin: 0 0 2.5rem;
  white-space: pre-wrap;
}

.facts {
  border-top: 2px solid var(--ink);
  margin: 0;
  padding-top: 1.5rem;
}

.facts > div {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}

.facts dt {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.2rem;
}

.facts dd { margin: 0; }
.facts dd ul { margin: 0; padding-left: 1.1rem; }
.facts dd ul.who { list-style: none; padding-left: 0; }
.facts dd ul.who li + li { margin-top: 0.4rem; }

/*
 * Name, then handle, then site — on one line, the handle set in the accent and
 * the mono-ish tracking of a username so it reads as an address rather than as
 * more prose. Flex rather than inline text so the three are wrapped as whole
 * units: when the line runs out the links drop below the name, instead of the
 * name breaking across two lines with a link stranded beside its tail. A name
 * too long for a line of its own still wraps at its own spaces, because a flex
 * item that cannot fit shrinks and sets its text normally.
 */
.facts .follow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.55rem;
  row-gap: 0.15rem;
}

.facts .handle,
.facts .site {
  font-family: var(--sans);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.facts .site { color: var(--ink-faint); }
@media (hover: hover) and (pointer: fine) {
  .facts .site:hover { color: var(--accent); }
}

@media (max-width: 34rem) {
  .facts > div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ---- utility ----------------------------------------------------------- */

.muted { color: var(--ink-soft); }

.empty {
  font-size: 1.125rem;
  color: var(--ink-soft);
  padding: 3rem 0;
}

.colophon {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--ink-faint);
}