/* Work, scalable (prototype, 1 Oct 2026). Three parts:
   1. The index: every project in a staggered two-column grid, filtered by service. A grid holds five
      projects or fifty without changing shape.
   2. A project page: the story runs sideways on a laptop (as on the sideways Work page Anna liked) and
      goes down on phones. Opening frame, brief, films side by side, stills, next project.
   3. The film player: a YouTube film over the page, loaded only when asked for.
   No lines between pictures (Anna, 1 Oct): frames are separated by space, never by black rules. */

/* Paper, softened (Anna, 2 Oct 2026: "definitely softer"): #F8EFE6 had the yellowest hue in the palette
   (OKLCH 68 against about 55) and read as beige beside black and white. Per the brand book (drop chroma,
   never cool), Paper here is #F4F0ED: same lightness, chroma 0.006, hue 55. Prototype first; the brand
   book and styles.css follow once she has seen it across the page. */
:root { --paper: #F4F0ED; }   /* now also in styles.css for every page (7 Oct); kept here for the prototype history */

/* ============================================================
   1. The index
   ============================================================ */
.work-index { padding: var(--section-y) 0 calc(var(--section-y) + clamp(3rem, 9vw, 8rem)); background: var(--black); color: var(--paper); }
.work-index__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--s-6); }
.work-index h1 { max-width: none; font-size: calc((var(--step-5)) * 1.2); line-height: 0.9; letter-spacing: -0.025em; }   /* 80px like every page title, not 128px (7 Oct audit) */
.work-index__lead { max-width: 30ch; margin: 0; color: var(--oat); font-size: calc((var(--step-1)) * 1.2); }
.work-index__filters { display: flex; flex-wrap: wrap; gap: var(--s-2) clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(var(--s-7), 5vw, var(--s-9)); }
.work-index__filters button {
  padding: var(--s-2) 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: calc((var(--step--2)) * 1.2); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.5em;
  transition: color var(--t-fast) var(--ease-ui), text-decoration-color var(--t-fast) var(--ease-ui);
}
.work-index__filters button[aria-pressed="true"] { color: var(--paper); text-decoration-color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .work-index__filters button:hover { color: var(--paper); } }

/* The grid: two columns, the right one stepped down, like a magazine spread */
.work-grid {
  --step-down: clamp(3rem, 9vw, 8rem);
  list-style: none; margin: clamp(var(--s-7), 5vw, var(--s-9)) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(var(--s-6), 5vw, var(--s-9)); row-gap: calc(var(--step-down) + clamp(var(--s-6), 4vw, var(--s-8)));
}
.work-grid > li:nth-child(even) { translate: 0 var(--step-down); }
.work-card a { display: block; color: var(--paper); text-decoration: none; }
.work-card__frame { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink); }
.work-card__frame img, .work-card__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 25 Oct 2026: the video is never faded itself; the cover fades off it. A video with opacity on it is drawn
   outside the Mac's own video path in Chrome and plays darker than the same file in the player (Anna). */
.work-card__frame img { z-index: 1; transition: opacity 300ms var(--ease-ui); }
.work-card.is-playing .work-card__frame img { opacity: 0; }
.work-card__words { position: absolute; inset: 0; display: flex; align-items: flex-end; margin: 0; padding: clamp(1.5rem, 3vw, 2.5rem); }
.work-card__words p { margin: 0; max-width: 16ch; font-family: var(--display); font-size: calc((clamp(1.75rem, 3vw, 2.75rem)) * 1.2); line-height: 1.05; letter-spacing: -0.02em; color: var(--paper); }
.work-card__name { margin: var(--s-5) 0 0; max-width: none; font-size: calc((var(--step-4)) * 1.2); line-height: 1.02; color: var(--paper); }
.work-card__meta { margin: var(--s-2) 0 0; font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--oat); }
.work-card__meta .todo { color: var(--clay); }
@media (hover: hover) and (pointer: fine) {
  .work-card__name { transition: color var(--t-fast) var(--ease-ui); }
  .work-card a:hover .work-card__name { color: var(--oat); }
}
.work-grid__empty { grid-column: 1 / -1; color: var(--oat); }

/* ============================================================
   2. A project page (shares the sideways stage with the earlier Work prototype)
   ============================================================ */
.lookbook { --bar-h: 3.5rem; background: var(--black); color: var(--paper); }

/* The opening frame */
.lb-open { position: relative; margin: 0; overflow: hidden; background: var(--ink); aspect-ratio: 4 / 5; }
.lb-open img, .lb-open video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-open__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgb(14 12 11 / 0.78) 0%, rgb(14 12 11 / 0.25) 38%, rgb(14 12 11 / 0) 60%); }   /* a scrim only where the title sits */
.lb-open figcaption { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(1.75rem, 4vw, 3.5rem); }
.lb-kind { display: block; font-size: calc((var(--step--2)) * 1.2); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oat); }
.lb-title { margin: var(--s-3) 0 var(--s-4); max-width: none; font-size: calc((var(--step-5)) * 1.2); line-height: 0.95; letter-spacing: -0.025em; color: var(--paper); }
.lb-open .meta { color: var(--oat); }
.lb-open .meta .todo { color: var(--clay); }
.lb-open--words { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: auto; min-height: 30rem; padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(1.75rem, 4vw, 3.5rem); }
.lb-open--words blockquote { margin: 0; }
.lb-open--words blockquote p { margin: 0; max-width: 14ch; font-family: var(--display); font-size: calc((clamp(2.25rem, 4.4vw, 4.25rem)) * 1.2); line-height: 1.02; letter-spacing: -0.03em; color: var(--paper); }
.lb-open--words figcaption { position: static; }
.lb-open__who { display: block; margin-top: var(--s-3); font-size: calc((var(--step--1)) * 1.2); color: var(--oat); }

/* The brief */
.lb-text { display: flex; flex-direction: column; justify-content: center; gap: var(--s-5); padding: clamp(2.25rem, 5vw, 4rem) var(--gutter); background: var(--ink); color: var(--paper); }
.lb-text > div + div { padding-top: var(--s-5); border-top: 1px solid rgb(248 239 230 / 0.28); }
.lb-text h2 { margin: 0 0 var(--s-2); max-width: none; font-family: inherit; font-size: calc((var(--step--2)) * 1.2); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.lb-text p { margin: 0; max-width: 46ch; font-size: calc((var(--step--1)) * 1.2); line-height: 1.6; }
.lb-text .todo { color: var(--oat); }
.lb-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.lb-links a { color: var(--paper); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: rgb(248 239 230 / 0.45); }
.lb-links a:hover { text-decoration-color: var(--paper); }
/* The client's own words on their project page (7 Oct audit): Times, the name in small capitals, after the facts */
.lb-quote { margin: 0; padding-top: var(--s-5); border-top: 1px solid rgb(248 239 230 / 0.28); }
.lb-quote p { margin: 0; max-width: 24ch; font-family: var(--display); font-size: calc((var(--step-2)) * 1.2); line-height: 1.25; letter-spacing: -0.01em; color: var(--paper); }
.lb-quote footer { margin-top: var(--s-3); font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--oat); }

/* The films: wide ones 16:9, cutdowns 9:16; pointing plays a silent preview, clicking opens the film */
.lb-films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-4); padding: var(--s-8) var(--gutter); }   /* going down: wide films across, cutdowns two to a row */
.lb-film { margin: 0; }
.lb-film:not(.lb-film--tall) { grid-column: 1 / -1; }
.lb-film__open { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.lb-film__frame { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); }
.lb-film--tall .lb-film__frame { aspect-ratio: 9 / 16; }
.lb-film__frame img, .lb-film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-film__frame img { z-index: 1; transition: opacity 300ms var(--ease-ui); }   /* the cover fades, never the video (25 Oct) */
.lb-film.is-playing .lb-film__frame img { opacity: 0; }
.lb-film__empty { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-4); text-align: center; font-size: calc((var(--step--1)) * 1.2); color: var(--clay); }
.lb-film__play {
  position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 1;
  padding: 0.55em 0.9em; background: rgb(14 12 11 / 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: calc((var(--step--2)) * 1.2); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper);
}
.lb-film__play .todo { color: var(--oat); }
.lb-film figcaption { margin-top: var(--s-3); }
.lb-film__title { display: block; font-family: var(--display); font-size: calc((var(--step-2)) * 1.2); line-height: 1.1; color: var(--paper); }
.lb-film__title .todo { color: var(--clay); }
.lb-film__meta { display: block; margin-top: var(--s-1); font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--oat); }
.lb-film__open:focus-visible { outline: 1px solid var(--paper); outline-offset: 6px; }

/* Two stills, the small one over the corner of the wide one */
.lb-pair { position: relative; padding: var(--s-8) var(--gutter) var(--s-9); }
.lb-pair figure { margin: 0; overflow: hidden; background: var(--ink); }
.lb-pair img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb-pair__wide { width: 88%; aspect-ratio: 16 / 9; }
.lb-pair__tall { position: relative; z-index: 1; width: 46%; aspect-ratio: 3 / 4; margin: -18% 0 0 auto !important; }
.lb-pair--flip .lb-pair__wide { margin-left: auto !important; }
.lb-pair--flip .lb-pair__tall { margin: -18% auto 0 0 !important; }
/* Landscape pairs (25 Oct 2026): footage shot 16:9 stays 16:9, so the small frame is a smaller landscape frame, not a portrait crop */
.lb-pair--landscape .lb-pair__tall { width: 52%; aspect-ratio: 16 / 9; margin-top: -12% !important; }
/* Portrait pairs (25 Oct 2026): frames from 9:16 Reels stay upright; a large upright frame with a smaller one overlapping it */
.lb-pair--portrait .lb-pair__wide { width: 44%; aspect-ratio: 9 / 16; }
.lb-pair--portrait .lb-pair__tall { width: 30%; aspect-ratio: 9 / 16; margin: -38% 12% 0 auto !important; }
.lb-pair--portrait.lb-pair--flip .lb-pair__tall { margin: -38% auto 0 12% !important; }

/* The next project: its frame, dimmed, with its name */
.lb-next { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-3); min-height: 24rem; overflow: hidden; padding: clamp(2rem, 5vw, 4rem) var(--gutter); background: var(--ink); color: var(--paper); text-decoration: none; }
.lb-next__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; transition: opacity 400ms var(--ease-ui); }
.lb-next__label, .lb-next__name { position: relative; }
.lb-next__label { font-size: calc((var(--step--2)) * 1.2); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oat); }
.lb-next__name { font-family: var(--display); font-size: calc((var(--step-5)) * 1.2); line-height: 0.95; letter-spacing: -0.025em; }
@media (hover: hover) and (pointer: fine) { .lb-next:hover .lb-next__img { opacity: 0.6; } }

/* More than four films: the rest under the story, in a grid */
.more-films { padding: var(--section-y) 0; background: var(--black); color: var(--paper); }
.more-films h2 { font-size: calc((var(--step-4)) * 1.2); }
.more-films__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--s-8) var(--s-6); margin-top: var(--s-7); }

.lookbook__bar { display: none; }

/* ---- Sideways (laptops, motion allowed; work-v3.js adds .is-sideways) ---- */
.lookbook.is-sideways {
  --stage-h: calc(100svh - var(--header-h) - var(--bar-h));
  display: grid; grid-template-rows: var(--stage-h) var(--bar-h); grid-template-columns: minmax(0, 1fr);   /* one viewport wide: without it the column grew to the whole story and pushed the bar's links off screen (7 Oct) */
  height: calc(100svh - var(--header-h)); overflow: clip;
}
.is-sideways .lookbook__track { position: relative; display: flex; width: 100%; height: var(--stage-h); will-change: transform; }
.is-sideways .lb-open { flex: none; width: calc(var(--stage-h) * 1.15); height: 100%; aspect-ratio: auto; }
.is-sideways .lb-open figcaption { left: var(--x0); right: clamp(2rem, 4vw, 3.5rem); }   /* title on the content edge, under the wordmark (7 Oct audit) */
.is-sideways .lb-open--words { width: calc(var(--stage-h) * 0.95); min-height: 0; padding-inline: clamp(2rem, 4vw, 3.5rem); }
.is-sideways .lb-text { flex: none; width: clamp(24rem, 33vw, 32rem); height: 100%; padding: clamp(2rem, 5vh, 4rem) clamp(2rem, 3.5vw, 3.5rem); }
@media (max-height: 44rem) {
  .is-sideways .lb-text { width: clamp(28rem, 40vw, 38rem); gap: var(--s-4); }
  .is-sideways .lb-text > div + div { padding-top: var(--s-4); }
}
.is-sideways .lb-films { flex: none; display: flex; align-items: center; gap: clamp(1.75rem, 3vw, 3rem); height: 100%; padding: 0 clamp(2rem, 4vw, 4rem); }
.is-sideways .lb-film { flex: none; }
.is-sideways .lb-film__open { width: auto; }
.is-sideways .lb-film__frame { height: calc(var(--stage-h) * 0.54); width: auto; }
.is-sideways .lb-film--tall .lb-film__frame { width: auto; }
.is-sideways .lb-films--solo .lb-film__frame { height: calc(var(--stage-h) * 0.8); }   /* one wide film, shown large (20 Oct) */
.is-sideways .lb-pair { flex: none; width: calc(var(--stage-h) * 1.24); height: 100%; padding: 0; }
.is-sideways .lb-pair__wide { position: absolute; left: calc(var(--stage-h) * 0.08); top: calc(var(--stage-h) * 0.12); width: calc(var(--stage-h) * 0.9); height: calc(var(--stage-h) * 0.506); aspect-ratio: auto; }
.is-sideways .lb-pair__tall { position: absolute; left: calc(var(--stage-h) * 0.8); top: calc(var(--stage-h) * 0.46); width: calc(var(--stage-h) * 0.33); height: calc(var(--stage-h) * 0.44); aspect-ratio: auto; margin: 0 !important; }
/* the mirrored pair: the small frame low on the left, the wide one high on the right (12 Oct) */
.is-sideways .lb-pair--flip .lb-pair__wide { left: calc(var(--stage-h) * 0.26); top: calc(var(--stage-h) * 0.1); }
.is-sideways .lb-pair--flip .lb-pair__tall { left: calc(var(--stage-h) * 0.1); top: calc(var(--stage-h) * 0.44); }
.is-sideways .lb-pair--landscape .lb-pair__tall { width: calc(var(--stage-h) * 0.5); height: calc(var(--stage-h) * 0.281); top: calc(var(--stage-h) * 0.56); left: calc(var(--stage-h) * 0.66); }
.is-sideways .lb-pair--landscape.lb-pair--flip .lb-pair__tall { left: calc(var(--stage-h) * 0.08); top: calc(var(--stage-h) * 0.54); }
.is-sideways .lb-pair--portrait { width: calc(var(--stage-h) * 0.95); }
.is-sideways .lb-pair--portrait .lb-pair__wide { left: calc(var(--stage-h) * 0.06); top: calc(var(--stage-h) * 0.06); width: calc(var(--stage-h) * 0.45); height: calc(var(--stage-h) * 0.8); }
.is-sideways .lb-pair--portrait .lb-pair__tall { left: calc(var(--stage-h) * 0.44); top: calc(var(--stage-h) * 0.3); width: calc(var(--stage-h) * 0.33); height: calc(var(--stage-h) * 0.587); }
.is-sideways .lb-pair--portrait.lb-pair--flip .lb-pair__wide { left: calc(var(--stage-h) * 0.4); top: calc(var(--stage-h) * 0.06); }
.is-sideways .lb-pair--portrait.lb-pair--flip .lb-pair__tall { left: calc(var(--stage-h) * 0.08); top: calc(var(--stage-h) * 0.3); }
.is-sideways .lb-next { flex: none; width: calc(var(--stage-h) * 0.95); height: 100%; min-height: 0; }
.is-sideways .lb-more { flex: none; width: clamp(26rem, 38vw, 34rem); height: 100%; }
.is-sideways .lb-frame img { will-change: transform; }

/* The bar: back to all work, this project, how far along, and the next one */
.is-sideways .lookbook__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); height: var(--bar-h); padding: 0 var(--x0); background: var(--black); }
.lookbook__progress { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(248 239 230 / 0.12); }
.lookbook__progress i { position: absolute; inset: 0; background: var(--paper); transform: scaleX(0); transform-origin: left; }
.lookbook__bar a, .lookbook__name { font-size: calc((var(--step--2)) * 1.2); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.lookbook__bar a { color: var(--clay); transition: color var(--t-fast) var(--ease-ui); }
.lookbook__name { color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .lookbook__bar a:hover { color: var(--paper); } }

/* ============================================================
   3. The film player
   ============================================================ */
.player { width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(14 12 11 / 0.94); color: var(--paper); }
.player[open] { display: grid; place-content: center; justify-items: center; animation: player-in 220ms var(--ease-ui); }
.player::backdrop { background: transparent; }
.player__frame { position: relative; width: min(92vw, calc((100svh - 9rem) * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden; background: var(--black); }
.player.is-tall .player__frame { width: min(92vw, calc((100svh - 9rem) * 9 / 16)); aspect-ratio: 9 / 16; }
.player__frame iframe, .player__frame video, .player__frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
/* 25 Oct 2026 (Anna: the whole film looks darker in the player): Chrome lays a dark gradient over the entire picture
   while its controls show. Keep the controls, drop the shade, so the film plays at its true brightness. */
.player__frame video::-webkit-media-controls-panel { background: none !important; background-image: none !important; }
.player__frame video::-webkit-media-controls-enclosure { background: none !important; }
.player__standin { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-6) var(--s-5) var(--s-4); background: linear-gradient(to top, rgb(14 12 11 / 0.85), rgb(14 12 11 / 0)); font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); }
.player__caption { margin: var(--s-4) 0 0; font-size: calc((var(--step--1)) * 1.2); color: var(--oat); text-align: center; }
.player__caption .todo { color: var(--clay); }
.player__close { position: fixed; top: var(--s-4); right: var(--s-5); width: 3rem; height: 3rem; padding: 0; border: 0; background: none; color: var(--paper); font-size: calc((2.25rem) * 1.2); line-height: 1; cursor: pointer; }
.player__close:focus-visible { outline: 1px solid var(--paper); outline-offset: 2px; }
@keyframes player-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .player[open] { animation: none; } }

/* ============================================================
   Phones
   ============================================================ */
@media (min-width: 40rem) {
  .lookbook:not(.is-sideways) .lb-open { aspect-ratio: 16 / 10; }
  .lookbook:not(.is-sideways) .lb-pair__tall { width: 34%; }
  .lookbook:not(.is-sideways) .lb-pair--landscape .lb-pair__tall { width: 46%; }
}
@media (max-width: 48rem) {
  .work-index__head { grid-template-columns: minmax(0, 1fr); }
  .work-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-8); }
  .work-grid > li:nth-child(even) { translate: none; }
  .work-index { padding-bottom: var(--section-y); }
}

/* ---- More work (7 Oct 2026): the end of a project says what it is. Three other projects, the same service
   first, each with its frame, name and label, then the way back to all of them. Replaces the single
   "Next project" image, which read as an unrelated photo. ---- */
.lb-more { display: flex; flex-direction: column; gap: var(--s-4); padding: clamp(2rem, 5vh, 3.5rem) clamp(1.5rem, 3vw, 3rem); background: var(--ink); }
.lb-more__label { font-size: calc((var(--step--2)) * 1.2); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oat); }
.lb-more__list { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--s-3); flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; }
.lb-more__item a { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: var(--s-4); align-items: end; height: 100%; color: var(--paper); text-decoration: none; }
.lb-more__item img { width: 100%; height: 100%; min-height: 5rem; object-fit: cover; }
.lb-more__item span { display: grid; gap: var(--s-1); padding-bottom: var(--s-1); }
.lb-more__name { font-family: var(--display); font-size: calc((var(--step-2)) * 1.2); line-height: 1.05; }
.lb-more__meta { font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--oat); }
.lb-more__all { align-self: flex-start; font-size: calc((var(--step--1)) * 1.2); color: var(--paper); border-bottom: 1px solid var(--oat); padding-bottom: 2px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .lb-more__item a:hover .lb-more__name { color: var(--oat); } .lb-more__item img { transition: opacity var(--t-fast) var(--ease-ui); } .lb-more__item a:hover img { opacity: 0.8; } }
.lookbook:not(.is-sideways) .lb-more__list { grid-template-rows: none; }
.lookbook:not(.is-sideways) .lb-more__item a { height: auto; }
.lookbook:not(.is-sideways) .lb-more__item img { aspect-ratio: 4 / 3; height: auto; }