@charset "UTF-8";
/* ==========================================================================
   ARTIST.CSS
   ntabibian.com  ::  THE ARTIST STATEMENT PAGE  ::  v2
   --------------------------------------------------------------------------
   WRITTEN     : 2026-09-14
   BELONGS TO  : Artist.html
   LOADS AFTER : CSS/Negar-Default.css   then   CSS/Art.css
   SCRIPTS     : JS/Negar-JS.js          then   JS/Art-JS.js
   --------------------------------------------------------------------------
   THIS FILE IS SHORT ON PURPOSE.

   Artist.html loads Art.css FIRST and this file second, so the bar, the
   language switch, the ticker, the floating buttons, the popups, the
   copyright strip and the whole Farsi layer all come across unchanged. The
   two pages are the same room seen from a different chair, and there is one
   copy of that furniture rather than two.

   WHAT IS ONLY HERE:
       [B1 PAGE]     the no-scroll frame, and why it is built that way
       [B2 INTRO]    "This is / Negar Tabibian." and the rotating line
       [B3 BODY]     the painting, with the statement in a column beside it
       [B4 TEXT]     the statement itself
       [B5 LINKS]    Instagram, prints, the art CV
       [B6 PLATE]    the full-page portrait, the wash, and the curve
       [MODE B/C/D]  what happens when there is no room for two columns
   --------------------------------------------------------------------------
   >>> THE PAGE MUST FIT ON ONE SCREEN, WHICH YOU ASKED FOR AND WHICH IS THE
   HARDEST THING ON IT. <<<

   A page of writing that never scrolls is a promise you cannot keep with type
   alone: the same paragraph is four lines on a desktop and fourteen on a
   phone, and the window can be any height at all. So this page keeps the
   promise a different way.

   THE PAGE ITSELF NEVER SCROLLS. body is exactly the height of the window and
   overflow is hidden. Inside it, the statement text has its own scroll, and
   only the statement. On any screen big enough the text fits and that scroll
   is invisible and inert. On a short window the frame still holds, nothing is
   clipped, nothing is lost, and only the paragraph moves.

   That is the honest version of "no scroll": the PAGE does not move, the
   layout does not reflow, and the one thing that can outgrow its space is the
   one thing that is allowed to.
   ========================================================================== */


/* [B1 PAGE] ================================================================
   [B1 PAGE]
   The frame.

   Everything on this page stacks on top of one full-page picture, so the main
   area is a positioning context and the words sit above it on z-index.
   ========================================================================= */

    body.ArtistPage {
        height: 100vh;
        height: 100svh;      /* svh keeps phone toolbars from lying */
        min-height: 0;
        overflow: hidden;
        }

    .ArtistMain {
        flex: 1 1 auto;
        min-height: 0;       /* without this a flex child refuses to shrink
                                and the page grows a scrollbar anyway     */
        position: relative;
        overflow: hidden;
        }

    .ArtistWords {
        position: relative;
        z-index: 3;
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: calc(var(--NGap) * 1.1) var(--APadX) calc(var(--NGap) * 0.8);
        }


/* [B2 INTRO] ===============================================================
   [B2 INTRO]
   "This is / Negar Tabibian." and the rotating line.

   >>> THE LEAD AND THE ROTATING LINE ARE THE SAME SIZE, and both bigger. <<<
   --NArtistIntro sets both, so they cannot drift apart. They read as a pair
   that way: one is the introduction, the other is the answer, and the name
   between them is the loud thing precisely because they match.
   ========================================================================= */

    body.ArtistPage {
        --NArtistIntro: clamp(1.15rem, 2.6vh, 1.7rem);
        }

    .ArtistLead {
        font-size: var(--NArtistIntro);
        line-height: 1.25;
        opacity: 0.6;
        }

    .ArtistName {
        font-size: clamp(2rem, 5.4vh, 3.8rem);
        line-height: 1.02;
        font-weight: 400;
        letter-spacing: -0.015em;
        margin-block: calc(var(--NGap) * 0.1) calc(var(--NGap) * 0.15);
        }

/*  The ticker here is the line under the name, not a band across the top, so
    it loses the band's padding and takes the name's left edge.             */

    .ArtistPage .ArtTicker {
        padding: 0;
        font-size: var(--NArtistIntro);
        min-height: calc(1.3em + var(--NGap) * 0.2);
        margin-bottom: calc(var(--NGap) * 1);
        }


/* [B3 BODY] ================================================================
   [B3 BODY]
   The painting on the left, the statement in a column to its right.

   THE PAINTING GETS A FIXED SHARE and the prose takes the rest, rather than
   both being a percentage: a painting has a fixed proportion and wants a
   sensible size, while a column of type only wants to be somewhere near 46
   characters wide. Giving the picture its number and letting the words have
   what is left is what keeps both right on a 1280 and on a 1920.
   ========================================================================= */

    .ArtistBody {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        align-items: flex-start;
        gap: clamp(1rem, 4vw, 2.6rem); /* Original clamp(1rem, 3vw, 2.6rem)) */
        }

    .ArtistFigure {
        flex: 0 0 auto;
        width: clamp(7rem, 26vw, 19.2rem); /* Original clamp(7rem, 26vh, 13rem) */
        margin: 0;
        }

    .ArtistPainting {
        display: block;
        width: 100%;
        height: auto;
        box-shadow: 0 10px 34px rgba(9, 29, 44, 0.24);
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-user-drag: none;
        }

    .ArtistPaintingCap {
        margin-top: 0.6em;
        font-size: calc(var(--ACopySize) * 1.35); /* Original ACopySize */
        letter-spacing: 0.06em;
        opacity: 0.6;
        line-height: calc(var(--ACopySize) * 1.75); /* Original 1.4 */
        }

    .ArtistProse {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        }


/* [B4 TEXT] ================================================================
   [B4 TEXT]
   The statement.

   >>> THIS IS THE ONE ELEMENT ALLOWED TO SCROLL, and only when the window is
   too short to hold it. <<< See the note at the top of this file: a page of
   writing that never scrolls is a promise type alone cannot keep, so the PAGE
   is pinned and the paragraph is what moves, if anything has to.

   Held to about 46 characters a line so it reads as writing rather than as a
   caption stretched across a screen.
   ========================================================================= */

    .ArtistText {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        max-width: 46ch;
        font-size: clamp(0.82rem, 1.75vh, 1.02rem);
        line-height: 1.55;
        display: flex;
        flex-direction: column;
        gap: 0.75em;
        padding-inline-end: 0.5rem;   /* room for the scrollbar when it appears */
        scrollbar-width: thin;
        scrollbar-color: var(--NColor4) transparent;
        }


/* [B5 LINKS] ===============================================================
   [B5 LINKS]
   Instagram, prints, the art CV.

   These moved off the gallery, which is what you asked: the wall should be art
   and nothing else, and these are where someone goes after they have looked.

   >>> THE ICONS CARRY WORDS. <<< An icon on its own is a guess, and at this
   size a word costs almost nothing. "Prints" rather than "Pixels", because
   Pixels means nothing to anyone who does not already know Fine Art America.
   "Art CV" rather than "Resume", because beside a statement it sets the right
   expectation: exhibitions, not jobs.

   >>> THE CV LINK POINTS AT THE 2024 PDF AND IT NEEDS RE-EXPORTING. <<<

   BLOGGER IS IN THE MARKUP, COMMENTED OUT, as you asked. Nothing deleted.
   ========================================================================= */

    .ArtistLinks {
        flex: 0 0 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: clamp(0.8rem, 2vw, 1.6rem);
        margin-top: calc(var(--NGap) * 0.8);
        padding-top: calc(var(--NGap) * 0.7);
        border-top: 1px solid var(--NColor4);
        max-width: 46ch;
        }

    .ArtistLink {
        display: flex;
        align-items: center;
        gap: 0.5em;
        color: var(--NColor1);
        text-decoration: none;
        font-size: clamp(0.72rem, 1.5vh, 0.9rem);
        letter-spacing: 0.04em;
        opacity: 0.75;
        transition: opacity 0.2s var(--NEase);
        }

    .ArtistLink:hover,
    .ArtistLink:focus-visible { opacity: 1; }

    .ArtistLink svg {
        width: clamp(1rem, 2.1vh, 1.3rem);
        height: auto;
        fill: var(--NColor1);
        flex: 0 0 auto;
        }


/* [B6 PLATE] ===============================================================
   [B6 PLATE]
   The full-page portrait, the wash over it, and the curve.
   --------------------------------------------------------------------------
   THE PORTRAIT fills the whole page now rather than half of it, as you asked,
   and the words are written over it.

   THAT NEEDED A SECOND LAYER. The file was cut out against index's dark
   ground; on whitish it reads far too strongly, and the type lands on a face
   and stops being readable. So there are two things here, not one:

       .ArtistPortrait   the picture, held back to --NArtistPortraitFade
       .ArtistWash       a whitish veil, opaque on the left where the words
                         are and clear on the right where they are not

   The wash is what keeps the type at 15.96:1 while the portrait stays plainly
   visible. Two dials: the fade for the picture, --NArtistWash for how far
   across the veil reaches before it clears.

   IT IS A BACKGROUND, NOT AN <img>, for the same two reasons index gives: it
   carries no information so a screen reader should skip it, and there is no
   image element under the cursor for a right-click menu to offer.
   ========================================================================= */

/*  0.85, not 0.5. At half strength the portrait read as a ghost rather than a
    picture, which is not what "fill the page" means. The wash below is what
    protects the type, so the picture itself can be close to full strength.  */

    body.ArtistPage {
        --NArtistPortraitFade: 0.85;
        --NArtistWash: 52%;
        }

/*  >>> THE PORTRAIT IS ALIGNED TO THE RIGHT EDGE AND RUNS THE FULL HEIGHT
    UNDER THE HEADER, STRAIGHT THROUGH THE FOOTER, WHICH YOU ASKED FOR. <<<

    THAT MEANT TAKING IT OUT OF .ArtistMain. The page is a flex column --
    bar, main, footer -- and .ArtistMain has overflow hidden, so anything
    positioned inside it is trapped between the bar and the footer and stops
    dead at the copyright rule. A picture that is meant to pass BEHIND the
    footer cannot live in the box above it.

    So both layers are position: fixed against the window instead, inset 0.
    body.ArtistPage is exactly one window tall with overflow hidden, so fixed
    and absolute describe the same rectangle here -- there is nothing to
    scroll and nothing can drift.

    FIXED AT INSET 0 COVERS THE HEADER TOO, which is not what you want: you
    asked for it to start under the header. Rather than chase the bar's
    height -- it is type plus padding plus the 44px tap floor, so it is a
    different number in every mode and in both languages -- the bar simply
    paints its own whitish ground over the top of the picture, below. The
    portrait genuinely does start at the bottom of the header, because that
    is the first pixel of it you can see.

    background-position IS "right center", NOT A PERCENTAGE. 62% was a crop
    chosen to put the eyes near the middle of the old half-width panel. Right
    means right: the file's right edge and the window's right edge are the
    same line at every width.                                              */

    .ArtistPortrait {
        position: fixed;
        inset: 0;
        z-index: 0;
        background-image: url("../Assets/Negar-Background.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: right center;
        opacity: var(--NArtistPortraitFade);
        pointer-events: none;
        }

    .ArtistWash {
        position: fixed;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to right,
                    var(--NColor5) 0%,
                    rgba(245, 247, 247, 0.92) calc(var(--NArtistWash) * 0.55),
                    rgba(245, 247, 247, 0.55) var(--NArtistWash),
                    rgba(245, 247, 247, 0) calc(var(--NArtistWash) + 22%));
        }

/*  THE BAR'S OWN GROUND. The only reason this rule exists is the one above:
    the picture now reaches the top of the window, and the header has to stop
    it. Whitish is the page colour, so nothing about the bar looks different
    -- it is the same flat field it always was, just painted rather than
    inherited. z-index 4 puts it over the wash and over the words.

    NOT A BORDER, NOT A SHADOW. The bar on Art.html has no edge under it and
    this one should not grow one; the two pages are the same room.          */

    .ArtistPage .ArtBar {
        position: relative;
        z-index: 4;
        background: var(--NColor5);
        }

/*  THE CURVE. Pure decoration: hidden from screen readers, behind the words,
    pointer-events off so it never eats a click.                           */

    .ArtistCurve {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 2;
        width: 100%;
        pointer-events: none;
        line-height: 0;
        }

    .ArtistCurve img {
        width: clamp(14rem, 62vw, 46rem);
        height: auto;
        }

/*  THE COPYRIGHT STRIP. Art.css [A11 FOOT] indents it past the floating
    cluster, and there is no cluster on this page, so it comes back to the
    normal gutter and loses its minimum height. Two lines rather than three:
    the artwork notice belongs on the wall, not on the statement.

    >>> NO BACKGROUND, WHICH YOU ASKED FOR. THE PORTRAIT RUNS THROUGH IT. <<<

    It used to paint whitish so the picture stopped at the rule. It does not
    any more, so the bottom of the portrait is visible behind the copyright
    line and the page reads as one picture rather than a picture with a strip
    cut off it.

    THE TYPE IS STILL READABLE THERE and that is not luck. The copyright sits
    at the far LEFT, and the wash above is fully opaque whitish for the first
    half of the width -- that is the whole point of the wash. z-index 3 keeps
    the words above both layers. The rule above it stays: it is the line that
    tells you the page has ended, and it is dirty blue on whatever is behind
    it, not on a field of its own.                                         */

    .ArtistPage .ArtFoot {
        padding-inline-start: var(--APadX);
        padding-block: calc(var(--NGap) * 0.6);
        min-height: 0;
        position: relative;
        z-index: 3;
        background: transparent;
        }


/* ==========================================================================
   THE FOUR SCREEN MODES
   The same breakpoints as every other page. Landscape splits on HEIGHT,
   portrait splits on WIDTH, 500 / 501.
   ========================================================================== */


/* [MODE B] =================================================================
   Portrait, 501px and up. A tablet is tall but narrow, so the same paragraph
   runs to more lines than it does on a laptop. The painting goes above the
   words rather than beside them, and the type steps down a notch.
   ========================================================================= */

    @media (orientation: portrait) and (min-width: 501px) {

        body.ArtistPage { --NArtistWash: 100%; }

        .ArtistBody {
            flex-direction: column;
            align-items: flex-start;
            gap: calc(var(--NGap) * 0.8);
            }

        .ArtistFigure {
            width: clamp(6rem, 16vh, 9rem);
            align-self: flex-start;
            }

        .ArtistName { font-size: clamp(1.6rem, 4vh, 2.6rem); }
        body.ArtistPage { --NArtistIntro: clamp(1rem, 2.1vh, 1.3rem); }
        .ArtistText { font-size: clamp(0.78rem, 1.5vh, 0.94rem); line-height: 1.5; }
        .ArtistPaintingCap { display: none; }
        }


/* [MODE C] =================================================================
   Landscape, 500px tall or less. A phone on its side: every vertical pixel
   matters, so the type steps down hard and the caption goes.
   ========================================================================= */

    @media (orientation: landscape) and (max-height: 500px) {

        .ArtistWords { padding-block: calc(var(--NGap) * 0.5); }

        .ArtistName { font-size: clamp(1.2rem, 6.5vh, 1.9rem); }
        body.ArtistPage { --NArtistIntro: clamp(0.85rem, 4vh, 1.05rem); }
        .ArtistText { font-size: clamp(0.72rem, 3.4vh, 0.86rem); }

        .ArtistFigure { width: clamp(5rem, 34vh, 8rem); }
        .ArtistPaintingCap { display: none; }
        }


/* [MODE D] =================================================================
   Portrait, 500px or less. A phone upright.

   THE PAINTING DROPS BELOW THE WORDS. A column of type beside a picture at
   390px is neither one thing nor the other, so the picture sits under the
   statement, small, in the corner the curve leaves empty.

   THE WASH COVERS THE WHOLE SCREEN here and the portrait is fainter, because
   at this width the words are over every part of the picture.
   ========================================================================= */

    @media (orientation: portrait) and (max-width: 500px) {

        body.ArtistPage {
            --NArtistPortraitFade: 0.55;
            --NArtistWash: 100%;
            --NArtistIntro: clamp(0.95rem, 2vh, 1.15rem);
            }

    /*  Art.css [MODE D] pushes .ArtFilters onto a row of its own, because on
        the gallery it holds five scrolling category words. Here it holds one
        link, so it stays on the top row with everything else and the bar is
        one line again.                                                    */
        .ArtistPage .ArtFilters {
            order: 0;
            flex-basis: auto;
            overflow: visible;
            }

        .ArtistName { font-size: clamp(1.4rem, 3.4vh, 1.9rem); }
        .ArtistText { font-size: clamp(0.76rem, 1.5vh, 0.9rem); line-height: 1.5; }
        .ArtistLink { font-size: 0.72rem; }

        .ArtistWash {
            background: linear-gradient(to bottom,
                        var(--NColor5) 0%,
                        rgba(245, 247, 247, 0.9) 55%,
                        rgba(245, 247, 247, 0.72) 100%);
            }

        .ArtistBody {
            flex-direction: column-reverse;
            align-items: stretch;
            justify-content: flex-end;
            gap: calc(var(--NGap) * 0.6);
            }

        .ArtistFigure {
            width: 38%;
            align-self: flex-end;
            }

        .ArtistPaintingCap { display: none; }
        .ArtistLinks { gap: 0.9rem; max-width: none; }
        .ArtistText  { max-width: none; }
        }


/* ==========================================================================
   FARSI
   Art.css [A15 FARSI] already pins the frame to ltr and swaps the face. Only
   the parts unique to this page need saying: the words read right to left,
   and the painting moves to the other side of the column.
   ========================================================================== */

    html[dir="rtl"] .ArtistWords,
    html[dir="rtl"] .ArtistText,
    html[dir="rtl"] .ArtistLinks,
    html[dir="rtl"] .ArtistBody {
        direction: rtl;
        text-align: right;
        }

/*  THE PORTRAIT MIRRORS WITH THE TYPE. In English the words are on the left
    and the picture is pinned right; in Farsi the words are on the right, so
    the picture is pinned left and the wash runs the other way. Same rule,
    read in the other direction -- the portrait is always on the side the
    reading is not.                                                        */

    html[dir="rtl"] .ArtistPortrait { background-position: left center; }

    html[dir="rtl"] .ArtistWash {
        background: linear-gradient(to left,
                    var(--NColor5) 0%,
                    rgba(245, 247, 247, 0.92) calc(var(--NArtistWash) * 0.55),
                    rgba(245, 247, 247, 0.55) var(--NArtistWash),
                    rgba(245, 247, 247, 0) calc(var(--NArtistWash) + 22%));
        }

    html[lang="fa"] .ArtistText,
    html[lang="fa"] .ArtistLead,
    html[lang="fa"] .ArtistName,
    html[lang="fa"] .ArtistLink,
    html[lang="fa"] .ArtistPaintingCap {
        font-family: var(--NFontFA);
        line-height: 1.9;
        }


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

    @media (prefers-reduced-motion: reduce) {
        .ArtistLink { transition: none; }
        }

/* ==========================================================================
   END OF Artist.css
   ========================================================================== */