/* The recipe page, in the mockup's own pixels.
 * =========================================================================
 *
 * New Recipe Page.jpg is 1315 x 7444 and its content column runs x=43..1287,
 * so the column is 1245px wide and every number in the drawing is a number of
 * those pixels. `tools/mockup_geometry.py` measures them out of the image;
 * this file spends them.
 *
 * ONE UNIT. `--u` is one mockup pixel, scaled to whatever the column happens
 * to be:
 *
 *     #main-left has padding: 0 27.84px 0 0, so its CONTENT box is exactly
 *     the content column -- 1219px at a 1800px window, 728 at 768, 350 on a
 *     phone -- and `container-type: inline-size` measures the content box.
 *     100cqw is therefore the column, and 100cqw/1245 is one mockup pixel.
 *
 * That is what makes "proportions hold at six widths" a property of the
 * stylesheet rather than a thing to be re-checked by eye: there is one scale
 * factor and everything is expressed in it.
 *
 * `--u` is set on the CHILDREN of the container, never on the container
 * itself: a container query unit used on the element that declares the
 * container resolves against that element's own ancestor container, which is
 * either the wrong size or nothing at all.
 *
 * And every size here is a LONGHAND. `font: 700 calc(var(--u)*36)/1.2 inherit`
 * is dropped whole by the parser, silently, and this project has lost an
 * afternoon to that twice.
 */

#main-left { container-type: inline-size; }
#main-left > *,
#main-left > * * { --u: calc(100cqw / 1245); }

/* Below 1024 the column is narrower than the drawing and the drawing's type
 * would shrink with it -- 36 mockup px of title is 10px on a phone. Under
 * that width the page keeps the site's own ladder, which is what the
 * CookingHub page does and what item 1.3 asks the stacking to copy. */
/* THE THRESHOLD IS THE COLUMN'S WIDTH, NOT THE WINDOW'S.
 *
 * `@container` asks about `#main-left`, and that is not the viewport: the
 * sidebar appears at 1280, so the column goes 350, 728, 860, 984, 894, 957,
 * 1219 as the window goes 390, 768, 900, 1024, 1280, 1440, 1800. A 1024px
 * threshold therefore switched OFF at a 1440px window, where the column is
 * 957 -- which is why the hero was 0.54 of its column there and 0.427 at
 * 1800. 880 is the gap between the widest stacked column (860, at a 900px
 * window) and the narrowest side-by-side one (894, at 1280).
 */
@container (max-width: 879px) {
  #main-left > *,
  #main-left > * * { --u: 0.82px; }
}

/* --- the hero: 1245 x 531, radius 40 ------------------------------------ */
/*
 * THE SPLIT IS A DESKTOP THING. The drawing is one width, and it puts a 563px
 * maroon panel beside a 682px photograph. Held below 1024 those become 563
 * and 682 of a 390px phone -- the panel alone was 462px wide and the page
 * scrolled sideways. Under 1024 the theme's own stacking is left to do its
 * job, which is what item 1.3 asks the narrow widths to copy.
 */
section.gt-block.intro.bgcolor-kitchen-guide {
  border-radius: calc(var(--u) * 40);
  margin-bottom: calc(var(--u) * 2);        /* the meta bar tucks under it */
  position: relative;
}

@container (min-width: 880px) {
  section.gt-block.intro.bgcolor-kitchen-guide {
    /* 531 is the drawing's height and it is a FLOOR, not a cap.
     *
     * "Fried Chicken" is one line in the mockup's 511px panel; "Chicken Steak
     * with Blue Cheese Sauce" is two, and two lines of 36px type is 40px more
     * card than one. Pinned at 531 with `overflow: hidden` that recipe loses
     * the bottom of its author row -- a page clipping Tom's name to satisfy a
     * measurement is the measurement winning over the page. */
    min-height: calc(var(--u) * 531);
    overflow: hidden;
  }
  /* The theme leaves 37px above `.content` inside the hero; every y in the
   * drawing is measured from the card's own top edge, so it goes. */
  section.gt-block.intro.bgcolor-kitchen-guide > .content,
  section.gt-block.intro.bgcolor-kitchen-guide > .content.with-link {
    margin: 0;
    padding: 0;
  }
  /* The maroon panel is 563 of the 1245, which is 45.2%. */
  section.gt-block.intro .content {
    width: calc(var(--u) * 563);
    max-width: calc(var(--u) * 563);
    height: 100%;
    padding: 0;
  }
  section.gt-block.intro .content > .in.with-info > .link,
  section.gt-block.intro .content > .in.with-info > .text { margin: 0; padding: 0; }
  section.gt-block.intro .content > .in.with-info {
    /* The panel fills the card, so the author row sits on its floor whether
     * the card is the drawing's 531 or taller because the title wrapped. */
    min-height: calc(var(--u) * 531);
    height: 100%;
    padding: calc(var(--u) * 50) 0 calc(var(--u) * 17) calc(var(--u) * 52);
    width: calc(var(--u) * 511);
    display: flex;
    flex-direction: column;
  }
  /* The photograph fills from the panel's edge to the column's, top to
   * bottom, and is cropped rather than squashed -- item 2.1. */
  section.gt-block.intro .img {
    position: absolute;
    left: calc(var(--u) * 563);
    top: 0;
    width: calc(var(--u) * 682);
    height: 100%;
    border-radius: 0 calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 40);
    background-size: cover;
    background-position: center;
    object-fit: cover;
  }
}

/* The card's own contents, at the y the drawing puts them. */
.ttc-hero__cat {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 14);
  display: inline-flex;
  align-items: center;
  font-size: calc(var(--u) * 12);
  line-height: 1;
  border-radius: 999px;
}
section.gt-block.intro h1 {
  font-size: calc(var(--u) * 36);
  line-height: 1.12;
  margin: calc(var(--u) * 40) 0 0;
}
#main-left .ttc-hero__servings,
section.gt-block.intro .ttc-hero__servings,
.ttc-hero__servings {
  font-size: calc(var(--u) * 17);
  line-height: 1.2;
  margin: calc(var(--u) * 18) 0 0;
}
.ttc-hero__marks {
  margin: calc(var(--u) * 20) 0 0;
  gap: calc(var(--u) * 12);
  height: calc(var(--u) * 44);
  align-items: center;
}
.ttc-hero__marks .ttc-flag,
.ttc-hero__marks .ttc-flag img { width: calc(var(--u) * 44); height: calc(var(--u) * 44); }
.ttc-hero__marks .ttc-new { --ttc-new-size: calc(var(--u) * 44); }
.ttc-intro { margin: calc(var(--u) * 18) 0 0; }
.ttc-intro__body { font-size: calc(var(--u) * 15); line-height: 1.5; }
.ttc-intro__more { font-size: calc(var(--u) * 15); }
.ttc-hero__stats {
  margin: calc(var(--u) * 22) 0 0;
  padding: calc(var(--u) * 14) 0;
  font-size: calc(var(--u) * 15);
  gap: calc(var(--u) * 14);
}
.ttc-hero__stats .ttc-star { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.ttc-hero__stats .ttc-eye { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
section.gt-block.intro .content .in.with-info > .info {
  margin-top: auto;
  padding-top: 0;
  height: calc(var(--u) * 44);
}
section.gt-block.intro .content .in.with-info > .info .chef-label {
  padding-left: calc(var(--u) * 56);
  min-height: calc(var(--u) * 44);
}
section.gt-block.intro .content .in.with-info > .info .chef-label__img,
section.gt-block.intro .content .in.with-info > .info .chef-label__img img {
  width: calc(var(--u) * 44); height: calc(var(--u) * 44);
}
section.gt-block.intro .chef-label strong { font-size: calc(var(--u) * 18); }
section.gt-block.intro .date { font-size: calc(var(--u) * 12); }

/* The Share tab, top-right of the photograph, and the diet pills at its
 * bottom-right -- both inside the picture, item 1.2. */
.share-line {
  border-radius: 0 0 0 calc(var(--u) * 30) !important;
  padding: calc(var(--u) * 12) calc(var(--u) * 22) !important;
  gap: calc(var(--u) * 22);
}
.share-line__label { font-size: calc(var(--u) * 16); }
.share-line .social-site-btn { width: calc(var(--u) * 44); height: calc(var(--u) * 44); }
.ttc-hero__diets {
  bottom: calc(var(--u) * 20);
  right: calc(var(--u) * 20);
  gap: calc(var(--u) * 12);
}
.ttc-hero__diets .ttc-pill {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 16);
  display: inline-flex;
  align-items: center;
  font-size: calc(var(--u) * 15);
  line-height: 1;
}

/* --- the meta bar: flush under the hero, 1245 x 93 ---------------------- */
#main-left section.gt-block.ttc-herobar,
.ttc-herobar { margin: 0 0 calc(var(--u) * 50); }
.ttc-herobar__in {
  height: calc(var(--u) * 93);
  min-height: calc(var(--u) * 93);
  padding: 0 calc(var(--u) * 70) 0 calc(var(--u) * 65);
  border-radius: 0 0 calc(var(--u) * 40) calc(var(--u) * 40);
  background: #f5f5f5;
  gap: calc(var(--u) * 60);
  align-items: center;
}
.ttc-herobar__in .info li,
.ttc-herobar__in ul.info { font-size: calc(var(--u) * 19); }
.ttc-herobar__in ul.info img,
.ttc-herobar__in ul.info svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.ttc-herobar__cal { font-size: calc(var(--u) * 19); }

/* --- Before We Start ---------------------------------------------------- */
.ttc-beforebar__in { gap: calc(var(--u) * 60); align-items: center; }
/* The drawing puts the heading block at x=38 and the pill at x=452, so the
 * block is a fixed 414 wide and the pill starts where it starts regardless of
 * how long the heading runs. */
/* The inset is the ROW's padding, not the block's margin: the theme centres
 * a `.gt-block` with automatic side margins and wins that argument whatever
 * this file says, so the shift is put somewhere it is not contested. */
#main-left .ttc-beforebar__in { gap: 0; padding-left: calc(var(--u) * 38); }
#main-left .ttc-beforebar__in > .gt-block,
.ttc-beforebar__in > .gt-block {
  width: calc(var(--u) * 414);
  flex: 0 0 auto;
}
#main-left .ttc-beforebar__in > .gt-block h2,
.ttc-beforebar__in > .gt-block h2 {
  font-size: calc(var(--u) * 22);
  line-height: 1.2;
  margin: 0;
}
#main-left .ttc-beforebar__in > .gt-block p,
.ttc-beforebar__in > .gt-block p {
  font-size: calc(var(--u) * 13.5);
  line-height: 1.3;
  margin: calc(var(--u) * 4) 0 0;
}
.ttc-jump {
  width: calc(var(--u) * 252);
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 12);
  font-size: calc(var(--u) * 17);
  border-radius: 999px;
  justify-content: center;
  gap: calc(var(--u) * 12);
}
.ttc-jump__chev svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
/* The Before We Start row sits inside a `content-blocks` section, and BOTH
 * carry the theme's 27.84px bottom margin. The drawing puts 50 between the
 * meta bar and the first tip card, once. */
#main-left section.gt-block.ttc-beforebar,
.ttc-beforebar { margin: 0; }
#main-left section.gt-block.ttc-beforebar > .content,
#main-left > section.gt-block.content-blocks > .content { padding: 0; margin: 0; }
#main-left section.gt-block.ttc-beforebar .ttc-beforebar__in > .gt-block > .content,
#main-left section.gt-block.ttc-beforebar .ttc-beforebar__in .text { padding: 0; margin: 0; }
#main-left > section.gt-block.content-blocks { margin: 0 0 calc(var(--u) * 50); }

/* --- the tip cards ------------------------------------------------------ */
.ch-embed.ch-embed .ch-recipe.ch-recipe #main-left > section.gt-block.text:not(.without-box):not(.ttc-nutrition):not(.ttc-policy-embed):not(.ttc-kofi) > .content,
#main-left > section.gt-block.text:not(.without-box):not(.ttc-nutrition):not(.ttc-policy-embed):not(.ttc-kofi) > .content {
  background: #f5f5f5;
  border-radius: calc(var(--u) * 40);
  padding: calc(var(--u) * 48);
}
#main-left > section.gt-block.text:not(.without-box):not(.ttc-nutrition):not(.ttc-policy-embed):not(.ttc-kofi) { margin: 0 0 calc(var(--u) * 30); }
#main-left > section.gt-block.text:not(.without-box):not(.ttc-nutrition):not(.ttc-policy-embed):not(.ttc-kofi) h2,
#main-left > section.gt-block.text:not(.without-box):not(.ttc-nutrition):not(.ttc-policy-embed):not(.ttc-kofi) h3 {
  font-size: calc(var(--u) * 17);
  line-height: 1.3;
  margin: 0 0 calc(var(--u) * 16);
}
#main-left > section.gt-block.text:not(.without-box):not(.ttc-nutrition):not(.ttc-policy-embed):not(.ttc-kofi) p {
  font-size: calc(var(--u) * 15.5);
  line-height: 1.55;
}

/* --- Buy me a coffee ---------------------------------------------------- */
#main-left section.gt-block.ttc-kofi,
#main-left .ttc-kofi,
.ttc-kofi { margin: calc(var(--u) * 33) 0 calc(var(--u) * 45); }
#main-left .ttc-kofi > .content,
#main-left .ttc-kofi .text { padding: 0; margin: 0; }
.ttc-kofi__btn {
  width: calc(var(--u) * 222);
  height: calc(var(--u) * 55);
  border-radius: calc(var(--u) * 10);
  font-size: calc(var(--u) * 17);
  gap: calc(var(--u) * 12);
  justify-content: center;
  padding: 0;
}
.ttc-kofi__cup { width: calc(var(--u) * 22); height: calc(var(--u) * 22);
                 background-size: calc(var(--u) * 22); }

/* --- "Recipe:" and the recipe card -------------------------------------- */
h2#rec {
  font-size: calc(var(--u) * 22);
  line-height: 1.2;
  margin: 0 0 calc(var(--u) * 11) calc(var(--u) * 53);
}
/* The maroon header IS the top of the grey container: same width, all four
 * corners rounded, nothing padded around it -- item 2.3, no box in a box. */
#main-left .ch-recipe > section#info,
.ch-embed.ch-embed .ch-recipe.ch-recipe > section#info,
section#info {
  background: #f5f5f5;
  border-radius: calc(var(--u) * 40);
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
/* `.ch-recipe` is the mirrored embed's own wrapper and it insets everything
 * inside it. The recipe card is the column's full width in the drawing. */
#main-left .ch-recipe,
.ch-embed.ch-embed .ch-recipe.ch-recipe {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
section#info > .content,
.ch-embed.ch-embed .ch-recipe.ch-recipe section#info > .content,
section#info > .content > .text,
.ch-embed.ch-embed .ch-recipe.ch-recipe section#info > .content > .text {
  padding: 0; background: none; max-width: none; width: 100%;
}
#main-left .ttc-card__head,
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-card__head,
.ttc-card__head {
  width: 100%;
  height: calc(var(--u) * 155);
  border-radius: calc(var(--u) * 40);
  padding: calc(var(--u) * 50) calc(var(--u) * 48) 0 calc(var(--u) * 57);
  box-sizing: border-box;
}
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-card__title,
.ttc-card__title { font-size: calc(var(--u) * 34); line-height: 1.1; }
.ttc-card__row--top { margin: 0 0 calc(var(--u) * 26); }
.ttc-card__row--meta { font-size: calc(var(--u) * 18); gap: calc(var(--u) * 18); }
.ttc-card__ident { gap: calc(var(--u) * 18); }
.ttc-card__servings { font-size: calc(var(--u) * 18); }
.ttc-card__marks .ttc-flag,
.ttc-card__marks .ttc-flag img { width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.ttc-card__marks .ttc-new { --ttc-new-size: calc(var(--u) * 40); }
.ttc-card__avatar { width: calc(var(--u) * 44); height: calc(var(--u) * 44); }
.ttc-card__author { font-size: calc(var(--u) * 18); }
.ttc-card__date { font-size: calc(var(--u) * 12); }
.ttc-card__stats { font-size: calc(var(--u) * 15); gap: calc(var(--u) * 12); }
.ttc-card__stats .ttc-star { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.ttc-card__head .ttc-pill {
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 16);
  display: inline-flex; align-items: center;
  font-size: calc(var(--u) * 15); line-height: 1;
}

/* the meta row inside the card */
section#info .info-buttons {
  height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 64) 0 calc(var(--u) * 45);
  display: flex; align-items: center; justify-content: space-between;
}
.ttc-print {
  width: calc(var(--u) * 167);
  height: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 8);
  font-size: calc(var(--u) * 16);
  gap: calc(var(--u) * 10);
  justify-content: center;
  padding: 0;
}

/* --- ingredients and tools --------------------------------------------- */
/* The drawing puts the pair at x=57 and x=820 of the column, so the row is
 * inset 57 and the two boxes are 725 and 360 with 38 between them. */
/* Side by side at desktop, stacked below 1024 -- 725 and 360 of the drawing
 * are 595 and 295 on a 390px phone, which is 890px of boxes on a 350px
 * column. Item 1.3: below 1024 the narrow layout is the theme's. */
@container (min-width: 880px) {
  section#info .ingredients-tools,
  .ch-embed.ch-embed .ch-recipe.ch-recipe section#info .ingredients-tools {
    display: flex;
    align-items: stretch;
    gap: calc(var(--u) * 38);
    padding: 0 calc(var(--u) * 65) calc(var(--u) * 60) calc(var(--u) * 57);
    box-sizing: border-box;
  }
  section#info .ingredients { width: calc(var(--u) * 725); }
  section#info .tools { width: calc(var(--u) * 360); }
}
section#info .ingredients,
section#info .tools {
  border-radius: calc(var(--u) * 30);
  padding: calc(var(--u) * 30);
  box-sizing: border-box;
}
section#info .ingredients { border: 1px solid #e4e4e4; }
section#info .tools { border: 1.5px solid #e42828; }
section#info .ingredients h2,
section#info .tools h2 { font-size: calc(var(--u) * 26); line-height: 1.2; }
section#info .ingredients li,
section#info .tools li { font-size: calc(var(--u) * 15.5); line-height: 1.6; }

/* --- the nutrition box -------------------------------------------------- */
#main-left section.gt-block.ttc-nutrition,
.ttc-nutrition {
  margin: calc(var(--u) * 38) 0 calc(var(--u) * 60);
  border-radius: calc(var(--u) * 30);
  background: #fffdeb;
  border: 1px solid #d8c9a6;
}
.ttc-nutrition .content > .text {
  padding: calc(var(--u) * 56) calc(var(--u) * 78) calc(var(--u) * 40) calc(var(--u) * 56);
}
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-nutrition__head h2,
.ttc-nutrition__head h2 { font-size: calc(var(--u) * 24); line-height: 1.2; }
.ttc-nutrition__head .ttc-pill {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 16);
  display: inline-flex; align-items: center;
  font-size: calc(var(--u) * 15); line-height: 1;
}
.ttc-nutrition__head .ttc-hero__diets { gap: calc(var(--u) * 14); }
.ttc-nutrition__figures {
  font-size: calc(var(--u) * 15.5);
  line-height: 1.6;
  margin: calc(var(--u) * 22) 0 0;
}
.ttc-nutrition__note {
  font-size: calc(var(--u) * 15.5);
  line-height: 1.5;
  margin: calc(var(--u) * 18) 0 0;
}

/* --- directions --------------------------------------------------------- */
#main-left h2.directions-title,
.ch-embed.ch-embed .ch-recipe.ch-recipe h2.directions-title,
h2.directions-title {
  font-size: calc(var(--u) * 22);
  line-height: 1.2;
  margin: 0 0 calc(var(--u) * 11) calc(var(--u) * 53);
}


/* The Before We Start row: the theme's own section wrappers each add their
 * bottom margin above it, which put 108px between the meta bar and the
 * heading where the drawing has 50. */
#main-left > section.gt-block.content-blocks > .content > .text,
#main-left section.gt-block.ttc-beforebar .ttc-beforebar__in > .gt-block {
  margin-top: 0;
  padding-top: 0;
}
#main-left section.gt-block.ttc-beforebar { padding-top: 0; }


/* The meta bar to Before We Start is 50 in the drawing. The theme gives the
 * bar and the block after it 27.84px each and they do not collapse across the
 * section wrappers, so it measured 104. */
#main-left > section.gt-block.ttc-herobar,
#main-left section.gt-block.ttc-herobar { margin: 0 0 calc(var(--u) * 42); }
#main-left > section.gt-block.content-blocks { margin-top: 0; padding-top: 0; }
#main-left > section.gt-block.content-blocks > .content { margin-top: 0; }

/* The drawing puts 50 between the meta bar and "Before We Start". The theme
 * had 105: our 50, plus two of the page's own `empty-space` blocks (19 and
 * 37) sitting above the row.
 *
 * Those two are spacing and nothing else -- they carry no words -- and this
 * file is where the page's spacing is decided now, so inside the section that
 * holds the Before We Start row they collapse. Spacers ANYWHERE ELSE on the
 * page are untouched: the `:has()` scopes this to that one section.
 */
#main-left > section.gt-block.content-blocks:has(.ttc-beforebar)
  > section.gt-block.empty-space { display: none; }

/* --- addendum 8: the signs, and the hand pressing them ------------------ */
/*
 * The pill is a link now -- Amazon's own search for the kind of thing the box
 * lists -- and the hand is the affordance that says so: about 1.8x the sign's
 * text height, at the RIGHT end, half of it outside the pill, tilted as if a
 * finger were pressing the sign. The words and the colours are unchanged.
 *
 * `overflow: visible` and the right margin are what let the hand hang out
 * without the pill clipping it or the box scrolling sideways at 390.
 */
.ch-embed.ch-embed .ch-recipe.ch-recipe a.ttc-sign,
a.ttc-sign {
  position: relative;
  overflow: visible;
  text-decoration: none;
  cursor: pointer;
  margin-right: calc(var(--u) * 26);
  padding-right: calc(var(--u) * 20);
  gap: 0;
}
a.ttc-sign:hover { text-decoration: none; }
.ttc-sign__words { display: inline-block; }
.ch-embed.ch-embed .ch-recipe.ch-recipe .ttc-sign .ttc-sign__hand,
.ttc-sign .ttc-sign__hand {
  position: absolute;
  right: calc(var(--u) * -18);
  top: 50%;
  /* 1.8x the sign's own line height, which is what "about 1.8x the text
     height" is measured against. */
  /* "about 1.8x the sign's text height" -- measured against the line box,
     which is what a reader sees as the height of the words. */
  width: 2em;
  height: 2em;
  margin-top: -1em;
  transform: rotate(15deg);
  transform-origin: 50% 30%;
  transition: transform .12s ease;
  filter: drop-shadow(0 2px 3px rgba(43, 17, 20, .35));
}
a.ttc-sign:hover .ttc-sign__hand {
  transform: rotate(15deg) translate(-2px, 2px);
}
a.ttc-sign:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* The boxes must not clip it, and must not gain a scrollbar because of it. */
.ch-embed.ch-embed .ch-recipe.ch-recipe .ingredients,
.ch-embed.ch-embed .ch-recipe.ch-recipe .tools,
section#info .ingredients, section#info .tools { overflow: visible; }