/*
Theme Name: Bootesaz
Theme URI: https://bootesaz.com
Author: Albert Bootesaz
Description: Custom lightweight theme for albertbootesaz — hand-built, single stylesheet, single script, no plugins.
Version: 1.2.2
Requires PHP: 8.0
Text Domain: bootesaz
*/

:root {
    --content-width: 1324px;
    --sides-gap: 12px;
            --r: clamp(0, tan(atan2(100vw - 844px, 356px)), 1);
        --f: calc(0.75 + 0.25 * var(--r));

    /* ===============================================================
       THEME COLORS — tweak live in DevTools:
         theme.set('yellow', '#e63946')   // change one
         theme.list()                     // see them all
         theme.reset()                    // back to defaults
         theme.logoMask(true|false)       // recolorable masked logo
       =============================================================== */
    --t-bg: #f0eeeb54;                  /* page background */
    --t-yellow: #fee101;                /* diagonal band */
    --t-logo: #2d594a;                  /* AB logo mark (when masked) */
    --t-highlight: #2d594a;             /* jacket text box + goo blob */
    --t-highlight-text: #ffffff;        /* jacket text */
    --t-persian-bar: #91919117;         /* top strip behind the Persian menu */
    --t-heading: #000000;               /* hero heading */
    --t-tagline: #555555;               /* "U.S. and Middle East Expert" */
    --t-logo-albert: #555555;           /* "Albert" */
    --t-logo-bootesaz: #000000;         /* "Bootesaz" */
    --t-menu: #555555;                  /* nav link text */
    --t-menu-hover: #000000;            /* nav link hover */
    --t-menu-underline: #fee101;        /* nav underline */
    --t-menu-underline-hover: #0065b3;  /* nav underline hover */

}

*, *::before, *::after {
    box-sizing: border-box;
}
figure,figcaption,p{
    margin: 0;
}
html {
    /* Reserve scrollbar gutter so its appearance never shifts layout. */
    scrollbar-gutter: stable;

    /* First-paint mask: invisible 0-100ms, fades in 100-200ms. By 200ms
       the font-display: optional decision is locked, so no swap can
       happen mid-fade. `backwards` applies the from-state during the
       100ms delay. */
    animation: page-reveal 100ms ease-out 100ms backwards;
}


@keyframes page-reveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}



.highlight {
font-family: 'Tiempos Text';
    font-size: 30px;
    --highlight-padding-y: 5px;
    --highlight-padding-x: 12px;
    --highlight-line-height: 1.6;
    --highlight-color: var(--t-highlight);
    --highlight-text-color: var(--t-highlight-text);
    display: inline;

  background: var(--highlight-color);
  color: var(--highlight-text-color);
  padding: var(--highlight-padding-y) var(--highlight-padding-x);
  line-height: var(--highlight-line-height);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  /* Rounded corners fallback: iOS Safari often drops the SVG `goo` filter
     (so corners render sharp). border-radius keeps them rounded there; under
     the goo (Chrome/Firefox) it's harmlessly smoothed into the blob. */
  border-radius: 10px;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='goo'><feGaussianBlur in='SourceGraphic' stdDeviation='4'/><feColorMatrix mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 32 -12'/><feComposite in='SourceGraphic' operator='atop'/></filter></svg>#goo");
}


/* ===============================================================
   SELF-HOSTED FONTS
   ---------------------------------------------------------------
   Layout assumed: site root has /fonts/ alongside /css/.
   This sheet lives at /css/test.css and reaches the fonts via
   fonts/*.woff2.

   Loading strategy:
     - WOFF2 only (universal support).
     - The body face's Regular weight is preloaded from the HTML
       head so the network fetch begins during HTML parsing,
       in parallel with this CSS file.
     - All other faces are discovered when CSS parses; they
       download lazily as elements that match them appear.
     - font-display: optional on text faces — the browser commits
       to either the web font or the metric-matched fallback
       within ~100ms and never swaps mid-session, killing FOUT.
     - font-display: block on the icon font — better to show
       nothing for a moment than broken glyph chars.
   =============================================================== */

@font-face {
    font-family: Tiempos Headline;
    font-style: normal;
    font-weight: 700;
    src: url("fonts/TiemposHeadlineWeb-Bold.woff2") format("woff2");
    /*ascent-override: 85%;*/
    descent-override: 45%;
}

@font-face {
    font-family: Tiempos Text;
    font-style: normal;
    font-weight: 400;
    src: url("fonts/TiemposTextWeb-Regular.woff2") format("woff2");
    descent-override: 37%;
}

@font-face {
    font-family: Tiempos Text;
    font-style: italic;
    font-weight: 400;
    src: url("fonts/TiemposTextWeb-RegularItalic.woff2") format("woff2");
    descent-override: 37%;
}

/* Pelak — the Farsi face, same files + settings as notoantisemitism.org */
@font-face {
    font-family: "Pelak";
    src: url("fonts/Pelak-Black.woff2") format("woff2");
    font-weight: 900;
    text-rendering: optimizeLegibility;
    font-display: block;
}

@font-face {
    font-family: "Pelak";
    src: url("fonts/Pelak-Bold.woff2") format("woff2");
    font-weight: 700;
    text-rendering: optimizeLegibility;
    font-display: block;
}

@font-face {
    font-family: "Pelak";
    src: url("fonts/Pelak-light.woff2") format("woff2");
    font-weight: 300;
    text-rendering: optimizeLegibility;
    font-display: block;
}

@font-face {
    font-family: "Pelak";
    src: url("fonts/Pelak-Regular.woff2") format("woff2");
    font-weight: 400;
    text-rendering: optimizeLegibility;
    font-display: block;
}






a {
    text-decoration: none;
}

/* instant taps on touch devices: no grey/blue flash layer over links or
   buttons, and no double-tap-zoom wait before the tap fires */
html {
    -webkit-tap-highlight-color: transparent;
}
a, button, .nav-toggle, section.videos > article {
    touch-action: manipulation;
}

/* clicking a video card scrolls the player into view — land it 12px
   below the sticky header instead of underneath it. Global on purpose:
   the videos page will reuse the same feature (script.js injects the
   player as #video everywhere). --header-height is measured live by
   script.js, so this tracks the real header at every viewport. */
#video {
    scroll-margin-top: calc(var(--header-height) + 12px);
}

h1, h2, h3, h4, h5, h6, ol, ul {
    margin: 0;
    padding: 0;
}

:is(ol, ul) li {
    list-style: none;
}

html, body {
    padding: 0;
    margin: 0;
    background: #ffffff;
    /* nothing may cause sideways scroll, at any width. `clip` (not
       `hidden`) so no scroll container is created and sticky elements
       inside keep sticking to the viewport. */
    overflow-x: clip;
    /* iOS/Android accessibility text scaling must not inflate our px
       sizes — authored sizes are final. (Display Zoom is different: it
       shrinks the reported viewport and cannot be overridden by a page.) */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'Tiempos Text',Georgia,serif;
    font-size: 17px;

    & > * {
        display: grid;
        grid: none / auto 1fr;
        grid-auto-flow: column dense;
        align-items: center;
        padding: 0 clamp( var(--sides-gap), calc((100vw - var( --content-width)) / 2), 100vw);
        /* height: clamp(80px, calc(100vw / 12),90px); */
        /*column-gap: clamp(12px, 3vw, 36px);*/
    }

    & > nav[aria-label=secondary]
    {
        background: transparent;
        position: sticky;
        top: var(--header-height);
        margin-bottom: calc(var(--header-nav-height) * -1);
        transform: translateY(calc(-1 * var(--header-height) + var(--header-nav-height)));
        z-index: 2;
        pointer-events: none;

/*        &:before {
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            background: #d2a6a64f;
        }*/

        & > *
        {
            pointer-events: auto;
        }

        & :is(ol, ul) {
            display: grid;
            grid: none / 1fr;
            grid-auto-flow: column dense;
            grid-column-end: none;
            position: relative;
            top: 44px;

            & li {
            list-style: none;
            margin: 20px 3px 0px 3px;

                & a {
                    gap: 12px;
                    display: grid;
                    grid: auto / auto-flow;
                    align-items: center;
                    color: #555555;
                    font-size: 14px;
                    grid-auto-flow: column dense;
                    justify-content: center;
                    padding: 3px 4px;
                    border-radius: 3px;
                    background: #f0f0ef;
                    isolation: isolate;

                    &:before{
                        content: "";
                        width: 20px;
                        height: 20px;
                    }

                    &.x:before{
                        background: url(images/icons.svg#xFilled-squircle) center / contain no-repeat;
                    }
                    &.youtube:before{
                        background: url(images/icons.svg#youtube-squircle) center / contain no-repeat;
                    }
                    &.instagram:before{
                        background: url(images/icons.svg#instagram-squircle) center / contain no-repeat;
                    }
                }
            }
        }
    }
}


/***** Top Header *****/

@property --reveal {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@keyframes header-bg-reveal {
  0%   { --reveal: calc(-1 * var(--header-nav-height)); }
  5%   { --reveal: 52px; }
  10%  { --reveal: 80px; }
  85%  { --reveal: 160px; }
  95%  { --reveal: 190px; }
  100% { --reveal: 200px; }
}

@property --border-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@keyframes header-border-fade {
  0%   { --border-opacity: 0; }
  80%  { --border-opacity: 0; }
  100% { --border-opacity: 1; }
}


body > header {
  position: sticky;
  top: 0;
  margin-top: var(--header-nav-height);
  z-index: 2;
  pointer-events: none;
  background: transparent;
  align-items: start;
  will-change: box-shadow;
  transition: box-shadow 0.3s ease-out;

  & > * {
    pointer-events: auto;
  }

  &::after{

        content: '';
        position: absolute;
        z-index: -3;
        inset: 0;
        background: var(--t-persian-bar);
        height: var(--header-nav-height);
        top: calc(-1 * var(--header-nav-height));
    }
  

  &::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: #fff;
    --reveal: 0px;
    --border-opacity: 0;

    mask-image: linear-gradient(
      to bottom,
      white 0,
      white calc(var(--reveal) - 40px),
      transparent var(--reveal),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      white 0,
      white calc(var(--reveal) - 40px),
      transparent var(--reveal),
      transparent 100%
    );

    box-shadow:
      inset 0 2px 0 0 rgba(255, 255, 255, var(--border-opacity)),
      0 30px 40px rgba(0, 0, 0, 0);

    transition: box-shadow 300ms ease-out;

    animation:
      header-bg-reveal linear both,
      header-border-fade linear both;
    animation-timeline: scroll(root block), scroll(root block);
    animation-range: 0 160px, 0 var(--header-nav-height);
  }


html.scrolled-past-reveal &
{
      box-shadow: 0 30px 40px rgba(0, 0, 0, 0.07);
}


/*    html.scroll-down &
    {
        &::before {
          border-top: 2px solid black;
        }
    }*/

    & > a {
        display: grid;
        gap: 3px;
        margin: 30px 0;


        & img {
            width: 75px;
            transform: scale(1);
            fill: black;
            order: -1;
            align-self: center;
        }

        & h1 {
            font-family: 'Tiempos Headline', Georgia, serif;
            font-weight: 600;
            max-width: min-content;
            line-height: 32px;
            grid-column-start: 2;
            grid-row: 1;

            /* "Albert" / "Bootesaz" as spans — replaces :first-line, which
               iOS Safari does not apply to wrapped inline text. */
            & > .lg-albert {
                display: block;
                font-size: 24px;
                color: var(--t-logo-albert);
            }
            & > .lg-bootesaz {
                display: block;
                font-size: 42px;
                color: var(--t-logo-bootesaz);
            }
        }

        & h2 {
            align-self: start;
            font-weight: 400;
            font-size: 14px;
            color: var(--t-tagline);
            text-wrap: nowrap;
            grid-column-start: 2;
            grid-row: 2;
            line-height: 0.4;
        }
    }

    & nav {
        grid-row: 2;
        position: relative;
        top: 30px;

        &:not([aria-label="primary"])
        {
            top: 0px;

            & a{
                color: #000000;
                font-size: 15px;
                display: inline-flex;
                align-items: center;
                gap: 7px;

                &:before {
                    content: '';
                    width: 21px;
                    aspect-ratio: 7 / 4;
                    background: url(images/persian-icon.svg) center / cover no-repeat;
                    border-radius: 2px;
                }
            }
        }











        & :is(ol, ul) {
            display: grid;
            grid: none / auto-flow max-content;
            justify-content: end;
            margin-top: 12px;
            --gap: calc(2rem * var(--f));             /* space between text and underline — set this */
            --thickness: 3px;       /* underline thickness */
            --color: var(--t-menu-underline);
            --color-hover: var(--t-menu-underline-hover);
            --fade: 250ms;          /* fade duration */

            list-style: none;
            margin: 0;
            padding: 0;
            gap: var(--gap);

            & li {
                list-style: none;
                /* background: red; */
                padding: 5px 0px;
                /* border-bottom: 1px solid white; */

                & a {
                    gap: 6px;
                    display: grid;
                    grid: auto / auto-flow;
                    align-items: center;
                    height: 100%;
                    color: var(--t-menu);
                    border-radius: 5px;
                    padding: 5px 11px;
                    line-height: 0;
                    justify-content: center;
                    align-content: center;
                    font-size: 22px;
                    font-family: 'Tiempos Headline', Georgia, serif;

                    position: relative;
                    padding-bottom: 7px; 
                    text-decoration: none;

                    &::after
                    {
                        content: "";
                        position: absolute;
                        left: 8%;
                        right: 0;
                        bottom: 0;
                        height: var(--thickness);
                        border-radius: 999px;
                        background: var(--color);
                        transition: background-color var(--fade) ease;
                        max-width: 84%;
                        top:140%;
                    }

                    &:hover
                    {
                        color: var(--t-menu-hover);

                        &::after{
                            background: var(--color-hover);
                        }
                        
                    }
                }

                &:hover > :is(ol, ul) {
                    display: grid;
                    grid: auto-flow max-content / none;
                    background: pink;
                    position: absolute;
                    transform: translate3d(-10px, 10px, 0);

                    & li {
                        background: pink;

                        & > a {
                            color: #000;
                        }
                    }
                }
            }

            & > li > a:not(:only-child):after {
                content: '';
                width: 16px;
                aspect-ratio: 1/1;
                background: #919191;
                display: inline-block;
                mask: url(images/icons.svg#circleFillArrow-down) center / contain no-repeat;
                -webkit-mask: url(images/icons.svg#circleFillArrow-down) center / contain no-repeat;
                justify-self: right;
            }

            & :is(ol, ul) {
                display: none;
            }
        }
    }

    & div {
        position: sticky;
        width: inherit;
        top: 0;
        margin: calc(-1 * var(--header-nav-height)) 0;
        height: var(--header-nav-height);
        z-index: -2;
        display: grid;
        align-items: center;
        align-content: center;
        justify-content: right;
        grid: none / auto-flow dense;
        grid-column: 1/3;
        padding: unset;
        padding: 0 clamp( var(--sides-gap), calc((100vw - var(--content-width)) / 2), 100vw);
        grid-auto-flow: column dense !important;
        padding: unset;
        grid: none / 1fr auto;
        grid-column: 1 / -1;
        justify-items: end;
    }

}
/***** //Top Header *****/

/* the hero section — was `section.home`; the class now lives on <body>
   (WordPress-style body class), so the hero is the home page's first
   section. Kept as FLAT selectors on purpose: they must stay at the same
   specificity as the responsive overrides in the media queries below,
   which win by source order. */
body.home > main > section:first-of-type {
    display: grid;
    margin-top: calc(-0.5 * calc(var(--header-height) + var(--header-nav-height)));
    grid-column: 1 / -1;
}

body.home > main > section:first-of-type > article:first-of-type {
    display: grid;
    grid-column: 1 / -1;
    grid: none / 280px 1fr;
    align-items: center;
    width: 100%;
    height: auto;
    position: relative;

    &:before
    {
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
    }

    & > header
    {
        position: relative;
        width: 20vw;
        z-index: 1;
        top: 70px;

        & hgroup > h1
        {
            font-size: 24px;
            white-space: nowrap;
            margin-bottom: 18px;
            color: var(--t-logo);
            position: relative;
            top: -8px;

            /* above the mobile breakpoint the highlight box turns
               white (mobile keeps its green box + white text) */
            @media (min-width: 845px) {
                --highlight-color: #ffffff;
            }
        }

        & hgroup > h2
        {
            font-size: 24px;
            white-space: nowrap;
            position: relative;
            left: -5;
            font-family: 'Tiempos Headline';
            color: #fff;
            text-shadow: 1px 1px 0 #004a83;
        }

        & hgroup > h3
        {
            font-size: 18px;
            color: #0065b3;
            margin-top: 12px;
        }
    }

    & > figure
    {
        margin: 0;
        display: inline-grid;
        justify-content: center;
        right: 0;
        position: relative;

        & > img
        {
            mix-blend-mode: multiply;
            max-width: 100%;
            pointer-events: none;
        }
    }
}

body > main{

    & > section
    {
        & article
        {
            position: relative;
        }

        & article.diagonal
        {
              /* min(), not clamp(7vw, 10vw, 140px): when a clamp's minimum
                 outgrows its maximum, the minimum wins — 7vw > 140px on
                 huge viewports / zoom-out broke the cut geometry */
              --diagonal-cut: min(10vw, 140px);               /* depth of the cut on the left side */
              --diagonal-overlap: 52px;    /* how much to overlap the article above */
              --diagonal-color: var(--t-yellow);     /* the article's background */

              position: relative;
              padding-top: calc(var(--diagonal-cut) + 2rem);
              padding-bottom: 20px;
              isolation: isolate;

              display: grid;
              grid: none / 1.47fr 1fr;
              grid-gap: calc(var(--diagonal-cut) - 70px);

              @media (min-width: 1131px) {
                  grid-gap: calc((var(--diagonal-cut) - 70px) / 2);
              }


            &:before
            {
                  content: '';
                  position: absolute;
                  top: -24px;
                  left: 50%;
                  transform: translateX(-50%);
                  width: 100vw;
                  /* +24 rebalances the -24px top so the yellow reaches the
                     article's exact bottom — the next section starts flush */
                  height: calc(100% + 24px);
                  background: var(--diagonal-color);
                  z-index: -1;
                  clip-path: polygon(
                    0 var(--diagonal-cut),
                    100% 0,
                    100% 100%,
                    0 100%
                  );
            }

            & > section
            {
                position: relative;
                top: -30px;

                & article
                {
                    & header
                    {
                        & h2, & h2 a{
                            font-family: 'Tiempos Headline', Georgia, serif;
                            font-weight: 700;
                            font-size: clamp(26px, 3vw, 26px);
                            line-height: 1.08;
                            color: #332d00;
                            transition: color 0.2s;

                            &:hover{
                                color:#0064b1;
                            }                    
                        }

                        & p{
                            font-style: italic;
                            font-size: 14px;
                            color: #0065b3;
                            margin: 0;
                        }
                    }

                    & > p{
                        margin: 10px 0 30px 0;
                        font-size: 18px;
                        color: #494949;
                        mix-blend-mode: multiply;

                        & a{
                            font-style: italic;
                            font-size: 15px;
                            color: #0094db;
                            margin-left: 10px;
                            display: inline;
                            font-family: 'Tiempos Headline';
                            white-space: nowrap;
                            transition: color 0.2s;

                            &:hover{
                                color:#ea5f00;
                            }
                        }
                    }


                    & figure{
                        margin: 0;
                        overflow: hidden;
                        width: 100%;
                        height: auto;
                        max-height: 400px;
                        margin-top: 10px;
                        margin-bottom: 10px;

                        & img{
                            width: 100%;
                            height: auto;
                            object-fit: contain;
                            filter: saturate(0.5);
                        }
                    }
                }

                & h3
                {
                    font-family: 'Tiempos Text';
                    font-weight: 900;
                    font-style: italic;
                    color: #f8f7f3;
                    font-size: 20px;
                    line-height: 1.1;
                    letter-spacing: -.01em;
                    margin: 0 0 22px;
                    padding-bottom: 14px;
                    border-bottom: 1px solid rgba(0, 0, 0, .22);
                }
            }
        }
    }

/*    &:before{
        content: "";
        position: absolute;
            background: url(images/def-green-light.svg) top right no-repeat;

     background-size: auto 460px;



        inset: 0;
        background: url(images/def-green-light.svg) top right no-repeat;

background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-origin: padding-box;
background-position-x: 100%;
background-position-y: 0%;
background-repeat: no-repeat;
background-size: 100%;*/

}




/* ===============================================================
   RESPONSIVE SCALING   (everything below this line is new)
   ---------------------------------------------------------------
   Spec:
     >= 1200px  -> elements stay at their full (current) size
     844-1200px -> shrink linearly down to 0.75x as width drops
     <= 844px   -> hold at 0.75x (never smaller) and the .diagonal
                   article collapses to a single column

   Mechanism:
     --r  ramps 0 -> 1 across 844px -> 1200px. The viewport ratio
          (100vw-844px)/356px is unitless, so it is obtained with
          tan(atan2(length,length)) (the standard length/length
          -> number trick) and clamped to [0,1].
     --f  is the size factor 0.75 -> 1.0 built from --r.
          Every responsive value below is simply <current>*var(--f),
          and `scale` is just var(--f).
   =============================================================== */

@media (max-width: 1200px) {

    :root {
        --r: clamp(0, tan(atan2(100vw - 844px, 356px)), 1);
        --f: calc(0.75 + 0.25 * var(--r));
    }

    /* ---- top header: logo lockup ---- */
    body > header > a {
        & h1 {
            line-height: calc(32px * var(--f));

            & > .lg-albert   { font-size: calc(26px * var(--f)); }
            & > .lg-bootesaz { font-size: calc(44px * var(--f)); }
        }
        & h2  { font-size: calc(15px * var(--f)); }
        & img { width: calc(75px * var(--f)); }
    }

    /* ---- top header: primary nav ---- */
    body > header nav :is(ol, ul) {
        gap: calc(2rem * var(--f));

        & > li a { font-size: calc(22px * var(--f)); }
    }

    /* ---- hero article: heading group ---- */
    body.home > main > section:first-of-type > article:first-of-type > header hgroup {
        left: 0;
        position: relative;

        & > h1 { font-size: calc(24px * var(--f)); }
        & > h2 { font-size: calc(24px * var(--f)); }
        & > h3 { font-size: calc(18px * var(--f)); }
    }

    /* ---- secondary (social) nav ----
       top/transform of the nav itself stay bound to the live
       --header-height vars (they already shrink with the header);
       only the fixed inner offsets are scaled here. */
    body > nav[aria-label="secondary"] :is(ol, ul) {
        top: calc(44px * var(--f));
        scale: var(--f);
        transform-origin: right;

        & li {
            margin-top: calc(20px * var(--f));
            
        }
    }

    /* ---- diagonal section: headings + copy ---- */
    body > main > section article.diagonal > section {
        & > header > h3 { font-size: calc(20px * var(--f)); }

        & article > header h2,
        & article > header h2 a { font-size: calc(28px * var(--f)); }

        & article > p { font-size: calc(22px * var(--f)); }
    }

}

@media (max-width: 600px) {
    body > main > section article.diagonal > section {
        & article > header h2,
        & article > header h2 a { font-size: calc(30px * var(--f)); }
    }
}



/* ---- hero portrait (<=1390px) ----
   Goals: shrink the portrait a little (with vw), keep it from drifting to the
   right as it shrinks, and make sure the head never rides under the social
   icons. Overlap already begins at ~1390px, so we cancel the negative pull-up
   that tucks the portrait behind the header — the whole hero drops just enough
   that the head always clears the social row across the entire range. */
@media (max-width: 1390px) {
    body.home > main > section:first-of-type {
       
    }

    body.home > main > section:first-of-type > article:first-of-type > figure {
        justify-self: center;      /* anchor to the right so the heading stays clear */
    }
    body.home > main > section:first-of-type > article:first-of-type > figure > img {
        width: clamp(380px, 44vw, 600px);   /* a touch smaller; scales with vw */
    }

    /* Keep the yellow stuck to the person's bottom across the band. Because the
       cut scales with vw (6vw) and the portrait scales with vw too, a small
       CONSTANT overlap holds the yellow's top edge right at the lower body at
       every width (the old elbow-tracking formula made it swing and gap). */
    body > main > section article.diagonal {
        --diagonal-overlap: 15px;
    }
}


@media (max-width: 1130px) {
    body.home > main > section:first-of-type > article:first-of-type > figure {
        right: 72px;
        justify-self: center;
        margin-bottom: -10px;
    }
}
/* ---- <= 844px: mobile single-column layout ---- */
@media (max-width: 844px) {

    body > header{margin-top:0;}

    /* diagonal: one column (left section on top), full width, gentle cut.
       The 140px cut is far too steep over a narrow viewport — freeze it
       shallow so the right edge no longer rides up high. Also drop the
       desktop pull-up so the yellow no longer rides over the hero text. */
    body > main > section article.diagonal {
        grid-template-columns: 1fr;
        --diagonal-cut: 12vw;        /* steeper diagonal on mobile (more angle) */
        --diagonal-overlap: 25px;
    }
/*    body > main > section article.diagonal:before { top: 0; }

    body > main > section article.diagonal > section { top: 0; }
*/
    /* hero (mobile): keep the desktop SHAPE — person on the right, the
       headings overlaid on its left/jacket, the yellow diagonal cutting the
       person's lower body. figure + header share one grid cell (z-layered). */

    /* let the hero pull up so the head rises near the menu top and blends
       into the background (part of the design) — no margin-top override */

    body.home > main > section:first-of-type > article:first-of-type {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        align-items: center;
        padding-bottom: 0;
    }
    body.home > main > section:first-of-type > article:first-of-type > figure {
        grid-area: 1 / 1;             /* same cell as the header -> layered */
        order: 0;
        justify-self: end;            /* person on the right */
        align-self: end;              /* bottom-anchored so the diagonal cuts its lower body */
        right: 0;
        left: 60px;
        top: 15px;
        width: auto;
        margin: 0;
        overflow: hidden;
        /* no z-index here: a stacking context would isolate the image's
           mix-blend-mode:multiply, making the white photo background show.
           The header's z-index:1 already keeps the text above the portrait. */
    }
    body.home > main > section:first-of-type > article:first-of-type > figure > img {
        width: auto;
        max-width: 100vw;             /* large portrait: head rises to the menu, blends into bg */
    }
    body.home > main > section:first-of-type > article:first-of-type > header {
        grid-area: 1 / 1;             /* overlaid on the person */
        z-index: 1;
        /* wide so the highlight wraps to few lines — but never wider than
           the viewport minus the page padding: the fixed 400px was forcing
           the whole content grid to overflow on <424px phones */
        width: min(200vw, 400px, calc(100vw - 24px));
        justify-self: start;          /* text to the left, over the jacket */
        align-self: center;           /* centered over the jacket; clears the logo */
        top: 60px;
        left: -24px;
    }
    body.home > main > section:first-of-type > article:first-of-type > header hgroup > h1,
    body.home > main > section:first-of-type > article:first-of-type > header hgroup > h2 {
        white-space: normal;          /* wrap instead of overflowing */
    }
    /* size the overlay text so the block fits over the jacket within the
       person's height (otherwise it spills into the yellow below) */
    body.home > main > section:first-of-type > article:first-of-type > header hgroup > h1 {
        font-size: 22px;
        line-height: 1.5;
        margin-bottom: 5px;
        max-width: 50vw;          /* keep the headline narrow + clear of the face */
        background: #2d594a;
        left: 0px;
        top: 20px;
        padding-left: 29px;
        color: #fff;
        font-family: 'Tiempos Headline';
    }
    body.home > main > section:first-of-type > article:first-of-type > header hgroup > h2.highlight {
        font-size: 20px;
        --highlight-line-height: 1.6;
        left: 14px;
        display: none;
    }
    body.home > main > section:first-of-type > article:first-of-type > header hgroup > h3 {
        display: none;
    }
}


/* ===============================================================
   MOBILE MENU  (hamburger + full-screen overlay, <=844px)
   ---------------------------------------------------------------
   The .nav-toggle button and .m-menu overlay are injected by JS
   (see index.html) from the existing nav, so the authored markup
   stays untouched. Look + animation mirror the reference:
   a clip-path reveal from the top into a green overlay with big
   serif links that fade in staggered, فارسی, then social icons.
   =============================================================== */

.nav-toggle { display: none; }   /* shown only on mobile */
.m-menu     { display: none; }   /* exists only for mobile */

@media (max-width: 844px) {

    /* hide the desktop primary nav + the floating social icons —
       both now live inside the overlay */
    body > header nav[aria-label="primary"] { display: none; }
    body > nav[aria-label="secondary"]      { display: none; }
    /* mobile header = just the logo + the hamburger (فارسی lives in the overlay) */
    body > header > div { display: none; }

    /* ---- hamburger: two lines (Apple-style) ---- */
    .nav-toggle {
        display: flex; position: fixed; z-index: 60;
        top: 36px; right: clamp(20px, 8vw, 36px);
        width: 46px; height: 46px;
        align-items: center; justify-content: center;
        background: transparent; border: 0; cursor: pointer; padding: 0;
    }
    .nav-toggle span,
    .nav-toggle span::before,
    .nav-toggle span::after {
        content: ""; position: absolute;
        width: 26px; height: 2px; border-radius: 2px;
        transition: transform .35s ease, opacity .2s ease, background .3s ease;
    }
    .nav-toggle span { background: transparent; }   /* no middle bar -> only two lines */
    .nav-toggle span::before,
    .nav-toggle span::after { background: #0a0a0a; }
    .nav-toggle span::before { transform: translateY(-4px); }
    .nav-toggle span::after  { transform: translateY(4px); }

    /* ---- overlay ---- */
    .m-menu {
        display: flex; flex-direction: column;
        position: fixed; inset: 0; z-index: 55;
        background: var(--t-yellow); color: #000;
        padding: 150px clamp(26px, 8vw, 60px) 44px;
        pointer-events: none; overflow-y: auto;
        overscroll-behavior: contain;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        /* visibility flips AFTER the clip-path reveal collapses — while
           hidden, iOS/Android can't sample the overlay's colour for the
           browser toolbars, so no tint lingers after the menu closes */
        visibility: hidden;
        /* CLOSING timing: a gentler curve than the opening one — the old
           (.76, 0, …) ease sat nearly still for ~0.3s before the reverse
           reveal visibly started; this starts in about a third of that */
        transition: clip-path .5s cubic-bezier(.45, 0, .25, 1), visibility 0s .55s;
    }
    .m-menu a { color: #000; text-decoration: none; }

    .m-links { display: flex; flex-direction: column; gap: clamp(8px, 2.4vh, 18px); }
    .m-links a {
        font-family: 'Tiempos Headline', Georgia, serif; font-weight: 700;
        font-size: clamp(34px, 9vw, 52px); line-height: 1.05; letter-spacing: -.01em;
        opacity: 0; transform: translateY(24px);
        /* closing: fade out IN PLACE — the transform only snaps back down
           after the fade ends (0s duration, .45s delay), so the links never
           visibly slide down. The open state overrides with the rise. */
        transition: opacity .3s ease, transform 0s .45s, color .2s;
    }
    .m-links a:hover { color: var(--t-menu-underline-hover); }

    .m-lang {
        margin-top: 26px; font-size: 18px;
        font-family: 'Pelak';
        font-weight: 400;
        display: inline-flex; align-items: center; gap: 9px;
        opacity: 0; transition: opacity .4s ease .15s;
    }
    .m-lang::before {
        content: '';
        width: 24px;
        aspect-ratio: 7 / 4;
        background: url(images/persian-icon.svg) center / cover no-repeat;
        border-radius: 2px;
    }

    .m-social {
        display: flex; gap: 20px; margin-top: auto; padding-top: 40px;
        opacity: 0; transform: translateY(18px);
        /* same close-in-place trick as .m-links a */
        transition: opacity .3s ease, transform 0s .45s;
    }
    .m-social a { width: 30px; height: 30px; background: #0a0a0a; opacity: .9; }
    .m-social a:hover { opacity: 1; background: var(--t-menu-underline-hover); }
    .m-social a.yt { -webkit-mask: url(images/icons.svg#youtube-squircle) center/contain no-repeat;   mask: url(images/icons.svg#youtube-squircle) center/contain no-repeat; }
    .m-social a.ig { -webkit-mask: url(images/icons.svg#instagram-squircle) center/contain no-repeat; mask: url(images/icons.svg#instagram-squircle) center/contain no-repeat; }
    .m-social a.x  { -webkit-mask: url(images/icons.svg#xFilled-squircle) center/contain no-repeat;    mask: url(images/icons.svg#xFilled-squircle) center/contain no-repeat; }

    /* ---- OPEN state (class on <html>) ---- */
    /* scroll lock on <html> ONLY: overflow:hidden on <body> would turn
       body into a scroll container, re-anchoring the sticky header to
       body's top — off-screen when scrolled — which made the header
       vanish in a flash the moment the menu was opened */
    html.m-open { overflow: hidden; }
    html.m-open .m-menu {
        pointer-events: auto; visibility: visible;
        /* OPENING keeps the original dramatic reveal */
        transition: clip-path .6s cubic-bezier(.76, 0, .24, 1), visibility 0s 0s;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 142%);
    }
    html.m-open .m-links a {
        opacity: 1; transform: none;
        transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1), color .2s;
    }
    html.m-open .m-links a:nth-child(1) { transition-delay: .16s; }
    html.m-open .m-links a:nth-child(2) { transition-delay: .22s; }
    html.m-open .m-links a:nth-child(3) { transition-delay: .28s; }
    html.m-open .m-links a:nth-child(4) { transition-delay: .34s; }
    html.m-open .m-links a:nth-child(5) { transition-delay: .40s; }
    html.m-open .m-lang,
    html.m-open .m-social {
        opacity: 1; transform: none;
        transition: opacity .4s ease .46s, transform .5s ease .46s;
    }
    html.m-open .nav-toggle span { background: transparent; }
    html.m-open .nav-toggle span::before { transform: rotate(45deg); background: #0a0a0a; }
    html.m-open .nav-toggle span::after  { transform: rotate(-45deg); background: #0a0a0a; }
}


/* ===============================================================
   DIAGONAL POSITION — driven live by JS (pinDiagonal in index.html)
   ---------------------------------------------------------------
   --diagonal-top is measured on every resize/zoom so the diagonal's
   top lands exactly 52px above the portrait's REAL rendered bottom,
   at any size and at any browser zoom. It's applied as a (negative)
   margin-top — not `top` — so the content below stays flush and no
   gap can ever appear under the diagonal. Falls back to the CSS
   overlap until the script runs.
   =============================================================== */
body > main > section article.diagonal {
    margin-top: var(--diagonal-top, calc(var(--diagonal-overlap, 52px) * -1));
}


/* ===============================================================
   RECOLORABLE LOGO (design aid) — toggle with theme.logoMask(true)
   ---------------------------------------------------------------
   Paints the AB mark as a flat --t-logo shape (CSS mask) over the
   existing <img>, so you can try logo colours live. The <img> keeps
   its real src for SEO; theme.logoMask(false) restores it. When you
   settle on a colour, bake it into the SVG and delete this block.
   =============================================================== */
html.logo-mask body > header > a img {
    content: linear-gradient(#0000, #0000);   /* drop the SVG's own colours, keep the box */
    background-color: var(--t-logo);
    -webkit-mask: url(images/albert.svg) center / contain no-repeat;
            mask: url(images/albert.svg) center / contain no-repeat;
}


/* ===============================================================
   FOOTER
   =============================================================== */
body > footer {
    display: block;                 /* opt out of the body>* grid */
    padding: 0;                     /* full-bleed band */
    margin-top: 0;
    background: var(--t-highlight);  /* brand green */
    color: #fff;
    font-size: 16px;
}

body > footer .ft-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: clamp(34px, 6vw, 60px) clamp(14px, 4vw, 44px) clamp(26px, 4vw, 40px);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px 40px;
}

body > footer .ft-brand { display: grid; gap: 4px; }
body > footer .ft-name {
    font-family: 'Tiempos Headline', Georgia, serif;
    font-weight: 700;
    font-size: clamp(24px, 3.4vw, 32px);
    line-height: 1;
}
body > footer .ft-tag { font-size: 14px; opacity: .8; }

body > footer .ft-nav {
    display: grid;
    grid-auto-flow: row;
    gap: 10px;
    font-family: 'Tiempos Headline', Georgia, serif;
    font-size: 20px;
}
body > footer .ft-nav a {
    color: #fff;
    text-decoration: none;
    width: fit-content;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color .2s ease, color .2s ease;
}
body > footer .ft-nav a:hover { border-bottom-color: var(--t-menu-underline); }

body > footer .ft-side {
    display: grid;
    gap: 18px;
    justify-items: end;
}
/* stacked icon + name pairs; the icon lives on ::before so the mask
   doesn't swallow the link text */
body > footer .ft-social { display: grid; gap: 10px; justify-items: start; }
body > footer .ft-social a {
    display: inline-flex; align-items: center; gap: 10px;
    color: #fff; opacity: .85;
    transition: opacity .2s ease, color .2s ease;
}
body > footer .ft-social a::before {
    content: '';
    width: 24px; height: 24px;
    background: #fff;
    transition: background .2s ease;
}
body > footer .ft-social a:hover { opacity: 1; color: var(--t-menu-underline); }
body > footer .ft-social a:hover::before { background: var(--t-menu-underline); }
body > footer .ft-social a.yt::before { -webkit-mask: url(images/icons.svg#youtube-squircle) center/contain no-repeat;   mask: url(images/icons.svg#youtube-squircle) center/contain no-repeat; }
body > footer .ft-social a.ig::before { -webkit-mask: url(images/icons.svg#instagram-squircle) center/contain no-repeat; mask: url(images/icons.svg#instagram-squircle) center/contain no-repeat; }
body > footer .ft-social a.x::before  { -webkit-mask: url(images/icons.svg#xFilled-squircle) center/contain no-repeat;    mask: url(images/icons.svg#xFilled-squircle) center/contain no-repeat; }

body > footer .ft-lang {
    color: #fff;
    font-family: 'Pelak';
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
    opacity: .85;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body > footer .ft-lang::before {
    content: '';
    width: 21px;
    aspect-ratio: 7 / 4;
    background: url(images/persian-icon.svg) center / cover no-repeat;
    border-radius: 2px;
}
body > footer .ft-lang:hover { opacity: 1; }

body > footer .ft-bottom {
    border-top: 1px solid rgba(255, 255, 255, .18);
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 16px clamp(14px, 4vw, 44px);
    font-size: 13px;
    opacity: .7;
}

/* <=844px: two-column footer — brand on top, then the menu links on
   the left with the social names + فارسی on the right */
@media (max-width: 844px) {
    body > footer .ft-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 26px;
    }
    body > footer .ft-brand { grid-column: 1 / -1; }
    body > footer .ft-nav   { grid-column: 1; }
    body > footer .ft-side  { grid-column: 2; justify-items: end; }
}



/* ===============================================================
   VIDEOS — full-bleed black band right under the diagonal
   ---------------------------------------------------------------
   Layout (grid, no extra wrappers):
     row 1              -> h2 across both columns
     rows 2-5, column 1 -> the YouTube iframe (injected by script.js)
     rows 2-5, column 2 -> one playlist card per row; the four 1fr
                           rows share exactly the iframe's height
   Farsi text uses Pelak — the same 4 faces as notoantisemitism.org.
   Clicking a card swaps its video into the iframe (see /js/script.js).
   =============================================================== */
body > main > section.videos {
    /* full-bleed breakout: cancel main's side padding, then pad the
       content back to the same alignment — the black spans edge to edge
       while the video stuff stays centered on the content column */
    --side: clamp(var(--sides-gap), calc((100vw - var(--content-width)) / 2), 100vw);
    grid-column: 1 / -1;
    margin-inline: calc(-1 * var(--side));
    padding: 50px var(--side);
    background: #555555;

    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr);
    grid-template-rows: auto repeat(4, minmax(0, 1fr));
    gap: 12px 22px;
    align-content: start;
    font-family: 'Pelak';
    font-weight: 300;

    & > h2 {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 20px;
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 4px 16px;
        color: #fff;
        font-weight: 900;
        font-size: clamp(20px, 2vw, 26px);

        /* each title carries its own yellow bar, exactly as wide as
           its text */
        & > span {
            padding-bottom: 10px;
            background-image: linear-gradient(var(--t-yellow), var(--t-yellow));
            background-repeat: no-repeat;
            background-size: 100% 4px;
            background-position: 0 100%;
        }

        & > [lang="en"] {
            font-family: 'Tiempos Headline', Georgia, serif;
        }

        & > [lang="fa"] {
            direction: rtl;
        }
    }

    & > iframe {
        grid-column: 1;
        grid-row: 2 / -1;
        width: 100%;
        aspect-ratio: 16 / 9;
        /* when the four cards run taller than 16:9 (mid widths), grow to
           meet the last card — the player letterboxes inside its own
           black frame, which just reads as part of the player */
        min-height: 100%;
        border: 0;
        border-radius: 6px;
        background: #000;
    }

    & > article {
        display: grid;
        grid-template-columns: minmax(120px, 168px) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 0 14px;
        align-items: start;
        min-height: 0;
        overflow: hidden;
        padding: 6px;
        direction: rtl;                 /* thumb right, text left — Farsi reading order */
        background: #656565;
        border-radius: 6px;
        transition: background 0.2s;

        & > header {
            grid-column: 2;
            grid-row: 1;
            display: grid;
            align-content: start;
            min-width: 0;

            & > h4 {
                color: #fff;
                direction: rtl;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.5;
                font-size: clamp(14px, 1.15vw, 16px);
                font-weight: 700;
                transition: color 0.2s;
            }

            & > time {
                order: -1;
                margin: 2px 0 4px;
                font-size: 12px;
                color: #fee102;
                font-family: 'Tiempos Text';
                font-style: italic;
                direction: ltr;
                text-align: start;
                transition: color 0.2s;
            }
        }

        & > figure {
            display: contents;

            & > img {
                grid-column: 1;
                grid-row: 1 / -1;
                width: 100%;
                height: 100%;
                min-height: 0;
                aspect-ratio: 16 / 9;
                object-fit: cover;
                border-radius: 4px;
            }
        }

        & > p {
            grid-column: 2;
            grid-row: 2;
            margin: 0;
            direction: rtl;

            & > a {
                display: block;
                margin: 2px 0;
                font-size: clamp(11px, 1vw, 12px);
                font-weight: 500;
                color: #70c1ff;
                transition: color 0.2s;

                &:hover {
                    color: var(--t-yellow);
                }
            }
        }

        &:hover, &.active {
            cursor: pointer;
            background: var(--t-yellow);

            & > header > h4,
            & > header > time {
                color: #000;
            }

            & > p > a {
                color: #1c8335;

                &:hover {
                    color: #0253cb;
                }
            }
        }
    }

    /* <=844px: the cards drop under the iframe, one per row */
    @media (max-width: 844px) {
        & {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: none;
        }

        & > h2 {
            grid-column: 1;
        }

        & > iframe {
            grid-row: auto;
        }

        & > article {
            grid-template-rows: auto auto;

            & > header > h4 {
                font-size: 15px;
            }
        }
    }
}


/* ===============================================================
   SUBSCRIBE — breathing room between the videos band and the footer
   ---------------------------------------------------------------
   A centered email-signup block on the page background, sized to
   at least 3/4 of the videos band on desktop; on mobile the
   min-height is relaxed so the spacing stays modest. Palette only:
   brand green #2d594a (heading, button hover), --t-yellow (accent
   underline, button), --t-highlight blue (focus, links), #555555
   (copy, input border).
   =============================================================== */
body > main > section.subscribe {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 18px;
    text-align: center;
    min-height: 525px;
    padding: clamp(44px, 6vw, 80px) 0;

    & > h2 {
        font-family: 'Tiempos Headline', Georgia, serif;
        font-size: clamp(26px, 3vw, 38px);
        color: #2d594a;
        padding: 10px 0;
        background-image: linear-gradient(var(--t-yellow), var(--t-yellow));
        background-repeat: no-repeat;
        background-size: 56% 4px;
        background-position: center 100%;
    }

    & > p {
        max-width: 620px;
        color: #555555;
        font-size: clamp(15px, 1.3vw, 18px);
        line-height: 1.6;

        & > a {
            color: #0065b3;
            border-bottom: 2px solid var(--t-yellow);
            transition: color 0.2s, border-color 0.2s;

            &:hover {
                color: #2d594a;
                border-color: #2d594a;
            }
        }
    }

    /* the note under the form, quieter than the lead */
    & > form + p {
        font-size: 14px;
        opacity: 0.85;
    }

    & > form {
        display: grid;
        grid: none / minmax(0, 420px) auto;
        width: min(100%, 560px);
        margin-top: 10px;

        & > input {
            font: inherit;
            font-size: 16px;
            min-width: 0;
            padding: 14px 18px;
            border: 2px solid #555555;
            border-right: 0;
            border-radius: 8px 0 0 8px;
            background: #fff;
            color: #000;

            &:focus {
                outline: none;
                border-color: var(--t-highlight);
            }
        }

        & > button {
            font: inherit;
            font-size: 16px;
            font-weight: 700;
            padding: 14px 28px;
            border: 2px solid #555555;
            border-radius: 0 8px 8px 0;
            background: #0065b3;
            color: #ffffff;
            cursor: pointer;
            transition: background 0.2s, color 0.2s, border-color 0.2s;

            &:hover {
                background: #2d594a;
                border-color: #2d594a;
                color: #fff;
            }
        }
    }

    /* mobile: keep the section present but the spacing modest */
    @media (max-width: 844px) {
        & {
            min-height: 320px;
            padding: 44px clamp(14px, 4vw, 44px);
            gap: 14px;
        }
    }

    /* narrow: keep the button beside the input — just slim its padding
       so the pair still fits on one row */
    @media (max-width: 540px) {
        & > form > button {
            padding: 14px 14px;
        }
    }
}




/* ===============================================================
   INNER PAGES (post / page / archive / contact)
   ---------------------------------------------------------------
   Two-column diagonal: the article lives in > div, the sidebar in
   > aside (search, latest articles, latest videos). Under 844px the
   sidebar drops below the article and both go full width. All font
   sizes clamp() with the viewport, on the same scale as the homepage.
   =============================================================== */
body.contact,
body.archive,
body.page,
body.search,
body.videos,
body.post
{

    position: relative;
    /* own stacking context, so the negative-z band below paints ABOVE
       the body's white background instead of being buried under it */
    isolation: isolate;

    /* the yellow band. Painted on <body> itself: left/right 0 on a
       full-viewport element spans it edge to edge with NO 100vw, no
       translateX(-50%), no rotation and no JS — it cannot shrink or
       drift off-center at any viewport size or browser zoom level.
       Its top rides var(--header-height) (live-measured px, not vw
       math), so it starts exactly at the header's bottom everywhere,
       and its height is a plain constant: identical at 25% zoom and
       at 1:1. */
    &::before
    {
        content: '';
        position: absolute;
        top: calc(var(--header-height) - 30px);
        left: 0;
        right: 0;
        height: calc(calc(var(--header-height) + 90px) + var(--header-nav-height));
        background: var(--t-yellow);
        z-index: -3;
        /* bottom edge slopes up from left to right, same look as the
           old rotated band; the cut mirrors the diagonal's own value.
           min() — NOT clamp(7vw, 10vw, 140px): when a clamp's minimum
           (7vw) outgrows its maximum (140px), CSS lets the minimum win,
           which exploded the cut on huge viewports / zoomed-out pages */
        --band-cut: min(10vw, 140px);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--band-cut)), 0 100%);

        @media (max-width: 844px) {
            --band-cut: 12vw;
        }
    }

    & > main
    {
        grid: none;
    }


    & > header
    {
        box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);

        &::before
        {
            --reveal: 160px;
            --border-opacity: 1;
            mask-image: unset;
            -webkit-mask-image: unset;
            box-shadow: unset;
            transition: unset;
            animation: unset;
        }
    }

    /* breadcrumbs — absolutely positioned at the section's inner top
       edge (riding the yellow band), so they take NO layout height and
       never push the article down */
    & > main > section
    {
        position: relative;
    }

    & > main > section > nav.breadcrumbs
    {
        position: absolute;
        top: 12px;
        left: 0;
        right: 0;
        z-index: 1;
        font-size: clamp(12px, 1vw, 14px);

        & ol {
            display: flex;
            gap: 8px;
            min-width: 0;
        }

        & li {
            white-space: nowrap;
            font-style: italic;
            color: #555555;
        }

        & li + li::before {
            content: '›';
            margin-right: 8px;
            font-style: normal;
            color: #555555;
        }

        /* the current page (usually the long post title) truncates
           instead of wrapping */
        & li[aria-current] {
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }

        & a {
            color: #000;
            transition: color 0.2s;

            &:hover {
                color: var(--t-menu-underline-hover);
            }
        }
    }

    & > main > section > article.diagonal
    {
        padding-top: 0;
        padding-bottom: 60px;
        margin-top: unset;
        grid: none / 2fr 1fr;

        /* THE shared content start line for every inner page: the yellow
           band's deepest edge (6px below the diagonal top + 200px + nav
           height) plus a 15px gap. The title header is exactly this tall,
           the sidebar starts here, and so does every page's content —
           results, figures, paragraphs, forms — so nothing can ever
           overlap the yellow layer */
        --page-content-top: calc(200px + var(--header-nav-height));

        /* the homepage's in-diagonal band is replaced by the zoom-proof
           band on main::before above — disable it here entirely */
        &::before
        {
            content: none;
        }

        /* ---- the article column ---- */

        & > div
        {
            /* breathing room under the article before the footer */
            padding-bottom: 40px;
        }

        & > div > header h2 {
            font-size: clamp(24px, 2.6vw, 30px);
            line-height: 1.3;
            font-family: 'Tiempos Headline';
            color: #000;
            mix-blend-mode: multiply;
            /* the title band is a FIXED height — short or long, the text
               rides vertically centered inside it. Flex (not grid): grid
               blockifies an inline <span> onto its own row, flex keeps
               "Search Results: <span>query</span>" on one line */
            height: 110px;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            align-items: baseline;
            column-gap: 12px;
            margin-bottom: 16px;
        }

        & > div > header
        {
            /* fixed-height block filling the band zone — whatever follows
               it starts exactly at --page-content-top */
            margin: 0;
            padding-top: 25px;
            height: var(--page-content-top);

            & p {
                font-style: italic;
                color: #0065b3;
                margin: 0;
                font-size: clamp(12px, 2vw, 15px);
                position: relative;

                & span {
                    float: right;
                    color: gray;
                }
            }
        }

        & > div > figure
        {
            margin: 0;
            overflow: hidden;
            width: 100%;
            height: auto;
            max-height: 460px;
            margin-bottom: 20px;

            & img{
                width: 100%;
                height: auto;
                object-fit: contain;
            }
        }

        /* body copy on the homepage article scale */
        & > div > p
        {
            font-size: clamp(17px, 1.4vw, 19px);
            line-height: 1.7;
            color: #000;

            & > a {
                font-style: italic;
                font-size: clamp(13px, 1.2vw, 15px);
                color: #0094db;
                margin-left: 10px;
                white-space: nowrap;
                transition: color 0.2s;

                &:hover {
                    color: #ea5f00;
                }
            }
        }

        /* ---- search page: the phrase the user searched for ---- */

        & > div > header h2 > span {
            color: #0065b3;
        }

        /* ---- search results list: thumbnail (max 240x150) on the
           right, date + title + a few lines of the excerpt with the
           read-more beside it on the left ---- */

        & > div > section.results
        {
            display: grid;
            /* starts straight at --page-content-top (the header block
               above it is exactly that tall) */
            margin-top: 0;

            & > article {
                display: grid;
                grid-template-columns: min(240px, 34vw) minmax(0, 1fr);
                grid-template-rows: auto 1fr;
                gap: 6px 22px;
                padding: 30px 10px;
                border-bottom: 2px dotted #bababa;
                transition: background 0.2s;

                &:hover {
                    background: #f5f5f5;
                }

                &:last-of-type {
                    border-bottom: 0;
                }

                & > header {
                    grid-column: 2;
                    grid-row: 1;

                    & > p {
                        font-style: italic;
                        font-size: clamp(12px, 1vw, 14px);
                        color: var(--t-logo);
                        margin: 0 0 4px;
                    }

                    & h2 {
                        font-size: clamp(17px, 1.7vw, 24px);
                        line-height: 1.3;

                        & a {
                            font-family: 'Tiempos Headline', Georgia, serif;
                            color: var(--t-menu-underline-hover);
                            transition: color 0.2s;

                            &:hover {
                                color: var(--t-logo);
                            }
                        }
                    }
                }

                & > figure {
                    grid-column: 1;
                    grid-row: 1 / span 2;
                    justify-self: start;
                    width: 100%;
                    max-width: 240px;
                    margin: 0;

                    & a {
                        display: block;
                    }

                    & img {
                        display: block;
                        width: 100%;
                        max-height: 150px;
                        aspect-ratio: 240 / 150;
                        object-fit: cover;
                        border-radius: 6px;
                    }
                }

                & > p {
                    grid-column: 2;
                    grid-row: 2;
                    font-size: clamp(14px, 1.25vw, 16px);
                    line-height: 1.6;
                    color: #494949;

                    & > a {
                        font-style: italic;
                        font-size: clamp(12px, 1.1vw, 14px);
                        color: #0094db;
                        margin-left: 8px;
                        white-space: nowrap;
                        transition: color 0.2s;

                        &:hover {
                            color: #ea5f00;
                        }
                    }
                }
            }

            /* narrow phones: thumbnail drops above the excerpt, full row */
            @media (max-width: 540px) {
                & > article {
                    grid-template-columns: 1fr;
                    grid-template-rows: none;
                    padding: 15px 10px;

                    & > header {
                        grid-column: 1;

                        & h2 {
                            font-size: 19px;
                        }
                    }

                    & > figure {
                        grid-column: 1;
                        grid-row: auto;
                        justify-self: stretch;
                        max-width: none;
                        overflow: hidden;

                        & img {
                            width: 100%;
                            max-height: 260px;
                            aspect-ratio: auto;
                            object-fit: cover;
                        }
                    }

                    & > p {
                        grid-column: 1;
                        grid-row: auto;
                        font-size: 15px;
                    }
                }
            }
        }

        /* ---- pagination under the results, clear of the footer ---- */

        & > div > nav.pagination
        {
            display: flex;
            /* one line, always — narrow screens shrink the buttons
               instead of wrapping them */
            flex-wrap: nowrap;
            justify-content: center;
            gap: 8px;
            margin-top: 50px;

            & > a,
            & > span {
                font-family: 'Tiempos Headline', Georgia, serif;
                font-size: clamp(14px, 1.2vw, 16px);
                min-width: 42px;
                padding: 9px 13px;
                text-align: center;
                white-space: nowrap;
                border: 1px solid #d9d5cd;
                border-radius: 6px;
                color: var(--t-menu-underline-hover);
                transition: color 0.2s, background 0.2s, border-color 0.2s;
            }

            @media (max-width: 540px) {
                gap: 4px;

                & > a,
                & > span {
                    font-size: 13px;
                    min-width: 32px;
                    padding: 7px 8px;
                }
            }

            & > a:hover {
                background: var(--t-yellow);
                border-color: var(--t-yellow);
                color: #000;
            }

            & > .current {
                background: var(--t-yellow);
                border-color: var(--t-yellow);
                color: #000;
            }

            & > .dots {
                border: 0;
                color: #555555;
            }
        }

        /* ---- videos page: the player + the playlist under it.
           script.js (initVideos) injects the #video iframe before the
           first card, exactly like the homepage; clicking a card swaps
           its video in and plays it. Cards mirror the sidebar's
           latest-videos rows: thumbnail LEFT, date above the title. ---- */

        & > div > section.videos
        {
            display: grid;

            & > iframe {
                width: 100%;
                aspect-ratio: 16 / 9;
                border: 0;
                border-radius: 6px;
                background: #000;
                margin-bottom: 24px;
            }

            & > article {
                display: grid;
                grid-template-columns: min(160px, 30vw) minmax(0, 1fr);
                grid-template-rows: auto 1fr;
                gap: 2px 16px;
                padding: 12px 10px;
                border-bottom: 2px dotted #bababa;
                cursor: pointer;
                transition: background 0.2s;

                &:hover {
                    background: #f5f5f5;
                }

                &.active {
                    background: #fee1013d;   /* soft wash of the brand yellow */
                }

                &:last-of-type {
                    border-bottom: 0;
                }

                & > figure {
                    grid-column: 1;
                    grid-row: 1 / span 2;
                    margin: 0;

                    & img {
                        display: block;
                        width: 100%;
                        aspect-ratio: 16 / 9;
                        object-fit: cover;
                        border-radius: 4px;
                    }
                }

                & > header {
                    grid-column: 2;
                    grid-row: 1;

                    & time {
                        display: block;
                        font-family: 'Tiempos Text';
                        font-style: italic;
                        font-size: clamp(12px, 1vw, 13px);
                        color: #0065b3;
                        margin-bottom: 4px;
                    }

                    & h4 {
                        font-family: 'Pelak';
                        font-weight: 700;
                        font-size: clamp(14px, 1.2vw, 16px);
                        line-height: 1.7;
                        direction: rtl;
                        color: #000;
                        -webkit-box-orient: vertical;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                & > p {
                    grid-column: 2;
                    grid-row: 2;
                    align-self: end;

                    & > a {
                        font-style: italic;
                        font-size: clamp(11px, 1vw, 13px);
                        color: #0094db;
                        transition: color 0.2s;

                        &:hover {
                            color: #ea5f00;
                        }
                    }
                }
            }

            /* narrow phones: keep the row, shrink the thumb */
            @media (max-width: 540px) {
                & > article {
                    grid-template-columns: min(130px, 40vw) minmax(0, 1fr);
                    padding: 12px 6px;
                }
            }
        }

        /* ---- contact page: the direct email address ---- */

        & > div > address {
            margin-top: 35px;
            font-style: normal;

            & a {
                font-family: 'Tiempos Headline', Georgia, serif;
                font-size: clamp(18px, 1.9vw, 26px);
                color: #0065b3;
                border-bottom: 3px solid var(--t-yellow);
                padding-bottom: 2px;
                transition: color 0.2s, border-color 0.2s;

                &:hover {
                    color: var(--t-logo);
                    border-color: var(--t-logo);
                }
            }
        }

        /* ---- share to social media — end of single articles.
           Icons come from images/share.svg (SVG fragment identifiers,
           same mechanism as notoantisemitism.org). ---- */

        & > div > .social-media {
            position: relative;
            display: grid;
            grid-auto-flow: column;
            justify-content: start;
            gap: 7px;
            margin-top: 35px;
            padding: 3px 10px;
            background: #cb9d391c;
            border-radius: 6px;

            &::before {
                content: attr(data-content);
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                color: #bababa;
                font-size: 13px;
                font-style: italic;
            }

            @media (max-width: 960px) {
                &::before {
                    content: '';
                }
            }

            & > a {
                display: grid;
                grid-auto-flow: column;
                align-items: center;
                gap: 5px;
                padding: 3px 10px 3px 3px;
                border-radius: 5px;
                color: #919191;
                transition: all 0.3s;

                &:hover {
                    background: #cef4fb;
                    color: #0253cc;
                }

                & > img {
                    width: 24px;
                    max-width: 24px;
                }

                & > span {
                    font-size: 14px;
                    white-space: nowrap;
                    line-height: normal;
                }
            }

            /* narrow phones: icons only */
            @media (max-width: 540px) {
                & > a > span {
                    display: none;
                }
            }
        }

        /* ---- contact page: the message form (name + email share a row,
           subject/message/button run full width) ---- */

        & > div > form.contact-form {
            margin-top: 45px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            width: 100%;    /* fill the article column */

            & > input,
            & > textarea {
                font: inherit;
                font-size: 16px;
                min-width: 0;
                padding: 13px 16px;
                border: 2px solid #555555;
                border-radius: 8px;
                background: #fff;
                color: #000;

                &:focus {
                    outline: none;
                    border-color: #0065b3;
                }
            }

            & > input[name="subject"],
            & > textarea,
            & > button {
                grid-column: 1 / -1;
            }

            & > textarea {
                resize: vertical;
                min-height: 180px;
            }

            & > button {
                justify-self: start;
                font: inherit;
                font-size: 16px;
                font-weight: 700;
                padding: 13px 36px;
                border: 2px solid #555555;
                border-radius: 8px;
                background: #0065b3;
                color: #fff;
                cursor: pointer;
                transition: background 0.2s, border-color 0.2s;

                &:hover {
                    background: var(--t-logo);
                    border-color: var(--t-logo);
                }
            }

            /* narrow phones: every field on its own row */
            @media (max-width: 540px) {
                grid-template-columns: 1fr;
            }
        }

        /* ---- subscribe: compact card version of the home band.
           A direct grid item of the diagonal — on desktop it's placed
           back under the article column; on mobile it follows source
           order (article, aside, subscribe). ---- */

        & > section.subscribe
        {
            grid-column: 1;
            grid-row: 2;
            align-self: start;
            position: relative;
            top: 0;                 /* undo the homepage's .diagonal > section pull-up */
            margin-top: 120px;
            padding: clamp(26px, 3.4vw, 40px) clamp(18px, 3.4vw, 44px);
            background: #f0eeeb;
            border-radius: 10px;
            display: grid;
            justify-items: center;
            text-align: center;
            gap: 14px;

            & > h2 {
                font-family: 'Tiempos Headline', Georgia, serif;
                font-size: clamp(20px, 2.1vw, 28px);
                color: #2d594a;
                padding: 6px 0 10px;
                background-image: linear-gradient(var(--t-yellow), var(--t-yellow));
                background-repeat: no-repeat;
                background-size: 56% 4px;
                background-position: center 100%;
            }

            & > p {
                max-width: 560px;
                color: #555555;
                font-size: clamp(14px, 1.2vw, 16px);
                line-height: 1.6;

                & > a {
                    color: #0065b3;
                    border-bottom: 2px solid var(--t-yellow);
                    transition: color 0.2s, border-color 0.2s;

                    &:hover {
                        color: #2d594a;
                        border-color: #2d594a;
                    }
                }
            }

            & > form + p {
                font-size: clamp(12px, 1vw, 14px);
                opacity: 0.85;
            }

            & > form {
                display: grid;
                grid: none / minmax(0, 1fr) auto;
                width: min(100%, 480px);
                margin-top: 4px;

                & > input {
                    font: inherit;
                    font-size: 16px;
                    min-width: 0;
                    padding: 13px 16px;
                    border: 2px solid #555555;
                    border-right: 0;
                    border-radius: 8px 0 0 8px;
                    background: #fff;
                    color: #000;

                    &:focus {
                        outline: none;
                        border-color: #0065b3;
                    }
                }

                & > button {
                    font: inherit;
                    font-size: 16px;
                    font-weight: 700;
                    padding: 13px clamp(16px, 2vw, 28px);
                    border: 2px solid #555555;
                    border-radius: 0 8px 8px 0;
                    background: #0065b3;
                    color: #ffffff;
                    cursor: pointer;
                    transition: background 0.2s, color 0.2s, border-color 0.2s;

                    &:hover {
                        background: #2d594a;
                        border-color: #2d594a;
                    }
                }
            }
        }

        /* ---- the sidebar ---- */

        & > aside
        {
            grid-column: 2;
            grid-row: 1 / span 2;   /* runs beside both the article and the subscribe */
            /* "Search" sits on the same line the article content starts on */
            margin-top: var(--page-content-top);
            display: grid;
            gap: 38px;
            align-content: start;

            /* widget titles — same accent language as the homepage */
            & h3 {
                font-family: 'Tiempos Headline', Georgia, serif;
                font-size: clamp(17px, 1.5vw, 20px);
                color: #000;
                width: fit-content;
                padding-bottom: 8px;
                margin-bottom: 16px;
                background-image: linear-gradient(var(--t-yellow), var(--t-yellow));
                background-repeat: no-repeat;
                background-size: 100% 4px;
                background-position: 0 100%;
            }

            /* search — deliberately lighter than the subscribe form:
               1px hairline, tighter padding, grey button */
            & > section.search > form {
                display: grid;
                grid: none / minmax(0, 1fr) auto;

                & > input {
                    font: inherit;
                    font-size: 15px;
                    min-width: 0;
                    padding: 10px 14px;
                    border: 1px solid #555555;
                    border-right: 0;
                    border-radius: 6px 0 0 6px;
                    background: #fff;
                    color: #000;

                    &:focus {
                        outline: none;
                        border-color: #0065b3;
                    }
                }

                & > button {
                    font: inherit;
                    font-size: 15px;
                    font-weight: 700;
                    padding: 10px 18px;
                    border: 1px solid #555555;
                    border-radius: 0 6px 6px 0;
                    background: #555555;
                    color: #fff;
                    cursor: pointer;
                    transition: background 0.2s, border-color 0.2s;

                    &:hover {
                        background: #0065b3;
                        border-color: #0065b3;
                    }
                }
            }

            /* latest articles — date + linked title, homepage list style */
            & > section.latest-articles article {
                margin-bottom: 18px;

                &:last-of-type {
                    margin-bottom: 0;
                }

                & header > p {
                    font-style: italic;
                    font-size: clamp(12px, 1vw, 13px);
                    color: var(--t-logo);
                    margin: 0 0 4px;
                }

                & h2 {
                    font-size: clamp(15px, 1.4vw, 18px);
                    line-height: 1.3;

                    & a {
                        font-family: 'Tiempos Headline', Georgia, serif;
                        color: var(--t-menu-underline-hover);
                        transition: color 0.2s;

                        &:hover {
                            color: var(--t-logo);
                        }
                    }
                }
            }

            /* latest videos — thumbnail with the Farsi title beside it */
            & > section.latest-videos article {
                display: grid;
                grid-template-columns: 150px minmax(0, 1fr);
                gap: 10px;
                align-items: start;
                direction: rtl;      /* thumb right, title left — Farsi order */
                margin-bottom: 10px;
                background: #f5f5f5;
                padding: 10px 10px;
                border-radius: 8px;

                &:hover{
                    background: #f0eeea;
                }

                &:last-of-type {
                    margin-bottom: 0;
                }

                & figure {
                    margin: 0;

                    & img {
                        display: block;
                        width: 100%;
                        aspect-ratio: 16 / 9;
                        object-fit: cover;
                        border-radius: 4px;
                    }
                }

                & h4 {
                    font-family: 'Pelak';
                    font-weight: 700;
                    font-size: clamp(12px, 1.05vw, 14px);
                    line-height: 1.6;
                    direction: rtl;
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    line-clamp: 3;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    & a {
                        color: var(--t-highlight);
                        transition: color 0.2s;

                        &:hover {
                            color: var(--t-menu-underline-hover);
                        }
                    }
                }

                & time {
                    display: block;
                    margin-top: 4px;
                    font-family: 'Tiempos Text';
                    font-style: italic;
                    font-size: 12px;
                    color: var(--t-menu-underline-hover);
                    direction: ltr;
                    text-align: start;
                }

                /* external "Watch on YouTube" link under the date —
                   thumbnail + title link into videos.html instead */
                & header > a.watch {
                    display: block;
                    margin-top: 2px;
                    font-family: 'Tiempos Text';
                    font-style: italic;
                    font-size: 12px;
                    color: #0094db;
                    direction: ltr;
                    text-align: start;
                    transition: color 0.2s;

                    &:hover {
                        color: #ea5f00;
                    }
                }

                & figure a {
                    display: block;
                }
            }
        }

        /* ---- <=844px: sidebar drops below the article, full frame ---- */
        @media (max-width: 844px) {
            & {
                grid: none / 1fr;
            }

            & > aside {
                margin-top: 20px;
                grid-column: auto;
                grid-row: auto;

                /* phone: the clamp() minimums read too small — step the
                   sidebar type up a couple of px */
                & h3 {
                    font-size: 21px;
                }

                & > section.latest-articles article {
                    & header > p {
                        font-size: 14px;
                    }

                    & h2 {
                        font-size: 18px;
                    }
                }

                & > section.latest-videos article {
                    & h4 {
                        font-size: 15px;
                    }

                    & time {
                        font-size: 14px;
                    }
                }
            }

            /* single column: back to source order — the subscribe card
               follows the sidebar */
            & > section.subscribe {
                grid-column: auto;
                grid-row: auto;
                margin-top: 40px;
            }
        }
    }
}


/* ===============================================================
   iOS-ONLY corrections (post/inner pages)
   ---------------------------------------------------------------
   -webkit-touch-callout only exists on iOS WebKit, so this
   @supports gate matches iPhones/iPads and nothing else. On real
   devices the byline reads smaller and the breadcrumb sits tighter
   to the title than in desktop-Chrome's responsive preview.
   =============================================================== */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 844px) {
        body.contact,
        body.archive,
        body.page,
        body.search,
        body.videos,
        body.post {
            & > main > section > article.diagonal {
                /* iOS: keep the breadcrumb→title gap, but as PADDING inside
                   the fixed-height header block — a margin here would grow
                   the block and open a white gap between the yellow band
                   and the content */
                & > div > header {
                    margin-top: 0;
                    margin-bottom: 0;
                    padding-top: 40px;
                }

                /* author + date line */
                & > div > header p {
                    font-size: 14px;
                    position: relative;
                    top: -12px;
                }
            }
        }
    }
}