/* ==========================================================================
   Author & Publisher — slides 10-14 of old.pptx

   Geometry is taken from the Canva element data for design DAGWh8EbLBY
   (pages 10-14), cross-checked against the PowerPoint export. Canva reports
   `pos` as y,x — transposed — so every position below has been swapped before
   use; `size` is w x h as written.

   Every size from the 1920x1080 canvas is rebased by 1300/1704 = 0.763, and
   positions are percentages of the 1704px content width measured from x=108,
   exactly as css/site.css does.

   Source type sizes on the canvas, and what they rebase to:
     128px  Cinzel Decorative Bold  ->  97.7px   (= --step-display)
     104px  Cinzel                  ->  79.4px
      80px  Cinzel                  ->  61.0px
      33px  Century Gothic          ->  25.4px
      32px  Century Gothic          ->  24.4px   (= --step-body)
      48.6px Canva Student Font     ->  37.1px
   ========================================================================== */

:root {
  --ap-step-h1-best: clamp(1.6rem, 6.10vw, 4.96rem);   /* 104   -> 79.4px */
  --ap-step-h2:      clamp(1.5rem, 4.70vw, 3.81rem);   /*  80   -> 61.0px */
  --ap-step-eyebrow: clamp(0.95rem, 1.96vw, 1.59rem);  /*  33.3 -> 25.4px */
  --ap-step-caption: clamp(1.2rem, 2.85vw, 2.32rem);   /*  48.6 -> 37.1px */
}

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */

/* Every section clips: three of the five slides run an ornament off the top
   or the left edge, and clipping is what the slide itself does. It also keeps
   the rotated cards and the bled photo panel from ever widening the page.

   `container-type: inline-size` is what makes the bleeding pieces measurable.
   Ornaments and the slide-11 photo panel are placed relative to the *content*
   box, not the viewport, and 100vw is the wrong ruler for that: it counts the
   scrollbar, so every vw-derived offset landed ~7px too far left and every
   vw-derived width came out ~10% large. 100cqw is the section's own border
   box — the same number `.page` divides up — so the two agree exactly.

     --cw  the content width the rebase is expressed against (1300 at full size)
     --cl  the distance from the viewport edge to that content box

   Both hold percentages, which resolve where they are used; every use below is
   on a descendant of .ap-section, so they always resolve against this box. */
.ap-section {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  --cw: min(var(--container), calc(100cqw - var(--gutter) * 2));
  --cl: calc((100cqw - var(--cw)) / 2);
}

/* Every band on this page can now carry a Background image. Three of them
   already had somewhere for it to land — .ap-hero over its tint, .ap-making
   over its floral, .ap-textiles::before inside its left panel — so this covers
   the two that had no background of their own.

   `none` as the fallback keeps the rule valid when nothing is chosen, which is
   the usual case: the band then shows the page texture through it exactly as
   before. Nothing is painted here unless an editor has picked something. */
.ap-best,
.ap-aai {
  background-image: var(--section-bg, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* No text-transform: the slide headings are typed in capitals in the source
   and are reproduced that way, so nothing has to be transformed. That matters
   for the hero, where the source is *not* all caps and Cinzel Decorative draws
   lowercase as small capitals. */
.ap-h2 {
  margin: 0;
  font-family: var(--font-engraved);
  font-size: var(--ap-step-h2);
  font-weight: 400;
  line-height: 1.01;
  letter-spacing: -0.048em;   /* source spc="-288" at 60pt */
  color: var(--c-ink);
}

/* The bold label that introduces each book. Source sets it in the body face
   at the body size, bold. */
.ap-label {
  margin: clamp(0.5rem, 1.4vw, 1.15rem) 0 clamp(0.3rem, 0.9vw, 0.72rem);
  font-size: var(--step-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-ink);
}

.ap-copy {
  margin: 0;
  font-size: var(--step-body);
  line-height: 1.4;
  color: var(--c-ink);
}

/* Slides 12, 13 and 14 set their paragraphs as single disc bullets. */
.ap-bullets {
  margin: 0;
  padding-left: 1.15em;
  font-size: var(--step-body);
  line-height: 1.4;
  color: var(--c-ink);
}

.ap-bullets li { margin: 0; }

/* Two book entries stacked in one column (slides 13 and 14). */
.ap-entry + .ap-entry { margin-top: clamp(1.75rem, 5.5vw, 4.5rem); }

/* --------------------------------------------------------------------------
   Tablet mockup — slides 10 and 12
   The source drops in a photographic iPad PNG (ppt/media/image59.png,
   1059x1448). It is drawn in CSS instead so it stays sharp at any size, the
   same treatment css/site.css gives the phone on the home page.

   Measured off the asset: the device occupies 828x1256 of the 1059x1448 file
   (the rest is drop shadow), and the screen sits 5.55%/5.17% in from the
   sides and 10.90%/10.72% from top and bottom of the device. Padding below is
   expressed against width, as CSS requires.
   -------------------------------------------------------------------------- */

.ap-tablet {
  position: relative;
  width: 100%;
  margin-inline: 0 auto;
  aspect-ratio: 565.4 / 857.6;
  padding: 16.54% 5.17% 16.25% 5.55%;
  border-radius: 7.2% / 4.8%;
  background: #fcfcfc;
  box-shadow:
    inset 0 0 0 1px rgba(107, 94, 84, 0.16),
    0 16px 34px rgba(107, 94, 84, 0.26);
}

.ap-tablet__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #14100e;
  border-radius: 0.7%;
}

.ap-tablet__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Front camera and home button, positioned as on the asset. */
.ap-tablet::before,
.ap-tablet::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

.ap-tablet::before {
  top: 4.4%;
  width: 1.5%;
  aspect-ratio: 1;
  background: #b9b3ad;
}

.ap-tablet::after {
  top: 91.6%;
  width: 8.4%;
  aspect-ratio: 1;
  border: 1px solid rgba(107, 94, 84, 0.35);
}

/* --------------------------------------------------------------------------
   Photo cards
   Slides 11 and 13 place ppt/media/image43.png, a white card photographed at
   an angle with its shadow baked in. Measuring the asset, the card fills
   1185.5x827.5 of the 1472x1116 file and is itself tilted 14.45deg inside it;
   its border is an even 4.70% of the card width on all four sides. Adding the
   element rotations (-23.48 and -9.74) gives net tilts of -9.02 and +4.72 —
   which is exactly the rotation Canva records for the photos inside them, so
   the reading is confirmed.

   Slide 14 uses a different card: a vector polaroid, 430.4x500 in its own
   viewBox with the photo window at 19.5..404.5 x 23.3..392.9, i.e. a deep
   bottom margin. Both are drawn in CSS rather than exported.
   -------------------------------------------------------------------------- */

/* Every card sits inside a .ap-card-slot. That is not decoration: the card's
   border is a percentage of its own width, and a percentage padding resolves
   against the *containing block*, which for a flex item or an absolutely
   positioned figure is not the card. The slot makes the two the same box. */
.ap-card-slot { min-width: 0; }

.ap-card {
  margin: 0;
  padding: 4.70%;
  background: #fff;
  box-shadow: -9px 11px 24px rgba(107, 94, 84, 0.30);
}

.ap-card img { width: 100%; }

.ap-card--deep {
  padding: 5.41% 5.27% 24.88%;
  background: #f7f5ef;
  box-shadow: -10px 12px 26px rgba(107, 94, 84, 0.26);
}

/* "Aai with Tarla Dalal" sits inside the lower margin of the second card.
   Source sets it in Canva Student Font, a handwriting face that is not
   licensed for the web; the stack below is the closest system equivalent. */
.ap-card__caption {
  margin: 0;
  padding-top: 6.88%;      /* source gap between the photo and the caption */
  font-family: 'Ink Free', 'Bradley Hand', 'Segoe Print', 'Brush Script MT', cursive;
  font-size: var(--ap-step-caption);
  line-height: 1.4;
  text-align: center;
  color: var(--c-ink);
}

/* ==========================================================================
   1. Hero — slide 10
   background  full bleed, averages #EADCD3
   tablet      x=58  y=30  723x988   (device 565.4x857.6 within it)
   still       x=189 y=188 505x672   video poster, cropped 12.7%..86.9%
   title       x=862 y=340 w=806  128px Cinzel Decorative Bold, lh 1.01
   blurb       x=856 y=646 w=806   32px
   ornament    x=1239 y=-225, three floral pieces, composited
   ========================================================================== */

/* The deck paints this band as a flat tint. That stays as the colour underneath
   — it is what shows when no image has been chosen, and it is what shows
   through a transparent one — while --section-bg carries whatever the band's
   Background image field holds. `none` as the fallback so the rule is valid
   when the property is unset, which is the usual case. */
.ap-hero {
  background-color: #eadcd3;
  background-image: var(--section-bg, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* The composite runs from x=1239 to the canvas edge, so it is meant to bleed
   off the right of the page — that is how the slide draws it. Sized against
   the content box so it stays at slide scale instead of growing with the
   viewport. */
/* .ap-hero__orn is gone — the band no longer emits the floral composite. Its
   rules went with it rather than being left to match nothing. */

.ap-hero__page { position: relative; z-index: 1; }

/* Device 565.4 wide, its left edge 159 on the canvas (frame at x=58 plus the
   101px of drop shadow that image59.png carries before the bezel starts). */
.ap-hero .ap-tablet {
  max-width: calc(var(--cw) * 0.33180);    /* 565.4 / 1704 */
  margin-left: calc(var(--cw) * 0.02993);  /* (159 - 108) / 1704 */
}

.ap-hero__title {
  margin: 0 0 clamp(0.6rem, 1.6vw, 1.3rem);
  max-width: calc(var(--cw) * 0.47300);   /* source box 806 wide */
  line-height: 1.01;
  letter-spacing: -0.048em;               /* source spc="-460" at 96pt */
}

.ap-hero__blurb {
  margin: 0;
  max-width: calc(var(--cw) * 0.47300);
  font-size: var(--step-body);
  line-height: 1.5;
  color: var(--c-ink);
}

/* ==========================================================================
   2. I Am The Best — slide 11
   photo panel x=0    y=0   524x1101  (image rotated -78.59 inside the frame,
                                       pre-rendered to the asset)
   title       x=644  y=224 w=728  104px Cinzel
   label       x=656  y=347 w=646   33px
   copy        x=653  y=448 w=672   32px, level 1, no bullet
   card 1      x=1402 y=216 466x325, tilted -9.02
   card 2      x=1402 y=563 466x325, tilted +4.72
   ornament    x=1513 y=0   407x324  (the shared .ornament-tr asset)
   ========================================================================== */

/* Columns are the source column *starts*, so each child lands on its own x:
     0      photo panel   (bled left, right edge at 24.41%)
     31.45% title / copy  ((644 - 108) / 1704)
     72.65% cards         (source starts at 75.94% but its 27.35% width would
                           then hang 3.3% past the gutter — see below) */
.ap-best__page {
  display: grid;
  grid-template-columns: 31.45% 41.20% 27.35%;
  column-gap: 0;
  align-items: center;
}

/* Without the cover panel the band is two columns and the words take the left.
   Measured off the supplied design: the copy runs 0 -> 62.7% of the content
   box and the cards 64.1% -> 95.1%. The trailing 4.9% is real -- the cards
   stop inboard of the right edge, where the corner floral comes down.

   Held above the breakpoint below, which collapses this band to one column for
   every arrangement. Its own max-width reset is a single class and this one is
   two, so unscoped these caps would outlive it and strand the copy on a phone. */
@media (min-width: 1025px) {
  .ap-best__page--no-panel {
    grid-template-columns: 64.10% 30.99%;
  }

  .ap-best__page--no-panel .ap-best__label,
  .ap-best__page--no-panel .ap-best__copy {
    max-width: calc(var(--cw) * 0.60400);  /* 653 / 1081 measured */
  }
}

/* The panel used to run to the left edge of the viewport, which is what the
   slide does — `margin-left: calc(-1 * var(--cl))` pulled it back out of the
   gutter and its width carried the --cl term to cover the distance.

   Now held to the container instead, on request: it starts on the content
   box's left edge like everything else on the page, and keeps the source's
   own width of 24.41% of the content (x=524 on the canvas). The band is the
   only thing on this page that bled, so nothing else has to change with it —
   and .ap-section still clips, so the tilted cards are unaffected. */
.ap-best__photo {
  position: relative;
  margin: 0;
  width: calc(var(--cw) * 0.24413);
  justify-self: start;
  align-self: stretch;
  min-height: 100%;
}

.ap-best__photo img {
  width: 100%;
  height: 100%;
  min-height: 26rem;
  object-fit: cover;
  object-position: center;
}

/* The display face rather than the engraved one, on request. Note what that
   does to the weight below: the theme loads Cinzel Decorative at 700 only, so
   the 400 declared here has no face to resolve to and the browser sets the
   line in the 700 it has. The declaration is left as it was rather than
   rewritten to 700, because it is the weight the source measures and changing
   it would move nothing on the page.

   Shared with the same band on author-publisher, which prints the same title. */
.ap-best__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--ap-step-h1-best);
  font-weight: 400;
  line-height: 1.23;
  letter-spacing: -0.048em;   /* source spc="-374" at 78pt */
  color: var(--c-ink);
}

/* Source sets the label and the copy in a 672-wide box, narrower than the
   728 the heading gets. */
.ap-best__label {
  margin: clamp(0.2rem, 0.7vw, 0.6rem) 0 0;
  max-width: calc(var(--cw) * 0.39437);
  font-size: var(--ap-step-eyebrow);
  line-height: 1.2;
  color: var(--c-ink);
}

.ap-best__copy {
  margin-top: clamp(1rem, 3.57vw, 2.9rem);
  max-width: calc(var(--cw) * 0.39437);
}

/* Card centres are 347.3 apart against a 325.1 card, so the cards clear each
   other by 4.8% of a card width. The offset is a margin rather than a flex
   `gap`: a percentage row-gap resolves against the container's own height,
   which here is content-derived, so it would collapse to zero. */
.ap-best__cards,
.ap-making__cards {
  display: flex;
  flex-direction: column;
}

.ap-best__cards .ap-card-slot + .ap-card-slot,
.ap-making__cards .ap-card-slot + .ap-card-slot { margin-top: 4.8%; }

.ap-best__cards .ap-card-slot:first-child .ap-card,
.ap-making__cards .ap-card-slot:first-child .ap-card { transform: rotate(-9.02deg); }

.ap-best__cards .ap-card-slot:last-child .ap-card,
.ap-making__cards .ap-card-slot:last-child .ap-card { transform: rotate(4.72deg); }

/* ==========================================================================
   3. Woven Heritage Textiles — slide 12
   floral      x=0    y=0   903x1080 at 20% opacity
   title       x=117  y=248 w=806   80px Cinzel, two lines
   label       x=117  y=439 w=709   32px bold, film title italic
   bullet      x=117  y=582 w=616   32px
   book cover  x=942  y=108 514x673, rotated -6.84
   tablet      x=1251 y=215 599x819 (device 468.4x710.5 within it)
   still       x=1360 y=344 418x557, cropped 16.0%..90.9%
   ========================================================================== */

/* Source draws the floral 960x1165 inside a 903x1080 frame and offsets it, so
   only x 5.9%..100% and y 3.6%..96.4% of the artwork shows. The asset is
   pre-cropped to that window, which is why it can simply be pinned left. */
.ap-textiles::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--cl) - var(--cw) * 0.06338);   /* frame starts at canvas x=0 */
  width: calc(var(--cw) * 0.52993);              /* 903 / 1704 */
  opacity: 0.2;
  background: url('../../images/author-publisher-floral-left.png') left top / 100% 100% no-repeat;
  background-image: var(--section-bg, image-set(
    url('../../images/author-publisher-floral-left.webp') type('image/webp'),
    url('../../images/author-publisher-floral-left.png')  type('image/png')
  ));
  pointer-events: none;
}

.ap-textiles__page { position: relative; z-index: 1; }

.ap-textiles__title { margin-bottom: clamp(0.4rem, 1.1vw, 0.9rem); }

/* Book cover and tablet overlap inside one box carrying the source cluster's
   860.4 x 870.7 proportions, so the pair scales together. */
.ap-textiles__cluster {
  position: relative;
  aspect-ratio: 860.4 / 870.7;
}

.ap-textiles__cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 59.8%;
  margin: 0;
  transform: rotate(-6.84deg);
  box-shadow: -8px 12px 26px rgba(107, 94, 84, 0.28);
}

.ap-textiles__device {
  position: absolute;
  left: 45.6%;
  top: 18.4%;
  width: 54.4%;
}

/* ==========================================================================
   4. The Making Of — slide 13
   background  the same floral, flipped and cropped to y 45.4%..91.7%
   title       x=108  y=192 w=806   80px Cinzel
   label 1     x=117  y=324 w=709   32px bold
   bullet 1    x=117  y=387 w=922   32px
   label 2     x=117  y=670 w=709   32px bold
   bullet 2    x=117  y=735 w=880   32px
   card 1      x=1105 y=90  563x393, tilted -9.02
   card 2      x=1105 y=510 563x393, tilted +4.72
   ========================================================================== */

.ap-making {
  background: #ebebeb url('../../images/author-publisher-floral-wide.jpg') center top / cover no-repeat;
  background-image: var(--section-bg, image-set(
    url('../../images/author-publisher-floral-wide.webp') type('image/webp'),
    url('../../images/author-publisher-floral-wide.jpg')  type('image/jpeg')
  ));
}

.ap-making__title { margin-bottom: clamp(0.5rem, 1.7vw, 1.35rem); }

.ap-making__cards { max-width: calc(var(--cw) * 0.33040); }   /* 563 / 1704 */

/* ==========================================================================
   5. Aai's Recipes / Tell Me A Story — slide 14
   ornament TL x=-100 y=-22  300x455
   ornament TR x=1499 y=-74  427x450
   leaf        x=1387 y=260  859x864 at 18% opacity
   title 1     x=108  y=151 w=806   80px Cinzel
   label       x=108  y=246 w=795   32px bold
   bullet 1    x=117  y=370 w=728   32px
   title 2     x=108  y=691 w=768   80px Cinzel
   bullet 2    x=117  y=802 w=728   32px
   card 1      x=924  y=83  518x601
   card 2      x=1316 y=326 507x590, caption inside its lower margin
   ========================================================================== */

/* .ap-aai__orn-tl and -tr are gone — the band no longer emits the two corner
   florals. Their rules went with them rather than being left to match nothing.
   .ap-aai__leaf below is a different thing and stays: it sits inside the photo
   cluster and is what the two cards are arranged against. */

.ap-aai__page { position: relative; z-index: 1; }

.ap-aai__title { margin-bottom: clamp(0.3rem, 0.8vw, 0.65rem); }

/* The page-title face, for a band that opens a page rather than sitting inside
   one — what .display-title sets in site.css. Restated here rather than added
   as a second class, because site.css is loaded first and .ap-h2 would win on
   source order alone.

   The two tokens are the same ones .display-title uses, so the sizes stay in
   step; only the values that are literals there are literals here. The
   letter-spacing has to be named: .ap-h2 tightens to -0.048em and the display
   face is set normal. */
.ap-aai__title--display {
  margin-bottom: clamp(0.85rem, 2.14vw, 1.72rem);
  font-family: var(--font-display);
  font-size: var(--step-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: normal;
}

.ap-aai__cluster {
  position: relative;
  aspect-ratio: 899.14 / 833.32;
}

/* The leaf is drawn 859 wide on the canvas but the canvas only shows 533 of
   it, and the asset is cropped to that. 533/1704 of the content width is
   60.4% of this cluster — the earlier 95.5% was sized to the *uncropped*
   drawing, which made it half again too big and upscaled the file. */
.ap-aai__leaf {
  position: absolute;
  left: 51.5%;
  top: 21.2%;
  width: 60.4%;
  opacity: 0.18;
  pointer-events: none;
}

.ap-aai__leaf img { width: 100%; }

.ap-aai__card-1,
.ap-aai__card-2 { position: absolute; }

.ap-aai__card-1 { left: 0;     top: 0;     width: 57.6%; }
.ap-aai__card-2 { left: 43.6%; top: 29.3%; width: 56.4%; }

/* The caption lives inside this card's lower margin in the source, so the
   card's own bottom padding drops to the 6.72% that sits below the caption;
   the caption itself supplies the rest of the 24.88% margin. */
.ap-aai__card-2 .ap-card { padding-bottom: 6.72%; }

/* --------------------------------------------------------------------------
   Responsive — breakpoints match the live site: tablet 1024, mobile 767.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* Slide 10 leads with the tablet, as the slide does. */
  .ap-hero .media-col { order: 0; }
  .ap-hero .ap-tablet { margin-inline: auto; }
  /* Slide 11 collapses to one column: the panel becomes a banner, the copy
     follows, and the cards sit side by side underneath. */
  .ap-best__page {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 5vw, 3rem);
  }

  .ap-best__label,
  .ap-best__copy { max-width: none; }

  /* The panel is a tall portrait; forced into a wide banner it crops down to a
     meaningless sliver, so in one column it keeps its shape and centres. */
  .ap-best__photo {
    margin-left: auto;
    margin-right: auto;
    width: auto;
    max-width: 22rem;
  }

  .ap-best__photo img { height: 30rem; min-height: 0; object-position: center 32%; }

  /* Side by side, with enough inline room that the tilted corners are not
     shaved off by the section's clip. */
  .ap-best__cards {
    flex-direction: row;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 3rem);
    align-items: center;
    padding-inline: 1.7rem;
  }

  /* The spread photo is only 350px native (ppt/media/image64.jpeg), so the
     slot is capped where the card's 90.6% photo window still lands under it. */
  .ap-best__cards .ap-card-slot { flex: 1 1 0; max-width: 23.5rem; }
  .ap-best__cards .ap-card-slot + .ap-card-slot { margin-top: 0; }

  /* Slide 12: the book/tablet cluster follows the copy and is capped so it
     does not fill a narrow column. */
  .ap-textiles .media-col { order: 2; }
  .ap-textiles__cluster { max-width: 34rem; margin-inline: auto; }
  .ap-textiles::before { width: 100%; opacity: 0.13; }

  .ap-making .media-col { order: 2; }
  .ap-making__cards { max-width: 27rem; margin-inline: auto; }

  .ap-aai .media-col { order: 2; }
  .ap-aai__cluster { max-width: 34rem; margin-inline: auto; }
}

@media (max-width: 767px) {
  .ap-hero .ap-tablet { margin-left: auto; }

  /* At 375 the -9.02deg card's corners reach 2px past the gutter at full
     column width, so the pair is capped short of it. */
  .ap-making__cards { max-width: 18rem; }

  .ap-best__photo img { height: 24rem; }

  /* Two tilted cards side by side get too small below this width. */
  .ap-best__cards { flex-direction: column; }
  .ap-best__cards { padding-inline: 0; }
  .ap-best__cards .ap-card-slot { flex: 0 0 auto; width: 18rem; max-width: 100%; margin-inline: auto; }
  .ap-best__cards .ap-card-slot + .ap-card-slot { margin-top: clamp(1.5rem, 6vw, 2.5rem); }

}