@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&display=swap');

:root{
  --bg: #ffffff;
  --fg: #1b1b1b;
  --muted: #5b5b5b;
  --accent: #7f9f63;                 /* green */
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.08);

  --gap: 20px;                        /* desktop gap between columns */
  --pad: clamp(20px, 5vw, 56px);
  --pad-top: clamp(72px, 14vh, 140px);
  --maxw: 960px;                      /* keeps both columns visually centered/tight */
  --content-offset: clamp(40px, 8vw, 80px); /* Adjusted responsive offset */

  --left-fixed: 320px;                /* fixed left column to prevent jitter */
  --right-fixed: 520px;               /* fixed right column width on desktop */
  --text-measure: 65ch; /* Slightly narrower text width */

  --font-family: 'EB Garamond', serif;
  --font-weight: 400;
  --font-size: 18px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f1115;
    --fg: #e7e7e7;
    --muted: #a5a5a5;
    --accent: #7f9f63;
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
  }
}

/* -------- Base -------- */
*{ box-sizing: border-box; }
html{ font-size: 18px; }
body{
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Links */
a, a:visited{
  color: var(--accent);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover, a:focus{
  color: var(--accent);
  text-decoration: underline;
}

/* -------- Layout -------- */
.shell {
  max-width: var(--maxw);
  margin-inline: auto; /* Center horizontally */
  padding: var(--pad);
  padding-top: 110px; /* Increased fixed top padding */
  padding-left: var(--pad); /* Revert to default padding for left */

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: start;
  justify-content: start;
  justify-items: start;
  text-align: left;
}

.left{
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 24px;                          /* internal left column spacing */
  text-align: left;
  max-width: var(--text-measure); /* Constrain width for paragraphs */

  grid-template-areas:
    "name";
}

.right{
  display: none; /* Hide the right section */
}

/* -------- Content blocks -------- */
.name{
  grid-area: name;
  margin: 0;
  font-weight: 500;
  line-height: 1.1;
  text-wrap: balance;
  font-size: 36px;            /* constant on desktop */
  white-space: nowrap;        /* no wrap until we stack */
  margin-bottom: 6px; /* Increased space after name */
}

.social{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row; /* Display links horizontally */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 0;              /* Remove conflicting gap */
  justify-content: start; /* Align links to the left */
  align-items: flex-start; /* Align text to the left */
  margin-top: 16px; /* Increased space above the social links */
  margin-bottom: 32px; /* Space below social links */
}

.social li {
  margin-right: 8px; /* Space after each word */
}

.social li:not(:last-child)::after {
  content: "/"; /* Just the slash */
  color: var(--fg); /* Revert slash color to default text color */
  font-size: 20px; /* Set font size to match social links */
  padding-left: 8px; /* Space after the slash */
}

.social a{
  color: var(--accent); /* Change link color to accent green */
  text-decoration: none;
  transition: color .15s ease;
  display: inline-block; /* Make links behave like blocks for spacing */
  padding: 0;
  font-size: 20px;
}

.social a:hover, .social a:focus{
  color: var(--accent);
  text-decoration: underline;
}

.left p:first-of-type {
  margin-top: 0; /* Space between social links and first paragraph (handled by social margin-bottom) */
}

.left p{
  margin: 0 0 0px 0;
  font-size: 20px;
  line-height: 1.3;
}

.left p + p {
  margin-top: 0; /* Decrease space between paragraphs */
}

/* -------- Single “sudden” stack change -------- */
@media (max-width: 900px){
  .shell{
    grid-template-columns: 1fr;       /* stack */
    gap: 20px;
    padding-top: 60px; /* Shift content up for narrow screens */
  }
  .right{
    max-width: 400px;                 /* narrower text block when stacked */
    margin-top: 10px;
    margin-inline: auto;              /* center it */
  }
  .name{
    font-size: 40px;
    white-space: normal;              /* allow wrapping */
  }
}

/* Smallest refinements only */
@media (max-width: 480px){
  .shell{ padding-inline: 18px; }
  .avatar img{ width: 160px; height: 160px; }
  .right p{ font-size: 16px; }
}

@media (max-height: 600px){
  .shell{ padding-block: 32px 48px; }
}

/* For mobile screens */
@media (max-width: 900px) and (pointer: coarse){
  .shell {
    padding-top: 40px;
  }
  .right {
    max-width: 380px;
  }
  .right p {
    font-size: 16px; 
  }
}

@media (max-width: 480px) and (pointer: coarse){
  .shell {
    padding-top: 32px;   /* push even higher for very small screens */
    padding-inline: 24px; /* more side breathing room */
  }
  .right {
    max-width: 340px; /* keep text extra narrow on very small phones */
  }
  .right p {
    font-size: 20px;
  }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}