@charset "UTF-8";
/* ==========================================================================
   NEGAR-DEFAULT.CSS
   ntabibian.com  ::  SITE-WIDE STYLE LAYER  ::  v2
   --------------------------------------------------------------------------
   WRITTEN     : 2026-09-05
   AUTHOR      : S. Negar Tabibian (rules + design)  /  drafted with Claude
   SUPERSEDES  : 001 NTabibian.com v1 / CSS / Negar-Default.css
   --------------------------------------------------------------------------
   WHAT THIS FILE IS
   This is the ONLY stylesheet every page on ntabibian.com loads. It holds the palette, the type, the left column, the discs, the copyright, the footer curve, the image protection and the four screen modes.

   Nothing in this file assumes any other page exists. It was rebuilt from
   scratch. Every rule here is used by index.html today.
   --------------------------------------------------------------------------
   HOW TO FIND THINGS IN DREAMWEAVER
   Every block below starts with a searchable tag in square brackets.
   Search (Ctrl+F) for the tag to jump straight to it:

       [00 RESET]           browser reset
       [01 PALETTE]         colors and the design tokens
       [02 SIZES]           the measurement rules, in one place
       [03 TYPE]            fonts, sizes, the green dot
       [04 A11Y]            skip link, focus rings, screen-reader helper
       [05 PROTECT]         right-click / drag / save protection
       [06 LAYOUT]          the body grid: column + main
       [07 COLUMN]          the left column shell and the thin rule
       [08 LOGO]            logo at the top of the column
       [09 LANG]            EN / FA switch
       [10 DISC]            the circular buttons (Art, Research, Design, Contact)
       [11 COPYRIGHT]       copyright line at the bottom of the column
                            (the footer curve and the background portrait
                            used to be [12 CURVE] and [13 PORTRAIT] here.
                            They live in index.css now, under [H4 CURVE] and
                            [H5 IMAGE], because only the four pages that load
                            index.css use them. Searching the old tags in
                            this file finds nothing but this line.)
       [15 RTL]             everything that changes when the page is in Farsi
       [MODE A]             HORIZONTAL STANDARD   landscape, min-height: 501px
       [MODE B]             VERTICAL STANDARD     portrait,  min-width: 501px
       [MODE C]             HORIZONTAL SMALL      landscape, max-height: 500px
       [MODE D]             VERTICAL SMALL        portrait,  max-width: 500px
   ========================================================================== */


/* ==========================================================================
   [00 RESET]
   --------------------------------------------------------------------------
   Meyer reset, cut down to only the elements this site actually uses.
   v1 reset listed ~90 tags including <applet>, <marquee>, <ruby>. All gone.

   CHANGED FROM v1: v1 had `button:focus { outline: none; }`. That is removed
   deliberately. It made the site unusable for anyone navigating by keyboard,
   because the focus ring is the only thing telling them where they are.
   See [04 A11Y] for what replaces it.
   ========================================================================== */

    *, *::before, *::after {
        box-sizing: border-box;
        }

    html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img,
    ul, ol, li, nav, main, aside, header, footer, section, figure,
    figcaption, button, svg {
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        vertical-align: baseline;
        }

    ul, ol {
        list-style: none;
        }

    img, svg {
        display: block;
        max-width: 100%;
        }

    button {
        background: none;
        cursor: pointer;
        color: inherit;
        }


/* [01 PALETTE] ==========================================================================
   [01 PALETTE]
   --------------------------------------------------------------------------
   Your five colors, unchanged, same variable names as v1 so old CSS still
   reads. NColor1 and NColor5 are the primaries; NColor3 and NColor2 are the
   accents, green used more than yellow.

   CONTRAST, MEASURED (WCAG 2.2, against NColor1 navy):
       NColor5 whitish blue  15.96 : 1   passes AAA
       NColor2 yellow        11.35 : 1   passes AAA
       NColor3 green          9.22 : 1   passes AAA
       NColor4 dirty blue     9.12 : 1   passes AAA
   All four are safe on navy at any text size. This palette is genuinely good.

   WARNING, THE OTHER DIRECTION: green on whitish is 1.73 : 1 and yellow on
   whitish is 1.41 : 1. Both are far below the 4.5 : 1 minimum. Never set
   green or yellow TEXT on a light background anywhere on this site. They are
   fine as strokes, rules, dots and shapes, which is all they are used for.
   ========================================================================== */

    :root {
        --NColor1: #091D2C;  /* Navy Blue     - primary, the ground          */
        --NColor2: #FFCC00;  /* Yellow        - accent, used sparingly       */
        --NColor3: #94D009;  /* Green         - accent, the main accent      */
        --NColor4: #9DC5BE;  /* Dirty Blue    - rules, hairlines, quiet text */
        --NColor5: #F5F7F7;  /* Whitish Blue  - primary, "white" on this site*/

    /* THE SECOND SET OF NAMES IS GONE. You asked whether --NInk, --NGround,
       --NRule, --NAccent and --NAccentAlt were duplicating --NColor1 to
       --NColor5. They were, and every rule in this file now names the color
       directly. Fewer names to hold in your head, and Ctrl+F for --NColor3
       finds every single place green is used instead of half of them.

       WHAT THAT LAYER WAS FOR, so the reasoning is on record rather than
       lost. It separated WHICH color from WHAT IT IS DOING. On a big site
       with several people editing it, that pays: someone can decide the thin
       rules should be green instead of dirty blue by changing one line,
       without hunting through the file deciding which of forty --NColor4
       uses are rules and which are something else.

       On a five-color site you maintain alone, it costs more than it pays.
       Every time you read a rule you had to look up a name to find another
       name, and your instinct that this was duplication was right.

       IF YOU EVER WANT IT BACK, it is the five lines that used to be here
       plus a find-and-replace. Not a decision you are locked out of.       */

    /* THE ICON COLOURS ARE NO LONGER SET HERE, AND THAT IS ON PURPOSE.

       You asked for the four disc drawings to be linked as .svg files rather
       than pasted into the page, so you can keep editing them in Illustrator.
       That is now how it works, and it comes with one trade worth knowing:
       an SVG loaded through <img> is sealed off from this stylesheet. CSS
       cannot reach inside it.

       So the colors live in the .svg files themselves, on your two layers,
       Base and Color. To recolor an icon you open it in Illustrator, change
       the layer, and re-export over the file in Assets. That is a fair swap
       given you want Illustrator to stay the source, and it is why the old
       --NIconA and --NIconB variables have gone: they would have looked live
       and done nothing, which is worse than not being there at all.        */
        }


/* [02 SIZES] ==========================================================================
   [02 SIZES]
   --------------------------------------------------------------------------
   Every measurement rule you gave me, gathered in one place so you never have
   to hunt for a number in the middle of a rule.

   FIRST, ABOUT THE INCH. In CSS, 1in is defined as exactly 96px. It is NOT a
   physical inch on the screen. So 2in = 192px, 4in = 384px, 1.5in = 144px,
   8in = 768px. The unit is used below because it is how you think about the
   sizes, and it is completely valid CSS. Nothing is lost by using it.

   YOUR RULES, AS WRITTEN:
     left column   = 1/6 of screen, never under 1.5in, never over 4in
     logo          = 80% of column width, never over 2in
     each disc     = 80% of column width, never over 2in
     curve, wide   = 65vw, never under 2in
     curve, tall   = 80vw, never under 2in, never over 8in

   ONE PLACE I ADDED TO YOUR RULE, ON PURPOSE, AND WHY:
   The column has to stack five discs vertically (logo, Art, Research, Design,
   Contact) plus four labels plus the copyright. At the full 2in each, that is
   about 1190px of content. A 13" laptop is 800px tall and a common desktop is
   1080px. It would not fit and would clip.

   So each disc is ALSO capped by screen height, via --NDiscCapH below. On a
   big screen your 2in rule wins. On a short screen the height cap takes over
   and everything still fits. If you would rather it clip than shrink, set
   --NDiscCapH to 100vh and your rule alone applies.

   As a second safety net the column can scroll if content still overflows.
   You will normally never see this.

   MY ANSWER ON THE CURVE SIZES YOU PROPOSED:
   The 80vw / 2in-minimum pair for tall screens is well judged. Worth knowing:
   the minimum will realistically never fire. The narrowest phone in use is
   about 320px wide, which is 3.3in, and 80% of that is 2.6in, already over
   your 2in floor. So it is harmless insurance, keep it.

   For wide screens, 65vw with a 2in floor has the same story, and it is
   missing the constraint that WILL matter: on an ultrawide monitor, 65vw is
   over 2200px and the curve starts to dominate the page. So --NCurveW_Wide
   carries a ceiling as its third value. It is 18in as you have it set today,
   in index.css [H4 CURVE]. Delete that third value to go back to exactly
   what you asked for.
   ========================================================================== */

    :root {

    /* ---- LEFT COLUMN -------------------------------------------------- */
        --NSideMin:   1in;                 /* your floor, original 1.5"       */
        --NSideMax:   1.5in;                   /* your ceiling, original 4"   */
        --NSideIdeal: 12.5vw;             /* your original 1/6 of the screen  */
        --NSideW: clamp(var(--NSideMin), var(--NSideIdeal), var(--NSideMax));
		
        --NLogoW: min(
                    calc(var(--NSideW) * 0.8),             /* original 0.8  */
                    var(--NDiscMax),
                    14vh
                    );		
        --NLogoH: calc(var(--NLogoW) * 0.8552);				/* original: calc(var(--NLogoW) * 0.8552) */
		       												/* --NLogoH: the artwork is 130.98 x 112.01, so its height is its width times 0.8552. */

    /* ---- --NGap : THE ONE SPACING UNIT ---------------------------------
       Everything in the column is a multiple of this. 

       WHAT IT DRIVES, re-checked against the declarations 2026-09-14, since
       four of these had drifted as you tuned:

           0.25  x --NGap    disc to its label        .Disc gap
           1     x --NGap    disc to disc             .SideNav ul gap
           1     x --NGap    logo to EN / FA          .LangSwitch margin-top
           2.5   x --NGap    EN / FA to the Art disc  inside --NContentTop
           1     x --NGap    the page padding         --NPad
           1     x --NGap    the disc label size      .DiscLabel
           1     x --NGap    the EN / FA size         .LangSwitch
           0.75  x --NGap    the copyright size       .Copyright
           0.075 em          the space inside EN / FA .LangSwitch gap, the
                                                      one thing here that is
                                                      NOT a gap multiple

       CHANGE THIS ONE LINE AND THE WHOLE COLUMN RESIZES IN PROPORTION. That
       is the point of collapsing them: there is one number to tune instead of
       three that had to be kept in sympathy with each other by hand.

       IT IS A vh VALUE, on purpose. It is a vertical rhythm, so it should
       follow the height of the window. The horizontal measurements in this
       file use vw or a multiple of --NDiscW.                         */				
        --NGap: clamp(1rem, 2vh, 1.25rem);
		
		
    /* ---- DISCS AND LOGO ------------------------------------------------ */
        --NDiscMax:   2in;                   /* your ceiling                */
        --NDiscCapH:  11.5vh;                /* added: the height cap       */
    /*  min() ON THE OUTSIDE, max() ON THE INSIDE, AND THE ORDER MATTERS.

        Your version used clamp(floor, ideal, ceiling) with the floor set to
        0.6 x --NSideW. clamp has a rule that catches people out: when the
        floor comes out larger than the ceiling, the FLOOR wins. On a
        landscape phone the column is wide relative to the screen and the
        screen is only 390px tall, so the floor computed to 111px while the
        height cap said 43px, and the floor won. The discs came out more than
        twice the height they were allowed and the column overflowed by 143px
        on every page.

        Rewritten so a ceiling can never lose:

            max(...)  the size you want: 5.25 gaps, but never thinner than
                      0.35 of the column, so it does not disappear
            min(...)  every ceiling, applied last, so the shortest one always
                      wins: the column width, your 2in, and the height cap

        Your numbers are all still here and still mean what they meant. Only
        the arithmetic is arranged so it cannot invert.                    */

        --NDiscW: min(
                    max(
                        calc(var(--NGap) * 5.25),      /* the size you want  */
                        calc(var(--NSideW) * 0.35)     /* never thinner than */
                        ),
                    calc(var(--NSideW) * 0.95),        /* original 0.80      */
                    var(--NDiscMax),
                    var(--NDiscCapH)
                    );

    /*  --NRINGW IS THE CIRCLE ITSELF. --NDiscW is the space one disc gets;
        you set the circle to fill 0.85 of it, which leaves the ring a little
        air inside its own slot. That 0.85 used to live only in .DiscRing in
        [10 DISC], which meant anything else that needed to line up with a
        circle had to know the number too, and one of them was already out by
        eleven pixels. It is written once here now, .DiscRing reads it, and so
        does the top bar in [MODE D].

        TWO MODES OPT OUT, and you wrote both. [MODE B] and [MODE C] give
        .DiscRing its own size off --NSideW, so they do not read --NRingW at
        all. Changing 0.85 here moves the circles in [MODE A] and the logo
        alignment in [MODE D]; the other two you change where they are.   */

        --NRingW: calc(var(--NDiscW) * 0.85);


    /* ---- WHERE THE CONTENT STARTS ---------------------------------------
       ONE NUMBER THAT LINES UP THE DISCS WITH "THIS IS", AND IT IS NOW
       CALCULATED RATHER THAN CHOSEN.

       You set the spacing above it:

           the top padding
           the logo
           1 gap
           the EN / FA switch
           2 gaps
           the Art disc, and level with it, "This is"

       So the position is no longer a number picked by eye. It is the sum of
       everything stacked above it, which is what the calc below adds up. The
       heading and the disc stack both read it, so they cannot drift apart,
       and if you change the padding, the logo size or the gap, both move
       together and stay level automatically.

       FOR THE SUM TO BE EXACT, the logo and the switch need heights this file
       knows rather than heights the browser works out from their contents.
       That is why [08 LOGO] and [09 LANG] now state a height instead of
       letting the image and the text decide. Left to size themselves, this
       calc would be a good guess and the alignment would be a pixel or two
       out at some window sizes.


       --NLangH: one --NGap, flat. It used to be 2.4 gaps, on the reasoning
       that the switch is a line of type plus half an em of padding above
       and below; you took it down to 1 and the alignment still measures 0,
       so the reasoning was more generous than the switch actually needs.
       The old value is on the line itself as history.

       In [MODE D] the column becomes a top bar and there is nothing to line
       up with, so this is switched off there.                             */

        --NLangH: calc(var(--NGap) * 1);     				/* original: calc(var(--NGap) * 2.4) */

        --NContentTop: calc(
                        var(--NPad)
                        + var(--NLogoH)
                        + var(--NGap) * 1.5
                        + var(--NLangH)
                        + var(--NGap) * 2.5
                        );

    /* ---- MISC ----------------------------------------------------------- */
        --NRuleWidth: 1px;                   				/* the thin vertical line      */
    /* ---- THE TWO PADDINGS, ONE PER AXIS --------------------------------
       Your rule, made explicit: anything vertical measures from --NGap,
       anything horizontal from --NSideW. One variable each, so no rule ever
       picks the wrong axis by accident.

           --NPad    top and bottom   ->  --NGap
           --NPadX   left and right   ->  --NSideW

       --NPadX carries a floor so it does not vanish when the column is at its
       narrowest, and a ceiling so it does not swallow the page when the
       column is at its widest.                                            */
        --NPad:       var(--NGap);       /* original clamp(0.75rem, 1.6vw, 1.75rem)*/
        --NPadX:      clamp(0.75rem, calc(var(--NSideW) * 0.22), 2.5rem);
        --NEase:      cubic-bezier(0.22, 0.61, 0.36, 1);
        }


/* ==========================================================================
   [03 TYPE]
   --------------------------------------------------------------------------
   Your fonts, unchanged. Century Gothic first, then the geometric fallbacks
   that come closest on machines that do not have it.

   THE PERSIAN FACE IS PARASTOO. Century Gothic has no Persian glyphs at all,
   so before a Persian font was loaded the browser was quietly falling back to
   whatever it could find, usually Tahoma on Windows. Tahoma is a system
   interface font from 1994 and it was never drawn to be read at 48 pixels as
   a headline. That is what looked wrong.

   Parastoo is by Saber Rastikerdar, who also made Vazirmatn, and it is the
   warmer and more literary of the two. Persian-first, SIL Open Font Licence,
   free to self-host commercially and permanently.

   IT COMES FROM A CDN TODAY. See the note at the top of index.html for the
   five-minute job that moves it into Assets/Fonts and removes the last
   outside dependency on the site.

   THE FALLBACK ORDER IS YOURS: Parastoo, then Noto Naskh Arabic, then
   A Rooznameh. If the first fails to load the second is tried, and so on
   down to the system faces, so a visitor never sees a blank page, only a
   plainer one.

   ONE THING TO KNOW ABOUT A ROOZNAMEH SITTING THIRD. Only the first two are
   actually downloaded by the site. Rooznameh is named but not shipped,
   because its licence does not say whether it may be, so it will only ever
   appear for a visitor who happens to have it installed on their own machine.
   That is a handful of people. It costs nothing to leave it in the list and
   it is honest about where it stands: the moment its licence is cleared, it
   moves up and gets loaded properly. The comparison page you used to choose
   between the faces is "Farsi Font Options.html", now parked in
   "Base Files NOT TO UPLOAD" rather than on the site.
   ========================================================================== */

    :root {
        --NFontEN: "Century Gothic", "Questrial", "Futura", "Avenir Next",
                   "Trebuchet MS", Helvetica, Arial, sans-serif;
        --NFontFA: "Parastoo", "Noto Naskh Arabic", "A Rooznameh",
                   "Vazirmatn", "Segoe UI", "Tahoma", "Geeza Pro", sans-serif;
    /*  THE DOT'S FONT. Courier New leads, as it effectively did in v1, and
        the generic keyword `monospace` is last where a generic keyword
        belongs. Do NOT put ui-monospace at the front: on some systems it
        resolves to a font whose full stop is a filled square, and the dot
        stops being a dot.                                                  */
        --NFontDot: "Courier New", Consolas, "Lucida Console",
                    "Lucida Sans Typewriter", Monaco, "Andale Mono", monospace;
        }

    html {
        -webkit-text-size-adjust: 100%;
        }

    body {
        background-color: var(--NColor1);
        color: var(--NColor5);
        font-family: var(--NFontEN);
        line-height: 1.2;
        min-height: 100vh;
        min-height: 100svh;          /* svh keeps phone toolbars from lying */
        overflow-x: hidden;
        }

/* ---- THE GREEN DOT ------------------------------------------------------
   Set in a monospace face on purpose. It is a square-ish, deliberate dot,
   noticeably heavier than the period in Century Gothic, which is what gives
   it the punctuation-as-mark feeling. Every line that ends in a dot gets one
   of these, in green, and the dot is a separate <span> so switching the page
   to Farsi never overwrites it.                                           */

/*  display: inline, NOT inline-block, AND THAT IS THE WHOLE FIX FOR THE DOT
    FALLING TO THE NEXT LINE.

    An inline-block is an atomic box. A browser is allowed to break a line
    immediately before one even when there is no space in the markup, and that
    is exactly what was happening: "This page does not exist" filled the line
    and the green dot dropped underneath it on its own. It looked like a typo
    in your writing, which is the worst kind of bug.

    A plain inline element gets no such break opportunity. With no whitespace
    between the words and the dot in the HTML, and both inline, the browser
    treats them as one unbreakable run. The dot now follows its sentence
    everywhere, at every width, in both languages.

    Nothing was lost in the swap. font-size, line-height, the horizontal
    margin and vertical-align all work exactly the same on an inline element.
    Only transform would not, and the dot does not use one.

    DO NOT CHANGE THIS BACK TO inline-block. If a future dot ever needs a
    transform, give it a nowrap wrapper at the same time or the break comes
    straight back.                                                          */

/*  THE DOT IS DRAWN BY ::before NOW, exactly like the colon in index.css
    [H8 COLON]. This is the fix for the margin going dead on you.

    THE HISTORY, so the reasoning is not lost. The dot began as an
    inline-block, which took its negative margin properly but gave the browser
    somewhere to break the line, so it could drop onto a line of its own after
    "This page does not exist". Making it plain inline killed the break, but a
    negative margin on a plain inline element shifts the start of the inline
    box rather than pulling the glyph across, so the tightening you had tuned
    quietly stopped doing anything. You were right about the cause.

    THAT SECOND STEP WAS NOT ENOUGH AND I WAS WRONG ABOUT WHY. Making the
    span plain inline removed one break opportunity, but the inline-block
    inside it is still an atomic box of its own, and a browser is allowed to
    break the line in front of one of those. On a phone it did: at 390px the
    dot after "Negar Tabibian" dropped to a line by itself, and at 320px so
    did the one after "I paint diaspora". Exactly the fault you reported,
    from the half of the mechanism I had left in place.

    SO THE MARK IS PLAIN INLINE TOO NOW, and this is where I owe you a
    correction: the negative margin does work on a plain inline. I said it
    did not and that was the reason the inline-block was kept. Measured on
    the real page, the two behave differently only in one respect, and it is
    the respect that matters here:

        display: inline-block    the pull works, and the browser is allowed
                                 to break the line in front of the mark

        display: inline          the pull works, and it is not, because the
                                 line breaking rules forbid a break in front
                                 of a full stop that is ordinary text

    So the mark is inline and the pull stays a margin, --NDotPull, exactly
    the dial you tuned. margin-inline-start, not margin-left, so it pulls
    toward the text in English and toward the text in Farsi with one rule.

    MEASURED AFTER: no dot on a line of its own anywhere, on any of the four
    pages, at 320, 360, 390, 414, 430, 768, 834, 844, 1024 and 1440, in both
    languages. The colon in index.css [H8 COLON] is a separate case and the
    note there explains why it has to stay a box.

    THE SPAN IS EMPTY IN THE HTML NOW. The character comes from content: "."
    below. With CSS switched off entirely the dot is not drawn, on a page that
    is already unstyled black text on white, which is a fair price for
    punctuation that never breaks and always sits where you put it.

    --NDotPull, declared in index.css [H6 FARSI], is the one dial. It is more
    negative in Farsi because Naskh letters end in a long flat stroke that
    already reads as space. The fallback below is the English value, so the
    dot still works on any page that does not load index.css.             */

    .Dot {
        display: inline;
        }

    .Dot::before {
        content: ".";
        font-family: var(--NFontDot);
        font-size: 1.6em;
        line-height: 0;
        display: inline;								/* original inline-block: the break opportunity was here */
        margin-inline-start: var(--NDotPull, -0.15em);
        vertical-align: baseline;
        }

    .Green  { color: var(--NColor3); }
    .Yellow { color: var(--NColor2); }

/* ---- .Hidden : PUT AWAY WITHOUT THROWING AWAY --------------------------
   Add class="Hidden" to any element to take it off the page while leaving it
   in the file. Used on the X link on Contact.html, which you wanted hidden
   rather than deleted.

   It was in v1, went missing in the rebuild, and is back because the contact
   page needs it.

   !important IS CORRECT HERE rather than lazy. This class has exactly one job
   and it has to beat whatever display the element would otherwise get.
   Without the flag it loses to any rule of equal weight, and it did:
   .FollowIcons a sets display: inline-flex, which counts as (0,1,1) against
   .Hidden's (0,1,0), so the hidden X link was still on screen. A single
   purpose utility is the one shape of rule that earns the flag.

   NOTE WHAT IT IS NOT. display: none removes an element from the page for
   everyone, including screen readers. That is right for the X link, which you
   are retiring. It is the WRONG tool for something you want visible to a
   screen reader but not to the eye: that is .SrOnly in [04 A11Y].         */

    .Hidden {
        display: none !important;
        }


/* ==========================================================================
   [04 A11Y]
   --------------------------------------------------------------------------
   Accessibility is a standing rule for every page on this site, so the parts
   that apply everywhere live here rather than in a page file.

   WHAT IS HANDLED HERE:
     - a skip link, so a keyboard user can jump past the column to the content
     - a visible focus ring on everything focusable, in green, always
     - .SrOnly, for text that screen readers read and eyes never see
     - a global reduced-motion switch for anyone who gets motion sick
     - a 44px minimum touch target on every link and button
   ========================================================================== */

/* ---- SKIP LINK ---------------------------------------------------------
   Off-screen until it is focused, then it drops into the top-left corner.
   It is the first thing in the tab order on every page.                   */

    .SkipLink {
        position: absolute;
        top: -100px;
        left: var(--NPad);
        z-index: 999;
        padding: 0.75em 1.25em;
        background: var(--NColor5);
        color: var(--NColor1);
        font-size: 1rem;
        text-decoration: none;
        border-radius: 4px;
        transition: top 0.2s var(--NEase);
        }

    .SkipLink:focus {
        top: var(--NPad);
        }

/* ---- FOCUS RING --------------------------------------------------------
   :focus-visible shows the ring for keyboard users and hides it for mouse
   users, which is the behavior everybody actually wants. NEVER set
   `outline: none` anywhere on this site without putting something else in
   its place.                                                              */

    :where(a, button, [tabindex]):focus-visible {
        outline: 3px solid var(--NColor3);
        outline-offset: 3px;
        border-radius: 2px;
        }

/* ---- SCREEN-READER-ONLY TEXT ------------------------------------------
   Used for the full list of rotating lines, so a screen reader gets all six
   statements in one calm pass instead of being interrupted every second. */

    .SrOnly {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
        }

/* ---- TOUCH TARGETS ----------------------------------------------------- */

    a, button {
        min-height: 44px;
        }

/* ---- REDUCED MOTION -----------------------------------------------------
   If the visitor has asked their system to reduce motion, everything stops.
   The rotating lines become a static stacked list instead, handled in
   index.css and Negar-JS.js.                                         */

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.001ms !important;
            scroll-behavior: auto !important;
            }
        }


/* ==========================================================================
   [05 PROTECT]
   --------------------------------------------------------------------------
   Image and copyright protection. Read this note before changing anything in
   it, because there is a real trade-off inside.

   WHAT THIS ACTUALLY DOES, HONESTLY. Nothing in CSS or JavaScript can stop a
   determined person from taking an image off a web page. They can screenshot
   it, open the network tab, or read the source. Anyone telling you otherwise
   is selling something. What the measures below DO achieve is stopping the
   casual, one-second grab: right-click and Save Image As, and click-and-drag
   to the desktop. That is the great majority of real-world copying, so they
   are worth having, as long as you know the ceiling.

   THE MEASURES, STRONGEST FIRST:
     1. The portrait is a CSS background-image, not an <img>. There is no
        image element under the cursor, so "Save image as" does not appear in
        the menu at all. This is the single most effective thing here, and it
        costs nothing.                            -> index.css [H5 IMAGE]
     2. THE FOUR DISC ICONS ARE NOT COVERED BY THAT, and this used to claim
        they were. They were inline SVG once; they are <img> elements now,
        pointing at the four "Disc - ...svg" files in Assets, which was the
        right call for other reasons and does mean a right-click over a disc
        offers to save the drawing. They are line drawings rather than
        artwork, so the exposure is small, but it is real. Item 3 below is
        what covers them.                         -> [10 DISC]
     3. Right-click and drag are blocked in JavaScript.       -> Negar-JS.js
     4. `noimageindex` and `max-image-preview:none` in the page head tell
        search engines not to index or preview any image.     -> index.html
     5. Hotlink protection in .htaccess stops other sites embedding your
        files directly off your server.                       -> .htaccess

   WHERE THIS COLLIDES WITH ACCESSIBILITY, AND WHAT I DID:

   (a) TEXT SELECTION. v1 set `user-select: none` on the whole <body>. That
       also blocks: selecting a sentence to run it through a translator,
       which for a bilingual site is a real loss; screen magnifier users who
       select text to track their place; and anyone copying your email off
       the contact page. It protects nothing, because text can be read from
       View Source anyway.
       DONE HERE: images and decorative shapes are unselectable, TEXT STAYS
       SELECTABLE. To go back to v1 behavior, uncomment the .NoSelect block.

   (b) DEVTOOLS KEY BLOCKING. v1 blocked F12, Ctrl+Shift+I, Ctrl+U and
       Ctrl+S. Ctrl+S in particular is how some assistive setups save a page
       to read offline, and blocking it breaks that. It also stops nobody:
       devtools opens from the browser menu regardless.
       DONE HERE: it is off by default and lives behind a single true/false
       switch at the top of Negar-JS.js. Flip it if you want it back.
   ========================================================================== */

    img, svg, .Portrait, .NoDrag {
        -webkit-user-drag: none;
        -webkit-user-select: none;
        user-select: none;
        }

    .Portrait {
        pointer-events: none;
        }

/*  Uncomment to block selecting ANY text on the site, as v1 did.
    Read note (a) above first.

    body {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        }
*/


/* ==========================================================================
   [06 LAYOUT]
   --------------------------------------------------------------------------
   	The body is a two-part grid: the left column, then everything else.

   	In three of the four screen modes the column is fixed to the left edge and   the main area is inset by exactly the column width. 
	In MODE D, small vertical, the whole thing becomes one scrolling stack instead. See [MODE D].

   	The DOM order is: skip link, column, main, curve. That order is also the reading order for a screen reader and the tab order for a keyboard, and it holds in all four modes, because nothing is reordered visually against the source. That is deliberate.
   ========================================================================== */

    .Main {
        position: relative;
        z-index: 10;
        margin-left: var(--NSideW);
        margin-right: var(--NSideW);
        padding: var(--NContentTop) 0 var(--NPad); 	/* var(--NContentTop) 0 var(--NPad) */
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        }

/*  WHY flex-start AND NOT center. Centring put the heading wherever the text
    happened to leave it, which changed with the window and with the length of
    the longest rotating line, so the discs could never be lined up with it
    reliably. Now the top edge is pinned to --NContentTop, the same number the
    disc stack uses, and the two stay level at every size.                  */


/* ==========================================================================
   [07 COLUMN]
   --------------------------------------------------------------------------
   The left column. Navy ground, thin dirty-blue rule down its right edge.

   THE THIN LINE. You said you like it, so it is kept exactly: 1px, NColor4,
   full height, on the right edge of the column. It is a border rather than a
   separate element, so it can never drift out of alignment with the column.
   Its width is --NRuleWidth in [02 SIZES] if you ever want it heavier.

   Three stacked parts, top to bottom:
       .SideTop     logo, then the EN / FA switch
       .SideNav     the three discs, vertically centered in whatever is left
       .SideBottom  the Contact disc, then the copyright line
   ========================================================================== */

    .SideColumn {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        width: var(--NSideW);
        height: 100vh;
        height: 100svh;

    /*  NO BACKGROUND COLOUR, ON PURPOSE. The body is already this navy, so
        the column looks identical either way, and leaving it transparent is
        what lets the footer curve cross behind it exactly as it does on the
        live v1 site. Paint the column navy and the curve's left tip
        disappears. v1 left it transparent too, for the same reason.

        The one thing to know: because it is see-through, very tall content in
        the main area would slide behind it when scrolled. Nothing on this
        page is tall enough for that. If a future page is, give that page's
        own stylesheet a background-color on .SideColumn and accept losing the
        tip of the curve.                                                    */

        border-right: var(--NRuleWidth) solid var(--NColor4);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: var(--NPad) 0;
        gap: var(--NGap);
        overflow-y: auto;     /* safety net, see the note in [02 SIZES]     */
        overflow-x: hidden;
        scrollbar-width: thin;
        }

    .SideTop,
    .SideBottom {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        }

/*  THE DISC STACK IS POSITIONED, NOT CENTRED, and this is the other half of
    the alignment you asked for.

    It used to take the leftover height and center itself in it, which meant
    its position depended on how tall the logo and the copyright happened to
    be. Now it is pinned to --NContentTop, measured from the top of the
    window, which is the same value that positions the "This is" line in
    .Main. Same number, same origin, so the top of the first disc and the top
    of the heading are level by construction rather than by tuning.

    Taking it out of the flow is what lets the column keep the logo at the top
    and the copyright at the bottom (justify-content: space-between above)
    while the discs sit wherever --NContentTop says, independently of both.

    In [MODE D] this goes back to position: static, because the column becomes
    a top bar there and there is nothing beside it to line up with.        */

    .SideNav {
        position: absolute;
        top: var(--NContentTop);
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        }

    .SideNav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--NGap);
        width: 100%;
        }

/*  The horizontal rule that only appears in MODE D, under the top bar.
    Hidden in every other mode. See [MODE D].                               */

    .SideRule {
        display: none;
        }


/* ==========================================================================
   [08 LOGO]
   --------------------------------------------------------------------------
   Top of the column, centered, 80% of the column width, never over 2in.
   Clicking it returns to the home page.

   THE FILE IS "NegART Logo on Dark - web.svg", which is your new SVG with its
   viewBox corrected. The full explanation is in index.html at [P4 LOGO], and
   your original export is in Assets untouched beside it. v1's
   NegarLogo/LogoOnDark.png is no longer used anywhere and was not carried
   over.

   THE MARK IS NOT SQUARE. It is 135 wide by 116 tall, an aspect of 1.17, where
   v1's PNG was square with the difference padded out as empty space. So the
   width rule below is your 80% rule and the height simply follows. If it now
   reads as sitting slightly high in the column, that empty padding going away
   is why, and the fix is a little top margin here rather than anything in the
   file.

   THE LINK GOES TO "/" NOT "index.html". That is what keeps the address bar
   reading https://ntabibian.com/ with nothing after the slash, which is what
   you asked for. The other half of that is naming the file index.html so the
   server serves it for the bare domain automatically. Both halves are done.
   ========================================================================== */

/*  THE HEIGHT IS STATED, NOT LEFT TO THE IMAGE. --NContentTop in [02 SIZES]
    adds this height up to work out where the disc stack and the heading
    begin, so it has to be a number this stylesheet knows rather than one the
    browser derives from the file. --NLogoH is the width times the artwork's
    own proportion, so it comes to exactly the same size, just knowably.   */

    .LogoLink {
        display: block;
        width: var(--NLogoW);
        height: var(--NLogoH);
        min-height: 0;                  /* overrides the 44px in [04 A11Y] */
        line-height: 0;
        margin-left: 0.5vw;
        }

    .LogoLink img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        }

/*  On the home page the logo already points at the page you are on. It stays
    clickable, because people expect it to be, but it is dimmed very slightly
    so it does not read as an invitation.                                   */

    .LogoLink[aria-current="page"] {
        opacity: 0.9;
        }


/* ==========================================================================
   [09 LANG]
   --------------------------------------------------------------------------
   The EN / FA switch, directly under the logo.

   HOW THE BILINGUAL SYSTEM WORKS, IN ONE PARAGRAPH. Every piece of text on
   the page sits in a <span class="T"> carrying two attributes, data-en and
   data-fa. The two buttons here tell Negar-JS.js which of the two to show.
   The script writes the chosen string into every .T on the page, sets
   lang="fa" and dir="rtl" on the <html> element, adds .Lang-fa to the body
   so [15 RTL] can adjust the layout, and remembers the choice in the
   browser so the visitor's next page arrives in the language they picked.

   WHAT I NEED FROM YOU TO FINISH IT. Only Farsi strings, nothing technical:
   a Farsi <title> for each page, the Farsi copyright line, and the Farsi for
   any UI word that gets added later. You already gave me the landing page
   ones. Every string lives in the HTML, never in the script, so you can
   change them in Dreamweaver without touching any code.

   THE ONE TRADE-OFF, STATED PLAINLY. Because both languages live in one
   file, Google indexes the English and never sees the Farsi. If you want the
   Farsi to rank in Persian search results, the answer is a second set of
   files under /fa/ with their own addresses. That is roughly double the
   upkeep. My recommendation: run it this way now, and if Persian search
   traffic turns out to matter, split it then. Nothing here would be wasted.
   ========================================================================== */

/*  direction: ltr IS THE FIX FOR THE SWAP. When the page switches to Farsi,
    dir="rtl" goes on <html> and every flex row in the document reverses, which
    is right for sentences and wrong for this one: it threw فا to the left and
    EN to the right, so the button you were reaching for moved the instant you
    pressed it. Forcing this single row back to ltr pins EN on the left and فا
    on the right in both languages, permanently.

    Do not remove this line thinking it is a leftover. It is load-bearing.   */

/*  ONE GAP BELOW THE LOGO, and an exact height, for the same reason as the
    logo above: --NContentTop adds them up. margin-top is --NGap exactly,
    which is your "1 gap distance".                                        */

    .LangSwitch {
        direction: ltr;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.075em;						/* original 0.15em */	
        height: var(--NLangH);
        font-size: calc(var(--NGap) * 1); 	/* original clamp(0.7rem, calc(var(--NDiscW) * 0.14), 0.95rem) */
        letter-spacing: 0.06em;
		margin-top: var(--NGap);
        }

    .LangBtn {
        min-height: 0;
        padding: 0.5em 0.6em;						
        color: var(--NColor4);
        font-family: var(--NFontEN);
        font-size: inherit;
        text-transform: uppercase;
        border-bottom: 2px solid transparent;
        transition: color 0.25s var(--NEase),
                    border-color 0.25s var(--NEase);
        }

    .LangBtn[lang="fa"] {
        font-family: var(--NFontFA);
        text-transform: none;
        }

    .LangBtn:hover {
        color: var(--NColor2);
        }

/*  THE ACTIVE LANGUAGE IS GREEN, matching its own underline. aria-pressed is
    what tells a screen reader which language is active AND what this rule
    hangs the underline on, so what you see and what is announced can never
    disagree.                                                               */

    .LangBtn[aria-pressed="true"] {
        color: var(--NColor3);
        border-bottom-color: var(--NColor3);
        }

    .LangDivider {
        color: var(--NColor4);
        opacity: 0.6;
        }


/* ==========================================================================
   [10 DISC]
   --------------------------------------------------------------------------
   The four circular buttons: Art, Research, Design in the middle of the
   column, Contact above the copyright.

   STRUCTURE OF ONE DISC
       a.Disc                the whole thing, disc plus label, one link
         span.DiscRing       the circle: transparent fill, colored stroke
           img.DiscIcon      the line drawing, one .svg file from Assets
                             (it was an inline <svg> from a sprite once; the
                              note further down explains why it changed)
         span.DiscLabel      the word underneath

   STROKE COLOURS, AS YOU SPECIFIED
       Art       green   .Disc-Art
       Research  yellow  .Disc-Research
       Design    green   .Disc-Design
       Contact   white   .Disc-Contact

   ICON COLOURS LIVE IN THE .SVG FILES NOW. Each drawing has two layers, Base
   holding the whitish and Color holding the accent, and those come through
   exactly as Illustrator saved them. To change one, edit the layer and
   re-export over the file in Assets. Nothing here needs touching, and nothing
   here can override it. [01 PALETTE] explains why that is the trade.

   THE FOUR FILES, and the disc each belongs to:

       Disc - Art Face Line Drawing.svg        554 x 588    0.94 : 1
       Disc - Research Line Drawing.svg       2558 x 1720   1.49 : 1
       Disc - Design Line Drawing.svg         2564 x 2161   1.19 : 1
       Disc - Contact Line Drawing.svg        3346 x 2010   1.66 : 1

   Your re-exports fixed the artboards, so all four now sit tight to their own
   drawing instead of floating in an A4 page. Three of the four are close
   enough in shape to read at the same weight without help; Art is the odd one
   out, being square, so it reads slightly larger at the same inset.
   --NIconScale per disc below is the dial for evening that out by eye.
   ========================================================================== */

    .Disc {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(var(--NGap) * 0.25);
        width: 100%; /* original 100% */
        min-height: 0;
        text-decoration: none;
        color: var(--NColor5);
        --NDiscStroke: var(--NColor4);   /* per-disc rules below override this */
        --NIconScale: 1;              /* per-disc rules below override this */
        }

/*  WIDTH AND HEIGHT ARE BOTH STATED, rather than width plus aspect-ratio.
    That looks redundant and it is not. An inline <svg> with no width or
    height attributes of its own has a built-in size of 300 by 150, and a
    percentage height on it can only resolve against a parent whose height is
    already definite. With aspect-ratio doing the work the parent's height is
    still being worked out at that moment, so the percentage gave up, the svg
    fell back to its built-in 150px, and that pushed every ring to 150px tall
    no matter how wide it was. Setting height outright fixes it. If you ever
    swap these two lines back to aspect-ratio, the discs will turn into eggs.  */

    .DiscRing {
        display: grid;
        place-items: center;
        width: var(--NRingW); /* original var(--NDiscW) | 100% -- your 0.85 of --NDiscW, now named in [02 SIZES] */
        height: var(--NRingW); /* original var(--NDiscW) | 100% -- same number, so the circle stays a circle */
        border: 2px solid var(--NDiscStroke);
        border-radius: 50%;
        transition: transform 0.35s var(--NEase),
                    box-shadow 0.35s var(--NEase),
                    background-color 0.35s var(--NEase);
        }

/*  .DiscIcon IS AN <img> NOW, NOT AN INLINE <svg>. Two consequences:

    object-fit: contain is what makes four drawings of four different shapes
    behave. Each is fitted inside the circle on its own longest side and
    centered. Without contain the browser would stretch a wide drawing to fill
    a square and it would look wrong.

    pointer-events: none stops the browser treating it as a draggable picture
    sitting inside the link, which both protects it and keeps the whole disc
    feeling like one button.                                                */

    .DiscIcon {
        width: calc(100% * var(--NIconScale));
        height: calc(100% * var(--NIconScale));
        object-fit: contain;
        pointer-events: none;
        }

/*  THE LABEL BOX IS THE SAME HEIGHT IN BOTH LANGUAGES, and that takes an
    explicit height rather than leaving it to the text.

    Latin and Naskh do not measure the same. At an identical font size, Persian
    letterforms sit on a different baseline with different ascenders and a much
    deeper descender, so a line box that is 18px tall in English can be 24px
    tall in Farsi. Left alone, every disc below the first would shift down when
    the page switched languages, and the four discs would stop lining up with
    the heading beside them.

    Fixing the height and centering the text inside it makes the box identical
    in both, so nothing moves when the language changes. 1.5 x --NGap is enough
    room for the deepest Persian descender at this size.                     */

    /* ---- DISC LABELS ---------------------------------------------------
       Old rule: "Research" sets the size, and every other label in the
       column matches it. "Research" is the longest of the four words, so it
       is the one that decides.
       THE LABEL IS NO LONGER MEASURED OFF THE DISC. It used to be
       --NDiscW x 0.19 with a 1.6rem ceiling, on the reasoning that
       "Research" is about 4.8em wide in Century Gothic so --NDiscW / 4.8
       would make the word exactly fill the circle. You replaced it with one
       --NGap, which ties the label to the same spacing unit as everything
       else in the column and is simpler to reason about. TO RESIZE THE
       LABELS now, change the multiplier on --NGap on the font-size line
       below; nothing else reads it.                                       */

    .DiscLabel {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: calc(var(--NGap) * 1.5);
        text-align: center;
        font-size: calc(var(--NGap) * 1);
        line-height: 1;
        color: var(--NColor5);
        transition: color 0.25s var(--NEase);
        }

/*  Your margin-top: calc(var(--NGap) * 0.35) came out of here. It was
    doing --NGap's job because --NGap had been eaten by the unclosed
    comment in [02 SIZES]. That is fixed, so the gap is back and the margin
    would now double up. Adjust --NGap in [02 SIZES] instead.          */

/* ---- HOVER AND FOCUS ---------------------------------------------------
   The ring lifts very slightly and picks up a faint glow in its own stroke
   color, and the label turns that color too. Focus gets the same treatment
   so a keyboard user sees exactly what a mouse user sees.                  */

    .Disc:hover .DiscRing,
    .Disc:focus-visible .DiscRing {
        transform: scale(1.05);
        background-color: rgba(245, 247, 247, 0.05);
        box-shadow: 0 0 0 6px rgba(245, 247, 247, 0.06);
        }

    .Disc:hover .DiscLabel,
    .Disc:focus-visible .DiscLabel {
        color: var(--NDiscStroke);
        }

/* ---- THE FOUR DISCS ---------------------------------------------------- */

    .Disc-Art      { --NDiscStroke: var(--NColor3);    }   /* green  */
    .Disc-Research { --NDiscStroke: var(--NColor2);    }   /* yellow */
    .Disc-Design   { --NDiscStroke: var(--NColor3);    }   /* green  */
    .Disc-Contact  { --NDiscStroke: var(--NColor5);    }   /* white  */

/* ---- ICON SIZE, ONE NUMBER PER DISC -------------------------------------
   --NIconScale is a plain fraction of the circle. 1 means the drawing fills
   the circle's box on its longest side; 0.8 means it sits at four fifths of
   that. Nothing else is in the sum, so you can set these by eye and the
   number means what it says.

   This replaces --NIconInset, which was doing the same job through a
   subtraction with a halving in it, so 12% did not mean 12% of anything you
   could point at and the four values were not comparable with each other.

   THE VALUES BELOW ARE YOUR SIZES. You said Research is right as it is, Art
   should be 80% of what it was, Design 90% and Contact 95%. Applied to what
   each one was actually rendering at, that comes out as:

       Research   1.00  ->  0.75    the reference, since retuned by eye
       Art        0.80  ->  0.74
       Design     0.90  ->  0.86
       Contact    0.95  ->  0.89

   RESEARCH IS NO LONGER THE BIGGEST. It started as the reference at 0.94 and
   you brought it down to 0.75 when the drawing changed, so the other three
   now sit above it. Nothing is wrong with that, but the percentages in the
   paragraph above are the history, not the current ratios.

   To nudge any of them further, change the one number. Down is smaller.   */

    .Disc-Research { --NIconScale: 0.75; }   /* your reference, unchanged   */
    .Disc-Art      { --NIconScale: 0.74; }   /* your 80%                    */
    .Disc-Design   { --NIconScale: 0.86; }   /* your 90%                    */
    .Disc-Contact  { --NIconScale: 0.89; }   /* your 95%                    */

/*  The Contact disc sits above the copyright with a little air.            */

    .SideBottom .Disc {
        margin-bottom: var(--NGap); /* original 0.9em */
        }


/* ==========================================================================
   [11 COPYRIGHT]
   --------------------------------------------------------------------------

ONE THING TO KNOW ABOUT AUTOMATIC YEARS: the script reads the VISITOR'S clock, not yours. Someone with a wrong system date sees a wrong year.
I don't like this! update!

      TELL ME THE YEAR YOU FIRST PUBLISHED and I will set it. Right now the
      markup has 2020 in it, taken from the date on your logo files, which is
      a guess and should be corrected.

      "Powered by Negar Tabibian" reads to me as a builder's credit, the note
      at the bottom saying you made this yourself rather than buying a
      template. If that is what you mean by it, keep it, it is a good line and
      it is unusual in a way that suits the site.

      What it does NOT do is claim copyright, and copyright is the thing you
      told me matters most. "Powered by" is the phrase platforms use for
      themselves, so a reader may parse it as a tool credit, not ownership.
      The line that does the legal work is: (c) 2020-2026 Negar Tabibian.

      MY SUGGESTION, WHICH GETS YOU BOTH: two short lines, the notice first
      and your credit under it. That is what is in index.html now, with your
      original single line sitting next to it in a comment so you can swap
      back with one edit. Look at it and tell me which you want.
   ========================================================================== */

/*  SAME HEIGHT IN BOTH LANGUAGES, for the reason in [10 DISC]: the line height
    is a plain number rather than being left to the font, and each line has a
    fixed height, so switching language cannot make this block grow and shove
    the curve or the page bottom around.                                     */

    .Copyright {
        width: 100%;
        padding: 0 0; 						/* original 0 0.5em */ 
        text-align: center;
        color: var(--NColor5);
        font-size: calc(var(--NGap) * 0.75); /* original clamp(0.6rem, calc(var(--NDiscW) * 0.095), 0.8rem) */ 
        line-height: 1.5;					/* original 1.35 */ 
        font-weight: 300;
        opacity: 0.85;
        }

/*  NOT text-wrap: balance. It was here briefly and it was wrong: balance
    evens out the number of words per line, so on a wide phone it turned one
    comfortable line into three short centered ones. Left to wrap normally.  */

/*  DIRECT CHILDREN ONLY. The child combinator is doing real work here: the
    copyright's first line contains a nested <span class="Year"> that the
    script fills in, and a plain `.Copyright span` rule turned that inner span
    into a block too, which snapped the line into three: the symbol, then the
    year, then the name. Keep the > .                                       */

    .Copyright > span {
        display: block;
        height: calc(var(--NGap) * 0.95);
        line-height: calc(var(--NGap) * 0.95);
        }


/* ==========================================================================
   [15 RTL]
   --------------------------------------------------------------------------
   Everything that changes when the page is switched to Farsi.

   The script sets dir="rtl" on <html>, which flips the whole document by
   itself: text runs right to left, and because the green dot is a separate
   span AFTER the words in the source, it lands on the LEFT of the sentence
   automatically, which is correct in Persian. No extra rule needed for it.

   What DOES need saying by hand is the font, the slightly looser line height
   Persian script wants, and the small handful of places where a left/right
   value was written explicitly rather than logically.
   ========================================================================== */

    .Lang-fa {
        font-family: var(--NFontFA);
        }

/*  ENGLISH STAYS IN CENTURY GOTHIC EVEN WHEN THE PAGE IS IN FARSI, and this
    is the rule that was missing.

    WHAT WAS HAPPENING. .Lang-fa above sets the Persian face on the whole
    body, so every word rendered in it, including all the English that has no
    Farsi yet: the copyright, the form labels, the Coming and Error text. You
    opened a page that had remembered your فا click and reasonably concluded I
    had changed your English font. I had not. You were looking at English set
    in a Persian face.

    Negar-JS.js marks any span with no translation as dir="ltr". This catches
    exactly those and hands them back to --NFontEN. A page in Farsi now shows
    Persian in Parastoo and English in Century Gothic side by side, each in
    its own type, which is what a bilingual page should do.

    IT SELF-REPAIRS. Fill in a data-fa and the script stops marking that span,
    so it stops matching here and correctly turns Persian.                 */

    .Lang-fa [dir="ltr"],
    .Lang-fa .Copyright,
    .Lang-fa .LangBtn[lang="en"] {
        font-family: var(--NFontEN);
        }

/*  NO LOOSER LINE FOR FARSI, IN THE END. This block used to promise one,
    on the reasoning that Naskh wants more room between lines than a
    geometric sans does. It was never written, and the site has been looked
    at in both languages many times since without anyone missing it, so the
    promise is removed rather than the rule added. If the Persian ever does
    read tight, the place for it is .Lang-fa .Intro { line-height }, and only
    the intro.

    THE LABELS AND THE COPYRIGHT ARE DELIBERATELY EXCLUDED FROM ANY SUCH RULE. You asked
    for those to be identical in both languages, and a different line height is
    exactly what would make them differ: taller boxes in Farsi would push the
    discs down and break their alignment with the heading, and the copyright
    block would change height under the Contact disc. Their heights are pinned
    instead, in [10 DISC] and [11 COPYRIGHT], so the two languages occupy the
    same space to the pixel.                                                */



/*  The column stays on the left in Farsi. That is a choice, not an oversight:
    the logo, the discs and the whole spatial identity of the site live on the
    left, and moving them would make the two languages feel like two different
    sites. Only the text direction flips.

    IF YOU WANT THE COLUMN TO MIRROR TO THE RIGHT IN FARSI, uncomment this and
    tell me, and I will do the same for the three small-screen modes.

    .Lang-fa .SideColumn {
        left: auto;
        right: 0;
        border-right: 0;
        border-left: var(--NRuleWidth) solid var(--NColor4);
        }
    .Lang-fa .Main {
        margin-left: 0;
        margin-right: var(--NSideW);
        }
*/

/*  The Latin word-mark stays Latin even in Farsi mode. The EN button should
    read "EN" in both languages.                                            */

    .Lang-fa .LangBtn[lang="en"] {
        font-family: var(--NFontEN);
        }


/* ==========================================================================
   ==========================================================================
   THE FOUR SCREEN MODES
   ==========================================================================
   --------------------------------------------------------------------------
   You asked for every page to be designed for four cases. Here they are, with
   the exact query each one uses, so you can copy the same four into every
   future page file and they will always line up.

       [MODE A]  HORIZONTAL STANDARD   landscape, min-height: 501px
       [MODE B]  VERTICAL STANDARD     portrait,  min-width: 501px
       [MODE C]  HORIZONTAL SMALL      landscape, max-height: 500px
       [MODE D]  VERTICAL SMALL        portrait,  max-width: 500px

   The base rules above are written for MODE A, so MODE A needs almost nothing
   of its own. The other three adjust from there.

   Left column present in A, B and C. In D it becomes a top bar, as you said.

   --------------------------------------------------------------------------
   EACH ORIENTATION IS MEASURED ON THE SIDE THAT RUNS OUT FIRST. This is your
   rule from the landscape pair, carried over to the portrait pair so all four
   are built the same way.

       LANDSCAPE splits on HEIGHT, at 500 / 501.
           A window on its side is never short of width. What it runs out of
           is height: a phone held sideways is about 375px tall and there is
           no room for the heading, the rotator and the curve at full size.
           Asking how TALL it is names the real problem. A laptop is 800 or
           900 tall and passes; a phone on its side is 375 to 430 and does
           not. Nothing sits near the line, so nothing flickers at it.

       PORTRAIT splits on WIDTH, at 500 / 501.
           Upright it is the other way round: height is plentiful and width
           is what runs out. Three discs, a logo and the language switch have
           to fit across one row, and a long name has to fit on one line.

   WHY 500 RATHER THAN THE 767 THAT WAS HERE. 767 was the old convention for
   "tablet", and it meant a 600px or 700px window, a small tablet or a folding
   phone opened out, was handed the phone layout: one row of discs across a
   window wide enough for the column, and the heading set very large. Phones
   upright run 320 to 480 wide; tablets upright start at 600 and iPads at 744.
   500 falls in the empty space between the two, so nothing real sits near the
   line, which is the same reason 500 works on the landscape side.

   The pair is written max 500 / min 501 rather than both at 500 so that a
   window exactly 500 wide or tall belongs to one mode only. Two queries that
   both match would leave the winner to source order, which is the kind of
   thing that behaves differently after any edit.

   IF YOU EVER MOVE ONE, MOVE ITS PARTNER BY ONE IN THE SAME STEP, and change
   all four places it is written: the table above, the table in the file
   header, and the two queries themselves, in this file and in index.css.
   ========================================================================== */


/* ==========================================================================
   [MODE A]  HORIZONTAL STANDARD
   landscape, min-height: 501px  ::  desktop, laptop, tablet turned sideways
   --------------------------------------------------------------------------
   This is the default state, styled by everything above, so the block below
   is empty and kept only so all four modes appear in order. The background
   photograph is not placed here any more; it and its per-mode framing live
   in index.css [H5 IMAGE], with the rest of what only those pages use.
   ========================================================================== */

    @media (orientation: landscape) and (min-height: 501px) {

        :root {
            }

        }


/* [MODE B]  ==========================================================================
   [MODE B]  VERTICAL STANDARD
   portrait, min-width: 501px  ::  iPad and most tablets held upright
   --------------------------------------------------------------------------
   The left column stays, exactly as you asked. What changes here is the
   column's own width: a sixth of a portrait screen is too thin, so its floor
   and its ideal are both raised, and .Main's right margin comes off --NPadX
   rather than a second column width.

   THE BACKGROUND PHOTOGRAPH IS NOT SET HERE. Its framing per mode is in
   index.css [H5 IMAGE]; for this mode it is parked left of center, which the
   note there describes correctly.
   ========================================================================== [MODE B] */

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

    /*  THE COLUMN FLOOR BENDS ON A NARROW UPRIGHT WINDOW, and the shape of
        the rule matters more than the numbers, because you have since
        retuned the numbers.

        WHY IT HAS TO BEND. A flat floor of 2in is right on an iPad, 192px of
        768, about a quarter. It is wrong at the bottom of this mode: 192px
        of a 501px window is nearly 40%, and the reading column beside it is
        left with a strip. So the floor is written as a min() of a fixed size
        and a share of the screen. Wherever there is room, the fixed size
        wins and nothing changes; where there is not, the share takes over
        and the column gives ground instead of the text.

        WHAT IS SET NOW, your values, and what they come to:

            501px window    17.5vw =  88px    floor 88
            700px window    17.5vw = 122px    floor 120, the 1.25in cap
            768px window    17.5vw = 134px    floor 120, the 1.25in cap

        so your cap takes over from about 686px up. The history of the line
        is on the declaration itself.                                    */

        :root {
            --NSideMin: min(1.25in, 17.5vw);      /* original 2in, raised from 1.5in  ||| then: min(2in, 30vw) */
            --NSideIdeal: calc(var(--NGap) * 8.5); /* 1/6 is too thin upright  ||| original 26vw    */
            --NSideMax: 20vw; /* original 3.2in */
            --NDiscCapH: 11vh;
            }

    /*  AND THE RIGHT-HAND MARGIN IS NOT A SECOND COLUMN. [07 COLUMN] gives
        .Main a margin of one --NSideW on BOTH sides, which centers the text
        block nicely on a wide screen: 288px of a 1440px window, a fifth.
        Upright the same rule took 384px of a 501px window, three quarters of
        it, and the heading had nowhere to go.

        The left margin still clears the column, because the column is
        really there. The right one has nothing to clear, so it is the plain
        screen margin.                                                    */

        .Main {
            margin-right: var(--NPadX);		/* original var(--NSideW), from [07 COLUMN] */
            }

    /*  NO --NContentTop OVERRIDE HERE ANY MORE, and none in [MODE A] or
        [MODE C] either. It is calculated in [02 SIZES] from the padding, the
        logo, the switch and the gap, all of which already change per mode, so
        it adjusts itself. Setting it by hand here would break the alignment
        you asked for.              */
		
		.DiscRing {
            width: calc(var(--NSideW) * 0.7);
			height: calc(var(--NSideW) * 0.7);
			}
		
		.DiscLabel {
			font-size: calc(var(--NGap) * 1.2);
			}
		
        }


/* [MODE C]  HORIZONTAL SMALL :: 2 columns  ::  landscape, max-height: 500px
   phone turned sideways, iPad on its side, a short laptop window
   ==========================================================================
   GALAXY S8 SIDEWAYS, which you asked me to check: 740 x 360, so 360 tall,
   comfortably this mode with 140px to spare before the boundary. The other
   phones land here too: iPhone SE sideways is 320 tall, the Pro Max family
   430. Every one of them was in the measurements.
   ==========================================================================
     
   	THE TIGHTEST CASE ON THE SITE, and the only mode where the left column is not a single column.    SO IT SPLITS IN TWO, landscape only:

       column 1   --NSideW      logo, EN / فا at the top
                                copyright at the bottom
       column 2   --NColDiscs   Art, Research, Design at the top
                                Contact at the bottom

   Two hairlines: one between the columns (.SideRule), one on the outer
   edge where the column border already draws it.

   SEARCH TAGS INSIDE THIS MODE
       [C SIZES]      the numbers this mode changes
       [C COLUMN]     the column widens to hold both
       [C RULE]       the hairline between the columns
       [C DISCS]      the three discs, their labels and gaps
       [C CONTACT]    the Contact disc at the foot of column 2
       [C MAIN]       main clears both columns
       [C LANG]       EN / فا size
       [C COPYRIGHT]  the copyright at the foot of column 1

   ========================================================================== */

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

    /* ---- [C SIZES] ---------------------------------------------------- */

        :root {
            --NSideMin: 1.2in;	/* original: 0.8in */
            --NSideMax: 2.5in;
            --NSideIdeal: calc(var(--NGap) * 7);     /* original: 22vw | standard landscape 12.5vw - 1/6 of the screen */
            --NPad: var(--NGap); 	/* original: 0.5rem */

            --NColDiscs: calc(var(--NSideW) * 0.75);

        /*  On a 390px-tall phone, worked out from
            the variables: the three top discs run from 8px to about 218px
            and the Contact ring starts near 309px, so they clear by about
            90px. Before the labels and gaps came down it was about 44px.
            That freed room means this can go to 16vh if you want bigger
            rings. 						                               */
            --NDiscCapH: 14vh;      /* original 11vh */

            --NLogoW: calc(var(--NSideW) * 0.5);  /* original min(calc(var(--NSideW) * 0.8), 2in, var(--NDiscCapH)) */

            --NContentTop: calc(var(--NPad) * 1);

            }


    /* ---- [C COLUMN] 2nd COLUMN  ---------------------------------------- */

        .SideColumn {
            width: calc(var(--NSideW) + var(--NColDiscs)); /* original calc(var(--NSideW) + var(--NColDiscs)) */
            padding-bottom: var(--NPad);  /* original var(--NBottomPad), from [07 COLUMN] */
            }

        .SideTop,
        .SideBottom {
            width: var(--NSideW);       /* original 100% */
            margin-left: 0;
            margin-right: auto;
            }


    /* ---- [C RULE] THE HAIRLINE BETWEEN THE COLUMNS -------------------

       .SideRule is a bare <div> that exists only to draw a rule, hidden in
       [07 COLUMN], so it becomes this line rather than a new pseudo-element.

       FULL HEIGHT. .SideColumn is position: fixed, so top: 0 with bottom: 0
       spans the window, matching the outer border by construction. Its left
       is the same number column 2 starts at, so they cannot drift apart. */

        .SideRule {
            display: block;             /* original none */
            position: absolute;
            top: 0;
            bottom: 0;
            left: var(--NSideW);
            width: var(--NRuleWidth);
            background-color: var(--NColor4);
            }


    /* ---- [C DISCS] COLUMN 2 : THREE DISCS AT THE TOP -----------------

       THE TWO GAPS, both tighter in this mode than the table in [02 SIZES]
       says, because a landscape phone has no height to spare:

           .Disc gap       the ring to its own label     0.1  x --NGap
           .SideNav ul     a label to the next ring      0.5  x --NGap

       THE LABEL SIZE. Your 0.6rem, raised to 0.7rem after checking: 0.6
       comes to 9.6px, below where small navigation text reads comfortably
       on a phone. 0.7 is 11.2px and "Research" still fits with room. Put
       0.6 back if you prefer it; it is the first number on the line.

       THE min() IS THE "AS LONG AS IT FITS" GUARD. "Research" is about 4.8
       of its own em wide, so column 2 divided by 5.5 is the largest size
       that still fits inside it. It only takes over if column 2 drops below
       about 62px, which the 0.85in floor prevents, so in practice 0.7rem
       always wins.

       THE LABEL BOX IS 1.5em, not a multiple of --NGap, so it shrinks with
       the text. Same 1.5 ratio as [10 DISC], so there is still room for the
       deepest Persian descender, and the box is identical in both
       languages because labels do not read --NFaScale.

       These apply to the Contact disc too, so all four discs match.     */

        .SideNav {
            left: var(--NSideW);        /* original 0    */
            width: var(--NColDiscs);    /* original 100% */
            }

        .SideNav ul {
            gap: calc(var(--NPad) * 0.5);       /* original var(--NGap), from [07 COLUMN] */
            }

        .Disc {
            gap: calc(var(--NPad) * 0.1);       /* original calc(var(--NGap) * 0.25), from [10 DISC] */
            }

        .DiscLabel {
            font-size: min(0.8rem, calc(var(--NColDiscs) * 0.15));  /* original min(0.90rem, calc(var(--NColDiscs) / 5.5)) */
            height: calc(var(--NPad) * 1.25);                                         /* original 1.5em */
            }
		
		.DiscRing {
            width: calc(var(--NSideW) * 0.4);
			height: calc(var(--NSideW) * 0.4);
			}

    /* ---- A STRAY } USED TO SIT RIGHT HERE, AND IT WAS EXPENSIVE -------
       One extra closing brace, immediately after .DiscRing above, ended
       the @media block early. Everything below it in this file's MODE C
       section, [C CONTACT], [C MAIN], [C LANG] and [C COPYRIGHT], was
       then outside the query and applied to EVERY screen size:

           .Main got the two-column left margin on phones and desktops
           .SideBottom .Disc-Contact went position: absolute everywhere
           .LangSwitch and .Copyright took MODE C's font sizes everywhere

       Three things you were seeing came from it: the heading no longer
       level with the Art disc in landscape small, the main text squeezed
       into a narrow strip on a phone, and the Farsi heading hanging off
       the left edge at 320, 360, 390 and 501. The brace is gone and all
       three are fixed. Measured after: align 0 in A, B and C, no overflow
       at any size, both languages.

       HOW TO CATCH IT NEXT TIME. A stray } is silent: the browser drops
       it and keeps going, so nothing errors and the damage shows up
       somewhere else entirely. If a rule "stops working" for no reason,
       count the braces in the block above it first.                    */

    /* ---- [C CONTACT] COLUMN 2 : CONTACT AT THE FOOT ------------------

       WHY THE DISC IS POSITIONED AND ITS PARENT IS NOT. .SideBottom holds
       the Contact disc and the copyright, and they want different columns.
       .SideBottom is a real <footer>, so display: contents is out;
       dissolving a landmark is what the note in [MODE D] warns against.

       So the disc alone is lifted out and pinned to column 2, against
       .SideColumn, the same containing block .SideNav uses. The copyright
       stays in .SideBottom and holds the foot of column 1 on its own. */

        .SideBottom .Disc-Contact {
            position: absolute;
            left: var(--NSideW);
            bottom: calc(var(--NPad) * 0.66);          /* original var(--NPad) */
            width: var(--NColDiscs);
            }

        .SideBottom .Disc {
            margin-bottom: 0;           /* original 0.35em */
            }


    /* ---- [C MAIN] MAIN CLEARS BOTH COLUMNS --------------------------- */

        .Main {
            margin-left: calc(var(--NSideW) + var(--NColDiscs));
            }


    /* ---- [C LANG] ----------------------------------------------------
       font-size only. margin-top stays at --NGap from [09 LANG].        */

        .LangSwitch {
            font-size: 0.85rem;
            }


    /* ---- [C COPYRIGHT] ALL THREE LINES, AT THE FOOT OF COLUMN 1 -------

       WHY THE YEAR AND YOUR NAME HAD VANISHED. The rule that used to be
       here was

           .Copyright span:last-child { display: none; }

       meant to hide the "Powered by" line when the copyright had two spans.
       Two things broke it. The markup grew a third span, so last-child
       became "Negar Tabibian." instead. And span:last-child matches at ANY
       depth, not only direct children, so it also caught the .Year span,
       which is the only (so the last) child inside the © span. That left ©
       and "Powered by" and nothing else. The rule is gone and all three
       lines show.

       IF YOU EVER HIDE A LINE HERE AGAIN, use the child combinator,
       .Copyright > span:nth-child(2), so it cannot reach inside a line.

       height: auto IS THE SAFETY NET. [11 COPYRIGHT] pins each line to a
       fixed height so the block cannot change size between languages. At
       0.6rem, "Negar Tabibian." is close to the width of column 1, and if
       it ever wraps, a fixed height would print the second half on top of
       the line below. auto lets the block grow instead. The copyright has
       no Farsi yet, so nothing changes on a language switch; when you add
       the Farsi line, check both languages here.                       */

        .Copyright {
            font-size: 0.75rem;
            line-height: 1.25;
            }

        .Copyright > span {
            height: auto;               /* original calc(var(--NGap) * 0.95), from [11 COPYRIGHT] */
            }

        }

/* ==========================================================================
   [MODE D]  VERTICAL SMALL
   portrait, max-width: 500px  ::  every phone held normally
   --------------------------------------------------------------------------
   GALAXY S8 UPRIGHT: 360 x 740, this mode, with 140px of room before the
   boundary. It is also the narrowest mainstream phone still in use; the
   widest is 430. Both were measured, along with 320 for the old SE.

   ONE DECISION I MADE THAT YOU SHOULD KNOW ABOUT. Everything here is in
   normal document flow and the page scrolls, rather than the top bar and the
   bottom block being pinned to the screen edges. Pinned looked tempting, but
   on a 667px phone a pinned bar top and bottom eats more than half the screen
   before a word of content appears, and it breaks completely for anyone
   running their phone at large text sizes. Scrolling costs you nothing
   visually and never breaks. If you want them pinned, say so and I will do it
   with the layout rebuilt to suit.
   ========================================================================== */

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

        :root {
            --NDiscCapH: 9vh;
            --NDiscMax: 1.35in;
            --NPad: calc(var(--NGap) * 1.5); 	/* original 1rem | var(--NGap) */
			--NPadX: var(--NPad);				/* original clamp(0.75rem, calc(var(--NSideW) * 0.22), 2.5rem) */
            }

    /* ---- the column stops being a column ----------------------------
       display: contents dissolves the .SideColumn wrapper: its four
       children are handed straight to the body's flex layout as if the
       wrapper were not there. That is what lets the Contact block travel
       all the way to the foot of the page while the logo, the discs and
       the rule stay at the top, with no second copy of anything in the
       HTML and no JavaScript moving elements about.

       .SideColumn is a plain <div> rather than an <aside> precisely so
       this is safe. Dissolving a landmark element used to confuse some
       screen readers; dissolving a div cannot. The <nav> and the <footer>
       inside it keep their own meaning either way.                                                       */

    /* ---- ONE ROW ACROSS THE TOP, YOUR NEW LAYOUT --------------------

       WHY THIS IS A GRID AND NOT A FLEX ROW. The five things in the top
       bar do not live in one element in the HTML: the logo and the
       language switch are inside <header class="SideTop">, and the three
       discs are inside <nav class="SideNav"> next to it. CSS cannot move
       an element into another element, and the HTML is not going to be
       rearranged for one screen size, because that would mean two copies
       of the same content and a second thing to keep in step.

       A grid solves it without touching the markup. The body becomes
       three columns:

           column 1   --NBarSide            the logo
           column 2   whatever is left      the three discs
           column 3   --NBarSide            EN over فا

       --NBarSide is the larger of --NLogoW and --NLangW, used for both outer
       columns. The note further down, at the grid itself, explains why they
       have to match.

       .SideTop is laid across all three, spreading its two children to
       the far edges, and .SideNav is placed in the middle column on the
       same row. Because columns 1 and 3 are exactly as wide as the two
       things .SideTop pushes into them, everything lines up: logo, three
       discs, language, left to right, one row.

       THE HEADER SURVIVES. .SideTop is a real <header> and stays one,
       rather than being dissolved with display: contents the way
       .SideColumn is below. Dissolving a landmark can drop it out of the
       accessibility tree, and this one is the site banner.

       ONE THING TO KNOW ABOUT THE KEYBOARD. Tab order follows the HTML, so
       on a phone it runs logo, EN, فا, Art, Research, Design, Contact,
       while the eye reads logo, Art, Research, Design, EN / فا. The
       language pair is reached one step earlier than it is seen.

       That is a small mismatch and it is the deliberate price of not
       duplicating the markup for one screen size. It is defensible on its
       own terms too: logo and language are the site's own furniture, the
       three discs are where you are going. Nothing is unreachable, nothing
       is out of order within either group, and axe reports no violation.

       IF IT EVER BOTHERS YOU, the fix is in the HTML, not here: move the
       <div class="LangSwitch"> block after </nav> and change column 3 to
       hold it directly. Then all four modes would need their placement
       checked again, which is why it has not been done for this alone.  */

    /* ---- THE GRID ITSELF, AND WHY ITS OUTER COLUMNS MATCH -------------

       THE TWO OUTER COLUMNS ARE THE SAME WIDTH, AND THAT IS WHAT KEEPS THE
       DISCS STILL WHEN YOU SWITCH LANGUAGE.

       In Farsi the whole page is dir="rtl", and a grid laid out right to
       left puts its FIRST column on the right. The outer two were sized
       separately, --NLogoW for the logo and --NLangW for EN / فا, and those
       two numbers are not equal. So the middle column, the one holding the
       three discs, landed in a slightly different place in each language
       and the discs jumped about seven pixels sideways on every switch.
       You saw it and you were right.

       --NBarSide is whichever of the two is larger, used for BOTH outer
       columns. A symmetrical grid is the same grid mirrored, so the middle
       column now sits in exactly the same place in both languages and the
       discs do not move at all. Measured after: 0.0px, both directions.

       The logo and EN / فا are not affected by the change, because they are
       placed by .SideTop spreading itself across all three columns rather
       than by the columns themselves.                                    */

        body {
            display: grid;
            grid-template-columns: calc(var(--NBarSide) * 1) 1fr calc(var(--NBarSide) * 1);	/* original var(--NLogoW) 1fr var(--NLangW) */
            grid-template-rows: auto auto 1fr auto;
            column-gap: calc(var(--NPadX) * 0.25);	/* original calc(var(--NBarGap) * 0.25) */
            padding-left: var(--NPadX);
            padding-right: var(--NPadX);
            }

        .SideColumn {
            display: contents;
            }

    /*  THE DISC STACK GOES BACK INTO THE FLOW HERE. In the other three modes
        it is absolutely positioned at --NContentTop so it can line up with
        the heading beside it. There is nothing beside it in this mode, so
        that would just leave it floating over the content.               */

        .SideNav {
            position: static;
            top: auto;
            }

    /*  WHERE EACH PIECE SITS. This replaces the order: 1..5 list that was
        here when the bar was two rows. Grid places things by row and
        column rather than by running order, which is what lets the logo,
        the discs and the language switch share one row while everything
        else still runs down the page in a stack.

        1 / -1 means "from the first column line to the last", in other
        words the full width.                                            */

        .SideTop    { grid-row: 1; grid-column: 1 / -1; }
        .SideNav    { grid-row: 1; grid-column: 2;      }
        .SideRule   { grid-row: 2; grid-column: 1 / -1; }
        .Main       { grid-row: 3; grid-column: 1 / -1; }
        .SideBottom { grid-row: 4; grid-column: 1 / -1; }

    /*  THE SIDE PADDING MOVED UP TO THE BODY, because the three columns
        are measured on the body and they have to be measured inside the
        margin, not across the whole screen. So the pieces that used to
        carry --NPadX themselves now carry none, and the one on the body
        does the work for all of them at once. Change it in one place.  */

        .SideTop,
        .SideNav,
        .SideRule {
            padding-left: 0;					/* was calc(var(--NPadX) * 1): that inset is on the body now */
            padding-right: 0;					/* same, and it is the same distance on screen */
            }

        .SideTop {
            padding-top: calc(var(--NPad) * 1);
            }

    /* ---- ROW 1, PART ONE : the logo at the far left, language at the
       far right, with the discs sitting between them in column 2.

       .SideTop is laid across all three columns and spreads its two
       children to the outside edges. The two outer columns are both
       --NBarSide wide, so the logo and the switch land on the column
       boundaries and the discs have the middle to themselves.

       align-items: center is what makes it read as one row: the logo and
       the language block center themselves against the taller disc
       block rather than sitting on its top edge.                       */

        .SideTop {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            align-self: start;
            height: calc(var(--NPad) + var(--NRingW));
            padding-bottom: 0;
            }

    /*  THAT HEIGHT IS AN ALIGNMENT TOOL, NOT A SIZE. A disc is a circle
        with a word under it, so its box is taller than the circle by a gap
        plus a label. Centered against the whole box the logo would sit
        below the middle of the circles, which is the one thing that stops
        a row reading as a row.

        So the header is given a height of exactly the top padding plus one
        circle. Its content area then covers the circles and nothing else,
        and align-items: center above centers the logo and the language
        switch on the circles themselves, to the pixel.

        It is written from --NPad and --NRingW, the same two numbers the
        circles are placed and sized by, so it cannot fall out of step with
        them and it does not care how tall the labels are. align-self:
        start stops the grid stretching it back to the full row height.

        --NRingW, NOT --NDiscW. --NDiscW is the slot a disc gets; the circle
        drawn inside it is 0.85 of that, your number. Using the slot put the
        logo six pixels low, which is exactly the 15% difference.        */

    /*  AND THE DISCS START WHERE THE LOGO STARTS. .SideTop's padding-top
        pushes its own contents down from the top of the screen; .SideNav is
        a separate element in the same row, so it needs the same number or
        the circles ride up to the very top edge.                         */

        .SideNav {
            padding-top: var(--NPad);
            }

    /*  THE LOGO SITS ON --NPadX LIKE EVERYTHING ELSE. Its 0.5vw nudge is
        right in the other three modes, where it is alone in a column; here
        it left the logo a couple of pixels off the line the thin rule, the
        heading and the copyright all share.

        THE WIDTH AND HEIGHT ARE YOURS and they override --NLogoW / --NLogoH
        for this mode only. Note the grid column the logo sits in is still
        sized from --NLogoW, so the two want to stay in step: see the note
        at --NLogoW further down this block.                              */

        .LogoLink {
            margin-left: 0;					/* original 0.5vw */
			width: calc(var(--NPadX) * 2.125);
			height: calc(var(--NPad) * 2.125);
            }

    /* ---- THE TOP BAR DOES NOT MIRROR IN FARSI -----------------------
       Your rule, from before: "in vertical I want the logo to be always top
       left, and en/fa always top right", and now "from left to right: Logo,
       art disc, research disc, design disc, then EN/Fa".

       Left to right is what those say, so the bar is pinned to ltr and
       stays exactly as described in both languages. Everything else on the
       page still mirrors in Farsi: the heading, the paragraph, the
       copyright, the reading direction. Only this bar is fixed, the same
       way the EN / فا pair itself is already pinned in [09 LANG] so the
       button does not move out from under your finger.

       IF YOU WANT IT TO MIRROR IN FARSI, delete this one rule. The logo
       will move to the top right, the language switch to the top left, and
       the discs will run Art, Research, Design from the right.          */

        .SideTop,
        .SideNav {
            direction: ltr;
            }

    /* ---- ROW 1, PART TWO : EN ON TOP, فا UNDERNEATH -----------------
       Your instruction. The switch is a row everywhere else on the site
       and a column here, which is the whole change: flex-direction.

       THE SLASH GOES AWAY. "EN / فا" reads as a pair on one line; stacked,
       a slash between them reads as nothing at all. It is decoration and
       already aria-hidden, so hiding it costs a screen reader nothing.
       The two buttons keep their own labels and their own state.

       THE 24px MINIMUM IS DELIBERATE. WCAG asks for a 24 by 24 target and
       the base rule in [04 A11Y] gives everything 44, which .LangBtn opts
       out of because it is text. Stacked and shrunk to fit this row the
       buttons would land at about 18px tall, so the floor is put back
       here explicitly. Do not remove it to close the gap; reduce the
       padding instead.                                                  */

    /*  AND IT SITS A LITTLE LOWER THAN THE MIDDLE, ON PURPOSE. You said the
        pair reads high against the circles, and measuring it you are right,
        by about two pixels. The cause is the underline: every .LangBtn
        carries a 2px bottom border, transparent until it is the active one,
        so each button's box has two pixels of nothing below the letters and
        none above. Centering the BOXES therefore leaves the LETTERS high.

        --NLangDrop pushes the block back down by exactly that thickness, so
        the ink of EN over فا is centered on the circles rather than the
        boxes around it. Measured after: 0.0px between the two centers.

        IF YOUR EYE WANTS IT LOWER STILL, this is the only number to touch,
        and it moves nothing else on the page: the block is nudged with
        position, so it does not push the row taller or shift the logo. */

        .LangSwitch {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: var(--NLangW);
            height: auto;
            margin-top: calc(var(--NPad) * 0.25);	/* original 0 */
            gap: calc(var(--NGap) * 0.1);
            font-size: calc(var(--NPad) * 0.75);	/* your number, carried over from the row version */
            position: relative;
            top: var(--NLangDrop);
            }

        :root {
            --NLangDrop: 2px;			/* = the underline thickness on .LangBtn. See the note above. */
            }

        .LangDivider {
            display: none;
            }

        .LangBtn {
            min-height: 24px;
            padding: 0.25em 0.4em;
            }

    /* ---- THE THREE DISCS, NOW IN THE MIDDLE OF THE TOP ROW ------------

       THE MARGIN THAT WAS HERE IS GONE. It used to be
       margin-top: calc(var(--NGap) * 1), your number, and it was the gap
       between the logo row and the disc row when those were two rows.
       There is only one row now, so there is nothing for it to be the gap
       between, and left in place it pushed the discs below the logo again.
       The distance from the top of the screen to the whole bar is
       --NPad on .SideTop above. That is the number to change.           */

        .SideNav {
            flex: 0 0 auto;
            margin-top: 0;					/* original calc(var(--NGap) * 1) */
            }

    /* ---- THE THREE RINGS, AND WHAT DECIDES HOW BIG THEY CAN BE ---------
       Your rule was: bigger here, about 1.15 x --NDiscMax, with at least
       one gap between each ring and between the outer rings and the screen
       edges, and that defines the maximum. It still does. What changed is
       what else is on the row: the logo and the language switch now sit on
       it too, so they come out of the budget before the rings are measured.

           2 x --NPadX      the margin at each side of the screen
           --NLogoW         the logo
           --NLangW         EN over فا
           2 x --NBarGap    logo -> discs, discs -> language
           2 x --NBarGap    between the three rings

       whatever is left, divided by three, is the widest a ring can be:

           (100vw - 2 x --NPadX - --NLogoW - --NLangW - 4 x --NBarGap) / 3

       --NDiscW takes whichever is smaller, that or your 1.15, or the
       height cap. So on a roomy phone the rings grow to your size and on a
       narrow one they shrink to fit rather than crowding their neighbours.

       WHY --NBarGap AND NOT --NPadX DIRECTLY. --NPadX is the screen margin
       and it is the right size for that job; used five more times across
       one row it ate the rings down to nothing on a 360px phone. --NBarGap
       is a fraction of it, so it still comes off --NSideW and still obeys
       your horizontal-from-NSideW rule, and it is one number to change if
       the row ever feels tight or loose.

       --NLOGOW AND --NLANGW ARE SET HERE, SMALLER THAN ANYWHERE ELSE, which
       is the "I don't mind having it small" you gave me for the logo.

       --NBARSIDE is the larger of the two, and it is what both outer grid
       columns are actually set to, for the reason written out at the grid
       itself: equal outer columns are what stop the discs shifting when the
       page mirrors into Farsi. So the budget below subtracts it twice
       rather than subtracting the logo and the switch separately. The rings
       come out a hair smaller than they would have and they stay put, which
       is the trade you asked for.

       Change --NLangW and everything follows: its column, the budget, the
       ring size.

       --NLOGOW IS THE EXCEPTION NOW, and it is worth knowing before you go
       looking. You gave .LogoLink its own width and height further up in
       this mode, off --NPadX and --NPad, so the logo you SEE is set there
       and --NLogoW only sizes the grid column it sits in. To resize the
       logo, change the .LogoLink rule; to change how much room the bar
       reserves for it, change --NLogoW. They are meant to agree, so if the
       logo ever looks crowded or lost, check both.                     */

        :root {
            --NBarGap:  calc(var(--NPadX) * 0.55);
            --NLogoW:   calc(var(--NGap) * 2.8);
            --NLangW:   calc(var(--NGap) * 2.4);
            --NBarSide: max(var(--NLogoW), var(--NLangW));

            --NDiscW: min(
                        calc(var(--NDiscMax) * 1.15),
                        calc((100vw
                              - var(--NPadX)    * 2
                              - var(--NBarSide) * 2			/* original: --NLogoW then --NLangW, one each */
                              - var(--NBarGap)  * 4) / 3),
                        var(--NDiscCapH)
                        );
            }

        .SideNav ul {
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;
            gap: var(--NBarGap);			/* original var(--NPadX) */
            }

    /*  EACH DISC IS EXACTLY ITS RING WIDE. On width: auto a disc is as wide
        as whichever is wider, the ring or the word under it, so "Research"
        made its disc wider than the other two and the three stopped being
        evenly spaced. Pinning the width to the ring keeps the spacing even
        and lets the label center itself under the circle.               */

        .SideNav .Disc {
            width: var(--NDiscW);			/* original auto */
            }

    /*  THE LABELS COME DOWN A STEP, because the row is now sharing its
        width with the logo and the language switch and "Research" is the
        longest word of the three. Wrapping is left on: if a narrow phone
        or a large text setting makes the word too wide, it takes a second
        line and the row grows a little, rather than the word being cut in
        half. The height is auto for the same reason.                    */

        .SideNav .DiscLabel {
            font-size: calc(var(--NGap) * 0.72);
            height: auto;
            min-height: calc(var(--NGap) * 1.2);
            line-height: 1.15;
            }

    /* ---- THE THIN LINE, now horizontal, under the whole bar ---------- */

    /*  Three quarters of a gap below the discs, your number, replacing the
        1.4rem.                                                            */

        .SideRule {
            display: block;
            width: 100%;
            height: var(--NRuleWidth);
            margin-top: calc(var(--NGap) * 0.75);
            background-color: var(--NColor4);
            }

    /* ---- MAIN : full width, no column to sit beside ------------------ */

    /*  TOP-ALIGNED, NOT CENTERED, as you asked. flex-start does the
        aligning. flex: 1 is what lets this area absorb the leftover height,
        which is what pushes the Contact block to the foot of the window on a
        short page and lets it sit naturally below the content on a long one.
        It is the whole reason this mode is flex and not block.

        THE PADDING HERE IS ZERO ON PURPOSE. Three things could each put space
        above the heading: this padding, the cancel margin .Intro carries for
        the alignment in the other modes, and the top margin set on .IntroLead
        and .Intro in index.css [MODE D]. Left alone they stacked up and the
        heading sat too low. The first two are switched off here, so the
        index.css numbers are the whole distance and they are the ones to
        change. (This note appeared three times, in three slightly different
        versions; this is the one that matches the code.)                  */

    /*  THE SIDE PADDING IS ZERO HERE NOW, not because the margin went away
        but because it moved to the body with the grid columns. The text
        still starts --NPadX in from the screen edge, and it is now the
        same --NPadX the discs above it are measured against, so the two
        cannot drift apart.                                              */

        .Main {
            margin-left: 0;
			margin-right: 0;
            flex: 1 1 auto;
            min-height: 0;
            padding: 0 0 calc(var(--NGap) * 2.5);	/* you had already zeroed the sides with x 0; same thing, written plainly */
            justify-content: flex-start;
            }

        .Intro {
            margin-top: 0;
            }

    /* ---- ROW 3 : Contact and copyright, at the foot of the page ------
       Ordinary flow, below the content. The curve is fixed to the bottom
       of the window and sits behind this block.                        */

    /*  THE BOTTOM PADDING IS RESERVING SPACE FOR THE CURVE. The curve is
        fixed to the bottom of the window; this block is the last thing in the
        flow. Without the extra padding the copyright line ends up sitting
        directly on top of the wave. Because .Main is flex: 1 above, this
        padding pushes the copyright up rather than making the page scroll.

        IF YOU CHANGE THE CURVE, check this number still clears it. The
        curve's height off the bottom is set per mode in index.css
        [H4 CURVE], on .FooterCurve's own bottom: a multiple of --NPad now,
        where it used to be a variable called --NCurveBottom. That variable
        is gone; only the /* original */ markers still name it.            */

    /* ---- ROW 3 : CONTACT ON THE LEFT, COPYRIGHT ON THE RIGHT ----------
       Your layout. A row rather than a stack, spread to both edges, and
       aligned along the bottom so the last line of the copyright sits level
       with the bottom of the Contact label rather than floating above it.

       The bottom padding is holding room for the curve, which is fixed to
       the window and would otherwise print straight across this row. If you
       change the curve's height or position below, check this clears it. */

    /*  THIS ROW DOES NOT MIRROR IN FARSI EITHER, same as the top bar above.
        Your words: Contact stays bottom left, no moving and no changing;
        the copyright stays bottom right and does not move at all.

        Without the direction below, dir="rtl" reversed this row on every
        switch: Contact flew to the right and the copyright to the left,
        which is what you were watching happen. Pinned to ltr, the two swap
        their words and nothing else. The Persian in the Contact label still
        reads right to left inside its own label, as it should.

        THIS IS THE THIRD PLACE THE SITE PINS A ROW: [09 LANG] pins EN / فا
        so the button cannot move out from under your finger, the top bar is
        pinned above, and this row is pinned here. Everything else on the
        page still mirrors properly. Delete the one line to let it flip. */

        .SideBottom {
            flex-direction: row;
            align-items: flex-end;
            justify-content: space-between;
            width: 100%;
            direction: ltr;
            padding: calc(var(--NGap) * 1.5) 0 calc(var(--NGap) * 1); 	/* your 1.5 top and 1 bottom kept; the sides are on the body now */
            }

    /*  AND IT DOES NOT CHANGE SIZE EITHER. On width: auto the Contact disc
        was as wide as the wider of its circle and its word, and "Contact" is
        much wider than "تماس". So the box shrank in Farsi, the circle
        re-centered inside the smaller box, and the ring slid left by about
        nine pixels on a 320px phone. Its left edge never moved, which is why
        it was hard to name: the thing that moved was the circle.

        Pinned to --NDiscW, the same width the three discs at the top use, so
        the circle sits in the same place in both languages and only the word
        underneath changes. Measured after: 0.0px, every width.

        THE WORD MAY BE A LITTLE WIDER THAN THE CIRCLE on the narrowest
        phones. It is centered, so it spills evenly a pixel or two into the
        margin rather than pushing anything. That is the right way round. */

    /*  ONE RULE EACH. Both of these were written twice, one pair after the
        other, with the second copy silently winning. Merged, with every
        value from the pair that was actually in force.                  */

        .SideBottom .Disc {
            width: var(--NDiscW);			/* original auto */
            margin-bottom: 0;				/* original 1rem */
            }

        .Copyright {
            width: auto;
            text-align: right;
            padding: 0;
            font-size: calc(var(--NGap) * 0.75); /* original 0.75rem */
            }

    /* ---- the curve, lifted just clear of the very bottom edge -------- */


        }


/* ==========================================================================
   [XX SCROLLBAR]
   --------------------------------------------------------------------------
   Kept from v1 because it is part of the look. Green thumb on a dark track.
   The -webkit- rules cover Chrome, Edge and Safari; the two standard
   properties underneath cover Firefox.
   ========================================================================== */

    * {
        scrollbar-width: thin;
        scrollbar-color: var(--NColor3) transparent;
        }

    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
        }

    ::-webkit-scrollbar-track {
        background: transparent;
        box-shadow: inset 0 0 5px rgba(157, 197, 190, 0.35);
        }

    ::-webkit-scrollbar-thumb {
        background: var(--NColor3);
        border-radius: 6px;
        }

    ::-webkit-scrollbar-thumb:hover {
        background: #7FB007;
        }


/* ==========================================================================
   END OF NEGAR-DEFAULT.CSS
   --------------------------------------------------------------------------
   WHAT WAS IN v1 AND IS DELIBERATELY NOT HERE, so you know it was a decision
   and not an oversight. Nothing below is lost; v1 still has all of it.

     the hamburger icon and every rule for it  -> you said lose it, it is gone
     the eleven-item nav and its hover states  -> replaced by the four discs
     .ArtSubNav, .DD, .DropDown, .DropUp       -> the dropdown, unused
     span.the and its ::before logo bullet     -> belonged to the old nav
     the MailChimp subscribe overlay           -> not on this page
     .SmallLandscape                           -> a leftover with one broken
                                                  value, display: botton
     .ArtistImage .ArtColumn2 .ArtInfoText
     .PixelShop .pixel                         -> other tabs, will return in
                                                  their own page files
     .link and .link:hover                     -> no links in body copy yet
     button:focus { outline: none }            -> removed on purpose, see
                                                  [00 RESET] and [04 A11Y]

   IMAGES FROM v1 NOT CARRIED OVER, because nothing loads them any more:
     OnDark_Initial.png, LogoOnLightv1/v2/v3.png, QR codes, Color Palette.ai,
     ASG.png, BCT.jpg, DDB.png, IUST.jpg, TGP.png, UIUC.jpg, streetsense
     logos, Negar-Resume Art.pdf, and everything in Archive/.
   ========================================================================== */