/* Rora — roramake.ca
   One stylesheet, no build step. Sections follow the order of the page. */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;}
[hidden]{display:none !important;}
:root{color-scheme:light dark;}

:root{
  --paper:#F4F2EE;
  --paper-2:#EBE7E1;
  --ink:#14140F;
  --ink-soft:#3A3A33;
  --muted:#7A756B;
  --line:#DCD6CC;
  --accent:#1F5A50;
  --night:#0D0D0B;
  --night-type:#EDE9E1;
  --night-muted:#8D877C;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --gut:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.16,.84,.3,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0F0F0D;
    --paper-2:#171714;
    --ink:#EDE9E1;
    --ink-soft:#CFC9BF;
    --muted:#8D877C;
    --line:#2A2A25;
    --accent:#7FBFB0;
  }
}
:root[data-theme="dark"]{
  --paper:#0F0F0D;
  --paper-2:#171714;
  --ink:#EDE9E1;
  --ink-soft:#CFC9BF;
  --muted:#8D877C;
  --line:#2A2A25;
  --accent:#7FBFB0;
}

*{box-sizing:border-box;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-weight:200;
  letter-spacing:-.025em;
  line-height:.98;
  text-wrap:balance;
  margin:0;
}
p{margin:0;}
a{color:inherit;}
img,canvas{max-width:100%;display:block;}

.mono{
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.wrap{padding-inline:var(--gut);}
.rule{height:1px;background:var(--line);border:0;margin:0;}

/* ---------- header ---------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px var(--gut);
  color:var(--night-type);
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
header.solid{
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px);
  color:var(--ink);
  border-bottom-color:var(--line);
  padding-block:14px;
}
.mark{
  font-family:"Archivo",sans-serif;font-weight:300;
  font-size:20px;letter-spacing:.34em;text-transform:lowercase;
  text-decoration:none;padding-left:.1em;
}
nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);}
nav a{text-decoration:none;position:relative;padding-block:4px;}
nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1);transform-origin:left;}
.avail{display:flex;align-items:center;gap:8px;}
.dot{
  width:7px;height:7px;border-radius:50%;background:#6FCF9A;flex:none;
  box-shadow:0 0 0 0 rgba(111,207,154,.55);animation:pulse 2.6s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(111,207,154,.5);}
  70%{box-shadow:0 0 0 7px rgba(111,207,154,0);}
  100%{box-shadow:0 0 0 0 rgba(111,207,154,0);}
}
@media (max-width:820px){ nav .hide-sm{display:none;} }

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:min(88svh,860px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:120px var(--gut) clamp(32px,5vw,64px);
  background:var(--night);color:var(--night-type);overflow:clip;
}
#heroCanvas{
  position:absolute;inset:-8%;width:116%;height:116%;
  filter:blur(34px) saturate(118%);opacity:.92;
}
.hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,13,11,.62) 0%,rgba(13,13,11,.22) 38%,rgba(13,13,11,.78) 100%);
}
.grain{position:absolute;inset:0;background-image:var(--grain);opacity:.3;mix-blend-mode:overlay;pointer-events:none;}
.hero-inner{position:relative;max-width:1500px;width:100%;}
.hero h1{
  font-size:clamp(3rem,10.6vw,10.5rem);
  letter-spacing:-.04em;
  margin:18px 0 0;
}
.line{display:block;overflow:hidden;padding-bottom:.06em;}
.line i{display:block;font-style:normal;transform:translateY(108%);animation:rise 1.05s var(--ease) forwards;}
.line:nth-child(2) i{animation-delay:.1s;}
.line:nth-child(3) i{animation-delay:.2s;}
@keyframes rise{to{transform:translateY(0);}}
.hero-foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:28px;margin-top:clamp(34px,5vw,58px);
}
.hero-foot p{max-width:46ch;color:#D9D4CA;font-size:clamp(15px,1.35vw,19px);}
.hero .mono{color:#B5AFA4;}
.scroll-cue{display:flex;align-items:center;gap:10px;color:#B5AFA4;}
.scroll-cue span{width:34px;height:1px;background:currentColor;overflow:hidden;position:relative;}
.scroll-cue span::after{content:"";position:absolute;inset:0;background:var(--night-type);animation:sweep 2.8s var(--ease) infinite;}
@keyframes sweep{0%{transform:translateX(-100%);}55%{transform:translateX(100%);}100%{transform:translateX(100%);}}
.fade-up{animation:fadeUp 1s var(--ease) .45s backwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* ---------- sections ---------- */
section{padding-block:clamp(72px,11vw,168px);}
.lede{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.15fr);
  gap:clamp(24px,5vw,80px);align-items:start;max-width:1500px;margin-inline:auto;
}
.lede p{font-family:"Archivo",sans-serif;font-weight:200;font-size:clamp(1.5rem,3.5vw,3.1rem);line-height:1.14;letter-spacing:-.02em;}
.lede .sub{font-family:"Instrument Sans",sans-serif;font-size:clamp(15px,1.15vw,17px);line-height:1.65;color:var(--muted);max-width:58ch;margin-top:clamp(22px,3vw,38px);letter-spacing:0;font-weight:400;}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:1500px;margin:0 auto clamp(30px,4vw,56px);}
.sec-head h2{font-size:clamp(1.9rem,4.6vw,4rem);}
.sec-head .mono{color:var(--muted);}

/* services */
.svc{border-top:1px solid var(--line);max-width:1500px;margin-inline:auto;}
.svc-item{
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr);
  gap:clamp(12px,4vw,56px);align-items:baseline;
  padding-block:clamp(20px,2.6vw,34px);
  transition:padding-left .5s var(--ease),color .4s var(--ease);
}
.svc-item:hover{padding-left:clamp(6px,1.2vw,18px);}
.svc-item h3{font-size:clamp(1.45rem,3.4vw,2.7rem);font-weight:200;}
.svc-body p{color:var(--ink-soft);max-width:46ch;}
.svc-body ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.svc-body li{
  font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 11px;
}
@media (max-width:760px){ .svc-item{grid-template-columns:1fr;} }

/* work */
.work{display:flex;flex-direction:column;gap:clamp(56px,9vw,150px);max-width:1500px;margin-inline:auto;}
.piece{display:grid;gap:clamp(16px,2.4vw,30px);}
.piece.wide{grid-template-columns:minmax(0,1fr);}
.piece.offset{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(20px,5vw,64px);}
.piece.duo{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:end;gap:clamp(20px,5vw,64px);}
@media (max-width:820px){ .piece.duo,.piece.offset{grid-template-columns:1fr;} .col-blank{display:none;} }
.shot{
  position:relative;display:block;overflow:hidden;background:var(--paper-2);
  aspect-ratio:16/10;max-width:100%;
  color:inherit;text-decoration:none;
}
.piece.duo .shot.tall{aspect-ratio:4/5;}
.shot canvas,.shot img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  transform:translate3d(0,var(--py,0px),0) scale(var(--s,1.08));
  transition:transform .55s var(--ease);
}
.shot canvas{filter:blur(26px) saturate(112%);}
.shot img{object-fit:cover;}
.shot .grain{opacity:.24;}
.shot:hover canvas,.shot:hover img{--s:1.13;}
.shot .tag{
  position:absolute;left:14px;bottom:14px;z-index:2;
  background:rgba(13,13,11,.55);color:#EDE9E1;backdrop-filter:blur(6px);
  padding:5px 10px;border-radius:999px;
}
.cap{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline;justify-content:space-between;}
.cap h3{font-size:clamp(1.3rem,2.6vw,2.1rem);font-weight:300;}
.cap p{color:var(--muted);max-width:52ch;}
.note{color:var(--muted);max-width:1500px;margin:clamp(26px,3vw,40px) auto 0;}

/* marquee */
.band{
  border-block:1px solid var(--line);padding-block:clamp(16px,2vw,26px);overflow:hidden;
  touch-action:pan-y;cursor:grab;
  user-select:none;-webkit-user-select:none;
}
.band.dragging{cursor:grabbing;}
.track{display:flex;width:max-content;gap:0;animation:slide 38s linear infinite;}
.band.swipe .track{animation:none;will-change:transform;}
.track span{-webkit-user-drag:none;}
.track span{
  font-family:"Archivo",sans-serif;font-weight:200;font-size:clamp(1.3rem,3vw,2.4rem);
  letter-spacing:-.02em;color:var(--ink-soft);padding-inline:clamp(18px,3vw,40px);white-space:nowrap;
}
.track span::after{content:"—";margin-left:clamp(18px,3vw,40px);color:var(--muted);}
@keyframes slide{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);max-width:1500px;margin-inline:auto;}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:520px){ .steps{grid-template-columns:1fr;} }
.step{border-top:1px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;gap:10px;}
.step .num{color:var(--muted);}
.step h3{font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:300;}
.step p{color:var(--ink-soft);font-size:15px;}
.step .dur{color:var(--muted);margin-top:auto;padding-top:12px;}

/* contact */
.contact{background:var(--night);color:var(--night-type);position:relative;overflow:clip;}
.contact .grain{opacity:.22;}
.contact-in{position:relative;max-width:1500px;margin-inline:auto;}
.contact h2{font-size:clamp(2.4rem,8vw,7rem);letter-spacing:-.035em;}
.big-link{
  display:inline-flex;align-items:center;gap:.5em;margin-top:clamp(26px,4vw,48px);
  font-family:"Archivo",sans-serif;font-weight:200;font-size:clamp(1.4rem,4vw,3rem);
  letter-spacing:-.02em;text-decoration:none;position:relative;color:var(--night-type);
}
.big-link::after{content:"";position:absolute;left:0;bottom:.06em;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease);}
.big-link:hover::after,.big-link:focus-visible::after{transform:scaleX(1);transform-origin:left;}
.big-link em{font-style:normal;transition:transform .55s var(--ease);}
.big-link:hover em{transform:translateX(8px);}
.contact-links{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1.2vw,16px);margin-top:clamp(26px,4vw,48px);}
.contact-links .big-link{margin-top:0;}
.big-link.small{font-size:clamp(1.05rem,2.2vw,1.7rem);color:var(--night-muted);}
.big-link.small:hover{color:var(--night-type);}
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(46px,7vw,96px);}
@media (max-width:760px){ .contact-grid{grid-template-columns:1fr;gap:26px;} }
.contact-grid h3{font-size:15px;font-family:"Instrument Sans",sans-serif;font-weight:500;letter-spacing:0;margin-bottom:6px;}
.contact-grid p{color:var(--night-muted);font-size:15px;}
footer{
  position:relative;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  padding:26px var(--gut);border-top:1px solid rgba(237,233,225,.16);
  background:var(--night);color:var(--night-muted);
}

/* demo viewer */
.viewer{
  position:fixed;inset:0;z-index:90;
  display:flex;flex-direction:column;
  background:var(--night);
}
.js .viewer{opacity:0;transform:scale(.985);transition:opacity .35s var(--ease),transform .35s var(--ease);}
.js .viewer.open{opacity:1;transform:none;}
.viewer-bar{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(14px,3vw,26px);
  color:var(--night-type);border-bottom:1px solid rgba(237,233,225,.16);
}
.viewer-title{color:var(--night-muted);}
.viewer-close{
  font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
  background:none;color:var(--night-type);
  border:1px solid rgba(237,233,225,.28);border-radius:999px;
  padding:8px 15px;cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.viewer-close:hover{background:rgba(237,233,225,.1);border-color:rgba(237,233,225,.5);}
.viewer-frame{flex:1 1 auto;width:100%;border:0;background:var(--night);display:block;}
body.viewing{overflow:hidden;}

/* cursor */
.cursor{
  position:fixed;top:0;left:0;z-index:99;width:9px;height:9px;border-radius:50%;
  background:var(--accent);pointer-events:none;opacity:0;
  transition:opacity .3s,width .35s var(--ease),height .35s var(--ease),background .35s var(--ease);
  mix-blend-mode:difference;
}
.cursor.on{opacity:.9;}
.cursor.big{width:44px;height:44px;background:#EDE9E1;}
@media (hover:none),(pointer:coarse){ .cursor{display:none;} }

/* reveals */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.js .rv.in{opacity:1;transform:none;}
.js .rv.d1{transition-delay:.08s;} .js .rv.d2{transition-delay:.16s;} .js .rv.d3{transition-delay:.24s;}

:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .line i{transform:none;}
  .js .rv{opacity:1;transform:none;}
  .cursor{display:none;}
}