/* ONRAH — Digital craft, quietly done.
   One page, one screen, on every device. */

@font-face{font-family:"Onrah Mark";src:url("fonts/onrah-mark.woff2") format("woff2");font-display:block}
@font-face{font-family:"Onrah Text";src:url("fonts/onrah-text.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Onrah Text";src:url("fonts/onrah-text-italic.woff2") format("woff2");font-style:italic;font-weight:500;font-display:swap}
@font-face{font-family:"Onrah Sans";src:url("fonts/onrah-sans.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --paper:#E7DFD1;
  --ink:#1A1815;
  --soft:#5E574E;
  --faint:rgba(26,24,21,.34);
  --live:#A8543A;
  --edge:clamp(18px,4.8vw,80px);
  --out:cubic-bezier(.16,1,.3,1);
  --serif:"Onrah Text","Cormorant Garamond",Garamond,Georgia,serif;
  --sans:"Onrah Sans",Jost,"Futura","Helvetica Neue",Arial,sans-serif;
  --mark:"Onrah Mark","GFS Didot",Didot,"Bodoni 72",Georgia,serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{color:var(--ink);font-family:var(--serif);font-weight:500;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--ink);color:var(--paper)}
ol,ul{list-style:none}
img{display:block}

/* ============ pieces ============ */
.hello{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px clamp(16px,2.3vw,36px)}
.greet{font-style:italic;color:var(--soft)}
.open{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:12px;letter-spacing:.02em;color:var(--soft)}
.pulse{width:5px;height:5px;border-radius:50%;background:var(--live);flex:none;animation:breathe 5.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.35}}

.lede{line-height:1.06;letter-spacing:-.012em}

.crafts li{font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}

.talk{display:inline-flex;align-items:baseline;justify-content:space-between;gap:48px;min-width:13em;
  padding-bottom:7px;border-bottom:1px solid var(--ink);color:var(--ink);text-decoration:none;outline:none}
.talk-arrow{transition:transform .6s var(--out)}
.talk:hover .talk-arrow,.talk:focus-visible .talk-arrow{transform:translateX(5px)}
.talk:focus-visible{box-shadow:0 0 0 6px var(--paper),0 0 0 7px var(--ink)}

.mark{font-family:var(--mark);font-weight:400;line-height:.8;letter-spacing:.14em;margin-right:-.14em;display:flex;align-items:baseline;white-space:nowrap}
.mark .lam{position:relative;letter-spacing:0;margin-left:-.03em;margin-right:.11em}
.anchor{display:inline-block;position:relative;width:0;height:0}
.bar{position:absolute;left:-.487em;bottom:.228em;width:.2em;height:max(1.5px,.026em);background:var(--live)}
.ready .bar{animation:think 9s step-end 3.5s infinite}
@keyframes think{0%{opacity:1}3%{opacity:0}6%{opacity:1}9%{opacity:0}12%{opacity:1}100%{opacity:1}}
.page:has(.talk:hover) .bar,.page:has(.talk:focus-visible) .bar{animation:none;opacity:1}
.tag{font-family:var(--sans);letter-spacing:.44em;text-transform:uppercase;color:var(--soft)}

.foot{font-family:var(--sans);font-size:11.5px;color:var(--soft);letter-spacing:.01em}
.foot span{margin:0 .7em;color:var(--faint)}

/* ============ the painting, and the words on its line ============ */
.art{position:relative;margin:0}
.art-inner{position:absolute;aspect-ratio:1672/941}
.art picture{display:block;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.art img{width:100%;height:100%}

.path li{position:absolute;left:0;top:0;width:0;height:0}
.path li::before{content:"";position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.path li.lead::before{display:none}
.path li.last::before{background:var(--live)}
.path .lbl{position:absolute;left:0;bottom:12px;transform:translateX(-45%);font-style:italic;line-height:1;white-space:nowrap;color:var(--ink)}
.path li.off{visibility:hidden}

.snippet{position:absolute;left:0;top:0;display:none;font-family:var(--mono);font-size:clamp(9px,.6vw,11.5px);line-height:1.6;color:var(--soft);
  border-left:1px solid var(--faint);padding-left:14px;white-space:pre}
.snippet .t{color:rgba(94,87,78,.7)}
.aside-vertical,.index{display:none}

/* ============ phones and portrait screens: everything on one screen ============ */
.page{display:flex;flex-direction:column;justify-content:space-between;height:100svh;min-height:580px;overflow:hidden;
  padding:max(clamp(16px,3vh,32px),env(safe-area-inset-top)) var(--edge) max(clamp(16px,3vh,32px),env(safe-area-inset-bottom))}
.greet{font-size:clamp(15px,min(4.2vw,2.2vh),19px)}
.page .lede{margin-top:clamp(10px,2.2vh,30px);font-size:clamp(24px,min(7.4vw,4.1vh),44px)}

/* the painting is scaled so the whole line, from idea to growth, crosses the screen */
.page .art{flex:0 1 58vw;min-height:39vw;margin:0 calc(-1 * var(--edge));overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.page .art-inner{width:136vw;left:-3.6vw;top:calc(50% - 37.4vw)}
.path .lbl{font-size:clamp(13px,3.7vw,19px)}
.path li.last .lbl{transform:translateX(-82%)}
.path li.lead .lbl{transform:translateX(-30%)}

.page .crafts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:-2px}
.crafts li{font-size:clamp(8.5px,2.4vw,11px)}

.page .invite{margin-top:0}
.next{font-size:clamp(20px,min(5.8vw,3.2vh),30px);line-height:1.2}
.talk{margin-top:clamp(6px,1.2vh,14px);font-size:clamp(17px,min(5vw,2.8vh),24px)}
.talk-arrow{font-size:.95em}

.page .brand{margin-top:0;align-self:flex-end;text-align:right}
.mark{font-size:clamp(42px,min(15vw,8.4vh),110px);justify-content:flex-end}
.tag{font-size:clamp(8.5px,2.3vw,11px);margin-top:clamp(10px,1.8vh,20px)}
.page .foot{display:none}

/* ============ wide screens: the editorial composition ============ */
@media (min-width:900px) and (min-aspect-ratio:5/4){
  .page{display:block;position:relative;height:100svh;min-height:600px;padding:0}
  .page .art{position:absolute;inset:0;margin:0;height:auto;overflow:visible;z-index:0;-webkit-mask-image:none;mask-image:none}
  .page .art-inner{--aw:min(100vw,170svh);width:var(--aw);left:calc(50% - var(--aw) / 2 + 2vw);top:calc(49% - var(--aw) * .2814)}
  .page > :not(.art):not(.opening),.opening > *{position:absolute;z-index:2}
  .opening{display:contents}

  .hello{left:4.7vw;top:max(26px,6vh)}
  .greet{font-size:clamp(16px,1.05vw,20px)}
  .index{display:flex;flex-direction:column;align-items:center;gap:12px;right:4.7vw;top:max(20px,5.2vh);
    font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;color:var(--soft)}
  .index .rule{width:1px;height:22px;background:var(--faint)}
  .page .lede{left:15.3vw;top:19vh;margin:0;font-size:clamp(34px,3.2vw,62px)}

  .page .crafts{display:grid;gap:clamp(8px,1.2vh,12px);left:6.7vw;top:54vh;margin:0;border-left:1px solid var(--faint);padding:2px 0 2px 18px}
  .crafts li{font-size:clamp(9px,.58vw,10.5px)}

  .aside-vertical{display:flex;align-items:center;gap:16px;right:4.7vw;top:26vh;writing-mode:vertical-rl;
    font-style:italic;font-size:clamp(15px,1.05vw,19px);color:var(--ink)}
  .aside-vertical .rule{width:1px;height:30px;background:var(--faint)}

  .page .invite{left:6.7vw;top:74.5vh;margin:0}
  .next{font-size:clamp(20px,1.5vw,28px)}
  .talk{font-size:clamp(16px,1.12vw,21px);margin-top:clamp(8px,1.4vh,16px)}

  .page .brand{right:6.4vw;top:70vh;margin:0}
  .mark{font-size:clamp(58px,5.6vw,118px)}
  .tag{margin-top:clamp(16px,3vh,30px);font-size:clamp(9px,.62vw,11px)}

  .page .foot{display:block;left:6.7vw;bottom:max(22px,6vh)}

  .path .lbl{font-size:clamp(15px,1.12vw,21px)}
  .path li.last .lbl,.path li.lead .lbl{transform:translateX(-45%)}
  .snippet{display:block}
}
@media (min-width:900px) and (min-aspect-ratio:2/1){
  .page .lede{top:16vh;left:13vw;font-size:clamp(30px,2.6vw,54px)}
}

/* ============ the reveal: the picture develops from the idea outward ============ */
.js .art img{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 44%,transparent 56%);mask-image:linear-gradient(90deg,#000 0,#000 44%,transparent 56%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;mask-position:100% 0}
.js.ready .art img{-webkit-mask-position:0 0;mask-position:0 0;transition:-webkit-mask-position 3.4s cubic-bezier(.5,0,.2,1),mask-position 3.4s cubic-bezier(.5,0,.2,1)}
.js .path li,.js .snippet{opacity:0}
.js.ready .path li,.js.ready .snippet{opacity:1;transition:opacity 1.3s var(--out)}
.js .page > :not(.art):not(.opening),.js .opening > *{opacity:0;transition:opacity 1.4s var(--out)}
.js.ready .page > :not(.art):not(.opening),.js.ready .opening > *{opacity:1}
.js.ready .lede{transition-delay:.15s}
.js.ready .invite,.js.ready .brand{transition-delay:1.6s}
.js.ready .crafts,.js.ready .foot,.js.ready .aside-vertical,.js.ready .index{transition-delay:2.2s}
.art-inner{transition:transform 1.2s var(--out)}

@media (prefers-reduced-motion:reduce){
  .js .art img{-webkit-mask-image:none;mask-image:none}
  .js .path li,.js .snippet,.js .page > :not(.art):not(.opening),.js .opening > *{opacity:1;transition:none}
  .pulse,.ready .bar{animation:none}
  .art-inner{transition:none}
}