/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */

body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */

img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */

textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */

:target {
  scroll-margin-block: 5ex;
}

/* @font-face here */

:root {
  --color-base: #fbfbfb;
  --color-dark: #525252;
  --color-mid: #bcbcbc;
  --color-light: #F5F5F5;
  --color-cool-dark: #375c67;
  --color-cool-light: #d1edf8;
  --color-warm-dark: #ffc20e;
  --color-warm-light: #fff380;
  --space-zero: clamp(0rem, -0.02rem + 0.11vw, 0.0625rem);
  --space-3xs: clamp(0.3125rem, 0.29rem + 0.11vw, 0.375rem);
  --space-2xs: clamp(0.5625rem, 0.49rem + 0.33vw, 0.75rem);
  --space-xs: clamp(0.875rem, 0.78rem + 0.44vw, 1.125rem);
  --space-s: clamp(1.125rem, 0.99rem + 0.67vw, 1.5rem);
  --space-m: clamp(1.6875rem, 1.48rem + 1.00vw, 2.25rem);
  --space-l: clamp(2.25rem, 1.98rem + 1.33vw, 3rem);
  --space-xl: clamp(3.375rem, 2.96rem + 2.00vw, 4.5rem);
  --space-2xl: clamp(4.5rem, 3.95rem + 2.67vw, 6rem);
  --space-3xl: clamp(6.75rem, 5.92rem + 4.00vw, 9rem);
  --space-4xl: clamp(9rem, 7.90rem + 5.33vw, 12rem);
  --space-3xs-2xs: clamp(0.3125rem, 0.15rem + 0.78vw, 0.75rem);
  --space-2xs-xs: clamp(0.5625rem, 0.36rem + 1.00vw, 1.125rem);
  --space-xs-s: clamp(0.875rem, 0.65rem + 1.11vw, 1.5rem);
  --space-s-m: clamp(1.125rem, 0.71rem + 2.00vw, 2.25rem);
  --space-m-l: clamp(1.6875rem, 1.21rem + 2.33vw, 3rem);
  --space-l-xl: clamp(2.25rem, 1.42rem + 4.00vw, 4.5rem);
  --space-xl-2xl: clamp(3.375rem, 2.41rem + 4.67vw, 6rem);
  --space-2xl-3xl: clamp(4.5rem, 2.85rem + 8.00vw, 9rem);
  --space-3xl-4xl: clamp(6.75rem, 4.83rem + 9.33vw, 12rem);
  --space-s-l: clamp(1.125rem, 0.44rem + 3.33vw, 3rem);
  --space-s-xl: clamp(1.125rem, -0.11rem + 6.00vw, 4.5rem);
  --size-step-00: clamp(0.855rem, 0.84rem + 0.08vw, 0.9rem);
  --size-step-0: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  --size-step-1: clamp(1.17rem, 1.08rem + 0.42vw, 1.40625rem);
  --size-step-2: clamp(1.36875rem, 1.23rem + 0.69vw, 1.758125rem);
  --size-step-3: clamp(1.601875rem, 1.38rem + 1.06vw, 2.1975rem);
  --size-step-4: clamp(1.87375rem, 1.55rem + 1.55vw, 2.746875rem);
  --size-step-5: clamp(2.1925rem, 1.74rem + 2.21vw, 3.433125rem);
  --size-step-6: clamp(2.565rem, 1.93rem + 3.07vw, 4.29125rem);
  --size-step-7: clamp(3.00125rem, 2.13rem + 4.20vw, 5.364375rem);
  --leading-flat: 1;
  --leading-fine: 1.15;
  --leading-loose: 1.7;
  --font-base: Inter,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
  --gutter: var(--space-s-l);
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 300ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --leading-standard: 1.5;
  --color-brand: var(--color-warm-dark);
}

/* 
  Global styles 

  Low-specificity, global styles that apply to the whole 
  project: https://cube.fyi/css.html
*/

body {
  background: var(--color-base);
  color: var(--color-dark);
  font-size: var(--size-step-1);
  font-family: var(--font-base);
  line-height: var(--leading-standard);
  border: 20px solid var(--color-brand);
  margin:0;
}

body.photohome {
  --color-brand: var(--color-cool-dark);
}

body.designhome {
  --color-brand: var(--color-mid);
}

.topnav {
  padding-bottom: var(--space-m);
}

.button {

  /* Configuration */
  --button-padding: 0.7em 1.2em;
  --button-gap: 0.5em;
  --button-bg: var(--color-light);
  --button-color: var(--color-dark);
  --button-hover-bg: var(--color-base);
  --button-hover-color: var(--color-cool-dark);
  --button-border-width: 0;
  --button-border-style: solid;
  --button-border-color: var(--button-bg);
  --button-radius: 0.5em;

  /* Layout and spacing */
  display: inline-flex;
  align-items: center;
  gap: var(--button-gap);
  padding: var(--button-padding);
  width: 100%;
  max-width: 30ch;

  /* Colours */
  background: var(--button-bg);
  color: var(--button-color);

  /* Stroke and radius */
  border-width: var(--button-border-width);
  border-style: var(--button-border-style);
  border-color: var(--button-border-color);
  border-radius: var(--button-radius);

  /* Typography */
  text-decoration: none;
  font-weight: var(--button-font-weight, 400);
  font-size: var(--button-font-size, 1em);
  letter-spacing: 0.05ch;
  font-family: sans-serif;
  line-height: 1.1;

  /* Interactive */
  cursor: pointer;  
  transition: all 0.3s ease-in-out;
}

.button svg {
  height: var(--button-icon-size, 1.2cap);
  width: auto;
  flex: none;
}

.button:hover {
  background: var(--button-hover-bg);
  color: var(--button-hover-color);
  box-shadow: 0 0 10px 0px var(--color-brand);
}

.button:focus {
  outline-width: var(--button-outline-width, var(--button-border-width));
  outline-style: var(--button-outline-style, var(--button-border-style));
  outline-color: var(--button-outline-color, var(--button-border-color));
  outline-offset: var(
	--button-outline-offset,
	calc(var(--button-border-width) * 2)
  );
}

.button:active {
  transform: scale(99%);
}

.button[data-button-variant="primary"] {
  --button-bg: #f3de8a;
  --button-color: #342a21;
  --button-border-color: currentColor;
  --button-hover-bg: #f1d979;
  --button-hover-color: #342a21;
}

.button[data-button-variant="positive"] {
  --button-bg: #2d936c;
  --button-border-color: #107350;
  --button-hover-bg: #359d75;
}

.button[data-button-variant="negative"] {
  --button-bg: #b33c48;
  --button-border-color: #a62f3d;
  --button-hover-bg: #c24a56;
}

.button[data-ghost-button] {
  --button-bg: transparent;
  --button-border-color: currentColor;
  --button-color: currentColor;
}

.button[data-button-radius="hard"] {
  --button-radius: 0;
}

.directory {
	padding-inline-start: 0;
	text-align: center;
}

@media screen and (min-width: 50rem) {
  .directory {
	text-align: left;
  }
}

.sitename {
  text-align: center;
  font-size: 15cqw;
  letter-spacing: -.05em;
  color: var(--color-brand);
  margin:0;
}

.sitename span {
	font-size: 40%;
	letter-spacing: -.05rem;
}

.eyebrow {
	text-transform: uppercase;
	letter-spacing: .2em;
	font-size: var(--step-00);
	font-weight: 400;
	color: var(--color-mid);
}

.prose {
  --flow-space: var(--space-m);
}

.self {
	background: var(--color-warm-light);
	border-radius: 100em;
	aspect-ratio: 1/1;
	max-width: 30ch;
	margin: 0 auto;
	-webkit-box-shadow:inset 0 0 5px 5px rgba(0,0,0,.2);
	box-shadow:inset 0 0 5px 5px rgba(0,0,0,.2);
	transition: background-color 0.3s ease-in-out;
}

body.photohome .self {
	background: var(--color-cool-light);
}

body.designhome .self {
	background: var(--color-mid);
}

.sidebar:has(.bs-main:hover) .self {
	background: var(--color-warm-light);
}

.sidebar:has(.bs-photo:hover) .self {
	background: var(--color-cool-light);
}

.sidebar:has(.bs-design:hover) .self {
	background: var(--color-mid);
}

.sidebar:has(.site-art:hover) .self {
	background: var(--color-warm-dark);
}

.sidebar:has(.site-design:hover) .self {
	background: var(--color-mid);
}

/*
CLUSTER
More info: https://every-layout.dev/layouts/cluster/
A layout that lets you distribute items with consitent
spacing, regardless of their size

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--cluster-horizontal-alignment (flex-start) How items should align
horizontally. Can be any acceptable flexbox aligmnent value.

--cluster-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-m));
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

/* 
FLOW COMPOSITION 
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/quick-tip/flow-utility/ 
*/

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */

.grid {
  display: grid;
  grid-template-columns: repeat(
    var(--grid-placement, auto-fill),
    minmax(var(--grid-min-item-size, 16rem), 1fr)
  );
  gap: var(--gutter, var(--space-s-l));
}

/* A split 50/50 layout */

.grid[data-layout='halves'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 33rem);
}

/* Three column grid layout */

.grid[data-layout='thirds'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33%, 20rem);
}

/*
REPEL
A little layout that pushes items away from each other where
there is space in the viewport and stacks on small viewports

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--repel-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, var(--space-s-m));
}

.repel[data-nowrap] {
  flex-wrap: nowrap;
}

/* 
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area

EXCEPTIONS
.sidebar[data-direction='rtl']: flips the sidebar to be on the right 
*/

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}

.sidebar > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

/*
SWITCHER
More info: https://every-layout.dev/layouts/switcher/
A layout that allows you to lay **2** items next to each other
until there is not enough horizontal space to allow that.

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between each item

--switcher-target-container-width (40rem): How large the container
needs to be to allow items to sit inline with each other

--switcher-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
  align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}

/* Max 2 items,
so anything greater than 2 is full width */

.switcher > :nth-child(n + 3) {
  flex-basis: 100%;
}

/*
WRAPPER COMPOSITION 
A common wrapper/container
*/

.wrapper {
  margin-inline: auto;
  max-width: clamp(16rem, var(--wrapper-max-width, 100vw), 80rem);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

/* 
REGION UTILITY
Consistent block padding for page sections
*/

.region {
  padding-block: var(--region-space, var(--space-xl-2xl));
}

/* 
VISUALLY HIDDEN UTILITY
Info: https://piccalil.li/quick-tip/visually-hidden/ 
*/

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}