/* anotherlookreviews.com - custom layer over Pico.css (loaded from the CDN first)
   Palette ice-steel, Work Sans display, Merriweather body, light theme only. */

:root{color-scheme:only light}

:root,
html:root[data-theme="light"]{
  color-scheme:only light;
  --bg:#F7F9FB;
  --surface:#E7ECF1;
  --ink:#1F2933;
  --muted:#52606D;
  --accent:#3E5C76;
  --accent-ink:#FFFFFF;
  --font-display:"Work Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:"Merriweather",Georgia,"Times New Roman",serif;

  --pico-font-family:var(--font-body);
  --pico-font-family-sans-serif:var(--font-body);
  --pico-background-color:#F7F9FB;
  --pico-color:#1F2933;
  --pico-muted-color:#52606D;
  --pico-primary:#3E5C76;
  --pico-primary-background:#3E5C76;
  --pico-primary-underline:#3E5C76;
  --pico-primary-hover:#1F2933;
  --pico-primary-hover-background:#3E5C76;
  --pico-primary-inverse:#FFFFFF;
  --pico-h1-color:#1F2933;
  --pico-h2-color:#1F2933;
  --pico-h3-color:#1F2933;
  --pico-card-background-color:transparent;
  --pico-card-box-shadow:none;
  --pico-border-radius:4px;
}

/* layout variables live on body so media queries can change them simply */
body{
  --gutter:1rem;
  --band:3rem;
  --offset:8px;
  --bar:5px;
  --pad:max(var(--gutter),calc((100% - 760px) / 2));
}
@media (min-width:480px){
  body{--gutter:1.25rem}
}
@media (min-width:768px){
  body{--gutter:1.5rem;--band:4.25rem;--offset:10px;--bar:6px}
}
@media (min-width:1024px){
  body{--band:5.25rem;--offset:14px;--bar:8px}
}

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

html{
  font-size:100%;
  background-color:var(--bg);
  color:var(--ink);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background-color:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:400;
  line-height:1.75;
  overflow-wrap:break-word;
}
@media (min-width:768px){ body{font-size:1.0625rem} }
@media (min-width:1024px){ body{font-size:1.125rem} }

body > header,
body > main,
body > footer{
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

a{
  color:var(--accent);
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease,transform .18s ease,filter .18s ease;
}
a:hover{color:var(--ink)}
a:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
  box-shadow:none;
  border-radius:3px;
}

/* ---------- masthead: brand left, short nav right, one hairline ---------- */
.masthead{
  background-color:var(--bg);
  color:var(--ink);
  border-bottom:1px solid var(--accent);
}
.masthead__in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.1rem 1.5rem;
  padding:.75rem var(--pad) .35rem;
}
.masthead__brand{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem .7rem;
  min-height:44px;
}
.brand{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.1rem,.95rem + .8vw,1.4rem);
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--ink);
  text-decoration:none;
}
.brand span{color:var(--accent)}
.brand:hover{color:var(--ink)}
.brand:hover span{color:var(--ink)}
.tag{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.75rem;
  line-height:1;
  letter-spacing:.04em;
  color:var(--accent);
  background-color:var(--surface);
  border:1px solid var(--accent);
  border-radius:4px;
  padding:.3rem .55rem;
}
.masthead nav{
  display:block;
  flex:1 1 100%;
  margin:0;
  padding:0;
  overflow:visible;
}
.masthead nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:0 1.1rem;
  margin:0;
  padding:0;
  list-style:none;
}
.masthead nav li{
  display:block;
  margin:0;
  padding:0;
  list-style:none;
}
.masthead nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin:0;
  padding:0 .15rem;
  font-family:var(--font-display);
  font-weight:500;
  font-size:.9375rem;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid transparent;
  border-radius:0;
  background-color:transparent;
}
.masthead nav a:hover{
  color:var(--accent);
  border-bottom-color:var(--accent);
  background-color:transparent;
}
@media (min-width:768px){
  .masthead__in{flex-wrap:nowrap;padding-top:.6rem;padding-bottom:.6rem}
  .masthead nav{flex:0 0 auto}
  .masthead nav ul{flex-wrap:nowrap;gap:0 1.35rem}
}

/* ---------- article sections: 760px column, alternating tone ---------- */
main > section{
  display:flow-root;
  margin:0;
  padding:var(--band) var(--pad);
  background-color:var(--bg);
  color:var(--ink);
}
main > section:nth-of-type(even){background-color:var(--surface)}
main > section[id]{scroll-margin-top:.5rem}
main > section:first-of-type{padding-top:calc(var(--band) * .8)}

article{
  display:block;
  margin:0;
  padding:0;
  background-color:transparent;
  box-shadow:none;
  border-radius:0;
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  text-align:left;
}
h1{
  font-weight:800;
  font-size:clamp(1.7rem,1.15rem + 3.2vw,3.1rem);
  line-height:1.08;
  letter-spacing:-.025em;
  margin:0 0 1.25rem;
}
h2{
  font-weight:700;
  font-size:clamp(1.4rem,1.05rem + 1.6vw,2.05rem);
  line-height:1.2;
  letter-spacing:-.015em;
  margin:0 0 1.5rem;
  padding:.2rem 0 .2rem 1rem;
  border-left:var(--bar) solid var(--accent);
}
h3{
  font-weight:700;
  font-size:1.2rem;
  line-height:1.3;
  margin:2rem 0 .75rem;
}

p{margin:0 0 1.35rem;color:var(--ink)}

.kicker{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 1rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.875rem;
  line-height:1.3;
  letter-spacing:.05em;
  color:var(--accent);
}
.kicker::before{
  content:"";
  flex:0 0 auto;
  width:.6rem;
  height:.6rem;
  background-color:var(--accent);
}
.dek{
  margin:0 0 1.5rem;
  font-size:clamp(1.05rem,.95rem + .6vw,1.3rem);
  line-height:1.6;
  color:var(--muted);
}

/* byline row: pill chips with a small marker */
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0 0 2.25rem;
  padding:0;
  list-style:none;
}
.meta li{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:0;
  padding:.4rem .9rem;
  font-family:var(--font-display);
  font-weight:500;
  font-size:.8125rem;
  line-height:1.3;
  color:var(--accent);
  background-color:transparent;
  border:1px solid var(--accent);
  border-radius:999px;
  list-style:none;
}
.meta li::before{
  content:"";
  flex:0 0 auto;
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background-color:var(--accent);
}

.lead::first-letter{
  float:left;
  font-family:var(--font-display);
  font-weight:800;
  font-size:3.7em;
  line-height:.8;
  color:var(--accent);
  padding:.1em .1em 0 0;
}

/* lists */
main ul,
main ol{
  margin:0 0 1.6rem;
  padding:0 0 0 1.25rem;
}
main li{
  margin:0 0 .65rem;
  padding-left:.25rem;
  color:var(--ink);
}
main li::marker{color:var(--accent);font-weight:700}
main ol{
  padding:0;
  list-style:none;
  counter-reset:step;
}
main ol li{
  position:relative;
  counter-increment:step;
  margin:0 0 1.15rem;
  padding:0 0 0 3.1rem;
}
main ol li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:.1rem;
  width:2.1rem;
  height:2.1rem;
  border-radius:50%;
  background-color:var(--accent);
  color:var(--accent-ink);
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  line-height:2.1rem;
  text-align:center;
}
main ol li strong{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--ink);
}

.pull{
  margin:2.25rem 0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.3rem,1.05rem + 1.2vw,1.75rem);
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--accent);
}

/* ---------- images and loops: hard offset shadow in the accent ---------- */
figure{
  display:block;
  margin:2rem 0 2.25rem;
  padding:0;
  background-color:transparent;
}
figure img,
.frame{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:4px;
  background-color:var(--surface);
  box-shadow:var(--offset) var(--offset) 0 var(--accent);
}
figure img{aspect-ratio:3 / 2;object-fit:cover}
.frame{overflow:hidden;aspect-ratio:3 / 2}
.frame.land{aspect-ratio:19 / 10}
.frame.portrait{aspect-ratio:3 / 4}
.frame video{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
  background-color:var(--surface);
}
.frame.portrait video{object-position:50% 40%}
figcaption{
  margin:1.1rem 0 0;
  font-family:var(--font-display);
  font-size:.875rem;
  line-height:1.5;
  color:var(--muted);
}
figure.tall{max-width:380px;margin-inline:auto}

@media (min-width:768px){
  figure.side{
    float:right;
    width:300px;
    max-width:44%;
    margin:.35rem 0 1.5rem 2.25rem;
  }
  figure.side.left{
    float:left;
    margin:.35rem 2.25rem 1.5rem 0;
  }
  figure.side.half{width:340px;max-width:48%}
  figure.tall.side{margin:.35rem 0 1.5rem 2.25rem}
  figure.tall.side.left{margin:.35rem 2.25rem 1.5rem 0}
}
@media (min-width:1024px){
  figure.wide{margin-inline:-80px}
}

/* ---------- calls to action: solid accent pills, one per store ---------- */
.cta{
  clear:both;
  margin:2.5rem 0 0;
}
.cta-lead{
  margin:0 0 1rem;
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.0625rem;
  line-height:1.5;
  color:var(--ink);
}
.cta-row{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.cta-row a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:3.25rem;
  padding:.6rem 2rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1rem;
  line-height:1.2;
  letter-spacing:.03em;
  text-align:center;
  text-decoration:none;
  color:var(--accent-ink);
  background-color:var(--accent);
  border:2px solid var(--accent);
  border-radius:999px;
}
.cta-row a:link,
.cta-row a:visited{color:var(--accent-ink);background-color:var(--accent)}
.cta-row a:hover,
.cta-row a:active{
  color:var(--accent-ink);
  background-color:var(--accent);
  filter:brightness(1.18);
  transform:translateY(-2px);
}
.cta-row a:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
  border-radius:999px;
}
.cta-row svg{flex:0 0 auto;width:1rem;height:1rem}
.leave-note{
  margin:.95rem 0 0;
  font-family:var(--font-body);
  font-size:.8125rem;
  line-height:1.55;
  color:var(--muted);
}
@media (min-width:480px){
  .cta-row{flex-direction:row;flex-wrap:wrap}
  .cta-row a{flex:1 1 220px;max-width:320px}
}

/* ---------- footer / imprint ---------- */
.bottom{
  background-color:var(--bg);
  color:var(--muted);
  padding:3.25rem var(--pad) 4rem;
  font-family:var(--font-body);
  font-size:.8125rem;
  line-height:1.65;
}
.bottom p,
.bottom li,
.bottom dd{color:var(--muted)}
.bottom a{color:var(--accent);text-decoration:underline}
.bottom a:hover{color:var(--ink)}
.bottom__publisher ul{
  display:grid;
  gap:.4rem 1.5rem;
  margin:0;
  padding:0;
  list-style:none;
}
.bottom__publisher li{
  margin:0;
  padding:0;
  list-style:none;
  color:var(--muted);
}
.bottom__publisher strong{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--ink);
}
.bottom nav.bottom__policies{display:block;margin:1.25rem 0 .75rem;padding:0;overflow:visible}
.bottom nav.bottom__policies ul{
  display:flex;
  flex-wrap:wrap;
  gap:0 1.35rem;
  margin:0;
  padding:0;
  list-style:none;
}
.bottom__policies li{margin:0;padding:0;list-style:none}
.bottom__policies a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin:0;
  padding:0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:.875rem;
  color:var(--accent);
}
.imprint-line{
  margin:.5rem 0 0;
  max-width:760px;
  font-size:.8125rem;
  line-height:1.7;
  color:var(--muted);
}
@media (min-width:480px){
  .bottom__publisher ul{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
}

/* ---------- about and legal pages ---------- */
.doc h1{font-size:clamp(1.7rem,1.15rem + 2.4vw,2.6rem);margin-bottom:.9rem}
.doc h2{
  font-size:clamp(1.2rem,1.05rem + .8vw,1.5rem);
  margin:2.5rem 0 1rem;
}
.doc p,
.doc li{font-size:1rem}
.doc-dates{
  margin:0 0 2rem;
  font-family:var(--font-display);
  font-size:.875rem;
  line-height:1.5;
  color:var(--muted);
}
.doc address{
  margin:0 0 1.5rem;
  font-style:normal;
  font-size:1rem;
  line-height:1.7;
  color:var(--ink);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  a,.cta-row a{transition:none}
  .cta-row a:hover{transform:none}
}