@charset "utf-8";
/* ============================================================
   Milos Djordjevic, portfolio
   Rebuilt from the Figma frame 7289:410. Every colour, size and
   coordinate below is measured out of that file.

   The whole page is drawn on a 1440 canvas that is scaled to the
   window by --k, so what is in Figma is what is on screen at any
   width. Below 980 the pin is dropped and the page stacks.
   ============================================================ */

:root{
  --wine:#2D120D;        /* hero, what I do, about */
  --bone:#FFFAD8;        /* the case chapters, the panel, the cards */
  --panel:#F7F1CC;       /* the hero square, as drawn */
  --cream:#CDE3E8;       /* type on dark */
  --ink:#2D120D;         /* type on light, and the black chips */
  --taupe:#A89A90;       /* the quiet half of the headline */
  --green:#2D120D;       /* the only highlight */
  --chiptx:#CDE3E8;      /* type inside the green chips */
  --casetx:#CDE3E8;      /* type inside the black chips */
  --grain:url(grain.png);
  --ease:cubic-bezier(.22,.61,.36,1);
  --k:1;
  /* the names the case pages use, so the phone layer reads the same
     values whichever page it is sitting on */
  --mute:#877E73; --paper:#FFFDEE; --dark:#3A1A14; --maroon:#240E0A;
  --e:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ overflow-x:clip }
body{ margin:0; background:var(--wine); color:var(--cream);
  font-family:'Schibsted Grotesk',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
h1,h2,h3,p,figure,blockquote{ margin:0 }
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
        text-align:inherit }

/* grain always sits on its own layer, so it never crosses type or pictures */
.grain::after{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--grain); background-size:170px 170px; mix-blend-mode:overlay; opacity:.22 }

/* ---------- the ramp, straight out of the file ---------- */
.d1{ font-size:94px; line-height:92px; letter-spacing:-.03em; font-weight:500; text-transform:uppercase }
.d2{ font-size:88px; line-height:82px; letter-spacing:-.03em; font-weight:500; text-transform:uppercase }
.d3{ font-size:48px; line-height:54px; letter-spacing:-.025em; font-weight:500 }
.lab{ font-size:12px; line-height:15px; letter-spacing:.18em; font-weight:500; text-transform:uppercase }
.body{ font-size:15px; line-height:22px; letter-spacing:-.01em }

/* every chip in the system is this one box */
.chip{ display:inline-flex; align-items:center; justify-content:center; padding:2px 8px;
       white-space:nowrap; font-size:14px; line-height:17px; letter-spacing:-.01em;
       text-transform:uppercase;
       transition:background .2s var(--ease), color .2s var(--ease) }
.chip--sm{ padding:2px 5px; font-size:12px; line-height:15px; letter-spacing:.18em;
           text-transform:none; justify-content:flex-start }
/* the step numbers: cream italic on the green box, never anything else */
.chip--num{ margin-top:3px; padding:2px 10px; font-size:14px; line-height:17px; letter-spacing:.06em;
            font-style:italic; font-weight:500;
            background:var(--green) !important; color:var(--chiptx) !important;
            align-self:flex-start; flex:none }
.chip--ink{ background:var(--ink); color:var(--casetx) }
.chip--cream{ background:var(--cream); color:var(--ink) }

/* ---------- the canvas every section is drawn on ---------- */
.sec{ position:relative; overflow:hidden; isolation:isolate }
.cv{ position:absolute; left:50%; top:0; width:1440px; margin-left:-720px;
     transform-origin:50% 0; transform:scale(var(--k)); z-index:1 }
.cv > *{ position:absolute }
.t-wine{ background:var(--wine); color:var(--cream) }
.t-bone{ background:var(--bone); color:var(--ink) }
.t-ink { background:var(--ink);  color:var(--cream) }

/* ============================================================
   01  INTRO
   The name rises into place, the brackets come in from the edges
   and close on it, and then the lockup blurs and fades into the page.
   ============================================================ */
.intro{ display:none }
.js .intro{ display:block; position:fixed; inset:0; z-index:90; background:var(--wine);
  transition:opacity .7s cubic-bezier(.65,0,.35,1), visibility .7s }
.js body.pre{ overflow:hidden }
.intro.done{ opacity:0; visibility:hidden }
.ilock{ position:absolute; inset:0; display:grid; place-items:center }
.ibar{ position:absolute; left:40px; right:40px; bottom:34px; display:flex;
       justify-content:space-between; align-items:flex-end; color:var(--cream) }
.ibar b{ font-size:34px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; opacity:.8 }
.irule{ position:absolute; left:40px; right:40px; bottom:24px; height:1px; background:rgba(205,227,232,.2) }
.irule i{ display:block; height:1px; width:0; background:var(--cream); transition:width .25s linear }
.iskip{ position:absolute; right:40px; top:30px; font-size:12px; letter-spacing:.18em;
        text-transform:uppercase; opacity:.5 }
.iskip:hover{ opacity:1 }

/* one size for the brackets and the name */
.lock{ --ifs:min(150px,16vw); display:flex; align-items:center; font-size:var(--ifs) }
/* on the way out the lockup simply goes soft and fades */
.lock{ transition:filter .8s cubic-bezier(.65,0,.35,1), opacity .8s cubic-bezier(.65,0,.35,1) }
.intro.b4 .lock{ filter:blur(18px); opacity:0 }
.brk{ font-size:1em; line-height:.86; font-weight:700; font-style:italic; color:var(--cream);
      flex:none; will-change:transform;
      transition:transform 1.3s cubic-bezier(.65,0,.25,1) .22s }
.brk.l{ transform:translateX(-62vw) }
.brk.r{ transform:translateX( 62vw) }
.intro.b1 .brk{ transform:none }

/* the window the name rises through: clipped top and bottom only, so the
   slant of the letters is never trimmed at the sides; the padding is the
   air between a bracket and the letters */
.core{ position:relative; flex:none; display:flex; align-items:center; height:1.04em;
       padding:0 .15em; clip-path:inset(0 -2em) }
.iw{ display:block; font-size:1em; line-height:1; font-weight:700; font-style:italic; letter-spacing:.01em;
     text-transform:uppercase; color:var(--cream); white-space:nowrap;
     transform:translateY(108%); transition:transform 1.1s cubic-bezier(.65,0,.25,1) }
.intro.b1 .iw{ transform:none }
@keyframes blink{ 50%{ opacity:0 } }

/* ============================================================
   02  THE REEL
   One pin: hero, three cases, the fold, the photographs, the split.
   ============================================================ */
.reel{ position:relative; height:650vh }
.reel-in{ position:sticky; top:0; height:100vh; overflow:hidden; isolation:isolate }
.plate{ position:absolute; inset:0; z-index:0 }
.plate.wine{ background:var(--wine) }
.plate.bone{ background:var(--bone); opacity:0 }
.plate.green{ background:var(--green); opacity:0 }
.reel .cv{ top:50%; margin-top:-450px; transform-origin:50% 50%; height:900px; z-index:2 }

/* ---- the bar ---- */
.bar{ left:40px; top:30px; width:1360px; height:27px; display:flex; align-items:flex-start;
      justify-content:space-between }
.logo{ font-size:22px; line-height:27px; font-weight:700; font-style:italic; letter-spacing:.01em;
       text-transform:uppercase; color:#CDE3E8 }
.nav{ display:flex; gap:10px; align-items:flex-start }
.nav .chip{ color:var(--cream); min-width:var(--w,auto) }
.nav .chip:hover{ background:var(--ink); color:var(--cream) }
.nav .mail{ background:var(--cream); color:var(--ink) }
.nav .mail:hover{ background:var(--ink); color:var(--cream) }

/* ---- the hero, on its own, short enough that the work shows under it ---- */
/* the hero and the four projects each take the whole window, their
   drawing kept in the middle of it */
.s-hero{ height:100vh; min-height:calc(560px * var(--k)) }
.s-hero .cv{ height:900px; top:calc(50% - 450px * var(--k)) }
.hero{ left:0; top:0; width:1440px; height:900px; pointer-events:none; z-index:4 }
.hero > *{ position:absolute; pointer-events:auto }
.eyebrow{ left:320px; top:262px; width:800px; white-space:nowrap; text-align:center; color:var(--cream) }
.head{ left:301px; top:318px; width:837px; text-align:center; color:var(--cream); white-space:nowrap }
.head b{ font-weight:500; color:var(--cream) }
.head .cur{ display:inline-block; width:.055em; height:.72em; background:var(--cream);
            margin-left:.03em; margin-right:-.085em; animation:blink .62s steps(1) infinite }
/* the hero button stays centred on 720 however wide its label gets */
.cta{ left:720px; top:550px; transform:translateX(-50%); min-width:0; height:36px;
      background:var(--ink); color:var(--cream);
      font-size:26px; line-height:32px; letter-spacing:-.01em; padding:2px 14px }
.cta:hover{ background:#0F0D0A; color:var(--cream) }
.trusted{ left:320px; top:630px; width:800px; white-space:nowrap; text-align:center; color:var(--cream) }
.trusted i{ font-style:normal; opacity:.55 }

/* ---- the laptop ---- */
.lapstage{ left:0; top:0; width:1100px; height:1180px; transform-origin:0 0; z-index:2;
           pointer-events:none }
.lapscreen{ position:absolute; left:0; top:0; width:792px; height:494px; transform-origin:0 0;
            overflow:hidden; background:#17110F; will-change:transform; backface-visibility:hidden }
/* two stacked plates so a project change is a cut, never an empty frame */
.lapscreen .sh{ position:absolute; inset:0; opacity:0; transition:opacity .16s linear }
.lapscreen .sh.on{ opacity:1 }
.lapscreen .sh img{ width:100%; height:100%; object-fit:cover }
.lapscreen .ph{ position:absolute; inset:0; display:grid; place-content:center; gap:14px;
                text-align:center; background:#2E1414 }
.lapscreen .ph b{ font-size:62px; font-weight:500; letter-spacing:-.02em; color:var(--cream) }
.lapscreen .ph i{ font-style:normal; font-size:22px; letter-spacing:.2em; color:#B39567 }
.lapfall,.lapline{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
                   display:block }
.lapline{ display:none }
/* the first photograph on the back of the lid, on the projected plane, cut
   so that it is exactly what the window shows when it opens. The size and
   the offset are set from the script for the window it is in */
.lidtag{ position:absolute; left:0; top:0; width:815px; height:568px; transform-origin:0 0;
         opacity:0; pointer-events:none; border-radius:14px; overflow:hidden;
         background:#2D120D url(ph-conference.webp) no-repeat 0 0 / auto 100% }
.lidtag span{ font-size:58px; line-height:1; font-weight:700; font-style:italic; letter-spacing:.01em;
              text-transform:uppercase; color:var(--ink); opacity:.88 }

/* ---- the panel. Through the fold it is the back of the lid itself, warped
        on the same projected corners, so it can never drift off the drawing.
        Once the lid lands flat it becomes two halves that can separate. ---- */
.rect{ left:0; top:0; z-index:1; pointer-events:none }
.warp{ position:absolute; left:0; top:0; width:815px; height:568px; transform-origin:0 0;
       background:var(--bone); border-radius:14px; display:none }
.half{ position:absolute; background:var(--bone); will-change:transform }
.half .cardin{ position:absolute; left:20px; top:20px; right:20px; bottom:20px;
               opacity:0; transition:opacity .28s var(--ease) }
.half .shot{ position:absolute; left:0; top:0; right:0; height:278px; overflow:hidden; background:#2D120D }
.half .shot img{ width:100%; height:100%; object-fit:cover }
.half .txt{ position:absolute; left:0; right:0; top:298px }
.half h3{ font-size:22px; line-height:26px; letter-spacing:-.02em; font-weight:500;
          text-transform:uppercase; color:var(--ink) }
.half p{ margin-top:10px; font-size:14px; line-height:19px; letter-spacing:-.01em;
         color:var(--ink); opacity:.8 }

/* ---- how I work: the words on the left, the laptop in the middle, the
        three habits listed on the right ---- */
.cases{ left:0; top:0; width:1440px; height:900px; z-index:3; pointer-events:none }
.hchip{ position:absolute; left:60px; top:63px }
.case{ position:absolute; left:60px; top:110px; width:290px; opacity:0;
       transition:opacity .26s var(--ease) }
.case.on{ opacity:1 }
.case .hstep{ margin-top:16px; font-size:44px; line-height:46px; letter-spacing:-.025em; font-weight:500;
              text-transform:uppercase; color:var(--ink) }
.case .body{ margin-top:20px; color:var(--ink) }
.hidx{ position:absolute; left:1090px; top:63px; width:290px; color:var(--ink) }
.hidx .body{ opacity:.68; margin-bottom:34px }
.hrow{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-top:1px solid rgba(45,18,13,.14);
       opacity:.35; transition:opacity .3s var(--ease) }
.hrow:last-child{ border-bottom:1px solid rgba(45,18,13,.14) }
.hrow.on{ opacity:1 }
.hrow .chip--num{ margin-top:2px }
.hrow .ht{ font-size:20px; line-height:24px; letter-spacing:-.02em; font-weight:500; text-transform:uppercase }
.rail{ position:absolute; left:0; top:803px; width:1440px; height:40px; z-index:3; opacity:0;
       transition:opacity .26s var(--ease) }
.rail.on{ opacity:1 }
.rail i.tick{ position:absolute; left:60px; top:0; width:2px; height:34px; background:rgba(45,18,13,.2) }
.rail .sc{ position:absolute; left:74px; top:0; font-size:12px; line-height:15px;
           letter-spacing:-.005em; text-transform:uppercase; color:var(--ink); opacity:.75 }
.rail .track{ position:absolute; left:491px; top:30px; width:459px; height:2px; background:rgba(45,18,13,.2) }
.rail .track i{ display:block; height:2px; width:44px; background:var(--wine) }
/* the drawings on the glass are paper, like the drawing around them */
.lapscreen.draw{ background:#FFFCE6 }
.lapscreen .sh svg{ display:block; width:100%; height:100% }

/* ---- the four projects ---- */
.s-work{ height:100vh; min-height:calc(740px * var(--k)) }
.s-work .cv{ height:740px; top:calc(50% - 370px * var(--k)) }
.wdeck{ left:0; top:0; width:1440px; height:740px }
.wcard{ position:absolute; width:315px; height:420px; background:#FFFDEE; color:var(--ink);
        transition:translate .95s var(--ease), rotate .95s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease) }
.wcard:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(45,18,13,.12) }
.wthumb{ position:absolute; left:14px; top:14px; width:287px; height:179px; overflow:hidden; background:#2D120D }
.wthumb > img{ width:100%; height:100%; object-fit:cover }
.wmov{ position:absolute; inset:0; opacity:0; transition:opacity .35s var(--ease); background:transparent }
.wmov img{ position:absolute; left:0; top:0; width:100%; height:auto; max-width:none; will-change:transform }
.wmov.photos{ background:#2D120D }
.wmov.photos img{ height:100%; object-fit:cover; opacity:0; transition:opacity .6s var(--ease) }
.wmov.photos img.on{ opacity:1 }
/* the moving picture shows only once it has arrived, never as an empty box */
.wcard.play .wmov.ready,.mwc.play .wmov.ready{ opacity:1 }
.wnum{ position:absolute; left:14px; top:208px; margin-top:0 }
.wname{ position:absolute; left:14px; top:242px; width:287px; font-size:26px; line-height:30px; letter-spacing:-.02em;
        font-weight:500; text-transform:uppercase }
.wmeta{ position:absolute; left:14px; top:316px; width:287px; display:flex; flex-direction:column; gap:7px }
.wmeta .lab:first-child{ opacity:.85 }
.wmeta .lab:last-child{ opacity:.5 }
.wrule{ position:absolute; left:14px; top:368px; width:287px; height:1px; background:var(--ink); opacity:.14 }
.wgo{ position:absolute; left:14px; top:384px; height:21px; background:var(--wine); color:var(--cream) }
.wcard:hover .wgo{ background:var(--ink) }

/* ---- the photographs. The rectangle is the window: it opens to the full
        screen, the strip travels through it, and it closes again. ---- */
.band{ position:absolute; inset:0; z-index:5; overflow:hidden; pointer-events:none;
       opacity:0; background:var(--ink) }
.strip{ position:absolute; inset:0; display:flex; will-change:transform }
.strip figure{ position:relative; flex:none; width:auto; height:100%; margin:0; overflow:hidden;
                border-right:3px solid var(--ink) }
.strip figure:last-child{ border-right:0 }
.strip img{ height:100%; width:auto; max-width:none; display:block }
.bandlab{ position:absolute; left:40px; bottom:30px; z-index:1; color:var(--cream);
          background:rgba(45,18,13,.55); padding:4px 10px; opacity:0;
          transition:opacity .35s var(--ease) }

/* ---- what I do, the copy beside the two cards ---- */
.three{ left:0; top:0; width:1440px; height:900px; z-index:3; pointer-events:none; opacity:0;
        transition:opacity .3s var(--ease) }
.three.on{ opacity:1 }
.three .head3{ position:absolute; left:60px; top:50px; width:700px }
.three h2{ margin-top:20px; width:420px; color:var(--cream) }
.three h2 em{ font-style:normal; color:var(--taupe) }
.three .sub{ position:absolute; left:60px; top:273px; width:700px; font-size:15px; line-height:22px;
             letter-spacing:-.01em; color:var(--cream) }

/* ============================================================
   03  the sections after the laptop
   ============================================================ */
/* --- facts and the testimonial --- */
.s-globe{ height:calc(744px * var(--k)) }
.s-globe .cv{ height:744px }
.s-wcb{ height:calc(439px * var(--k)) }
.s-wcb .cv{ height:439px }
.col{ width:var(--w); opacity:0; transform:translateY(16px);
      transition:opacity .6s var(--ease), transform .6s var(--ease) }
.col .k{ color:var(--ink); opacity:.5 }
.col p+p{ margin-top:10px; font-size:15px; line-height:22px; letter-spacing:-.01em; color:var(--ink) }
.in .col{ opacity:1; transform:none }
.in .col:nth-child(2){ transition-delay:.07s }
.in .col:nth-child(3){ transition-delay:.14s }
.in .col:nth-child(4){ transition-delay:.21s }
.rule{ height:1px; background:rgba(45,18,13,.15); transform:scaleX(0); transform-origin:0 50%;
       transition:transform .9s var(--ease) }
.in .rule{ transform:none }
/* the quote wipes down rather than fading, so it reads as being said */
/* 06. The quote is set in ink, and the green highlight is drawn over it on
   scroll, left to right, the letters turning cream behind the edge. Two
   identical copies of the same text, so the two can never drift apart. */
.wcb{ position:absolute }
.wcb .qink,.wcb .qcr{ width:1215px; text-transform:uppercase; font-size:44px; line-height:54px; letter-spacing:-.025em }
.wcb .qink{ position:absolute; left:10px; top:8px; color:var(--ink) }
.wcb .qfill{ position:relative; width:1235px; padding:8px 10px;
             background:#2D120D; overflow:hidden; cursor:pointer }
.wcb .qcr{ color:#CDE3E8 }
.js .wcb .qfill{ clip-path:inset(0 100% 0 0) }
/* the label only exists while the cursor is on the highlight, and it follows it */
.qcta{ position:absolute; left:0; top:0; display:inline-flex; align-items:center;
       padding:2px 8px; white-space:nowrap; pointer-events:none;
       background:var(--wine); color:var(--cream);
       font-size:14px; line-height:17px; letter-spacing:-.01em; text-transform:uppercase;
       opacity:0; transition:opacity .14s var(--ease); will-change:transform }
.qcta.on{ opacity:1 }
.after{ color:var(--ink); opacity:.7; line-height:22px }
.by h3{ font-size:22px; line-height:26px; letter-spacing:-.02em; font-weight:500; color:var(--ink); text-transform:uppercase }
.by p{ margin-top:10px; color:var(--ink); opacity:.55 }
.bynote{ color:var(--ink); font-size:15px; line-height:22px; letter-spacing:-.01em }

/* --- about --- */
.s-about{ height:calc(894px * var(--k)) }
.s-about .cv{ height:894px }
/* the photograph sits outside the scaled canvas so it always reaches the
   left edge of the window, and it is oversized inside its frame so the
   parallax can never pull a gap in at the top or the bottom */
.port{ position:absolute; left:0; top:0; z-index:0; overflow:hidden;
       width:calc(50% - 200px * var(--k)); height:calc(894px * var(--k)) }
.port img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%;
           transform:translateY(var(--py,0)) scale(1.16); will-change:transform }
.pcap{ position:absolute; left:60px; top:849px; z-index:1; color:var(--cream); opacity:.5 }
.abt{ position:absolute; left:580px; top:80px; width:820px; z-index:1 }
.abt h2{ margin-top:0; color:var(--cream) }
.abody{ position:absolute; left:580px; top:356px; width:580px; z-index:1;
        font-size:17px; line-height:26px; letter-spacing:-.01em; color:var(--cream) }
/* the headline sets a line at a time, each one cued by its own position */
.hl .ln{ display:block; height:92px; margin-bottom:-10px; overflow:hidden }
.hl .ln i{ display:block; font-style:normal; line-height:82px; will-change:transform }
.js .hl .ln i{ transform:translateY(100%) }
.abt .body{ margin-top:16px; width:700px; color:var(--cream); opacity:.78 }
.abt .body p+p{ margin-top:27px }
.keys{ position:absolute; left:580px; top:721px; width:820px; z-index:1 }
.krow{ position:absolute; left:0; width:820px; height:44px; display:block; padding:0;
       opacity:0; transform:translateY(14px);
       transition:opacity .6s var(--ease), transform .6s var(--ease) }
.krow .k{ position:absolute; left:0; top:15px; color:var(--cream); opacity:.5;
          font-size:14px; line-height:17px; letter-spacing:.18em }
.krow .v{ position:absolute; top:10px; white-space:nowrap;
          font-size:15px; line-height:22px; letter-spacing:-.01em; color:var(--cream) }
.krow .rule{ position:absolute; left:0; right:0; bottom:0; background:rgba(205,227,232,.14) }
.in .krow{ opacity:1; transform:none }
.in .krow:nth-child(2){ transition-delay:.09s }
.in .krow:nth-child(3){ transition-delay:.18s }

/* --- contact --- */
.s-contact{ height:calc(597px * var(--k)) }
.s-contact .cv{ height:597px }
.cbox{ position:absolute; left:0; top:100px; width:1440px; text-align:center }
.cbox h2{ margin-top:21px; color:var(--ink); font-size:88px; line-height:92px }
.csub{ position:absolute; left:507px; top:250px; width:426px; text-align:center;
       color:var(--ink); opacity:.65 }
.cfoot{ position:absolute; left:370px; top:450px; width:700px; text-align:center;
        color:var(--ink); opacity:.5 }
.mailbtn{ position:absolute; left:720px; top:354px; transform:translateX(-50%); height:36px;
          background:var(--ink); color:var(--cream); padding:2px 14px;
          font-size:26px; line-height:32px; letter-spacing:-.01em }
.mailbtn:hover{ background:#0F0D0A; color:var(--cream) }
/* the brackets that opened the page close around the ask */
.cbrk{ position:absolute; top:96px; font-size:150px; line-height:1; font-weight:700; font-style:italic;
       color:var(--ink); opacity:.16; transition:transform 1s var(--ease), opacity 1s var(--ease) }
.cbrk.l{ left:300px; transform:translateX(-340px) }
.cbrk.r{ left:1060px; transform:translateX(340px) }
.in .cbrk{ transform:none; opacity:.16 }

/* --- the footer, on the same plate as the ask --- */
.flogo{ left:calc(60px - (100vw / var(--k) - 1440px) / 2); top:510px; color:var(--ink) }
.flinks{ left:561px; top:515px; display:flex; gap:30px }
.flinks a{ display:inline-flex; align-items:center; height:21px; padding:2px 8px;
           font-size:14px; line-height:17px; letter-spacing:-.01em; text-transform:uppercase;
           color:var(--ink);
           transition:background .2s var(--ease), color .2s var(--ease) }
.flinks a:hover{ background:var(--ink); color:var(--cream) }
.fcopy{ left:auto; right:calc(60px - (100vw / var(--k) - 1440px) / 2); top:516px; width:auto; white-space:nowrap; text-align:right; color:var(--ink); opacity:.5 }

/* ============================================================
   04  below 980 the pin is pointless, so it stacks
   ============================================================ */
.mob{ display:none }
@media (max-width:979px){
  .reel{ height:auto }
  .reel-in{ position:static; height:auto; overflow:visible }
  .reel .cv,.plate.bone,.plate.green,.band{ display:none }
  .sec{ height:auto !important }
  .sec .cv{ display:none }
  .s-hero,.s-work{ display:none !important }
  .mob{ display:block }
  .mobsec{ position:relative; padding:34px 20px 48px }
  .mobsec > div{ position:relative; z-index:1 }
  .mob .d1{ font-size:40px; line-height:40px }
  .mob .d2{ font-size:38px; line-height:38px }
  .mob .d3{ font-size:26px; line-height:32px }
  .mob .body{ font-size:14px; line-height:22px }
  .mobbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:40px }
  .mobart{ width:100%; margin:28px 0; background:var(--panel); aspect-ratio:1100 / 1180;
           position:relative; overflow:hidden }
  .mobart img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain }
  .mobcards,.mobgrid{ display:grid; gap:18px; margin-top:26px }
  .mobcard{ background:var(--panel); padding:20px }
  .mobcard .shot{ aspect-ratio:16/10; overflow:hidden; background:#2D120D; margin-bottom:16px }
  .mobcard .shot img{ width:100%; height:100%; object-fit:cover }
  .mobcard h3{ font-size:20px; line-height:24px; font-weight:500; text-transform:uppercase; color:var(--ink) }
  .mobcard p{ margin-top:10px; font-size:14px; line-height:22px; color:var(--ink); opacity:.72 }
  .mobshots{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:26px 0 }
  .mobshots img{ width:100%; aspect-ratio:4/3; object-fit:cover }
  .mobport{ width:100%; aspect-ratio:3/4; object-fit:cover; margin-bottom:26px }
  /* the slanted bracket runs past its own box; room on both sides so a
     phone never trims it */
  .brk{ padding:0 .16em; margin:0 -.16em }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  .js .intro{ display:none }
}


/* ============================================================
   05  THE GLOBE
   Drawn live from lon/lat, so it stays sharp at any size and the
   flags can never drift off the land they stand on.
   ============================================================ */
.ghead{ color:var(--ink); text-transform:uppercase; font-size:44px; line-height:42px;
        letter-spacing:-.03em }
.gl{ width:435px; height:435px }
.gl canvas{ width:435px; height:435px; display:block }
.flags{ position:absolute; inset:0; pointer-events:none }
.flag{ position:absolute; left:0; top:0; width:0; height:0; will-change:transform }
.flag i{ position:absolute; left:0; bottom:0; width:1px; background:var(--wine) }
.flag b{ position:absolute; left:-4px; padding:2px 4px; white-space:nowrap;
         background:var(--wine); color:var(--cream);
         font-size:10px; line-height:13px; letter-spacing:.18em; font-weight:500;
         text-transform:uppercase }
.flag.base i{ background:var(--green) }
.flag.base b{ background:var(--green) }
.glnav{ display:flex; gap:34px }
.glbtn{ width:34px; height:34px; border:1px solid rgba(45,18,13,.45); display:grid; place-items:center;
        transition:background .2s var(--ease), border-color .2s var(--ease) }
.glbtn svg{ width:34px; height:34px; fill:none; stroke:var(--ink); stroke-width:1.2;
            stroke-linecap:round; stroke-linejoin:round }
.glbtn:hover{ background:var(--ink); border-color:var(--ink) }
.glbtn:hover svg{ stroke:var(--cream) }
.gfoot{ color:var(--ink); line-height:22px }

/* copied: the chip turns green for a moment */
.sw.ok,#topbar nav .sw.ok,#pagebar nav .sw.ok{background:#2D120D !important;color:#CDE3E8 !important}

/* 05 holds the window while the scroll turns the globe once around, then
   lets go into 06. The arrows still turn it by hand. */
@media (min-width:980px){
  .s-globe{ height:240vh !important; overflow:clip }
  .s-globe .gpin{ position:sticky; top:0; height:100vh; overflow:hidden }
  .s-globe .gpin .cv{ top:calc(50% - 372px * var(--k)) }
}

/* palette: coffee bean, lemon chiffon, botticelli. The big dark surfaces are
   coffee bean with botticelli type; the small tags are botticelli with dark type */
.chip--num,.num,.row .nm,.mnote .n,.mrow .n,.mnum,.wnum{background:#CDE3E8 !important;color:#2D120D !important}
.flag.base i,.flag.base b,.flag.base::after{background:#CDE3E8 !important;color:#2D120D !important}
.chip.wine,.mchip[style*="var(--wine)"]{background:#CDE3E8 !important;color:#2D120D !important}
.s-hero .cta{background:#CDE3E8 !important;color:#2D120D !important}
.s-hero .cta:hover{background:#FFFAD8 !important;color:#2D120D !important}
.mhero .mcta{background:#CDE3E8 !important;color:#2D120D !important}
#pagebar.onwine nav a:hover{background:#CDE3E8 !important;color:#2D120D !important}
#pagebar.onwine nav .mail:hover{background:#FFFAD8 !important;color:#2D120D !important}
/* the label on the quote reads as a small tag on the coffee highlight */
.qcta{background:#CDE3E8 !important;color:#2D120D !important}