/* ═══════════════════════════════════════════════════════════════════════════
   SKIN — ULTRA FASHION EXCLUSIVE
   Monochrome editorial luxe. Didot/Bodoni, ivory, gold. Greyscale art, no
   bevels, no blinking, no arrows. This is the skin the published issue runs.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;
  --sans: 'Futura','Century Gothic','Avenir Next','Helvetica Neue',Helvetica,sans-serif;
  --serif: 'Didot','Bodoni MT','Playfair Display',Georgia,serif;
  --mono: 'Futura','Century Gothic','Helvetica Neue',Helvetica,sans-serif;
  --display: 'Didot','Bodoni MT','Playfair Display',Georgia,serif;

  --desktop-bg: #e8e2d6;
  --paper-bg: #0d0d0d;
  --fg: #f6f2ea;
  --rule-color: rgba(246,242,234,.22);
  --focus: #d9b878;
  --mag-shadow: 0 0 60px rgba(0,0,0,.28);

  /* greyscale is the house treatment, not a dimmer — luminance is untouched */
  --art-filter: grayscale(1) contrast(1.04);
  /* the scrim is a footing for the text, nothing more. Above 42% the picture
     is completely clear, because somebody paid for it. */
  --overlay: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 16%, rgba(0,0,0,0) 42%);
  --line-plate: transparent; --line-plate-pad: 0;

  /* One hard offset and, on a light skin, the least halo that still
     separates type from a photograph. The heavy double glows read as
     smudge at any size above a caption. */
  --shadow-s: 1px 1px 0 rgba(0,0,0,.7);
  --shadow-m: 1px 1px 0 rgba(0,0,0,.85);
  --shadow-l: 1px 2px 0 rgba(0,0,0,.85);

  --mast-pad: 3px 8px 0;
  --mast-fill: #ffffff; --mast-weight: 400; --mast-track: 2px;
  --mast-shadow: drop-shadow(0 2px 18px rgba(0,0,0,.65));

  --issue-bg: transparent; --issue-fg: #f6f2ea;
  --issue-border: 1px solid rgba(246,242,234,.6);
  --issue-justify: center; --issue-gap: 22px; --issue-track: .3em;

  --kick-fg: #d9b878; --kick-track: .32em;
  --kick-prefix: ""; --kick-suffix: "";
  --line-weight: 400;
  --c1: #ffffff; --c2: #d9b878; --c3: #ffffff; --c4: #d9b878;
  --v0-decoration: none;
  --hl-bg: #f6f2ea; --hl-fg: #101010; --hl-font: var(--serif); --hl-weight: 400;
  --new-bg: #101010; --new-fg: #d9b878; --new-track: .2em; --new-rotate: none;
  --blink-anim: none;

  --lead-fg: #ffffff; --lead-k-fg: #d9b878; --sub-fg: #efe9dd;
  --lead-weight: 400; --lead-track: .05em; --lead-k-track: .32em;
  --tag-bg: #d9b878; --tag-fg: #101010;

  --more-border: 1px solid #d9b878; --more-bg: transparent; --more-fg: #d9b878;
  --more-bg-hover: #d9b878; --more-fg-hover: #101010; --more-track: .26em;

  --split-rule: 1px solid rgba(246,242,234,.28);

  --bar-h: 3px; --bar-track: rgba(0,0,0,.6); --bar-fill: #f6f2ea;
  --dwell: 15s;

  --bar-bg: #101010; --bar-rule: 1px solid rgba(246,242,234,.28);
  --tk-fg: #d9b878; --tk-hot: #f6f2ea; --tk-track: .04em; --tk-speed: 44s;

  --menu-bg: #f6f2ea; --menu-fg: #101010; --menu-track: .3em;
  --menu-hover-bg: #101010; --menu-hover-fg: #f6f2ea;

  /* chrome strips: ad slot and statistics bar */
  --chrome: #f6f2ea; --chrome-rule: 1px solid #101010;
  --cell-border: 1px solid rgba(16,16,16,.25); --cell-fg: #101010; --led: #6b5220;
  --statbar-h: 34px;
  --adlbl-bg: #101010; --adlbl-border: 1px solid #101010; --adlbl-fg: #f6f2ea;
  --banner-bg: #101010; --banner-border: 1px solid #d9b878; --banner-flash: #f6f2ea;
  --banner-b1: #d9b878; --banner-b2: #f6f2ea; --banner-anim: none;
  --reel-x-fg: #f6f2ea;
  --viewall-align: flex-end;
  --scroll-thumb: #3a352c; --scroll-track: rgba(0,0,0,.35); --scroll-thumb-hover: #5c5442;
  --subscribe-bg: rgba(13,13,13,.72); --more-bg-solid: #101010; --more-bg-hover-fg: #101010;
  --counts-fg: rgba(246,242,234,.66); --counts-strong: #f6f2ea;
  --upvoted-bg: #d9b878; --upvoted-fg: #101010;
  --voted-bg: #d9b878; --voted-fg: #101010;
  --pending-bg: #8a6d2f; --pending-fg: #f6f2ea;
  --rail-h: 17px;
  --counts-bg: rgba(13,13,13,.78); --counts-border: 1px solid rgba(246,242,234,.22);
  --nl-bg: #d9b878; --nl-fg: #101010; --nl-border: 1px solid #d9b878;
  --nl-field-bg: #f6f2ea; --nl-field-border: #101010; --nl-placeholder: rgba(16,16,16,.5);
  --nl-btn-bg: #101010; --nl-btn-fg: #f6f2ea;
  /* the desk, and the switcher parked on it */
  --desk-bg: #e8e2d6; --desk-fg: rgba(16,16,16,.16); --desk-ink: .55;
  --brand-art: url("/media/brand/campaign-1.jpg");
  --brand-word-fg: #f6f2ea;
  --reader-sheet: rgba(13,13,13,.93); --reader-sheet-rule: 1px solid rgba(217,184,120,.5);
  --reader-body-fg: #e8e0d4;
  --brand-tag-bg: #101010; --brand-tag-fg: #d9b878;
  --badge-bg: #101010;
  --sw-bg: #f6f2ea; --sw-fg: #101010; --sw-dim: rgba(16,16,16,.55);
  --sw-border: 1px solid #101010; --sw-a: #101010; --sw-b: #d9b878;
  --sw-hover-bg: rgba(16,16,16,.1); --sw-hover-fg: #101010;
  --sw-on-bg: #101010; --sw-on-fg: #f6f2ea;
  --mast-plate: transparent;
  --depth-bg: rgba(217,184,120,.14); --depth-edge: rgba(217,184,120,.4); --flash-bad: #c98;
  --hover-plate: #f6f2ea; --hover-ink: #101010; --hover-rule: #d9b878;
  --live-dot: #6a8f6a; --heart-fg: #d9b878; --drawer-rule: 2px solid #d9b878; --led-size: 3px; --led-size-sm: 2px;
  --led-opacity: .34; --led-blend: normal;
  --body-plate: transparent;
  --led-hi: rgba(255,255,255,.16); --led-lo: rgba(0,0,0,.16);
  --mark-ring: rgba(246,242,234,.35);
  --rail-ground: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,0));
  --act-bg: #101010; --act-fg: #d9b878;
}