/* sumairha.com design system, part 2: components. Built only from tokens.css.
 *
 * The roles, and the class for each:
 *   says       type alone, no box ..................... .type-statement  .type-title  .type-card-title  .type-label  .type-button  .type-meta  .type-small  .type-body  .type-case
 *   holds      a flat surface, no shine ............... .surface (--1 --2 --3)  .tag  .card
 *   presses    liquid glass capsule, active = chip .... .pill (a nav, .filters, .theme)
 *   main action one solid accent shape, label rolls ... .btn
 *   inline     underlined text ........................ .link
 * The states .is-hover and .is-focus look exactly like :hover and :focus-visible. They exist so the style guide can show a
 * state without anyone holding the pointer there. */

/* ---- the stage every page stands on ---- */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-text);transition:background-color var(--dur-theme)}
#fluid-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:var(--z-fluid);display:block}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-scrim);pointer-events:none;transition:background-color var(--dur-theme)}
/* content lets the cursor through to the fluid, except where there is something to press */
.page{position:relative;z-index:var(--z-page);pointer-events:none;min-height:100vh;padding:28px var(--gutter) 64px;display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-content:start}
.page a,.page button{pointer-events:auto}
@media (max-width:520px){ .page{padding-top:76px} }   /* keeps the nav clear of the corner switch */
.bar{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- says: type, and nothing else ---- */
.type-statement{margin:0;font:var(--type-statement);letter-spacing:var(--track-statement);color:var(--text-strong);text-wrap:balance}
.type-title{margin:0;font:var(--type-title);letter-spacing:var(--track-title);color:var(--text-strong);text-wrap:balance}
.type-card-title{margin:0;font:var(--type-card-title);color:var(--text-strong)}
.type-meta{margin:0;font:var(--type-meta);color:var(--text-strong)}
.type-small{margin:0;font:var(--type-small);color:var(--text)}
.type-body{margin:0;font:var(--type-body);color:var(--text)}
.type-case{margin:0;font:var(--type-case);letter-spacing:var(--track-case);color:var(--text-strong);text-wrap:balance}
.type-label{margin:0;font:var(--type-label);letter-spacing:var(--track-label);color:var(--text-strong)}
.type-button{margin:0;font:var(--type-button);letter-spacing:var(--track-button);color:var(--text-strong)}
/* a project's name, its categories, and one line on what it was */
.caption-title{margin:0;font:var(--type-card-title);color:var(--text-strong)}
.caption-cats{margin:0;font:var(--type-meta);color:var(--text-strong)}
.caption-desc{margin:0;max-width:56ch;font:var(--type-small);color:var(--text)}

/* ---- presses: glass capsules. Active is one treatment everywhere, a filled chip: the page you are on, a selected filter, the chosen theme.
        The accent is kept for the main action. ---- */
.pill{display:flex;gap:4px;padding:5px 6px;border-radius:var(--radius-pill);background:var(--pill);border:1px solid var(--pill-line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pill a,.pill button{font:var(--type-label);letter-spacing:var(--track-label);color:var(--text);text-decoration:none;white-space:nowrap;
  padding:9px 18px;border-radius:var(--radius-pill);border:0;background:none;cursor:pointer;
  transition:color var(--dur-fast),background-color var(--dur-fast)}
.pill a:not(.is-active):hover,.pill a.is-hover:not(.is-active),
.pill button:not([aria-pressed="true"]):hover,.pill button.is-hover:not([aria-pressed="true"]){color:var(--text-strong)}
.pill a.is-active,.pill [aria-pressed="true"]{color:var(--on-chip);background:var(--chip)}
.pill a:focus-visible,.pill button:focus-visible,.pill a.is-focus,.pill button.is-focus{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:520px){ .pill.filters button{padding:9px 12px} }
/* a list of choices stacked in one glass piece: project names, skills. The corner is the item's radius plus the pill's padding, so the
   rim follows the items; on a narrow screen the items wrap into rows */
.pill--stack{flex-direction:column;align-items:stretch;border-radius:22px}
.pill--stack button{text-align:left}
@media (max-width:860px){ .pill--stack{flex-direction:row;flex-wrap:wrap} }
@media (max-width:520px){ .pill--stack button{padding:9px 12px} }
/* a labelled list: a small label over a stacked pill (the home page's By project and By skill, the Lab's By kind). The label's left padding
   lines its text up with the first item's text: the pill's 1px rim and 6px padding, then an item's 18px */
.pick{display:grid;gap:var(--space-xs);width:max-content;max-width:100%}   /* the label to its list: 8 */
.pick__label{padding-left:25px}
@media (max-width:520px){ .pick__label{padding-left:19px} }   /* the items are 12px there */
/* the theme switch: a sun and a moon, pinned to the top-right corner with .theme-corner */
.pill.theme{gap:2px;padding:3px}
.pill.theme button{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;transition:color .25s,background-color .25s}
.pill.theme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-corner{position:fixed;top:20px;right:20px;z-index:var(--z-corner)}

/* ---- the main action: one solid shape on a screen. On hover or keyboard focus its label rolls: a copy slides in from above as the
        first slides out below (lib/rolling-text.js, after Motion's rolling text button) ---- */
.btn{display:inline-block;padding:12px 26px;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);text-decoration:none;
  font:var(--type-button);letter-spacing:var(--track-button);box-shadow:var(--shadow-action)}
.btn__window{position:relative;display:block;width:max-content;overflow:hidden}
.btn__label{display:block;white-space:nowrap;transition:transform var(--dur-base) var(--ease-roll)}
.btn__label--in{position:absolute;inset:0;transform:translateY(-100%)}
.is-rolled .btn__label{transform:translateY(100%)}
.is-rolled .btn__label--in{transform:translateY(0)}
.btn:focus-visible,.btn.is-focus,.link:focus-visible,.link.is-focus{outline:2px solid var(--focus);outline-offset:3px}

/* ---- the footer: who and when, and the two places to find her. Small type and underlined links, no box ---- */
.site-foot{width:min(var(--column),100%);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-xs) var(--space-md);padding-bottom:var(--space-md)}
.site-foot p{margin:0}
.site-foot nav{display:flex;gap:var(--space-sm)}
.site-foot .link{font:var(--type-small)}
.page .site-foot p,.page .site-foot nav a{pointer-events:auto}

/* ---- inline: a link inside a sentence is underlined text ---- */
.link{color:var(--text-strong);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-fast)}
.link:hover,.link.is-hover{color:var(--accent);text-decoration-thickness:2px}

/* ---- holds: a surface is flat, a faint tint and a hairline. A tag is a small rounded rectangle, never a capsule, so it cannot be mistaken for a pill ---- */
.surface{background:var(--surface-2);border:1px solid var(--surface-line);border-radius:var(--radius-m);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.surface--1{background:var(--surface-1)}
.surface--3{background:var(--surface-3)}
.tag{display:inline-block;padding:6px 12px;border-radius:var(--radius-s);background:var(--surface-2);border:1px solid var(--surface-line);
  font:var(--type-label);letter-spacing:var(--track-label);color:var(--text-strong)}
/* a project card: the picture is the control. A card outside the chosen category fades back */
.card{transition:opacity var(--dur-base) var(--ease-out),filter var(--dur-base) var(--ease-out)}
.card.is-dim{opacity:.3;filter:grayscale(.7)}
.card__link{display:block;width:100%;height:100%;border-radius:var(--radius-s);overflow:hidden;background:#17120f;box-shadow:var(--shadow-card);
  cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.card__link img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transition:transform var(--dur-slow) var(--ease-zoom)}
.card:not(.is-dim) .card__link:hover img,.card:not(.is-dim) .card__link.is-hover img{transform:scale(1.05)}
.card__link:focus-visible,.card__link.is-focus{outline:2px solid var(--focus);outline-offset:3px}

/* ---- her Webflow cursor (lib/cursor.js): a dot on the pointer and a glass circle that trails it and grows on anything pressable.
        Mouse only, 768px and wider. Same size, blur, rim, lag and growth as there; the colours follow the theme, since there it was white on black ---- */
.cursor-small,.cursor-glass{display:none;position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}
.cursor-small{width:8px;height:8px;background:var(--cursor);z-index:var(--z-cursor-dot)}
.cursor-glass{width:40px;height:40px;background:var(--cursor-fill);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--cursor-line);
  z-index:var(--z-cursor-ring);transition:width var(--dur-base) ease,height var(--dur-base) ease}
.cursor-glass.hover{width:60px;height:60px}
@media (min-width:768px) and (hover:hover) and (pointer:fine){
  .has-cursor .cursor-small,.has-cursor .cursor-glass{display:block}
  html.has-cursor,html.has-cursor *{cursor:none !important}   /* only once the first mouse move has shown the custom one */
}

/* ---- liquid glass drawn in the fluid canvas takes over from the CSS glass and the overlay ---- */
.lg [data-glass]{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.lg .scrim{display:none}

@media (prefers-reduced-motion: reduce){
  body,.scrim,.pill a,.pill button,.pill.theme button,.btn__label,.link,.cursor-glass,.card,.card__link img{transition:none}
  .card:not(.is-dim) .card__link:hover img{transform:none}
}