/* The site's one way of drawing an action. It is the sign on the studio wall ("See my portfolio" and its brass
   ring), kept everywhere: a line of type, and a thin brass ring with a drawn arrow in it. Nothing is a filled
   pill, and nothing has a plate of its own.

   .ring   the ring. data-to says where its arrow points: ne (the default), e, s, w, n; x is a cross, for "close".
           It takes its size from --ring-size, set on it or on anything around it (34px; 26 beside small type,
           20 in a line of text, 44 to 52 for a page's one main action). It holds a thin dark glass, so its brass
           reads over the room's bright floor as it does over the night; on his cream bubbles it is drawn in ink.
           Inside a link or a button it fills and steps the way it points when that is hovered or focused.
   .act    the line of type beside it, for a control that has no recipe of its own.

   The arrows are drawn once, here (a mask, so they take the ring's colour): the type's own ↗ → ← are not used. */
:root { --act-brass:#d2a567; --act-cream:#f1e7d5; --act-night:#152a2e; }

.ring {
  --ring-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 11.4 11.4 4.6M5.9 4.6h5.5v5.5'/%3E%3C/svg%3E");
  flex:none; display:inline-grid; place-items:center; box-sizing:border-box; width:var(--ring-size,34px); height:var(--ring-size,34px);
  border:1px solid var(--ring-line,var(--act-brass)); border-radius:50%; background:var(--ring-glass,#05080959); color:var(--ring-ink,var(--act-brass));
  font-style:normal; vertical-align:middle; text-shadow:none;
  transition:background-color .3s,color .3s,border-color .3s,translate .45s cubic-bezier(.16,1,.3,1);
}
.ring::before {
  content:''; width:var(--ring-arrow,46%); height:var(--ring-arrow,46%); background:currentColor; rotate:var(--ring-turn,0deg);
  -webkit-mask:var(--ring-shape) center / contain no-repeat; mask:var(--ring-shape) center / contain no-repeat;
}
.ring[data-to='e'] { --ring-turn:45deg; --ring-step:2px 0; }
.ring[data-to='s'] { --ring-turn:135deg; --ring-step:0 2px; }
.ring[data-to='w'] { --ring-turn:-135deg; --ring-step:-2px 0; }
.ring[data-to='n'] { --ring-turn:-45deg; --ring-step:0 -2px; }
.ring[data-to='x'] { --ring-step:0 0; --ring-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M4.4 4.4 11.6 11.6M11.6 4.4 4.4 11.6'/%3E%3C/svg%3E"); }
:is(a,button):is(:hover,:focus-visible) .ring { border-color:var(--ring-fill,var(--act-brass)); background:var(--ring-fill,var(--act-brass)); color:var(--ring-on,var(--act-night)); translate:var(--ring-step,1.5px -1.5px); }
/* On paper (his bubbles): in ink. */
.say .ring { --ring-line:#1d333566; --ring-ink:#1d3335; --ring-fill:#1d3335; --ring-on:#f1e7d5; --ring-glass:#0000; }

.act {
  display:inline-flex; align-items:center; gap:12px; margin:0; padding:0; border:0; border-radius:0; background:none;
  color:var(--act-cream); font:500 13.5px/1.2 'DM Sans',system-ui,sans-serif; letter-spacing:.03em; text-decoration:none;
  text-shadow:0 1px 3px #050609b3,0 1px 14px #050609b3; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:color .25s;
}
.act:hover { color:#dcbb94; }
.act:focus-visible { outline:2px solid #dfaf78; outline-offset:6px; border-radius:6px; }
@media (pointer:coarse) { .act { min-height:44px; } }
@media (prefers-reduced-motion:reduce) { .ring,.act { transition:none; } :is(a,button):is(:hover,:focus-visible) .ring { translate:none; } }