:root{
  color-scheme:light;
  --cream:#f7f2e9;
  --ivory:#fffdf9;
  --ink:#5b5046;
  --line:rgba(109,90,70,.18);
  --shadow:rgba(72,55,38,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--cream)}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 16% 0%,rgba(255,255,255,.92),transparent 36rem),
    linear-gradient(180deg,var(--ivory),var(--cream));
  font-family:Georgia,"Times New Roman",serif;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:10;
  pointer-events:none;
  opacity:.024;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main{
  width:min(1540px,100%);
  margin:0 auto;
  padding:clamp(54px,8vw,130px) clamp(18px,5vw,82px) clamp(70px,10vw,160px);
}
h1{
  display:grid;
  grid-template-columns:minmax(38px,1fr) auto minmax(38px,1fr);
  align-items:center;
  gap:clamp(20px,3vw,48px);
  margin:0;
  color:#766759;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(18px,2.15vw,31px);
  font-weight:300;
  line-height:1;
  letter-spacing:.42em;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
}
h1:before,h1:after{
  content:"";
  height:1px;
  background:rgba(125,105,85,.3);
}
.brand{
  margin:0 0 clamp(58px,8vw,110px);
  text-align:center;
}
.brand p{
  margin:18px 0 0;
  color:#a08f7f;
  font:400 clamp(8px,.72vw,11px)/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.38em;
}
.portfolio{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.3vw,38px);
}
.video-frame{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:2px;
  background:#e7ded1;
  box-shadow:0 18px 55px var(--shadow);
  transition:transform .45s ease,box-shadow .45s ease;
}
video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
  background-color:#e7ded1;
  background-image:var(--poster);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  object-fit:cover;
}
.video-frame:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 65px rgba(72,55,38,.13);
}
.video-toggle{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:66px;
  height:66px;
  translate:-50% -50%;
  border:1px solid rgba(255,255,255,.88);
  border-radius:50%;
  background:rgba(250,247,240,.82);
  box-shadow:0 12px 34px rgba(65,48,34,.14),inset 0 0 0 1px rgba(132,109,86,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
  opacity:0;
  transform:scale(.9);
  transition:opacity .25s ease,transform .25s ease,background .25s ease;
}
.video-toggle:before{
  content:"";
  position:absolute;
  left:27px;
  top:21px;
  width:0;
  height:0;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-left:18px solid #796858;
}
.video-frame:hover .video-toggle,.video-frame:focus-within .video-toggle,.video-frame:not(.is-playing) .video-toggle{
  opacity:1;
  transform:scale(1);
}
.video-frame.is-playing .video-toggle:before{
  left:24px;
  top:21px;
  width:18px;
  height:24px;
  border:0;
  background:linear-gradient(90deg,#796858 0 6px,transparent 6px 12px,#796858 12px 18px);
}
.video-toggle:hover{background:rgba(255,253,248,.96);box-shadow:0 15px 38px rgba(65,48,34,.18),inset 0 0 0 1px rgba(132,109,86,.16)}
.video-toggle:focus-visible{
  outline:2px solid #bca68d;
  outline-offset:5px;
}
@media(max-width:720px){
  main{padding-top:48px;padding-inline:14px}
  .brand{margin:0 5px 48px}
  h1{font-size:15px;letter-spacing:.31em;gap:14px}
  .brand p{margin-top:14px;font-size:8px;letter-spacing:.3em}
  .portfolio{grid-template-columns:1fr;gap:18px}
  .video-frame:hover{transform:none}
  .video-toggle{width:58px;height:58px}
  .video-toggle:before{left:24px;top:18px}
  .video-frame.is-playing .video-toggle:before{left:20px;top:17px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}