@charset "UTF-8";

/* =========================================================
   Hlet — Creative Works
   Tokens
   ========================================================= */
:root{
  --bg:#f7f7f6;
  --bg-works:#ededec;
  --bg-end:#fafafa;
  --surface:#f2f2f1;
  --ink:#14161a;
  --ink-2:#5b5e64;
  --ink-3:#8e9197;
  --line:rgba(20,22,26,.16);
  --line-soft:rgba(20,22,26,.08);

  --gut:clamp(20px, 3.6vw, 56px);
  --maxw:1560px;

  --f-sans:"Inter", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --f-disp:"Jost", "Inter", "Helvetica Neue", sans-serif;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);

  --tone:#4a4a4a;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:14px;
  font-weight:400;
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

h1,h2,h3,p,dl,dd,figure{margin:0}
dl,dt,dd{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

::selection{background:var(--ink);color:#fff}

.sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:8px;left:8px;z-index:200;
  padding:10px 16px;background:var(--ink);color:#fff;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  transform:translateY(-200%);
}
.skip:focus{transform:none}

:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:4px;
}

/* micro type helper */
.meta-type{
  font-size:9px;
  line-height:1.5;
  letter-spacing:.14em;
  color:var(--ink-3);
  text-transform:uppercase;
}

/* =========================================================
   Header
   ========================================================= */
.hd{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px var(--gut);
  mix-blend-mode:normal;
  transition:transform .7s var(--e-out), opacity .5s linear;
}
.hd.is-hidden{transform:translateY(-105%);opacity:0}

.hd__logo{
  font-family:var(--f-disp);
  font-weight:300;
  font-size:23px;
  letter-spacing:.005em;
  line-height:1;
  display:inline-block;
  transition:opacity .4s var(--e-out);
}
.hd__logo:hover{opacity:.5}

.hd__nav{
  margin-left:auto;
  display:flex;
  gap:34px;
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--ink-2);
}
.hd__nav a{position:relative;padding:2px 0}
.hd__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .6s var(--e-out);
}
.hd__nav a:hover{color:var(--ink)}
.hd__nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}

.hd__burger{
  width:26px;height:14px;position:relative;flex:0 0 auto;
}
.hd__burger span{
  position:absolute;left:0;right:0;height:1px;background:var(--ink);
  transition:transform .55s var(--e-out), opacity .3s linear;
}
.hd__burger span:nth-child(1){top:4px}
.hd__burger span:nth-child(2){top:10px}
.hd__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.hd__burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* Menu overlay */
.menu{
  position:fixed;inset:0;z-index:55;
  background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--gut);
  opacity:0;
  transition:opacity .5s var(--e-io);
}
.menu[hidden]{display:none}
.menu.is-open{opacity:1}
.menu__nav{display:flex;flex-direction:column;gap:6px}
.menu__nav a{
  font-family:var(--f-disp);
  font-weight:200;
  font-size:clamp(40px,7vw,86px);
  line-height:1.22;
  letter-spacing:.005em;
  overflow:hidden;
}
.menu__nav a span{
  display:inline-block;
  transform:translateY(110%);
  transition:transform .8s var(--e-out) var(--d,0s), opacity .6s linear var(--d,0s);
  opacity:0;
}
.menu.is-open .menu__nav a span{transform:none;opacity:1}
.menu__nav a:hover span{opacity:.45}
.menu__mail{
  margin-top:56px;
  font-size:12px;letter-spacing:.08em;color:var(--ink-2);
  opacity:0;transform:translateY(14px);
  transition:opacity .6s linear .35s, transform .8s var(--e-out) .35s;
}
.menu.is-open .menu__mail{opacity:1;transform:none}

/* =========================================================
   FV
   ========================================================= */
.fv{
  position:relative;
  height:100svh;
  min-height:640px;
  overflow:hidden;
  background:var(--bg);
  isolation:isolate;
}
.fv__stage{
  position:absolute;inset:0;
  perspective:1700px;
  perspective-origin:50% 46%;
  transform-style:preserve-3d;
  z-index:1;
  contain:strict;
}
.fv__title{
  position:absolute;
  left:var(--gut);
  top:50%;
  transform:translateY(-54%);
  z-index:3;
  pointer-events:none;
}
.fv__eyebrow{
  font-size:9.5px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:18px;
  opacity:0;
  animation:fvIn 1.4s var(--e-out) .25s forwards;
}
.fv__logo{
  font-family:var(--f-disp);
  font-weight:200;
  font-size:clamp(58px,7.1vw,104px);
  line-height:.95;
  letter-spacing:.006em;
  opacity:0;
  animation:fvIn 1.7s var(--e-out) .38s forwards;
}
.fv__rule{
  display:block;
  width:26px;height:1px;
  background:var(--ink);
  margin-top:26px;
  transform-origin:0 50%;
  transform:scaleX(0);
  animation:fvRule 1.4s var(--e-out) .9s forwards;
}
@keyframes fvIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fvRule{to{transform:scaleX(1)}}

.fv__scroll{
  position:absolute;
  /* centred with auto margins, not a transform : fvIn ends on
     transform:none and would wipe out a translate used for centring */
  left:0;right:0;bottom:0;
  width:max-content;
  margin-inline:auto;
  z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  pointer-events:none;
  opacity:0;
  animation:fvIn 1.2s var(--e-out) 1.2s forwards;
}
.fv__scroll span{
  font-size:8.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-2);
}
.fv__scrollline{
  display:block;width:1px;height:84px;
  background:var(--line-soft);
  position:relative;overflow:hidden;
}
.fv__scrollline::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:38px;
  background:var(--ink-2);
  animation:scrollRun 2.6s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes scrollRun{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(230%)}
}

/* --- FV cards --- */
.fvcard{
  position:absolute;left:0;top:0;
  width:0;height:0;
  transform-style:preserve-3d;
  will-change:transform,opacity;
}
.fvcard__hit{
  position:absolute;
  left:0;top:0;
  width:var(--w);height:var(--h);
  margin-left:calc(var(--w) / -2);
  margin-top:calc(var(--h) / -2);
  display:block;
  transform-style:preserve-3d;
  will-change:transform;
  cursor:pointer;
  box-shadow:0 26px 60px -34px rgba(20,22,26,.55), 0 4px 14px -10px rgba(20,22,26,.35);
  transition:box-shadow .6s var(--e-out);
}
.fvcard__hit:hover{
  box-shadow:0 44px 90px -38px rgba(20,22,26,.62), 0 6px 18px -10px rgba(20,22,26,.4);
}
.fvcard__thumb{
  position:absolute;inset:0;
  display:block;
  background:var(--tone);
  overflow:hidden;
  clip-path:inset(0% 0%);
  transition:clip-path 1s var(--e-out);
}
.fvcard__thumb::after{
  content:"";position:absolute;inset:0;
  /* themed color wash, randomized per card in JS (--panel-color) */
  background:var(--panel-color, transparent);
  opacity:.9;
  pointer-events:none;
}
.fvcard__thumb img,
.fvcard__thumb video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
}
/* the grid layout trims every work to one shared ratio */
.fv__stage.is-cropped .fvcard__thumb{
  clip-path:inset(var(--cy,0%) var(--cx,0%));
}
.fv__stage.is-cropped .fvcard__hit{
  box-shadow:none;
  transition:box-shadow 1s var(--e-out);
}
.fvcard__meta{
  position:absolute;left:0;top:0;
  width:230px;
  transform-origin:0 0;
  will-change:transform;
  pointer-events:none;
  opacity:.62;
  transition:opacity .5s var(--e-out);
}
.fvcard.is-hover .fvcard__meta{opacity:1}
.fvcard__meta b{
  display:block;font-weight:400;font-size:9px;letter-spacing:.16em;color:var(--ink-3);
}
.fvcard__meta i{
  display:block;font-style:normal;font-size:9px;letter-spacing:.16em;color:var(--ink-3);
}
.fvcard__meta em{
  display:block;font-style:normal;
  margin-top:5px;
  font-size:10.5px;letter-spacing:.19em;color:var(--ink);
  text-transform:uppercase;
}
.fvcard.is-hidden{visibility:hidden}

/* =========================================================
   Works
   ========================================================= */
.works{
  position:relative;
  background:var(--bg-works);
  padding:clamp(48px,5.4vw,78px) var(--gut) clamp(64px,7vw,104px);
}
.works__bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:clamp(28px,3vw,44px);
}
.tabs{
  position:relative;
  display:flex;
  gap:clamp(20px,2.4vw,40px);
  flex-wrap:wrap;
}
.tab{
  position:relative;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--ink-3);
  padding:2px 0 8px;
  transition:color .5s var(--e-out);
}
.tab:hover{color:var(--ink-2)}
.tab.is-active{color:var(--ink)}
.tabs__ink{
  position:absolute;
  left:0;top:0;
  height:1px;width:0;
  background:var(--ink);
  transition:transform .7s var(--e-out), width .7s var(--e-out);
}
.works__count{
  font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);
  padding-bottom:8px;white-space:nowrap;
}
.works__count [data-count]{
  display:inline-block;min-width:1.4em;
  transition:opacity .3s linear;
}
.works__count.is-swap [data-count]{opacity:0}

/* grid : no-JS fallback */
.grid{
  display:flex;flex-wrap:wrap;gap:28px 24px;
  align-items:flex-start;
}
.work{flex:1 1 320px;max-width:520px}
.work__thumb{
  display:block;width:100%;aspect-ratio:var(--ar,1.6);
  overflow:hidden;
}
/* the six column plans hand a card anything from a near square to a long
   panorama, so the thumb always fills its box and takes the crop */
.work__thumb img,
.work__thumb video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
/* a site capture is cropped from the top, where its header lives … */
.work__thumb img{object-position:top center}
/* … a film from the middle, where the subject is */
.work__thumb video{object-position:center}

/* grid : JS layout */
.grid.is-laid{
  display:block;position:relative;flex-wrap:nowrap;gap:0;
  transition:height .95s var(--e-out);
}
.grid.is-still,
.grid.is-still .work{transition:none !important}
.grid.is-laid .work{
  position:absolute;left:0;top:0;
  max-width:none;
  will-change:transform,width,opacity;
  transform:translate3d(0,0,0);
}
.grid.is-laid .work__thumb{aspect-ratio:auto;height:var(--th,240px)}

.work__hit{
  position:relative;display:block;width:100%;overflow:hidden;
  cursor:pointer;
}
.work__thumb{
  transform:scale(1.001);
  transition:transform 1.1s var(--e-out), filter .8s var(--e-out);
}
.work__hit:hover .work__thumb{transform:scale(1.045)}
.work__hit::after{
  content:"";position:absolute;inset:0;
  background:rgba(247,247,246,.0);
  transition:background .6s var(--e-out);
}
.work__hit:hover::after{background:rgba(247,247,246,.06)}

.work__play{
  position:absolute;left:50%;top:50%;
  z-index:2;
  width:44px;height:44px;margin:-22px 0 0 -22px;
  border:1px solid rgba(255,255,255,.85);
  border-radius:50%;
  transition:transform .7s var(--e-out), background .5s linear;
}
.work__play::after{
  content:"";position:absolute;left:52%;top:50%;
  transform:translate(-50%,-50%);
  border-left:9px solid rgba(255,255,255,.92);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
.work__hit:hover .work__play{transform:scale(1.12);background:rgba(255,255,255,.1)}

.work__meta{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  column-gap:14px;
  padding-top:11px;
}
.work__num{
  grid-column:1;grid-row:1;
  font-size:9px;letter-spacing:.16em;color:var(--ink-3);
}
.work__cat{
  grid-column:2 / span 2;grid-row:1;
  font-size:9px;letter-spacing:.14em;color:var(--ink-3);
}
.work__title{
  grid-column:1 / span 2;grid-row:2;
  font-size:11px;letter-spacing:.06em;color:var(--ink);
  padding-top:3px;
}
/* the credit : what Hlet actually did on the job */
.work__role{
  grid-column:1 / span 2;grid-row:3;
  font-size:9px;letter-spacing:.1em;color:var(--ink-2);
  padding-top:5px;
}
.work__mark{
  grid-column:3;grid-row:2;
  width:14px;height:1px;background:var(--line);
  align-self:center;
  transform-origin:100% 50%;
  transition:transform .7s var(--e-out), background .5s linear;
}
.work:hover .work__mark{transform:scaleX(1.9);background:var(--ink)}

/* enter / leave states (JS layout) */
.grid.is-laid .work{
  transition:
    transform .95s var(--e-out) var(--d,0s),
    width .95s var(--e-out) var(--d,0s),
    opacity .5s linear var(--d,0s);
}
.grid.is-laid .work.is-out{
  opacity:0;
  pointer-events:none;
  transition:
    transform .7s var(--e-io) var(--d,0s),
    opacity .45s linear var(--d,0s);
}
.grid.is-laid .work.is-pre{
  opacity:0;
  transition:none;
}

/* reveal on scroll */
.grid.is-laid .work .work__hit,
.grid.is-laid .work .work__meta{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--e-out) var(--rd,0s), transform 1.1s var(--e-out) var(--rd,0s);
}
.grid.is-laid .work.is-in .work__hit,
.grid.is-laid .work.is-in .work__meta{opacity:1;transform:none}

/* =========================================================
   About / Contact
   ========================================================= */
.end{
  background:var(--bg-end);
  padding:clamp(56px,7vw,104px) var(--gut) clamp(40px,4vw,56px);
}
.end__row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  flex-wrap:wrap;
}
.end__logo{
  font-family:var(--f-disp);
  font-weight:300;
  font-size:clamp(28px,3vw,40px);
  line-height:1;
  letter-spacing:.005em;
}
/* the reading, set small on the wordmark's own baseline */
.end__yomi{
  margin-left:16px;
  font-family:var(--f-sans);
  font-size:11.5px;letter-spacing:.16em;color:var(--ink-3);
}
.end__disc{
  margin-top:22px;
  font-size:11.5px;letter-spacing:.1em;color:var(--ink-2);
}
/* sits tight under the disciplines : the pair reads as one credit block */
.end__name{
  margin-top:10px;
  font-size:11.5px;letter-spacing:.14em;color:var(--ink-3);
}
.end__contact{text-align:right;min-width:180px}
.end__label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.end__rule{display:block;width:18px;height:1px;background:var(--line);margin:12px 0 12px auto}
.end__mail a{
  font-size:13px;letter-spacing:.06em;
  position:relative;
}
.end__mail a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .7s var(--e-out);
}
.end__mail a:hover::after{transform:scaleX(1);transform-origin:0 50%}

.ft{
  background:var(--bg-end);
  padding:0 var(--gut) 28px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.ft__copy{font-size:9.5px;letter-spacing:.1em;color:var(--ink-3)}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--e-out), transform 1.2s var(--e-out)}
.rv.is-in{opacity:1;transform:none}

/* =========================================================
   Modal
   ========================================================= */
.md{
  position:fixed;inset:0;z-index:120;
  background:var(--surface);
  clip-path:inset(0 0 0 0);
  will-change:clip-path;
}
.md[hidden]{display:none}
.md__scroll{
  position:absolute;inset:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  outline:none;
}
/* two columns : the caption holds still, the work scrolls past it */
.md__inner{
  max-width:1560px;
  margin:0 auto;
  padding:clamp(72px,9vw,132px) var(--gut) clamp(80px,10vw,150px);
  display:grid;
  grid-template-columns:minmax(260px, 30%) 1fr;
  gap:clamp(32px,5vw,88px);
  align-items:start;
}

.md__close{
  position:fixed;
  top:clamp(18px,2.4vw,34px);
  right:clamp(18px,2.6vw,40px);
  z-index:10;
  width:clamp(38px,4.4vw,62px);
  height:clamp(38px,4.4vw,62px);
  opacity:0;
  transition:opacity .5s linear, transform .8s var(--e-out);
}
.md.is-open .md__close{opacity:1}
.md__close svg{width:100%;height:100%;display:block;overflow:visible}
.md__close line{
  stroke:var(--ink);stroke-width:1.25;
  transition:stroke-width .5s var(--e-out);
  stroke-dasharray:74;stroke-dashoffset:74;
}
.md.is-open .md__close line{
  stroke-dashoffset:0;
  transition:stroke-dashoffset .8s var(--e-out) .35s;
}
.md__close:hover{transform:rotate(90deg)}
.md__close:hover line{stroke-width:1.6}

.md__head{
  position:sticky;
  top:clamp(72px,9vw,132px);
}
.md__head > *{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .3s linear, transform .4s var(--e-io);
}
.md.is-open .md__head > *{
  opacity:1;transform:none;
  transition:opacity .9s var(--e-out) var(--d,0s), transform 1.15s var(--e-out) var(--d,0s);
}
.md__head > *:nth-child(1){--d:.30s}
.md__head > *:nth-child(2){--d:.36s}
.md__head > *:nth-child(3){--d:.44s}
.md__head > *:nth-child(4){--d:.52s}
.md__num{font-size:10px;letter-spacing:.24em;color:var(--ink-3)}
.md__title{
  font-family:var(--f-disp);
  font-weight:200;
  font-size:clamp(30px,3.1vw,48px);
  line-height:1.1;
  letter-spacing:.01em;
  margin-top:16px;
}
.md__cat{
  margin-top:18px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
}
/* stacked : the column is too narrow to sit these side by side */
.md__info{
  margin-top:clamp(28px,3.4vw,44px);
  display:flex;flex-direction:column;gap:20px;
  padding-bottom:clamp(28px,3vw,40px);
  border-bottom:1px solid var(--line-soft);
}
.md__info dt{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.md__info dd{margin-top:8px;font-size:12.5px;letter-spacing:.04em;color:var(--ink);word-break:break-all}
.md__info a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.md__info a:hover{border-bottom-color:var(--ink)}

/* inside the modal nothing is cropped : the work is shown at its own shape,
   only held inside the viewport */
.md__hero{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  /* while the frame morphs it crops the work rather than stretching it */
  overflow:hidden;
  will-change:transform;
  transform-origin:0 0;
}
/* the counter-scale opens from the same corner the card crops from */
.md__hero img,
.md__hero video{transform-origin:50% 0}
/* shown at its own size, only held back when it outgrows the column */
.md__hero img{
  width:auto;height:auto;
  max-width:100%;
  display:block;
}
/* a film is held inside the viewport so the whole frame is seen at once */
.md__hero video{
  width:auto;height:auto;
  max-width:100%;
  max-height:90vh;
  display:block;
}

.mg{
  margin-top:clamp(40px,5vw,72px);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(22px,3vw,44px);
  align-items:start;
}
.mg__i{
  background:var(--t, transparent);
  overflow:hidden;
  opacity:0;
  transform:translateY(38px);
  transition:opacity 1.1s var(--e-out), transform 1.3s var(--e-out);
}
.mg__i.is-shot{aspect-ratio:auto;background:transparent}
.mg__i.is-shot img,
.mg__i.is-shot video{
  display:block;
}
.mg__i.is-shot img{
  width:auto;height:auto;
  max-width:100%;
  margin:0 auto;
}
.mg__i.is-shot video{
  width:auto;height:auto;
  max-width:100%;
  max-height:90vh;
  aspect-ratio:auto;
  object-fit:contain;
  background:transparent;
  margin:0 auto;
}
.mg__i.is-in{opacity:1;transform:none}
.mg__i--full{grid-column:1 / -1}
.mg__i--half{grid-column:span 6}
.mg__i--l7{grid-column:1 / span 7}
.mg__i--r4{grid-column:9 / span 4}
.mg__i--c8{grid-column:3 / span 8}
.mg__i--l5{grid-column:1 / span 5}
.mg__i--r6{grid-column:7 / span 6}
.mg__i--ph{grid-column:span 3}

.md__end{
  margin-top:clamp(60px,8vw,120px);
  text-align:center;
  font-family:var(--f-disp);
  font-weight:200;
  font-size:20px;
  letter-spacing:.3em;
  color:var(--ink-3);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:900px){
  .hd__nav{display:none}
  .fv{height:92svh}
  /* not enough width for a sidebar : the caption goes back above the work */
  .md__inner{grid-template-columns:1fr;gap:clamp(32px,5vw,56px)}
  .md__head{position:static}
  .md__info{flex-direction:row;flex-wrap:wrap;gap:clamp(28px,5vw,60px)}
  .end__contact{text-align:left}
  .end__rule{margin-left:0}
  .mg{gap:20px}
  .mg__i--half,.mg__i--l7,.mg__i--r4,.mg__i--c8,.mg__i--l5,.mg__i--r6{grid-column:1 / -1}
  .mg__i--ph{grid-column:span 4}
}
@media (min-width:901px){
  .hd__burger{display:none}
}
@media (max-width:600px){
  .works__bar{flex-direction:column;align-items:flex-start;gap:14px}
  .works__count{padding-bottom:0}
  .fvcard__meta{width:170px}
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .fv__eyebrow,.fv__logo,.fv__scroll{opacity:1}
  .fv__rule{transform:scaleX(1)}
  .grid.is-laid .work .work__hit,
  .grid.is-laid .work .work__meta{opacity:1;transform:none}
  .mg__i{opacity:1;transform:none}
  .rv{opacity:1;transform:none}
}